rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-04-09 01:53:53 +02:00
Code Issues Actions 10 Packages Releases Activity

color css vars for .btn-close

Browse Source
This commit is contained in:
Vino Rodrigues 2022-05-28 19:12:51 +10:00 committed by Mark Otto
parent 3b95c311ea
commit 18b99f7387
1 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
scss/_close.scss
View File

@ -4,37 +4,46 @@
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
.btn-close { .btn-close {
--#{$prefix}btn-close-color: #{$btn-close-color};
--#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
--#{$prefix}btn-close-opacity: #{$btn-close-opacity};
--#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
--#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
--#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
--#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
--#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
box-sizing: content-box; box-sizing: content-box;
width: $btn-close-width; width: $btn-close-width;
height: $btn-close-height; height: $btn-close-height;
padding: $btn-close-padding-y $btn-close-padding-x; padding: $btn-close-padding-y $btn-close-padding-x;
color: $btn-close-color; color: var(--#{$prefix}btn-close-color);
background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
border: 0; // for button elements border: 0; // for button elements
@include border-radius(); @include border-radius();
opacity: $btn-close-opacity; opacity: var(--#{$prefix}btn-close-opacity);
// Override <a>'s hover style // Override <a>'s hover style
&:hover { &:hover {
color: $btn-close-color; color: var(--#{$prefix}btn-close-color);
text-decoration: none; text-decoration: none;
opacity: $btn-close-hover-opacity; opacity: var(--#{$prefix}btn-close-hover-opacity);
} }
&:focus { &:focus {
outline: 0; outline: 0;
box-shadow: $btn-close-focus-shadow; box-shadow: var(--#{$prefix}btn-close-focus-shadow);
opacity: $btn-close-focus-opacity; opacity: var(--#{$prefix}btn-close-focus-opacity);
} }
&:disabled, &:disabled,
&.disabled { &.disabled {
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
opacity: $btn-close-disabled-opacity; opacity: var(--#{$prefix}btn-close-disabled-opacity);
} }
} }
.btn-close-white { .btn-close-white {
filter: $btn-close-white-filter; filter: var(--#{$prefix}btn-close-white-filter);
} }