| 1 | // Transparent background and border properties included for button version.
|
|---|
| 2 | // iOS requires the button element instead of an anchor tag.
|
|---|
| 3 | // If you want the anchor version, it requires `href="#"`.
|
|---|
| 4 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
|---|
| 5 |
|
|---|
| 6 | .btn-close {
|
|---|
| 7 | // scss-docs-start close-css-vars
|
|---|
| 8 | --#{$prefix}btn-close-color: #{$btn-close-color};
|
|---|
| 9 | --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
|
|---|
| 10 | --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
|
|---|
| 11 | --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
|
|---|
| 12 | --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
|
|---|
| 13 | --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
|
|---|
| 14 | --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
|
|---|
| 15 | --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
|
|---|
| 16 | // scss-docs-end close-css-vars
|
|---|
| 17 |
|
|---|
| 18 | box-sizing: content-box;
|
|---|
| 19 | width: $btn-close-width;
|
|---|
| 20 | height: $btn-close-height;
|
|---|
| 21 | padding: $btn-close-padding-y $btn-close-padding-x;
|
|---|
| 22 | color: var(--#{$prefix}btn-close-color);
|
|---|
| 23 | background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
|
|---|
| 24 | border: 0; // for button elements
|
|---|
| 25 | @include border-radius();
|
|---|
| 26 | opacity: var(--#{$prefix}btn-close-opacity);
|
|---|
| 27 |
|
|---|
| 28 | // Override <a>'s hover style
|
|---|
| 29 | &:hover {
|
|---|
| 30 | color: var(--#{$prefix}btn-close-color);
|
|---|
| 31 | text-decoration: none;
|
|---|
| 32 | opacity: var(--#{$prefix}btn-close-hover-opacity);
|
|---|
| 33 | }
|
|---|
| 34 |
|
|---|
| 35 | &:focus {
|
|---|
| 36 | outline: 0;
|
|---|
| 37 | box-shadow: var(--#{$prefix}btn-close-focus-shadow);
|
|---|
| 38 | opacity: var(--#{$prefix}btn-close-focus-opacity);
|
|---|
| 39 | }
|
|---|
| 40 |
|
|---|
| 41 | &:disabled,
|
|---|
| 42 | &.disabled {
|
|---|
| 43 | pointer-events: none;
|
|---|
| 44 | user-select: none;
|
|---|
| 45 | opacity: var(--#{$prefix}btn-close-disabled-opacity);
|
|---|
| 46 | }
|
|---|
| 47 | }
|
|---|
| 48 |
|
|---|
| 49 | @mixin btn-close-white() {
|
|---|
| 50 | filter: var(--#{$prefix}btn-close-white-filter);
|
|---|
| 51 | }
|
|---|
| 52 |
|
|---|
| 53 | .btn-close-white {
|
|---|
| 54 | @include btn-close-white();
|
|---|
| 55 | }
|
|---|
| 56 |
|
|---|
| 57 | @if $enable-dark-mode {
|
|---|
| 58 | @include color-mode(dark) {
|
|---|
| 59 | .btn-close {
|
|---|
| 60 | @include btn-close-white();
|
|---|
| 61 | }
|
|---|
| 62 | }
|
|---|
| 63 | }
|
|---|
