Moves custom variables to settings.scss

app/assets/stylesheets/_settings.scss

@@ -39,6 +39,7 @@
 //  34. Title Bar
 //  35. Tooltip
 //  36. Top Bar
+//  37. Custom variables
 
 @import 'util/util';
 
@@ -563,4 +564,131 @@ $topbar-background: $light-gray;
 $topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 1rem;
 $topbar-input-width: 200px;
-$topbar-unstack-breakpoint: medium;
+$topbar-unstack-breakpoint: medium;
+
+// 37. Custom variables
+// --------------------
+
+$font-logo:           'Lato' !important;
+$font-sans:           'Source Sans Pro', 'Helvetica', 'Arial', sans-serif !important;
+
+$font-normal:         400;
+$font-bold:           700;
+
+$base-font-size:      rem-calc(17);
+$base-line-height:    rem-calc(26);
+
+$h1-font-size:        rem-calc(44);
+$h1-line-height:      rem-calc(57);
+
+$h2-font-size:        rem-calc(34);
+$h2-line-height:      rem-calc(44);
+
+$h3-font-size:        rem-calc(24);
+$h3-line-height:      rem-calc(31);
+
+$h4-font-size:        rem-calc(19);
+$h4-line-height:      rem-calc(25);
+
+$h5-font-size:        rem-calc(16);
+$h5-line-height:      rem-calc(21);
+
+$h6-font-size:        rem-calc(13);
+$h6-line-height:      rem-calc(17);
+
+$small-font-size:     rem-calc(14);
+$tiny-font-size:      rem-calc(10);
+$line-height:         rem-calc(24);
+
+// 02. Colors
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+$brand:             #004A83;
+$body:              #E9E9E9;
+$background:        #EDEFF0;
+$border:            #DEE0E3;
+$dark:              darken($brand, 10%);
+
+$text:              #222222;
+$text-medium:       #999999;
+$text-light:        #CCCCCC;
+
+$link:              #2895F1;
+$link-hover:        #2178BF;
+
+$debates:           #008CCF;
+$votes-bg:          #26AEEE;
+$votes-border:      #1F94CB;
+
+$votes-like:        #7BD2A8;
+$votes-like-act:    #5D9E7F;
+$votes-unlike:      #EF8585;
+$votes-unlike-act:  #BD6A6A;
+
+$delete:            #F04124;
+$check:             #46DB91;
+
+$proposals:         #FFA42D;
+$proposals-border:  #CC8425;
+
+$budget:            #454372;
+$budget-hover:      #7571BF;
+
+$highlight:         #E7F2FC;
+$featured:          #FED900;
+
+$footer-bg:         #DEE0E2;
+$footer-color:      #171819;
+$footer-link:       #454A4C;
+$footer-border:     #BFC1C3;
+
+// 03. Forms
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+$input-bg:          #F8F8F8;
+
+// 04. Alerts
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+$success-bg:        #DFF0D8;
+$success-border:    #D6E9C6;
+$color-success:     #3C763D;
+
+$info-bg:           #D9EDF7;
+$info-border:       #BCE8F1;
+$color-info:        #31708F;
+
+$warning-bg:        #FCF8E3;
+$warning-border:    #FAEBCC;
+$color-warning:     #8A6D3B;
+
+$alert-bg:          #F2DEDE;
+$alert-border:      #EBCCD1;
+$color-alert:       #A94442;
+
+// 05. Levels
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+$level-1:           #1ABC9C;
+$level-2:           #43AC6A;
+$level-3:           #43AC6A;
+$level-4:           #43AC6A;
+$level-5:           #F08A24;
+
+$author:            #008CCF;
+$association:       #C0392B;
+$deleted:           #E7E7E7;
+
+$comment-author:    rgba(45,144,248,.15);
+$comment-level-5:   rgba(255,241,204,1);
+$comment-admin:     rgba(45,144,248,.15);
+$comment-official:  rgba(70,219,145,.3);
+
+// 06. Responsive
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+$small:             rem-calc(480);
+$small-breakpoint:  rem-calc(640);
+$medium-breakpoint: rem-calc(1024);
+$large-breakpoint:  rem-calc(1440);
+$xlarge-breakpoint: rem-calc(1920);

