-
-
Notifications
You must be signed in to change notification settings - Fork 62
/
Copy pathcheckboxes.9213cc98.css.map
1 lines (1 loc) · 33.9 KB
/
checkboxes.9213cc98.css.map
1
{"version":3,"sources":["dist/css/checkboxes.css","src/scss/checkboxes.scss","src/scss/_config.scss","src/scss/_keyframes.scss","src/scss/_toggles.scss","src/scss/_circles.scss","src/scss/_squares.scss","src/scss/_sizes.scss","src/scss/_circle-square.scss"],"names":[],"mappings":"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","file":"checkboxes.9213cc98.css","sourceRoot":"..","sourcesContent":["[class^=\"ckbx-\"] {\n font-size: 24px;\n}\n\n[class^=\"ckbx-\"] label {\n position: relative;\n cursor: pointer;\n display: block;\n}\n\n[class^=\"ckbx-\"] label:before, [class^=\"ckbx-\"] label:after {\n content: \"\";\n position: absolute;\n}\n\n[class^=\"ckbx-\"] label:before {\n transition: background 0.1s 0.1s ease;\n}\n\n[class^=\"ckbx-\"] label:after {\n width: 0.6em;\n height: 0.6em;\n transition: all 0.2s ease;\n}\n\n[class^=\"ckbx-\"] input[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n}\n\n[class^=\"ckbx-circle-\"] label,\n[class^=\"ckbx-square-\"] label {\n width: 1em;\n height: 1em;\n}\n\n[class^=\"ckbx-circle-\"] label:before,\n[class^=\"ckbx-square-\"] label:before {\n width: 1em;\n height: 1em;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);\n}\n\n[class^=\"ckbx-circle-\"] input[type=\"checkbox\"]:checked + label:after,\n[class^=\"ckbx-square-\"] input[type=\"checkbox\"]:checked + label:after {\n background: #70c1b3;\n}\n\n@-webkit-keyframes switch-on {\n 50% {\n transform: scaleX(1.3);\n }\n}\n\n@keyframes switch-on {\n 50% {\n transform: scaleX(1.3);\n }\n}\n\n@-webkit-keyframes switch-off {\n 50% {\n transform: scaleX(1.3);\n }\n}\n\n@keyframes switch-off {\n 50% {\n transform: scaleX(1.3);\n }\n}\n\n@-webkit-keyframes switch-on-circle {\n 50% {\n transform: scale(1.3);\n }\n}\n\n@keyframes switch-on-circle {\n 50% {\n transform: scale(1.3);\n }\n}\n\n@-webkit-keyframes switch-off-circle {\n 50% {\n transform: scale(0.3);\n }\n}\n\n@keyframes switch-off-circle {\n 50% {\n transform: scale(0.3);\n }\n}\n\n@-webkit-keyframes stretch {\n 50% {\n transform: scaleX(0.3);\n }\n 100% {\n transform: scaleX(1.3);\n }\n}\n\n@keyframes stretch {\n 50% {\n transform: scaleX(0.3);\n }\n 100% {\n transform: scaleX(1.3);\n }\n}\n\n@-webkit-keyframes stretchback {\n 50% {\n transform: scaleX(0.3);\n }\n 100% {\n transform: scaleX(1.3);\n }\n}\n\n@keyframes stretchback {\n 50% {\n transform: scaleX(0.3);\n }\n 100% {\n transform: scaleX(1.3);\n }\n}\n\n[class^=\"ckbx-style-\"] label {\n width: 2em;\n height: 1em;\n}\n\n[class^=\"ckbx-style-\"] label:before {\n width: 2em;\n height: 1em;\n background: #4d4d4d;\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2);\n}\n\n[class^=\"ckbx-style-\"] label:after {\n z-index: 2;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);\n background: #fcfff4;\n}\n\n[class^=\"ckbx-style-\"] input[type=\"checkbox\"]:checked + label:before {\n background: #333;\n}\n\n[class^=\"ckbx-style-\"] input[type=\"checkbox\"]:checked + label:after {\n left: 1.1em;\n}\n\n.ckbx-style-1 label:after, .ckbx-style-2 label:after, .ckbx-style-5 label:after, .ckbx-style-6 label:after, .ckbx-style-8 label:after, .ckbx-style-10 label:after, .ckbx-style-11 label:after, .ckbx-style-12 label:after, .ckbx-style-15 label:after {\n width: 1em;\n height: 1em;\n left: 0;\n}\n\n.ckbx-style-3 label:after, .ckbx-style-4 label:after, .ckbx-style-16 label:after, .ckbx-style-17 label:after {\n left: 0.2em;\n top: 0.2em;\n border-radius: 4px;\n}\n\n.ckbx-style-1 label:before {\n left: 0.1em;\n border-radius: 50px;\n}\n\n.ckbx-style-1 label:after {\n border-radius: 50px;\n}\n\n.ckbx-style-3 label:before {\n border-radius: 4px;\n}\n\n.ckbx-style-4 label:before {\n border-radius: 4px;\n}\n\n.ckbx-style-4 label:after {\n border-radius: 100%;\n}\n\n.ckbx-style-5 label:before {\n height: 0.5em;\n left: 0.1em;\n top: 0.25em;\n border-radius: 50px;\n}\n\n.ckbx-style-5 label:after {\n border-radius: 50px;\n}\n\n.ckbx-style-6 label:before {\n left: 0.1em;\n border-radius: 50px;\n}\n\n.ckbx-style-6 label:after {\n border-radius: 50px;\n left: -0.1em;\n box-shadow: 0 0 0 5px #fcfff4 inset;\n background: #4d4d4d;\n}\n\n.ckbx-style-6 input[type=\"checkbox\"]:checked + label:after {\n background: #333;\n}\n\n.ckbx-style-7 label:before {\n left: 0.1em;\n border-radius: 50px;\n}\n\n.ckbx-style-7 label:after {\n width: 0.8em;\n height: 0.8em;\n border-radius: 100%;\n left: 0.2em;\n top: 0.1em;\n box-shadow: 0 0 0 5px #fcfff4 inset;\n background: #4d4d4d;\n -webkit-animation: switch-off 0.3s ease-out;\n animation: switch-off 0.3s ease-out;\n}\n\n.ckbx-style-7 input[type=\"checkbox\"]:checked + label:after {\n left: 1.2em;\n background: #333;\n -webkit-animation: switch-on 0.3s ease-out;\n animation: switch-on 0.3s ease-out;\n}\n\n.ckbx-style-8 label:before {\n left: 0.1em;\n transition: background 0.1s ease;\n background: #f25f5c;\n border-radius: 50px;\n box-shadow: inset 0 1px 1px rgba(171, 66, 63, 0.5);\n}\n\n.ckbx-style-8 label:after {\n border-radius: 50px;\n -webkit-animation: switch-off 0.2s ease-out;\n animation: switch-off 0.2s ease-out;\n}\n\n.ckbx-style-8 input[type=\"checkbox\"]:checked + label:before {\n background: #70c1b3;\n box-shadow: inset 0 1px 1px rgba(84, 152, 140, 0.5);\n}\n\n.ckbx-style-8 input[type=\"checkbox\"]:checked + label:after {\n -webkit-animation: switch-on 0.2s ease-out;\n animation: switch-on 0.2s ease-out;\n}\n\n.ckbx-style-9 {\n width: 3em !important;\n position: relative;\n}\n\n.ckbx-style-9:before, .ckbx-style-9:after {\n position: absolute;\n font-size: 0.6em;\n color: #fff;\n font-weight: bold;\n text-align: center;\n}\n\n.ckbx-style-9:before {\n content: \"ON\";\n z-index: 1;\n left: 0.4em;\n top: 0.2em;\n}\n\n.ckbx-style-9:after {\n content: \"OFF\";\n right: 0.4em;\n top: 0.2em;\n}\n\n.ckbx-style-9 label:before {\n width: 3em;\n transition: background 0.1s ease;\n background: #f25f5c;\n box-shadow: inset 0 1px 1px rgba(171, 66, 63, 0.5);\n}\n\n.ckbx-style-9 label:after {\n width: 1.5em;\n height: 1em;\n left: 0;\n}\n\n.ckbx-style-9 input[type=\"checkbox\"]:checked + label:before {\n background: #70c1b3;\n box-shadow: inset 0 1px 1px rgba(84, 152, 140, 0.5);\n}\n\n.ckbx-style-9 input[type=\"checkbox\"]:checked + label:after {\n left: 1.5em;\n}\n\n.ckbx-style-10 label:before {\n height: 0.5em;\n left: 0.1em;\n top: 0.25em;\n}\n\n.ckbx-style-11 label:before {\n height: 0.5em;\n left: 0.1em;\n top: 0.25em;\n background: #f25f5c;\n border-radius: 50px;\n}\n\n.ckbx-style-11 label:after {\n background: #f25f5c;\n border-radius: 100%;\n -webkit-animation: switch-off 0.4s ease-out forwards;\n animation: switch-off 0.4s ease-out forwards;\n}\n\n.ckbx-style-11 input[type=\"checkbox\"]:checked + label:before {\n background: #70c1b3;\n}\n\n.ckbx-style-11 input[type=\"checkbox\"]:checked + label:after {\n background: #70c1b3;\n -webkit-animation: switch-on 0.4s ease-out forwards;\n animation: switch-on 0.4s ease-out forwards;\n}\n\n.ckbx-style-12 label:before {\n height: 0.5em;\n left: 0.1em;\n top: 0.25em;\n background: #f25f5c;\n box-shadow: unset;\n}\n\n.ckbx-style-12 label:after {\n background: #f25f5c;\n -webkit-animation: switch-off 0.4s ease-out forwards;\n animation: switch-off 0.4s ease-out forwards;\n}\n\n.ckbx-style-12 input[type=\"checkbox\"]:checked + label:before {\n background: #70c1b3;\n}\n\n.ckbx-style-12 input[type=\"checkbox\"]:checked + label:after {\n background: #70c1b3;\n -webkit-animation: switch-on 0.4s ease-out forwards;\n animation: switch-on 0.4s ease-out forwards;\n}\n\n.ckbx-style-13 label:before {\n left: 0.1em;\n background: #f25f5c;\n border-radius: 50px;\n box-shadow: inset 0 1px 1px rgba(171, 66, 63, 0.5);\n}\n\n.ckbx-style-13 label:after {\n width: 0.8em;\n height: 0.8em;\n border-radius: 100%;\n left: 0.2em;\n top: 0.1em;\n box-shadow: 0 0 0 5px #fcfff4 inset;\n background: #f25f5c;\n -webkit-animation: switch-off 0.3s ease-out;\n animation: switch-off 0.3s ease-out;\n}\n\n.ckbx-style-13 input[type=\"checkbox\"]:checked + label:before {\n background: #70c1b3;\n box-shadow: inset 0 1px 1px rgba(84, 152, 140, 0.5);\n}\n\n.ckbx-style-13 input[type=\"checkbox\"]:checked + label:after {\n left: 1.2em;\n background: #70c1b3;\n -webkit-animation: switch-on 0.3s ease-out;\n animation: switch-on 0.3s ease-out;\n}\n\n.ckbx-style-14 {\n position: relative;\n padding: 3px;\n background: #333;\n border-radius: 4px;\n}\n\n.ckbx-style-14 label {\n width: 4em;\n height: 1em;\n background: #333;\n}\n\n.ckbx-style-14 label:before {\n content: \"OFF\";\n width: 50%;\n text-align: center;\n color: #fff;\n font-weight: bold;\n font-size: 0.6em;\n line-height: 1.6;\n transition: all 0.2s ease;\n background: #f25f5c;\n left: 50%;\n bottom: 0;\n top: 0;\n border-radius: 4px;\n height: unset;\n box-shadow: unset;\n}\n\n.ckbx-style-14 label:after {\n content: \"ON\";\n width: 50%;\n text-align: center;\n color: rgba(255, 255, 255, 0.5);\n line-height: 1.6;\n top: 0;\n bottom: 0;\n font-weight: bold;\n font-size: 0.6em;\n border-radius: 4px;\n background: #333;\n height: unset;\n box-shadow: unset;\n z-index: unset;\n}\n\n.ckbx-style-14 input[type=\"checkbox\"]:checked + label:before {\n background: #333;\n color: rgba(255, 255, 255, 0.5);\n}\n\n.ckbx-style-14 input[type=\"checkbox\"]:checked + label:after {\n background: #70c1b3;\n color: #fff;\n left: unset;\n}\n\n.ckbx-style-15 label:before {\n content: \"\\2714\\2718\";\n color: #fff;\n font-size: 0.8em;\n top: 0;\n bottom: 0;\n padding-left: 0.25em;\n padding-right: 0.25em;\n left: 0.1em;\n background: #f25f5c;\n border-radius: 50px;\n box-shadow: inset 0 1px 1px rgba(171, 66, 63, 0.5);\n letter-spacing: -1px;\n height: unset;\n}\n\n@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {\n .ckbx-style-15 label:before {\n letter-spacing: 6px;\n }\n}\n\n@-moz-document url-prefix() {\n .ckbx-style-15 label:before {\n letter-spacing: 6px;\n }\n}\n\n.ckbx-style-15 label:after {\n border-radius: 50px;\n -webkit-animation: switch-off 0.2s ease-out;\n animation: switch-off 0.2s ease-out;\n}\n\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n .ckbx-style-15 label:before {\n letter-spacing: -2px;\n }\n .ckbx-style-15 label:after {\n left: 0.05em;\n }\n}\n\n.ckbx-style-15 input[type=\"checkbox\"]:checked + label:before {\n background: #70c1b3;\n box-shadow: inset 0 1px 1px rgba(84, 152, 140, 0.5);\n}\n\n.ckbx-style-15 input[type=\"checkbox\"]:checked + label:after {\n -webkit-animation: switch-on 0.2s ease-out;\n animation: switch-on 0.2s ease-out;\n}\n\n.ckbx-style-16 label:before {\n border-radius: 4px;\n background: #f25f5c;\n box-shadow: unset;\n}\n\n.ckbx-style-16 input[type=\"checkbox\"]:checked + label:before {\n background: #70c1b3;\n}\n\n.ckbx-style-17 label:before {\n border-radius: 4px;\n}\n\n.ckbx-style-17 label:after {\n background: #f25f5c;\n}\n\n.ckbx-style-17 input[type=\"checkbox\"]:checked + label:after {\n background: #70c1b3;\n}\n\n[class^=\"ckbx-circle-\"] label:before {\n border-radius: 100%;\n}\n\n[class^=\"ckbx-circle-\"] label:after {\n border-radius: 100%;\n left: 0.2em;\n top: 0.2em;\n background: #f25f5c;\n z-index: 2;\n}\n\n.ckbx-circle-2 label:after {\n z-index: unset;\n}\n\n.ckbx-circle-4 label:after {\n left: unset;\n top: unset;\n z-index: unset;\n}\n\n.ckbx-square-1 label:after {\n left: 0.2em;\n top: 0.2em;\n background: #f25f5c;\n z-index: 2;\n}\n\n.ckbx-square-2 label:after {\n left: 0.2em;\n top: 0.2em;\n background: #f25f5c;\n}\n\n.ckbx-square-3 label:after {\n background: #f25f5c;\n z-index: 2;\n}\n\n[class^=\"ckbx\"].ckbx-small {\n font-size: 0.5em;\n}\n\n[class^=\"ckbx\"].ckbx-large {\n font-size: 1.5em;\n}\n\n[class^=\"ckbx\"].ckbx-xlarge {\n font-size: 2.5em;\n}\n\n.ckbx-circle-1 label:before, .ckbx-square-1 label:before {\n background: #333;\n}\n\n.ckbx-circle-2 label:before, .ckbx-square-2 label:before {\n width: 1em;\n height: 1em;\n background: #333;\n}\n\n.ckbx-circle-2 label:after, .ckbx-square-2 label:after {\n -webkit-animation: switch-off-circle 0.2s ease-out;\n animation: switch-off-circle 0.2s ease-out;\n}\n\n.ckbx-circle-2 input[type=\"checkbox\"]:checked + label:after, .ckbx-square-2 input[type=\"checkbox\"]:checked + label:after {\n width: 1em;\n height: 1em;\n top: 0;\n left: 0;\n -webkit-animation: switch-on-circle 0.2s ease-out;\n animation: switch-on-circle 0.2s ease-out;\n}\n\n.ckbx-circle-3 label:before, .ckbx-square-3 label:before {\n background: #fcfff4;\n}\n\n.ckbx-circle-3 label:after, .ckbx-square-3 label:after {\n left: 0.1em;\n top: 0.1em;\n border: 0.1em solid #fcfff4;\n}\n\n.ckbx-circle-4 label:before, .ckbx-square-4 label:before {\n box-shadow: unset;\n}\n\n.ckbx-circle-4 label:after, .ckbx-square-4 label:after {\n background: transparent;\n border: 0.2em solid #f25f5c;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);\n -webkit-animation: stretchback 0.2s ease-out;\n animation: stretchback 0.2s ease-out;\n}\n\n.ckbx-circle-4 input[type=\"checkbox\"]:checked + label:after, .ckbx-square-4 input[type=\"checkbox\"]:checked + label:after {\n border-color: #70c1b3;\n -webkit-animation: stretch 0.2s ease-out;\n animation: stretch 0.2s ease-out;\n background: unset;\n}\n/*# sourceMappingURL=checkboxes.css.map */","@import \"config\";\r\n\r\n[class^=\"#{$checkbox}-\"] {\r\n font-size: $base-font-size;\r\n\r\n label {\r\n position: relative;\r\n cursor: pointer;\r\n display: block;\r\n\r\n &:before,\r\n &:after {\r\n content: \"\";\r\n position: absolute;\r\n }\r\n\r\n &:before {\r\n transition: background $base-easing-speed 0.1s $base-easeing;\r\n }\r\n\r\n &:after {\r\n width: 0.6em;\r\n height: 0.6em;\r\n transition: all $base-easing-speed * 2 $base-easeing;\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"] {\r\n position: absolute;\r\n opacity: 0;\r\n }\r\n}\r\n\r\n[class^=\"#{$checkbox}-circle-\"],\r\n[class^=\"#{$checkbox}-square-\"] {\r\n label {\r\n width: $circle-style-width;\r\n height: $circle-style-height;\r\n\r\n &:before {\r\n width: 1em;\r\n height: 1em;\r\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"] {\r\n &:checked {\r\n + label {\r\n &:after {\r\n background: $green;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n@import \"keyframes\";\r\n@import \"toggles\";\r\n@import \"circles\";\r\n@import \"squares\";\r\n@import \"sizes\";\r\n@import \"circle-square\";\r\n","$brown: #50514f !default;\r\n$yellow: #ffe066 !default;\r\n$green: #70c1b3 !default;\r\n$turquoise: #247ba0 !default;\r\n$blue: #247ba0 !default;\r\n$red: #f25f5c !default;\r\n$light: #ffffff !default;\r\n\r\n$base-font-size: 24px;\r\n$base-easeing: ease;\r\n$base-easing-speed: 0.1s;\r\n\r\n$base-color: #333;\r\n$base-contrast: #fcfff4;\r\n\r\n$border-radius-full: 100%;\r\n$border-radius-medium: 4px;\r\n$border-radius-low: 50px;\r\n\r\n$toggle-style-width: 2em;\r\n$toggle-style-height: 1em;\r\n\r\n$circle-style-width: 1em;\r\n$circle-style-height: 1em;\r\n\r\n$checkbox: \"ckbx\" !default;\r\n","@keyframes switch-on {\n 50% {\n transform: scaleX(1.3);\n }\n}\n\n@keyframes switch-off {\n 50% {\n transform: scaleX(1.3);\n }\n}\n\n@keyframes switch-on-circle {\n 50% {\n transform: scale(1.3);\n }\n}\n\n@keyframes switch-off-circle {\n 50% {\n transform: scale(0.3);\n }\n}\n\n@keyframes stretch {\n 50% {\n transform: scaleX(0.3);\n }\n 100% {\n transform: scaleX(1.3);\n }\n}\n@keyframes stretchback {\n 50% {\n transform: scaleX(0.3);\n }\n 100% {\n transform: scaleX(1.3);\n }\n}","[class^=\"#{$checkbox}-style-\"] {\r\n label {\r\n width: $toggle-style-width;\r\n height: $toggle-style-height;\r\n\r\n &:before {\r\n width: 2em;\r\n height: 1em;\r\n background: lighten($base-color, 10%);\r\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5),\r\n 0 1px 0 rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n &:after {\r\n z-index: 2;\r\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);\r\n background: $base-contrast;\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"] {\r\n &:checked {\r\n + label {\r\n &:before {\r\n background: $base-color;\r\n }\r\n\r\n &:after {\r\n left: 1.1em;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.#{$checkbox}-style {\r\n &-1,\r\n &-2,\r\n &-5,\r\n &-6,\r\n &-8,\r\n &-10,\r\n &-11,\r\n &-12,\r\n &-15 {\r\n label {\r\n &:after {\r\n width: 1em;\r\n height: 1em;\r\n left: 0;\r\n }\r\n }\r\n }\r\n\r\n &-3,\r\n &-4,\r\n &-16,\r\n &-17 {\r\n label {\r\n &:after {\r\n left: 0.2em;\r\n top: 0.2em;\r\n border-radius: $border-radius-medium;\r\n }\r\n }\r\n }\r\n &-1 {\r\n label {\r\n &:before {\r\n left: 0.1em;\r\n border-radius: $border-radius-low;\r\n }\r\n\r\n &:after {\r\n border-radius: $border-radius-low;\r\n }\r\n }\r\n }\r\n\r\n &-2 {\r\n label {\r\n &:before {\r\n }\r\n\r\n &:after {\r\n }\r\n }\r\n }\r\n\r\n &-3 {\r\n label {\r\n &:before {\r\n border-radius: $border-radius-medium;\r\n }\r\n\r\n &:after {\r\n }\r\n }\r\n }\r\n\r\n &-4 {\r\n label {\r\n &:before {\r\n border-radius: $border-radius-medium;\r\n }\r\n\r\n &:after {\r\n border-radius: $border-radius-full;\r\n }\r\n }\r\n }\r\n\r\n &-5 {\r\n label {\r\n &:before {\r\n height: 0.5em;\r\n left: 0.1em;\r\n top: 0.25em;\r\n border-radius: $border-radius-low;\r\n }\r\n\r\n &:after {\r\n border-radius: $border-radius-low;\r\n }\r\n }\r\n }\r\n\r\n &-6 {\r\n label {\r\n &:before {\r\n left: 0.1em;\r\n border-radius: $border-radius-low;\r\n }\r\n\r\n &:after {\r\n border-radius: $border-radius-low;\r\n left: -0.1em;\r\n box-shadow: 0 0 0 5px $base-contrast inset;\r\n background: lighten($base-color, 10%);\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + label {\r\n &:after {\r\n background: $base-color;\r\n }\r\n }\r\n }\r\n\r\n &-7 {\r\n label {\r\n &:before {\r\n left: 0.1em;\r\n border-radius: $border-radius-low;\r\n }\r\n\r\n &:after {\r\n width: 0.8em;\r\n height: 0.8em;\r\n border-radius: $border-radius-full;\r\n left: 0.2em;\r\n top: 0.1em;\r\n box-shadow: 0 0 0 5px $base-contrast inset;\r\n background: lighten($base-color, 10%);\r\n animation: switch-off 0.3s ease-out;\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + label {\r\n &:after {\r\n left: 1.2em;\r\n background: $base-color;\r\n animation: switch-on 0.3s ease-out;\r\n }\r\n }\r\n }\r\n\r\n &-8 {\r\n label {\r\n &:before {\r\n left: 0.1em;\r\n transition: background $base-easing-speed $base-easeing;\r\n background: $red;\r\n border-radius: $border-radius-low;\r\n box-shadow: inset 0 1px 1px rgba(171, 66, 63, 0.5);\r\n }\r\n\r\n &:after {\r\n border-radius: $border-radius-low;\r\n animation: switch-off 0.2s ease-out;\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + label {\r\n &:before {\r\n background: $green;\r\n box-shadow: inset 0 1px 1px rgba(84, 152, 140, 0.5);\r\n }\r\n\r\n &:after {\r\n animation: switch-on 0.2s ease-out;\r\n }\r\n }\r\n }\r\n\r\n &-9 {\r\n width: 3em !important;\r\n position: relative;\r\n\r\n &:before,\r\n &:after {\r\n position: absolute;\r\n font-size: 0.6em;\r\n color: #fff;\r\n font-weight: bold;\r\n text-align: center;\r\n }\r\n\r\n &:before {\r\n content: \"ON\";\r\n z-index: 1;\r\n left: 0.4em;\r\n top: 0.2em;\r\n }\r\n\r\n &:after {\r\n content: \"OFF\";\r\n right: 0.4em;\r\n top: 0.2em;\r\n }\r\n\r\n label {\r\n &:before {\r\n width: 3em;\r\n transition: background $base-easing-speed $base-easeing;\r\n background: $red;\r\n box-shadow: inset 0 1px 1px rgba(171, 66, 63, 0.5);\r\n }\r\n\r\n &:after {\r\n width: 1.5em;\r\n height: 1em;\r\n left: 0;\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + label {\r\n &:before {\r\n background: $green;\r\n box-shadow: inset 0 1px 1px rgba(84, 152, 140, 0.5);\r\n }\r\n\r\n &:after {\r\n left: 1.5em;\r\n }\r\n }\r\n }\r\n\r\n &-10 {\r\n label {\r\n &:before {\r\n height: 0.5em;\r\n left: 0.1em;\r\n top: 0.25em;\r\n }\r\n\r\n &:after {\r\n }\r\n }\r\n }\r\n\r\n &-11 {\r\n label {\r\n &:before {\r\n height: 0.5em;\r\n left: 0.1em;\r\n top: 0.25em;\r\n background: $red;\r\n border-radius: $border-radius-low;\r\n }\r\n\r\n &:after {\r\n background: $red;\r\n border-radius: $border-radius-full;\r\n animation: switch-off 0.4s ease-out forwards;\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + label {\r\n &:before {\r\n background: $green;\r\n }\r\n\r\n &:after {\r\n background: $green;\r\n animation: switch-on 0.4s ease-out forwards;\r\n }\r\n }\r\n }\r\n\r\n &-12 {\r\n label {\r\n &:before {\r\n height: 0.5em;\r\n left: 0.1em;\r\n top: 0.25em;\r\n background: $red;\r\n box-shadow: unset;\r\n }\r\n\r\n &:after {\r\n background: $red;\r\n animation: switch-off 0.4s ease-out forwards;\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + label {\r\n &:before {\r\n background: $green;\r\n }\r\n\r\n &:after {\r\n background: $green;\r\n animation: switch-on 0.4s ease-out forwards;\r\n }\r\n }\r\n }\r\n\r\n &-13 {\r\n label {\r\n &:before {\r\n left: 0.1em;\r\n background: $red;\r\n border-radius: $border-radius-low;\r\n box-shadow: inset 0 1px 1px rgba(171, 66, 63, 0.5);\r\n }\r\n\r\n &:after {\r\n width: 0.8em;\r\n height: 0.8em;\r\n border-radius: $border-radius-full;\r\n left: 0.2em;\r\n top: 0.1em;\r\n box-shadow: 0 0 0 5px $base-contrast inset;\r\n background: $red;\r\n animation: switch-off 0.3s ease-out;\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + label {\r\n &:before {\r\n background: $green;\r\n box-shadow: inset 0 1px 1px rgba(84, 152, 140, 0.5);\r\n }\r\n\r\n &:after {\r\n left: 1.2em;\r\n background: $green;\r\n animation: switch-on 0.3s ease-out;\r\n }\r\n }\r\n }\r\n\r\n &-14 {\r\n position: relative;\r\n padding: 3px;\r\n background: $base-color;\r\n border-radius: $border-radius-medium;\r\n\r\n label {\r\n width: 4em;\r\n height: 1em;\r\n background: $base-color;\r\n\r\n &:before {\r\n content: \"OFF\";\r\n width: 50%;\r\n text-align: center;\r\n color: #fff;\r\n font-weight: bold;\r\n font-size: 0.6em;\r\n line-height: 1.6;\r\n transition: all $base-easing-speed * 2 $base-easeing;\r\n background: $red;\r\n left: 50%;\r\n bottom: 0;\r\n top: 0;\r\n border-radius: $border-radius-medium;\r\n height: unset;\r\n box-shadow: unset;\r\n }\r\n\r\n &:after {\r\n content: \"ON\";\r\n width: 50%;\r\n text-align: center;\r\n color: rgba(255, 255, 255, 0.5);\r\n line-height: 1.6;\r\n top: 0;\r\n bottom: 0;\r\n font-weight: bold;\r\n font-size: 0.6em;\r\n border-radius: $border-radius-medium;\r\n background: $base-color;\r\n height: unset;\r\n box-shadow: unset;\r\n z-index: unset;\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + label {\r\n &:before {\r\n background: $base-color;\r\n color: rgba(255, 255, 255, 0.5);\r\n }\r\n\r\n &:after {\r\n background: $green;\r\n color: #fff;\r\n left: unset;\r\n }\r\n }\r\n }\r\n\r\n &-15 {\r\n label {\r\n &:before {\r\n content: \"\\2714\\2718\";\r\n color: #fff;\r\n font-size: 0.8em;\r\n top: 0;\r\n bottom: 0;\r\n padding-left: 0.25em;\r\n padding-right: 0.25em;\r\n left: 0.1em;\r\n background: $red;\r\n border-radius: $border-radius-low;\r\n box-shadow: inset 0 1px 1px rgba(171, 66, 63, 0.5);\r\n letter-spacing: -1px;\r\n height: unset;\r\n @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {\r\n letter-spacing: 6px;\r\n }\r\n\r\n @-moz-document url-prefix() {\r\n letter-spacing: 6px;\r\n }\r\n }\r\n\r\n &:after {\r\n border-radius: $border-radius-low;\r\n animation: switch-off 0.2s ease-out;\r\n }\r\n\r\n @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\r\n &:before {\r\n letter-spacing: -2px;\r\n }\r\n\r\n &:after {\r\n left: 0.05em;\r\n }\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + label {\r\n &:before {\r\n background: $green;\r\n box-shadow: inset 0 1px 1px rgba(84, 152, 140, 0.5);\r\n }\r\n\r\n &:after {\r\n animation: switch-on 0.2s ease-out;\r\n }\r\n }\r\n }\r\n\r\n &-16 {\r\n label {\r\n &:before {\r\n border-radius: $border-radius-medium;\r\n background: $red;\r\n box-shadow: unset;\r\n }\r\n\r\n &:after {\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + label {\r\n &:before {\r\n background: $green;\r\n }\r\n }\r\n }\r\n\r\n &-17 {\r\n label {\r\n &:before {\r\n border-radius: $border-radius-medium;\r\n }\r\n\r\n &:after {\r\n background: $red;\r\n }\r\n }\r\n\r\n input[type=\"checkbox\"]:checked + label {\r\n &:after {\r\n background: $green;\r\n }\r\n }\r\n }\r\n}\r\n","[class^=\"#{$checkbox}-circle-\"] {\r\n label {\r\n &:before {\r\n border-radius: $border-radius-full;\r\n }\r\n\r\n &:after {\r\n border-radius: $border-radius-full;\r\n left: 0.2em;\r\n top: 0.2em;\r\n background: $red;\r\n z-index: 2;\r\n }\r\n }\r\n}\r\n\r\n.#{$checkbox} {\r\n &-circle-2 {\r\n label {\r\n &:after {\r\n z-index: unset;\r\n }\r\n }\r\n }\r\n\r\n &-circle-4 {\r\n label {\r\n &:after {\r\n left: unset;\r\n top: unset;\r\n z-index: unset;\r\n }\r\n }\r\n }\r\n}\r\n","[class^=\"#{$checkbox}-square-\"] {\r\n label {\r\n &:before {\r\n }\r\n\r\n &:after {\r\n }\r\n }\r\n}\r\n\r\n.#{$checkbox} {\r\n &-square-1 {\r\n label {\r\n &:after {\r\n left: 0.2em;\r\n top: 0.2em;\r\n background: $red;\r\n z-index: 2;\r\n }\r\n }\r\n }\r\n\r\n &-square-2 {\r\n label {\r\n &:after {\r\n left: 0.2em;\r\n top: 0.2em;\r\n background: $red;\r\n }\r\n }\r\n }\r\n\r\n &-square-3 {\r\n label {\r\n &:after {\r\n background: $red;\r\n z-index: 2;\r\n }\r\n }\r\n }\r\n}\r\n","[class^=\"#{$checkbox}\"] {\r\n &.#{$checkbox}-small {\r\n font-size: 0.5em;\r\n }\r\n\r\n &.#{$checkbox}-large {\r\n font-size: 1.5em;\r\n }\r\n\r\n &.#{$checkbox}-xlarge {\r\n font-size: 2.5em;\r\n }\r\n}\r\n",".#{$checkbox} {\n &-circle-1,\n &-square-1 {\n label {\n &:before {\n background: $base-color;\n }\n }\n }\n\n &-circle-2,\n &-square-2 {\n label {\n &:before {\n width: $circle-style-width;\n height: $circle-style-height;\n background: $base-color;\n }\n\n &:after {\n animation: switch-off-circle 0.2s ease-out;\n }\n }\n\n input[type=\"checkbox\"]:checked + label {\n &:after {\n width: 1em;\n height: 1em;\n top: 0;\n left: 0;\n animation: switch-on-circle 0.2s ease-out;\n }\n }\n }\n\n &-circle-3,\n &-square-3 {\n label {\n &:before {\n background: $base-contrast;\n }\n\n &:after {\n left: 0.1em;\n top: 0.1em;\n border: 0.1em solid $base-contrast;\n }\n }\n }\n\n &-circle-4,\n &-square-4 {\n label {\n &:before {\n box-shadow: unset;\n }\n\n &:after {\n background: transparent;\n border: 0.2em solid $red;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);\n animation: stretchback 0.2s ease-out;\n }\n }\n\n input[type=\"checkbox\"]:checked + label {\n &:after {\n border-color: $green;\n animation: stretch 0.2s ease-out;\n background: unset;\n }\n }\n }\n}\n"]}