From 27f553c9651dbe81a8aaf821aa2bf15670d9adb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
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 `<meta name="viewport">` 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);
--
GitLab