app/assets/stylesheets/application.scss

@@ -2,7 +2,6 @@
 @import "foundation_and_overrides";
 @import "fonts";
 @import "icons";
-@import "variables";
 @import "mixins";
 @import "admin";
 @import "layout";

app/assets/stylesheets/layout.scss

@@ -766,22 +766,22 @@ form {
   &.success, &.notice {
     background-color: $success-bg;
     border-color: $success-border;
-    color: $success-color;
+    color: $color-success;
   }
 
   &.primary {
     background-color: $info-bg;
     border-color: $info-border;
-    color: $info-color;
+    color: $color-info;
   }
 
   &.warning {
     background-color: $warning-bg;
     border-color: $warning-border;
-    color: $warning-color;
+    color: $color-warning;
 
     a {
-      color: $warning-color;
+      color: $color-warning;
       font-weight: bold;
       text-decoration: underline;
     }
@@ -790,7 +790,7 @@ form {
   &.alert, &.error {
     background-color: $alert-bg;
     border-color: $alert-border;
-    color: $alert-color;
+    color: $color-alert;
   }
 
   .close {
@@ -800,23 +800,23 @@ form {
 
 span.error, small.error {
   background: $alert-bg;
-  color: $alert-color;
+  color: $color-alert;
 }
 
 span.no-error, small.no-error {
   background: $success-bg;
-  color: $success-color;
+  color: $color-success;
 }
 
 .error small.error {
   background: $alert-bg;
-  color: $alert-color;
+  color: $color-alert;
   display: inline-block;
   margin: 0 $line-height/4;
 }
 
 label.error, label.error a {
-  color: $alert-color;
+  color: $color-alert;
 }
 
 // 08. User account
@@ -836,7 +836,7 @@ label.error, label.error a {
   .final-votes-info {
     background: $warning-bg;
     border: 1px solid $warning-border;
-    color: $warning-color;
+    color: $color-warning;
     margin-top: $line-height;
     padding: $line-height/2;
 
@@ -1507,7 +1507,7 @@ table {
 
     .icon-letter {
       background: white;
-      color: $info-color;
+      color: $color-info;
       font-size: rem-calc(24);
       margin-left: -27px;
       padding: 0 $line-height/2;

app/assets/stylesheets/participation.scss

@@ -130,7 +130,7 @@
 
   .anonymous-votes, .organizations-votes {
     background: $warning-bg;
-    color: $warning-color;
+    color: $color-warning;
     height: 100%;
     left: 0;
     line-height: $line-height;
@@ -141,13 +141,13 @@
     width: 100%;
 
     p {
-      color: $warning-color;
+      color: $color-warning;
       margin: 0 rem-calc(12);
       text-align: left;
     }
 
     a {
-      color: $warning-color;
+      color: $color-warning;
       font-weight: bold;
       text-decoration: underline;
     }
@@ -242,7 +242,7 @@
 
   .anonymous-votes, .organizations-votes, .no-supports-allowed {
     background: $warning-bg;
-    color: $warning-color;
+    color: $color-warning;
     height: 100%;
     left: 0;
     line-height: $line-height;
@@ -253,13 +253,13 @@
     width: 100%;
 
     p {
-      color: $warning-color;
+      color: $color-warning;
       margin: 0 rem-calc(12);
       text-align: left;
     }
 
     a {
-      color: $warning-color;
+      color: $color-warning;
       font-weight: bold;
       text-decoration: underline;
     }
@@ -990,18 +990,18 @@
     .organizations-votes,
     .anonymous-votes {
       background: $featured;
-      color: $warning-color;
+      color: $color-warning;
       font-size: $small-font-size;
       line-height: $line-height;
       padding-top: 0;
 
       a {
-        color: $warning-color;
+        color: $color-warning;
         font-weight: bold;
       }
 
       p {
-        color: $warning-color;
+        color: $color-warning;
         font-size: $small-font-size;
         line-height: $line-height;
       }

app/assets/stylesheets/variables.scss

@@ -1,136 +0,0 @@
-// Table of Contents
-//
-// 01. Typography
-// 02. Colors
-// 03. Forms
-// 04. Alerts
-// 05. Levels
-// 06. Responsive
-//
-
-// 01. Typography
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$font-logo:           'Lato' !important;
-$font-sans:           'Source Sans Pro', 'Helvetica', 'Arial', sans-serif !important;
-
-$font-normal:         400;
-$font-bold:           700;
-
-$base-font-size:      rem-calc(17);
-$base-line-height:    rem-calc(26);
-
-$h1-font-size:        rem-calc(44);
-$h1-line-height:      rem-calc(57);
-
-$h2-font-size:        rem-calc(34);
-$h2-line-height:      rem-calc(44);
-
-$h3-font-size:        rem-calc(24);
-$h3-line-height:      rem-calc(31);
-
-$h4-font-size:        rem-calc(19);
-$h4-line-height:      rem-calc(25);
-
-$h5-font-size:        rem-calc(16);
-$h5-line-height:      rem-calc(21);
-
-$h6-font-size:        rem-calc(13);
-$h6-line-height:      rem-calc(17);
-
-$small-font-size:     rem-calc(14);
-$tiny-font-size:      rem-calc(10);
-$line-height:         rem-calc(24);
-
-// 02. Colors
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$brand:             #004A83;
-$body:              #E9E9E9;
-$background:        #EDEFF0;
-$border:            #DEE0E3;
-$dark:              darken($brand, 10%);
-
-$text:              #222222;
-$text-medium:       #999999;
-$text-light:        #CCCCCC;
-
-$link:              #2895F1;
-$link-hover:        #2178BF;
-
-$debates:           #008CCF;
-$votes-bg:          #26AEEE;
-$votes-border:      #1F94CB;
-
-$votes-like:        #7BD2A8;
-$votes-like-act:    #5D9E7F;
-$votes-unlike:      #EF8585;
-$votes-unlike-act:  #BD6A6A;
-
-$delete:            #F04124;
-$check:             #46DB91;
-
-$proposals:         #FFA42D;
-$proposals-border:  #CC8425;
-
-$budget:            #454372;
-$budget-hover:      #7571BF;
-
-$highlight:         #E7F2FC;
-$featured:          #FED900;
-
-$footer-bg:         #DEE0E2;
-$footer-color:      #171819;
-$footer-link:       #454A4C;
-$footer-border:     #BFC1C3;
-
-// 03. Forms
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$input-bg:          #F8F8F8;
-
-// 04. Alerts
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$success-bg:        #DFF0D8;
-$success-border:    #D6E9C6;
-$success-color:     #3C763D;
-
-$info-bg:	          #D9EDF7;
-$info-border:       #BCE8F1;
-$info-color:        #31708F;
-
-$warning-bg:        #FCF8E3;
-$warning-border:    #FAEBCC;
-$warning-color:     #8A6D3B;
-
-$alert-bg:          #F2DEDE;
-$alert-border:      #EBCCD1;
-$alert-color:       #A94442;
-
-// 05. Levels
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$level-1:           #1ABC9C;
-$level-2:           #43AC6A;
-$level-3:           #43AC6A;
-$level-4:           #43AC6A;
-$level-5:           #F08A24;
-
-$author:            #008CCF;
-$association:       #C0392B;
-$deleted:           #E7E7E7;
-
-$comment-author:    rgba(45,144,248,.15);
-$comment-level-5:   rgba(255,241,204,1);
-$comment-admin:     rgba(45,144,248,.15);
-$comment-official:  rgba(70,219,145,.3);
-
-// 06. Responsive
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$small:             rem-calc(480);
-$small-breakpoint:  rem-calc(640);
-$medium-breakpoint: rem-calc(1024);
-$large-breakpoint:  rem-calc(1440);
-$xlarge-breakpoint: rem-calc(1920);