| 1441 |
ariadna |
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
|
| 1 |
efrain |
5 |
|
| 1441 |
ariadna |
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 |
|
| 1 |
efrain |
28 |
// Override <a>'s hover style
|
| 1441 |
ariadna |
29 |
&:hover {
|
|
|
30 |
color: var(--#{$prefix}btn-close-color);
|
| 1 |
efrain |
31 |
text-decoration: none;
|
| 1441 |
ariadna |
32 |
opacity: var(--#{$prefix}btn-close-hover-opacity);
|
| 1 |
efrain |
33 |
}
|
|
|
34 |
|
| 1441 |
ariadna |
35 |
&:focus {
|
|
|
36 |
outline: 0;
|
|
|
37 |
box-shadow: var(--#{$prefix}btn-close-focus-shadow);
|
|
|
38 |
opacity: var(--#{$prefix}btn-close-focus-opacity);
|
| 1 |
efrain |
39 |
}
|
| 1441 |
ariadna |
40 |
|
|
|
41 |
&:disabled,
|
|
|
42 |
&.disabled {
|
|
|
43 |
pointer-events: none;
|
|
|
44 |
user-select: none;
|
|
|
45 |
opacity: var(--#{$prefix}btn-close-disabled-opacity);
|
|
|
46 |
}
|
| 1 |
efrain |
47 |
}
|
|
|
48 |
|
| 1441 |
ariadna |
49 |
@mixin btn-close-white() {
|
|
|
50 |
filter: var(--#{$prefix}btn-close-white-filter);
|
|
|
51 |
}
|
| 1 |
efrain |
52 |
|
| 1441 |
ariadna |
53 |
.btn-close-white {
|
|
|
54 |
@include btn-close-white();
|
| 1 |
efrain |
55 |
}
|
|
|
56 |
|
| 1441 |
ariadna |
57 |
@if $enable-dark-mode {
|
|
|
58 |
@include color-mode(dark) {
|
|
|
59 |
.btn-close {
|
|
|
60 |
@include btn-close-white();
|
|
|
61 |
}
|
|
|
62 |
}
|
| 1 |
efrain |
63 |
}
|