From af9df8c308f920b51bd89313f4ba0eb880bb53e5 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 25 Oct 2017 12:30:29 -0700
Subject: [PATCH] update new focus and shadow properties to use vars
---
scss/_buttons.scss | 4 ++--
scss/_variables.scss | 4 ++++
scss/mixins/_buttons.scss | 12 ++++++------
scss/mixins/_forms.scss | 10 +++++-----
4 files changed, 17 insertions(+), 13 deletions(-)
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 36728696d0..16d879cd85 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -22,7 +22,7 @@
&:focus,
&.focus {
outline: 0;
- box-shadow: $input-btn-focus-box-shadow;
+ box-shadow: $btn-focus-box-shadow;
}
// Disabled comes first so active can properly restyle
@@ -35,7 +35,7 @@
&:not([disabled]):not(.disabled):active,
&:not([disabled]):not(.disabled).active {
background-image: none;
- @include box-shadow($input-btn-focus-box-shadow, $btn-active-box-shadow);
+ @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
}
}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9697fd8619..6b79cc687e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -353,6 +353,8 @@ $btn-border-width: $input-btn-border-width !default;
$btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
$btn-link-disabled-color: $gray-600 !default;
@@ -396,6 +398,8 @@ $input-border-radius-sm: $border-radius-sm !default;
$input-focus-bg: $input-bg !default;
$input-focus-border-color: lighten(theme-color("primary"), 25%) !default;
$input-focus-color: $input-color !default;
+$input-focus-width: $input-btn-focus-width !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: $gray-600 !default;
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 9e06261396..a99d71de1e 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -19,9 +19,9 @@
&.focus {
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
- box-shadow: $btn-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
+ box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
} @else {
- box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
+ box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
}
}
@@ -44,9 +44,9 @@
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
- box-shadow: $btn-active-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
+ box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
} @else {
- box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
+ box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
}
}
}
@@ -65,7 +65,7 @@
&:focus,
&.focus {
- box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
&.disabled,
@@ -81,7 +81,7 @@
background-color: $color;
border-color: $color;
// Avoid using mixin so we can pass custom focus shadow properly
- box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
}
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 564222ad00..5d822a440d 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -18,9 +18,9 @@
outline: none;
// Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows {
- box-shadow: $input-box-shadow, $input-btn-focus-box-shadow;
+ box-shadow: $input-box-shadow, $input-focus-box-shadow;
} @else {
- box-shadow: $input-btn-focus-box-shadow;
+ box-shadow: $input-focus-box-shadow;
}
}
}
@@ -57,7 +57,7 @@
border-color: $color;
&:focus {
- box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .25);
+ box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
~ .#{$state}-feedback,
@@ -90,7 +90,7 @@
}
&:focus {
~ .custom-control-indicator {
- box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
+ box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
}
}
}
@@ -107,7 +107,7 @@
}
&:focus {
~ .custom-file-control {
- box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .25);
+ box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
}
}
--
GitLab