vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Nicer strength indicators

Browse source
This commit is contained in:
Joseph Schorr 2015-07-20 14:56:04 -04:00
parent 2704441eed
commit 2ab3376729
2 changed files with 44 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

57
static/css/directives/ui/strength-indicator.css
View file

@ -1,42 +1,71 @@
.strength-indicator {
display: inline-block;
}
.strength-indicator .indicator-sliver { .strength-indicator .indicator-sliver {
margin: 1px; display: inline-block;
width: 14px; margin: 0px;
height: 3px; margin-right: 2px;
width: 4px;
border: 1px solid #D5D5D5; border: 1px solid #D5D5D5;
transition: 0.5s ease; transition: 0.5s ease;
} }
.strength-indicator .strength-indicator-element.good .indicator-sliver { .strength-indicator .strength-indicator-element .indicator-sliver:nth-child(1) {
background: green; height: 10px;
border: 1px solid green;
} }
.strength-indicator .strength-indicator-element .indicator-sliver:nth-child(2) {
height: 14px;
}
.strength-indicator .strength-indicator-element .indicator-sliver:nth-child(3) {
height: 18px;
}
.strength-indicator .strength-indicator-element .indicator-sliver:nth-child(4) {
height: 22px;
}
/** Good */
.strength-indicator .strength-indicator-element.good .indicator-sliver {
background: #83D29C;
border-color: #83D29C;
}
/** Fair */
.strength-indicator .strength-indicator-element.fair .indicator-sliver { .strength-indicator .strength-indicator-element.fair .indicator-sliver {
background: orange; background: #E4C212;
border: 1px solid orange; border-color: #E4C212;
} }
.strength-indicator .strength-indicator-element.fair .indicator-sliver:last-child { .strength-indicator .strength-indicator-element.fair .indicator-sliver:last-child {
border: 1px solid #D5D5D5;
background: transparent; background: transparent;
border-color: #D5D5D5;
} }
/** Bairly */
.strength-indicator .strength-indicator-element.barely .indicator-sliver { .strength-indicator .strength-indicator-element.barely .indicator-sliver {
background: rgb(255, 61, 0); background: rgb(255, 155, 0);
border: 1px solid rgb(255, 61, 0); border-color: rgb(255, 155, 0);
} }
.strength-indicator .strength-indicator-element.barely .indicator-sliver:last-child { .strength-indicator .strength-indicator-element.barely .indicator-sliver:last-child {
border: 1px solid #D5D5D5;
background: transparent; background: transparent;
border-color: #D5D5D5;
} }
.strength-indicator .strength-indicator-element.barely .indicator-sliver:nth-child(3) { .strength-indicator .strength-indicator-element.barely .indicator-sliver:nth-child(3) {
border: 1px solid #D5D5D5;
background: transparent; background: transparent;
border-color: #D5D5D5;
} }
/** Poor */
.strength-indicator .strength-indicator-element.poor .indicator-sliver:first-child { .strength-indicator .strength-indicator-element.poor .indicator-sliver:first-child {
border: 1px solid red;
background: red; background: red;
border-color: red;
} }

5
static/directives/strength-indicator.html
View file

@ -1,6 +1,3 @@
<span class="strength-indicator-element" ng-class="strengthClass"> <span class="strength-indicator-element" ng-class="strengthClass">
<span class="indicator-sliver"></span> <span class="indicator-sliver"></span><span class="indicator-sliver"></span><span class="indicator-sliver"></span><span class="indicator-sliver"></span>
<span class="indicator-sliver"></span>
<span class="indicator-sliver"></span>
<span class="indicator-sliver"></span>
</span> </span>