Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Verification: adds in progress styling support based on body classes

Browse Source
This commit is contained in:
Brian Talbot
2013-09-02 21:20:02 -04:00
parent 1f60d018a6
commit 39d7534246
1 changed files with 148 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
lms/static/sass/views/_verification.scss
View File

@@ -125,7 +125,7 @@
}
.expandable-area {
@include transition(opacity 0.25s ease-in-out 0s);
@include transition(opacity 0.25s ease-in-out 0s, height 0.25s ease-in-out 0s);
}
// STATE: active
@@ -145,8 +145,10 @@
}
.expandable-area {
display: none;
visibility: none;
height: 0;
opacity: 0.0;
overflow: scroll;
}
}
@@ -159,7 +161,8 @@
}
.expandable-area {
display: block;
visibility: visible;
height: ($baseline*10.5);
opacity: 1.0;
}
}
@@ -1264,6 +1267,24 @@
// VIEW: requirements
&.step-requirements {
// progress nav
.progress .progress-step {
// STATE: is current
&#progress-step0 {
border-bottom: ($baseline/5) solid $m-blue-d1;
opacity: 1.0;
.wrapper-step-number {
border-color: $m-blue-d1;
}
.step-number, .step-name {
color: $m-gray-d3;
}
}
}
// progress indicator
.progress-sts-value {
width: 0%;
@@ -1396,6 +1417,37 @@
// VIEW: take cam photo
&.step-photos-cam {
// progress nav
.progress .progress-step {
// STATE: is completed
&#progress-step0 {
border-bottom: ($baseline/5) solid $m-green-l2;
.wrapper-step-number {
border-color: $m-green-l2;
}
.step-number, .step-name {
color: $m-gray-l3;
}
}
// STATE: is current
&#progress-step1 {
border-bottom: ($baseline/5) solid $m-blue-d1;
opacity: 1.0;
.wrapper-step-number {
border-color: $m-blue-d1;
}
.step-number, .step-name {
color: $m-gray-d3;
}
}
}
// progress indicator
.progress-sts-value {
width: 20%;
@@ -1405,6 +1457,37 @@
// VIEW: take id photo
&.step-photos-id {
// progress nav
.progress .progress-step {
// STATE: is completed
&#progress-step0, &#progress-step1 {
border-bottom: ($baseline/5) solid $m-green-l2;
.wrapper-step-number {
border-color: $m-green-l2;
}
.step-number, .step-name {
color: $m-gray-l3;
}
}
// STATE: is current
&#progress-step2 {
border-bottom: ($baseline/5) solid $m-blue-d1;
opacity: 1.0;
.wrapper-step-number {
border-color: $m-blue-d1;
}
.step-number, .step-name {
color: $m-gray-d3;
}
}
}
// progress indicator
.progress-sts-value {
width: 40%;
@@ -1449,6 +1532,37 @@
}
}
// progress nav
.progress .progress-step {
// STATE: is completed
&#progress-step0, &#progress-step1, &#progress-step2 {
border-bottom: ($baseline/5) solid $m-green-l2;
.wrapper-step-number {
border-color: $m-green-l2;
}
.step-number, .step-name {
color: $m-gray-l3;
}
}
// STATE: is current
&#progress-step3 {
border-bottom: ($baseline/5) solid $m-blue-d1;
opacity: 1.0;
.wrapper-step-number {
border-color: $m-blue-d1;
}
.step-number, .step-name {
color: $m-gray-d3;
}
}
}
// progress indicator
.progress-sts-value {
width: 60%;
@@ -1458,6 +1572,37 @@
// VIEW: take and review photos
&.step-confirmation {
// progress nav
.progress .progress-step {
// STATE: is completed
&#progress-step0, &#progress-step1, &#progress-step2, &#progress-step3, &#progress-step4 {
border-bottom: ($baseline/5) solid $m-green-l2;
.wrapper-step-number {
border-color: $m-green-l2;
}
.step-number, .step-name {
color: $m-gray-l3;
}
}
// STATE: is current
&#progress-step5 {
border-bottom: ($baseline/5) solid $m-blue-d1;
opacity: 1.0;
.wrapper-step-number {
border-color: $m-blue-d1;
}
.step-number, .step-name {
color: $m-gray-d3;
}
}
}
// progress indicator
.progress-sts-value {
width: 100%;