Verification: adding in more Sass variable/mixin/extend scaffolding

lms/static/sass/application.scss.mako

@@ -44,6 +44,7 @@
 
 // base - elements
 @import 'elements/typography';
+@import 'elements/controls';
 
 // base - specific views
 @import 'views/verification';

lms/static/sass/base/_mixins.scss

@@ -41,24 +41,38 @@
   @return #{$pxval / $base}em;
 }
 
-// Line-height
+// line-height
 @function lh($amount: 1) {
   @return $body-line-height * $amount;
 }
 
+// ====================
 
-
-
-
-//-----------------
-//  Theme Mixin Styles
-//-----------------
+// theme mixin styles
 @mixin login_register_h1_style {}
-
 @mixin footer_references_style {}
 
 // ====================
 
+// extends - UI - visual link
+.ui-fake-link {
+  cursor: pointer;
+}
+
+// extends - UI - functional disable
+.ui-disabled {
+  pointer-events: none;
+  outline: none;
+}
+
+// extends - UI - depth levels
+.ui-depth0 { z-index: 0; }
+.ui-depth1 { z-index: 10; }
+.ui-depth2 { z-index: 100; }
+.ui-depth3 { z-index: 1000; }
+.ui-depth4 { z-index: 10000; }
+.ui-depth5 { z-index: 100000; }
+
 // extends -hidden elems - screenreaders
 .text-sr {
   border: 0;
@@ -70,3 +84,39 @@
   position: absolute;
   width: 1px;
 }
