1 | .close {
|
2 | float: right;
|
3 | @include font-size($close-font-size);
|
4 | font-weight: $close-font-weight;
|
5 | line-height: 1;
|
6 | color: $close-color;
|
7 | text-shadow: $close-text-shadow;
|
8 | opacity: .5;
|
9 |
|
10 | // Override <a>'s hover style
|
11 | @include hover() {
|
12 | color: $close-color;
|
13 | text-decoration: none;
|
14 | }
|
15 |
|
16 | &:not(:disabled):not(.disabled) {
|
17 | @include hover-focus() {
|
18 | opacity: .75;
|
19 | }
|
20 | }
|
21 | }
|
22 |
|
23 | // Additional properties for button version
|
24 | // iOS requires the button element instead of an anchor tag.
|
25 | // If you want the anchor version, it requires `href="#"`.
|
26 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
27 |
|
28 | // stylelint-disable-next-line selector-no-qualifying-type
|
29 | button.close {
|
30 | padding: 0;
|
31 | background-color: transparent;
|
32 | border: 0;
|
33 | }
|
34 |
|
35 | // Future-proof disabling of clicks on `<a>` elements
|
36 |
|
37 | // stylelint-disable-next-line selector-no-qualifying-type
|
38 | a.close.disabled {
|
39 | pointer-events: none;
|
40 | }
|