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 |
|
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 |
|
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 | }
|