oppi.li
1/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
2 unused rules here after refactoring, please remove them. */
3
4input[type="checkbox"],
5input[type="radio"] {
6 width: var(--checkbox-size);
7 height: var(--checkbox-size);
8}
9
10.ui.checkbox {
11 position: relative;
12 display: inline-block;
13 vertical-align: baseline;
14 min-height: var(--checkbox-size);
15 line-height: var(--checkbox-size);
16 min-width: var(--checkbox-size);
17 padding: 1px;
18}
19
20.ui.checkbox input[type="checkbox"],
21.ui.checkbox input[type="radio"] {
22 position: absolute;
23 top: 1px;
24 left: 0;
25 width: var(--checkbox-size);
26 height: var(--checkbox-size);
27}
28
29.ui.checkbox input[type="checkbox"]:enabled,
30.ui.checkbox input[type="radio"]:enabled,
31.ui.checkbox label:enabled {
32 cursor: pointer;
33}
34
35.ui.checkbox label {
36 cursor: auto;
37 position: relative;
38 display: block;
39 user-select: none;
40}
41
42.ui.checkbox label,
43.ui.radio.checkbox label {
44 margin-left: 1.85714em;
45}
46
47.ui.checkbox + label {
48 vertical-align: middle;
49}
50
51.ui.disabled.checkbox label,
52.ui.checkbox input[disabled] ~ label {
53 cursor: default !important;
54 opacity: 0.5;
55 pointer-events: none;
56}
57
58.ui.radio.checkbox {
59 min-height: var(--checkbox-size);
60}
61
62/* "switch" styled checkbox */
63
64.ui.toggle.checkbox {
65 min-height: 1.5rem;
66}
67.ui.toggle.checkbox input {
68 width: 3.5rem;
69 height: 21px;
70 opacity: 0;
71 z-index: 3;
72}
73.ui.toggle.checkbox label {
74 min-height: 1.5rem;
75 padding-left: 4.5rem;
76 padding-top: 0.15em;
77}
78.ui.toggle.checkbox label::before {
79 display: block;
80 position: absolute;
81 content: "";
82 z-index: 1;
83 top: 0;
84 width: 49px;
85 height: 21px;
86 border-radius: 500rem;
87 left: 0;
88}
89.ui.toggle.checkbox label::after {
90 background: var(--color-white);
91 box-shadow: 1px 1px 4px 1px var(--color-shadow);
92 position: absolute;
93 content: "";
94 opacity: 1;
95 z-index: 2;
96 width: 18px;
97 height: 18px;
98 top: 1.5px;
99 left: 1.5px;
100 border-radius: 500rem;
101 transition: background 0.3s ease, left 0.3s ease;
102}
103.ui.toggle.checkbox input ~ label::after {
104 left: 1.5px;
105}
106.ui.toggle.checkbox input:checked ~ label::after {
107 left: 29px;
108}
109.ui.toggle.checkbox input:focus ~ label::before,
110.ui.toggle.checkbox label::before {
111 background: var(--color-input-toggle-background);
112}
113.ui.toggle.checkbox label,
114.ui.toggle.checkbox input:checked ~ label,
115.ui.toggle.checkbox input:focus:checked ~ label {
116 color: var(--color-text) !important;
117}
118.ui.toggle.checkbox input:checked ~ label::before,
119.ui.toggle.checkbox input:focus:checked ~ label::before {
120 background: var(--color-primary) !important;
121}