Verification: revised Sass organization - WIP

lms/static/sass/base/_variables.scss

+// base
 $baseline: 20px;
 
+// ====================
+
+// LAYOUT: grid
 $gw-column: 80px;
 $gw-gutter: 20px;
-
 $fg-column: $gw-column;
 $fg-gutter: $gw-gutter;
 $fg-max-columns: 12;
 $fg-max-width: 1400px;
 $fg-min-width: 810px;
 
-// fonts
+// ====================
+
+// FONTS
 $sans-serif: 'Open Sans', $verdana;
 $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
 $body-font-family: $sans-serif;
 $serif: $georgia;
 
+// ====================
+
+// MISC: base fonts/colors
 $body-font-size: em(14);
 $body-line-height: golden-ratio(.875em, 1);
 $base-font-color: rgb(60,60,60);
@@ -23,6 +31,9 @@ $base-font-color: rgb(60,60,60);
 $lighter-base-font-color: rgb(100,100,100);
 $very-light-text: #fff;
 
+// ====================
+
+// COLORS: misc.
 $white: rgb(255,255,255);
 $black: rgb(0,0,0);
 $blue: rgb(29,157,217);
@@ -38,11 +49,11 @@ $sidebar-color: rgb(246, 246, 246);
 $outer-border-color: rgb(170, 170, 170);
 $green: rgb(37, 184, 90);
 
-// old variables
+// COLORS: old variables
 $light-gray: #ddd;
 $dark-gray: #333;
 
-// edx.org marketing site variables
+// COLORS: edx.org marketing site variables
 $m-gray: #8A8C8F;
 $m-gray-l1: #97999B;
 $m-gray-l2: #A4A6A8;
@@ -70,6 +81,8 @@ $m-pink-d1: #A0255B;
 $m-pink-d2: #8C204F;
 $m-pink-d3: #771C44;
 
+// ====================
+
 $m-base-font-size: em(15);
 
 $base-font-color: rgb(60,60,60);
@@ -90,57 +103,56 @@ $courseware-footer-border: none;
 $courseware-footer-shadow: none;
 $courseware-footer-margin: 0px;
 
+// ====================
 
-// actions
+// ACTIONS: general
 $button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
 $button-bg-color: transparent;
 $button-bg-hover-color: #fff;
 
-// actions - primary
+// ACTIONS: primary
 $action-primary-bg: $m-blue-d3;
 $action-primary-fg: $white;
 $action-primary-shadow: $m-blue-d4;
 
-// focused - hover/active pseudo states
+// ACTIONS: primary - focused - hover/active pseudo states
 $action-primary-focused-bg: $m-blue-d1;
 $action-primary-focused-fg: $white;
 
-// current or active navigation item
+// ACTIONS: primary - current or active navigation item
 $action-primary-active-bg: $m-blue;
 $action-primary-active-fg: $m-blue-d3;
 $action-primary-active-shadow: $m-blue-d2;
 $action-primary-active-focused-fg: $m-blue-d4;
 $action-primary-active-focused-shadow: $m-blue-d3;
 
-// disabled
+// ACTIONS: disabled
 $action-primary-disabled-bg: $m-gray-d3;
 $action-prmary-disabled-fg: $white;
 
-
-
-// actions - secondary
+// ACTIONS: secondary
 $action-secondary-bg: $m-pink;
 $action-secondary-fg: $white;
 $action-secondary-shadow: $m-pink-d2;
 
-// focused - hover/active pseudo states
+// ACTIONS: secondary - focused - hover/active pseudo states
 $action-secondary-focused-bg: $m-pink-l3;
 $action-secondary-focused-fg: $white;
 
-// current or active navigation item
+// ACTIONS: secondary - current or active navigation item
 $action-secondary-active-bg: $m-pink-l2;
 $action-secondary-active-fg: $m-pink-d1;
 $action-secondary-active-shadow: $m-pink-d1;
 $action-secondary-active-focused-fg: $m-pink-d3;
 $action-secondary-active-focused-shadow: $m-pink-d2;
 
-// disabled
+// ACTIONS: secondary - disabled
 $action-secondary-disabled-bg: $m-gray-d3;
 $action-secondary-disabled-fg: $white;
 
+// ====================
 
-
-
+// MISC: visual horizontal rules
 $faded-hr-image-1: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1) 50%, rgba(200,200,200, 0));
 $faded-hr-image-2: linear-gradient(180deg, rgba(200,200,200, 0) 0%, rgba(200,200,200, 1));
 $faded-hr-image-3: linear-gradient(180deg, rgba(200,200,200, 1) 0%, rgba(200,200,200, 0));
