roojs-all.js
[roojs1] / scss / bootstrap / _close.scss
1 .close {
2   float: right;
3   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     // Opinionated: add "hand" cursor to non-disabled .close elements
22     cursor: pointer;
23   }
24 }
25
26 // Additional properties for button version
27 // iOS requires the button element instead of an anchor tag.
28 // If you want the anchor version, it requires `href="#"`.
29 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
30
31 // stylelint-disable-next-line selector-no-qualifying-type
32 button.close {
33   padding: 0;
34   background-color: transparent;
35   border: 0;
36   appearance: none;
37 }
38
39 // Future-proof disabling of clicks on `<a>` elements
40
41 // stylelint-disable-next-line selector-no-qualifying-type
42 a.close.disabled {
43   pointer-events: none;
44 }