From b5f3c6a8d4ddf657ce7fc4cb03fa5885fc6f7587 Mon Sep 17 00:00:00 2001 From: Kovah Date: Thu, 8 Sep 2016 13:57:57 +0200 Subject: [PATCH] #14840 - Use color variables consistently Replaces some raw colors with the appropriate color variables Example: #eee will be replaced by $gray-lighter (#eceeef) --- scss/_variables.scss | 66 ++++++++++++++++++++++---------------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index db9c202ff6bd..dd342fdd5ac7 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -328,11 +328,11 @@ $input-border-radius-lg: $border-radius-lg !default; $input-border-radius-sm: $border-radius-sm !default; $input-bg-focus: $input-bg; -$input-border-focus: #66afe9 !default; -$input-box-shadow-focus: rgba(102,175,233,.6) !default; +$input-border-focus: lighten($brand-primary, 25%) !default; +$input-box-shadow-focus: rgba($input-border-focus, .6) !default; $input-color-focus: $input-color; -$input-color-placeholder: #999 !default; +$input-color-placeholder: $gray-light !default; $input-padding-x-sm: .5rem !default; $input-padding-y-sm: .25rem !default; @@ -361,22 +361,22 @@ $custom-control-indicator-bg-size: 50% 50% !default; $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba(0,0,0,.1) !default; $custom-control-disabled-cursor: $cursor-disabled !default; -$custom-control-disabled-indicator-bg: #eee !default; -$custom-control-disabled-description-color: #767676 !default; +$custom-control-disabled-indicator-bg: $gray-lighter !default; +$custom-control-disabled-description-color: $gray-light !default; $custom-control-checked-indicator-color: #fff !default; -$custom-control-checked-indicator-bg: #0074d9 !default; +$custom-control-checked-indicator-bg: $brand-primary !default; $custom-control-checked-indicator-box-shadow: none !default; -$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default; +$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem $body-bg, 0 0 0 .2rem $brand-primary !default; $custom-control-active-indicator-color: #fff !default; -$custom-control-active-indicator-bg: #84c6ff !default; +$custom-control-active-indicator-bg: lighten($brand-primary, 35%) !default; $custom-control-active-indicator-box-shadow: none !default; $custom-checkbox-radius: $border-radius !default; $custom-checkbox-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") !default; -$custom-checkbox-indeterminate-bg: #0074d9 !default; +$custom-checkbox-indeterminate-bg: $brand-primary !default; $custom-checkbox-indeterminate-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E") !default; $custom-checkbox-indeterminate-box-shadow: none !default; @@ -385,9 +385,9 @@ $custom-radio-checked-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='h $custom-select-padding-x: .75rem !default; $custom-select-padding-y: .375rem !default; -$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-color: $input-color !default; -$custom-select-disabled-color: $gray-light !default; +$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator +$custom-select-color: $input-color !default; +$custom-select-disabled-color: $gray-light !default; $custom-select-bg: #fff !default; $custom-select-disabled-bg: $gray-lighter !default; $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions @@ -396,27 +396,27 @@ $custom-select-border-width: $input-btn-border-width !default; $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; -$custom-select-focus-border-color: #51a7e8 !default; -$custom-select-focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default; +$custom-select-focus-border-color: lighten($brand-primary, 25%) !default; +$custom-select-focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; -$custom-select-sm-padding-y: .2rem !default; -$custom-select-sm-font-size: 75% !default; +$custom-select-sm-padding-y: .2rem !default; +$custom-select-sm-font-size: 75% !default; $custom-file-height: 2.5rem !default; $custom-file-width: 14rem !default; -$custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default; +$custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem $brand-primary !default; $custom-file-padding-x: .5rem !default; $custom-file-padding-y: 1rem !default; $custom-file-line-height: 1.5 !default; -$custom-file-color: #555 !default; +$custom-file-color: $gray !default; $custom-file-bg: #fff !default; $custom-file-border-width: $border-width !default; -$custom-file-border-color: #ddd !default; +$custom-file-border-color: $input-border-color !default; $custom-file-border-radius: $border-radius !default; $custom-file-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05) !default; $custom-file-button-color: $custom-file-color !default; -$custom-file-button-bg: #eee !default; +$custom-file-button-bg: $gray-lighter !default; $custom-file-text: ( placeholder: ( en: "Choose file..." @@ -443,12 +443,12 @@ $dropdown-margin-top: 2px !default; $dropdown-bg: #fff !default; $dropdown-border-color: rgba(0,0,0,.15) !default; $dropdown-border-width: $border-width !default; -$dropdown-divider-bg: #e5e5e5 !default; +$dropdown-divider-bg: $gray-lighter !default; $dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175) !default; $dropdown-link-color: $gray-dark !default; $dropdown-link-hover-color: darken($gray-dark, 5%) !default; -$dropdown-link-hover-bg: #f5f5f5 !default; +$dropdown-link-hover-bg: $gray-lightest !default; $dropdown-link-active-color: $component-active-color !default; $dropdown-link-active-bg: $component-active-bg !default; @@ -582,7 +582,7 @@ $card-border-width: 1px !default; $card-border-radius: $border-radius !default; $card-border-color: rgba(0,0,0,.125) !default; $card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width}) !default; -$card-cap-bg: #f5f5f5 !default; +$card-cap-bg: $gray-lightest !default; $card-bg: #fff !default; $card-link-hover-color: #fff !default; @@ -671,7 +671,7 @@ $modal-content-sm-up-box-shadow: 0 5px 15px rgba(0,0,0,.5) !default; $modal-backdrop-bg: #000 !default; $modal-backdrop-opacity: .5 !default; -$modal-header-border-color: #e5e5e5 !default; +$modal-header-border-color: $gray-lightest !default; $modal-footer-border-color: $modal-header-border-color !default; $modal-header-border-width: $modal-content-border-width !default; $modal-footer-border-width: $modal-header-border-width !default; @@ -709,8 +709,8 @@ $alert-danger-border: $state-danger-border !default; // Progress bars -$progress-bg: #eee !default; -$progress-bar-color: #0074d9 !default; +$progress-bg: $gray-lightest !default; +$progress-bar-color: $brand-primary !default; $progress-border-radius: $border-radius !default; $progress-box-shadow: inset 0 .1rem .1rem rgba(0,0,0,.1) !default; @@ -728,7 +728,7 @@ $list-group-border-color: #ddd !default; $list-group-border-width: $border-width !default; $list-group-border-radius: $border-radius !default; -$list-group-hover-bg: #f5f5f5 !default; +$list-group-hover-bg: $gray-lightest !default; $list-group-active-color: $component-active-color !default; $list-group-active-bg: $component-active-bg !default; $list-group-active-border: $list-group-active-bg !default; @@ -738,9 +738,9 @@ $list-group-disabled-color: $gray-light !default; $list-group-disabled-bg: $gray-lighter !default; $list-group-disabled-text-color: $list-group-disabled-color !default; -$list-group-link-color: #555 !default; +$list-group-link-color: $gray !default; $list-group-link-hover-color: $list-group-link-color !default; -$list-group-link-heading-color: #333 !default; +$list-group-link-heading-color: $gray-dark !default; $list-group-item-padding-x: 1.25rem !default; $list-group-item-padding-y: .75rem !default; @@ -817,13 +817,13 @@ $close-text-shadow: 0 1px 0 #fff !default; $code-font-size: 90% !default; $code-padding-x: .4rem !default; $code-padding-y: .2rem !default; -$code-color: #bd4147 !default; -$code-bg: #f7f7f9 !default; +$code-color: $brand-danger !default; +$code-bg: $gray-lightest !default; $kbd-color: #fff !default; -$kbd-bg: #333 !default; +$kbd-bg: $gray-dark !default; -$pre-bg: #f7f7f9 !default; +$pre-bg: $gray-lightest !default; $pre-color: $gray-dark !default; $pre-border-color: #ccc !default; $pre-scrollable-max-height: 340px !default;