diff options
author | Vino Rodrigues <github@m.vinorodrigues.com> | 2022-05-28 12:12:51 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2022-10-03 20:48:22 +0300 |
commit | 18b99f738798691933c603a564d2e2eca7ed1eb7 (patch) | |
tree | a7bc2df464aaede9c5e25e615d2564e4f00a83b2 /scss | |
parent | 3b95c311ea5123073ccffbcc693a3d55903a4632 (diff) |
color css vars for .btn-close
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_close.scss | 27 |
1 files changed, 18 insertions, 9 deletions
diff --git a/scss/_close.scss b/scss/_close.scss index a0813de8d3..423a944db5 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -4,37 +4,46 @@ // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile .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; width: $btn-close-width; height: $btn-close-height; padding: $btn-close-padding-y $btn-close-padding-x; - color: $btn-close-color; - background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements + color: var(--#{$prefix}btn-close-color); + background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements border: 0; // for button elements @include border-radius(); - opacity: $btn-close-opacity; + opacity: var(--#{$prefix}btn-close-opacity); // Override <a>'s hover style &:hover { - color: $btn-close-color; + color: var(--#{$prefix}btn-close-color); text-decoration: none; - opacity: $btn-close-hover-opacity; + opacity: var(--#{$prefix}btn-close-hover-opacity); } &:focus { outline: 0; - box-shadow: $btn-close-focus-shadow; - opacity: $btn-close-focus-opacity; + box-shadow: var(--#{$prefix}btn-close-focus-shadow); + opacity: var(--#{$prefix}btn-close-focus-opacity); } &:disabled, &.disabled { pointer-events: none; user-select: none; - opacity: $btn-close-disabled-opacity; + opacity: var(--#{$prefix}btn-close-disabled-opacity); } } .btn-close-white { - filter: $btn-close-white-filter; + filter: var(--#{$prefix}btn-close-white-filter); } |