UNPKG

2.15 kBCSSView Raw
1@import "../global/variables.css";
2
3@value unit from "../global/global.css";
4@value checkboxSize: 14px;
5
6.checkbox {
7 position: relative;
8
9 display: inline-block;
10
11 text-align: left;
12
13 color: var(--ring-text-color);
14 outline: none;
15
16 &:hover .cell {
17 transition: background-color var(--ring-ease);
18
19 border-color: var(--ring-border-hover-color);
20 }
21}
22
23.cell {
24 position: relative;
25 top: -2px;
26
27 display: inline-block;
28
29 box-sizing: border-box;
30 width: checkboxSize;
31 height: checkboxSize;
32
33 user-select: none;
34 transition: border-color var(--ring-ease), background-color var(--ring-ease), box-shadow var(--ring-ease);
35 vertical-align: middle;
36 pointer-events: none;
37
38 border: 1px solid var(--ring-borders-color);
39 border-radius: 3px;
40 background-color: var(--ring-content-background-color);
41}
42
43.icon.icon {
44 position: absolute;
45 top: calc(unit * -1.5);
46 left: 1px;
47
48 width: calc(unit * 2);
49 height: calc(unit * 2);
50
51 transition: opacity var(--ring-fast-ease), transform var(--ring-fast-ease);
52
53 opacity: 0;
54
55 & svg {
56 position: absolute;
57 top: 0;
58 left: 0;
59 }
60}
61
62.input {
63 position: absolute;
64 top: 0;
65 left: 0;
66
67 width: 100%;
68 height: 100%;
69 margin: 0;
70
71 cursor: pointer;
72
73 opacity: 0;
74
75 &:checked + .cell {
76 border-color: var(--ring-border-hover-color);
77 background-color: var(--ring-selected-background-color);
78
79 /* stylelint-disable-next-line selector-max-specificity */
80 & .icon {
81 transform: translateY(unit);
82
83 opacity: 1;
84 }
85 }
86
87 &:focus + .cell,
88 &.focus + .cell {
89 transition: background-color var(--ring-ease);
90
91 border-color: var(--ring-border-hover-color);
92 box-shadow: 0 0 0 1px var(--ring-border-hover-color);
93 }
94
95 &[disabled] {
96 pointer-events: none;
97 }
98
99 &[disabled] + .cell {
100 border-color: var(--ring-line-color);
101 background-color: var(--ring-content-background-color);
102 }
103
104 /* stylelint-disable-next-line selector-max-specificity */
105 &[disabled]:checked + .cell .icon {
106 opacity: 0.5;
107 }
108
109 &[disabled] ~ .label {
110 color: var(--ring-disabled-color);
111 }
112}
113
114.label {
115 margin-left: unit;
116
117 line-height: normal;
118}