@@ -148,51 +160,54 @@ $faded-hr-image-4: linear-gradient(180deg, rgba(240,240,240, 0) 0%, rgba(240,240
 $faded-hr-image-5: linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.8) 50%, rgba(255,255,255, 0));
 $faded-hr-image-6: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.6) 50%, rgba(255,255,255, 0));
 
+// MISC: dashboard
 $dashboard-profile-header-image: linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245));
 $dashboard-profile-header-color: transparent;
 $dashboard-profile-color: rgb(252,252,252);
 $dot-color: $light-gray;
 
+// MISC: course assets
 $content-wrapper-bg: $white;
 $course-bg-color: #d6d6d6;
 $course-bg-image: url(../images/bg-texture.png);
 $account-content-wrapper-bg: shade($body-bg, 2%);
-
 $course-profile-bg: rgb(245,245,245);
 $course-header-bg: rgba(255,255,255, 0.93);
 
+// MISC: borders
 $border-color-1: rgb(190,190,190);
 $border-color-2: rgb(200,200,200);
 $border-color-3: rgb(100,100,100);
 $border-color-4: rgb(252,252,252);
 
+// MISC: links and buttons
 $link-color: $blue;
 $link-color-d1: $m-blue-d2;
 $link-hover: $pink;
 $site-status-color: $pink;
-
 $button-color: $blue;
 $button-archive-color: #eee;
 
+// MISC: shadow, form, modal
 $shadow-color: $blue;
+$form-bg-color: #fff;
+$modal-bg-color: rgb(245,245,245);
 
