From 27f553c9651dbe81a8aaf821aa2bf15670d9adb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Mon, 12 Mar 2018 18:19:37 +0100 Subject: [PATCH] Replace "loose" HEX values with their respective variables (#25672) --- scss/_carousel.scss | 4 ++-- scss/_print.scss | 10 +++++----- scss/_reboot.scss | 2 +- scss/_variables.scss | 1 + scss/mixins/_forms.scss | 2 +- scss/mixins/_gradients.scss | 14 +++++++------- scss/mixins/_list-group.scss | 2 +- scss/mixins/_nav-divider.scss | 2 +- scss/utilities/_text.scss | 2 +- 9 files changed, 20 insertions(+), 19 deletions(-) diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 3b048e0d1a..c745858f74 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -135,13 +135,13 @@ .carousel-control-prev { left: 0; @if $enable-gradients { - background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001)); + background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); } } .carousel-control-next { right: 0; @if $enable-gradients { - background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001)); + background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); } } diff --git a/scss/_print.scss b/scss/_print.scss index 5e2ce3a8aa..98163eb10a 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -14,7 +14,7 @@ *::before, *::after { // Bootstrap specific; comment out `color` and `background` - //color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953 + //color: $black !important; // Black prints faster: http://www.sanbeiji.com/archives/953 text-shadow: none !important; //background: transparent !important; box-shadow: none !important; @@ -51,7 +51,7 @@ } pre, blockquote { - border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px + border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px page-break-inside: avoid; } @@ -101,7 +101,7 @@ display: none; } .badge { - border: $border-width solid #000; + border: $border-width solid $black; } .table { @@ -109,13 +109,13 @@ td, th { - background-color: #fff !important; + background-color: $white !important; } } .table-bordered { th, td { - border: 1px solid #ddd !important; + border: 1px solid $gray-300 !important; } } diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 5ee563f935..dd23f16d1b 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -30,7 +30,7 @@ html { -webkit-text-size-adjust: 100%; // 4 -ms-text-size-adjust: 100%; // 4 -ms-overflow-style: scrollbar; // 5 - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6 + -webkit-tap-highlight-color: rgba($black, 0); // 6 } // IE10+ doesn't honor `` in some cases. diff --git a/scss/_variables.scss b/scss/_variables.scss index 0d216bb890..68095ce127 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -608,6 +608,7 @@ $nav-pills-border-radius: $border-radius !default; $nav-pills-link-active-color: $component-active-color !default; $nav-pills-link-active-bg: $component-active-bg !default; +$nav-divider-color: $gray-200 !default; $nav-divider-margin-y: ($spacer / 2) !default; // Navbar diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 2290682421..dec18ba58c 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -45,7 +45,7 @@ margin-top: .1rem; font-size: .875rem; line-height: 1; - color: #fff; + color: $white; background-color: rgba($color, .8); border-radius: .2rem; } diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss index ecd01f7291..88c4d64b7f 100644 --- a/scss/mixins/_gradients.scss +++ b/scss/mixins/_gradients.scss @@ -11,7 +11,7 @@ // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. -@mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { +@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; } @@ -19,27 +19,27 @@ // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. -@mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { +@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); background-repeat: repeat-x; } -@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) { +@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { background-image: linear-gradient($deg, $start-color, $end-color); background-repeat: repeat-x; } -@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { +@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; } -@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { +@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); background-repeat: no-repeat; } -@mixin gradient-radial($inner-color: #555, $outer-color: #333) { +@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { background-image: radial-gradient(circle, $inner-color, $outer-color); background-repeat: no-repeat; } -@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) { +@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); } diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss index 607ffcb86b..cd47a4e9fa 100644 --- a/scss/mixins/_list-group.scss +++ b/scss/mixins/_list-group.scss @@ -12,7 +12,7 @@ } &.active { - color: #fff; + color: $white; background-color: $color; border-color: $color; } diff --git a/scss/mixins/_nav-divider.scss b/scss/mixins/_nav-divider.scss index 3505d412f2..4fb37b6224 100644 --- a/scss/mixins/_nav-divider.scss +++ b/scss/mixins/_nav-divider.scss @@ -2,7 +2,7 @@ // // Dividers (basically an hr) within dropdowns and nav lists -@mixin nav-divider($color: #e5e5e5, $margin-y: $nav-divider-margin-y) { +@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) { height: 0; margin: $margin-y 0; overflow: hidden; diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index f4b6e65e55..5e169c4d97 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -37,7 +37,7 @@ // Contextual colors -.text-white { color: #fff !important; } +.text-white { color: $white !important; } @each $color, $value in $theme-colors { @include text-emphasis-variant(".text-#{$color}", $value);