From 19f0efd98b03bb52eb7d94c3ae7fe324cbb5eb48 Mon Sep 17 00:00:00 2001 From: Severin Beauvais Date: Fri, 4 May 2018 12:52:05 -0700 Subject: [PATCH 1/2] NOBUG: cleaned up CSS color variables --- .../application-list.component.scss | 3 +- .../select-organization.component.scss | 4 +- .../manage-comment-periods.component.scss | 3 +- .../file-upload/file-upload.component.scss | 7 +-- src/app/header/header.component.scss | 2 +- src/app/home/home.component.scss | 2 +- src/app/search/search.component.scss | 9 ++-- src/assets/styles/components/buttons.scss | 8 ++-- src/assets/styles/components/modal.scss | 5 +- src/assets/styles/components/table.scss | 4 +- src/assets/styles/layout.scss | 2 +- src/assets/styles/themes/default.scss | 46 ++++++++++--------- 12 files changed, 51 insertions(+), 44 deletions(-) diff --git a/src/app/applications/application-list/application-list.component.scss b/src/app/applications/application-list/application-list.component.scss index 39a4e910..001f1c30 100644 --- 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 index 07fd5e43..4c13bd9c 100644 --- 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; } \ No newline at end of file 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 index f82c2013..4dc40961 100644 --- 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 index 4e7ca8f4..de0648d3 100644 --- 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 index 3a183ae2..0b51d6dd 100644 --- 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 index 79d9aaea..a0ad26ca 100644 --- 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 index 4a2bba28..3424dbc5 100644 --- 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,7 +265,7 @@ tag-input { tag { padding: 0.2rem 0.6rem; height: auto; - color: #fff; + color: $white; border-radius: 0.2rem; background: #5091cd; letter-spacing: 0; @@ -274,7 +273,7 @@ tag-input { 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 index a150f750..e60c4a32 100644 --- 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/modal.scss b/src/assets/styles/components/modal.scss index 2782693a..cb458a04 100644 --- 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; } \ No newline at end of file diff --git a/src/assets/styles/components/table.scss b/src/assets/styles/components/table.scss index 07fa999d..fba4aca8 100644 --- 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 index a33f2282..3abe4a5f 100644 --- 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 index 3fdbfbbb..aa8ab4a4 100644 --- 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,17 @@ $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; // 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 +65,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; From cde5ece80d3c1028116929abba01096691aa01d2 Mon Sep 17 00:00:00 2001 From: Severin Beauvais Date: Fri, 4 May 2018 13:03:46 -0700 Subject: [PATCH 2/2] NOBUG: ported some feature block CSS --- .../styles/components/feature-block.scss | 18 ++++++++++++++++++ src/assets/styles/themes/default.scss | 3 +++ 2 files changed, 21 insertions(+) diff --git a/src/assets/styles/components/feature-block.scss b/src/assets/styles/components/feature-block.scss index 1da730c8..b2e31c13 100644 --- 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/themes/default.scss b/src/assets/styles/themes/default.scss index aa8ab4a4..8ef19082 100644 --- a/src/assets/styles/themes/default.scss +++ b/src/assets/styles/themes/default.scss @@ -48,6 +48,9 @@ $card-header-bg: #38598a; // Feature Blocks $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;