stubbed out settings list and various styling
This commit is contained in:
parent
1b8df50f27
commit
68337d6523
|
@ -5,14 +5,48 @@
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<div class="list-section">
|
<div class="list-section">
|
||||||
<div class="list-section-header">
|
<div class="list-section-header">
|
||||||
Manage
|
Security
|
||||||
</div>
|
</div>
|
||||||
<div class="list-section-items">
|
<div class="list-section-items">
|
||||||
<a class="list-section-item" href="#">
|
<a class="list-section-item" href="#">
|
||||||
Folders
|
Lock Options
|
||||||
</a>
|
</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
|
Sync
|
||||||
|
<i class="fa fa-chevron-right fa-lg"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -21,15 +55,34 @@
|
||||||
Current Session
|
Current Session
|
||||||
</div>
|
</div>
|
||||||
<div class="list-section-items">
|
<div class="list-section-items">
|
||||||
<a class="list-section-item" href="#">
|
<a class="list-section-item" href="">
|
||||||
Lock
|
Lock
|
||||||
</a>
|
</a>
|
||||||
<a class="list-section-item" href="#" ng-click="logOut()">
|
<a class="list-section-item" href="" ng-click="logOut()">
|
||||||
Log out
|
Log out
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</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 & 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">
|
<div class="list-section-footer">
|
||||||
This is a footer note.
|
Please consider helping us out with a good review!
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -31,7 +31,7 @@
|
||||||
<i class="fa fa-lg fa-clipboard"></i>
|
<i class="fa fa-lg fa-clipboard"></i>
|
||||||
</a>
|
</a>
|
||||||
<span class="item-label">Username</span>
|
<span class="item-label">Username</span>
|
||||||
<span id="username">{{site.username}}</span>
|
<span id="username" class="monospaced">{{site.username}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="list-section-item" ng-show="site.password">
|
<div class="list-section-item" ng-show="site.password">
|
||||||
<a class="btn-list" href="" title="Copy Password" ngclipboard ngclipboard-error="clipboardError(e)"
|
<a class="btn-list" href="" title="Copy Password" ngclipboard ngclipboard-error="clipboardError(e)"
|
||||||
|
@ -43,7 +43,7 @@
|
||||||
</a>
|
</a>
|
||||||
<span class="item-label">Password</span>
|
<span class="item-label">Password</span>
|
||||||
<span ng-show="!showPassword">{{site.maskedPassword}}</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -173,6 +173,7 @@
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
color: @gray-light;
|
color: @gray-light;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
font-size: (@font-size-base - 1);
|
||||||
|
|
||||||
label {
|
label {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
@ -287,7 +288,7 @@
|
||||||
.fa-chevron-right {
|
.fa-chevron-right {
|
||||||
float: right;
|
float: right;
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
color: @gray-light;
|
color: @list-icon-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.condensed {
|
&.condensed {
|
||||||
|
@ -360,7 +361,7 @@
|
||||||
|
|
||||||
.generate-password-block {
|
.generate-password-block {
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
font-size: 20px;
|
font-size: 19px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
@ -36,3 +36,7 @@ body {
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.monospaced {
|
||||||
|
font-family: @font-family-monospace;
|
||||||
|
}
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
@border-color-dark: #ddd;
|
@border-color-dark: #ddd;
|
||||||
@list-item-hover: #fbfbfb;
|
@list-item-hover: #fbfbfb;
|
||||||
@text-disabled: #d2d6de;
|
@text-disabled: #d2d6de;
|
||||||
|
@list-icon-color: #c7c7cd;
|
||||||
|
|
||||||
@brand-primary: #3c8dbc;
|
@brand-primary: #3c8dbc;
|
||||||
@brand-danger: #dd4b39;
|
@brand-danger: #dd4b39;
|
||||||
|
|
Loading…
Reference in New Issue