+// MISC: sidebar
 $sidebar-chapter-bg-top: rgba(255, 255, 255, .6);
 $sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0);
 $sidebar-chapter-bg: #eee;
 $sidebar-active-image: linear-gradient(top, #e6e6e6, #d6d6d6);
 
-$form-bg-color: #fff;
-$modal-bg-color: rgb(245,245,245);
-
-//TOP HEADER IMAGE MARGIN
+// TOP HEADER IMAGE MARGIN
 $header_image_margin: -69px;
 
 //FOOTER MARGIN
 $footer_margin: ($baseline/4) 0 ($baseline*1.5) 0;
 
-//-----------------
-//  CSS BG Images
-//-----------------
+// ====================
+
+// IMAGES: backgrounds
 $homepage-bg-image: '../images/homepage-bg.jpg';
 
 $login-banner-image: url(../images/bg-banner-login.png);
@@ -200,11 +215,11 @@ $register-banner-image: url(../images/bg-banner-register.png);
 
 $video-thumb-url: '../images/courses/video-thumb.jpg';
 
-//-----------------
-//  Newer variables ported from Studio
-//-----------------
+// ====================
+
+// SPLINT: new standards
 
-// fonts
+// SPLINT: fonts
 $f-serif: 'Bree Serif', Georgia, Cambria, 'Times New Roman', Times, serif;
 $f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
 $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;

lms/static/sass/elements/_typography.scss

@@ -134,45 +134,40 @@
 // icons
 .t-icon1 {
   @include font-size(48);
-  @include line-height(48);
 }
 
 .t-icon2 {
   @include font-size(36);
-  @include line-height(36);
 }
 
 .t-icon3 {
   @include font-size(24);
-  @include line-height(24);
 }
 
 .t-icon4 {
   @include font-size(18);
-  @include line-height(18);
 }
 
 .t-icon5 {
   @include font-size(16);
-  @include line-height(16);
 }
 
 .t-icon6 {
   @include font-size(14);
-  @include line-height(14);
 }
 
 .t-icon7 {
   @include font-size(12);
-  @include line-height(12);
 }
 
 .t-icon8 {
   @include font-size(11);
-  @include line-height(11);
 }
 
 .t-icon9 {
   @include font-size(10);
-  @include line-height(10);
+}
+
+.t-icon-solo {
+  @include line-height(0);
 }

lms/static/sass/views/_verification.scss

 // lms - views - verification flow
 // ====================
 
-body.register.verification {
+// some nasty resets and standard styles
+body.register.verification-process {
   font-family: 'Open Sans', sans-serif;
 
-// some nasty resets and standard styles
-  h1, h2, h3, h4, h5, h6, p, input {
-    font-family: 'Open Sans', sans-serif;
+  // reset: typography - heading
+  h1, h2, h3, h4, h5 ,h6 {
+    @extend .t-title;
+  }
+
+  // reset: typography - copy
+  p, ol, ul, dl, input, select, textarea {
+    font-family: $f-sans-serif;
   }
 
+  // reset: copy/text
   p {
-    margin-bottom: ($baseline*.75);
+    margin-bottom: ($baseline*0.75);
+  }
+
+  dt {
+    margin: 0 0 .5em 0;
+    font-weight: bold;
   }
 
+  dd {
+    margin: 0 0 1em 0;
+  }
+
+  dl dl {
+    margin: ($baseline/4) 0 0 ($baseline/2);
+  }
+
+  // reset: forms
   input {
     font-style: normal;
     font-weight: 400;
@@ -25,8 +46,6 @@ body.register.verification {
     font-weight: 400;
   }
 
-
-
   .faq {
     @extend .t-copy-sub2;
 
@@ -36,21 +55,11 @@ body.register.verification {
     }
   }
 
-  dt {
-    margin: 0 0 .5em 0;
-    font-weight: bold;
-  }
-
-  dd {
-    margin: 0 0 1em 0;
-  }
 
-  dl dl {
-    margin: ($baseline/4) 0 0 ($baseline/2);
-  }
+  // ====================
 
 
-// basic reusable bits
+  // elements: layout
   .content-wrapper {
     background: none repeat scroll 0 0 #F7F7F7;
     padding-bottom: 0;
@@ -61,6 +70,13 @@ body.register.verification {
     padding: ($baseline*1.5) ($baseline*1.5) ($baseline*2) ($baseline*1.5);
   }
 
+  // elements: common UI
+  .title {
+    @extend .t-title5;
+    margin-bottom: ($baseline/2);
+    font-weight: 300;
+  }
+
   .tip {
     @extend .t-copy-sub2;
     @include transition(color 0.15s ease-in-out 0s);
@@ -69,6 +85,11 @@ body.register.verification {
     color: $lighter-base-font-color;
   }
 
+
+  // ====================
+
+
+  // elements: header
   .page-header {
 
     .title {
@@ -83,14 +104,7 @@ body.register.verification {
     }
   }
 
-  .title {
-    @extend .t-title5;
-    margin-bottom: ($baseline/2);
-    font-weight: 300;
-  }
-
-
-
+  // elements: page options
   .pay-options {
     list-style-type: none;
     margin: 0;
@@ -120,9 +134,10 @@ body.register.verification {
         vertical-align: middle;
       }
     }
-
   }
 
+
+  // elements - controls
  .m-btn-primary {
     margin-bottom: 0;
     padding: 0;
@@ -155,6 +170,7 @@ body.register.verification {
 
     }
 
+    // NOTE: need to change this to a semantic class
     &.green {
       box-shadow: 0 2px 1px rgba(2,100,2,1);
       background-color: rgba(0,136,1,1);
@@ -168,6 +184,10 @@ body.register.verification {
   }
 
 
+  // ====================
+
+
+  // nav/status: progress
   .progress {
     @include clearfix;
     position: relative;
@@ -175,7 +195,7 @@ body.register.verification {
     border-bottom: 1px solid #ccc;
     padding-bottom: $baseline;
 
-    ol {
+    .progress-steps {
       margin: 0;
       padding: 0;
     }
@@ -199,7 +219,6 @@ body.register.verification {
         }
       }
 
-
       &.done {
         color: #008801;
 
@@ -210,8 +229,6 @@ body.register.verification {
       }
     }
 
-
-
     .number {
       height: 2em;
       width: 2em;
@@ -246,7 +263,6 @@ body.register.verification {
       width: 20%;
       background-color: #008801;
     }
-
   }
 
   .support {
@@ -254,12 +270,11 @@ body.register.verification {
   }
 
 
+// ====================
 
 
-
-
-// select a track page
-  &.select-track {
+// VIEW: select a track
+  &.step-select-track {
 
     .select {
       @include clearfix();
@@ -353,8 +368,12 @@ body.register.verification {
     }
   }
 
-// requirements page
-  &.requirements {
+
+  // ====================
+
+
+  // VIEW: requirements
+  &.step-requirements {
 
     .section-head .title {
       @extend .t-title4;
@@ -437,14 +456,17 @@ body.register.verification {
           margin-left: 65px;
         }
       }
-
     }
-
   }
 
-// take and review photos page
-  &.photos {
-    // for dev placement only
+
+  // ====================
+
+
+  // VIEW: take and review photos
+  &.step-photos {
+
+    // TEMP: for dev placement only
     .placeholder-cam,
     .placeholder-photo  {
       height: 300px;
@@ -546,25 +568,21 @@ body.register.verification {
         float: left;
         padding-right: $baseline;
       }
-
     }
 
     .photo-tips {
       width: 45%;
       float: left;
 
-        ul {
-          margin: 0;
-          padding: 0;
-          list-style-type: none;
-        }
-
-        li {
-          margin-bottom: $baseline;
-        }
-
-
+      ul {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+      }
 
+      li {
+        margin-bottom: $baseline;
+      }
     }
 
     .next-step {
@@ -589,5 +607,4 @@ body.register.verification {
       margin-right: $baseline;
     }
   }
-
 }