kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

update new focus and shadow properties to use vars

This commit is contained in:
Mark Otto 2017-10-25 12:30:29 -07:00
parent 04b32db845
commit af9df8c308
4 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_buttons.scss
View File

@ -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);
}
}

4
scss/_variables.scss
View File

@ -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;

12
scss/mixins/_buttons.scss
View File

@ -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);
}
}

10
scss/mixins/_forms.scss
View File

@ -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);
}
}
}