sharpetronics/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-06-15 00:02:10 -04:00
Code Issues Projects Releases Wiki Activity

redo outlines

Browse Source 
- removes original outline removal (hah)
- replaces it with an explicit `outline: 0` on `.btn`
- instead of replicating `:hover` for `:focus`, uses custom and themed `box-shadow` for an "outline"
- not mapped to the `$enable-shadows` variable because accessibility
This commit is contained in:
Mark Otto 2016-12-26 22:12:18 -08:00 committed by Mark Otto
parent 79cfc095df
commit 62c4cb29fb
2 changed files with 5 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
scss/_buttons.scss
View File

@ -17,17 +17,14 @@
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius); @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
@include transition($btn-transition); @include transition($btn-transition);
&:focus,
&.focus {
@include tab-focus();
}
// Share hover and focus styles // Share hover and focus styles
@include hover-focus { @include hover-focus {
text-decoration: none; text-decoration: none;
} }
&:focus,
&.focus { &.focus {
text-decoration: none; outline: 0;
box-shadow: 0 0 0 2px rgba($brand-primary, .25);
} }
// Disabled comes first so active can properly restyle // Disabled comes first so active can properly restyle
@ -41,7 +38,6 @@
&:active, &:active,
&.active { &.active {
background-image: none; background-image: none;
outline: 0;
@include box-shadow($btn-active-box-shadow); @include box-shadow($btn-active-box-shadow);
} }
} }

5
scss/mixins/_buttons.scss
View File

@ -23,6 +23,7 @@
color: $color; color: $color;
background-color: $active-background; background-color: $active-background;
border-color: $active-border; border-color: $active-border;
box-shadow: 0 0 0 2px rgba($border, .5);
} }
// Disabled comes first so active can properly restyle // Disabled comes first so active can properly restyle
@ -57,9 +58,7 @@
&:focus, &:focus,
&.focus { &.focus {
color: $color-hover; box-shadow: 0 0 0 2px rgba($color, .5);
background-color: $color;
border-color: $color;
} }
&.disabled, &.disabled,