stubbed out settings list and various styling

This commit is contained in:
Kyle Spearrin 2016-09-19 23:04:32 -04:00
parent 1b8df50f27
commit 68337d6523
5 changed files with 69 additions and 10 deletions

View File

@ -5,14 +5,48 @@
<div class="list">
<div class="list-section">
<div class="list-section-header">
Manage
Security
</div>
<div class="list-section-items">
<a class="list-section-item" href="#">
Folders
Lock Options
</a>
<a class="list-section-item" href="#" ng-click="sync()">
<a class="list-section-item" href="#">
Unlock with PIN Code
</a>
<a class="list-section-item" href="#">
Two-step Login
<i class="fa fa-chevron-right fa-lg"></i>
</a>
</div>
</div>
<div class="list-section">
<div class="list-section-header">
Account
</div>
<div class="list-section-items">
<a class="list-section-item" href="#">
Change Master Password
<i class="fa fa-chevron-right fa-lg"></i>
</a>
<a class="list-section-item" href="#">
Change Email
<i class="fa fa-chevron-right fa-lg"></i>
</a>
</div>
</div>
<div class="list-section">
<div class="list-section-header">
Manage
</div>
<div class="list-section-items">
<a class="list-section-item" href="">
Folders
<i class="fa fa-chevron-right fa-lg"></i>
</a>
<a class="list-section-item" href="" ng-click="sync()">
Sync
<i class="fa fa-chevron-right fa-lg"></i>
</a>
</div>
</div>
@ -21,15 +55,34 @@
Current Session
</div>
<div class="list-section-items">
<a class="list-section-item" href="#">
<a class="list-section-item" href="">
Lock
</a>
<a class="list-section-item" href="#" ng-click="logOut()">
<a class="list-section-item" href="" ng-click="logOut()">
Log out
</a>
</div>
</div>
<div class="list-section">
<div class="list-section-header">
Other
</div>
<div class="list-section-items">
<a class="list-section-item" href="#">
About
<i class="fa fa-chevron-right fa-lg"></i>
</a>
<a class="list-section-item" href="#">
Help &amp; Feedback
<i class="fa fa-chevron-right fa-lg"></i>
</a>
<a class="list-section-item" href="#">
Rate the Extension
<i class="fa fa-chevron-right fa-lg"></i>
</a>
</div>
<div class="list-section-footer">
This is a footer note.
Please consider helping us out with a good review!
</div>
</div>
</div>

View File

@ -31,7 +31,7 @@
<i class="fa fa-lg fa-clipboard"></i>
</a>
<span class="item-label">Username</span>
<span id="username">{{site.username}}</span>
<span id="username" class="monospaced">{{site.username}}</span>
</div>
<div class="list-section-item" ng-show="site.password">
<a class="btn-list" href="" title="Copy Password" ngclipboard ngclipboard-error="clipboardError(e)"
@ -43,7 +43,7 @@
</a>
<span class="item-label">Password</span>
<span ng-show="!showPassword">{{site.maskedPassword}}</span>
<span id="password" ng-show="showPassword">{{site.password}}</span>
<span id="password" ng-show="showPassword" class="monospaced">{{site.password}}</span>
</div>
</div>
</div>

View File

@ -173,6 +173,7 @@
padding: 5px 10px;
color: @gray-light;
text-transform: uppercase;
font-size: (@font-size-base - 1);
label {
font-weight: normal;
@ -287,7 +288,7 @@
.fa-chevron-right {
float: right;
margin-top: 3px;
color: @gray-light;
color: @list-icon-color;
}
&.condensed {
@ -360,7 +361,7 @@
.generate-password-block {
margin: 20px;
font-size: 20px;
font-size: 19px;
text-align: center;
white-space: nowrap;
overflow: hidden;

View File

@ -36,3 +36,7 @@ body {
top: 0;
}
}
.monospaced {
font-family: @font-family-monospace;
}

View File

@ -9,6 +9,7 @@
@border-color-dark: #ddd;
@list-item-hover: #fbfbfb;
@text-disabled: #d2d6de;
@list-icon-color: #c7c7cd;
@brand-primary: #3c8dbc;
@brand-danger: #dd4b39;