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
132
133
134
|
@use '../base' as *;
/* --------------------------------
File#: _1_radios-checkboxes
Title: Radios and Checkboxes
Descr: Custom radio and checkbox buttons
Usage: codyhouse.co/license
-------------------------------- */
:root {
// radios and checkboxes
--checkbox-radio-size: 18px;
--checkbox-radio-gap: var(--space-xxs); // gap between button and label
--checkbox-radio-border-width: 1px;
--checkbox-radio-line-height: var(--body-line-height);
// radio buttons
--radio-marker-size: 8px;
// checkboxes
--checkbox-marker-size: 12px;
--checkbox-radius: 4px;
}
// hide native buttons
.radio,
.checkbox {
position: absolute;
padding: 0;
margin: 0;
margin-top: calc((1em * var(--checkbox-radio-line-height) - var(--checkbox-radio-size)) / 2);
opacity: 0;
height: var(--checkbox-radio-size);
width: var(--checkbox-radio-size);
pointer-events: none;
}
// label
.radio + label,
.checkbox + label {
display: inline-block;
line-height: var(--checkbox-radio-line-height);
user-select: none;
cursor: pointer;
padding-left: calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap));
}
// custom inputs - basic style
.radio + label::before,
.checkbox + label::before {
content: '';
box-sizing: border-box;
display: inline-block;
position: relative;
vertical-align: middle;
top: -0.1em;
margin-left: calc(-1 * (var(--checkbox-radio-size) + var(--checkbox-radio-gap)));
flex-shrink: 0;
width: var(--checkbox-radio-size);
height: var(--checkbox-radio-size);
background-color: var(--color-bg);
border-width: var(--checkbox-radio-border-width);
border-color: alpha(var(--color-contrast-low), 0.65);
border-style: solid;
box-shadow: var(--shadow-xs);
background-repeat: no-repeat;
background-position: center;
margin-right: var(--checkbox-radio-gap);
}
// :hover
.radio:not(:checked):not(:focus) + label:hover::before,
.checkbox:not(:checked):not(:focus) + label:hover::before {
border-color: alpha(var(--color-contrast-low), 1);
}
// radio only style
.radio + label::before {
border-radius: 50%;
}
// checkbox only style
.checkbox + label::before {
border-radius: var(--checkbox-radius);
}
// :checked
.radio:checked + label::before,
.checkbox:checked + label::before {
background-color: var(--color-primary);
box-shadow: var(--shadow-xs);
border-color: var(--color-primary);
}
// radio button icon
.radio:checked + label::before {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
background-size: var(--radio-marker-size);
}
// checkbox button icon
.checkbox:checked + label::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
background-size: var(--checkbox-marker-size);
}
// :focus
.radio:checked:active + label::before,
.checkbox:checked:active + label::before,
.radio:focus + label::before,
.checkbox:focus + label::before {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px alpha(var(--color-primary), 0.2);
}
// --radio--bg, --checkbox--bg -> variation with background color
.radio--bg + label, .checkbox--bg + label {
padding: var(--space-xxxxs) var(--space-xxxs);
padding-left: calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap) + var(--space-xxxs));
border-radius: var(--radius-md);
}
.radio--bg + label:hover, .checkbox--bg + label:hover {
background-color: alpha(var(--color-contrast-higher), 0.075);
}
.radio--bg:active + label,
.checkbox--bg:active + label,
.radio--bg:focus + label,
.checkbox--bg:focus + label {
background-color: alpha(var(--color-primary), 0.1);
}
|
