|
148 | 148 | // End mod |
149 | 149 | } |
150 | 150 |
|
151 | | -// Abandoned due to issues with colors and filters |
152 | | -// .form-check-input-2 { |
153 | | -// --#{$prefix}check-color: #{$ouds-color-action-enabled}; |
154 | | -// --#{$prefix}check-checked-color: #{$ouds-color-action-selected}; |
155 | | -// --#{$prefix}check-hover-color: #{$ouds-color-action-hover}; |
156 | | -// --#{$prefix}check-focus-color: #{$ouds-color-action-focus}; |
157 | | -// --#{$prefix}check-active-color: #{$ouds-color-action-pressed}; |
158 | | -// --#{$prefix}check-disabled-color: #{$ouds-color-action-disabled}; |
159 | | - |
160 | | -// flex-shrink: 0; |
161 | | -// width: $form-check-input-width; |
162 | | -// height: $form-check-input-width; |
163 | | -// margin: 14px; |
164 | | -// color: var(--#{$prefix}check-color); |
165 | | -// appearance: none; |
166 | | -// background-image: var(--#{$prefix}form-check-bg-image); |
167 | | -// background-repeat: no-repeat; |
168 | | -// background-position: center; |
169 | | -// background-size: 16px; |
170 | | -// border: $ouds-checkbox-border-width-unselected solid currentColor; |
171 | | - |
172 | | -// &:checked, |
173 | | -// &:indeterminate { |
174 | | -// color: var(--#{$prefix}check-checked-color); |
175 | | -// filter: invert(37%) sepia(76%) saturate(2171%) hue-rotate(5deg) brightness(98%) contrast(101%); |
176 | | -// border-width: $ouds-checkbox-border-width-selected; |
177 | | -// opacity: none; |
178 | | - |
179 | | -// &[type="checkbox"] { |
180 | | -// --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}; |
181 | | -// } |
182 | | -// } |
183 | | - |
184 | | -// &:indeterminate { |
185 | | -// background: none; |
186 | | -// } |
187 | | - |
188 | | -// &:hover, |
189 | | -// &:has(+ .form-check-label:hover) { |
190 | | -// filter: none; |
191 | | -// border-color: #000; |
192 | | -// border-width: $ouds-checkbox-border-width-hover; |
193 | | -// opacity: .68; |
194 | | -// } |
195 | | - |
196 | | -// &:focus-visible { |
197 | | -// filter: none; |
198 | | -// border-color: #000; |
199 | | -// border-width: $ouds-checkbox-border-width-focus; |
200 | | -// opacity: .68; // Var CSS |
201 | | -// } |
202 | | - |
203 | | -// &:active, |
204 | | -// &:has(+ .form-check-label:active) { |
205 | | -// filter: invert(37%) sepia(76%) saturatqe(2171%) hue-rotate(5deg) brightness(98%) contrast(101%); |
206 | | -// border-width: $ouds-checkbox-border-width-pressed; |
207 | | -// opacity: 1; |
208 | | -// } |
209 | | - |
210 | | -// &:disabled { |
211 | | -// filter: none; |
212 | | -// border-color: #000; |
213 | | -// opacity: .2; |
214 | | -// } |
215 | | - |
216 | | -// + .form-check-label::before { |
217 | | -// position: absolute; |
218 | | -// top: 0; |
219 | | -// left: 0; |
220 | | -// z-index: -1; |
221 | | -// width: 48px; |
222 | | -// height: 48px; |
223 | | -// content: ""; |
224 | | -// background-color: transparent; |
225 | | -// } |
226 | | - |
227 | | -// &:hover + .form-check-label, |
228 | | -// &:focus-visible + .form-check-label, |
229 | | -// &:active + .form-check-label, |
230 | | -// .form-check-label:hover, |
231 | | -// .form-check-label:focus-visible, |
232 | | -// .form-check-label:active { |
233 | | -// &::before { |
234 | | -// background-color: #eee; |
235 | | -// } |
236 | | -// } |
237 | | -// } |
238 | | - |
239 | 151 | .form-check-label { |
240 | 152 | // OUDS mod: no `color` |
241 | 153 | cursor: $form-check-label-cursor; |
|
0 commit comments