Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-03-23 15:29:29 +01:00
Code Issues Projects Releases Wiki Activity

tools page list items stubbed out with some styling

Browse Source
This commit is contained in:
Kyle Spearrin 2016-09-17 01:23:32 -04:00
parent 58778628de
commit 3bd24a15fc
2 changed files with 50 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/popup/app/tools/views/tools.html
View File

@ -2,5 +2,35 @@
<div class="title">Tools</div>
</div>
<div class="content content-tabs">
Some content for your tools.
<div class="list">
<div class="list-section">
<div class="list-section-items">
<a class="list-section-item wrap" href="#">
<span class="leading-icon"><i class="fa fa-refresh fa-fw"></i></span>
<span class="text">Password Generator</span>
<span class="detail">Automatically generate strong, unique passwords for your logins.</span>
</a>
<a class="list-section-item wrap" href="#">
<span class="leading-icon"><i class="fa fa-globe fa-fw"></i></span>
<span class="text">bitwarden Web Vault</span>
<span class="detail">Manage your logins from any web browser with the bitwarden web vault.</span>
</a>
<a class="list-section-item wrap" href="#">
<span class="leading-icon"><i class="fa fa-apple fa-fw"></i></span>
<span class="text">bitwarden iOS Vault</span>
<span class="detail">Manage your logins from your mobile devices with the bitwarden iOS vault.</span>
</a>
<a class="list-section-item wrap" href="#">
<span class="leading-icon"><i class="fa fa-android fa-fw"></i></span>
<span class="text">bitwarden Android Vault</span>
<span class="detail">Manage your logins from your mobile devices with the bitwarden Android vault.</span>
</a>
<a class="list-section-item wrap" href="#">
<span class="leading-icon"><i class="fa fa-cloud-upload fa-fw"></i></span>
<span class="text">Import Logins</span>
<span class="detail">Quickly bulk import your logins from other password management applications.</span>
</a>
</div>
</div>
</div>
</div>

28
src/popup/less/components.less
View File

@ -196,13 +196,22 @@
padding: 10px 10px;
background-color: white;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: @text-color;
position: relative;
z-index: 1;
&:not(.wrap) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.text, .detail {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
&:before {
content: "";
position: absolute;
@ -224,21 +233,22 @@
background-color: @list-item-hover;
}
.leading-icon {
font-size: 35px;
float: left;
display: inline-block;
margin-right: 8px;
}
.text {
display: block;
color: @text-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.detail {
font-size: @font-size-small;
color: @gray-light;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
label, .item-label {