+
+// extends - UI - removes list styling/spacing when using uls, ols for navigation and less content-centric cases
+.ui-no-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+
+  li, dt, dd {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+// extends - text - image-replacement hidden text
+.text-hide {
+  text-indent: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+// extends - text - wrapping
+.text-wrap {
+  text-wrap: wrap;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  word-wrap: break-word;
+}
+
+// extends - text - text overflow by ellipsis
+.text-truncated {
+  @include box-sizing(border-box);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

lms/static/sass/base/_variables.scss

@@ -15,7 +15,7 @@ $fg-min-width: 810px;
 // ====================
 
 // FONTS
-$sans-serif: 'Open Sans', $verdana;
+$sans-serif: 'Open Sans', $verdana, sans-serif;
 $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
 $body-font-family: $sans-serif;
 $serif: $georgia;
@@ -35,7 +35,17 @@ $very-light-text: #fff;
 
 // COLORS: misc.
 $white: rgb(255,255,255);
+$white-t0: rgba($white, 0.125);
+$white-t1: rgba($white, 0.25);
+$white-t2: rgba($white, 0.5);
+$white-t3: rgba($white, 0.75);
+
 $black: rgb(0,0,0);
+$black-t0: rgba($black, 0.125);
+$black-t1: rgba($black, 0.25);
+$black-t2: rgba($black, 0.5);
+$black-t3: rgba($black, 0.75);
+
 $blue: rgb(29,157,217);
 $pink: rgb(182,37,104);
 $yellow: rgb(255, 252, 221);
@@ -47,6 +57,7 @@ $dark-gray: rgb(51, 51, 51);
 $border-color: rgb(200, 200, 200);
 $sidebar-color: rgb(246, 246, 246);
 $outer-border-color: rgb(170, 170, 170);
+
 $green: rgb(37, 184, 90);
 
 // COLORS: old variables
@@ -63,11 +74,17 @@ $m-gray-d1: #7D7F83;
 $m-gray-d2: #707276;
 $m-gray-d3: #646668;
 $m-gray-d4: #050505;
+$m-gray-t0: rgba($m-gray,0.125);
+$m-gray-t1: rgba($m-gray,0.25);
+$m-gray-t2: rgba($m-gray,0.50);
+$m-gray-t3: rgba($m-gray,0.75);
 
 $m-blue: #1AA1DE;
 $m-blue-l1: #2BACE6;
 $m-blue-l2: #42B5E9;
 $m-blue-l3: #59BEEC;
+$m-blue-l4: tint($m-blue,90%);
+$m-blue-l5: tint($m-blue,95%);
 $m-blue-d1: #1790C7;
 $m-blue-d2: #1580B0;
 $m-blue-d3: #126F9A;
@@ -81,6 +98,30 @@ $m-pink-d1: #A0255B;
 $m-pink-d2: #8C204F;
 $m-pink-d3: #771C44;
 
+$m-green: rgb(0, 136, 1);
+$m-green-s1: rgb(96, 188, 97);
+$m-green-l1: tint($m-green,20%);
+$m-green-l2: tint($m-green,40%);
+$m-green-l3: tint($m-green,60%);
+$m-green-l4: tint($m-green,90%);
+$m-green-l5: tint($m-green,95%);
+$m-green-d1: shade($m-green,20%);
+$m-green-d2: shade($m-green,40%);
+$m-green-d3: shade($m-green,60%);
+$m-green-d4: shade($m-green,90%);
+$m-green-t0: rgba($m-green,0.125);
+$m-green-t1: rgba($m-green,0.25);
+$m-green-t2: rgba($m-green,0.50);
+$m-green-t3: rgba($m-green,0.75);
+
+// ====================
+
+// shadows
+$shadow: rgba(0,0,0,0.2);
+$shadow-l1: rgba(0,0,0,0.1);
+$shadow-l2: rgba(0,0,0,0.05);
+$shadow-d1: rgba(0,0,0,0.4);
+
 // ====================
 
 $m-base-font-size: em(15);

lms/static/sass/elements/_controls.scss

+// lms - elements - controls
+// ====================
+
+.btn {
+  @include box-sizing(border-box);
+  @include transition(color 0.25s ease-in-out, background 0.25s ease-in-out, box-shadow 0.25s ease-in-out);
+  display: inline-block;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover, &:active {
+    text-decoration: none;
+  }
+
+  &.disabled, &[disabled] {
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+.btn-pill {
+  border-radius: $baseline/5;
+}
+
+.btn-rounded {
+  border-radius: ($baseline/2);
+}
+
+.btn-edged {
+  border-radius: ($baseline/10);
+}
+
+// primary button
+.btn-primary {
+  @extend .t-weight3;
+  @extend .btn;
+  @extend .btn-edged;
+  border: none;
+  padding: ($baseline*0.75) $baseline;
+  text-align: center;
+
+  &:hover, &:active {
+
+  }
+
+  &.current, &.active {
+
+    &:hover, &:active {
+
+    }
+  }
+
+  &.disabled, &.is-disabled, &[disabled] {
+    background: $m-gray-l2;
+    color: $white-t3;
+  }
+}
+
+// blue primary button
+.btn-primary-blue {
+  @extend .btn-primary;
+  box-shadow: 0 2px 1px 0 $m-blue-d4;
+  background: $m-blue-d3;
+  color: $white;
+
+  &:hover, &:active {
+    background: $m-blue-d1;
+    color: $white;
+  }
+
+  &.current, &.active {
+    box-shadow: inset 0 2px 1px 1px $m-blue-d2;
+    background: $m-blue;
+    color: $m-blue-d2;
+
+    &:hover, &:active {
+      box-shadow: inset 0 2px 1px 1px $m-blue-d3;
+      color: $m-blue-d3;
+    }
+  }
+
+  &.disabled, &[disabled] {
+    box-shadow: none;
+  }
+}
+
+// pink primary button
+.btn-primary-pink {
+  @extend .btn-primary;
+  box-shadow: 0 2px 1px 0 $m-pink-d2;
+  background: $m-pink;
+  color: $white;
+
+  &:hover, &:active {
+    background: $m-pink-l3;
+    color: $white;
+  }
+
+  &.current, &.active {
+    box-shadow: inset 0 2px 1px 1px $m-pink-d1;
+    background: $m-pink-l2;
+    color: $m-pink-d1;
+
+    &:hover, &:active {
+      box-shadow: inset 0 2px 1px 1px $m-pink-d2;
+      color: $m-pink-d3;
+    }
+  }
+
+  &.disabled, &[disabled] {
+    box-shadow: none;
+  }
+}
+
+// green primary button
+.btn-primary-green {
+  @extend .btn-primary;
+  box-shadow: 0 2px 1px 0 $m-green-d2;
+  background: $m-green-d1;
+  color: $white;
+
+  &:hover, &:active {
+    background: $m-green-s1;
+    color: $white;
+  }
+
+  &.current, &.active {
+    box-shadow: inset 0 2px 1px 1px $m-green;
+    background: $m-green-l2;
+    color: $m-green;
+
+    &:hover, &:active {
+      box-shadow: inset 0 2px 1px 1px $m-green-d1;
+      color: $m-green-d1;
+    }
+  }
+
+  &.disabled, &[disabled] {
+    box-shadow: none;
+  }
+}
+
+// ====================
+
+  // application: canned actions
+  .btn {
+    font-family: $f-sans-serif;
+  }
+
+  .btn-large {
+    @extend .t-action1;
+    @extend .t-weight3;
+    display: block;
+    padding:($baseline*0.75) ($baseline*1.5);
+  }
+
+  .btn-avg {
+    @extend .t-action2;
+    @extend .t-weight3;
+  }
+
+  .btn-blue {
+    @extend .btn-primary-blue;
+    margin-bottom: $baseline;
+
+
+    &:last-child {
+      margin-bottom: none;
+    }
+  }
+
+  .btn-pink {
+    @extend .btn-primary-pink;
+    margin-bottom: $baseline;
+
+
+    &:last-child {
+      margin-bottom: none;
+    }
+  }

lms/static/sass/elements/_typography.scss

@@ -171,3 +171,147 @@
 .t-icon-solo {
   @include line-height(0);
 }
+
+// ====================
+
+// typography weights
+.t-weight1 {
+  font-weight: 300;
+}
+
+.t-weight2 {
+  font-weight: 400;
+}
+
+.t-weight3 {
+  font-weight: 500;
+}
+
+.t-weight4 {
+  font-weight: 600;
+}
+
+.t-weight5 {
+  font-weight: 700;
+}
+
+// ====================
+
+// application: canned headings
+.hd-lv1 {
+  @extend .t-title1;
+  @extend .t-weight1;
+  color: $m-gray-d4;
+  margin: 0 0 ($baseline*2) 0;
+}
+
+.hd-lv1-alt {
+  @extend .t-title2;
+  @extend .t-weight1;
+  color: $m-gray-d4;
+  margin: 0 0 ($baseline*2) 0;
+}
+
+.hd-lv2 {
+  @extend .t-title4;
+  @extend .t-weight1;
+  margin: 0 0 ($baseline*0.75) 0;
+  border-bottom: 1px solid $m-gray-l3;
+  padding-bottom: ($baseline/2);
+  color: $m-gray-d4;
+}
+
+.hd-lv2-alt {
+  @extend .t-title4;
+  @extend .t-weight1;
+  margin: 0 0 ($baseline*0.75) 0;
+  border-bottom: 1px solid $m-gray-t1;
+  padding-bottom: ($baseline/2);
+  color: $m-blue-d1;
+  text-transform: uppercase;
+}
+
+.hd-lv3 {
+  @extend .t-title6;
+  @extend .t-weight4;
+  margin: 0 0 ($baseline/4) 0;
+  color: $m-gray-d4;
+}
+
+.hd-lv3-alt {
+  @extend .t-title6;
+  @extend .t-weight3;
+  margin: 0 0 ($baseline/4) 0;
+  color: $m-gray-d4;
+}
+
+.hd-lv4 {
+  @extend .t-title6;
+  @extend .t-weight2;
+  margin: 0 0 $baseline 0;
+  color: $m-gray-d4;
+}
+
+.hd-lv4-alt {
+  @extend .t-title6;
+  @extend .t-weight4;
+  margin: 0 0 ($baseline) 0;
+  color: $m-gray-d4;
+  text-transform: uppercase;
+}
+
+.hd-lv5 {
+  @extend .t-title7;
+  @extend .t-weight4;
+  margin: 0 0 ($baseline/4) 0;
+  color: $m-gray-d4;
+}
+
+// application: canned copy
+.copy-base {
+  @extend .t-copy-base;
+  color: $m-gray-d2;
+}
+
+.copy-lead1 {
+  @extend .t-copy-lead2;
+  color: $m-gray;
+}
+
+.copy-detail {
+  @extend .t-copy-sub1;
+  @extend .t-weight3;
+  color: $m-gray-d1;
+}
+
+.copy-metadata {
+  @extend .t-copy-sub2;
+  color: $m-gray-d1;
+
+
+  .copy-metadata-value {
+    @extend .t-weight2;
+  }
+
+  .copy-metadata-value {
+    @extend .t-weight4;
+  }
+}
+
+// application: canned links
+.copy-link {
+  border-bottom: 1px dotted transparent;
+
+  &:hover, &:active {
+    border-color: $m-blue-d2;
+  }
+}
+
+.copy-badge {
+  @extend .t-title8;
+  @extend .t-weight5;
+  border-radius: ($baseline/5);
+  padding: ($baseline/2) $baseline;
+  text-transform: uppercase;
+}
+