mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 17:36:15 -04:00
213 lines
16 KiB
SCSS
213 lines
16 KiB
SCSS
@use "sass:map";
|
|
@use "../settings" as *;
|
|
|
|
@if map.get($modules, "forms/checkbox-radio-switch") {
|
|
/**
|
|
* Checkboxes, Radios and Switches
|
|
*/
|
|
|
|
// Labels
|
|
// Not working in Firefox, which doesn't support the `:has()` pseudo-class
|
|
#{$parent-selector} label {
|
|
&:has([type="checkbox"], [type="radio"]) {
|
|
width: fit-content;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
#{$parent-selector} [type="checkbox"],
|
|
#{$parent-selector} [type="radio"] {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
margin-top: -0.125em;
|
|
margin-inline-end: 0.5em;
|
|
border-width: var(#{$css-var-prefix}border-width);
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
|
|
&::-ms-check {
|
|
display: none; // unstyle IE checkboxes
|
|
}
|
|
|
|
&:checked,
|
|
&:checked:active,
|
|
&:checked:focus {
|
|
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
|
|
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
|
|
background-image: var(#{$css-var-prefix}icon-checkbox);
|
|
background-position: center;
|
|
background-size: 0.75em auto;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
& ~ label {
|
|
display: inline-block;
|
|
margin-bottom: 0;
|
|
cursor: pointer;
|
|
|
|
&:not(:last-of-type) {
|
|
margin-inline-end: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Checkboxes
|
|
#{$parent-selector} [type="checkbox"] {
|
|
&:indeterminate {
|
|
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
|
|
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
|
|
background-image: var(#{$css-var-prefix}icon-minus);
|
|
background-position: center;
|
|
background-size: 0.75em auto;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
// Radios
|
|
#{$parent-selector} [type="radio"] {
|
|
border-radius: 50%;
|
|
|
|
&:checked,
|
|
&:checked:active,
|
|
&:checked:focus {
|
|
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-inverse);
|
|
border-width: 0.35em;
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
// Switches
|
|
#{$parent-selector} [type="checkbox"][role="switch"] {
|
|
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
|
|
#{$css-var-prefix}color: var(#{$css-var-prefix}switch-color);
|
|
|
|
// Config
|
|
$switch-height: 1.25em;
|
|
$switch-width: 2.25em;
|
|
$switch-transition: 0.1s ease-in-out;
|
|
|
|
// Styles
|
|
width: $switch-width;
|
|
height: $switch-height;
|
|
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
|
|
border-radius: $switch-height;
|
|
background-color: var(#{$css-var-prefix}background-color);
|
|
line-height: $switch-height;
|
|
|
|
&:not([aria-invalid]) {
|
|
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
|
|
}
|
|
|
|
&:before {
|
|
display: block;
|
|
aspect-ratio: 1;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background-color: var(#{$css-var-prefix}color);
|
|
box-shadow: var(#{$css-var-prefix}switch-thumb-box-shadow);
|
|
content: "";
|
|
|
|
@if $enable-transitions {
|
|
transition: margin $switch-transition;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-background-color);
|
|
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-background-color);
|
|
}
|
|
|
|
&:checked {
|
|
#{$css-var-prefix}background-color: var(#{$css-var-prefix}switch-checked-background-color);
|
|
#{$css-var-prefix}border-color: var(#{$css-var-prefix}switch-checked-background-color);
|
|
background-image: none;
|
|
|
|
&::before {
|
|
margin-inline-start: calc(#{$switch-width} - #{$switch-height});
|
|
}
|
|
}
|
|
|
|
&[disabled] {
|
|
#{$css-var-prefix}background-color: var(#{$css-var-prefix}border-color);
|
|
}
|
|
|
|
&[name="color-mode-toggle"] {
|
|
&:before {
|
|
mask-position: center;
|
|
mask-repeat: no-repeat;
|
|
// Use masking to include the SVG as the content for the dot
|
|
mask-size: contain;
|
|
-webkit-mask-size: contain; /* For WebKit browsers */
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
|
|
@if $enable-transitions {
|
|
transition:
|
|
margin $switch-transition,
|
|
background-color $switch-transition;
|
|
}
|
|
}
|
|
|
|
&:checked::before {
|
|
// <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/><path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z"/></svg>
|
|
//mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9Ik02IC4yNzhhLjc3Ljc3IDAgMCAxIC4wOC44NTggNy4yIDcuMiAwIDAgMC0uODc4IDMuNDZjMCA0LjAyMSAzLjI3OCA3LjI3NyA3LjMxOCA3LjI3N3EuNzkyLS4wMDEgMS41MzMtLjE2YS43OS43OSAwIDAgMSAuODEuMzE2LjczLjczIDAgMCAxLS4wMzEuODkzQTguMzUgOC4zNSAwIDAgMSA4LjM0NCAxNkMzLjczNCAxNiAwIDEyLjI4NiAwIDcuNzEgMCA0LjI2NiAyLjExNCAxLjMxMiA1LjEyNC4wNkEuNzUuNzUgMCAwIDEgNiAuMjc4Ii8+PHBhdGggZD0iTTEwLjc5NCAzLjE0OGEuMjE3LjIxNyAwIDAgMSAuNDEyIDBsLjM4NyAxLjE2MmMuMTczLjUxOC41NzkuOTI0IDEuMDk3IDEuMDk3bDEuMTYyLjM4N2EuMjE3LjIxNyAwIDAgMSAwIC40MTJsLTEuMTYyLjM4N2ExLjczIDEuNzMgMCAwIDAtMS4wOTcgMS4wOTdsLS4zODcgMS4xNjJhLjIxNy4yMTcgMCAwIDEtLjQxMiAwbC0uMzg3LTEuMTYyQTEuNzMgMS43MyAwIDAgMCA5LjMxIDYuNTkzbC0xLjE2Mi0uMzg3YS4yMTcuMjE3IDAgMCAxIDAtLjQxMmwxLjE2Mi0uMzg3YTEuNzMgMS43MyAwIDAgMCAxLjA5Ny0xLjA5N3pNMTMuODYzLjA5OWEuMTQ1LjE0NSAwIDAgMSAuMjc0IDBsLjI1OC43NzRjLjExNS4zNDYuMzg2LjYxNy43MzIuNzMybC43NzQuMjU4YS4xNDUuMTQ1IDAgMCAxIDAgLjI3NGwtLjc3NC4yNThhMS4xNiAxLjE2IDAgMCAwLS43MzIuNzMybC0uMjU4Ljc3NGEuMTQ1LjE0NSAwIDAgMS0uMjc0IDBsLS4yNTgtLjc3NGExLjE2IDEuMTYgMCAwIDAtLjczMi0uNzMybC0uNzc0LS4yNThhLjE0NS4xNDUgMCAwIDEgMC0uMjc0bC43NzQtLjI1OGMuMzQ2LS4xMTUuNjE3LS4zODYuNzMyLS43MzJ6Ii8+PC9zdmc+");
|
|
//-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9Ik02IC4yNzhhLjc3Ljc3IDAgMCAxIC4wOC44NTggNy4yIDcuMiAwIDAgMC0uODc4IDMuNDZjMCA0LjAyMSAzLjI3OCA3LjI3NyA3LjMxOCA3LjI3N3EuNzkyLS4wMDEgMS41MzMtLjE2YS43OS43OSAwIDAgMSAuODEuMzE2LjczLjczIDAgMCAxLS4wMzEuODkzQTguMzUgOC4zNSAwIDAgMSA4LjM0NCAxNkMzLjczNCAxNiAwIDEyLjI4NiAwIDcuNzEgMCA0LjI2NiAyLjExNCAxLjMxMiA1LjEyNC4wNkEuNzUuNzUgMCAwIDEgNiAuMjc4Ii8+PHBhdGggZD0iTTEwLjc5NCAzLjE0OGEuMjE3LjIxNyAwIDAgMSAuNDEyIDBsLjM4NyAxLjE2MmMuMTczLjUxOC41NzkuOTI0IDEuMDk3IDEuMDk3bDEuMTYyLjM4N2EuMjE3LjIxNyAwIDAgMSAwIC40MTJsLTEuMTYyLjM4N2ExLjczIDEuNzMgMCAwIDAtMS4wOTcgMS4wOTdsLS4zODcgMS4xNjJhLjIxNy4yMTcgMCAwIDEtLjQxMiAwbC0uMzg3LTEuMTYyQTEuNzMgMS43MyAwIDAgMCA5LjMxIDYuNTkzbC0xLjE2Mi0uMzg3YS4yMTcuMjE3IDAgMCAxIDAtLjQxMmwxLjE2Mi0uMzg3YTEuNzMgMS43MyAwIDAgMCAxLjA5Ny0xLjA5N3pNMTMuODYzLjA5OWEuMTQ1LjE0NSAwIDAgMSAuMjc0IDBsLjI1OC43NzRjLjExNS4zNDYuMzg2LjYxNy43MzIuNzMybC43NzQuMjU4YS4xNDUuMTQ1IDAgMCAxIDAgLjI3NGwtLjc3NC4yNThhMS4xNiAxLjE2IDAgMCAwLS43MzIuNzMybC0uMjU4Ljc3NGEuMTQ1LjE0NSAwIDAgMS0uMjc0IDBsLS4yNTgtLjc3NGExLjE2IDEuMTYgMCAwIDAtLjczMi0uNzMybC0uNzc0LS4yNThhLjE0NS4xNDUgMCAwIDEgMC0uMjc0bC43NzQtLjI1OGMuMzQ2LS4xMTUuNjE3LS4zODYuNzMyLS43MzJ6Ii8+PC9zdmc+");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278'/%3E%3Cpath d='M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z'/%3E%3C/svg%3E");
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278'/%3E%3Cpath d='M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z'/%3E%3C/svg%3E");
|
|
background-color: var(#{$css-var-prefix}primary-inverse);
|
|
}
|
|
|
|
&:not(:checked)::before {
|
|
// <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/></svg>
|
|
//mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9Ik0xMiA4YTQgNCAwIDEgMS04IDAgNCA0IDAgMCAxIDggME04IDBhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDB2LTJBLjUuNSAwIDAgMSA4IDBtMCAxM2EuNS41IDAgMCAxIC41LjV2MmEuNS41IDAgMCAxLTEgMHYtMkEuNS41IDAgMCAxIDggMTNtOC01YS41LjUgMCAwIDEtLjUuNWgtMmEuNS41IDAgMCAxIDAtMWgyYS41LjUgMCAwIDEgLjUuNU0zIDhhLjUuNSAwIDAgMS0uNS41aC0yYS41LjUgMCAwIDEgMC0xaDJBLjUuNSAwIDAgMSAzIDhtMTAuNjU3LTUuNjU3YS41LjUgMCAwIDEgMCAuNzA3bC0xLjQxNCAxLjQxNWEuNS41IDAgMSAxLS43MDctLjcwOGwxLjQxNC0xLjQxNGEuNS41IDAgMCAxIC43MDcgMG0tOS4xOTMgOS4xOTNhLjUuNSAwIDAgMSAwIC43MDdMMy4wNSAxMy42NTdhLjUuNSAwIDAgMS0uNzA3LS43MDdsMS40MTQtMS40MTRhLjUuNSAwIDAgMSAuNzA3IDBtOS4xOTMgMi4xMjFhLjUuNSAwIDAgMS0uNzA3IDBsLTEuNDE0LTEuNDE0YS41LjUgMCAwIDEgLjcwNy0uNzA3bDEuNDE0IDEuNDE0YS41LjUgMCAwIDEgMCAuNzA3TTQuNDY0IDQuNDY1YS41LjUgMCAwIDEtLjcwNyAwTDIuMzQzIDMuMDVhLjUuNSAwIDEgMSAuNzA3LS43MDdsMS40MTQgMS40MTRhLjUuNSAwIDAgMSAwIC43MDgiLz48L3N2Zz4=");
|
|
//-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9Ik0xMiA4YTQgNCAwIDEgMS04IDAgNCA0IDAgMCAxIDggME04IDBhLjUuNSAwIDAgMSAuNS41djJhLjUuNSAwIDAgMS0xIDB2LTJBLjUuNSAwIDAgMSA4IDBtMCAxM2EuNS41IDAgMCAxIC41LjV2MmEuNS41IDAgMCAxLTEgMHYtMkEuNS41IDAgMCAxIDggMTNtOC01YS41LjUgMCAwIDEtLjUuNWgtMmEuNS41IDAgMCAxIDAtMWgyYS41LjUgMCAwIDEgLjUuNU0zIDhhLjUuNSAwIDAgMS0uNS41aC0yYS41LjUgMCAwIDEgMC0xaDJBLjUuNSAwIDAgMSAzIDhtMTAuNjU3LTUuNjU3YS41LjUgMCAwIDEgMCAuNzA3bC0xLjQxNCAxLjQxNWEuNS41IDAgMSAxLS43MDctLjcwOGwxLjQxNC0xLjQxNGEuNS41IDAgMCAxIC43MDcgMG0tOS4xOTMgOS4xOTNhLjUuNSAwIDAgMSAwIC43MDdMMy4wNSAxMy42NTdhLjUuNSAwIDAgMS0uNzA3LS43MDdsMS40MTQtMS40MTRhLjUuNSAwIDAgMSAuNzA3IDBtOS4xOTMgMi4xMjFhLjUuNSAwIDAgMS0uNzA3IDBsLTEuNDE0LTEuNDE0YS41LjUgMCAwIDEgLjcwNy0uNzA3bDEuNDE0IDEuNDE0YS41LjUgMCAwIDEgMCAuNzA3TTQuNDY0IDQuNDY1YS41LjUgMCAwIDEtLjcwNyAwTDIuMzQzIDMuMDVhLjUuNSAwIDEgMSAuNzA3LS43MDdsMS40MTQgMS40MTRhLjUuNSAwIDAgMSAwIC43MDgiLz48L3N2Zz4=");
|
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708'/%3E%3C/svg%3E");
|
|
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708'/%3E%3C/svg%3E");
|
|
background-color: var(#{$css-var-prefix}primary-inverse);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Aria-invalid
|
|
#{$parent-selector} :not([novalidate]) [type="checkbox"],
|
|
#{$parent-selector} :not([novalidate]) [type="checkbox"][role="switch"] {
|
|
&[aria-invalid="false"] {
|
|
&:checked,
|
|
&:checked:active,
|
|
&:checked:focus {
|
|
#{$css-var-prefix}background-color: var(#{$css-var-prefix}form-element-valid-border-color);
|
|
}
|
|
}
|
|
&:checked,
|
|
&:checked:active,
|
|
&:checked:focus {
|
|
&[aria-invalid="true"] {
|
|
#{$css-var-prefix}background-color: var(
|
|
#{$css-var-prefix}form-element-invalid-border-color
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
#{$parent-selector} :not([novalidate]) [type="checkbox"],
|
|
#{$parent-selector} :not([novalidate]) [type="radio"],
|
|
#{$parent-selector} :not([novalidate]) [type="checkbox"][role="switch"] {
|
|
&[aria-invalid="false"] {
|
|
&:checked,
|
|
&:checked:active,
|
|
&:checked:focus {
|
|
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-valid-border-color);
|
|
}
|
|
}
|
|
&:checked,
|
|
&:checked:active,
|
|
&:checked:focus {
|
|
&[aria-invalid="true"] {
|
|
#{$css-var-prefix}border-color: var(#{$css-var-prefix}form-element-invalid-border-color);
|
|
}
|
|
}
|
|
}
|
|
}
|