Merge pull request #5018 from consul/simplify_main_colors

Remove redundant color definitions

app/assets/stylesheets/admin.scss

@@ -135,7 +135,7 @@ $table-header:   #ecf1f6;
   }
 
   .title-bar {
-    color: #000;
+    color: inherit;
     position: absolute;
     right: 12px;
   }
@@ -204,10 +204,6 @@ $table-header:   #ecf1f6;
       color: $admin-text;
       padding: $line-height / 2;
 
-      label {
-        color: $white;
-      }
-
       a {
         color: inherit;
         white-space: nowrap;
@@ -844,6 +840,7 @@ table {
 .fullscreen {
 
   .fullscreen-container {
+    color: $white;
 
     a {
       line-height: 3rem;
@@ -856,7 +853,6 @@ table {
     .markdown-editor-header {
       vertical-align: top;
       display: inline-block;
-      color: $white;
 
       @include breakpoint(medium) {
         line-height: 3rem;
@@ -895,7 +891,7 @@ table {
     }
 
     a {
-      color: $white;
+      color: inherit;
     }
   }
 }

app/assets/stylesheets/admin/budgets/links.scss

@@ -28,7 +28,6 @@
 
   .ballots-link {
     @include has-fa-icon(archive, solid);
-    color: $link;
   }
 
   .results-link {

app/assets/stylesheets/dashboard.scss

@@ -306,7 +306,6 @@
   border-right: 1px solid $border;
 
   [class^="icon-"] {
-    color: $text;
     display: inline-block;
     font-size: rem-calc(24);
     line-height: $line-height;
@@ -358,7 +357,6 @@
 
   .has-tip {
     border-bottom: 0;
-    color: $text;
     cursor: auto;
     font-weight: normal;
   }
@@ -519,7 +517,6 @@
     color: #fff;
 
     h1 {
-      color: #fff;
       text-align: left;
     }
   }
@@ -680,7 +677,6 @@
     }
 
     p {
-      color: #fff;
       font-size: rem-calc(80);
       line-height: rem-calc(100);
 

app/assets/stylesheets/datepicker_overrides.scss

@@ -14,7 +14,6 @@
 
     .ui-state-default:not(&) {
       background: $highlight;
-      color: $text;
     }
   }
 

app/assets/stylesheets/in_favor_against.scss

@@ -64,7 +64,6 @@
   }
 
   .percentage {
-    color: $text;
     display: inline-block;
     font-size: $small-font-size;
     line-height: $line-height * 2;

app/assets/stylesheets/layout.scss

@@ -135,11 +135,6 @@ button,
   @include inverted-selection;
   background: $brand;
 
-  &.warning,
-  &.warning:hover {
-    color: #000;
-  }
-
   &.medium {
     font-size: $small-font-size;
   }
@@ -259,15 +254,11 @@ button,
     }
 
     a {
-      color: inherit;
+      @include text-colored-link;
       display: inline-block;
       font-weight: bold;
       position: relative;
       text-align: left;
-
-      &:hover {
-        color: $link;
-      }
     }
 
     + li {
@@ -642,8 +633,7 @@ body > header,
     }
 
     &.is-dropdown-submenu {
-      background: $body-background;
+      @extend %body-colors;
-      color: $text;
       margin: 0;
       margin-top: rem-calc(-12);
       padding: 0;
@@ -751,8 +741,6 @@ body > header,
   flex-direction: column;
 
   @include breakpoint(medium) {
-    background: $body-background;
-    color: $text;
     flex-direction: row;
     padding-bottom: 0;
 
@@ -790,21 +778,17 @@ body > header,
       &:hover {
         color: $link;
       }
-    }
-
-    &:focus {
-      z-index: 1;
-    }
 
       &.is-active {
-      color: #fff;
-
-      @include breakpoint(medium) {
         @include brand-text;
         border-bottom: 2px solid;
         margin-bottom: 1px;
       }
     }
+
+    &:focus {
+      z-index: 1;
+    }
   }
 
   .input-group {
@@ -856,7 +840,7 @@ body > header,
   margin-bottom: $line-height / 2;
 
   a {
-    color: inherit;
+    @include text-colored-link;
     display: inline-block;
     font-weight: bold;
     margin-right: $line-height / 2;
@@ -866,10 +850,6 @@ body > header,
     @include breakpoint(medium) {
       margin-right: $line-height;
     }
-
-    &:hover {
-      color: $link;
-    }
   }
 
   .is-active {
@@ -1196,10 +1176,6 @@ form {
     background-color: $info-bg;
     border-color: $info-border;
     color: $color-info;
-
-    a {
-      color: $link !important;
-    }
   }
 
   &.warning {
@@ -1375,11 +1351,7 @@ form {
   }
 
   .notification-link {
-    color: inherit;
+    @include text-colored-link;
-
-    &:hover {
-      color: $link;
-    }
   }
 
   &:hover {
@@ -1505,7 +1477,7 @@ table {
 .button.button-facebook,
 .button.button-google,
 .button.button-wordpress {
-  color: $text;
+  color: inherit;
   font-weight: bold;
 
   &::before {
@@ -1775,8 +1747,6 @@ table {
 // ------------
 
 .comments {
-  background: $body-background;
-  background-repeat: repeat-x;
   padding-bottom: $line-height * 4;
 
   h2 {
@@ -1874,11 +1844,9 @@ table {
 
   .delete-comment {
     @include has-fa-icon(trash-alt, regular);
-    color: $delete;
 
-    &:hover,
+    &:not(:hover):not(:active) {
-    &:active {
+      color: $delete;
-      color: $link-hover;
     }
 
     &::before {
@@ -1941,13 +1909,11 @@ table {
 }
 
 .comment-info {
-  color: $text-medium;
   display: inline-block;
   font-size: $small-font-size;
   line-height: rem-calc(32); // Same as avatar height
 
   .user-name {
-    color: $text;
     font-weight: bold;
   }
 }
@@ -2635,9 +2601,8 @@ table {
     }
 
     span {
-      background: $body-background;
+      @extend %body-colors;
       border-radius: rem-calc(4);
-      color: $text;
       display: inline-block;
       font-size: $small-font-size;
       font-weight: bold;

app/assets/stylesheets/layout/locale_switcher.scss

@@ -20,7 +20,7 @@
     }
 
     label {
-      color: #fff;
+      color: inherit;
       font-size: $tiny-font-size;
       font-weight: normal;
     }
@@ -44,8 +44,7 @@
       }
 
       option {
-        background: $body-background;
+        @extend %body-colors;
-        color: $text;
         border: 0;
         outline: none;
       }

app/assets/stylesheets/mixins/buttons.scss

@@ -41,6 +41,14 @@
   }
 }
 
+@mixin text-colored-link {
+  color: inherit;
+
+  &:hover {
+    color: $link;
+  }
+}
+
 @mixin switch {
   @include regular-button;
   border-radius: $line-height;

app/assets/stylesheets/mixins/colors.scss

@@ -12,6 +12,11 @@
   color: $brand;
 }
 
+@mixin body-colors {
+  background-color: $body-background;
+  color: $text;
+}
+
 @mixin normal-selection {
 
   &::selection,
@@ -36,3 +41,7 @@
 %brand-text {
   @include brand-text;
 }
+
+%body-colors {
+  @include body-colors;
+}

app/assets/stylesheets/mixins/icons.scss

@@ -1620,7 +1620,6 @@ $font-awesome-icons: (
 
   .manage-link {
     @include has-fa-icon(archive, solid);
-    color: $link;
   }
 
   .cards-link {

app/assets/stylesheets/participation.scss

@@ -81,7 +81,7 @@
   }
 
   .supported {
-    color: $text;
+    color: inherit;
     margin-top: rem-calc(12);
   }
 }
@@ -438,7 +438,6 @@
 }
 
 %panel {
-  background: $body-background;
   border: 1px solid;
   border-color: #e5e6e9 #dfe0e4 #d0d1d5;
   border-radius: 0;
@@ -665,7 +664,6 @@
 
       &:hover {
         background: $budget-hover;
-        color: #fff;
         cursor: pointer;
       }
 
@@ -934,8 +932,7 @@
       margin-top: 0;
 
       &:hover {
-        background: $body-background;
+        @extend %body-colors;
-        color: $text;
       }
     }
 
@@ -1041,7 +1038,6 @@
 
 .jumbo-budget {
   @include full-width-border(bottom, 2px solid $border);
-  background: $body-background;
 
   &.budget-heading {
     min-height: $line-height * 10;
@@ -1476,9 +1472,8 @@
 }
 
 .zoom-link {
-  background: $body-background;
+  @extend %body-colors;
   border-radius: rem-calc(48);
-  color: $text;
   font-size: rem-calc(24);
   font-weight: bold;
   height: rem-calc(48);
@@ -1616,7 +1611,6 @@
 
 .section-title-divider {
   border-bottom: 1px solid #eee;
-  color: #000;
   margin: $line-height 0;
 
   span {