1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | [type="checkbox"],
|
7 | [type="radio"] {
|
8 | -webkit-appearance: none;
|
9 | -moz-appearance: none;
|
10 | appearance: none;
|
11 | width: 1.25em;
|
12 | height: 1.25em;
|
13 | margin-top: -0.125em;
|
14 | margin-right: 0.375em;
|
15 | margin-left: 0;
|
16 | margin-inline-start: 0;
|
17 | margin-inline-end: 0.375em;
|
18 | border-width: var(--border-width);
|
19 | font-size: inherit;
|
20 | vertical-align: middle;
|
21 | cursor: pointer;
|
22 |
|
23 | &::-ms-check {
|
24 | display: none;
|
25 | }
|
26 |
|
27 | &:checked,
|
28 | &:checked:active,
|
29 | &:checked:focus {
|
30 | --background-color: var(--primary);
|
31 | --border-color: var(--primary);
|
32 | background-image: var(--icon-checkbox);
|
33 | background-position: center;
|
34 | background-size: 0.75em auto;
|
35 | background-repeat: no-repeat;
|
36 | }
|
37 |
|
38 | & ~ label {
|
39 | display: inline-block;
|
40 | margin-right: 0.375em;
|
41 | margin-bottom: 0;
|
42 | cursor: pointer;
|
43 | }
|
44 | }
|
45 |
|
46 |
|
47 | [type="checkbox"] {
|
48 | &:indeterminate {
|
49 | --background-color: var(--primary);
|
50 | --border-color: var(--primary);
|
51 | background-image: var(--icon-minus);
|
52 | background-position: center;
|
53 | background-size: 0.75em auto;
|
54 | background-repeat: no-repeat;
|
55 | }
|
56 | }
|
57 |
|
58 |
|
59 | [type="radio"] {
|
60 | border-radius: 50%;
|
61 |
|
62 | &:checked,
|
63 | &:checked:active,
|
64 | &:checked:focus {
|
65 | --background-color: var(--primary-inverse);
|
66 | border-width: 0.35em;
|
67 | background-image: none;
|
68 | }
|
69 | }
|
70 |
|
71 |
|
72 | [type="checkbox"][role="switch"] {
|
73 | --background-color: var(--switch-background-color);
|
74 | --border-color: var(--switch-background-color);
|
75 | --color: var(--switch-color);
|
76 |
|
77 |
|
78 | $switch-height: 1.25em;
|
79 | $switch-width: 2.25em;
|
80 | $switch-transition: 0.1s ease-in-out;
|
81 |
|
82 |
|
83 | width: $switch-width;
|
84 | height: $switch-height;
|
85 | border: var(--border-width) solid var(--border-color);
|
86 | border-radius: $switch-height;
|
87 | background-color: var(--background-color);
|
88 | line-height: $switch-height;
|
89 |
|
90 | &:focus {
|
91 | --background-color: var(--switch-background-color);
|
92 | --border-color: var(--switch-background-color);
|
93 | }
|
94 |
|
95 | &:checked {
|
96 | --background-color: var(--switch-checked-background-color);
|
97 | --border-color: var(--switch-checked-background-color);
|
98 | }
|
99 |
|
100 | &:before {
|
101 | display: block;
|
102 | width: calc(#{$switch-height} - (var(--border-width) * 2));
|
103 | height: 100%;
|
104 | border-radius: 50%;
|
105 | background-color: var(--color);
|
106 | content: "";
|
107 |
|
108 | @if $enable-transitions {
|
109 | transition: margin $switch-transition;
|
110 | }
|
111 | }
|
112 |
|
113 | &:checked {
|
114 | background-image: none;
|
115 |
|
116 | &::before {
|
117 | margin-left: calc(#{$switch-width * 0.5} - var(--border-width));
|
118 | margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));
|
119 | }
|
120 | }
|
121 | }
|
122 |
|
123 |
|
124 | [type="checkbox"],
|
125 | [type="checkbox"]:checked,
|
126 | [type="radio"],
|
127 | [type="radio"]:checked,
|
128 | [type="checkbox"][role="switch"],
|
129 | [type="checkbox"][role="switch"]:checked {
|
130 |
|
131 | &[aria-invalid="false"] {
|
132 | --border-color: var(--form-element-valid-border-color);
|
133 | }
|
134 |
|
135 | &[aria-invalid="true"] {
|
136 | --border-color: var(--form-element-invalid-border-color);
|
137 | }
|
138 | } |
\ | No newline at end of file |