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