diff options
author | Matthew Lemon <y@yulqen.org> | 2024-09-16 17:12:15 +0100 |
---|---|---|
committer | Matthew Lemon <y@yulqen.org> | 2024-09-16 17:12:15 +0100 |
commit | 86bb29b4d378314bd906248e08198c1952d2f0a4 (patch) | |
tree | 005bb24dfa6a0e5d911d6cfdda9d469828a387a1 /pyblackbird_cc/static/scss/_close.scss | |
parent | 0d3ae1492e1a88db69437cd277b7cf11c4e6274a (diff) |
Upgrade to bootstrap 5.3
Diffstat (limited to '')
-rw-r--r-- | pyblackbird_cc/static/scss/_close.scss | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/pyblackbird_cc/static/scss/_close.scss b/pyblackbird_cc/static/scss/_close.scss new file mode 100644 index 0000000..4d6e73c --- /dev/null +++ b/pyblackbird_cc/static/scss/_close.scss @@ -0,0 +1,63 @@ +// Transparent background and border properties included for button version. +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + +.btn-close { + // scss-docs-start close-css-vars + --#{$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}; + // scss-docs-end close-css-vars + + box-sizing: content-box; + width: $btn-close-width; + height: $btn-close-height; + padding: $btn-close-padding-y $btn-close-padding-x; + 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: var(--#{$prefix}btn-close-opacity); + + // Override <a>'s hover style + &:hover { + color: var(--#{$prefix}btn-close-color); + text-decoration: none; + opacity: var(--#{$prefix}btn-close-hover-opacity); + } + + &:focus { + outline: 0; + box-shadow: var(--#{$prefix}btn-close-focus-shadow); + opacity: var(--#{$prefix}btn-close-focus-opacity); + } + + &:disabled, + &.disabled { + pointer-events: none; + user-select: none; + opacity: var(--#{$prefix}btn-close-disabled-opacity); + } +} + +@mixin btn-close-white() { + filter: var(--#{$prefix}btn-close-white-filter); +} + +.btn-close-white { + @include btn-close-white(); +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .btn-close { + @include btn-close-white(); + } + } +} |