mirror of
https://github.com/picocss/pico.git
synced 2025-04-27 03:36:13 -04:00
1 line
4.3 KiB
Text
1 line
4.3 KiB
Text
![]() |
{"version":3,"sources":["_form-checkbox-radio.scss"],"names":[],"mappings":"AAAA;;;EAGE;;AAEF;;EAEE,wBAAwB;EACxB,qBAAqB;EACrB,gBAAgB;EAChB,aAAa;EACb,cAAc;EACd,oBAAoB;EACpB,qBAAqB;EACrB,cAAc;EACd,sBAAsB;EACtB,0BAA0B;EAC1B,iCAAiC;EACjC,kBAAkB;EAClB,sBAAsB;EACtB,eAAe;;EAEf;IACE,aAAa,EAAE,uBAAuB;EACxC;;EAEA;;;IAGE,kCAAkC;IAClC,8BAA8B;IAC9B,sCAAsC;IACtC,2BAA2B;IAC3B,4BAA4B;IAC5B,4BAA4B;EAC9B;;EAEA;IACE,qBAAqB;IACrB,qBAAqB;IACrB,gBAAgB;IAChB,eAAe;EACjB;AACF;;AAEA,YAAY;AACZ;EACE;IACE,kCAAkC;IAClC,8BAA8B;IAC9B,mCAAmC;IACnC,2BAA2B;IAC3B,4BAA4B;IAC5B,4BAA4B;EAC9B;AACF;;AAEA,QAAQ;AACR;EACE,kBAAkB;;EAElB;;;IAGE,0CAA0C;IAC1C,oBAAoB;IACpB,sBAAsB;EACxB;AACF;;AAEA,SAAS;AACT;EACE,kDAAkD;EAClD,8CAA8C;EAC9C,4BAA4B;;EAE5B,QAAQ;EACR,sBAAsB;EACtB,qBAAqB;EACrB,oCAAoC;;EAEpC,QAAQ;EACR,oBAAoB;EACpB,sBAAsB;EACtB,qDAAqD;EACrD,6BAA6B;EAC7B,yCAAyC;EACzC,2BAA2B;;EAE3B;IACE,kDAAkD;IAClD,8CAA8C;EAChD;;EAEA;IACE,0DAA0D;IAC1D,sDAAsD;EACxD;;EAEA;IACE,cAAc;IACd,0DAA0D;IAC1D,YAAY;IACZ,kBAAkB;IAClB,8BAA8B;IAC9B,WAAW;;IAEX;MACE,qCAAqC;IACvC;EACF;;EAEA;IACE,sBAAsB;;IAEtB;MACE,+DAA+D;MAC/D,uEAAuE;IACzE;EACF;AACF;;AAEA,cAAc;AACd;;;;;;;EAOE;IACE,sDAAsD;EACxD;;EAEA;IACE,wDAAwD;EAC1D;AACF","file":"_form-checkbox-radio.scss","sourcesContent":["/**\n * Form elements\n * Checkboxes & Radios\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 1.25em;\n height: 1.25em;\n margin-top: -0.125em;\n margin-right: 0.375em;\n margin-left: 0;\n margin-inline-start: 0;\n margin-inline-end: 0.375em;\n border-width: var(--border-width);\n font-size: inherit;\n vertical-align: middle;\n cursor: pointer;\n\n &::-ms-check {\n display: none; // unstyle IE checkboxes\n }\n\n &:checked,\n &:checked:active,\n &:checked:focus {\n --background-color: var(--primary);\n --border-color: var(--primary);\n background-image: var(--icon-checkbox);\n background-position: center;\n background-size: 0.75em auto;\n background-repeat: no-repeat;\n }\n\n & ~ label {\n display: inline-block;\n margin-right: 0.375em;\n margin-bottom: 0;\n cursor: pointer;\n }\n}\n\n// Checkboxes\n[type=\"checkbox\"] {\n &:indeterminate {\n --background-color: var(--primary);\n --border-color: var(--primary);\n background-image: var(--icon-minus);\n background-position: center;\n background-size: 0.75em auto;\n background-repeat: no-repeat;\n }\n}\n\n// Radios\n[type=\"radio\"] {\n border-radius: 50%;\n\n &:checked,\n &:checked:active,\n &:checked:focus {\n --background-color: var(--primary-inverse);\n border-width: 0.35em;\n background-image: none;\n }\n}\n\n// Switchs\n[type=\"checkbox\"][role=\"switch\"] {\n --background-color: var(--switch-background-color);\n --border-color: var(--switch-background-color);\n --color: var(--switch-color);\n\n // Config\n $switch-height: 1.25em;\n $switch-width: 2.25em;\n $switch-transition: 0.1s ease-in-out;\n\n // Styles\n width: $switch-width;\n height: $switch-height;\n border: var(--border-width) solid var(--border-color);\n border-radius: $switch-height;\n background-color: var(--background-color);\n line-height: $switch-height;\n\n &:focus {\n --background-color: var(--switch-background-color);\n --border-color: var(--switch-background-color);\n }\n\n &:checked {\n --background-color: var(--switch-checked-background-color);\n --border-color: var(--switch-checked-background-color);\n }\n\n &:before {\n display: block;\n width: calc(#{$switch-height} - (var(--border-width) * 2));\n height: 100%;\n border-radius: 50%;\n background-color: var(--color);\n content: \"\";\n\n @if $enable-transitions {\n transition: margin $switch-transition;\n }\n }\n\n &:checked {\n background-image: none;\n\n &::before {\n margin-left: calc(#{$switch-width * 0.5} - var(--border-width));\n margin-inline-start: calc(#{$switch-width * 0.5} - var(--border-width));\n }\n }\n}\n\n// Aria-invalid\n[type=\"checkbox\"],\n[type=\"checkbox\"]:checked,\n[type=\"radi
|