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 29button.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 38a.close.disabled { 39 pointer-events: none; 40} 41