Merge pull request #1351 from hypothesis/scss-variables

Convert SCSS variables into hyphen case

h/static/styles/app.scss

@@ -10,7 +10,7 @@
 
 body {
   @extend .noise;
-  font-family: $sansFontFamily;
+  font-family: $sans-font-family;
   word-wrap: break-word;
 }
 
@@ -96,8 +96,8 @@ ol {
 
 .sheet {
   @include border-radius(2px);
-  border: solid 1px $grayLighter;
-  font-family: $sansFontFamily;
+  border: solid 1px $gray-lighter;
+  font-family: $sans-font-family;
   margin-bottom: .72em;
   position: relative;
 
@@ -115,7 +115,7 @@ ol {
   font-weight: bold;
   font-size: 1.1em;
   &:hover {
-    color: $linkColorHover;
+    color: $link-color-hover;
     cursor: pointer;
     text-decoration: underline;
   }
@@ -129,7 +129,7 @@ ol {
 
   .dropdown-toggle {
     .provider {
-      color: $grayLight;
+      color: $gray-light;
       display: none;
     }
     &:hover {

h/static/styles/base.scss

 @import 'compass/css3';
 
-
 $white: #fff !default;
 $black: #000 !default;
 
 // GRAYS
 $gray: #777 !default;
-$grayDark: darken($gray, 12%) !default;
-$grayDarker: darken($gray, 36%) !default;
-$grayLight: lighten($gray, 12%) !default;
-$grayLighter: lighten($gray, 36%) !default;
-$grayLightest: #f9f9f9 !default;
+$gray-dark: #585858;
+$gray-light: #969696 !default;
+$gray-lighter: #d3d3d3 !default;
+$gray-lightest: #f9f9f9 !default;
 
 //COLORS
 $hypothered: #bd1c2b !default;
 $hypothered-desat: #bd5862 !default;
-$inputBorder: $grayLight !default;
-$inputDisabledBackground: $grayLight !default;
-$inputBackground: white !default;
 
-// Accent colors
-// -------------------------
-$blue:                  #049cdb !default;
-$blueDark:              #0064cd !default;
-$green:                 #46a546 !default;
-$red:                   #9d261d !default;
-$yellow:                #ffc40d !default;
-$orange:                #f89406 !default;
-$pink:                  #c3325f !default;
-$purple:                #7a43b6 !default;
+$error-red: $hypothered-desat !default;
+$error-red-light: #e0b0b0 !default;
+$error-red-lightest: #fff1f3 !default;
+
+$focus-yellow: #fffbeb !default;
+$focus-yellow-dark: #ece3c5 !default;
+$focus-yellow-darker: #cbbb95 !default;
+
+$button-text-color: $gray-dark !default;
+$button-background-start: $white !default;
+$button-background-end: #f0f0f0 !default;
+$button-background-gradient: top, $button-background-start, $button-background-end !default;
+
+$success-green: #76B800 !default;
 
 // Scaffolding
 // -------------------------
-$bodyBackground:        $white !default;
-$textColor:             $grayDark !default;
+$body-background:        $white !default;
+$text-color:             $gray-dark !default;
 
 //LINKS
-$linkColor:             $hypothered-desat !default;
-$linkColorHover:        $hypothered !default;
+$link-color:             $hypothered-desat !default;
+$link-color-hover:       $hypothered !default;
 
 // Typography
 // -------------------------
-$sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif !default;
-$serifFontFamily:       Georgia, "Times New Roman", Times, serif !default;
-$monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace !default;
+$sans-font-family:        "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$serif-font-family:       Georgia, "Times New Roman", Times, serif !default;
+$mono-font-family:        Monaco, Menlo, Consolas, "Courier New", monospace !default;
 
-$baseFontSize:          16px !default;
-$baseFontFamily:        $sansFontFamily !default;
-$baseLineHeight:        20px !default;
-$altFontFamily:         $serifFontFamily !default;
+$base-font-size:          16px !default;
+$base-font-family:        $sans-font-family !default;
+$base-line-height:        20px !default;
+$alt-font-family:         $serif-font-family !default;
 
-$headingsFontFamily:    inherit !default;
-$headingsFontWeight:    bold !default;
-$headingsColor:         inherit !default;
+$headings-font-family:    inherit !default;
+$headings-color:          inherit !default;
 
 //STANCE COLORS
 $positive: #3aab39;
@@ -60,8 +58,8 @@ $negative: #d11c2b;
 $neutral: #0171ba;
 
 //OTHER VARIABLES
-$highlightColor: rgba(201, 215, 241, .5);
-$highlightModeColor: rgba(255, 255, 60, .5);
+$highlight-color: rgba(201, 215, 241, .5);
+$highlight-mode-color: rgba(255, 255, 60, .5);
 $thread-padding: 1em;
 $threadexp-width: .72em;
 $score-width: 40px;
@@ -86,7 +84,7 @@ $input-border-radius: 2px;
 @mixin plainform {
   color: $gray;
   background-color: white;
-  border: 1px solid $grayLighter;
+  border: 1px solid $gray-lighter;
   border-radius: .2em;
   font-family: "Source Sans Pro", "Open Sans", sans-serif;
   font-size: 1em;
@@ -94,16 +92,13 @@ $input-border-radius: 2px;
   &:focus, &.js-focus {
     outline: 0;
     border: 1px solid $gray;
-    @include box-shadow( inset 1px 1px 6px -1px $grayLighter);
+    @include box-shadow( inset 1px 1px 6px -1px $gray-lighter);
   }
   &:disabled {
-    background-color: $grayLightest;
+    background-color: $gray-lightest;
   }
   &.ng-dirty.ng-invalid {
-    border: 1px solid $red;
-  }
-  &.ng-valid {
-    border: 1px solid $green;
+    border: 1px solid $error-red-light;
   }
 }
 
@@ -121,8 +116,8 @@ $input-border-radius: 2px;
   position: relative;
   text-decoration: none;
   text-shadow: 0 1px 2px rgba(255, 255, 255, .9);
-  color: $grayDark;
-  border-color: $grayLight $grayLight $gray;
+  color: $gray-dark;
+  border-color: $gray-light $gray-light $gray;
 
   &:hover, &:focus, &:active, &.js-focus, &.js-hover, &.js-active {
     @include background-image(
@@ -140,14 +135,14 @@ $input-border-radius: 2px;
     @include box-shadow(
       inset 0 .15em .25em rgba(0, 0, 0, .15),
       0 .05em .1em rgba(0, 0, 0, .0));
-    border-color: $grayLight $grayLight $gray;
+    border-color: $gray-light $gray-light $gray;
     top: 1px;
   }
 
   &:disabled {
-    color: $grayLight;
-    border-color: $grayLighter;
-    background: $grayLightest;
+    color: $gray-light;
+    border-color: $gray-lighter;
+    background: $gray-lightest;
     cursor: default;
   }
 }
@@ -176,7 +171,7 @@ $input-border-radius: 2px;
   @include border-radius(.1em);
   @include box-shadow(inset 2px 1px 1px hsla(0, 0%, 0%, .1));
   @include single-transition(opacity, .2s);
-  font-family: $sansFontFamily;
+  font-family: $sans-font-family;
   line-height: 29px;
   opacity: 0;
   position: relative;

h/static/styles/common.scss

@@ -8,26 +8,23 @@
 @import 'yui_grid';
 
 
-$baseFontSize: 16px;
-$baseLineHeight: 26px;
-$sansFontFamily: "Source Sans Pro", $sansFontFamily;
-$serifFontFamily: "Merriweather", $serifFontFamily;
-$headingsColor: $textColor;
+$base-font-size: 16px;
+$base-line-height: 26px;
+$sans-font-family: "Source Sans Pro", $sans-font-family;
+$serif-font-family: "Merriweather", $serif-font-family;
+$headings-color: $text-color;
 
 
 //ELEMENT STYLES////////////////////////////////
 a {
-  color: $linkColor;
-  &:hover { color: $linkColorHover; }
+  color: $link-color;
+  &:hover { color: $link-color-hover; }
   text-decoration: none;
 }
 
 body {
-  background-color: $bodyBackground;
-  color: $textColor;
-  // FIXME
-  // font-smoothing: antialiased;
-  // -webkit-font-smoothing: antialiased;
+  background-color: $body-background;
+  color: $text-color;
   line-height: 1.4;
 }
 
@@ -44,8 +41,8 @@ p {
 em { font-style: italic; }
 
 html {
-  font-size: $baseFontSize / 16px * 1em;
-  line-height: $baseLineHeight / 16px * 1em;
+  font-size: $base-font-size / 16px * 1em;
+  line-height: $base-line-height / 16px * 1em;
 
   @include yui_grid();
 
@@ -67,8 +64,8 @@ html {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: $sansFontFamily;
-  color: $headingsColor;
+  font-family: $sans-font-family;
+  color: $headings-color;
 }
 
 h1 {
@@ -116,11 +113,11 @@ h6 {
   text-decoration: underline;
   border: none;
   cursor: pointer;
-  color: $linkColor;
+  color: $link-color;
   position: static;
 
   &:hover, &:focus, &.js-focus, &.js-hover {
-    color: $linkColorHover;
+    color: $link-color-hover;
   }
 }
 
@@ -194,7 +191,7 @@ h6 {
   }
   .more, .less {
     font-size: .9em;
-    font-family: $sansFontFamily;
+    font-family: $sans-font-family;
     display: block;
     text-align: right;
   }
@@ -202,13 +199,13 @@ h6 {
 
 blockquote {
   color: $gray;
-  font-family: $serifFontFamily;
+  font-family: $serif-font-family;
   font-size: 1em;
   margin-bottom: 1em;
   padding: 0 .8em;
 
   &:before, &:after {
-    color: $grayLighter;
+    color: $gray-lighter;
     font-family: "h";
     position: absolute;
   }
@@ -252,7 +249,7 @@ blockquote {
 .dropdown-menu {
   @include rotateX(90deg);
   background: $white;
-  border: solid 1px $grayLighter;
+  border: solid 1px $gray-lighter;
   margin-top: .8em;
   top: 100%;
   float: left;
@@ -282,10 +279,10 @@ blockquote {
     }
     &.inactive {
       font-weight: 400;
-      color: $grayLighter;
+      color: $gray-lighter;
       cursor: default;
       &:hover {
-        color: $grayLighter;
+        color: $gray-lighter;
       }
       & * {
         cursor: default;
@@ -293,7 +290,7 @@ blockquote {
     }
 
     & + li {
-      border-top: dotted 1px $grayLighter;
+      border-top: dotted 1px $gray-lighter;
     }
   }
 
@@ -317,7 +314,7 @@ blockquote {
   }
 
   &:before {
-    border-bottom-color: $grayLighter;
+    border-bottom-color: $gray-lighter;
     top: -7px;
   }
 
@@ -360,8 +357,8 @@ blockquote {
 
 //TABS////////////////////////////////
 .nav-tabs {
-  background-color: $bodyBackground;
-  border: 1px none $grayLighter;
+  background-color: $body-background;
+  border: 1px none $gray-lighter;
   border-bottom-style: solid;
   padding: 1em;
 
@@ -370,9 +367,9 @@ blockquote {
     line-height: 1;
 
     a {
-      font-family: $sansFontFamily;
+      font-family: $sans-font-family;
       font-weight: bold;
-      color: $grayDark;
+      color: $gray-dark;
       cursor: pointer;
     }
 
@@ -411,7 +408,7 @@ blockquote {
 .paper {
   @include border-radius(2px);
   background: $white;
-  border: solid 1px $grayLighter;
+  border: solid 1px $gray-lighter;
 }
 
 
@@ -419,25 +416,25 @@ blockquote {
 //This is for everything that is formatted as an annotation.
 .annotation {
   @include pie-clearfix;
-  font-family: $sansFontFamily;
+  font-family: $sans-font-family;
   position: relative;
 
   &:hover fuzzytime a, &:hover .reply-count {
-    color: $linkColor;
+    color: $link-color;
   }
 
   fuzzytime {
     margin: 0 .4em;
     a {
-      color: $textColor;
-      &:hover { color: $linkColorHover; }
+      color: $text-color;
+      &:hover { color: $link-color-hover; }
       &:focus { outline: 0; }
     }
   }
 
   .reply-count {
-    color: $textColor;
-    &:hover { color: $linkColorHover; }
+    color: $text-color;
+    &:hover { color: $link-color-hover; }
     &:focus { outline: 0; }
   }
 
@@ -445,7 +442,7 @@ blockquote {
     font-weight: bold;
     font-size: 1.1em;
     &:hover {
-      color: $linkColorHover;
+      color: $link-color-hover;
       cursor: pointer;
       text-decoration: underline;
     }
@@ -501,7 +498,7 @@ blockquote {
 .annotation-displayer {
   .user {
     &:hover {
-      color: $linkColorHover;
+      color: $link-color-hover;
       cursor: pointer;
       text-decoration: underline;
     }
@@ -526,13 +523,13 @@ blockquote {
 
   .load-more {
     @include pie-clearfix;
-    font-family: $sansFontFamily;
+    font-family: $sans-font-family;
     font-weight:bold;
     font-size: .8em;
   }
 
   .thread {
-    border-left: 1px dotted $grayLight;
+    border-left: 1px dotted $gray-light;
     height: 100%;
     padding: 0;
     padding-left: $thread-padding;
@@ -585,7 +582,7 @@ blockquote {
     display: block !important;
 
     &:hover {
-      background-color: $grayLightest;
+      background-color: $gray-lightest;
     }
 
     & > ul {
@@ -678,24 +675,24 @@ blockquote {
   }
 
   .card-emphasis {
-    @include box-shadow(6px 6px 8px -2px $grayLight);
+    @include box-shadow(6px 6px 8px -2px $gray-light);
   }
 }
 
 //SEARCH HIGHLIGHTS////////////////////////////////
 .search-hl-active {
-  background: $highlightColor;
+  background: $highlight-color;
   box-shadow:3px 3px 4px -1px #999999;
   &::-moz-selection {
-    background: $highlightColor;
+    background: $highlight-color;
     box-shadow:3px 3px 4px #999999;
   }
   &::-moz-selection, &::-moz-window-inactive, &::window-inactive {
-    background: $highlightColor;
+    background: $highlight-color;
     box-shadow:3px 3px 4px #999999;
   }
   &::selection, &::selection:window-inactive {
-    background: $highlightColor;
+    background: $highlight-color;
     box-shadow:3px 3px 4px #999999;
   }
 }
@@ -822,9 +819,9 @@ pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
   @include smallshadow(0);
   border-bottom-right-radius: 24px 72px;
   border-bottom-left-radius: 24px 72px;
-  font-family: $sansFontFamily;
+  font-family: $sans-font-family;
   background: $white;
-  border: solid 1px $grayLighter;
+  border: solid 1px $gray-lighter;
   padding: 0 10px;
   margin: 0 3px;
   display: inline-block;

h/static/styles/forms.scss

@@ -10,28 +10,6 @@
   margin-bottom: 1em;
 }
 
-%form-input-error-state {
-  &, &:focus, &.js-focus {
-    color: #b4777a;
-    border-color: #f5adb7;
-    background-color: #fff1f3;
-  }
-
-  @include placeholder {
-    color: #e0b0b0;
-  }
-}
-
-.form-field-error {
-  .form-input {
-    @extend %form-input-error-state;
-  }
-
-  .form-error-list {
-    display: block;
-  }
-}
-
 .form-input,
 .form-label {
   width: 100%;
@@ -48,24 +26,24 @@
 .form-hint {
   font-size: 12px;
   margin-left: 5px;
-  color: #949292;
+  color: $gray-light;
   -webkit-font-smoothing: antialiased;
 }
 
 .form-required, .form-required[title] {
   cursor: help;
-  color: #949292;
+  color: $gray-light;
   border-bottom: none;
   -webkit-font-smoothing: antialiased;
 }
 
 .form-input {
-  border: 1px solid #d8ddde;
+  border: 1px solid $gray-lighter;
   border-radius: 2px;
   padding: 7px 10px;
   font-weight: normal;
   font-size: 15px;
-  color: #797979;
+  color: $gray;
 
   @include placeholder {
     -webkit-font-smoothing: antialiased;
@@ -73,16 +51,34 @@
 
   &:focus, &.js-focus {
     outline: none;
-    color: #7b776a;
-    border-color: #ece3c5;
-    background-color: #fffbeb;
+    border-color: $focus-yellow-dark;
+    background-color: $focus-yellow;
 
     @include placeholder {
-      color: #cbbb95;
+      color: $focus-yellow-darker;
     }
   }
 }
 
+.form-field-error {
+  .form-input {
+    &, &:focus, &.js-focus {
+      color: $error-red;
+      border-color: $error-red-light;
+      background-color: $error-red-lightest;
+    }
+
+    @include placeholder {
+      color: $error-red-light;
+    }
+  }
+
+  .form-error-list {
+    display: block;
+  }
+}
+
+
 .form-select {
   display: block;
 }
@@ -98,7 +94,7 @@
 .form-error {
   font-size: 13px;
   line-height: 1.5;
-  color: #b4777a;
+  color: $error-red;
 }
 
 .form-checkbox-item {
@@ -163,13 +159,13 @@
 }
 
 .btn {
-  @include background(linear-gradient(top, #fff, #f0f0f0));
+  @include background(linear-gradient($button-background-gradient...));
   @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
 
   display: inline-block;
   font-size: 13px;
   font-weight: bold;
-  color: #585858;
+  color: $button-text-color;
   text-shadow: 0 1px 0 #FFF;
   border-radius: 2px;
   border: 1px solid #ACACAC;
@@ -178,14 +174,14 @@
   &:focus, &:hover, &:active, &.js-hover, &.js-focus, &.js-active {
     @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.05));
     outline: none;
-    color: #585858;
-    background: #fff;
+    color: $button-text-color;
+    background: $button-background-start;
     border-color: #bababa;
   }
 
   &:active, &.js-active {
     @include box-shadow(inset 0 1px 0 rgba(0, 0, 0, 0.1));
-    background: #F0F0F0;
+    background: $button-background-end;
     color: #424242;
     border-color: #bababa;
   }
@@ -195,7 +191,7 @@
     cursor: default;
     background: #F0F0F0;
     border-color: #CECECE;
-    color: #999;
+    color: $gray-light;
   }
 }
 
@@ -209,11 +205,11 @@
   }
 
   &:focus, &:hover, &:active, &.js-hover, &.js-focus, &.js-active {
-    color: $linkColor;
+    color: $link-color;
   }
 
   &:active, &.js-active {
-    color: $linkColorHover;
+    color: $link-color-hover;
   }
 }
 
@@ -237,7 +233,7 @@
 .btn-message {
   font-size: 13px;
   font-style: italic;
-  color: #999;
+  color: $gray-light;
   margin-right: 6px;
   position: absolute;
   right: 100%;
@@ -250,7 +246,7 @@
   display: inline-block;
   position: relative;
   top: 0px;
-  background: #76B800;
+  background: $success-green;
   border-radius: 50%;
   color: #FFF;
   font-size: 12px;

h/static/styles/inject.scss

@@ -3,12 +3,12 @@
 @import 'compass/layout/stretching';
 @import 'compass/reset/utilities';
 
-$baseFontSize: 14px;
+$base-font-size: 14px;
 
 //ADDER////////////////////////////////
 .annotator-adder {
   $border: $gray;
-  $hoverborder: $grayDark;
+  $hoverborder: $gray-dark;
   @include box-sizing(border-box);
   height: 40px;
   margin-left: -20px;
@@ -56,7 +56,7 @@ $baseFontSize: 14px;
   }
 
   &:hover {
-    @include box-shadow(1px 1px 6px -2px $grayLight);
+    @include box-shadow(1px 1px 6px -2px $gray-light);
     border-color: $hoverborder;
 
     &:before {
@@ -79,7 +79,7 @@ $baseFontSize: 14px;
   svg {
     @include stretch-y;
     background: hsla(0, 0, 0, .1);
-    border-left: solid 1px $grayLighter;
+    border-left: solid 1px $gray-lighter;
     height: 100%;
     left: 18px;
     width: $heatmap-width;
@@ -112,9 +112,9 @@ $baseFontSize: 14px;
     @include reset-box-model;
     @include reset-font;
     background: none;
-    color: $textColor;
+    color: $text-color;
     font-weight: bold;
-    font-family: $sansFontFamily;
+    font-family: $sans-font-family;
     font-size: 11px;
     line-height: 20px;
     left: 5px;
@@ -203,24 +203,24 @@ $baseFontSize: 14px;
 //HIGHLIGHTS////////////////////////////////
 .annotator-highlights-always-on .annotator-hl,
 .annotator-hl-active, .annotator-hl-temporary, .annotator-hl-focused {
-  background: $highlightColor;
+  background: $highlight-color;
   box-shadow:3px 3px 4px -1px #999999;
   &::-moz-selection {
-    background: $highlightColor;
+    background: $highlight-color;
     box-shadow:3px 3px 4px #999999;
   }
   &::-moz-selection, &::-moz-window-inactive, &::window-inactive {
-    background: $highlightColor;
+    background: $highlight-color;
     box-shadow:3px 3px 4px #999999;
   }
   &::selection, &::selection:window-inactive {
-    background: $highlightColor;
+    background: $highlight-color;
     box-shadow:3px 3px 4px #999999;
   }
 }
 
 .annotator-highlights-always-on .annotator-hl {
-  background: $highlightModeColor;
+  background: $highlight-mode-color;
 }
 
 .annotator-highlights-always-on .annotator-hl-active,
@@ -233,8 +233,8 @@ $baseFontSize: 14px;
   @include reset-box-model;
   @include user-select(none);
   @extend .noise;
-  font-size: $baseFontSize;
-  line-height: $baseLineHeight;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
   height: 100%;
   position: fixed;
   top: 0;
@@ -311,7 +311,7 @@ $baseFontSize: 14px;
   @include transition-delay(0);
   @include transition-timing-function(cubic-bezier(0, .55, .1, 1));
   background: $white;
-  border: solid 1px $grayLighter;
+  border: solid 1px $gray-lighter;
   left: 0;
   margin-bottom: 5px;
   overflow: hidden;
@@ -333,7 +333,7 @@ $baseFontSize: 14px;
     z-index: 1;
 
     a, a:hover, a:active, a:visited, a:link, a:link:hover {
-      color: $linkColor;
+      color: $link-color;
     }
   }
 
@@ -350,19 +350,19 @@ $baseFontSize: 14px;
 
     text-decoration: none;
     text-shadow:
-    0 0 2px $grayLightest,
+    0 0 2px $gray-lightest,
     0 0 0 $gray;
 
     &:focus { outline: 0; }
-    &:hover { color: $linkColorHover; }
+    &:hover { color: $link-color-hover; }
 
     &.icon-comment {
       text-shadow:
-      0 0 2px $grayLightest,
+      0 0 2px $gray-lightest,
       0 0 0 $gray;
 
       &:hover {
-        color: fade-out($grayLightest, .9);
+        color: fade-out($gray-lightest, .9);
       }
     }
   }
@@ -371,7 +371,7 @@ $baseFontSize: 14px;
 
 // Toolbar notification counter
 .annotator-notification-counter {
-  font-family: $sansFontFamily;
+  font-family: $sans-font-family;
   pointer-events: none;
   position: absolute;
   margin-left: 11px;

h/static/styles/topbar.scss

@@ -20,7 +20,7 @@ body {
 
 .topbar {
   background: $white;
-  border: solid 1px $grayLighter;
+  border: solid 1px $gray-lighter;
   border-style: solid none;
   height: 30px;
   line-height: 28px;
@@ -54,7 +54,7 @@ body {
 
     &.pull-right {
       display: inline-block;
-      font-family: $sansFontFamily;
+      font-family: $sans-font-family;
     }
 
     & > * { margin: 0 .72em; }