From 22afa61b11784a538f6c744cc26596cc8a90153d Mon Sep 17 00:00:00 2001 From: mlorb Date: Wed, 28 Mar 2018 13:54:01 +0200 Subject: [PATCH] refactor colors --- app/assets/stylesheets/application.scss | 2 + app/assets/stylesheets/constants.scss | 500 ++++++++++++++++-- app/assets/stylesheets/extend/bootstrap.scss | 2 +- app/assets/stylesheets/my_modules.scss | 6 +- app/assets/stylesheets/notifications.scss | 20 +- app/assets/stylesheets/partials/_sidebar.scss | 12 +- .../stylesheets/partials/_tree_view.scss | 6 +- app/assets/stylesheets/projects.scss | 48 +- app/assets/stylesheets/reports.scss | 36 +- .../stylesheets/sample_types_groups.scss | 2 +- .../stylesheets/themes/main_navigation.scss | 52 +- app/assets/stylesheets/themes/menu_bar.scss | 4 +- app/assets/stylesheets/themes/scinote.scss | 87 +-- app/javascript/src/styles/constants.scss | 30 +- app/javascript/src/styles/main.scss | 26 +- config/initializers/constants.rb | 25 +- 16 files changed, 624 insertions(+), 234 deletions(-) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index eeb5db641..dcd1af2ad 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -9,6 +9,8 @@ *= require introjs *= stub reports_pdf */ + +@import "constants"; @import "bootstrap-sprockets"; @import "bootstrap"; @import "bootstrap-datetimepicker"; diff --git a/app/assets/stylesheets/constants.scss b/app/assets/stylesheets/constants.scss index 771cc6433..8e0c00d85 100644 --- a/app/assets/stylesheets/constants.scss +++ b/app/assets/stylesheets/constants.scss @@ -2,53 +2,32 @@ // Colors //============================================================================== -// Theme colors -$color-theme-primary: #41B0E0; -$color-theme-secondary: #8fd13f; -$color-theme-dark: #6d6e71; - // Grayscale colors -$color-border: #DDDDDD; -$color-list-separator: #BDC3C7; $color-white: #fff; $color-alabaster: #fcfcfc; -$color-snow: #f9f9f9; -$color-wild-sand: #f5f5f5; $color-concrete: #f2f2f2; -$color-gallery: #eee; $color-gainsboro: #e3e3e3; $color-alto: #d2d2d2; $color-silver: #c5c5c5; -$color-dark-gray: #adadad; $color-silver-chalice: #a0a0a0; -$color-gray: #909088; $color-dove-gray: #666; $color-emperor: #555; -$color-mine-shaft: #333; -$color-nero: #262626; $color-black: #000; -$color-cloud: rgba(0, 0, 0, .1); -$color-gray-light-yadcf: #ccc; -$color-gray-dark-yadcf: #a9a9a9; -// Miscelaneous colors -$color-mystic: #eaeff2; -$color-candlelight: #ffda23; -$color-orange: #ff900b; -$color-saturated-green: #008600; -$color-confirmation-green: #25AE88; -$color-blue-yadcf: #337ab7; +// Theme colors +$brand-default: $color-white; +$brand-primary: #41b0e0; +$brand-success: #5cb85c; +$brand-info: #5bc0de; +$brand-warning: #f0ad4e; +$brand-danger: #d9534f; +$brand-other: #9b59b6; +$brand-extra: #34495e; +$brand-primary-light: #dcedf6; +$brand-success-light: #e2eed8; +$brand-warning-light: #fcf7e4; +$brand-danger-light: #efdfdf; -// Red colors -$color-mojo: #cf4b48; -$color-apple-blossom: #a94442; -$color-milano-red: #a70b05; - -// Colors for specific intents -$color-visited-link: #23527c; - -// Overlay shade for drag'n dropdown -$color-drag-overlay: rgba(0, 0, 0, .4); //============================================================================== // Other @@ -56,3 +35,456 @@ $color-drag-overlay: rgba(0, 0, 0, .4); // Some big value which is still supported by all browsers $infinity: 9999999; + + +//============================================================================== +// Bootstrap +//============================================================================== + +// Grayscale Colors in bootstrap +$gray-darker: $color-black; +$gray-dark: $color-emperor; +$gray: $color-emperor; +$gray-light: $color-dove-gray; +$gray-lighter: $color-concrete; + +// // Scaffolding +// $body-bg: #fff; +// $text-color: #ee3df0; +// $link-color: $brand-primary; +// $link-hover-color: darken($link-color, 15%); +// $link-hover-decoration: underline; + +// // Typography +// $font-family-sans-serif: "Open Sans", Arial, Helvetica, sans-serif; +// $font-family-serif: Georgia, "Times New Roman", Times, serif; +// $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; +// $font-family-base: $font-family-sans-serif; +// $font-size-base: 14px; +// $font-size-large: ceil(($font-size-base * 1.25)); +// $font-size-small: ceil(($font-size-base * 0.85)); +// $font-size-h1: floor(($font-size-base * 2.6)); +// $font-size-h2: floor(($font-size-base * 2.15)); +// $font-size-h3: ceil(($font-size-base * 1.7)); +// $font-size-h4: ceil(($font-size-base * 1.25)); +// $font-size-h5: $font-size-base; +// $font-size-h6: ceil(($font-size-base * 0.85)); +// $line-height-base: 1.428571429; +// $line-height-computed: floor(($font-size-base * $line-height-base)); +// $headings-font-family: inherit; +// $headings-font-weight: 500; +// $headings-line-height: 1.1; +// $headings-color: inherit; +// +// // Iconography +// $icon-font-path: "../fonts/"; +// $icon-font-name: "glyphicons-halflings-regular"; +// $icon-font-svg-id: "glyphicons_halflingsregular"; +// +// // Components +// $padding-base-vertical: 6px; +// $padding-base-horizontal: 12px; +// $padding-large-vertical: 10px; +// $padding-large-horizontal: 16px; +// $padding-small-vertical: 5px; +// $padding-small-horizontal: 10px; +// $padding-xs-vertical: 1px; +// $padding-xs-horizontal: 5px; +// $line-height-large: 1.3333333; +// $line-height-small: 1.5; +// $border-radius-base: 4px; +// $border-radius-large: 6px; +// $border-radius-small: 3px; +// $component-active-color: #fff; +// $component-active-bg: $brand-primary; +// $caret-width-base: 4px; +// $caret-width-large: 5px; +// +// // Tables +// $table-cell-padding: 8px; +// $table-condensed-cell-padding: 5px; +// $table-bg: transparent; +// $table-bg-accent: #f9f9f9; +// $table-bg-hover: #f5f5f5; +// $table-bg-active: $table-bg-hover; +// $table-border-color: #ddd; +// +// // Buttons +// $btn-font-weight: normal; +// $btn-default-color: #333; +// $btn-default-bg: $brand-default; +// $btn-default-border: #ccc; +// $btn-primary-color: #fff; +// $btn-primary-bg: $brand-primary; +// $btn-primary-border: darken($btn-primary-bg, 5%); +// $btn-success-color: #fff; +// $btn-success-bg: $brand-success; +// $btn-success-border: darken($btn-success-bg, 5%); +// $btn-info-color: #fff; +// $btn-info-bg: $brand-info; +// $btn-info-border: darken($btn-info-bg, 5%); +// $btn-warning-color: #fff; +// $btn-warning-bg: $brand-warning; +// $btn-warning-border: darken($btn-warning-bg, 5%); +// $btn-danger-color: #fff; +// $btn-danger-bg: $brand-danger; +// $btn-danger-border: darken($btn-danger-bg, 5%); +// $btn-link-disabled-color: $gray-light; +// $btn-border-radius-base: $border-radius-base; +// $btn-border-radius-large: $border-radius-large; +// $btn-border-radius-small: $border-radius-small; +// +// // Forms +// $input-bg: #fff; +// $input-bg-disabled: $gray-lighter; +// $input-color: $gray; +// $input-border: #ccc; +// $input-border-radius: $border-radius-base; +// $input-border-radius-large: $border-radius-large; +// $input-border-radius-small: $border-radius-small; +// $input-border-focus: #66afe9; +// $input-color-placeholder: #999; +// $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2); +// $input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2); +// $input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2); +// $form-group-margin-bottom: 15px; +// $legend-color: $gray-dark; +// $legend-border-color: #e5e5e5; +// $input-group-addon-bg: $gray-lighter; +// $input-group-addon-border-color: $input-border; +// $cursor-disabled: not-allowed; +// +// // Dropdowns +// $dropdown-bg: #fff; +// $dropdown-border: rgba(0,0,0,.15); +// $dropdown-fallback-border: #ccc; +// $dropdown-divider-bg: #e5e5e5; +// $dropdown-link-color: $gray-dark; +// $dropdown-link-hover-color: darken($gray-dark, 5%); +// $dropdown-link-hover-bg: #f5f5f5; +// $dropdown-link-active-color: $component-active-color; +// $dropdown-link-active-bg: $component-active-bg; +// $dropdown-link-disabled-color: $gray-light; +// $dropdown-header-color: $gray-light; +// $dropdown-caret-color: #000; +// +// // Media queries breakpoints +// $screen-xs: 480px; +// $screen-xs-min: $screen-xs; +// $screen-phone: $screen-xs-min; +// $screen-sm: 768px; +// $screen-sm-min: $screen-sm; +// $screen-tablet: $screen-sm-min; +// $screen-md: 992px; +// $screen-md-min: $screen-md; +// $screen-desktop: $screen-md-min; +// $screen-lg: 1200px; +// $screen-lg-min: $screen-lg; +// $screen-lg-desktop: $screen-lg-min; +// $screen-xs-max: ($screen-sm-min - 1); +// $screen-sm-max: ($screen-md-min - 1); +// $screen-md-max: ($screen-lg-min - 1); +// +// // Grid system +// $grid-columns: 12; +// $grid-gutter-width: 30px; +// $grid-float-breakpoint: $screen-sm-min; +// $grid-float-breakpoint-max: ($grid-float-breakpoint - 1); +// +// // Container sizes +// $container-tablet: (720px + $grid-gutter-width); +// $container-sm: $container-tablet; +// $container-desktop: (940px + $grid-gutter-width); +// $container-md: $container-desktop; +// $container-large-desktop: (1140px + $grid-gutter-width); +// $container-lg: $container-large-desktop; +// +// // Navbar +// $navbar-height: 50px; +// $navbar-margin-bottom: $line-height-computed; +// $navbar-border-radius: $border-radius-base; +// $navbar-padding-horizontal: floor(($grid-gutter-width / 2)); +// $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2); +// $navbar-collapse-max-height: 340px; +// $navbar-default-color: #777; +// $navbar-default-bg: #f8f8f8; +// $navbar-default-border: darken($navbar-default-bg, 6.5%); +// $navbar-default-link-color: #777; +// $navbar-default-link-hover-color: #333; +// $navbar-default-link-hover-bg: transparent; +// $navbar-default-link-active-color: #555; +// $navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%); +// $navbar-default-link-disabled-color: #ccc; +// $navbar-default-link-disabled-bg: transparent; +// $navbar-default-brand-color: $navbar-default-link-color; +// $navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%); +// $navbar-default-brand-hover-bg: transparent; +// $navbar-default-toggle-hover-bg: #ddd; +// $navbar-default-toggle-icon-bar-bg: #888; +// $navbar-default-toggle-border-color: #ddd; +// +// // Inverted navbar +// $navbar-inverse-color: lighten($gray-light, 15%); +// $navbar-inverse-bg: #222; +// $navbar-inverse-border: darken($navbar-inverse-bg, 10%); +// $navbar-inverse-link-color: lighten($gray-light, 15%); +// $navbar-inverse-link-hover-color: #fff; +// $navbar-inverse-link-hover-bg: transparent; +// $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color; +// $navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%); +// $navbar-inverse-link-disabled-color: #444; +// $navbar-inverse-link-disabled-bg: transparent; +// $navbar-inverse-brand-color: $navbar-inverse-link-color; +// $navbar-inverse-brand-hover-color: #fff; +// $navbar-inverse-brand-hover-bg: transparent; +// $navbar-inverse-toggle-hover-bg: #333; +// $navbar-inverse-toggle-icon-bar-bg: #fff; +// $navbar-inverse-toggle-border-color: #333; +// +// // Navs +// $nav-link-padding: 10px 15px; +// $nav-link-hover-bg: $gray-lighter; +// $nav-disabled-link-color: $gray-light; +// $nav-disabled-link-hover-color: $gray-light; +// +// // Tabs +// $nav-tabs-border-color: #ddd; +// $nav-tabs-link-hover-border-color: $gray-lighter; +// $nav-tabs-active-link-hover-bg: $body-bg; +// $nav-tabs-active-link-hover-color: $gray; +// $nav-tabs-active-link-hover-border-color: #ddd; +// $nav-tabs-justified-link-border-color: #ddd; +// $nav-tabs-justified-active-link-border-color: $body-bg; +// +// // Pills +// $nav-pills-border-radius: $border-radius-base; +// $nav-pills-active-link-hover-bg: $component-active-bg; +// $nav-pills-active-link-hover-color: $component-active-color; +// +// // Pagination +// $pagination-color: $link-color; +// $pagination-bg: #fff; +// $pagination-border: #ddd; +// $pagination-hover-color: $link-hover-color; +// $pagination-hover-bg: $gray-lighter; +// $pagination-hover-border: #ddd; +// $pagination-active-color: #fff; +// $pagination-active-bg: $brand-primary; +// $pagination-active-border: $brand-primary; +// $pagination-disabled-color: $gray-light; +// $pagination-disabled-bg: #fff; +// $pagination-disabled-border: #ddd; +// +// // Pager +// $pager-bg: $pagination-bg; +// $pager-border: $pagination-border; +// $pager-border-radius: 15px; +// $pager-hover-bg: $pagination-hover-bg; +// $pager-active-bg: $pagination-active-bg; +// $pager-active-color: $pagination-active-color; +// $pager-disabled-color: $pagination-disabled-color; +// +// // Jumbotron +// $jumbotron-padding: 30px; +// $jumbotron-color: inherit; +// $jumbotron-bg: $gray-lighter; +// $jumbotron-heading-color: inherit; +// $jumbotron-font-size: ceil(($font-size-base * 1.5)); +// $jumbotron-heading-font-size: ceil(($font-size-base * 4.5)); +// +// // Form states and alerts +// $state-success-text: #3c763d; +// $state-success-bg: #dff0d8; +// $state-success-border: adjust-hue(darken($state-success-bg, 5%), -10); +// $state-info-text: #31708f; +// $state-info-bg: #d9edf7; +// $state-info-border: adjust-hue(darken($state-info-bg, 7%), -10); +// $state-warning-text: #8a6d3b; +// $state-warning-bg: #fcf8e3; +// $state-warning-border: adjust-hue(darken($state-warning-bg, 5%), -10); +// $state-danger-text: #a94442; +// $state-danger-bg: #f2dede; +// $state-danger-border: adjust-hue(darken($state-danger-bg, 5%), -10); +// +// // Tooltips +// $tooltip-max-width: 200px; +// $tooltip-color: #fff; +// $tooltip-bg: #000; +// $tooltip-opacity: .9; +// $tooltip-arrow-width: 5px; +// $tooltip-arrow-color: $tooltip-bg; +// +// // Popovers +// $popover-bg: #fff; +// $popover-max-width: 276px; +// $popover-border-color: rgba(0,0,0,.2); +// $popover-fallback-border-color: #ccc; +// $popover-title-bg: darken($popover-bg, 3%); +// $popover-arrow-width: 10px; +// $popover-arrow-color: $popover-bg; +// $popover-arrow-outer-width: ($popover-arrow-width + 1); +// $popover-arrow-outer-color: fadein($popover-border-color, 5%); +// $popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%); +// +// // Labels +// $label-default-bg: $gray-light; +// $label-primary-bg: $brand-primary; +// $label-success-bg: $brand-success; +// $label-info-bg: $brand-info; +// $label-warning-bg: $brand-warning; +// $label-danger-bg: $brand-danger; +// $label-color: #fff; +// $label-link-hover-color: #fff; +// +// // Modals +// $modal-inner-padding: 15px; +// $modal-title-padding: 15px; +// $modal-title-line-height: $line-height-base; +// $modal-content-bg: #fff; +// $modal-content-border-color: rgba(0,0,0,.2); +// $modal-content-fallback-border-color: #999; +// $modal-backdrop-bg: #000; +// $modal-backdrop-opacity: .5; +// $modal-header-border-color: #e5e5e5; +// $modal-footer-border-color: $modal-header-border-color; +// $modal-lg: 900px; +// $modal-md: 600px; +// $modal-sm: 300px; +// +// // Alerts +// $alert-padding: 15px; +// $alert-border-radius: $border-radius-base; +// $alert-link-font-weight: bold; +// $alert-success-bg: $state-success-bg; +// $alert-success-text: $state-success-text; +// $alert-success-border: $state-success-border; +// $alert-info-bg: $state-info-bg; +// $alert-info-text: $state-info-text; +// $alert-info-border: $state-info-border; +// $alert-warning-bg: $state-warning-bg; +// $alert-warning-text: $state-warning-text; +// $alert-warning-border: $state-warning-border; +// $alert-danger-bg: $state-danger-bg; +// $alert-danger-text: $state-danger-text; +// $alert-danger-border: $state-danger-border; +// +// // Progress bars +// $progress-bg: #f5f5f5; +// $progress-bar-color: #fff; +// $progress-border-radius: $border-radius-base; +// $progress-bar-bg: $brand-primary; +// $progress-bar-success-bg: $brand-success; +// $progress-bar-warning-bg: $brand-warning; +// $progress-bar-danger-bg: $brand-danger; +// $progress-bar-info-bg: $brand-info; +// +// // List group +// $list-group-bg: #fff; +// $list-group-border: #ddd; +// $list-group-border-radius: $border-radius-base; +// $list-group-hover-bg: #f5f5f5; +// $list-group-active-color: $component-active-color; +// $list-group-active-bg: $component-active-bg; +// $list-group-active-border: $list-group-active-bg; +// $list-group-active-text-color: lighten($list-group-active-bg, 40%); +// $list-group-disabled-color: $gray-light; +// $list-group-disabled-bg: $gray-lighter; +// $list-group-disabled-text-color: $list-group-disabled-color; +// $list-group-link-color: #555; +// $list-group-link-hover-color: $list-group-link-color; +// $list-group-link-heading-color: #333; +// +// // Panels +// $panel-bg: #fff; +// $panel-body-padding: 15px; +// $panel-heading-padding: 10px 15px; +// $panel-footer-padding: $panel-heading-padding; +// $panel-border-radius: $border-radius-base; +// $panel-inner-border: #ddd; +// $panel-footer-bg: #f5f5f5; +// $panel-default-text: $gray-dark; +// $panel-default-border: #ddd; +// $panel-default-heading-bg: #f5f5f5; +// $panel-primary-text: #fff; +// $panel-primary-border: $brand-primary; +// $panel-primary-heading-bg: $brand-primary; +// $panel-success-text: $state-success-text; +// $panel-success-border: $state-success-border; +// $panel-success-heading-bg: $state-success-bg; +// $panel-info-text: $state-info-text; +// $panel-info-border: $state-info-border; +// $panel-info-heading-bg: $state-info-bg; +// $panel-warning-text: $state-warning-text; +// $panel-warning-border: $state-warning-border; +// $panel-warning-heading-bg: $state-warning-bg; +// $panel-danger-text: $state-danger-text; +// $panel-danger-border: $state-danger-border; +// $panel-danger-heading-bg: $state-danger-bg; +// +// // Thumbnails +// $thumbnail-padding: 4px; +// $thumbnail-bg: $body-bg; +// $thumbnail-border: #ddd; +// $thumbnail-border-radius: $border-radius-base; +// $thumbnail-caption-color: $text-color; +// $thumbnail-caption-padding: 9px; +// +// // Wells +// $well-bg: #f5f5f5; +// $well-border: darken($well-bg, 7%); +// +// // Badges +// $badge-color: #fff; +// $badge-link-hover-color: #fff; +// $badge-bg: $gray-light; +// $badge-active-color: $link-color; +// $badge-active-bg: #fff; +// $badge-font-weight: bold; +// $badge-line-height: 1; +// $badge-border-radius: 10px; +// +// // Breadcrumbs +// $breadcrumb-padding-vertical: 8px; +// $breadcrumb-padding-horizontal: 15px; +// $breadcrumb-bg: #f5f5f5; +// $breadcrumb-color: #ccc; +// $breadcrumb-active-color: $gray-light; +// $breadcrumb-separator: "/"; +// +// // Carousel +// $carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); +// $carousel-control-color: #fff; +// $carousel-control-width: 15%; +// $carousel-control-opacity: .5; +// $carousel-control-font-size: 20px; +// $carousel-indicator-active-bg: #fff; +// $carousel-indicator-border-color: #fff; +// $carousel-caption-color: #fff; +// +// // Close +// $close-font-weight: bold; +// $close-color: #000; +// $close-text-shadow: 0 1px 0 #fff; +// +// // Code +// $code-color: #c7254e; +// $code-bg: #f9f2f4; +// $kbd-color: #fff; +// $kbd-bg: #333; +// $pre-bg: #f5f5f5; +// $pre-color: $gray-dark; +// $pre-border-color: #ccc; +// $pre-scrollable-max-height: 340px; +// +// // Type +// $component-offset-horizontal: 180px; +// $text-muted: $gray-light; +// $abbr-border-color: $gray-light; +// $headings-small-color: $gray-light; +// $blockquote-small-color: $gray-light; +// $blockquote-font-size: ($font-size-base * 1.25); +// $blockquote-border-color: $gray-lighter; +// $page-header-border-color: $gray-lighter; +// $dl-horizontal-offset: $component-offset-horizontal; +// $dl-horizontal-breakpoint: $grid-float-breakpoint; +// $hr-border: $gray-lighter; diff --git a/app/assets/stylesheets/extend/bootstrap.scss b/app/assets/stylesheets/extend/bootstrap.scss index ac2030716..830422c4d 100644 --- a/app/assets/stylesheets/extend/bootstrap.scss +++ b/app/assets/stylesheets/extend/bootstrap.scss @@ -14,7 +14,7 @@ // Active tab with error should retain error color if clicked on again .nav-tabs > li.active.has-error > a { - color: $color-apple-blossom; + color: $brand-danger; } @media (max-width: 886px) { diff --git a/app/assets/stylesheets/my_modules.scss b/app/assets/stylesheets/my_modules.scss index 896653b10..c1d22bed7 100644 --- a/app/assets/stylesheets/my_modules.scss +++ b/app/assets/stylesheets/my_modules.scss @@ -8,15 +8,15 @@ .task-due-date, .task-state-label { .alert-green { - color: $color-saturated-green; + color: $brand-success; } .alert-yellow { - color: $color-candlelight; + color: $brand-warning; } .alert-red { - color: $color-milano-red; + color: $brand-danger; } } diff --git a/app/assets/stylesheets/notifications.scss b/app/assets/stylesheets/notifications.scss index 4cfa15824..9ef0f991b 100644 --- a/app/assets/stylesheets/notifications.scss +++ b/app/assets/stylesheets/notifications.scss @@ -31,7 +31,7 @@ padding-top: 10px; &:hover { - background-color: $color-mystic; + background-color: $brand-primary-light; } &.no-notifications { @@ -40,7 +40,7 @@ } .unseen { - border-left: 4px solid $color-theme-primary; + border-left: 4px solid $brand-primary; } .text-center { @@ -49,9 +49,9 @@ } .assignment { - background-color: $color-theme-primary; + background-color: $brand-primary; border-radius: 50%; - color: $color-wild-sand; + color: $color-concrete; display: inline-block; font-size: 13px; height: 30px; @@ -60,9 +60,9 @@ } .system-message { - background-color: $color-theme-secondary; + background-color: $brand-default; border-radius: 50%; - color: $color-wild-sand; + color: $color-concrete; display: inline-block; font-size: 13px; height: 30px; @@ -71,9 +71,9 @@ } .deliver { - background-color: $color-orange; + background-color: $brand-warning; border-radius: 50%; - color: $color-wild-sand; + color: $color-concrete; display: inline-block; font-size: 13px; height: 30px; @@ -85,7 +85,7 @@ .notifications-footer { - background-color: $color-mystic; + background-color: $brand-primary-light; .btn-more-notifications { border-bottom: 1px solid $color-alto; @@ -96,7 +96,7 @@ text-align: center; &:hover { - background-color: $color-mystic; + background-color: $brand-primary-light; } } } diff --git a/app/assets/stylesheets/partials/_sidebar.scss b/app/assets/stylesheets/partials/_sidebar.scss index 8fb20bf6a..1ecba2cb7 100644 --- a/app/assets/stylesheets/partials/_sidebar.scss +++ b/app/assets/stylesheets/partials/_sidebar.scss @@ -38,8 +38,8 @@ $toggle-btn-size: 50px; .sidebar-header { height: $toggle-btn-size; - background: $color-theme-primary; - border-bottom: 2px solid darken($color-theme-primary, 10%); + background: $brand-primary; + border-bottom: 2px solid darken($brand-primary, 10%); .sidebar-header-title { width: inherit; @@ -64,9 +64,9 @@ $toggle-btn-size: 50px; margin-left: ($wrapper-width - $toggle-btn-size); margin-top: -$toggle-btn-size; font-size: 20pt; - background: $color-theme-primary; - border-left: 2px solid darken($color-theme-primary, 10%); - border-bottom: 2px solid darken($color-theme-primary, 10%); + background: $brand-primary; + border-left: 2px solid darken($brand-primary, 10%); + border-bottom: 2px solid darken($brand-primary, 10%); // Animations @include transition(margin-left 0.5s ease); @@ -118,7 +118,7 @@ $toggle-btn-size: 50px; @include transition(margin-left 0.5s ease); span { - color: darken($color-theme-primary, 10%); + color: darken($brand-primary, 10%); @include rotate-animation(0.5s, 0deg); @include transition(color 0.5s ease); diff --git a/app/assets/stylesheets/partials/_tree_view.scss b/app/assets/stylesheets/partials/_tree_view.scss index 440c188c9..a48fc1adb 100644 --- a/app/assets/stylesheets/partials/_tree_view.scss +++ b/app/assets/stylesheets/partials/_tree_view.scss @@ -18,7 +18,7 @@ } .first-indent { - background-color: $color-wild-sand; + background-color: $color-concrete; padding-left: 30px; } @@ -49,7 +49,7 @@ } &.active > span { - background-color: $color-theme-primary; + background-color: $brand-primary; color: $color-white; font-weight: bold; @@ -74,7 +74,7 @@ color: $color-emperor; &:hover { - color: $color-theme-primary; + color: $brand-primary; } } diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss index fa92a85e4..7477d6001 100644 --- a/app/assets/stylesheets/projects.scss +++ b/app/assets/stylesheets/projects.scss @@ -2,8 +2,8 @@ @import "mixins"; // Some color definitions -$color-group-hover: $color-theme-primary; -$color-module-hover: $color-theme-secondary; +$color-group-hover: $brand-primary; +$color-module-hover: $brand-default; /* Canvas index page */ @@ -112,7 +112,7 @@ $color-module-hover: $color-theme-secondary; cursor: pointer; &:hover { - color: $color-theme-primary; + color: $brand-primary; padding: 2px 9px 4px 9px; } } @@ -122,7 +122,7 @@ $color-module-hover: $color-theme-secondary; border: 2px solid green; } .jsplumb-drag .title { - background-color: $color-theme-primary !important; + background-color: $brand-primary !important; color: $color-white !important; } path, ._jsPlumb_endpoint { @@ -132,7 +132,7 @@ path, ._jsPlumb_endpoint { fill: $color-white; } .ep-hover svg * { - fill: $color-theme-primary; + fill: $brand-primary; } /* EDIT MODE MODULE */ @@ -140,16 +140,16 @@ path, ._jsPlumb_endpoint { opacity: 0.7; } .module.dragged > .panel-heading { - background-color: $color-theme-primary; + background-color: $brand-primary; color: $color-white; } .module.collided { .overlay { display: block; z-index: 21; - background-color: $color-milano-red; - border: 1px solid $color-milano-red; - @include box-shadow(0 0 0 1pt $color-milano-red); + background-color: $brand-danger; + border: 1px solid $brand-danger; + @include box-shadow(0 0 0 1pt $brand-danger); border-radius: 4px; position: absolute; top: 0; @@ -223,28 +223,28 @@ path, ._jsPlumb_endpoint { } &.alert-green .panel-body { - color: $color-saturated-green; + color: $brand-success; font-weight: bold; .due-date-link { - color: $color-saturated-green; + color: $brand-success; } } &.alert-yellow .panel-body { - color: $color-candlelight; + color: $brand-warning; font-weight: bold; .due-date-link { - color: $color-candlelight; + color: $brand-warning; } } &.alert-red .panel-body { - color: $color-milano-red; + color: $brand-danger; font-weight: bold; .due-date-link { - color: $color-milano-red; + color: $brand-danger; } } } @@ -265,18 +265,18 @@ path, ._jsPlumb_endpoint { } &.alert-green { - border-color: $color-saturated-green; + border-color: $brand-success; border-radius: 8px; border-width: 4px; } &.alert-yellow { - border-color: $color-candlelight; + border-color: $brand-warning; border-width: 4px; border-radius: 8px; } &.alert-red { - border-color: $color-milano-red; + border-color: $brand-danger; border-width: 4px; border-radius: 8px; } @@ -332,7 +332,7 @@ path, ._jsPlumb_endpoint { margin-top: 20%; a { - color: $color-mine-shaft; + color: $color-emperor; } } @@ -344,14 +344,14 @@ path, ._jsPlumb_endpoint { } &.alert-green { - border-color: $color-saturated-green; + border-color: $brand-success; } &.alert-yellow { - border-color: $color-candlelight; + border-color: $brand-warning; } &.alert-red { - border-color: $color-milano-red; + border-color: $brand-danger; } } @@ -362,7 +362,7 @@ li.group-hover { } li.module-hover { a { - color: $color-theme-primary; + color: $brand-primary; text-decoration: underline; } } @@ -508,7 +508,7 @@ li.module-hover { } .big-plus { - color: $color-mystic; + color: $brand-primary-light; display: block; font-size: 250px; margin: 20px 0; diff --git a/app/assets/stylesheets/reports.scss b/app/assets/stylesheets/reports.scss index 33647fdbf..4027665be 100644 --- a/app/assets/stylesheets/reports.scss +++ b/app/assets/stylesheets/reports.scss @@ -148,7 +148,7 @@ label { opacity: 0.7; padding: 15px; border-radius: 5px; - border: 4px $color-theme-primary solid; + border: 4px $brand-primary solid; .plus-icon { bottom: 16px !important; @@ -166,7 +166,7 @@ label { .filler { display: block; height: 4px; - background-color: $color-theme-primary; + background-color: $brand-primary; border-radius: 1px; margin-top: 8px; margin-bottom: 8px; @@ -183,7 +183,7 @@ label { } .plus-icon { - color: $color-theme-primary; + color: $brand-primary; display: block; text-align: center; width: 40px; @@ -201,7 +201,7 @@ label { opacity: 1.0; .filler { - background-color: $color-theme-primary; + background-color: $brand-primary; .plus-icon span { font-weight: bold; @@ -240,8 +240,8 @@ label { } &:hover { - background-color: $color-mystic; - @include box-shadow(0 0 2px 15px $color-mystic); + background-color: $brand-primary-light; + @include box-shadow(0 0 2px 15px $brand-primary-light); & > .report-element-header { @@ -266,7 +266,7 @@ label { } &:hover > .report-element-body .project-name { - color: $color-theme-primary; + color: $brand-primary; } } @@ -297,7 +297,7 @@ label { } &:hover > .report-element-body .module-name { - color: $color-theme-primary; + color: $brand-primary; } } @@ -329,7 +329,7 @@ label { } &:hover > .report-element-header { - color: $color-theme-primary; + color: $brand-primary; } .report-element-body { @@ -368,7 +368,7 @@ label { /** Step element style */ .report-step-element { &:hover > .report-element-body .step-name { - color: $color-theme-primary; + color: $brand-primary; } } @@ -388,7 +388,7 @@ label { &:hover > .report-element-header { .attachment-icon { - color: $color-theme-primary; + color: $brand-primary; } } } @@ -403,7 +403,7 @@ label { &:hover > .report-element-header { .table-name { - color: $color-theme-primary; + color: $brand-primary; } } } @@ -417,7 +417,7 @@ label { } &:hover > .report-element-header .file-name { - color: $color-theme-primary; + color: $brand-primary; } } @@ -438,7 +438,7 @@ label { } &:hover > .report-element-header .checklist-name { - color: $color-theme-primary; + color: $brand-primary; } } @@ -475,7 +475,7 @@ label { &:hover > .report-element-header { .comments-icon,.comments-name { - color: $color-theme-primary; + color: $brand-primary; } } } @@ -504,7 +504,7 @@ label { &:hover > .report-element-header { .samples-icon,.samples-name { - color: $color-theme-primary; + color: $brand-primary; } } } @@ -524,7 +524,7 @@ label { &:hover > .report-element-header { .repository-icon, .repository-name { - color: $color-theme-primary; + color: $brand-primary; } } } @@ -559,7 +559,7 @@ label { &:hover > .report-element-header { .activity-icon,.activity-name { - color: $color-theme-primary; + color: $brand-primary; } } } diff --git a/app/assets/stylesheets/sample_types_groups.scss b/app/assets/stylesheets/sample_types_groups.scss index c6b41fc7c..6abf8e741 100644 --- a/app/assets/stylesheets/sample_types_groups.scss +++ b/app/assets/stylesheets/sample_types_groups.scss @@ -45,7 +45,7 @@ } .glyphicon-ok { - color: $color-theme-secondary; + color: $brand-default; } .glyphicon { diff --git a/app/assets/stylesheets/themes/main_navigation.scss b/app/assets/stylesheets/themes/main_navigation.scss index 94c0d7d98..903bf6744 100644 --- a/app/assets/stylesheets/themes/main_navigation.scss +++ b/app/assets/stylesheets/themes/main_navigation.scss @@ -12,9 +12,9 @@ } #count-notifications { - background-color: $color-theme-primary; + background-color: $brand-primary; border-radius: 5px; - color: $color-wild-sand; + color: $color-concrete; display: none; font-size: 11px; font-weight: bold; @@ -69,7 +69,7 @@ } .unseen { - border-left: 4px solid $color-theme-primary; + border-left: 4px solid $brand-primary; } .text-center { @@ -84,9 +84,9 @@ } .assignment { - background-color: $color-theme-primary; + background-color: $brand-primary; border-radius: 50%; - color: $color-wild-sand; + color: $color-concrete; display: block; font-size: 23px; height: 45px; @@ -95,9 +95,9 @@ } .deliver { - background-color: $color-orange; + background-color: $brand-warning; border-radius: 50%; - color: $color-wild-sand; + color: $color-concrete; display: block; font-size: 23px; height: 45px; @@ -106,9 +106,9 @@ } .system-message { - background-color: $color-theme-secondary; + background-color: $brand-default; border-radius: 50%; - color: $color-wild-sand; + color: $color-concrete; display: block; font-size: 23px; height: 45px; @@ -117,8 +117,8 @@ } .notifications-dropdown-header { - background-color: $color-theme-primary; - color: $color-wild-sand; + background-color: $brand-primary; + color: $color-concrete; font-weight: bold; padding: 8px; @@ -128,7 +128,7 @@ } .notifications-dropdown-footer { - background-color: $color-mystic; + background-color: $brand-primary-light; padding: 8px; text-align: center; } @@ -158,10 +158,10 @@ } #search-bar { - border-color: $color-border; + border-color: $color-alto; .btn-default { - background-color: $color-theme-primary; - border-color: $color-theme-primary; + background-color: $brand-primary; + border-color: $brand-primary; color: $color-white; } @@ -188,7 +188,7 @@ padding: 10px 15px; &.active { - color: $color-theme-primary; + color: $brand-primary; } } @@ -233,9 +233,9 @@ } .assignment { - background-color: $color-theme-primary; + background-color: $brand-primary; border-radius: 50%; - color: $color-wild-sand; + color: $color-concrete; display: block !important; font-size: 15px; height: 30px; @@ -247,9 +247,9 @@ } .system-message { - background-color: $color-theme-secondary; + background-color: $brand-default; border-radius: 50%; - color: $color-wild-sand; + color: $color-concrete; display: block !important; font-size: 15px; height: 30px; @@ -274,13 +274,13 @@ } .glyphicon-ok-sign { - color: $color-confirmation-green; + color: $brand-success; margin-left: -10px; margin-right: 10px; } .team-name-item { - border-bottom: 1px solid $color-list-separator; + border-bottom: 1px solid $color-silver-chalice; padding-bottom: 8px; padding-top: 5px; } @@ -293,13 +293,13 @@ } .btn-group { - border-color: $color-border; + border-color: $color-alto; margin-top: 8px; } .btn-primary { - background-color: $color-theme-primary; - border-color: $color-theme-primary; + background-color: $brand-primary; + border-color: $brand-primary; } .dropdown-menu { @@ -340,7 +340,7 @@ } .custom-nav-dropdown { - border: 1px solid $color-border; + border: 1px solid $color-alto; padding: 10px 0 10px 30px; } diff --git a/app/assets/stylesheets/themes/menu_bar.scss b/app/assets/stylesheets/themes/menu_bar.scss index 781043b8e..7e2a9d012 100644 --- a/app/assets/stylesheets/themes/menu_bar.scss +++ b/app/assets/stylesheets/themes/menu_bar.scss @@ -16,7 +16,7 @@ padding-right: 4px; & > a { - color: $color-gray; + color: $color-silver-chalice; display: grid; font-size: 12px; margin-left: auto; @@ -33,7 +33,7 @@ background-color: $color-gainsboro; margin-right: 4px; padding-right: 0; - @include box-shadow(4px 0 0 $color-theme-primary); + @include box-shadow(4px 0 0 $brand-primary); & > a { color: $color-emperor; diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 39ae3b334..07004b8e2 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -101,7 +101,7 @@ body { } a { - color: $color-theme-primary; + color: $brand-primary; } .jumbotron { @@ -109,7 +109,7 @@ a { } .badge { - background-color: $color-theme-primary; + background-color: $brand-primary; font-size: 11px; border-radius: 5px; } @@ -128,7 +128,7 @@ a { } .bg-primary { - background-color: $color-theme-primary; + background-color: $brand-primary; } /* this rule is strict because the order of css files is not correct */ @@ -137,7 +137,7 @@ a { } mark,.mark { - background-color: $color-candlelight; + background-color: $brand-warning; } .label-default { @@ -145,12 +145,12 @@ mark,.mark { } .label-primary { - background-color: $color-theme-primary; + background-color: $brand-primary; } .circle { @extend .badge; - background-color: $color-theme-primary; + background-color: $brand-primary; border-radius: 1em; &.disabled { @@ -173,10 +173,10 @@ a[data-toggle="tooltip"] { & > li.has-error { & > a { - color: $color-apple-blossom; + color: $brand-danger; &:hover { - color: $color-mojo; + color: $brand-danger; } } } @@ -185,7 +185,7 @@ a[data-toggle="tooltip"] { .has-error { .ql-container.ql-snow, .ql-toolbar.ql-snow { - border: 1px solid $color-apple-blossom; + border: 1px solid $brand-danger; } } @@ -196,7 +196,7 @@ a[data-toggle="tooltip"] { .nav-pills { & > li { a { - color: $color-theme-primary; + color: $brand-primary; } &:not(.active):hover a { @@ -205,7 +205,7 @@ a[data-toggle="tooltip"] { &.active a { color: $color-white; - background-color: $color-theme-primary; + background-color: $brand-primary; } } } @@ -220,7 +220,7 @@ a[data-toggle="tooltip"] { .nav-tabs-less > li.active > a { &,&:hover,&:focus { - color: $color-theme-secondary; + color: $brand-default; background-color: transparent; border-color: transparent; } @@ -228,7 +228,7 @@ a[data-toggle="tooltip"] { .tag.label.label-info { font-size: 100%; - background-color: $color-theme-primary; + background-color: $brand-primary; } #secondary-navigation { @@ -273,14 +273,14 @@ a[data-toggle="tooltip"] { text-transform: uppercase; & > a { - color: $color-gray; + color: $color-silver-chalice; span { //width: 14px; } } &.active { - @include box-shadow(0 4px 0 $color-theme-primary); + @include box-shadow(0 4px 0 $brand-primary); &> a { font-weight: bold; @@ -538,16 +538,16 @@ ul.double-line > li { .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { - background-color: $color-theme-primary; + background-color: $brand-primary; } .pagination > li > a, .pagination > li > span { - color: $color-theme-primary; + color: $brand-primary; } .panel-default > .panel-heading { - background-color: $color-mystic; + background-color: $brand-primary-light; &>.panel-title { overflow: hidden; @@ -558,15 +558,15 @@ ul.double-line > li { .panel-project { .panel-heading { - background-color: $color-theme-primary; + background-color: $brand-primary; color: $color-white; } } .panel-archive { .panel-heading { - background-color: darken($color-mystic, 5%); - color: lighten($color-mine-shaft, 15%); + background-color: darken($brand-primary-light, 5%); + color: lighten($color-emperor, 15%); } } @@ -637,11 +637,11 @@ ul.double-line > li { li.notification.alert-red > .date-time { font-weight: bold; - color: $color-milano-red; + color: $brand-danger; } li.notification.alert-yellow > .date-time { font-weight: bold; - color: $color-candlelight; + color: $brand-warning; } } } @@ -653,7 +653,7 @@ ul.double-line > li { margin-bottom: 0; &> .panel-heading { - background-color: $color-mystic; + background-color: $brand-primary-light; border-bottom: 1px solid $color-alto; .panel-title > a { @@ -729,8 +729,8 @@ ul.content-module-activities { .activity-item-date { font-size: 1.2em; - background-color: $color-theme-primary; - border-color: $color-theme-primary; + background-color: $brand-primary; + border-color: $brand-primary; color: $color-white; padding-top: 5px; padding-bottom: 5px; @@ -898,16 +898,17 @@ ul.content-module-activities { .dnd-error, .dnd-total-error { - color: $color-milano-red; + color: $brand-danger; } .is-dragover { - background: $color-drag-overlay; + background: $color-black; bottom: 0; display: none; height: 100%; left: 0; min-height: 100%; + opacity: .4; pointer-events: none; position: fixed; right: 0; @@ -995,7 +996,7 @@ table.dataTable { word-break: initial; thead { - background-color: $color-gray; + background-color: $color-silver-chalice; } thead > tr > th { @@ -1020,13 +1021,13 @@ table.dataTable { color: $color-emperor !important; a { - color: $color-theme-primary !important; + color: $brand-primary !important; } } .sorting_desc, .sorting_asc { - background-color: $color-theme-primary; + background-color: $brand-primary; } } @@ -1067,12 +1068,12 @@ table.dataTable { top: 50%; margin-top: -19px; border-top: 19px solid transparent; - border-left: 13px solid $color-theme-primary; + border-left: 13px solid $brand-primary; border-bottom: 19px solid transparent; } .nav-stacked-arrow > li.active > a:hover:after { - border-left: 13px solid darken($color-theme-primary, 15%); + border-left: 13px solid darken($brand-primary, 15%); } /* Overlay to disable interaction while loading ajax */ @@ -1094,7 +1095,7 @@ table.dataTable { } .turbolinks-progress-bar::before { - background-color: $color-theme-primary; + background-color: $brand-primary; } /* Loading animation for ajax events, inspired by Codrops */ @@ -1105,7 +1106,7 @@ table.dataTable { z-index: -1; width: 100%; height: 3px; - background: $color-theme-primary; + background: $brand-primary; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); pointer-events: none; @@ -1136,7 +1137,7 @@ table.dataTable { .custom .introjs-skipbutton { border-radius: 0; - color: $color-theme-primary; + color: $brand-primary; background-color: $color-white; background-image: none; border: none; @@ -1162,7 +1163,7 @@ table.dataTable { .modal-tooltiptext { background-color: $color-alto; border-radius: 6px; - color: $color-mine-shaft; + color: $color-emperor; display: block; margin-left: 100px; padding: 5px; @@ -1204,7 +1205,7 @@ table.dataTable { top: auto; li:not(.dropdown-header):hover { - background-color: $color-wild-sand; + background-color: $color-concrete; } } @@ -1479,7 +1480,7 @@ textarea.textarea-sm { } .ok { - color: $color-theme-secondary; + color: $brand-default; margin-right: 5px; } @@ -1533,7 +1534,7 @@ th.custom-field .modal-tooltiptext { color: $color-black; border: 1px solid $color-emperor; border-radius: 3px; - box-shadow: 0 0 5px $color-cloud; + box-shadow: 0 0 5px $color-gainsboro; min-width: 520px; max-height: 200px; overflow: auto; @@ -1546,11 +1547,11 @@ th.custom-field .modal-tooltiptext { } strong { - color: $color-theme-primary; + color: $brand-primary; } .cur { - background: $color-theme-primary; + background: $brand-primary; color: $color-white; small { @@ -1582,7 +1583,7 @@ th.custom-field .modal-tooltiptext { padding-top: 3px; padding-bottom: 7px; height: 34px; - background-color: $color-gallery; + background-color: $color-concrete; border-bottom: 1px solid $color-emperor; clear: both; diff --git a/app/javascript/src/styles/constants.scss b/app/javascript/src/styles/constants.scss index f7c6b8b65..1e3475eca 100644 --- a/app/javascript/src/styles/constants.scss +++ b/app/javascript/src/styles/constants.scss @@ -3,50 +3,24 @@ //============================================================================== // Theme colors -$color-theme-primary: #37a0d9; -$color-theme-secondary: #8fd13f; -$color-theme-dark: #6d6e71; +$brand-primary: #37a0d9; +$brand-default: #8fd13f; // Grayscale colors $color-white: #fff; $color-alabaster: #fcfcfc; -$color-snow: #f9f9f9; -$color-wild-sand: #f5f5f5; $color-concrete: #f2f2f2; -$color-gallery: #eee; $color-gainsboro: #e3e3e3; $color-alto: #d2d2d2; $color-silver: #c5c5c5; -$color-dark-gray: #adadad; $color-silver-chalice: #a0a0a0; -$color-gray: #909088; $color-dove-gray: #666; $color-emperor: #555; -$color-mine-shaft: #333; -$color-nero: #262626; $color-black: #000; -$color-cloud: rgba(0, 0, 0, .1); -$color-gray-light-yadcf: #ccc; -$color-gray-dark-yadcf: #a9a9a9; // Miscelaneous colors -$color-mystic: #eaeff2; -$color-candlelight: #ffda23; -$color-orange: #ff900b; -$color-saturated-green: #008600; -$color-blue-yadcf: #337ab7; $primary-hover-color: #75b22b; -// Red colors -$color-mojo: #cf4b48; -$color-apple-blossom: #a94442; -$color-milano-red: #a70b05; - -// Colors for specific intents -$color-visited-link: #23527c; - -// Overlay shade for drag'n dropdown -$color-drag-overlay: rgba(0, 0, 0, .4); //============================================================================== // Other diff --git a/app/javascript/src/styles/main.scss b/app/javascript/src/styles/main.scss index fa4d592e1..8b9f89f68 100644 --- a/app/javascript/src/styles/main.scss +++ b/app/javascript/src/styles/main.scss @@ -9,7 +9,7 @@ body { } .label-primary { - background-color: $color-theme-primary; + background-color: $brand-primary; } .btn { @@ -17,18 +17,18 @@ body { } .btn-primary { - background-color: $color-theme-secondary; - border-color: darken($color-theme-secondary, 5%); + background-color: $brand-default; + border-color: darken($brand-default, 5%); &.active, &.focus, &.active.focus { - background-color: darken($color-theme-secondary, 20%); - border-color: darken($color-theme-secondary, 25%); + background-color: darken($brand-default, 20%); + border-color: darken($brand-default, 25%); &:hover { - background-color: darken($color-theme-secondary, 25%); - border-color: darken($color-theme-secondary, 30%); + background-color: darken($brand-default, 25%); + border-color: darken($brand-default, 30%); } } @@ -38,19 +38,19 @@ body { &:active:hover, &:focus:hover, &:active:focus:hover { - background-color: darken($color-theme-secondary, 20%); - border-color: darken($color-theme-secondary, 25%); + background-color: darken($brand-default, 20%); + border-color: darken($brand-default, 25%); } &:hover { - background-color: darken($color-theme-secondary, 5%); - border-color: darken($color-theme-secondary, 10%); + background-color: darken($brand-default, 5%); + border-color: darken($brand-default, 10%); } } // tags input .react-tagsinput--focused { - border-color: $color-theme-primary; + border-color: $brand-primary; } .react-tagsinput-input { @@ -58,7 +58,7 @@ body { } .react-tagsinput-tag { - background-color: $color-theme-primary; + background-color: $brand-primary; border: 0; color: $color-white; font-weight: bold; diff --git a/config/initializers/constants.rb b/config/initializers/constants.rb index 4fdbbc1a6..5af86d880 100644 --- a/config/initializers/constants.rb +++ b/config/initializers/constants.rb @@ -144,40 +144,21 @@ class Constants ].freeze # Theme colors - COLOR_THEME_PRIMARY = '#37a0d9'.freeze # $color-theme-primary - COLOR_THEME_SECONDARY = '#8fd13f'.freeze # $color-theme-secondary - COLOR_THEME_DARK = '#6d6e71'.freeze # $color-theme-dark + COLOR_THEME_PRIMARY = '#37a0d9'.freeze # $brand-primary + COLOR_THEME_SECONDARY = '#8fd13f'.freeze # $brand-default # Grayscale colors COLOR_WHITE = '#ffffff'.freeze # $color-white COLOR_ALABASTER = '#fcfcfc'.freeze # $color-alabaster - COLOR_SNOW = '#f9f9f9'.freeze # $color-snow - COLOR_WILD_SAND = '#f5f5f5'.freeze # $color-wild-sand COLOR_CONCRETE = '#f2f2f2'.freeze # $color-concrete - COLOR_GALLERY = '#eeeeee'.freeze # $color-gallery COLOR_GAINSBORO = '#e3e3e3'.freeze # $color-gainsboro COLOR_ALTO = '#d2d2d2'.freeze # $color-alto COLOR_SILVER = '#c5c5c5'.freeze # $color-silver - COLOR_DARK_GRAY = '#adadad'.freeze # $color-dark-gray COLOR_SILVER_CHALICE = '#a0a0a0'.freeze # $color-silver-chalice - COLOR_GRAY = '#909088'.freeze # $color-gray COLOR_DOVE_GRAY = '#666666'.freeze # $color-dove-gray COLOR_EMPEROR = '#555555'.freeze # $color-emperor - COLOR_MINE_SHAFT = '#333333'.freeze # $color-mine-shaft - COLOR_NERO = '#262626'.freeze # $color-nero COLOR_BLACK = '#000000'.freeze # $color-black - COLOR_GRAY_LIGHT_YADCF = '#cccccc'.freeze # $color-gray-light-yadcf - COLOR_GRAY_DARK_YADCF = '#a9a9a9'.freeze # $color-gray-dark-yadcf - - # Miscelaneous colors - COLOR_MYSTIC = '#eaeff2'.freeze # $color-mystic - COLOR_CANDLELIGHT = '#ffda23'.freeze # $color-candlelight - COLOR_BLUE_YADCF = '#337ab7'.freeze # $color-blue-yadcf - - # Red colors - COLOR_MOJO = '#cf4b48'.freeze # $color-mojo - COLOR_APPLE_BLOSSOM = '#a94442'.freeze # $color-apple-blossom - COLOR_MILANO_RED = '#a70b05'.freeze # $color-milano-red + #============================================================================= # External URLs