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">
<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 &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"> <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>

View File

@ -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>

View File

@ -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;

View File

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

View File

@ -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;