Merge pull request #165 from severinbeauvais/master

NOBUG: CSS standardization/cleanup
bcgov · May 4, 2018 · 5ec35e3 · 5ec35e3
2 parents c207812 + cde5ece
commit 5ec35e3
Show file tree

Hide file tree

Showing 13 changed files with 72 additions and 44 deletions.
diff --git a/src/app/applications/application-list/application-list.component.scss b/src/app/applications/application-list/application-list.component.scss
@@ -1,4 +1,5 @@
 @import "~assets/styles/base.scss";
+
 .application-list {
     &__options {
         @include flex(0 0 auto);
@@ -45,7 +46,7 @@
             li {
                 @include align-items(start);
                 +li {
-                    border-top: 1px solid #fff;
+                    border-top: 1px solid $white;
                 }
             }
             .name,

diff --git a/src/app/applications/select-organization/select-organization.component.scss b/src/app/applications/select-organization/select-organization.component.scss
@@ -1,8 +1,10 @@
+@import "~assets/styles/base.scss";
+
 .clickable-row td {
     cursor: pointer;
 }
 
 tr.active {
     background-color: cornflowerblue !important;
-    color: #FFF !important;
+    color: $white !important;
 }
diff --git a/src/app/commenting/manage-comment-periods/manage-comment-periods.component.scss b/src/app/commenting/manage-comment-periods/manage-comment-periods.component.scss
@@ -1,4 +1,5 @@
 @import "~assets/styles/base.scss";
+
 .comment-periods {
     .title-container {
         height: 50px; // to match app details/edit pages
@@ -63,7 +64,7 @@
             li {
                 @include align-items(start);
                 +li {
-                    border-top: 1px solid #fff;
+                    border-top: 1px solid $white;
                 }
             }
             .name {

diff --git a/src/app/file-upload/file-upload.component.scss b/src/app/file-upload/file-upload.component.scss
@@ -1,4 +1,5 @@
 @import "~assets/styles/base.scss";
+
 @function repeater($item, $count) {
     $string: "";
     @for $i from 1 through $count {
@@ -11,7 +12,7 @@
     font-size: x-large;
     border: 3px dashed $fc-border-color;
     padding: 20px;
-    background-color: #fff;
+    background-color: $white;
     color: #bbb;
 }
 
@@ -38,13 +39,13 @@
         }
         li .name {
             padding-right: 0.5rem;
-            background-color: #fff;
+            background-color: $white;
         }
         li .value {
             float: right;
             clear: right;
             padding-left: 0.5rem;
-            background-color: #fff;
+            background-color: $white;
             margin-top: -2px;
             .btn i+span {
                 vertical-align: text-top;

diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
@@ -42,7 +42,7 @@ header {
 
   &.collapsed {
     border: 2px solid transparent;
-    color: #FFF;
+    color: $white;
   }
 
   i {

diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
@@ -86,7 +86,7 @@
       &-item {
         @include flex-box();
         padding: 0.2rem 0.5rem;
-        border-top: 1px solid #fff;
+        border-top: 1px solid $white;
         font-size: 0.875rem;
 
         .name {

diff --git a/src/app/search/search.component.scss b/src/app/search/search.component.scss
@@ -1,4 +1,3 @@
-// Base
 @import "~assets/styles/base.scss";
 
 $search-input-font-size: 0.9375rem;
@@ -66,7 +65,7 @@ $search-input-font-size: 0.9375rem;
 
     &__search-btn {
         width: 100%;
-        color: #fff;
+        color: $white;
         border-color: $gold;
         background: darken($gold, 5%);
         text-transform: uppercase;
@@ -266,15 +265,15 @@ tag-input {
             tag {
                 padding: 0.2rem 0.6rem;
                 height: auto;
-                color: #fff;
+                color: $white;
                 border-radius: 0.2rem;
                 background: #5091cd;
                 letter-spacing: 0;
                 font-size: $search-input-font-size;
                 font-weight: 400;
 
                 &:hover {
-                    color: #fff !important;
+                    color: $white !important;
                     background: #5091cd !important; 
                 }
 
@@ -286,7 +285,7 @@ tag-input {
                     margin-top: 1px;
 
                     path {
-                        fill: #fff;
+                        fill: $white;
                     }
                 }
             }

diff --git a/src/assets/styles/components/buttons.scss b/src/assets/styles/components/buttons.scss
@@ -3,13 +3,13 @@
 .btn {
     border-radius: 0.25rem;
     //background: transparent;
-    //color: #003366;
+    //color: $primary;
     font-weight: 400;
     transition: all linear 0.2s;
 
     &.inverted {
-        color: #fff;
-        border: 2px solid #fff;
+        color: $white;
+        border: 2px solid $white;
         background: transparent;
         text-transform: uppercase;
         font-weight: 700;
@@ -166,7 +166,7 @@ main {
 
     &:focus,
     &:hover {
-        color: #fff;
+        color: $white;
         border-color: #5091cd;
         background: #5091cd;
     }

diff --git a/src/assets/styles/components/feature-block.scss b/src/assets/styles/components/feature-block.scss
@@ -22,6 +22,24 @@
     @include flex(0 0 auto);
   }
 
+  &.dark {
+    background-color: $feature-block-bg;
+    color: $feature-block-color;
+
+    a:not([class^="btn"]) {
+      color: $gold;
+    }
+  }
+
+  &.light {
+    background-color: $feature-block-light-bg;
+    color: $feature-block-light-color;
+
+    a:not[class^="btn"] {
+      color: $feature-block-primary;
+    }
+  }
+
   h3, h4, p {
     color: inherit;
     font-weight: normal;

diff --git a/src/assets/styles/components/modal.scss b/src/assets/styles/components/modal.scss
@@ -1,6 +1,7 @@
 @import "~assets/styles/base.scss";
+
 .modal-header {
-    background-color: #FFF;
+    background-color: $white;
     .modal-title {
         font-weight: bold;
     }
@@ -16,5 +17,5 @@
 }
 
 .modal-footer {
-    background-color: #FFF;
+    background-color: $white;
 }
diff --git a/src/assets/styles/components/table.scss b/src/assets/styles/components/table.scss
@@ -22,7 +22,7 @@
 
     thead {
         background: $table-header-bg;
-        border-bottom: 2px solid #fff;
+        border-bottom: 2px solid $white;
 
         th {
             padding: 0.5rem;
@@ -43,7 +43,7 @@
 
                 &.sort-asc,
                 &.sort-desc {
-                    color: #000;
+                    color: $black;
                     border-bottom-color: $table-header-sort-active;
                     background: transparent;
                     text-shadow: none;

diff --git a/src/assets/styles/layout.scss b/src/assets/styles/layout.scss
@@ -97,7 +97,7 @@ main {
     .main-footer {
         padding: 1.5rem;
         background-color: rgba(0, 51, 102, 0.8);
-        color: #FFF;
+        color: $white;
 
         a {
             color: $gold;

diff --git a/src/assets/styles/themes/default.scss b/src/assets/styles/themes/default.scss
@@ -1,10 +1,12 @@
 // Colors
 $primary:                       #003366;   
 $gold:                          #fcba19;
+$white:                         #fff;
+$black:                         #000;
 
 // Background Colors
 $bg-dark:                       $primary;
-$bg-dark-color:                 #FFF;
+$bg-dark-color:                 $white;
 $bg-dark-link-color:            $gold;
 $bg-dark-border-color:          #5475a7;
 
@@ -16,17 +18,17 @@ $font-gray:                     #666666;
 $link-color:                    #1a5a96;
 
 // Header
-$header-font-color:             #FFF;
+$header-font-color:             $white;
 $header-bg:                     $primary;
 
 // Footer
 $footer-bg:                     $primary;
-$footer-color:                  #FFF;
+$footer-color:                  $white;
 
 // Main Navigation
 $mn-font-size:                  0.85rem;
 $mn-dropdown-menu-size:         0.85rem; 
-$mn-color:                      #FFF;
+$mn-color:                      $white;
 $mn-border-color:               #5f79a2;
 $mn-hover-bg:                   #2b4777;
 $mn-hover-color:                $gold;
@@ -40,17 +42,20 @@ $aside-title-color:             #38598a;
 $aside-bg:                      #f7f8fa;
 
 // Cards
-$card-header-color:             #fff;
+$card-header-color:             $white;
 $card-header-bg:                #38598a;
 
 // Feature Blocks
-$feature-block-color:           #FFF;
+$feature-block-color:           $white;
 $feature-block-bg:              #244278;
+$feature-block-light-bg:        $white;
+$feature-block-light-color:     #666;
+$feature-block-primary:         $primary;
 
 // Form Controls
 $fc-height:                     2.75rem;
 $fc-border-color:               #ddd;
-$fc-bg:                         #fff;
+$fc-bg:                         $white;
 $fc-inner-shadow:               0.1rem 0.1rem 0.1rem #EEE;
 $fc-placeholder-color:          #aaa;
 $fc-focus-border-color:         #5091cd;            
@@ -63,51 +68,51 @@ $list-row-alt-bg:               #f4f4f4;
 // Pagination Control
 $pgn-btn-bg:                    #eee;
 $pgn-btn-active-bg:             #5091cd;
-$pgn-btn-active-color:          #fff;
+$pgn-btn-active-color:          $white;
 $pgn-btn-border:                1px solid #ccc;
-$pgn-btn-color:                 #000;
+$pgn-btn-color:                 $black;
 
 // Spinner
 $spinner-width:                 50px;
 $spinner-color:                 #5091cd;
 $spinner-bg:                    rgba(255,255,255,0.8);
-$spinner-invert-color:          #FFF;
+$spinner-invert-color:          $white;
 $spinner-invert-bg:             rgba(#001a33,0.8);
 
 // Tab Navigation
 $tab-color:                     #38598a;
 $tab-nav-border-color:          #ddd;
-$tab-nav-bg:                    #fff;
+$tab-nav-bg:                    $white;
 $tab-hover-bg:                  #eee;
-$tab-sm-active-color:           #fff;
+$tab-sm-active-color:           $white;
 $tab-sm-bg:                     #eee;
 $tab-sm-active-bg:              #38598a;
-$tab-active-bg:                 #fff;
+$tab-active-bg:                 $white;
 
 // Tables
-$table-header-bg:               #fff;
+$table-header-bg:               $white;
 $table-header-hover-bg:         #ddd;
 $table-header-sort-active:      #5091cd;
 $table-row-bg:                  #f7f8fa;
-$table-row-border:              3px solid #fff;
+$table-row-border:              3px solid $white;
 $table-alt-row-bg:              #f4f4f4;
 $table-sort-icon-color:         #ccc;
-$table-sort-icon-active-color:  #000;
+$table-sort-icon-active-color:  $black;
 $table-sort-icon-size:          0.25rem;
 
 // Modal
-$modal-bg:                      #FFF;
+$modal-bg:                      $white;
 
 // Map Components
 // Map Popup
-$map-popup-color:               #fff;
+$map-popup-color:               $white;
 $map-popup-bg:                  #244278;
-$map-popup-footer-bg:           #003366;
-$map-popup-header-bg:           #003366;
+$map-popup-footer-bg:           $primary;
+$map-popup-header-bg:           $primary;
 $map-popup-font-size:           0.9375rem;
 $map-popup-menu-active-bg:      #5091cd;
-$map-popup-btn-color:           #fff;
-$map-popup-border-color:        #fff;
+$map-popup-btn-color:           $white;
+$map-popup-border-color:        $white;
 
 // Search Widget
 $map-search-height:             3rem;