diff --git a/dist/maps/pretty-checkbox-rtl.css.map b/dist/maps/pretty-checkbox-rtl.css.map new file mode 100644 index 0000000..68607ba --- /dev/null +++ b/dist/maps/pretty-checkbox-rtl.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["scss-rtl/_core.scss","scss-rtl/_variables.scss","scss/essentials/_keyframes.scss","pretty-checkbox-rtl.css","scss/elements/default/_fill.scss","scss/elements/default/_outline.scss","scss/elements/default/_thick.scss","scss-rtl/elements/font-icon/_general.scss","scss-rtl/elements/svg/_general.scss","scss-rtl/elements/image/_general.scss","scss-rtl/elements/switch/_general.scss","scss-rtl/elements/switch/_fill.scss","scss/elements/switch/_slim.scss","scss/states/_hover.scss","scss/states/_focus.scss","scss/states/_indeterminate.scss","scss/extras/_toggle.scss","scss/extras/_plain.scss","scss/extras/_round.scss","scss/extras/_curve.scss","scss/extras/_animation.scss","scss/extras/_disabled.scss","scss/extras/_locked.scss","scss/extras/_colors.scss","scss/extras/_bigger.scss","scss/extras/_print.scss"],"names":[],"mappings":"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","file":"../pretty-checkbox-rtl.css","sourcesContent":["@charset 'utf-8';\n\n.#{$pretty--class-name} * {\n box-sizing: border-box;\n}\n\n//Throw error on invalid input types.\n.#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) {\n display: none;\n\n @if $pretty--debug {\n + *:after {\n content: $pretty--err-message;\n border: 1px solid #dedede;\n border-right: 3px solid #d9534f;\n padding: 9px;\n font-size: 1em;\n font-weight: 600;\n color: #d9534f;\n position: absolute;\n z-index: 3;\n background: #fbfbfb;\n top: 0;\n right: 0;\n }\n }\n}\n\n.#{$pretty--class-name} {\n position: relative;\n display: inline-block;\n margin-left: 1em;\n white-space: nowrap;\n line-height: 1;\n\n input {\n position: absolute;\n right: 0;\n top: 0;\n min-width: 1em;\n width: 100%;\n height: 100%;\n z-index: $pretty--z-index-front;\n opacity: 0;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .state {\n label {\n position: initial;\n display: inline-block;\n font-weight: normal;\n margin: 0;\n text-indent: $pretty--label-text-offset;\n min-width: $pretty--box-size;\n\n &:before,\n &:after {\n content: '';\n width: $pretty--box-size;\n height: $pretty--box-size;\n display: block;\n box-sizing: border-box;\n border-radius: 0;\n border: 1px solid transparent;\n z-index: $pretty--z-index-back;\n position: absolute;\n right: 0;\n top: $pretty-top-offset;\n background-color: transparent;\n }\n\n &:before {\n border-color: $pretty--color-default;\n }\n }\n\n &.p-is-hover,\n &.p-is-indeterminate {\n display: none;\n }\n }\n}\n","$pretty--class-name: pretty !default;\n\n// colors\n$pretty--color-default: #bdc3c7 !default;\n$pretty--color-primary: #428bca !default;\n$pretty--color-info: #5bc0de !default;\n$pretty--color-success: #5cb85c !default;\n$pretty--color-warning: #f0ad4e !default;\n$pretty--color-danger: #d9534f !default;\n$pretty--color-dark: #5a656b !default;\n\n// z-index\n$pretty--z-index-back: 0 !default;\n$pretty--z-index-between: 1 !default;\n$pretty--z-index-front: 2 !default;\n\n// box\n$pretty--curve-radius: 20% !default;\n$pretty--box-size: calc(1em + 2px) !default;\n\n// text\n$pretty--label-text-offset: 1.5em !default;\n$pretty--label-text-offset-switch: 2.5em !default;\n\n// scale\n$pretty--2x: 1.2em !default;\n\n// color set\n$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), (success, $pretty--color-success), (warning, $pretty--color-warning), (danger, $pretty--color-danger) !default;\n\n// position\n$pretty-top: 8;\n$pretty-top-switch: ($pretty-top * 2) * 1%;\n$pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%});\n$pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch});\n\n// dev \n$pretty--debug: false !default;\n$pretty--err-message: 'Error: Invalid input type!' !default;\n","@keyframes zoom {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n}\n\n@keyframes tada {\n 0% {\n animation-timing-function: ease-in;\n opacity: 0;\n transform: scale(7);\n }\n\n 38% {\n animation-timing-function: ease-out;\n opacity: 1;\n transform: scale(1);\n }\n\n 55% {\n animation-timing-function: ease-in;\n transform: scale(1.5);\n }\n\n 72% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n\n 81% {\n animation-timing-function: ease-in;\n transform: scale(1.24);\n }\n\n 89% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n\n 95% {\n animation-timing-function: ease-in;\n transform: scale(1.04);\n }\n\n 100% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n}\n\n@keyframes jelly {\n 0% {\n transform: scale3d(1, 1, 1);\n }\n\n 30% {\n transform: scale3d(.75, 1.25, 1);\n }\n\n 40% {\n transform: scale3d(1.25, .75, 1);\n }\n\n 50% {\n transform: scale3d(.85, 1.15, 1);\n }\n\n 65% {\n transform: scale3d(1.05, .95, 1);\n }\n\n 75% {\n transform: scale3d(.95, 1.05, 1);\n }\n\n 100% {\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes rotate {\n 0% {\n opacity: 0;\n transform: translateZ(-200px) rotate(-45deg);\n }\n\n 100% {\n opacity: 1;\n transform: translateZ(0) rotate(0);\n }\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0px 0px 0px 0px transparentize($pretty--color-default, 0);\n }\n\n 100% {\n box-shadow: 0px 0px 0px 1.5em transparentize($pretty--color-default, 1);\n }\n}",".pretty * {\n box-sizing: border-box;\n}\n\n.pretty input:not([type='checkbox']):not([type='radio']) {\n display: none;\n}\n\n.pretty {\n position: relative;\n display: inline-block;\n margin-left: 1em;\n white-space: nowrap;\n line-height: 1;\n}\n\n.pretty input {\n position: absolute;\n right: 0;\n top: 0;\n min-width: 1em;\n width: 100%;\n height: 100%;\n z-index: 2;\n opacity: 0;\n margin: 0;\n padding: 0;\n cursor: pointer;\n}\n\n.pretty .state label {\n position: initial;\n display: inline-block;\n font-weight: normal;\n margin: 0;\n text-indent: 1.5em;\n min-width: calc(1em + 2px);\n}\n\n.pretty .state label:before, .pretty .state label:after {\n content: '';\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n display: block;\n box-sizing: border-box;\n border-radius: 0;\n border: 1px solid transparent;\n z-index: 0;\n position: absolute;\n right: 0;\n top: calc((0% - (100% - 1em)) - 8%);\n background-color: transparent;\n}\n\n.pretty .state label:before {\n border-color: #bdc3c7;\n}\n\n.pretty .state.p-is-hover, .pretty .state.p-is-indeterminate {\n display: none;\n}\n\n@keyframes zoom {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n}\n\n@keyframes tada {\n 0% {\n animation-timing-function: ease-in;\n opacity: 0;\n transform: scale(7);\n }\n 38% {\n animation-timing-function: ease-out;\n opacity: 1;\n transform: scale(1);\n }\n 55% {\n animation-timing-function: ease-in;\n transform: scale(1.5);\n }\n 72% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n 81% {\n animation-timing-function: ease-in;\n transform: scale(1.24);\n }\n 89% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n 95% {\n animation-timing-function: ease-in;\n transform: scale(1.04);\n }\n 100% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n}\n\n@keyframes jelly {\n 0% {\n transform: scale3d(1, 1, 1);\n }\n 30% {\n transform: scale3d(0.75, 1.25, 1);\n }\n 40% {\n transform: scale3d(1.25, 0.75, 1);\n }\n 50% {\n transform: scale3d(0.85, 1.15, 1);\n }\n 65% {\n transform: scale3d(1.05, 0.95, 1);\n }\n 75% {\n transform: scale3d(0.95, 1.05, 1);\n }\n 100% {\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes rotate {\n 0% {\n opacity: 0;\n transform: translateZ(-200px) rotate(-45deg);\n }\n 100% {\n opacity: 1;\n transform: translateZ(0) rotate(0);\n }\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0px 0px 0px 0px #bdc3c7;\n }\n 100% {\n box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0);\n }\n}\n\n.pretty.p-default.p-fill .state label:after {\n transform: scale(1);\n}\n\n.pretty.p-default .state label:after {\n transform: scale(0.6);\n}\n\n.pretty.p-default input:checked ~ .state label:after {\n background-color: #bdc3c7 !important;\n}\n\n.pretty.p-default.p-thick .state label:before, .pretty.p-default.p-thick .state label:after {\n border-width: calc(1em / 7);\n}\n\n.pretty.p-default.p-thick .state label:after {\n transform: scale(0.4) !important;\n}\n\n.pretty.p-icon .state .icon {\n position: absolute;\n font-size: 1em;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n right: 0;\n z-index: 1;\n text-align: center;\n line-height: normal;\n top: calc((0% - (100% - 1em)) - 8%);\n border: 1px solid transparent;\n opacity: 0;\n}\n\n.pretty.p-icon .state .icon:before {\n margin: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n line-height: 1;\n}\n\n.pretty.p-icon input:checked ~ .state .icon {\n opacity: 1;\n}\n\n.pretty.p-icon input:checked ~ .state label:before {\n border-color: #5a656b;\n}\n\n.pretty.p-svg .state .svg {\n position: absolute;\n font-size: 1em;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n right: 0;\n z-index: 1;\n text-align: center;\n line-height: normal;\n top: calc((0% - (100% - 1em)) - 8%);\n border: 1px solid transparent;\n opacity: 0;\n}\n\n.pretty.p-svg .state svg {\n margin: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n line-height: 1;\n}\n\n.pretty.p-svg input:checked ~ .state .svg {\n opacity: 1;\n}\n\n.pretty.p-image .state img {\n opacity: 0;\n position: absolute;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n top: 0;\n top: calc((0% - (100% - 1em)) - 8%);\n right: 0;\n z-index: 0;\n text-align: center;\n line-height: normal;\n transform: scale(0.8);\n}\n\n.pretty.p-image input:checked ~ .state img {\n opacity: 1;\n}\n\n.pretty.p-switch input {\n min-width: 2em;\n}\n\n.pretty.p-switch .state {\n position: relative;\n}\n\n.pretty.p-switch .state:before {\n content: '';\n border: 1px solid #bdc3c7;\n border-radius: 60px;\n width: 2em;\n box-sizing: unset;\n height: calc(1em + 2px);\n position: absolute;\n top: 0;\n top: calc((0% - (100% - 1em)) - 16%);\n z-index: 0;\n transition: all 0.5s ease;\n}\n\n.pretty.p-switch .state label {\n text-indent: 2.5em;\n}\n\n.pretty.p-switch .state label:before, .pretty.p-switch .state label:after {\n transition: all 0.5s ease;\n border-radius: 100%;\n right: 0;\n border-color: transparent;\n transform: scale(0.8);\n}\n\n.pretty.p-switch .state label:after {\n background-color: #bdc3c7 !important;\n}\n\n.pretty.p-switch input:checked ~ .state:before {\n border-color: #5a656b;\n}\n\n.pretty.p-switch input:checked ~ .state label:before {\n opacity: 0;\n}\n\n.pretty.p-switch input:checked ~ .state label:after {\n background-color: #5a656b !important;\n right: 1em;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state:before {\n border-color: #5a656b;\n background-color: #5a656b !important;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state label:before {\n opacity: 0;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state label:after {\n background-color: #fff !important;\n right: 1em;\n}\n\n.pretty.p-switch.p-slim .state:before {\n height: 0.1em;\n background: #bdc3c7 !important;\n top: calc(50% - 0.1em);\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state:before {\n border-color: #5a656b;\n background-color: #5a656b !important;\n}\n\n.pretty.p-has-hover input:hover ~ .state:not(.p-is-hover) {\n display: none;\n}\n\n.pretty.p-has-hover input:hover ~ .state.p-is-hover {\n display: block;\n}\n\n.pretty.p-has-hover input:hover ~ .state.p-is-hover .icon {\n display: block;\n}\n\n.pretty.p-has-focus input:focus ~ .state label:before {\n box-shadow: 0px 0px 3px 0px #bdc3c7;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) {\n display: none;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate {\n display: block;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate .icon {\n display: block;\n opacity: 1;\n}\n\n.pretty.p-toggle .state.p-on {\n opacity: 0;\n display: none;\n}\n\n.pretty.p-toggle .state.p-off,\n.pretty.p-toggle .state .icon,\n.pretty.p-toggle .state .svg,\n.pretty.p-toggle .state img {\n opacity: 1;\n display: inherit;\n}\n\n.pretty.p-toggle .state.p-off .icon {\n color: #bdc3c7;\n}\n\n.pretty.p-toggle input:checked ~ .state.p-on {\n opacity: 1;\n display: inherit;\n}\n\n.pretty.p-toggle input:checked ~ .state.p-off {\n opacity: 0;\n display: none;\n}\n\n.pretty.p-plain input:checked ~ .state label:before,\n.pretty.p-plain.p-toggle .state label:before {\n content: none;\n}\n\n.pretty.p-plain.p-plain .icon {\n transform: scale(1.1);\n}\n\n.pretty.p-round .state label:before, .pretty.p-round .state label:after {\n border-radius: 100%;\n}\n\n.pretty.p-round.p-icon .state .icon {\n border-radius: 100%;\n overflow: hidden;\n}\n\n.pretty.p-round.p-icon .state .icon:before {\n transform: scale(0.8);\n}\n\n.pretty.p-curve .state label:before, .pretty.p-curve .state label:after {\n border-radius: 20%;\n}\n\n.pretty.p-smooth label:before,\n.pretty.p-smooth label:after,\n.pretty.p-smooth .icon,\n.pretty.p-smooth .svg {\n transition: all 0.5s ease;\n}\n\n.pretty.p-smooth input:checked + .state label:after {\n transition: all 0.3s ease;\n}\n\n.pretty.p-smooth input:checked + .state .icon,\n.pretty.p-smooth input:checked + .state .svg,\n.pretty.p-smooth input:checked + .state img {\n animation: zoom 0.2s ease;\n}\n\n.pretty.p-smooth.p-default input:checked + .state label:after {\n animation: zoom 0.2s ease;\n}\n\n.pretty.p-smooth.p-plain input:checked + .state label:before {\n content: '';\n transform: scale(0);\n transition: all 0.5s ease;\n}\n\n.pretty.p-tada:not(.p-default) input:checked + .state .icon,\n.pretty.p-tada:not(.p-default) input:checked + .state .svg,\n.pretty.p-tada:not(.p-default) input:checked + .state img,\n.pretty.p-tada:not(.p-default) input:checked + .state label:before,\n.pretty.p-tada:not(.p-default) input:checked + .state label:after {\n animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate;\n opacity: 1;\n}\n\n.pretty.p-jelly:not(.p-default) input:checked + .state .icon,\n.pretty.p-jelly:not(.p-default) input:checked + .state .svg,\n.pretty.p-jelly:not(.p-default) input:checked + .state img,\n.pretty.p-jelly:not(.p-default) input:checked + .state label:before,\n.pretty.p-jelly:not(.p-default) input:checked + .state label:after {\n animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 1;\n}\n\n.pretty.p-jelly:not(.p-default) input:checked + .state label:before {\n border-color: transparent;\n}\n\n.pretty.p-rotate:not(.p-default) input:checked ~ .state .icon,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state .svg,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state img,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:after {\n animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 1;\n}\n\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before {\n border-color: transparent;\n}\n\n.pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before {\n animation: pulse 1s;\n}\n\n.pretty input[disabled] {\n cursor: not-allowed;\n display: none;\n}\n\n.pretty input[disabled] ~ * {\n opacity: .5;\n}\n\n.pretty.p-locked input {\n display: none;\n cursor: not-allowed;\n}\n\n.pretty input:checked ~ .state.p-primary label:after,\n.pretty.p-toggle .state.p-primary label:after {\n background-color: #428bca !important;\n}\n\n.pretty input:checked ~ .state.p-primary .icon,\n.pretty input:checked ~ .state.p-primary .svg,\n.pretty.p-toggle .state.p-primary .icon,\n.pretty.p-toggle .state.p-primary .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-primary-o label:before,\n.pretty.p-toggle .state.p-primary-o label:before {\n border-color: #428bca;\n}\n\n.pretty input:checked ~ .state.p-primary-o label:after,\n.pretty.p-toggle .state.p-primary-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-primary-o .icon,\n.pretty input:checked ~ .state.p-primary-o .svg,\n.pretty input:checked ~ .state.p-primary-o svg,\n.pretty.p-toggle .state.p-primary-o .icon,\n.pretty.p-toggle .state.p-primary-o .svg,\n.pretty.p-toggle .state.p-primary-o svg {\n color: #428bca;\n stroke: #428bca;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after {\n background-color: #428bca !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-primary:before {\n border-color: #428bca;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-primary:before {\n background-color: #428bca !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-primary:before {\n border-color: #245682;\n background-color: #245682 !important;\n}\n\n.pretty input:checked ~ .state.p-info label:after,\n.pretty.p-toggle .state.p-info label:after {\n background-color: #5bc0de !important;\n}\n\n.pretty input:checked ~ .state.p-info .icon,\n.pretty input:checked ~ .state.p-info .svg,\n.pretty.p-toggle .state.p-info .icon,\n.pretty.p-toggle .state.p-info .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-info-o label:before,\n.pretty.p-toggle .state.p-info-o label:before {\n border-color: #5bc0de;\n}\n\n.pretty input:checked ~ .state.p-info-o label:after,\n.pretty.p-toggle .state.p-info-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-info-o .icon,\n.pretty input:checked ~ .state.p-info-o .svg,\n.pretty input:checked ~ .state.p-info-o svg,\n.pretty.p-toggle .state.p-info-o .icon,\n.pretty.p-toggle .state.p-info-o .svg,\n.pretty.p-toggle .state.p-info-o svg {\n color: #5bc0de;\n stroke: #5bc0de;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after {\n background-color: #5bc0de !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-info:before {\n border-color: #5bc0de;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-info:before {\n background-color: #5bc0de !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-info:before {\n border-color: #2390b0;\n background-color: #2390b0 !important;\n}\n\n.pretty input:checked ~ .state.p-success label:after,\n.pretty.p-toggle .state.p-success label:after {\n background-color: #5cb85c !important;\n}\n\n.pretty input:checked ~ .state.p-success .icon,\n.pretty input:checked ~ .state.p-success .svg,\n.pretty.p-toggle .state.p-success .icon,\n.pretty.p-toggle .state.p-success .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-success-o label:before,\n.pretty.p-toggle .state.p-success-o label:before {\n border-color: #5cb85c;\n}\n\n.pretty input:checked ~ .state.p-success-o label:after,\n.pretty.p-toggle .state.p-success-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-success-o .icon,\n.pretty input:checked ~ .state.p-success-o .svg,\n.pretty input:checked ~ .state.p-success-o svg,\n.pretty.p-toggle .state.p-success-o .icon,\n.pretty.p-toggle .state.p-success-o .svg,\n.pretty.p-toggle .state.p-success-o svg {\n color: #5cb85c;\n stroke: #5cb85c;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after {\n background-color: #5cb85c !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-success:before {\n border-color: #5cb85c;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-success:before {\n background-color: #5cb85c !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-success:before {\n border-color: #357935;\n background-color: #357935 !important;\n}\n\n.pretty input:checked ~ .state.p-warning label:after,\n.pretty.p-toggle .state.p-warning label:after {\n background-color: #f0ad4e !important;\n}\n\n.pretty input:checked ~ .state.p-warning .icon,\n.pretty input:checked ~ .state.p-warning .svg,\n.pretty.p-toggle .state.p-warning .icon,\n.pretty.p-toggle .state.p-warning .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-warning-o label:before,\n.pretty.p-toggle .state.p-warning-o label:before {\n border-color: #f0ad4e;\n}\n\n.pretty input:checked ~ .state.p-warning-o label:after,\n.pretty.p-toggle .state.p-warning-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-warning-o .icon,\n.pretty input:checked ~ .state.p-warning-o .svg,\n.pretty input:checked ~ .state.p-warning-o svg,\n.pretty.p-toggle .state.p-warning-o .icon,\n.pretty.p-toggle .state.p-warning-o .svg,\n.pretty.p-toggle .state.p-warning-o svg {\n color: #f0ad4e;\n stroke: #f0ad4e;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after {\n background-color: #f0ad4e !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-warning:before {\n border-color: #f0ad4e;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-warning:before {\n background-color: #f0ad4e !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-warning:before {\n border-color: #c77c11;\n background-color: #c77c11 !important;\n}\n\n.pretty input:checked ~ .state.p-danger label:after,\n.pretty.p-toggle .state.p-danger label:after {\n background-color: #d9534f !important;\n}\n\n.pretty input:checked ~ .state.p-danger .icon,\n.pretty input:checked ~ .state.p-danger .svg,\n.pretty.p-toggle .state.p-danger .icon,\n.pretty.p-toggle .state.p-danger .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-danger-o label:before,\n.pretty.p-toggle .state.p-danger-o label:before {\n border-color: #d9534f;\n}\n\n.pretty input:checked ~ .state.p-danger-o label:after,\n.pretty.p-toggle .state.p-danger-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-danger-o .icon,\n.pretty input:checked ~ .state.p-danger-o .svg,\n.pretty input:checked ~ .state.p-danger-o svg,\n.pretty.p-toggle .state.p-danger-o .icon,\n.pretty.p-toggle .state.p-danger-o .svg,\n.pretty.p-toggle .state.p-danger-o svg {\n color: #d9534f;\n stroke: #d9534f;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after {\n background-color: #d9534f !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-danger:before {\n border-color: #d9534f;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-danger:before {\n background-color: #d9534f !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-danger:before {\n border-color: #a02622;\n background-color: #a02622 !important;\n}\n\n.pretty.p-bigger label:before,\n.pretty.p-bigger label:after,\n.pretty.p-bigger .icon,\n.pretty.p-bigger .svg,\n.pretty.p-bigger .img {\n font-size: 1.2em !important;\n top: calc((0% - (100% - 1em)) - 35%) !important;\n}\n\n.pretty.p-bigger label {\n text-indent: 1.7em;\n}\n\n@media print {\n .pretty .state:before,\n .pretty .state label:before,\n .pretty .state label:after,\n .pretty .state .icon {\n color-adjust: exact;\n /* stylelint-disable */\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n}\n",".#{$pretty--class-name}.p-default.p-fill {\n .state label {\n &:after {\n transform: scale(1);\n }\n }\n}",".#{$pretty--class-name}.p-default {\n .state label {\n &:after {\n transform: scale(0.6);\n }\n }\n\n input:checked ~ .state label {\n &:after {\n background-color: $pretty--color-default !important;\n }\n }\n}",".#{$pretty--class-name}.p-default.p-thick {\n .state label {\n &:before,\n &:after {\n border-width: calc(1em / 7);\n }\n\n &:after {\n transform: scale(0.4) !important;\n }\n }\n}",".#{$pretty--class-name}.p-icon {\n .state {\n .icon {\n position: absolute;\n font-size: 1em;\n width: $pretty--box-size;\n height: $pretty--box-size;\n right: 0;\n z-index: $pretty--z-index-between;\n text-align: center;\n line-height: normal;\n top: $pretty-top-offset;\n border: 1px solid transparent;\n opacity: 0;\n }\n\n .icon:before {\n margin: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n line-height: 1;\n }\n }\n\n input:checked ~ .state {\n .icon {\n opacity: 1;\n }\n\n label:before {\n border-color: #5a656b;\n }\n }\n}\n",".#{$pretty--class-name}.p-svg {\n .state {\n .svg {\n position: absolute;\n font-size: 1em;\n width: $pretty--box-size;\n height: $pretty--box-size;\n right: 0;\n z-index: $pretty--z-index-between;\n text-align: center;\n line-height: normal;\n top: $pretty-top-offset;\n border: 1px solid transparent;\n opacity: 0;\n }\n\n svg {\n margin: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n line-height: 1;\n }\n }\n\n input:checked ~ .state .svg {\n opacity: 1;\n }\n}\n",".#{$pretty--class-name}.p-image {\n .state {\n img {\n opacity: 0;\n position: absolute;\n width: $pretty--box-size;\n height: $pretty--box-size;\n top: 0;\n top: $pretty-top-offset;\n right: 0;\n z-index: $pretty--z-index-back;\n text-align: center;\n line-height: normal;\n transform: scale(0.8);\n }\n }\n\n input:checked ~ .state img {\n opacity: 1;\n }\n}\n",".#{$pretty--class-name}.p-switch {\n input{\n min-width:2em;\n }\n .state {\n position: relative;\n\n &:before {\n content: '';\n border: 1px solid $pretty--color-default;\n border-radius: 60px;\n width: 2em;\n box-sizing: unset;\n height: $pretty--box-size;\n position: absolute;\n top: 0;\n top: $pretty-top-offset-switch;\n z-index: $pretty--z-index-back;\n transition: all 0.5s ease;\n }\n\n label {\n text-indent: $pretty--label-text-offset-switch;\n\n &:before,\n &:after {\n transition: all 0.5s ease;\n border-radius: 100%;\n right: 0;\n border-color: transparent;\n transform: scale(0.8);\n }\n\n &:after {\n background-color: $pretty--color-default !important;\n }\n }\n }\n\n input:checked ~ .state {\n &:before {\n border-color: $pretty--color-dark;\n }\n\n label:before {\n opacity: 0;\n }\n\n label:after {\n background-color: $pretty--color-dark !important;\n right: 1em;\n }\n }\n}\n",".#{$pretty--class-name}.p-switch.p-fill {\n input:checked~.state {\n &:before {\n border-color: $pretty--color-dark;\n background-color: $pretty--color-dark !important;\n }\n label:before {\n opacity: 0;\n }\n label:after {\n background-color: #fff !important;\n right: 1em;\n }\n }\n}\n",".#{$pretty--class-name}.p-switch.p-slim {\n .state {\n &:before {\n height: 0.1em;\n background: $pretty--color-default !important;\n top: calc(50% - 0.1em);\n }\n }\n\n input:checked ~ .state {\n &:before {\n border-color: $pretty--color-dark;\n background-color: $pretty--color-dark !important;\n }\n }\n}",".#{$pretty--class-name}.p-has-hover {\n input:hover ~ .state:not(.p-is-hover) {\n display: none;\n }\n\n input:hover ~ .state.p-is-hover {\n display: block;\n\n .icon {\n display: block;\n }\n }\n}",".#{$pretty--class-name}.p-has-focus {\n input:focus {\n ~ .state label:before {\n box-shadow: 0px 0px 3px 0px rgb(189, 195, 199);\n }\n }\n}",".#{$pretty--class-name}.p-has-indeterminate {\n input[type='checkbox']:indeterminate ~.state:not(.p-is-indeterminate) {\n display: none;\n }\n\n input[type='checkbox']:indeterminate ~.state.p-is-indeterminate {\n display: block;\n\n .icon {\n display: block;\n opacity: 1;\n }\n }\n}",".#{$pretty--class-name}.p-toggle {\n .state {\n &.p-on {\n opacity: 0;\n display: none;\n }\n\n &.p-off,\n .icon,\n .svg,\n img {\n opacity: 1;\n display: inherit;\n }\n\n &.p-off .icon {\n color: $pretty--color-default;\n }\n }\n\n input:checked ~ .state {\n &.p-on {\n opacity: 1;\n display: inherit;\n }\n\n &.p-off {\n opacity: 0;\n display: none;\n }\n }\n}",".#{$pretty--class-name}.p-plain {\n input:checked ~ .state label,\n &.p-toggle .state label {\n &:before {\n content: none;\n }\n }\n\n &.p-plain .icon {\n transform: scale(1.1);\n }\n}",".#{$pretty--class-name}.p-round {\n .state label {\n &:before,\n &:after {\n border-radius: 100%;\n }\n }\n\n &.p-icon .state .icon {\n border-radius: 100%;\n overflow: hidden;\n\n &:before {\n transform: scale(0.8);\n }\n }\n}\n",".#{$pretty--class-name}.p-curve {\n .state label {\n &:before,\n &:after {\n border-radius: $pretty--curve-radius;\n }\n }\n}",".#{$pretty--class-name}.p-smooth {\n label:before,\n label:after,\n .icon,\n .svg {\n transition: all 0.5s ease;\n }\n\n input:checked + .state {\n label:after {\n transition: all 0.3s ease;\n }\n\n .icon,\n .svg,\n img {\n animation: zoom 0.2s ease;\n }\n }\n\n &.p-default input:checked + .state {\n label:after {\n animation: zoom 0.2s ease;\n }\n }\n\n &.p-plain input:checked + .state {\n label:before {\n content: '';\n transform: scale(0);\n transition: all 0.5s ease;\n }\n }\n}\n\n.#{$pretty--class-name}.p-tada:not(.p-default) {\n input:checked + .state {\n .icon,\n .svg,\n img,\n label:before,\n label:after {\n animation: tada 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1 alternate;\n opacity: 1;\n }\n }\n}\n\n.#{$pretty--class-name}.p-jelly:not(.p-default) {\n input:checked + .state {\n .icon,\n .svg,\n img,\n label:before,\n label:after {\n animation: jelly 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);\n opacity: 1;\n }\n\n label:before {\n border-color: transparent;\n }\n }\n}\n\n.#{$pretty--class-name}.p-rotate:not(.p-default) {\n input:checked ~ .state {\n .icon,\n .svg,\n img,\n label:before,\n label:after {\n animation: rotate 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);\n opacity: 1;\n }\n\n label:before {\n border-color: transparent;\n }\n }\n}\n\n.#{$pretty--class-name}.p-pulse:not(.p-switch) {\n input:checked ~ .state {\n label:before {\n animation: pulse 1s;\n }\n }\n}",".#{$pretty--class-name} {\n input {\n &[disabled] {\n cursor: not-allowed;\n display: none;\n\n & ~ * {\n opacity: .5;\n }\n }\n }\n}\n",".#{$pretty--class-name}.p-locked {\n input {\n display: none;\n cursor: not-allowed;\n }\n}",".#{$pretty--class-name} {\n @each $name, $color in $pretty--colors {\n input:checked ~ .state.p-#{$name},\n &.p-toggle .state.p-#{$name} {\n label:after {\n background-color: $color !important;\n }\n\n .icon,\n .svg {\n color: #fff;\n stroke: #fff;\n }\n }\n\n input:checked ~ .state.p-#{$name}-o,\n &.p-toggle .state.p-#{$name}-o {\n label:before {\n border-color: $color;\n }\n\n label:after {\n background-color: transparent;\n }\n\n .icon,\n .svg,\n svg {\n color: $color;\n stroke: $color;\n }\n }\n\n &.p-default:not(.p-fill) input:checked ~ .state.p-#{$name}-o label {\n &:after {\n background-color: $color !important;\n }\n }\n\n &.p-switch input:checked ~ .state.p-#{$name}:before {\n border-color: $color;\n }\n\n &.p-switch.p-fill input:checked ~ .state.p-#{$name}:before {\n background-color: $color !important;\n }\n\n &.p-switch.p-slim input:checked ~ .state.p-#{$name}:before {\n border-color: darken($color, 20%);\n background-color: darken($color, 20%) !important;\n }\n }\n}",".#{$pretty--class-name}.p-bigger {\n label:before,\n label:after,\n .icon,\n .svg,\n .img {\n font-size: $pretty--2x !important;\n top: calc((0% - (100% - 1em)) - 35%) !important;\n }\n\n label {\n text-indent: 1.7em;\n }\n}","@media print {\n .#{$pretty--class-name} {\n .state:before,\n .state label:before,\n .state label:after,\n .state .icon {\n color-adjust: exact;\n /* stylelint-disable */\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n }\n}"]} \ No newline at end of file diff --git a/dist/maps/pretty-checkbox.css.map b/dist/maps/pretty-checkbox.css.map index 7da9fa2..3814e32 100644 --- a/dist/maps/pretty-checkbox.css.map +++ b/dist/maps/pretty-checkbox.css.map @@ -1 +1 @@ -{"version":3,"sources":["scss/_core.scss","scss/_variables.scss","scss/essentials/_keyframes.scss","pretty-checkbox.css","scss/elements/default/_fill.scss","scss/elements/default/_outline.scss","scss/elements/default/_thick.scss","scss/elements/font-icon/_general.scss","scss/elements/svg/_general.scss","scss/elements/image/_general.scss","scss/elements/switch/_general.scss","scss/elements/switch/_fill.scss","scss/elements/switch/_slim.scss","scss/states/_hover.scss","scss/states/_focus.scss","scss/states/_indeterminate.scss","scss/extras/_toggle.scss","scss/extras/_plain.scss","scss/extras/_round.scss","scss/extras/_curve.scss","scss/extras/_animation.scss","scss/extras/_disabled.scss","scss/extras/_locked.scss","scss/extras/_colors.scss","scss/extras/_bigger.scss","scss/extras/_print.scss"],"names":[],"mappings":"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","file":"../pretty-checkbox.css","sourcesContent":["@charset 'utf-8';\r\n\r\n.#{$pretty--class-name} * {\r\n box-sizing: border-box;\r\n}\r\n\r\n//Throw error on invalid input types.\r\n.#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) {\r\n display: none;\r\n\r\n @if $pretty--debug {\r\n + *:after {\r\n content: $pretty--err-message;\r\n border: 1px solid #dedede;\r\n border-left: 3px solid #d9534f;\r\n padding: 9px;\r\n font-size: 1em;\r\n font-weight: 600;\r\n color: #d9534f;\r\n position: absolute;\r\n z-index: 3;\r\n background: #fbfbfb;\r\n top: 0;\r\n left: 0;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name} {\r\n position: relative;\r\n display: inline-block;\r\n margin-right: 1em;\r\n white-space: nowrap;\r\n line-height: 1;\r\n\r\n input {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n min-width: 1em;\r\n width: 100%;\r\n height: 100%;\r\n z-index: $pretty--z-index-front;\r\n opacity: 0;\r\n margin: 0;\r\n padding: 0;\r\n cursor: pointer;\r\n }\r\n\r\n .state {\r\n label {\r\n position: initial;\r\n display: inline-block;\r\n font-weight: normal;\r\n margin: 0;\r\n text-indent: $pretty--label-text-offset;\r\n min-width: $pretty--box-size;\r\n\r\n &:before,\r\n &:after {\r\n content: '';\r\n width: $pretty--box-size;\r\n height: $pretty--box-size;\r\n display: block;\r\n box-sizing: border-box;\r\n border-radius: 0;\r\n border: 1px solid transparent;\r\n z-index: $pretty--z-index-back;\r\n position: absolute;\r\n left: 0;\r\n top: $pretty-top-offset;\r\n background-color: transparent;\r\n }\r\n\r\n &:before {\r\n border-color: $pretty--color-default;\r\n }\r\n }\r\n\r\n &.p-is-hover,\r\n &.p-is-indeterminate {\r\n display: none;\r\n }\r\n }\r\n}","$pretty--class-name: pretty !default;\r\n\r\n// colors\r\n$pretty--color-default: #bdc3c7 !default;\r\n$pretty--color-primary: #428bca !default;\r\n$pretty--color-info: #5bc0de !default;\r\n$pretty--color-success: #5cb85c !default;\r\n$pretty--color-warning: #f0ad4e !default;\r\n$pretty--color-danger: #d9534f !default;\r\n$pretty--color-dark: #5a656b !default;\r\n\r\n// z-index\r\n$pretty--z-index-back: 0 !default;\r\n$pretty--z-index-between: 1 !default;\r\n$pretty--z-index-front: 2 !default;\r\n\r\n// box\r\n$pretty--curve-radius: 20% !default;\r\n$pretty--box-size: calc(1em + 2px) !default;\r\n\r\n// text\r\n$pretty--label-text-offset: 1.5em !default;\r\n$pretty--label-text-offset-switch: 2.5em !default;\r\n\r\n// scale\r\n$pretty--2x: 1.2em !default;\r\n\r\n// color set\r\n$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), (success, $pretty--color-success), (warning, $pretty--color-warning), (danger, $pretty--color-danger) !default;\r\n\r\n// position\r\n$pretty-top: 8;\r\n$pretty-top-switch: ($pretty-top * 2) * 1%;\r\n$pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%});\r\n$pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch});\r\n\r\n// dev \r\n$pretty--debug: false !default;\r\n$pretty--err-message: 'Error: Invalid input type!' !default;","@keyframes zoom {\r\n 0% {\r\n opacity: 0;\r\n transform: scale(0);\r\n }\r\n}\r\n\r\n@keyframes tada {\r\n 0% {\r\n animation-timing-function: ease-in;\r\n opacity: 0;\r\n transform: scale(7);\r\n }\r\n\r\n 38% {\r\n animation-timing-function: ease-out;\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n\r\n 55% {\r\n animation-timing-function: ease-in;\r\n transform: scale(1.5);\r\n }\r\n\r\n 72% {\r\n animation-timing-function: ease-out;\r\n transform: scale(1);\r\n }\r\n\r\n 81% {\r\n animation-timing-function: ease-in;\r\n transform: scale(1.24);\r\n }\r\n\r\n 89% {\r\n animation-timing-function: ease-out;\r\n transform: scale(1);\r\n }\r\n\r\n 95% {\r\n animation-timing-function: ease-in;\r\n transform: scale(1.04);\r\n }\r\n\r\n 100% {\r\n animation-timing-function: ease-out;\r\n transform: scale(1);\r\n }\r\n}\r\n\r\n@keyframes jelly {\r\n 0% {\r\n transform: scale3d(1, 1, 1);\r\n }\r\n\r\n 30% {\r\n transform: scale3d(.75, 1.25, 1);\r\n }\r\n\r\n 40% {\r\n transform: scale3d(1.25, .75, 1);\r\n }\r\n\r\n 50% {\r\n transform: scale3d(.85, 1.15, 1);\r\n }\r\n\r\n 65% {\r\n transform: scale3d(1.05, .95, 1);\r\n }\r\n\r\n 75% {\r\n transform: scale3d(.95, 1.05, 1);\r\n }\r\n\r\n 100% {\r\n transform: scale3d(1, 1, 1);\r\n }\r\n}\r\n\r\n@keyframes rotate {\r\n 0% {\r\n opacity: 0;\r\n transform: translateZ(-200px) rotate(-45deg);\r\n }\r\n\r\n 100% {\r\n opacity: 1;\r\n transform: translateZ(0) rotate(0);\r\n }\r\n}\r\n\r\n@keyframes pulse {\r\n 0% {\r\n box-shadow: 0px 0px 0px 0px transparentize($pretty--color-default, 0);\r\n }\r\n\r\n 100% {\r\n box-shadow: 0px 0px 0px 1.5em transparentize($pretty--color-default, 1);\r\n }\r\n}",".pretty * {\n box-sizing: border-box;\n}\n\n.pretty input:not([type='checkbox']):not([type='radio']) {\n display: none;\n}\n\n.pretty {\n position: relative;\n display: inline-block;\n margin-right: 1em;\n white-space: nowrap;\n line-height: 1;\n}\n\n.pretty input {\n position: absolute;\n left: 0;\n top: 0;\n min-width: 1em;\n width: 100%;\n height: 100%;\n z-index: 2;\n opacity: 0;\n margin: 0;\n padding: 0;\n cursor: pointer;\n}\n\n.pretty .state label {\n position: initial;\n display: inline-block;\n font-weight: normal;\n margin: 0;\n text-indent: 1.5em;\n min-width: calc(1em + 2px);\n}\n\n.pretty .state label:before, .pretty .state label:after {\n content: '';\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n display: block;\n box-sizing: border-box;\n border-radius: 0;\n border: 1px solid transparent;\n z-index: 0;\n position: absolute;\n left: 0;\n top: calc((0% - (100% - 1em)) - 8%);\n background-color: transparent;\n}\n\n.pretty .state label:before {\n border-color: #bdc3c7;\n}\n\n.pretty .state.p-is-hover, .pretty .state.p-is-indeterminate {\n display: none;\n}\n\n@keyframes zoom {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n}\n\n@keyframes tada {\n 0% {\n animation-timing-function: ease-in;\n opacity: 0;\n transform: scale(7);\n }\n 38% {\n animation-timing-function: ease-out;\n opacity: 1;\n transform: scale(1);\n }\n 55% {\n animation-timing-function: ease-in;\n transform: scale(1.5);\n }\n 72% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n 81% {\n animation-timing-function: ease-in;\n transform: scale(1.24);\n }\n 89% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n 95% {\n animation-timing-function: ease-in;\n transform: scale(1.04);\n }\n 100% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n}\n\n@keyframes jelly {\n 0% {\n transform: scale3d(1, 1, 1);\n }\n 30% {\n transform: scale3d(0.75, 1.25, 1);\n }\n 40% {\n transform: scale3d(1.25, 0.75, 1);\n }\n 50% {\n transform: scale3d(0.85, 1.15, 1);\n }\n 65% {\n transform: scale3d(1.05, 0.95, 1);\n }\n 75% {\n transform: scale3d(0.95, 1.05, 1);\n }\n 100% {\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes rotate {\n 0% {\n opacity: 0;\n transform: translateZ(-200px) rotate(-45deg);\n }\n 100% {\n opacity: 1;\n transform: translateZ(0) rotate(0);\n }\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0px 0px 0px 0px #bdc3c7;\n }\n 100% {\n box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0);\n }\n}\n\n.pretty.p-default.p-fill .state label:after {\n transform: scale(1);\n}\n\n.pretty.p-default .state label:after {\n transform: scale(0.6);\n}\n\n.pretty.p-default input:checked ~ .state label:after {\n background-color: #bdc3c7 !important;\n}\n\n.pretty.p-default.p-thick .state label:before, .pretty.p-default.p-thick .state label:after {\n border-width: calc(1em / 7);\n}\n\n.pretty.p-default.p-thick .state label:after {\n transform: scale(0.4) !important;\n}\n\n.pretty.p-icon .state .icon {\n position: absolute;\n font-size: 1em;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n left: 0;\n z-index: 1;\n text-align: center;\n line-height: normal;\n top: calc((0% - (100% - 1em)) - 8%);\n border: 1px solid transparent;\n opacity: 0;\n}\n\n.pretty.p-icon .state .icon:before {\n margin: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n line-height: 1;\n}\n\n.pretty.p-icon input:checked ~ .state .icon {\n opacity: 1;\n}\n\n.pretty.p-icon input:checked ~ .state label:before {\n border-color: #5a656b;\n}\n\n.pretty.p-svg .state .svg {\n position: absolute;\n font-size: 1em;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n left: 0;\n z-index: 1;\n text-align: center;\n line-height: normal;\n top: calc((0% - (100% - 1em)) - 8%);\n border: 1px solid transparent;\n opacity: 0;\n}\n\n.pretty.p-svg .state svg {\n margin: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n line-height: 1;\n}\n\n.pretty.p-svg input:checked ~ .state .svg {\n opacity: 1;\n}\n\n.pretty.p-image .state img {\n opacity: 0;\n position: absolute;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n top: 0;\n top: calc((0% - (100% - 1em)) - 8%);\n left: 0;\n z-index: 0;\n text-align: center;\n line-height: normal;\n transform: scale(0.8);\n}\n\n.pretty.p-image input:checked ~ .state img {\n opacity: 1;\n}\n\n.pretty.p-switch input {\n min-width: 2em;\n}\n\n.pretty.p-switch .state {\n position: relative;\n}\n\n.pretty.p-switch .state:before {\n content: '';\n border: 1px solid #bdc3c7;\n border-radius: 60px;\n width: 2em;\n box-sizing: unset;\n height: calc(1em + 2px);\n position: absolute;\n top: 0;\n top: calc((0% - (100% - 1em)) - 16%);\n z-index: 0;\n transition: all 0.5s ease;\n}\n\n.pretty.p-switch .state label {\n text-indent: 2.5em;\n}\n\n.pretty.p-switch .state label:before, .pretty.p-switch .state label:after {\n transition: all 0.5s ease;\n border-radius: 100%;\n left: 0;\n border-color: transparent;\n transform: scale(0.8);\n}\n\n.pretty.p-switch .state label:after {\n background-color: #bdc3c7 !important;\n}\n\n.pretty.p-switch input:checked ~ .state:before {\n border-color: #5a656b;\n}\n\n.pretty.p-switch input:checked ~ .state label:before {\n opacity: 0;\n}\n\n.pretty.p-switch input:checked ~ .state label:after {\n background-color: #5a656b !important;\n left: 1em;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state:before {\n border-color: #5a656b;\n background-color: #5a656b !important;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state label:before {\n opacity: 0;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state label:after {\n background-color: #fff !important;\n left: 1em;\n}\n\n.pretty.p-switch.p-slim .state:before {\n height: 0.1em;\n background: #bdc3c7 !important;\n top: calc(50% - 0.1em);\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state:before {\n border-color: #5a656b;\n background-color: #5a656b !important;\n}\n\n.pretty.p-has-hover input:hover ~ .state:not(.p-is-hover) {\n display: none;\n}\n\n.pretty.p-has-hover input:hover ~ .state.p-is-hover {\n display: block;\n}\n\n.pretty.p-has-hover input:hover ~ .state.p-is-hover .icon {\n display: block;\n}\n\n.pretty.p-has-focus input:focus ~ .state label:before {\n box-shadow: 0px 0px 3px 0px #bdc3c7;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) {\n display: none;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate {\n display: block;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate .icon {\n display: block;\n opacity: 1;\n}\n\n.pretty.p-toggle .state.p-on {\n opacity: 0;\n display: none;\n}\n\n.pretty.p-toggle .state.p-off,\n.pretty.p-toggle .state .icon,\n.pretty.p-toggle .state .svg,\n.pretty.p-toggle .state img {\n opacity: 1;\n display: inherit;\n}\n\n.pretty.p-toggle .state.p-off .icon {\n color: #bdc3c7;\n}\n\n.pretty.p-toggle input:checked ~ .state.p-on {\n opacity: 1;\n display: inherit;\n}\n\n.pretty.p-toggle input:checked ~ .state.p-off {\n opacity: 0;\n display: none;\n}\n\n.pretty.p-plain input:checked ~ .state label:before,\n.pretty.p-plain.p-toggle .state label:before {\n content: none;\n}\n\n.pretty.p-plain.p-plain .icon {\n transform: scale(1.1);\n}\n\n.pretty.p-round .state label:before, .pretty.p-round .state label:after {\n border-radius: 100%;\n}\n\n.pretty.p-round.p-icon .state .icon {\n border-radius: 100%;\n overflow: hidden;\n}\n\n.pretty.p-round.p-icon .state .icon:before {\n transform: scale(0.8);\n}\n\n.pretty.p-curve .state label:before, .pretty.p-curve .state label:after {\n border-radius: 20%;\n}\n\n.pretty.p-smooth label:before,\n.pretty.p-smooth label:after,\n.pretty.p-smooth .icon,\n.pretty.p-smooth .svg {\n transition: all 0.5s ease;\n}\n\n.pretty.p-smooth input:checked + .state label:after {\n transition: all 0.3s ease;\n}\n\n.pretty.p-smooth input:checked + .state .icon,\n.pretty.p-smooth input:checked + .state .svg,\n.pretty.p-smooth input:checked + .state img {\n animation: zoom 0.2s ease;\n}\n\n.pretty.p-smooth.p-default input:checked + .state label:after {\n animation: zoom 0.2s ease;\n}\n\n.pretty.p-smooth.p-plain input:checked + .state label:before {\n content: '';\n transform: scale(0);\n transition: all 0.5s ease;\n}\n\n.pretty.p-tada:not(.p-default) input:checked + .state .icon,\n.pretty.p-tada:not(.p-default) input:checked + .state .svg,\n.pretty.p-tada:not(.p-default) input:checked + .state img,\n.pretty.p-tada:not(.p-default) input:checked + .state label:before,\n.pretty.p-tada:not(.p-default) input:checked + .state label:after {\n animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate;\n opacity: 1;\n}\n\n.pretty.p-jelly:not(.p-default) input:checked + .state .icon,\n.pretty.p-jelly:not(.p-default) input:checked + .state .svg,\n.pretty.p-jelly:not(.p-default) input:checked + .state img,\n.pretty.p-jelly:not(.p-default) input:checked + .state label:before,\n.pretty.p-jelly:not(.p-default) input:checked + .state label:after {\n animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 1;\n}\n\n.pretty.p-jelly:not(.p-default) input:checked + .state label:before {\n border-color: transparent;\n}\n\n.pretty.p-rotate:not(.p-default) input:checked ~ .state .icon,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state .svg,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state img,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:after {\n animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 1;\n}\n\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before {\n border-color: transparent;\n}\n\n.pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before {\n animation: pulse 1s;\n}\n\n.pretty input[disabled] {\n cursor: not-allowed;\n display: none;\n}\n\n.pretty input[disabled] ~ * {\n opacity: .5;\n}\n\n.pretty.p-locked input {\n display: none;\n cursor: not-allowed;\n}\n\n.pretty input:checked ~ .state.p-primary label:after,\n.pretty.p-toggle .state.p-primary label:after {\n background-color: #428bca !important;\n}\n\n.pretty input:checked ~ .state.p-primary .icon,\n.pretty input:checked ~ .state.p-primary .svg,\n.pretty.p-toggle .state.p-primary .icon,\n.pretty.p-toggle .state.p-primary .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-primary-o label:before,\n.pretty.p-toggle .state.p-primary-o label:before {\n border-color: #428bca;\n}\n\n.pretty input:checked ~ .state.p-primary-o label:after,\n.pretty.p-toggle .state.p-primary-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-primary-o .icon,\n.pretty input:checked ~ .state.p-primary-o .svg,\n.pretty input:checked ~ .state.p-primary-o svg,\n.pretty.p-toggle .state.p-primary-o .icon,\n.pretty.p-toggle .state.p-primary-o .svg,\n.pretty.p-toggle .state.p-primary-o svg {\n color: #428bca;\n stroke: #428bca;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after {\n background-color: #428bca !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-primary:before {\n border-color: #428bca;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-primary:before {\n background-color: #428bca !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-primary:before {\n border-color: #245682;\n background-color: #245682 !important;\n}\n\n.pretty input:checked ~ .state.p-info label:after,\n.pretty.p-toggle .state.p-info label:after {\n background-color: #5bc0de !important;\n}\n\n.pretty input:checked ~ .state.p-info .icon,\n.pretty input:checked ~ .state.p-info .svg,\n.pretty.p-toggle .state.p-info .icon,\n.pretty.p-toggle .state.p-info .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-info-o label:before,\n.pretty.p-toggle .state.p-info-o label:before {\n border-color: #5bc0de;\n}\n\n.pretty input:checked ~ .state.p-info-o label:after,\n.pretty.p-toggle .state.p-info-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-info-o .icon,\n.pretty input:checked ~ .state.p-info-o .svg,\n.pretty input:checked ~ .state.p-info-o svg,\n.pretty.p-toggle .state.p-info-o .icon,\n.pretty.p-toggle .state.p-info-o .svg,\n.pretty.p-toggle .state.p-info-o svg {\n color: #5bc0de;\n stroke: #5bc0de;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after {\n background-color: #5bc0de !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-info:before {\n border-color: #5bc0de;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-info:before {\n background-color: #5bc0de !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-info:before {\n border-color: #2390b0;\n background-color: #2390b0 !important;\n}\n\n.pretty input:checked ~ .state.p-success label:after,\n.pretty.p-toggle .state.p-success label:after {\n background-color: #5cb85c !important;\n}\n\n.pretty input:checked ~ .state.p-success .icon,\n.pretty input:checked ~ .state.p-success .svg,\n.pretty.p-toggle .state.p-success .icon,\n.pretty.p-toggle .state.p-success .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-success-o label:before,\n.pretty.p-toggle .state.p-success-o label:before {\n border-color: #5cb85c;\n}\n\n.pretty input:checked ~ .state.p-success-o label:after,\n.pretty.p-toggle .state.p-success-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-success-o .icon,\n.pretty input:checked ~ .state.p-success-o .svg,\n.pretty input:checked ~ .state.p-success-o svg,\n.pretty.p-toggle .state.p-success-o .icon,\n.pretty.p-toggle .state.p-success-o .svg,\n.pretty.p-toggle .state.p-success-o svg {\n color: #5cb85c;\n stroke: #5cb85c;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after {\n background-color: #5cb85c !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-success:before {\n border-color: #5cb85c;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-success:before {\n background-color: #5cb85c !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-success:before {\n border-color: #357935;\n background-color: #357935 !important;\n}\n\n.pretty input:checked ~ .state.p-warning label:after,\n.pretty.p-toggle .state.p-warning label:after {\n background-color: #f0ad4e !important;\n}\n\n.pretty input:checked ~ .state.p-warning .icon,\n.pretty input:checked ~ .state.p-warning .svg,\n.pretty.p-toggle .state.p-warning .icon,\n.pretty.p-toggle .state.p-warning .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-warning-o label:before,\n.pretty.p-toggle .state.p-warning-o label:before {\n border-color: #f0ad4e;\n}\n\n.pretty input:checked ~ .state.p-warning-o label:after,\n.pretty.p-toggle .state.p-warning-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-warning-o .icon,\n.pretty input:checked ~ .state.p-warning-o .svg,\n.pretty input:checked ~ .state.p-warning-o svg,\n.pretty.p-toggle .state.p-warning-o .icon,\n.pretty.p-toggle .state.p-warning-o .svg,\n.pretty.p-toggle .state.p-warning-o svg {\n color: #f0ad4e;\n stroke: #f0ad4e;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after {\n background-color: #f0ad4e !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-warning:before {\n border-color: #f0ad4e;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-warning:before {\n background-color: #f0ad4e !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-warning:before {\n border-color: #c77c11;\n background-color: #c77c11 !important;\n}\n\n.pretty input:checked ~ .state.p-danger label:after,\n.pretty.p-toggle .state.p-danger label:after {\n background-color: #d9534f !important;\n}\n\n.pretty input:checked ~ .state.p-danger .icon,\n.pretty input:checked ~ .state.p-danger .svg,\n.pretty.p-toggle .state.p-danger .icon,\n.pretty.p-toggle .state.p-danger .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-danger-o label:before,\n.pretty.p-toggle .state.p-danger-o label:before {\n border-color: #d9534f;\n}\n\n.pretty input:checked ~ .state.p-danger-o label:after,\n.pretty.p-toggle .state.p-danger-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-danger-o .icon,\n.pretty input:checked ~ .state.p-danger-o .svg,\n.pretty input:checked ~ .state.p-danger-o svg,\n.pretty.p-toggle .state.p-danger-o .icon,\n.pretty.p-toggle .state.p-danger-o .svg,\n.pretty.p-toggle .state.p-danger-o svg {\n color: #d9534f;\n stroke: #d9534f;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after {\n background-color: #d9534f !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-danger:before {\n border-color: #d9534f;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-danger:before {\n background-color: #d9534f !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-danger:before {\n border-color: #a02622;\n background-color: #a02622 !important;\n}\n\n.pretty.p-bigger label:before,\n.pretty.p-bigger label:after,\n.pretty.p-bigger .icon,\n.pretty.p-bigger .svg,\n.pretty.p-bigger .img {\n font-size: 1.2em !important;\n top: calc((0% - (100% - 1em)) - 35%) !important;\n}\n\n.pretty.p-bigger label {\n text-indent: 1.7em;\n}\n\n@media print {\n .pretty .state:before,\n .pretty .state label:before,\n .pretty .state label:after,\n .pretty .state .icon {\n color-adjust: exact;\n /* stylelint-disable */\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n}\n",".#{$pretty--class-name}.p-default.p-fill {\r\n .state label {\r\n &:after {\r\n transform: scale(1);\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-default {\r\n .state label {\r\n &:after {\r\n transform: scale(0.6);\r\n }\r\n }\r\n\r\n input:checked ~ .state label {\r\n &:after {\r\n background-color: $pretty--color-default !important;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-default.p-thick {\r\n .state label {\r\n &:before,\r\n &:after {\r\n border-width: calc(1em / 7);\r\n }\r\n\r\n &:after {\r\n transform: scale(0.4) !important;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-icon {\r\n .state {\r\n .icon {\r\n position: absolute;\r\n font-size: 1em;\r\n width: $pretty--box-size;\r\n height: $pretty--box-size;\r\n left: 0;\r\n z-index: $pretty--z-index-between;\r\n text-align: center;\r\n line-height: normal;\r\n top: $pretty-top-offset;\r\n border: 1px solid transparent;\r\n opacity: 0;\r\n }\r\n\r\n .icon:before {\r\n margin: 0;\r\n width: 100%;\r\n height: 100%;\r\n text-align: center;\r\n display: flex;\r\n flex: 1;\r\n justify-content: center;\r\n align-items: center;\r\n line-height: 1;\r\n }\r\n }\r\n\r\n input:checked ~ .state {\r\n .icon {\r\n opacity: 1;\r\n }\r\n\r\n label:before {\r\n border-color: #5a656b;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-svg {\r\n .state {\r\n .svg {\r\n position: absolute;\r\n font-size: 1em;\r\n width: $pretty--box-size;\r\n height: $pretty--box-size;\r\n left: 0;\r\n z-index: $pretty--z-index-between;\r\n text-align: center;\r\n line-height: normal;\r\n top: $pretty-top-offset;\r\n border: 1px solid transparent;\r\n opacity: 0;\r\n }\r\n\r\n svg {\r\n margin: 0;\r\n width: 100%;\r\n height: 100%;\r\n text-align: center;\r\n display: flex;\r\n flex: 1;\r\n justify-content: center;\r\n align-items: center;\r\n line-height: 1;\r\n }\r\n }\r\n\r\n input:checked ~ .state .svg {\r\n opacity: 1;\r\n }\r\n}",".#{$pretty--class-name}.p-image {\r\n .state {\r\n img {\r\n opacity: 0;\r\n position: absolute;\r\n width: $pretty--box-size;\r\n height: $pretty--box-size;\r\n top: 0;\r\n top: $pretty-top-offset;\r\n left: 0;\r\n z-index: $pretty--z-index-back;\r\n text-align: center;\r\n line-height: normal;\r\n transform: scale(0.8);\r\n }\r\n }\r\n\r\n input:checked ~ .state img {\r\n opacity: 1;\r\n }\r\n}",".#{$pretty--class-name}.p-switch {\r\n input{\r\n min-width:2em;\r\n }\r\n .state {\r\n position: relative;\r\n\r\n &:before {\r\n content: '';\r\n border: 1px solid $pretty--color-default;\r\n border-radius: 60px;\r\n width: 2em;\r\n box-sizing: unset;\r\n height: $pretty--box-size;\r\n position: absolute;\r\n top: 0;\r\n top: $pretty-top-offset-switch;\r\n z-index: $pretty--z-index-back;\r\n transition: all 0.5s ease;\r\n }\r\n\r\n label {\r\n text-indent: $pretty--label-text-offset-switch;\r\n\r\n &:before,\r\n &:after {\r\n transition: all 0.5s ease;\r\n border-radius: 100%;\r\n left: 0;\r\n border-color: transparent;\r\n transform: scale(0.8);\r\n }\r\n\r\n &:after {\r\n background-color: $pretty--color-default !important;\r\n }\r\n }\r\n }\r\n\r\n input:checked ~ .state {\r\n &:before {\r\n border-color: $pretty--color-dark;\r\n }\r\n\r\n label:before {\r\n opacity: 0;\r\n }\r\n\r\n label:after {\r\n background-color: $pretty--color-dark !important;\r\n left: 1em;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-switch.p-fill {\r\n input:checked~.state {\r\n &:before {\r\n border-color: $pretty--color-dark;\r\n background-color: $pretty--color-dark !important;\r\n }\r\n label:before {\r\n opacity: 0;\r\n }\r\n label:after {\r\n background-color: #fff !important;\r\n left: 1em;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-switch.p-slim {\r\n .state {\r\n &:before {\r\n height: 0.1em;\r\n background: $pretty--color-default !important;\r\n top: calc(50% - 0.1em);\r\n }\r\n }\r\n\r\n input:checked ~ .state {\r\n &:before {\r\n border-color: $pretty--color-dark;\r\n background-color: $pretty--color-dark !important;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-has-hover {\r\n input:hover ~ .state:not(.p-is-hover) {\r\n display: none;\r\n }\r\n\r\n input:hover ~ .state.p-is-hover {\r\n display: block;\r\n\r\n .icon {\r\n display: block;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-has-focus {\r\n input:focus {\r\n ~ .state label:before {\r\n box-shadow: 0px 0px 3px 0px rgb(189, 195, 199);\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-has-indeterminate {\r\n input[type='checkbox']:indeterminate ~.state:not(.p-is-indeterminate) {\r\n display: none;\r\n }\r\n\r\n input[type='checkbox']:indeterminate ~.state.p-is-indeterminate {\r\n display: block;\r\n\r\n .icon {\r\n display: block;\r\n opacity: 1;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-toggle {\r\n .state {\r\n &.p-on {\r\n opacity: 0;\r\n display: none;\r\n }\r\n\r\n &.p-off,\r\n .icon,\r\n .svg,\r\n img {\r\n opacity: 1;\r\n display: inherit;\r\n }\r\n\r\n &.p-off .icon {\r\n color: $pretty--color-default;\r\n }\r\n }\r\n\r\n input:checked ~ .state {\r\n &.p-on {\r\n opacity: 1;\r\n display: inherit;\r\n }\r\n\r\n &.p-off {\r\n opacity: 0;\r\n display: none;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-plain {\r\n input:checked ~ .state label,\r\n &.p-toggle .state label {\r\n &:before {\r\n content: none;\r\n }\r\n }\r\n\r\n &.p-plain .icon {\r\n transform: scale(1.1);\r\n }\r\n}",".#{$pretty--class-name}.p-round {\r\n .state label {\r\n &:before,\r\n &:after {\r\n border-radius: 100%;\r\n }\r\n }\r\n\r\n &.p-icon .state .icon {\r\n border-radius: 100%;\r\n overflow: hidden;\r\n\r\n &:before {\r\n transform: scale(0.8);\r\n }\r\n }\r\n}\r\n",".#{$pretty--class-name}.p-curve {\r\n .state label {\r\n &:before,\r\n &:after {\r\n border-radius: $pretty--curve-radius;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-smooth {\r\n label:before,\r\n label:after,\r\n .icon,\r\n .svg {\r\n transition: all 0.5s ease;\r\n }\r\n\r\n input:checked + .state {\r\n label:after {\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .icon,\r\n .svg,\r\n img {\r\n animation: zoom 0.2s ease;\r\n }\r\n }\r\n\r\n &.p-default input:checked + .state {\r\n label:after {\r\n animation: zoom 0.2s ease;\r\n }\r\n }\r\n\r\n &.p-plain input:checked + .state {\r\n label:before {\r\n content: '';\r\n transform: scale(0);\r\n transition: all 0.5s ease;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name}.p-tada:not(.p-default) {\r\n input:checked + .state {\r\n .icon,\r\n .svg,\r\n img,\r\n label:before,\r\n label:after {\r\n animation: tada 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1 alternate;\r\n opacity: 1;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name}.p-jelly:not(.p-default) {\r\n input:checked + .state {\r\n .icon,\r\n .svg,\r\n img,\r\n label:before,\r\n label:after {\r\n animation: jelly 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);\r\n opacity: 1;\r\n }\r\n\r\n label:before {\r\n border-color: transparent;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name}.p-rotate:not(.p-default) {\r\n input:checked ~ .state {\r\n .icon,\r\n .svg,\r\n img,\r\n label:before,\r\n label:after {\r\n animation: rotate 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);\r\n opacity: 1;\r\n }\r\n\r\n label:before {\r\n border-color: transparent;\r\n }\r\n }\r\n}\r\n\r\n.#{$pretty--class-name}.p-pulse:not(.p-switch) {\r\n input:checked ~ .state {\r\n label:before {\r\n animation: pulse 1s;\r\n }\r\n }\r\n}",".#{$pretty--class-name} {\r\n input {\r\n &[disabled] {\r\n cursor: not-allowed;\r\n display: none;\r\n\r\n & ~ * {\r\n opacity: .5;\r\n }\r\n }\r\n }\r\n}\r\n",".#{$pretty--class-name}.p-locked {\r\n input {\r\n display: none;\r\n cursor: not-allowed;\r\n }\r\n}",".#{$pretty--class-name} {\r\n @each $name, $color in $pretty--colors {\r\n input:checked ~ .state.p-#{$name},\r\n &.p-toggle .state.p-#{$name} {\r\n label:after {\r\n background-color: $color !important;\r\n }\r\n\r\n .icon,\r\n .svg {\r\n color: #fff;\r\n stroke: #fff;\r\n }\r\n }\r\n\r\n input:checked ~ .state.p-#{$name}-o,\r\n &.p-toggle .state.p-#{$name}-o {\r\n label:before {\r\n border-color: $color;\r\n }\r\n\r\n label:after {\r\n background-color: transparent;\r\n }\r\n\r\n .icon,\r\n .svg,\r\n svg {\r\n color: $color;\r\n stroke: $color;\r\n }\r\n }\r\n\r\n &.p-default:not(.p-fill) input:checked ~ .state.p-#{$name}-o label {\r\n &:after {\r\n background-color: $color !important;\r\n }\r\n }\r\n\r\n &.p-switch input:checked ~ .state.p-#{$name}:before {\r\n border-color: $color;\r\n }\r\n\r\n &.p-switch.p-fill input:checked ~ .state.p-#{$name}:before {\r\n background-color: $color !important;\r\n }\r\n\r\n &.p-switch.p-slim input:checked ~ .state.p-#{$name}:before {\r\n border-color: darken($color, 20%);\r\n background-color: darken($color, 20%) !important;\r\n }\r\n }\r\n}",".#{$pretty--class-name}.p-bigger {\r\n label:before,\r\n label:after,\r\n .icon,\r\n .svg,\r\n .img {\r\n font-size: $pretty--2x !important;\r\n top: calc((0% - (100% - 1em)) - 35%) !important;\r\n }\r\n\r\n label {\r\n text-indent: 1.7em;\r\n }\r\n}","@media print {\r\n .#{$pretty--class-name} {\r\n .state:before,\r\n .state label:before,\r\n .state label:after,\r\n .state .icon {\r\n color-adjust: exact;\r\n /* stylelint-disable */\r\n -webkit-print-color-adjust: exact;\r\n print-color-adjust: exact;\r\n }\r\n }\r\n}"]} \ No newline at end of file +{"version":3,"sources":["scss/_core.scss","scss/_variables.scss","scss/essentials/_keyframes.scss","pretty-checkbox.css","scss/elements/default/_fill.scss","scss/elements/default/_outline.scss","scss/elements/default/_thick.scss","scss/elements/font-icon/_general.scss","scss/elements/svg/_general.scss","scss/elements/image/_general.scss","scss/elements/switch/_general.scss","scss/elements/switch/_fill.scss","scss/elements/switch/_slim.scss","scss/states/_hover.scss","scss/states/_focus.scss","scss/states/_indeterminate.scss","scss/extras/_toggle.scss","scss/extras/_plain.scss","scss/extras/_round.scss","scss/extras/_curve.scss","scss/extras/_animation.scss","scss/extras/_disabled.scss","scss/extras/_locked.scss","scss/extras/_colors.scss","scss/extras/_bigger.scss","scss/extras/_print.scss"],"names":[],"mappings":"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","file":"../pretty-checkbox.css","sourcesContent":["@charset 'utf-8';\n\n.#{$pretty--class-name} * {\n box-sizing: border-box;\n}\n\n//Throw error on invalid input types.\n.#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) {\n display: none;\n\n @if $pretty--debug {\n + *:after {\n content: $pretty--err-message;\n border: 1px solid #dedede;\n border-left: 3px solid #d9534f;\n padding: 9px;\n font-size: 1em;\n font-weight: 600;\n color: #d9534f;\n position: absolute;\n z-index: 3;\n background: #fbfbfb;\n top: 0;\n left: 0;\n }\n }\n}\n\n.#{$pretty--class-name} {\n position: relative;\n display: inline-block;\n margin-right: 1em;\n white-space: nowrap;\n line-height: 1;\n\n input {\n position: absolute;\n left: 0;\n top: 0;\n min-width: 1em;\n width: 100%;\n height: 100%;\n z-index: $pretty--z-index-front;\n opacity: 0;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .state {\n label {\n position: initial;\n display: inline-block;\n font-weight: normal;\n margin: 0;\n text-indent: $pretty--label-text-offset;\n min-width: $pretty--box-size;\n\n &:before,\n &:after {\n content: '';\n width: $pretty--box-size;\n height: $pretty--box-size;\n display: block;\n box-sizing: border-box;\n border-radius: 0;\n border: 1px solid transparent;\n z-index: $pretty--z-index-back;\n position: absolute;\n left: 0;\n top: $pretty-top-offset;\n background-color: transparent;\n }\n\n &:before {\n border-color: $pretty--color-default;\n }\n }\n\n &.p-is-hover,\n &.p-is-indeterminate {\n display: none;\n }\n }\n}","$pretty--class-name: pretty !default;\n\n// colors\n$pretty--color-default: #bdc3c7 !default;\n$pretty--color-primary: #428bca !default;\n$pretty--color-info: #5bc0de !default;\n$pretty--color-success: #5cb85c !default;\n$pretty--color-warning: #f0ad4e !default;\n$pretty--color-danger: #d9534f !default;\n$pretty--color-dark: #5a656b !default;\n\n// z-index\n$pretty--z-index-back: 0 !default;\n$pretty--z-index-between: 1 !default;\n$pretty--z-index-front: 2 !default;\n\n// box\n$pretty--curve-radius: 20% !default;\n$pretty--box-size: calc(1em + 2px) !default;\n\n// text\n$pretty--label-text-offset: 1.5em !default;\n$pretty--label-text-offset-switch: 2.5em !default;\n\n// scale\n$pretty--2x: 1.2em !default;\n\n// color set\n$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), (success, $pretty--color-success), (warning, $pretty--color-warning), (danger, $pretty--color-danger) !default;\n\n// position\n$pretty-top: 8;\n$pretty-top-switch: ($pretty-top * 2) * 1%;\n$pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%});\n$pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch});\n\n// dev \n$pretty--debug: false !default;\n$pretty--err-message: 'Error: Invalid input type!' !default;\n","@keyframes zoom {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n}\n\n@keyframes tada {\n 0% {\n animation-timing-function: ease-in;\n opacity: 0;\n transform: scale(7);\n }\n\n 38% {\n animation-timing-function: ease-out;\n opacity: 1;\n transform: scale(1);\n }\n\n 55% {\n animation-timing-function: ease-in;\n transform: scale(1.5);\n }\n\n 72% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n\n 81% {\n animation-timing-function: ease-in;\n transform: scale(1.24);\n }\n\n 89% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n\n 95% {\n animation-timing-function: ease-in;\n transform: scale(1.04);\n }\n\n 100% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n}\n\n@keyframes jelly {\n 0% {\n transform: scale3d(1, 1, 1);\n }\n\n 30% {\n transform: scale3d(.75, 1.25, 1);\n }\n\n 40% {\n transform: scale3d(1.25, .75, 1);\n }\n\n 50% {\n transform: scale3d(.85, 1.15, 1);\n }\n\n 65% {\n transform: scale3d(1.05, .95, 1);\n }\n\n 75% {\n transform: scale3d(.95, 1.05, 1);\n }\n\n 100% {\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes rotate {\n 0% {\n opacity: 0;\n transform: translateZ(-200px) rotate(-45deg);\n }\n\n 100% {\n opacity: 1;\n transform: translateZ(0) rotate(0);\n }\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0px 0px 0px 0px transparentize($pretty--color-default, 0);\n }\n\n 100% {\n box-shadow: 0px 0px 0px 1.5em transparentize($pretty--color-default, 1);\n }\n}",".pretty * {\n box-sizing: border-box;\n}\n\n.pretty input:not([type='checkbox']):not([type='radio']) {\n display: none;\n}\n\n.pretty {\n position: relative;\n display: inline-block;\n margin-right: 1em;\n white-space: nowrap;\n line-height: 1;\n}\n\n.pretty input {\n position: absolute;\n left: 0;\n top: 0;\n min-width: 1em;\n width: 100%;\n height: 100%;\n z-index: 2;\n opacity: 0;\n margin: 0;\n padding: 0;\n cursor: pointer;\n}\n\n.pretty .state label {\n position: initial;\n display: inline-block;\n font-weight: normal;\n margin: 0;\n text-indent: 1.5em;\n min-width: calc(1em + 2px);\n}\n\n.pretty .state label:before, .pretty .state label:after {\n content: '';\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n display: block;\n box-sizing: border-box;\n border-radius: 0;\n border: 1px solid transparent;\n z-index: 0;\n position: absolute;\n left: 0;\n top: calc((0% - (100% - 1em)) - 8%);\n background-color: transparent;\n}\n\n.pretty .state label:before {\n border-color: #bdc3c7;\n}\n\n.pretty .state.p-is-hover, .pretty .state.p-is-indeterminate {\n display: none;\n}\n\n@keyframes zoom {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n}\n\n@keyframes tada {\n 0% {\n animation-timing-function: ease-in;\n opacity: 0;\n transform: scale(7);\n }\n 38% {\n animation-timing-function: ease-out;\n opacity: 1;\n transform: scale(1);\n }\n 55% {\n animation-timing-function: ease-in;\n transform: scale(1.5);\n }\n 72% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n 81% {\n animation-timing-function: ease-in;\n transform: scale(1.24);\n }\n 89% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n 95% {\n animation-timing-function: ease-in;\n transform: scale(1.04);\n }\n 100% {\n animation-timing-function: ease-out;\n transform: scale(1);\n }\n}\n\n@keyframes jelly {\n 0% {\n transform: scale3d(1, 1, 1);\n }\n 30% {\n transform: scale3d(0.75, 1.25, 1);\n }\n 40% {\n transform: scale3d(1.25, 0.75, 1);\n }\n 50% {\n transform: scale3d(0.85, 1.15, 1);\n }\n 65% {\n transform: scale3d(1.05, 0.95, 1);\n }\n 75% {\n transform: scale3d(0.95, 1.05, 1);\n }\n 100% {\n transform: scale3d(1, 1, 1);\n }\n}\n\n@keyframes rotate {\n 0% {\n opacity: 0;\n transform: translateZ(-200px) rotate(-45deg);\n }\n 100% {\n opacity: 1;\n transform: translateZ(0) rotate(0);\n }\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0px 0px 0px 0px #bdc3c7;\n }\n 100% {\n box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0);\n }\n}\n\n.pretty.p-default.p-fill .state label:after {\n transform: scale(1);\n}\n\n.pretty.p-default .state label:after {\n transform: scale(0.6);\n}\n\n.pretty.p-default input:checked ~ .state label:after {\n background-color: #bdc3c7 !important;\n}\n\n.pretty.p-default.p-thick .state label:before, .pretty.p-default.p-thick .state label:after {\n border-width: calc(1em / 7);\n}\n\n.pretty.p-default.p-thick .state label:after {\n transform: scale(0.4) !important;\n}\n\n.pretty.p-icon .state .icon {\n position: absolute;\n font-size: 1em;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n left: 0;\n z-index: 1;\n text-align: center;\n line-height: normal;\n top: calc((0% - (100% - 1em)) - 8%);\n border: 1px solid transparent;\n opacity: 0;\n}\n\n.pretty.p-icon .state .icon:before {\n margin: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n line-height: 1;\n}\n\n.pretty.p-icon input:checked ~ .state .icon {\n opacity: 1;\n}\n\n.pretty.p-icon input:checked ~ .state label:before {\n border-color: #5a656b;\n}\n\n.pretty.p-svg .state .svg {\n position: absolute;\n font-size: 1em;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n left: 0;\n z-index: 1;\n text-align: center;\n line-height: normal;\n top: calc((0% - (100% - 1em)) - 8%);\n border: 1px solid transparent;\n opacity: 0;\n}\n\n.pretty.p-svg .state svg {\n margin: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n line-height: 1;\n}\n\n.pretty.p-svg input:checked ~ .state .svg {\n opacity: 1;\n}\n\n.pretty.p-image .state img {\n opacity: 0;\n position: absolute;\n width: calc(1em + 2px);\n height: calc(1em + 2px);\n top: 0;\n top: calc((0% - (100% - 1em)) - 8%);\n left: 0;\n z-index: 0;\n text-align: center;\n line-height: normal;\n transform: scale(0.8);\n}\n\n.pretty.p-image input:checked ~ .state img {\n opacity: 1;\n}\n\n.pretty.p-switch input {\n min-width: 2em;\n}\n\n.pretty.p-switch .state {\n position: relative;\n}\n\n.pretty.p-switch .state:before {\n content: '';\n border: 1px solid #bdc3c7;\n border-radius: 60px;\n width: 2em;\n box-sizing: unset;\n height: calc(1em + 2px);\n position: absolute;\n top: 0;\n top: calc((0% - (100% - 1em)) - 16%);\n z-index: 0;\n transition: all 0.5s ease;\n}\n\n.pretty.p-switch .state label {\n text-indent: 2.5em;\n}\n\n.pretty.p-switch .state label:before, .pretty.p-switch .state label:after {\n transition: all 0.5s ease;\n border-radius: 100%;\n left: 0;\n border-color: transparent;\n transform: scale(0.8);\n}\n\n.pretty.p-switch .state label:after {\n background-color: #bdc3c7 !important;\n}\n\n.pretty.p-switch input:checked ~ .state:before {\n border-color: #5a656b;\n}\n\n.pretty.p-switch input:checked ~ .state label:before {\n opacity: 0;\n}\n\n.pretty.p-switch input:checked ~ .state label:after {\n background-color: #5a656b !important;\n left: 1em;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state:before {\n border-color: #5a656b;\n background-color: #5a656b !important;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state label:before {\n opacity: 0;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state label:after {\n background-color: #fff !important;\n left: 1em;\n}\n\n.pretty.p-switch.p-slim .state:before {\n height: 0.1em;\n background: #bdc3c7 !important;\n top: calc(50% - 0.1em);\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state:before {\n border-color: #5a656b;\n background-color: #5a656b !important;\n}\n\n.pretty.p-has-hover input:hover ~ .state:not(.p-is-hover) {\n display: none;\n}\n\n.pretty.p-has-hover input:hover ~ .state.p-is-hover {\n display: block;\n}\n\n.pretty.p-has-hover input:hover ~ .state.p-is-hover .icon {\n display: block;\n}\n\n.pretty.p-has-focus input:focus ~ .state label:before {\n box-shadow: 0px 0px 3px 0px #bdc3c7;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) {\n display: none;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate {\n display: block;\n}\n\n.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate .icon {\n display: block;\n opacity: 1;\n}\n\n.pretty.p-toggle .state.p-on {\n opacity: 0;\n display: none;\n}\n\n.pretty.p-toggle .state.p-off,\n.pretty.p-toggle .state .icon,\n.pretty.p-toggle .state .svg,\n.pretty.p-toggle .state img {\n opacity: 1;\n display: inherit;\n}\n\n.pretty.p-toggle .state.p-off .icon {\n color: #bdc3c7;\n}\n\n.pretty.p-toggle input:checked ~ .state.p-on {\n opacity: 1;\n display: inherit;\n}\n\n.pretty.p-toggle input:checked ~ .state.p-off {\n opacity: 0;\n display: none;\n}\n\n.pretty.p-plain input:checked ~ .state label:before,\n.pretty.p-plain.p-toggle .state label:before {\n content: none;\n}\n\n.pretty.p-plain.p-plain .icon {\n transform: scale(1.1);\n}\n\n.pretty.p-round .state label:before, .pretty.p-round .state label:after {\n border-radius: 100%;\n}\n\n.pretty.p-round.p-icon .state .icon {\n border-radius: 100%;\n overflow: hidden;\n}\n\n.pretty.p-round.p-icon .state .icon:before {\n transform: scale(0.8);\n}\n\n.pretty.p-curve .state label:before, .pretty.p-curve .state label:after {\n border-radius: 20%;\n}\n\n.pretty.p-smooth label:before,\n.pretty.p-smooth label:after,\n.pretty.p-smooth .icon,\n.pretty.p-smooth .svg {\n transition: all 0.5s ease;\n}\n\n.pretty.p-smooth input:checked + .state label:after {\n transition: all 0.3s ease;\n}\n\n.pretty.p-smooth input:checked + .state .icon,\n.pretty.p-smooth input:checked + .state .svg,\n.pretty.p-smooth input:checked + .state img {\n animation: zoom 0.2s ease;\n}\n\n.pretty.p-smooth.p-default input:checked + .state label:after {\n animation: zoom 0.2s ease;\n}\n\n.pretty.p-smooth.p-plain input:checked + .state label:before {\n content: '';\n transform: scale(0);\n transition: all 0.5s ease;\n}\n\n.pretty.p-tada:not(.p-default) input:checked + .state .icon,\n.pretty.p-tada:not(.p-default) input:checked + .state .svg,\n.pretty.p-tada:not(.p-default) input:checked + .state img,\n.pretty.p-tada:not(.p-default) input:checked + .state label:before,\n.pretty.p-tada:not(.p-default) input:checked + .state label:after {\n animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate;\n opacity: 1;\n}\n\n.pretty.p-jelly:not(.p-default) input:checked + .state .icon,\n.pretty.p-jelly:not(.p-default) input:checked + .state .svg,\n.pretty.p-jelly:not(.p-default) input:checked + .state img,\n.pretty.p-jelly:not(.p-default) input:checked + .state label:before,\n.pretty.p-jelly:not(.p-default) input:checked + .state label:after {\n animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 1;\n}\n\n.pretty.p-jelly:not(.p-default) input:checked + .state label:before {\n border-color: transparent;\n}\n\n.pretty.p-rotate:not(.p-default) input:checked ~ .state .icon,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state .svg,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state img,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before,\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:after {\n animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n opacity: 1;\n}\n\n.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before {\n border-color: transparent;\n}\n\n.pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before {\n animation: pulse 1s;\n}\n\n.pretty input[disabled] {\n cursor: not-allowed;\n display: none;\n}\n\n.pretty input[disabled] ~ * {\n opacity: .5;\n}\n\n.pretty.p-locked input {\n display: none;\n cursor: not-allowed;\n}\n\n.pretty input:checked ~ .state.p-primary label:after,\n.pretty.p-toggle .state.p-primary label:after {\n background-color: #428bca !important;\n}\n\n.pretty input:checked ~ .state.p-primary .icon,\n.pretty input:checked ~ .state.p-primary .svg,\n.pretty.p-toggle .state.p-primary .icon,\n.pretty.p-toggle .state.p-primary .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-primary-o label:before,\n.pretty.p-toggle .state.p-primary-o label:before {\n border-color: #428bca;\n}\n\n.pretty input:checked ~ .state.p-primary-o label:after,\n.pretty.p-toggle .state.p-primary-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-primary-o .icon,\n.pretty input:checked ~ .state.p-primary-o .svg,\n.pretty input:checked ~ .state.p-primary-o svg,\n.pretty.p-toggle .state.p-primary-o .icon,\n.pretty.p-toggle .state.p-primary-o .svg,\n.pretty.p-toggle .state.p-primary-o svg {\n color: #428bca;\n stroke: #428bca;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after {\n background-color: #428bca !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-primary:before {\n border-color: #428bca;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-primary:before {\n background-color: #428bca !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-primary:before {\n border-color: #245682;\n background-color: #245682 !important;\n}\n\n.pretty input:checked ~ .state.p-info label:after,\n.pretty.p-toggle .state.p-info label:after {\n background-color: #5bc0de !important;\n}\n\n.pretty input:checked ~ .state.p-info .icon,\n.pretty input:checked ~ .state.p-info .svg,\n.pretty.p-toggle .state.p-info .icon,\n.pretty.p-toggle .state.p-info .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-info-o label:before,\n.pretty.p-toggle .state.p-info-o label:before {\n border-color: #5bc0de;\n}\n\n.pretty input:checked ~ .state.p-info-o label:after,\n.pretty.p-toggle .state.p-info-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-info-o .icon,\n.pretty input:checked ~ .state.p-info-o .svg,\n.pretty input:checked ~ .state.p-info-o svg,\n.pretty.p-toggle .state.p-info-o .icon,\n.pretty.p-toggle .state.p-info-o .svg,\n.pretty.p-toggle .state.p-info-o svg {\n color: #5bc0de;\n stroke: #5bc0de;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after {\n background-color: #5bc0de !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-info:before {\n border-color: #5bc0de;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-info:before {\n background-color: #5bc0de !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-info:before {\n border-color: #2390b0;\n background-color: #2390b0 !important;\n}\n\n.pretty input:checked ~ .state.p-success label:after,\n.pretty.p-toggle .state.p-success label:after {\n background-color: #5cb85c !important;\n}\n\n.pretty input:checked ~ .state.p-success .icon,\n.pretty input:checked ~ .state.p-success .svg,\n.pretty.p-toggle .state.p-success .icon,\n.pretty.p-toggle .state.p-success .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-success-o label:before,\n.pretty.p-toggle .state.p-success-o label:before {\n border-color: #5cb85c;\n}\n\n.pretty input:checked ~ .state.p-success-o label:after,\n.pretty.p-toggle .state.p-success-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-success-o .icon,\n.pretty input:checked ~ .state.p-success-o .svg,\n.pretty input:checked ~ .state.p-success-o svg,\n.pretty.p-toggle .state.p-success-o .icon,\n.pretty.p-toggle .state.p-success-o .svg,\n.pretty.p-toggle .state.p-success-o svg {\n color: #5cb85c;\n stroke: #5cb85c;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after {\n background-color: #5cb85c !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-success:before {\n border-color: #5cb85c;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-success:before {\n background-color: #5cb85c !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-success:before {\n border-color: #357935;\n background-color: #357935 !important;\n}\n\n.pretty input:checked ~ .state.p-warning label:after,\n.pretty.p-toggle .state.p-warning label:after {\n background-color: #f0ad4e !important;\n}\n\n.pretty input:checked ~ .state.p-warning .icon,\n.pretty input:checked ~ .state.p-warning .svg,\n.pretty.p-toggle .state.p-warning .icon,\n.pretty.p-toggle .state.p-warning .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-warning-o label:before,\n.pretty.p-toggle .state.p-warning-o label:before {\n border-color: #f0ad4e;\n}\n\n.pretty input:checked ~ .state.p-warning-o label:after,\n.pretty.p-toggle .state.p-warning-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-warning-o .icon,\n.pretty input:checked ~ .state.p-warning-o .svg,\n.pretty input:checked ~ .state.p-warning-o svg,\n.pretty.p-toggle .state.p-warning-o .icon,\n.pretty.p-toggle .state.p-warning-o .svg,\n.pretty.p-toggle .state.p-warning-o svg {\n color: #f0ad4e;\n stroke: #f0ad4e;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after {\n background-color: #f0ad4e !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-warning:before {\n border-color: #f0ad4e;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-warning:before {\n background-color: #f0ad4e !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-warning:before {\n border-color: #c77c11;\n background-color: #c77c11 !important;\n}\n\n.pretty input:checked ~ .state.p-danger label:after,\n.pretty.p-toggle .state.p-danger label:after {\n background-color: #d9534f !important;\n}\n\n.pretty input:checked ~ .state.p-danger .icon,\n.pretty input:checked ~ .state.p-danger .svg,\n.pretty.p-toggle .state.p-danger .icon,\n.pretty.p-toggle .state.p-danger .svg {\n color: #fff;\n stroke: #fff;\n}\n\n.pretty input:checked ~ .state.p-danger-o label:before,\n.pretty.p-toggle .state.p-danger-o label:before {\n border-color: #d9534f;\n}\n\n.pretty input:checked ~ .state.p-danger-o label:after,\n.pretty.p-toggle .state.p-danger-o label:after {\n background-color: transparent;\n}\n\n.pretty input:checked ~ .state.p-danger-o .icon,\n.pretty input:checked ~ .state.p-danger-o .svg,\n.pretty input:checked ~ .state.p-danger-o svg,\n.pretty.p-toggle .state.p-danger-o .icon,\n.pretty.p-toggle .state.p-danger-o .svg,\n.pretty.p-toggle .state.p-danger-o svg {\n color: #d9534f;\n stroke: #d9534f;\n}\n\n.pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after {\n background-color: #d9534f !important;\n}\n\n.pretty.p-switch input:checked ~ .state.p-danger:before {\n border-color: #d9534f;\n}\n\n.pretty.p-switch.p-fill input:checked ~ .state.p-danger:before {\n background-color: #d9534f !important;\n}\n\n.pretty.p-switch.p-slim input:checked ~ .state.p-danger:before {\n border-color: #a02622;\n background-color: #a02622 !important;\n}\n\n.pretty.p-bigger label:before,\n.pretty.p-bigger label:after,\n.pretty.p-bigger .icon,\n.pretty.p-bigger .svg,\n.pretty.p-bigger .img {\n font-size: 1.2em !important;\n top: calc((0% - (100% - 1em)) - 35%) !important;\n}\n\n.pretty.p-bigger label {\n text-indent: 1.7em;\n}\n\n@media print {\n .pretty .state:before,\n .pretty .state label:before,\n .pretty .state label:after,\n .pretty .state .icon {\n color-adjust: exact;\n /* stylelint-disable */\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n}\n",".#{$pretty--class-name}.p-default.p-fill {\n .state label {\n &:after {\n transform: scale(1);\n }\n }\n}",".#{$pretty--class-name}.p-default {\n .state label {\n &:after {\n transform: scale(0.6);\n }\n }\n\n input:checked ~ .state label {\n &:after {\n background-color: $pretty--color-default !important;\n }\n }\n}",".#{$pretty--class-name}.p-default.p-thick {\n .state label {\n &:before,\n &:after {\n border-width: calc(1em / 7);\n }\n\n &:after {\n transform: scale(0.4) !important;\n }\n }\n}",".#{$pretty--class-name}.p-icon {\n .state {\n .icon {\n position: absolute;\n font-size: 1em;\n width: $pretty--box-size;\n height: $pretty--box-size;\n left: 0;\n z-index: $pretty--z-index-between;\n text-align: center;\n line-height: normal;\n top: $pretty-top-offset;\n border: 1px solid transparent;\n opacity: 0;\n }\n\n .icon:before {\n margin: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n line-height: 1;\n }\n }\n\n input:checked ~ .state {\n .icon {\n opacity: 1;\n }\n\n label:before {\n border-color: #5a656b;\n }\n }\n}",".#{$pretty--class-name}.p-svg {\n .state {\n .svg {\n position: absolute;\n font-size: 1em;\n width: $pretty--box-size;\n height: $pretty--box-size;\n left: 0;\n z-index: $pretty--z-index-between;\n text-align: center;\n line-height: normal;\n top: $pretty-top-offset;\n border: 1px solid transparent;\n opacity: 0;\n }\n\n svg {\n margin: 0;\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex: 1;\n justify-content: center;\n align-items: center;\n line-height: 1;\n }\n }\n\n input:checked ~ .state .svg {\n opacity: 1;\n }\n}",".#{$pretty--class-name}.p-image {\n .state {\n img {\n opacity: 0;\n position: absolute;\n width: $pretty--box-size;\n height: $pretty--box-size;\n top: 0;\n top: $pretty-top-offset;\n left: 0;\n z-index: $pretty--z-index-back;\n text-align: center;\n line-height: normal;\n transform: scale(0.8);\n }\n }\n\n input:checked ~ .state img {\n opacity: 1;\n }\n}",".#{$pretty--class-name}.p-switch {\n input{\n min-width:2em;\n }\n .state {\n position: relative;\n\n &:before {\n content: '';\n border: 1px solid $pretty--color-default;\n border-radius: 60px;\n width: 2em;\n box-sizing: unset;\n height: $pretty--box-size;\n position: absolute;\n top: 0;\n top: $pretty-top-offset-switch;\n z-index: $pretty--z-index-back;\n transition: all 0.5s ease;\n }\n\n label {\n text-indent: $pretty--label-text-offset-switch;\n\n &:before,\n &:after {\n transition: all 0.5s ease;\n border-radius: 100%;\n left: 0;\n border-color: transparent;\n transform: scale(0.8);\n }\n\n &:after {\n background-color: $pretty--color-default !important;\n }\n }\n }\n\n input:checked ~ .state {\n &:before {\n border-color: $pretty--color-dark;\n }\n\n label:before {\n opacity: 0;\n }\n\n label:after {\n background-color: $pretty--color-dark !important;\n left: 1em;\n }\n }\n}",".#{$pretty--class-name}.p-switch.p-fill {\n input:checked~.state {\n &:before {\n border-color: $pretty--color-dark;\n background-color: $pretty--color-dark !important;\n }\n label:before {\n opacity: 0;\n }\n label:after {\n background-color: #fff !important;\n left: 1em;\n }\n }\n}",".#{$pretty--class-name}.p-switch.p-slim {\n .state {\n &:before {\n height: 0.1em;\n background: $pretty--color-default !important;\n top: calc(50% - 0.1em);\n }\n }\n\n input:checked ~ .state {\n &:before {\n border-color: $pretty--color-dark;\n background-color: $pretty--color-dark !important;\n }\n }\n}",".#{$pretty--class-name}.p-has-hover {\n input:hover ~ .state:not(.p-is-hover) {\n display: none;\n }\n\n input:hover ~ .state.p-is-hover {\n display: block;\n\n .icon {\n display: block;\n }\n }\n}",".#{$pretty--class-name}.p-has-focus {\n input:focus {\n ~ .state label:before {\n box-shadow: 0px 0px 3px 0px rgb(189, 195, 199);\n }\n }\n}",".#{$pretty--class-name}.p-has-indeterminate {\n input[type='checkbox']:indeterminate ~.state:not(.p-is-indeterminate) {\n display: none;\n }\n\n input[type='checkbox']:indeterminate ~.state.p-is-indeterminate {\n display: block;\n\n .icon {\n display: block;\n opacity: 1;\n }\n }\n}",".#{$pretty--class-name}.p-toggle {\n .state {\n &.p-on {\n opacity: 0;\n display: none;\n }\n\n &.p-off,\n .icon,\n .svg,\n img {\n opacity: 1;\n display: inherit;\n }\n\n &.p-off .icon {\n color: $pretty--color-default;\n }\n }\n\n input:checked ~ .state {\n &.p-on {\n opacity: 1;\n display: inherit;\n }\n\n &.p-off {\n opacity: 0;\n display: none;\n }\n }\n}",".#{$pretty--class-name}.p-plain {\n input:checked ~ .state label,\n &.p-toggle .state label {\n &:before {\n content: none;\n }\n }\n\n &.p-plain .icon {\n transform: scale(1.1);\n }\n}",".#{$pretty--class-name}.p-round {\n .state label {\n &:before,\n &:after {\n border-radius: 100%;\n }\n }\n\n &.p-icon .state .icon {\n border-radius: 100%;\n overflow: hidden;\n\n &:before {\n transform: scale(0.8);\n }\n }\n}\n",".#{$pretty--class-name}.p-curve {\n .state label {\n &:before,\n &:after {\n border-radius: $pretty--curve-radius;\n }\n }\n}",".#{$pretty--class-name}.p-smooth {\n label:before,\n label:after,\n .icon,\n .svg {\n transition: all 0.5s ease;\n }\n\n input:checked + .state {\n label:after {\n transition: all 0.3s ease;\n }\n\n .icon,\n .svg,\n img {\n animation: zoom 0.2s ease;\n }\n }\n\n &.p-default input:checked + .state {\n label:after {\n animation: zoom 0.2s ease;\n }\n }\n\n &.p-plain input:checked + .state {\n label:before {\n content: '';\n transform: scale(0);\n transition: all 0.5s ease;\n }\n }\n}\n\n.#{$pretty--class-name}.p-tada:not(.p-default) {\n input:checked + .state {\n .icon,\n .svg,\n img,\n label:before,\n label:after {\n animation: tada 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1 alternate;\n opacity: 1;\n }\n }\n}\n\n.#{$pretty--class-name}.p-jelly:not(.p-default) {\n input:checked + .state {\n .icon,\n .svg,\n img,\n label:before,\n label:after {\n animation: jelly 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);\n opacity: 1;\n }\n\n label:before {\n border-color: transparent;\n }\n }\n}\n\n.#{$pretty--class-name}.p-rotate:not(.p-default) {\n input:checked ~ .state {\n .icon,\n .svg,\n img,\n label:before,\n label:after {\n animation: rotate 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);\n opacity: 1;\n }\n\n label:before {\n border-color: transparent;\n }\n }\n}\n\n.#{$pretty--class-name}.p-pulse:not(.p-switch) {\n input:checked ~ .state {\n label:before {\n animation: pulse 1s;\n }\n }\n}",".#{$pretty--class-name} {\n input {\n &[disabled] {\n cursor: not-allowed;\n display: none;\n\n & ~ * {\n opacity: .5;\n }\n }\n }\n}\n",".#{$pretty--class-name}.p-locked {\n input {\n display: none;\n cursor: not-allowed;\n }\n}",".#{$pretty--class-name} {\n @each $name, $color in $pretty--colors {\n input:checked ~ .state.p-#{$name},\n &.p-toggle .state.p-#{$name} {\n label:after {\n background-color: $color !important;\n }\n\n .icon,\n .svg {\n color: #fff;\n stroke: #fff;\n }\n }\n\n input:checked ~ .state.p-#{$name}-o,\n &.p-toggle .state.p-#{$name}-o {\n label:before {\n border-color: $color;\n }\n\n label:after {\n background-color: transparent;\n }\n\n .icon,\n .svg,\n svg {\n color: $color;\n stroke: $color;\n }\n }\n\n &.p-default:not(.p-fill) input:checked ~ .state.p-#{$name}-o label {\n &:after {\n background-color: $color !important;\n }\n }\n\n &.p-switch input:checked ~ .state.p-#{$name}:before {\n border-color: $color;\n }\n\n &.p-switch.p-fill input:checked ~ .state.p-#{$name}:before {\n background-color: $color !important;\n }\n\n &.p-switch.p-slim input:checked ~ .state.p-#{$name}:before {\n border-color: darken($color, 20%);\n background-color: darken($color, 20%) !important;\n }\n }\n}",".#{$pretty--class-name}.p-bigger {\n label:before,\n label:after,\n .icon,\n .svg,\n .img {\n font-size: $pretty--2x !important;\n top: calc((0% - (100% - 1em)) - 35%) !important;\n }\n\n label {\n text-indent: 1.7em;\n }\n}","@media print {\n .#{$pretty--class-name} {\n .state:before,\n .state label:before,\n .state label:after,\n .state .icon {\n color-adjust: exact;\n /* stylelint-disable */\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n }\n}"]} \ No newline at end of file diff --git a/dist/pretty-checkbox-rtl.css b/dist/pretty-checkbox-rtl.css new file mode 100644 index 0000000..2038b04 --- /dev/null +++ b/dist/pretty-checkbox-rtl.css @@ -0,0 +1,812 @@ +/** + * pretty-checkbox.css + * + * A pure CSS library to beautify checkbox and radio buttons + * + * Source: https://github.com/lokesh-coder/pretty-checkbox + * Demo: https://lokesh-coder.github.io/pretty-checkbox + * + * Copyright (c) 2020 Lokesh rajendran + */ + +.pretty * { + box-sizing: border-box; +} + +.pretty input:not([type='checkbox']):not([type='radio']) { + display: none; +} + +.pretty { + position: relative; + display: inline-block; + margin-left: 1em; + white-space: nowrap; + line-height: 1; +} + +.pretty input { + position: absolute; + right: 0; + top: 0; + min-width: 1em; + width: 100%; + height: 100%; + z-index: 2; + opacity: 0; + margin: 0; + padding: 0; + cursor: pointer; +} + +.pretty .state label { + position: initial; + display: inline-block; + font-weight: normal; + margin: 0; + text-indent: 1.5em; + min-width: calc(1em + 2px); +} + +.pretty .state label:before, +.pretty .state label:after { + content: ''; + width: calc(1em + 2px); + height: calc(1em + 2px); + display: block; + box-sizing: border-box; + border-radius: 0; + border: 1px solid transparent; + z-index: 0; + position: absolute; + right: 0; + top: calc((0% - (100% - 1em)) - 8%); + background-color: transparent; +} + +.pretty .state label:before { + border-color: #bdc3c7; +} + +.pretty .state.p-is-hover, +.pretty .state.p-is-indeterminate { + display: none; +} + +@keyframes zoom { + 0% { + opacity: 0; + transform: scale(0); + } +} + +@keyframes tada { + 0% { + animation-timing-function: ease-in; + opacity: 0; + transform: scale(7); + } + + 38% { + animation-timing-function: ease-out; + opacity: 1; + transform: scale(1); + } + + 55% { + animation-timing-function: ease-in; + transform: scale(1.5); + } + + 72% { + animation-timing-function: ease-out; + transform: scale(1); + } + + 81% { + animation-timing-function: ease-in; + transform: scale(1.24); + } + + 89% { + animation-timing-function: ease-out; + transform: scale(1); + } + + 95% { + animation-timing-function: ease-in; + transform: scale(1.04); + } + + 100% { + animation-timing-function: ease-out; + transform: scale(1); + } +} + +@keyframes jelly { + 0% { + transform: scale3d(1, 1, 1); + } + + 30% { + transform: scale3d(0.75, 1.25, 1); + } + + 40% { + transform: scale3d(1.25, 0.75, 1); + } + + 50% { + transform: scale3d(0.85, 1.15, 1); + } + + 65% { + transform: scale3d(1.05, 0.95, 1); + } + + 75% { + transform: scale3d(0.95, 1.05, 1); + } + + 100% { + transform: scale3d(1, 1, 1); + } +} + +@keyframes rotate { + 0% { + opacity: 0; + transform: translateZ(-200px) rotate(-45deg); + } + + 100% { + opacity: 1; + transform: translateZ(0) rotate(0); + } +} + +@keyframes pulse { + 0% { + box-shadow: 0px 0px 0px 0px #bdc3c7; + } + + 100% { + box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); + } +} + +.pretty.p-default.p-fill .state label:after { + -ms-transform: scale(1); + transform: scale(1); +} + +.pretty.p-default .state label:after { + -ms-transform: scale(0.6); + transform: scale(0.6); +} + +.pretty.p-default input:checked ~ .state label:after { + background-color: #bdc3c7 !important; +} + +.pretty.p-default.p-thick .state label:before, +.pretty.p-default.p-thick .state label:after { + border-width: calc(1em / 7); +} + +.pretty.p-default.p-thick .state label:after { + -ms-transform: scale(0.4) !important; + transform: scale(0.4) !important; +} + +.pretty.p-icon .state .icon { + position: absolute; + font-size: 1em; + width: calc(1em + 2px); + height: calc(1em + 2px); + right: 0; + z-index: 1; + text-align: center; + line-height: normal; + top: calc((0% - (100% - 1em)) - 8%); + border: 1px solid transparent; + opacity: 0; +} + +.pretty.p-icon .state .icon:before { + margin: 0; + width: 100%; + height: 100%; + text-align: center; + display: -ms-flexbox; + display: flex; + -ms-flex: 1; + flex: 1; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + line-height: 1; +} + +.pretty.p-icon input:checked ~ .state .icon { + opacity: 1; +} + +.pretty.p-icon input:checked ~ .state label:before { + border-color: #5a656b; +} + +.pretty.p-svg .state .svg { + position: absolute; + font-size: 1em; + width: calc(1em + 2px); + height: calc(1em + 2px); + right: 0; + z-index: 1; + text-align: center; + line-height: normal; + top: calc((0% - (100% - 1em)) - 8%); + border: 1px solid transparent; + opacity: 0; +} + +.pretty.p-svg .state svg { + margin: 0; + width: 100%; + height: 100%; + text-align: center; + display: -ms-flexbox; + display: flex; + -ms-flex: 1; + flex: 1; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + line-height: 1; +} + +.pretty.p-svg input:checked ~ .state .svg { + opacity: 1; +} + +.pretty.p-image .state img { + opacity: 0; + position: absolute; + width: calc(1em + 2px); + height: calc(1em + 2px); + top: 0; + top: calc((0% - (100% - 1em)) - 8%); + right: 0; + z-index: 0; + text-align: center; + line-height: normal; + -ms-transform: scale(0.8); + transform: scale(0.8); +} + +.pretty.p-image input:checked ~ .state img { + opacity: 1; +} + +.pretty.p-switch input { + min-width: 2em; +} + +.pretty.p-switch .state { + position: relative; +} + +.pretty.p-switch .state:before { + content: ''; + border: 1px solid #bdc3c7; + border-radius: 60px; + width: 2em; + box-sizing: unset; + height: calc(1em + 2px); + position: absolute; + top: 0; + top: calc((0% - (100% - 1em)) - 16%); + z-index: 0; + transition: all 0.5s ease; +} + +.pretty.p-switch .state label { + text-indent: 2.5em; +} + +.pretty.p-switch .state label:before, +.pretty.p-switch .state label:after { + transition: all 0.5s ease; + border-radius: 100%; + right: 0; + border-color: transparent; + -ms-transform: scale(0.8); + transform: scale(0.8); +} + +.pretty.p-switch .state label:after { + background-color: #bdc3c7 !important; +} + +.pretty.p-switch input:checked ~ .state:before { + border-color: #5a656b; +} + +.pretty.p-switch input:checked ~ .state label:before { + opacity: 0; +} + +.pretty.p-switch input:checked ~ .state label:after { + background-color: #5a656b !important; + right: 1em; +} + +.pretty.p-switch.p-fill input:checked ~ .state:before { + border-color: #5a656b; + background-color: #5a656b !important; +} + +.pretty.p-switch.p-fill input:checked ~ .state label:before { + opacity: 0; +} + +.pretty.p-switch.p-fill input:checked ~ .state label:after { + background-color: #fff !important; + right: 1em; +} + +.pretty.p-switch.p-slim .state:before { + height: 0.1em; + background: #bdc3c7 !important; + top: calc(50% - 0.1em); +} + +.pretty.p-switch.p-slim input:checked ~ .state:before { + border-color: #5a656b; + background-color: #5a656b !important; +} + +.pretty.p-has-hover input:hover ~ .state:not(.p-is-hover) { + display: none; +} + +.pretty.p-has-hover input:hover ~ .state.p-is-hover { + display: block; +} + +.pretty.p-has-hover input:hover ~ .state.p-is-hover .icon { + display: block; +} + +.pretty.p-has-focus input:focus ~ .state label:before { + box-shadow: 0px 0px 3px 0px #bdc3c7; +} + +.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.p-is-indeterminate) { + display: none; +} + +.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate { + display: block; +} + +.pretty.p-has-indeterminate input[type='checkbox']:indeterminate ~ .state.p-is-indeterminate .icon { + display: block; + opacity: 1; +} + +.pretty.p-toggle .state.p-on { + opacity: 0; + display: none; +} + +.pretty.p-toggle .state.p-off, +.pretty.p-toggle .state .icon, +.pretty.p-toggle .state .svg, +.pretty.p-toggle .state img { + opacity: 1; + display: inherit; +} + +.pretty.p-toggle .state.p-off .icon { + color: #bdc3c7; +} + +.pretty.p-toggle input:checked ~ .state.p-on { + opacity: 1; + display: inherit; +} + +.pretty.p-toggle input:checked ~ .state.p-off { + opacity: 0; + display: none; +} + +.pretty.p-plain input:checked ~ .state label:before, +.pretty.p-plain.p-toggle .state label:before { + content: none; +} + +.pretty.p-plain.p-plain .icon { + -ms-transform: scale(1.1); + transform: scale(1.1); +} + +.pretty.p-round .state label:before, +.pretty.p-round .state label:after { + border-radius: 100%; +} + +.pretty.p-round.p-icon .state .icon { + border-radius: 100%; + overflow: hidden; +} + +.pretty.p-round.p-icon .state .icon:before { + -ms-transform: scale(0.8); + transform: scale(0.8); +} + +.pretty.p-curve .state label:before, +.pretty.p-curve .state label:after { + border-radius: 20%; +} + +.pretty.p-smooth label:before, +.pretty.p-smooth label:after, +.pretty.p-smooth .icon, +.pretty.p-smooth .svg { + transition: all 0.5s ease; +} + +.pretty.p-smooth input:checked + .state label:after { + transition: all 0.3s ease; +} + +.pretty.p-smooth input:checked + .state .icon, +.pretty.p-smooth input:checked + .state .svg, +.pretty.p-smooth input:checked + .state img { + animation: zoom 0.2s ease; +} + +.pretty.p-smooth.p-default input:checked + .state label:after { + animation: zoom 0.2s ease; +} + +.pretty.p-smooth.p-plain input:checked + .state label:before { + content: ''; + -ms-transform: scale(0); + transform: scale(0); + transition: all 0.5s ease; +} + +.pretty.p-tada:not(.p-default) input:checked + .state .icon, +.pretty.p-tada:not(.p-default) input:checked + .state .svg, +.pretty.p-tada:not(.p-default) input:checked + .state img, +.pretty.p-tada:not(.p-default) input:checked + .state label:before, +.pretty.p-tada:not(.p-default) input:checked + .state label:after { + animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; + opacity: 1; +} + +.pretty.p-jelly:not(.p-default) input:checked + .state .icon, +.pretty.p-jelly:not(.p-default) input:checked + .state .svg, +.pretty.p-jelly:not(.p-default) input:checked + .state img, +.pretty.p-jelly:not(.p-default) input:checked + .state label:before, +.pretty.p-jelly:not(.p-default) input:checked + .state label:after { + animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); + opacity: 1; +} + +.pretty.p-jelly:not(.p-default) input:checked + .state label:before { + border-color: transparent; +} + +.pretty.p-rotate:not(.p-default) input:checked ~ .state .icon, +.pretty.p-rotate:not(.p-default) input:checked ~ .state .svg, +.pretty.p-rotate:not(.p-default) input:checked ~ .state img, +.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before, +.pretty.p-rotate:not(.p-default) input:checked ~ .state label:after { + animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); + opacity: 1; +} + +.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before { + border-color: transparent; +} + +.pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before { + animation: pulse 1s; +} + +.pretty input[disabled] { + cursor: not-allowed; + display: none; +} + +.pretty input[disabled] ~ * { + opacity: .5; +} + +.pretty.p-locked input { + display: none; + cursor: not-allowed; +} + +.pretty input:checked ~ .state.p-primary label:after, +.pretty.p-toggle .state.p-primary label:after { + background-color: #428bca !important; +} + +.pretty input:checked ~ .state.p-primary .icon, +.pretty input:checked ~ .state.p-primary .svg, +.pretty.p-toggle .state.p-primary .icon, +.pretty.p-toggle .state.p-primary .svg { + color: #fff; + stroke: #fff; +} + +.pretty input:checked ~ .state.p-primary-o label:before, +.pretty.p-toggle .state.p-primary-o label:before { + border-color: #428bca; +} + +.pretty input:checked ~ .state.p-primary-o label:after, +.pretty.p-toggle .state.p-primary-o label:after { + background-color: transparent; +} + +.pretty input:checked ~ .state.p-primary-o .icon, +.pretty input:checked ~ .state.p-primary-o .svg, +.pretty input:checked ~ .state.p-primary-o svg, +.pretty.p-toggle .state.p-primary-o .icon, +.pretty.p-toggle .state.p-primary-o .svg, +.pretty.p-toggle .state.p-primary-o svg { + color: #428bca; + stroke: #428bca; +} + +.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after { + background-color: #428bca !important; +} + +.pretty.p-switch input:checked ~ .state.p-primary:before { + border-color: #428bca; +} + +.pretty.p-switch.p-fill input:checked ~ .state.p-primary:before { + background-color: #428bca !important; +} + +.pretty.p-switch.p-slim input:checked ~ .state.p-primary:before { + border-color: #245682; + background-color: #245682 !important; +} + +.pretty input:checked ~ .state.p-info label:after, +.pretty.p-toggle .state.p-info label:after { + background-color: #5bc0de !important; +} + +.pretty input:checked ~ .state.p-info .icon, +.pretty input:checked ~ .state.p-info .svg, +.pretty.p-toggle .state.p-info .icon, +.pretty.p-toggle .state.p-info .svg { + color: #fff; + stroke: #fff; +} + +.pretty input:checked ~ .state.p-info-o label:before, +.pretty.p-toggle .state.p-info-o label:before { + border-color: #5bc0de; +} + +.pretty input:checked ~ .state.p-info-o label:after, +.pretty.p-toggle .state.p-info-o label:after { + background-color: transparent; +} + +.pretty input:checked ~ .state.p-info-o .icon, +.pretty input:checked ~ .state.p-info-o .svg, +.pretty input:checked ~ .state.p-info-o svg, +.pretty.p-toggle .state.p-info-o .icon, +.pretty.p-toggle .state.p-info-o .svg, +.pretty.p-toggle .state.p-info-o svg { + color: #5bc0de; + stroke: #5bc0de; +} + +.pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after { + background-color: #5bc0de !important; +} + +.pretty.p-switch input:checked ~ .state.p-info:before { + border-color: #5bc0de; +} + +.pretty.p-switch.p-fill input:checked ~ .state.p-info:before { + background-color: #5bc0de !important; +} + +.pretty.p-switch.p-slim input:checked ~ .state.p-info:before { + border-color: #2390b0; + background-color: #2390b0 !important; +} + +.pretty input:checked ~ .state.p-success label:after, +.pretty.p-toggle .state.p-success label:after { + background-color: #5cb85c !important; +} + +.pretty input:checked ~ .state.p-success .icon, +.pretty input:checked ~ .state.p-success .svg, +.pretty.p-toggle .state.p-success .icon, +.pretty.p-toggle .state.p-success .svg { + color: #fff; + stroke: #fff; +} + +.pretty input:checked ~ .state.p-success-o label:before, +.pretty.p-toggle .state.p-success-o label:before { + border-color: #5cb85c; +} + +.pretty input:checked ~ .state.p-success-o label:after, +.pretty.p-toggle .state.p-success-o label:after { + background-color: transparent; +} + +.pretty input:checked ~ .state.p-success-o .icon, +.pretty input:checked ~ .state.p-success-o .svg, +.pretty input:checked ~ .state.p-success-o svg, +.pretty.p-toggle .state.p-success-o .icon, +.pretty.p-toggle .state.p-success-o .svg, +.pretty.p-toggle .state.p-success-o svg { + color: #5cb85c; + stroke: #5cb85c; +} + +.pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after { + background-color: #5cb85c !important; +} + +.pretty.p-switch input:checked ~ .state.p-success:before { + border-color: #5cb85c; +} + +.pretty.p-switch.p-fill input:checked ~ .state.p-success:before { + background-color: #5cb85c !important; +} + +.pretty.p-switch.p-slim input:checked ~ .state.p-success:before { + border-color: #357935; + background-color: #357935 !important; +} + +.pretty input:checked ~ .state.p-warning label:after, +.pretty.p-toggle .state.p-warning label:after { + background-color: #f0ad4e !important; +} + +.pretty input:checked ~ .state.p-warning .icon, +.pretty input:checked ~ .state.p-warning .svg, +.pretty.p-toggle .state.p-warning .icon, +.pretty.p-toggle .state.p-warning .svg { + color: #fff; + stroke: #fff; +} + +.pretty input:checked ~ .state.p-warning-o label:before, +.pretty.p-toggle .state.p-warning-o label:before { + border-color: #f0ad4e; +} + +.pretty input:checked ~ .state.p-warning-o label:after, +.pretty.p-toggle .state.p-warning-o label:after { + background-color: transparent; +} + +.pretty input:checked ~ .state.p-warning-o .icon, +.pretty input:checked ~ .state.p-warning-o .svg, +.pretty input:checked ~ .state.p-warning-o svg, +.pretty.p-toggle .state.p-warning-o .icon, +.pretty.p-toggle .state.p-warning-o .svg, +.pretty.p-toggle .state.p-warning-o svg { + color: #f0ad4e; + stroke: #f0ad4e; +} + +.pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after { + background-color: #f0ad4e !important; +} + +.pretty.p-switch input:checked ~ .state.p-warning:before { + border-color: #f0ad4e; +} + +.pretty.p-switch.p-fill input:checked ~ .state.p-warning:before { + background-color: #f0ad4e !important; +} + +.pretty.p-switch.p-slim input:checked ~ .state.p-warning:before { + border-color: #c77c11; + background-color: #c77c11 !important; +} + +.pretty input:checked ~ .state.p-danger label:after, +.pretty.p-toggle .state.p-danger label:after { + background-color: #d9534f !important; +} + +.pretty input:checked ~ .state.p-danger .icon, +.pretty input:checked ~ .state.p-danger .svg, +.pretty.p-toggle .state.p-danger .icon, +.pretty.p-toggle .state.p-danger .svg { + color: #fff; + stroke: #fff; +} + +.pretty input:checked ~ .state.p-danger-o label:before, +.pretty.p-toggle .state.p-danger-o label:before { + border-color: #d9534f; +} + +.pretty input:checked ~ .state.p-danger-o label:after, +.pretty.p-toggle .state.p-danger-o label:after { + background-color: transparent; +} + +.pretty input:checked ~ .state.p-danger-o .icon, +.pretty input:checked ~ .state.p-danger-o .svg, +.pretty input:checked ~ .state.p-danger-o svg, +.pretty.p-toggle .state.p-danger-o .icon, +.pretty.p-toggle .state.p-danger-o .svg, +.pretty.p-toggle .state.p-danger-o svg { + color: #d9534f; + stroke: #d9534f; +} + +.pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after { + background-color: #d9534f !important; +} + +.pretty.p-switch input:checked ~ .state.p-danger:before { + border-color: #d9534f; +} + +.pretty.p-switch.p-fill input:checked ~ .state.p-danger:before { + background-color: #d9534f !important; +} + +.pretty.p-switch.p-slim input:checked ~ .state.p-danger:before { + border-color: #a02622; + background-color: #a02622 !important; +} + +.pretty.p-bigger label:before, +.pretty.p-bigger label:after, +.pretty.p-bigger .icon, +.pretty.p-bigger .svg, +.pretty.p-bigger .img { + font-size: 1.2em !important; + top: calc((0% - (100% - 1em)) - 35%) !important; +} + +.pretty.p-bigger label { + text-indent: 1.7em; +} + +@media print { + .pretty .state:before, + .pretty .state label:before, + .pretty .state label:after, + .pretty .state .icon { + color-adjust: exact; + /* stylelint-disable */ + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } +} diff --git a/dist/pretty-checkbox-rtl.min.css b/dist/pretty-checkbox-rtl.min.css new file mode 100644 index 0000000..b553433 --- /dev/null +++ b/dist/pretty-checkbox-rtl.min.css @@ -0,0 +1,12 @@ +/** + * pretty-checkbox.css + * + * A pure CSS library to beautify checkbox and radio buttons + * + * Source: https://github.com/lokesh-coder/pretty-checkbox + * Demo: https://lokesh-coder.github.io/pretty-checkbox + * + * Copyright (c) 2020 Lokesh rajendran + */ + +.pretty *{box-sizing:border-box}.pretty input:not([type=checkbox]):not([type=radio]){display:none}.pretty{position:relative;display:inline-block;margin-left:1em;white-space:nowrap;line-height:1}.pretty input{position:absolute;right:0;top:0;min-width:1em;width:100%;height:100%;z-index:2;opacity:0;margin:0;padding:0;cursor:pointer}.pretty .state label{position:initial;display:inline-block;font-weight:400;margin:0;text-indent:1.5em;min-width:calc(1em + 2px)}.pretty .state label:after,.pretty .state label:before{content:'';width:calc(1em + 2px);height:calc(1em + 2px);display:block;box-sizing:border-box;border-radius:0;border:1px solid transparent;z-index:0;position:absolute;right:0;top:calc((0% - (100% - 1em)) - 8%);background-color:transparent}.pretty .state label:before{border-color:#bdc3c7}.pretty .state.p-is-hover,.pretty .state.p-is-indeterminate{display:none}@keyframes zoom{0%{opacity:0;transform:scale(0)}}@keyframes tada{0%{animation-timing-function:ease-in;opacity:0;transform:scale(7)}38%{animation-timing-function:ease-out;opacity:1;transform:scale(1)}55%{animation-timing-function:ease-in;transform:scale(1.5)}72%{animation-timing-function:ease-out;transform:scale(1)}81%{animation-timing-function:ease-in;transform:scale(1.24)}89%{animation-timing-function:ease-out;transform:scale(1)}95%{animation-timing-function:ease-in;transform:scale(1.04)}100%{animation-timing-function:ease-out;transform:scale(1)}}@keyframes jelly{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(.75,1.25,1)}40%{transform:scale3d(1.25,.75,1)}50%{transform:scale3d(.85,1.15,1)}65%{transform:scale3d(1.05,.95,1)}75%{transform:scale3d(.95,1.05,1)}100%{transform:scale3d(1,1,1)}}@keyframes rotate{0%{opacity:0;transform:translateZ(-200px) rotate(-45deg)}100%{opacity:1;transform:translateZ(0) rotate(0)}}@keyframes pulse{0%{box-shadow:0 0 0 0 #bdc3c7}100%{box-shadow:0 0 0 1.5em rgba(189,195,199,0)}}.pretty.p-default.p-fill .state label:after{-ms-transform:scale(1);transform:scale(1)}.pretty.p-default .state label:after{-ms-transform:scale(.6);transform:scale(.6)}.pretty.p-default input:checked~.state label:after{background-color:#bdc3c7!important}.pretty.p-default.p-thick .state label:after,.pretty.p-default.p-thick .state label:before{border-width:calc(1em / 7)}.pretty.p-default.p-thick .state label:after{-ms-transform:scale(.4)!important;transform:scale(.4)!important}.pretty.p-icon .state .icon{position:absolute;font-size:1em;width:calc(1em + 2px);height:calc(1em + 2px);right:0;z-index:1;text-align:center;line-height:normal;top:calc((0% - (100% - 1em)) - 8%);border:1px solid transparent;opacity:0}.pretty.p-icon .state .icon:before{margin:0;width:100%;height:100%;text-align:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;line-height:1}.pretty.p-icon input:checked~.state .icon{opacity:1}.pretty.p-icon input:checked~.state label:before{border-color:#5a656b}.pretty.p-svg .state .svg{position:absolute;font-size:1em;width:calc(1em + 2px);height:calc(1em + 2px);right:0;z-index:1;text-align:center;line-height:normal;top:calc((0% - (100% - 1em)) - 8%);border:1px solid transparent;opacity:0}.pretty.p-svg .state svg{margin:0;width:100%;height:100%;text-align:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;line-height:1}.pretty.p-svg input:checked~.state .svg{opacity:1}.pretty.p-image .state img{opacity:0;position:absolute;width:calc(1em + 2px);height:calc(1em + 2px);top:0;top:calc((0% - (100% - 1em)) - 8%);right:0;z-index:0;text-align:center;line-height:normal;-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-image input:checked~.state img{opacity:1}.pretty.p-switch input{min-width:2em}.pretty.p-switch .state{position:relative}.pretty.p-switch .state:before{content:'';border:1px solid #bdc3c7;border-radius:60px;width:2em;box-sizing:unset;height:calc(1em + 2px);position:absolute;top:0;top:calc((0% - (100% - 1em)) - 16%);z-index:0;transition:all .5s ease}.pretty.p-switch .state label{text-indent:2.5em}.pretty.p-switch .state label:after,.pretty.p-switch .state label:before{transition:all .5s ease;border-radius:100%;right:0;border-color:transparent;-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-switch .state label:after{background-color:#bdc3c7!important}.pretty.p-switch input:checked~.state:before{border-color:#5a656b}.pretty.p-switch input:checked~.state label:before{opacity:0}.pretty.p-switch input:checked~.state label:after{background-color:#5a656b!important;right:1em}.pretty.p-switch.p-fill input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-switch.p-fill input:checked~.state label:before{opacity:0}.pretty.p-switch.p-fill input:checked~.state label:after{background-color:#fff!important;right:1em}.pretty.p-switch.p-slim .state:before{height:.1em;background:#bdc3c7!important;top:calc(50% - .1em)}.pretty.p-switch.p-slim input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-has-hover input:hover~.state:not(.p-is-hover){display:none}.pretty.p-has-hover input:hover~.state.p-is-hover{display:block}.pretty.p-has-hover input:hover~.state.p-is-hover .icon{display:block}.pretty.p-has-focus input:focus~.state label:before{box-shadow:0 0 3px 0 #bdc3c7}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state:not(.p-is-indeterminate){display:none}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state.p-is-indeterminate{display:block}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state.p-is-indeterminate .icon{display:block;opacity:1}.pretty.p-toggle .state.p-on{opacity:0;display:none}.pretty.p-toggle .state .icon,.pretty.p-toggle .state .svg,.pretty.p-toggle .state img,.pretty.p-toggle .state.p-off{opacity:1;display:inherit}.pretty.p-toggle .state.p-off .icon{color:#bdc3c7}.pretty.p-toggle input:checked~.state.p-on{opacity:1;display:inherit}.pretty.p-toggle input:checked~.state.p-off{opacity:0;display:none}.pretty.p-plain input:checked~.state label:before,.pretty.p-plain.p-toggle .state label:before{content:none}.pretty.p-plain.p-plain .icon{-ms-transform:scale(1.1);transform:scale(1.1)}.pretty.p-round .state label:after,.pretty.p-round .state label:before{border-radius:100%}.pretty.p-round.p-icon .state .icon{border-radius:100%;overflow:hidden}.pretty.p-round.p-icon .state .icon:before{-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-curve .state label:after,.pretty.p-curve .state label:before{border-radius:20%}.pretty.p-smooth .icon,.pretty.p-smooth .svg,.pretty.p-smooth label:after,.pretty.p-smooth label:before{transition:all .5s ease}.pretty.p-smooth input:checked+.state label:after{transition:all .3s ease}.pretty.p-smooth input:checked+.state .icon,.pretty.p-smooth input:checked+.state .svg,.pretty.p-smooth input:checked+.state img{animation:zoom .2s ease}.pretty.p-smooth.p-default input:checked+.state label:after{animation:zoom .2s ease}.pretty.p-smooth.p-plain input:checked+.state label:before{content:'';-ms-transform:scale(0);transform:scale(0);transition:all .5s ease}.pretty.p-tada:not(.p-default) input:checked+.state .icon,.pretty.p-tada:not(.p-default) input:checked+.state .svg,.pretty.p-tada:not(.p-default) input:checked+.state img,.pretty.p-tada:not(.p-default) input:checked+.state label:after,.pretty.p-tada:not(.p-default) input:checked+.state label:before{animation:tada .7s cubic-bezier(.25,.46,.45,.94) 1 alternate;opacity:1}.pretty.p-jelly:not(.p-default) input:checked+.state .icon,.pretty.p-jelly:not(.p-default) input:checked+.state .svg,.pretty.p-jelly:not(.p-default) input:checked+.state img,.pretty.p-jelly:not(.p-default) input:checked+.state label:after,.pretty.p-jelly:not(.p-default) input:checked+.state label:before{animation:jelly .7s cubic-bezier(.25,.46,.45,.94);opacity:1}.pretty.p-jelly:not(.p-default) input:checked+.state label:before{border-color:transparent}.pretty.p-rotate:not(.p-default) input:checked~.state .icon,.pretty.p-rotate:not(.p-default) input:checked~.state .svg,.pretty.p-rotate:not(.p-default) input:checked~.state img,.pretty.p-rotate:not(.p-default) input:checked~.state label:after,.pretty.p-rotate:not(.p-default) input:checked~.state label:before{animation:rotate .7s cubic-bezier(.25,.46,.45,.94);opacity:1}.pretty.p-rotate:not(.p-default) input:checked~.state label:before{border-color:transparent}.pretty.p-pulse:not(.p-switch) input:checked~.state label:before{animation:pulse 1s}.pretty input[disabled]{cursor:not-allowed;display:none}.pretty input[disabled]~*{opacity:.5}.pretty.p-locked input{display:none;cursor:not-allowed}.pretty input:checked~.state.p-primary label:after,.pretty.p-toggle .state.p-primary label:after{background-color:#428bca!important}.pretty input:checked~.state.p-primary .icon,.pretty input:checked~.state.p-primary .svg,.pretty.p-toggle .state.p-primary .icon,.pretty.p-toggle .state.p-primary .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-primary-o label:before,.pretty.p-toggle .state.p-primary-o label:before{border-color:#428bca}.pretty input:checked~.state.p-primary-o label:after,.pretty.p-toggle .state.p-primary-o label:after{background-color:transparent}.pretty input:checked~.state.p-primary-o .icon,.pretty input:checked~.state.p-primary-o .svg,.pretty input:checked~.state.p-primary-o svg,.pretty.p-toggle .state.p-primary-o .icon,.pretty.p-toggle .state.p-primary-o .svg,.pretty.p-toggle .state.p-primary-o svg{color:#428bca;stroke:#428bca}.pretty.p-default:not(.p-fill) input:checked~.state.p-primary-o label:after{background-color:#428bca!important}.pretty.p-switch input:checked~.state.p-primary:before{border-color:#428bca}.pretty.p-switch.p-fill input:checked~.state.p-primary:before{background-color:#428bca!important}.pretty.p-switch.p-slim input:checked~.state.p-primary:before{border-color:#245682;background-color:#245682!important}.pretty input:checked~.state.p-info label:after,.pretty.p-toggle .state.p-info label:after{background-color:#5bc0de!important}.pretty input:checked~.state.p-info .icon,.pretty input:checked~.state.p-info .svg,.pretty.p-toggle .state.p-info .icon,.pretty.p-toggle .state.p-info .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-info-o label:before,.pretty.p-toggle .state.p-info-o label:before{border-color:#5bc0de}.pretty input:checked~.state.p-info-o label:after,.pretty.p-toggle .state.p-info-o label:after{background-color:transparent}.pretty input:checked~.state.p-info-o .icon,.pretty input:checked~.state.p-info-o .svg,.pretty input:checked~.state.p-info-o svg,.pretty.p-toggle .state.p-info-o .icon,.pretty.p-toggle .state.p-info-o .svg,.pretty.p-toggle .state.p-info-o svg{color:#5bc0de;stroke:#5bc0de}.pretty.p-default:not(.p-fill) input:checked~.state.p-info-o label:after{background-color:#5bc0de!important}.pretty.p-switch input:checked~.state.p-info:before{border-color:#5bc0de}.pretty.p-switch.p-fill input:checked~.state.p-info:before{background-color:#5bc0de!important}.pretty.p-switch.p-slim input:checked~.state.p-info:before{border-color:#2390b0;background-color:#2390b0!important}.pretty input:checked~.state.p-success label:after,.pretty.p-toggle .state.p-success label:after{background-color:#5cb85c!important}.pretty input:checked~.state.p-success .icon,.pretty input:checked~.state.p-success .svg,.pretty.p-toggle .state.p-success .icon,.pretty.p-toggle .state.p-success .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-success-o label:before,.pretty.p-toggle .state.p-success-o label:before{border-color:#5cb85c}.pretty input:checked~.state.p-success-o label:after,.pretty.p-toggle .state.p-success-o label:after{background-color:transparent}.pretty input:checked~.state.p-success-o .icon,.pretty input:checked~.state.p-success-o .svg,.pretty input:checked~.state.p-success-o svg,.pretty.p-toggle .state.p-success-o .icon,.pretty.p-toggle .state.p-success-o .svg,.pretty.p-toggle .state.p-success-o svg{color:#5cb85c;stroke:#5cb85c}.pretty.p-default:not(.p-fill) input:checked~.state.p-success-o label:after{background-color:#5cb85c!important}.pretty.p-switch input:checked~.state.p-success:before{border-color:#5cb85c}.pretty.p-switch.p-fill input:checked~.state.p-success:before{background-color:#5cb85c!important}.pretty.p-switch.p-slim input:checked~.state.p-success:before{border-color:#357935;background-color:#357935!important}.pretty input:checked~.state.p-warning label:after,.pretty.p-toggle .state.p-warning label:after{background-color:#f0ad4e!important}.pretty input:checked~.state.p-warning .icon,.pretty input:checked~.state.p-warning .svg,.pretty.p-toggle .state.p-warning .icon,.pretty.p-toggle .state.p-warning .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-warning-o label:before,.pretty.p-toggle .state.p-warning-o label:before{border-color:#f0ad4e}.pretty input:checked~.state.p-warning-o label:after,.pretty.p-toggle .state.p-warning-o label:after{background-color:transparent}.pretty input:checked~.state.p-warning-o .icon,.pretty input:checked~.state.p-warning-o .svg,.pretty input:checked~.state.p-warning-o svg,.pretty.p-toggle .state.p-warning-o .icon,.pretty.p-toggle .state.p-warning-o .svg,.pretty.p-toggle .state.p-warning-o svg{color:#f0ad4e;stroke:#f0ad4e}.pretty.p-default:not(.p-fill) input:checked~.state.p-warning-o label:after{background-color:#f0ad4e!important}.pretty.p-switch input:checked~.state.p-warning:before{border-color:#f0ad4e}.pretty.p-switch.p-fill input:checked~.state.p-warning:before{background-color:#f0ad4e!important}.pretty.p-switch.p-slim input:checked~.state.p-warning:before{border-color:#c77c11;background-color:#c77c11!important}.pretty input:checked~.state.p-danger label:after,.pretty.p-toggle .state.p-danger label:after{background-color:#d9534f!important}.pretty input:checked~.state.p-danger .icon,.pretty input:checked~.state.p-danger .svg,.pretty.p-toggle .state.p-danger .icon,.pretty.p-toggle .state.p-danger .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-danger-o label:before,.pretty.p-toggle .state.p-danger-o label:before{border-color:#d9534f}.pretty input:checked~.state.p-danger-o label:after,.pretty.p-toggle .state.p-danger-o label:after{background-color:transparent}.pretty input:checked~.state.p-danger-o .icon,.pretty input:checked~.state.p-danger-o .svg,.pretty input:checked~.state.p-danger-o svg,.pretty.p-toggle .state.p-danger-o .icon,.pretty.p-toggle .state.p-danger-o .svg,.pretty.p-toggle .state.p-danger-o svg{color:#d9534f;stroke:#d9534f}.pretty.p-default:not(.p-fill) input:checked~.state.p-danger-o label:after{background-color:#d9534f!important}.pretty.p-switch input:checked~.state.p-danger:before{border-color:#d9534f}.pretty.p-switch.p-fill input:checked~.state.p-danger:before{background-color:#d9534f!important}.pretty.p-switch.p-slim input:checked~.state.p-danger:before{border-color:#a02622;background-color:#a02622!important}.pretty.p-bigger .icon,.pretty.p-bigger .img,.pretty.p-bigger .svg,.pretty.p-bigger label:after,.pretty.p-bigger label:before{font-size:1.2em!important;top:calc((0% - (100% - 1em)) - 35%)!important}.pretty.p-bigger label{text-indent:1.7em}@media print{.pretty .state .icon,.pretty .state label:after,.pretty .state label:before,.pretty .state:before{color-adjust:exact;-webkit-print-color-adjust:exact;print-color-adjust:exact}} \ No newline at end of file diff --git a/dist/pretty-checkbox.css b/dist/pretty-checkbox.css index 73a30ff..dc328ed 100644 --- a/dist/pretty-checkbox.css +++ b/dist/pretty-checkbox.css @@ -6,7 +6,7 @@ * Source: https://github.com/lokesh-coder/pretty-checkbox * Demo: https://lokesh-coder.github.io/pretty-checkbox * - * Copyright (c) 2017 Lokesh rajendran + * Copyright (c) 2020 Lokesh rajendran */ .pretty * { @@ -73,242 +73,115 @@ display: none; } -@-webkit-keyframes zoom { - 0% { - opacity: 0; - -webkit-transform: scale(0); - transform: scale(0); - } -} - @keyframes zoom { 0% { opacity: 0; - -webkit-transform: scale(0); transform: scale(0); } } -@-webkit-keyframes tada { - 0% { - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - -webkit-transform: scale(7); - transform: scale(7); - } - 38% { - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } - 55% { - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - -webkit-transform: scale(1.5); - transform: scale(1.5); - } - 72% { - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - -webkit-transform: scale(1); - transform: scale(1); - } - 81% { - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - -webkit-transform: scale(1.24); - transform: scale(1.24); - } - 89% { - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - -webkit-transform: scale(1); - transform: scale(1); - } - 95% { - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - -webkit-transform: scale(1.04); - transform: scale(1.04); - } - 100% { - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; - -webkit-transform: scale(1); - transform: scale(1); - } -} - @keyframes tada { 0% { - -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; - -webkit-transform: scale(7); transform: scale(7); } + 38% { - -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; - -webkit-transform: scale(1); transform: scale(1); } + 55% { - -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; - -webkit-transform: scale(1.5); transform: scale(1.5); } + 72% { - -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; - -webkit-transform: scale(1); transform: scale(1); } + 81% { - -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; - -webkit-transform: scale(1.24); transform: scale(1.24); } + 89% { - -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; - -webkit-transform: scale(1); transform: scale(1); } + 95% { - -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; - -webkit-transform: scale(1.04); transform: scale(1.04); } + 100% { - -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; - -webkit-transform: scale(1); transform: scale(1); } } -@-webkit-keyframes jelly { - 0% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - 30% { - -webkit-transform: scale3d(0.75, 1.25, 1); - transform: scale3d(0.75, 1.25, 1); - } - 40% { - -webkit-transform: scale3d(1.25, 0.75, 1); - transform: scale3d(1.25, 0.75, 1); - } - 50% { - -webkit-transform: scale3d(0.85, 1.15, 1); - transform: scale3d(0.85, 1.15, 1); - } - 65% { - -webkit-transform: scale3d(1.05, 0.95, 1); - transform: scale3d(1.05, 0.95, 1); - } - 75% { - -webkit-transform: scale3d(0.95, 1.05, 1); - transform: scale3d(0.95, 1.05, 1); - } - 100% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} - @keyframes jelly { 0% { - -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } + 30% { - -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } + 40% { - -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } + 50% { - -webkit-transform: scale3d(0.85, 1.15, 1); transform: scale3d(0.85, 1.15, 1); } + 65% { - -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } + 75% { - -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } - 100% { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } -} -@-webkit-keyframes rotate { - 0% { - opacity: 0; - -webkit-transform: translateZ(-200px) rotate(-45deg); - transform: translateZ(-200px) rotate(-45deg); - } 100% { - opacity: 1; - -webkit-transform: translateZ(0) rotate(0); - transform: translateZ(0) rotate(0); + transform: scale3d(1, 1, 1); } } @keyframes rotate { 0% { opacity: 0; - -webkit-transform: translateZ(-200px) rotate(-45deg); transform: translateZ(-200px) rotate(-45deg); } + 100% { opacity: 1; - -webkit-transform: translateZ(0) rotate(0); transform: translateZ(0) rotate(0); } } -@-webkit-keyframes pulse { - 0% { - box-shadow: 0px 0px 0px 0px #bdc3c7; - } - 100% { - box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); - } -} - @keyframes pulse { 0% { box-shadow: 0px 0px 0px 0px #bdc3c7; } + 100% { box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0); } } .pretty.p-default.p-fill .state label:after { - -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .pretty.p-default .state label:after { - -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); } @@ -323,7 +196,6 @@ } .pretty.p-default.p-thick .state label:after { - -webkit-transform: scale(0.4) !important; -ms-transform: scale(0.4) !important; transform: scale(0.4) !important; } @@ -347,16 +219,12 @@ width: 100%; height: 100%; text-align: center; - display: -webkit-box; display: -ms-flexbox; display: flex; - -webkit-box-flex: 1; -ms-flex: 1; flex: 1; - -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; - -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; @@ -389,16 +257,12 @@ width: 100%; height: 100%; text-align: center; - display: -webkit-box; display: -ms-flexbox; display: flex; - -webkit-box-flex: 1; -ms-flex: 1; flex: 1; - -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; - -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; @@ -419,7 +283,6 @@ z-index: 0; text-align: center; line-height: normal; - -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } @@ -460,7 +323,6 @@ border-radius: 100%; left: 0; border-color: transparent; - -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } @@ -569,7 +431,6 @@ } .pretty.p-plain.p-plain .icon { - -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } @@ -585,7 +446,6 @@ } .pretty.p-round.p-icon .state .icon:before { - -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } @@ -609,18 +469,15 @@ .pretty.p-smooth input:checked + .state .icon, .pretty.p-smooth input:checked + .state .svg, .pretty.p-smooth input:checked + .state img { - -webkit-animation: zoom 0.2s ease; animation: zoom 0.2s ease; } .pretty.p-smooth.p-default input:checked + .state label:after { - -webkit-animation: zoom 0.2s ease; animation: zoom 0.2s ease; } .pretty.p-smooth.p-plain input:checked + .state label:before { content: ''; - -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); transition: all 0.5s ease; @@ -631,7 +488,6 @@ .pretty.p-tada:not(.p-default) input:checked + .state img, .pretty.p-tada:not(.p-default) input:checked + .state label:before, .pretty.p-tada:not(.p-default) input:checked + .state label:after { - -webkit-animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate; opacity: 1; } @@ -641,7 +497,6 @@ .pretty.p-jelly:not(.p-default) input:checked + .state img, .pretty.p-jelly:not(.p-default) input:checked + .state label:before, .pretty.p-jelly:not(.p-default) input:checked + .state label:after { - -webkit-animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 1; } @@ -655,7 +510,6 @@ .pretty.p-rotate:not(.p-default) input:checked ~ .state img, .pretty.p-rotate:not(.p-default) input:checked ~ .state label:before, .pretty.p-rotate:not(.p-default) input:checked ~ .state label:after { - -webkit-animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 1; } @@ -665,7 +519,6 @@ } .pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before { - -webkit-animation: pulse 1s; animation: pulse 1s; } diff --git a/dist/pretty-checkbox.min.css b/dist/pretty-checkbox.min.css index 394fa2c..7f961ea 100644 --- a/dist/pretty-checkbox.min.css +++ b/dist/pretty-checkbox.min.css @@ -6,7 +6,7 @@ * Source: https://github.com/lokesh-coder/pretty-checkbox * Demo: https://lokesh-coder.github.io/pretty-checkbox * - * Copyright (c) 2017 Lokesh rajendran + * Copyright (c) 2020 Lokesh rajendran */ -.pretty *{box-sizing:border-box}.pretty input:not([type=checkbox]):not([type=radio]){display:none}.pretty{position:relative;display:inline-block;margin-right:1em;white-space:nowrap;line-height:1}.pretty input{position:absolute;left:0;top:0;min-width:1em;width:100%;height:100%;z-index:2;opacity:0;margin:0;padding:0;cursor:pointer}.pretty .state label{position:initial;display:inline-block;font-weight:400;margin:0;text-indent:1.5em;min-width:calc(1em + 2px)}.pretty .state label:after,.pretty .state label:before{content:'';width:calc(1em + 2px);height:calc(1em + 2px);display:block;box-sizing:border-box;border-radius:0;border:1px solid transparent;z-index:0;position:absolute;left:0;top:calc((0% - (100% - 1em)) - 8%);background-color:transparent}.pretty .state label:before{border-color:#bdc3c7}.pretty .state.p-is-hover,.pretty .state.p-is-indeterminate{display:none}@-webkit-keyframes zoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}@keyframes zoom{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}}@-webkit-keyframes tada{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-webkit-transform:scale(7);transform:scale(7)}38%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1;-webkit-transform:scale(1);transform:scale(1)}55%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.5);transform:scale(1.5)}72%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}81%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.24);transform:scale(1.24)}89%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.04);transform:scale(1.04)}100%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}}@keyframes tada{0%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0;-webkit-transform:scale(7);transform:scale(7)}38%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1;-webkit-transform:scale(1);transform:scale(1)}55%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.5);transform:scale(1.5)}72%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}81%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.24);transform:scale(1.24)}89%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}95%{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-transform:scale(1.04);transform:scale(1.04)}100%{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes jelly{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}40%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}50%{-webkit-transform:scale3d(.85,1.15,1);transform:scale3d(.85,1.15,1)}65%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}75%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jelly{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}40%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}50%{-webkit-transform:scale3d(.85,1.15,1);transform:scale3d(.85,1.15,1)}65%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}75%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes rotate{0%{opacity:0;-webkit-transform:translateZ(-200px) rotate(-45deg);transform:translateZ(-200px) rotate(-45deg)}100%{opacity:1;-webkit-transform:translateZ(0) rotate(0);transform:translateZ(0) rotate(0)}}@keyframes rotate{0%{opacity:0;-webkit-transform:translateZ(-200px) rotate(-45deg);transform:translateZ(-200px) rotate(-45deg)}100%{opacity:1;-webkit-transform:translateZ(0) rotate(0);transform:translateZ(0) rotate(0)}}@-webkit-keyframes pulse{0%{box-shadow:0 0 0 0 #bdc3c7}100%{box-shadow:0 0 0 1.5em rgba(189,195,199,0)}}@keyframes pulse{0%{box-shadow:0 0 0 0 #bdc3c7}100%{box-shadow:0 0 0 1.5em rgba(189,195,199,0)}}.pretty.p-default.p-fill .state label:after{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.pretty.p-default .state label:after{-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6)}.pretty.p-default input:checked~.state label:after{background-color:#bdc3c7!important}.pretty.p-default.p-thick .state label:after,.pretty.p-default.p-thick .state label:before{border-width:calc(1em / 7)}.pretty.p-default.p-thick .state label:after{-webkit-transform:scale(.4)!important;-ms-transform:scale(.4)!important;transform:scale(.4)!important}.pretty.p-icon .state .icon{position:absolute;font-size:1em;width:calc(1em + 2px);height:calc(1em + 2px);left:0;z-index:1;text-align:center;line-height:normal;top:calc((0% - (100% - 1em)) - 8%);border:1px solid transparent;opacity:0}.pretty.p-icon .state .icon:before{margin:0;width:100%;height:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1}.pretty.p-icon input:checked~.state .icon{opacity:1}.pretty.p-icon input:checked~.state label:before{border-color:#5a656b}.pretty.p-svg .state .svg{position:absolute;font-size:1em;width:calc(1em + 2px);height:calc(1em + 2px);left:0;z-index:1;text-align:center;line-height:normal;top:calc((0% - (100% - 1em)) - 8%);border:1px solid transparent;opacity:0}.pretty.p-svg .state svg{margin:0;width:100%;height:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1}.pretty.p-svg input:checked~.state .svg{opacity:1}.pretty.p-image .state img{opacity:0;position:absolute;width:calc(1em + 2px);height:calc(1em + 2px);top:0;top:calc((0% - (100% - 1em)) - 8%);left:0;z-index:0;text-align:center;line-height:normal;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-image input:checked~.state img{opacity:1}.pretty.p-switch input{min-width:2em}.pretty.p-switch .state{position:relative}.pretty.p-switch .state:before{content:'';border:1px solid #bdc3c7;border-radius:60px;width:2em;box-sizing:unset;height:calc(1em + 2px);position:absolute;top:0;top:calc((0% - (100% - 1em)) - 16%);z-index:0;transition:all .5s ease}.pretty.p-switch .state label{text-indent:2.5em}.pretty.p-switch .state label:after,.pretty.p-switch .state label:before{transition:all .5s ease;border-radius:100%;left:0;border-color:transparent;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-switch .state label:after{background-color:#bdc3c7!important}.pretty.p-switch input:checked~.state:before{border-color:#5a656b}.pretty.p-switch input:checked~.state label:before{opacity:0}.pretty.p-switch input:checked~.state label:after{background-color:#5a656b!important;left:1em}.pretty.p-switch.p-fill input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-switch.p-fill input:checked~.state label:before{opacity:0}.pretty.p-switch.p-fill input:checked~.state label:after{background-color:#fff!important;left:1em}.pretty.p-switch.p-slim .state:before{height:.1em;background:#bdc3c7!important;top:calc(50% - .1em)}.pretty.p-switch.p-slim input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-has-hover input:hover~.state:not(.p-is-hover){display:none}.pretty.p-has-hover input:hover~.state.p-is-hover{display:block}.pretty.p-has-hover input:hover~.state.p-is-hover .icon{display:block}.pretty.p-has-focus input:focus~.state label:before{box-shadow:0 0 3px 0 #bdc3c7}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state:not(.p-is-indeterminate){display:none}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state.p-is-indeterminate{display:block}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state.p-is-indeterminate .icon{display:block;opacity:1}.pretty.p-toggle .state.p-on{opacity:0;display:none}.pretty.p-toggle .state .icon,.pretty.p-toggle .state .svg,.pretty.p-toggle .state img,.pretty.p-toggle .state.p-off{opacity:1;display:inherit}.pretty.p-toggle .state.p-off .icon{color:#bdc3c7}.pretty.p-toggle input:checked~.state.p-on{opacity:1;display:inherit}.pretty.p-toggle input:checked~.state.p-off{opacity:0;display:none}.pretty.p-plain input:checked~.state label:before,.pretty.p-plain.p-toggle .state label:before{content:none}.pretty.p-plain.p-plain .icon{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.pretty.p-round .state label:after,.pretty.p-round .state label:before{border-radius:100%}.pretty.p-round.p-icon .state .icon{border-radius:100%;overflow:hidden}.pretty.p-round.p-icon .state .icon:before{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-curve .state label:after,.pretty.p-curve .state label:before{border-radius:20%}.pretty.p-smooth .icon,.pretty.p-smooth .svg,.pretty.p-smooth label:after,.pretty.p-smooth label:before{transition:all .5s ease}.pretty.p-smooth input:checked+.state label:after{transition:all .3s ease}.pretty.p-smooth input:checked+.state .icon,.pretty.p-smooth input:checked+.state .svg,.pretty.p-smooth input:checked+.state img{-webkit-animation:zoom .2s ease;animation:zoom .2s ease}.pretty.p-smooth.p-default input:checked+.state label:after{-webkit-animation:zoom .2s ease;animation:zoom .2s ease}.pretty.p-smooth.p-plain input:checked+.state label:before{content:'';-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);transition:all .5s ease}.pretty.p-tada:not(.p-default) input:checked+.state .icon,.pretty.p-tada:not(.p-default) input:checked+.state .svg,.pretty.p-tada:not(.p-default) input:checked+.state img,.pretty.p-tada:not(.p-default) input:checked+.state label:after,.pretty.p-tada:not(.p-default) input:checked+.state label:before{-webkit-animation:tada .7s cubic-bezier(.25,.46,.45,.94) 1 alternate;animation:tada .7s cubic-bezier(.25,.46,.45,.94) 1 alternate;opacity:1}.pretty.p-jelly:not(.p-default) input:checked+.state .icon,.pretty.p-jelly:not(.p-default) input:checked+.state .svg,.pretty.p-jelly:not(.p-default) input:checked+.state img,.pretty.p-jelly:not(.p-default) input:checked+.state label:after,.pretty.p-jelly:not(.p-default) input:checked+.state label:before{-webkit-animation:jelly .7s cubic-bezier(.25,.46,.45,.94);animation:jelly .7s cubic-bezier(.25,.46,.45,.94);opacity:1}.pretty.p-jelly:not(.p-default) input:checked+.state label:before{border-color:transparent}.pretty.p-rotate:not(.p-default) input:checked~.state .icon,.pretty.p-rotate:not(.p-default) input:checked~.state .svg,.pretty.p-rotate:not(.p-default) input:checked~.state img,.pretty.p-rotate:not(.p-default) input:checked~.state label:after,.pretty.p-rotate:not(.p-default) input:checked~.state label:before{-webkit-animation:rotate .7s cubic-bezier(.25,.46,.45,.94);animation:rotate .7s cubic-bezier(.25,.46,.45,.94);opacity:1}.pretty.p-rotate:not(.p-default) input:checked~.state label:before{border-color:transparent}.pretty.p-pulse:not(.p-switch) input:checked~.state label:before{-webkit-animation:pulse 1s;animation:pulse 1s}.pretty input[disabled]{cursor:not-allowed;display:none}.pretty input[disabled]~*{opacity:.5}.pretty.p-locked input{display:none;cursor:not-allowed}.pretty input:checked~.state.p-primary label:after,.pretty.p-toggle .state.p-primary label:after{background-color:#428bca!important}.pretty input:checked~.state.p-primary .icon,.pretty input:checked~.state.p-primary .svg,.pretty.p-toggle .state.p-primary .icon,.pretty.p-toggle .state.p-primary .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-primary-o label:before,.pretty.p-toggle .state.p-primary-o label:before{border-color:#428bca}.pretty input:checked~.state.p-primary-o label:after,.pretty.p-toggle .state.p-primary-o label:after{background-color:transparent}.pretty input:checked~.state.p-primary-o .icon,.pretty input:checked~.state.p-primary-o .svg,.pretty input:checked~.state.p-primary-o svg,.pretty.p-toggle .state.p-primary-o .icon,.pretty.p-toggle .state.p-primary-o .svg,.pretty.p-toggle .state.p-primary-o svg{color:#428bca;stroke:#428bca}.pretty.p-default:not(.p-fill) input:checked~.state.p-primary-o label:after{background-color:#428bca!important}.pretty.p-switch input:checked~.state.p-primary:before{border-color:#428bca}.pretty.p-switch.p-fill input:checked~.state.p-primary:before{background-color:#428bca!important}.pretty.p-switch.p-slim input:checked~.state.p-primary:before{border-color:#245682;background-color:#245682!important}.pretty input:checked~.state.p-info label:after,.pretty.p-toggle .state.p-info label:after{background-color:#5bc0de!important}.pretty input:checked~.state.p-info .icon,.pretty input:checked~.state.p-info .svg,.pretty.p-toggle .state.p-info .icon,.pretty.p-toggle .state.p-info .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-info-o label:before,.pretty.p-toggle .state.p-info-o label:before{border-color:#5bc0de}.pretty input:checked~.state.p-info-o label:after,.pretty.p-toggle .state.p-info-o label:after{background-color:transparent}.pretty input:checked~.state.p-info-o .icon,.pretty input:checked~.state.p-info-o .svg,.pretty input:checked~.state.p-info-o svg,.pretty.p-toggle .state.p-info-o .icon,.pretty.p-toggle .state.p-info-o .svg,.pretty.p-toggle .state.p-info-o svg{color:#5bc0de;stroke:#5bc0de}.pretty.p-default:not(.p-fill) input:checked~.state.p-info-o label:after{background-color:#5bc0de!important}.pretty.p-switch input:checked~.state.p-info:before{border-color:#5bc0de}.pretty.p-switch.p-fill input:checked~.state.p-info:before{background-color:#5bc0de!important}.pretty.p-switch.p-slim input:checked~.state.p-info:before{border-color:#2390b0;background-color:#2390b0!important}.pretty input:checked~.state.p-success label:after,.pretty.p-toggle .state.p-success label:after{background-color:#5cb85c!important}.pretty input:checked~.state.p-success .icon,.pretty input:checked~.state.p-success .svg,.pretty.p-toggle .state.p-success .icon,.pretty.p-toggle .state.p-success .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-success-o label:before,.pretty.p-toggle .state.p-success-o label:before{border-color:#5cb85c}.pretty input:checked~.state.p-success-o label:after,.pretty.p-toggle .state.p-success-o label:after{background-color:transparent}.pretty input:checked~.state.p-success-o .icon,.pretty input:checked~.state.p-success-o .svg,.pretty input:checked~.state.p-success-o svg,.pretty.p-toggle .state.p-success-o .icon,.pretty.p-toggle .state.p-success-o .svg,.pretty.p-toggle .state.p-success-o svg{color:#5cb85c;stroke:#5cb85c}.pretty.p-default:not(.p-fill) input:checked~.state.p-success-o label:after{background-color:#5cb85c!important}.pretty.p-switch input:checked~.state.p-success:before{border-color:#5cb85c}.pretty.p-switch.p-fill input:checked~.state.p-success:before{background-color:#5cb85c!important}.pretty.p-switch.p-slim input:checked~.state.p-success:before{border-color:#357935;background-color:#357935!important}.pretty input:checked~.state.p-warning label:after,.pretty.p-toggle .state.p-warning label:after{background-color:#f0ad4e!important}.pretty input:checked~.state.p-warning .icon,.pretty input:checked~.state.p-warning .svg,.pretty.p-toggle .state.p-warning .icon,.pretty.p-toggle .state.p-warning .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-warning-o label:before,.pretty.p-toggle .state.p-warning-o label:before{border-color:#f0ad4e}.pretty input:checked~.state.p-warning-o label:after,.pretty.p-toggle .state.p-warning-o label:after{background-color:transparent}.pretty input:checked~.state.p-warning-o .icon,.pretty input:checked~.state.p-warning-o .svg,.pretty input:checked~.state.p-warning-o svg,.pretty.p-toggle .state.p-warning-o .icon,.pretty.p-toggle .state.p-warning-o .svg,.pretty.p-toggle .state.p-warning-o svg{color:#f0ad4e;stroke:#f0ad4e}.pretty.p-default:not(.p-fill) input:checked~.state.p-warning-o label:after{background-color:#f0ad4e!important}.pretty.p-switch input:checked~.state.p-warning:before{border-color:#f0ad4e}.pretty.p-switch.p-fill input:checked~.state.p-warning:before{background-color:#f0ad4e!important}.pretty.p-switch.p-slim input:checked~.state.p-warning:before{border-color:#c77c11;background-color:#c77c11!important}.pretty input:checked~.state.p-danger label:after,.pretty.p-toggle .state.p-danger label:after{background-color:#d9534f!important}.pretty input:checked~.state.p-danger .icon,.pretty input:checked~.state.p-danger .svg,.pretty.p-toggle .state.p-danger .icon,.pretty.p-toggle .state.p-danger .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-danger-o label:before,.pretty.p-toggle .state.p-danger-o label:before{border-color:#d9534f}.pretty input:checked~.state.p-danger-o label:after,.pretty.p-toggle .state.p-danger-o label:after{background-color:transparent}.pretty input:checked~.state.p-danger-o .icon,.pretty input:checked~.state.p-danger-o .svg,.pretty input:checked~.state.p-danger-o svg,.pretty.p-toggle .state.p-danger-o .icon,.pretty.p-toggle .state.p-danger-o .svg,.pretty.p-toggle .state.p-danger-o svg{color:#d9534f;stroke:#d9534f}.pretty.p-default:not(.p-fill) input:checked~.state.p-danger-o label:after{background-color:#d9534f!important}.pretty.p-switch input:checked~.state.p-danger:before{border-color:#d9534f}.pretty.p-switch.p-fill input:checked~.state.p-danger:before{background-color:#d9534f!important}.pretty.p-switch.p-slim input:checked~.state.p-danger:before{border-color:#a02622;background-color:#a02622!important}.pretty.p-bigger .icon,.pretty.p-bigger .img,.pretty.p-bigger .svg,.pretty.p-bigger label:after,.pretty.p-bigger label:before{font-size:1.2em!important;top:calc((0% - (100% - 1em)) - 35%)!important}.pretty.p-bigger label{text-indent:1.7em}@media print{.pretty .state .icon,.pretty .state label:after,.pretty .state label:before,.pretty .state:before{color-adjust:exact;-webkit-print-color-adjust:exact;print-color-adjust:exact}} +.pretty *{box-sizing:border-box}.pretty input:not([type=checkbox]):not([type=radio]){display:none}.pretty{position:relative;display:inline-block;margin-right:1em;white-space:nowrap;line-height:1}.pretty input{position:absolute;left:0;top:0;min-width:1em;width:100%;height:100%;z-index:2;opacity:0;margin:0;padding:0;cursor:pointer}.pretty .state label{position:initial;display:inline-block;font-weight:400;margin:0;text-indent:1.5em;min-width:calc(1em + 2px)}.pretty .state label:after,.pretty .state label:before{content:'';width:calc(1em + 2px);height:calc(1em + 2px);display:block;box-sizing:border-box;border-radius:0;border:1px solid transparent;z-index:0;position:absolute;left:0;top:calc((0% - (100% - 1em)) - 8%);background-color:transparent}.pretty .state label:before{border-color:#bdc3c7}.pretty .state.p-is-hover,.pretty .state.p-is-indeterminate{display:none}@keyframes zoom{0%{opacity:0;transform:scale(0)}}@keyframes tada{0%{animation-timing-function:ease-in;opacity:0;transform:scale(7)}38%{animation-timing-function:ease-out;opacity:1;transform:scale(1)}55%{animation-timing-function:ease-in;transform:scale(1.5)}72%{animation-timing-function:ease-out;transform:scale(1)}81%{animation-timing-function:ease-in;transform:scale(1.24)}89%{animation-timing-function:ease-out;transform:scale(1)}95%{animation-timing-function:ease-in;transform:scale(1.04)}100%{animation-timing-function:ease-out;transform:scale(1)}}@keyframes jelly{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(.75,1.25,1)}40%{transform:scale3d(1.25,.75,1)}50%{transform:scale3d(.85,1.15,1)}65%{transform:scale3d(1.05,.95,1)}75%{transform:scale3d(.95,1.05,1)}100%{transform:scale3d(1,1,1)}}@keyframes rotate{0%{opacity:0;transform:translateZ(-200px) rotate(-45deg)}100%{opacity:1;transform:translateZ(0) rotate(0)}}@keyframes pulse{0%{box-shadow:0 0 0 0 #bdc3c7}100%{box-shadow:0 0 0 1.5em rgba(189,195,199,0)}}.pretty.p-default.p-fill .state label:after{-ms-transform:scale(1);transform:scale(1)}.pretty.p-default .state label:after{-ms-transform:scale(.6);transform:scale(.6)}.pretty.p-default input:checked~.state label:after{background-color:#bdc3c7!important}.pretty.p-default.p-thick .state label:after,.pretty.p-default.p-thick .state label:before{border-width:calc(1em / 7)}.pretty.p-default.p-thick .state label:after{-ms-transform:scale(.4)!important;transform:scale(.4)!important}.pretty.p-icon .state .icon{position:absolute;font-size:1em;width:calc(1em + 2px);height:calc(1em + 2px);left:0;z-index:1;text-align:center;line-height:normal;top:calc((0% - (100% - 1em)) - 8%);border:1px solid transparent;opacity:0}.pretty.p-icon .state .icon:before{margin:0;width:100%;height:100%;text-align:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;line-height:1}.pretty.p-icon input:checked~.state .icon{opacity:1}.pretty.p-icon input:checked~.state label:before{border-color:#5a656b}.pretty.p-svg .state .svg{position:absolute;font-size:1em;width:calc(1em + 2px);height:calc(1em + 2px);left:0;z-index:1;text-align:center;line-height:normal;top:calc((0% - (100% - 1em)) - 8%);border:1px solid transparent;opacity:0}.pretty.p-svg .state svg{margin:0;width:100%;height:100%;text-align:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;line-height:1}.pretty.p-svg input:checked~.state .svg{opacity:1}.pretty.p-image .state img{opacity:0;position:absolute;width:calc(1em + 2px);height:calc(1em + 2px);top:0;top:calc((0% - (100% - 1em)) - 8%);left:0;z-index:0;text-align:center;line-height:normal;-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-image input:checked~.state img{opacity:1}.pretty.p-switch input{min-width:2em}.pretty.p-switch .state{position:relative}.pretty.p-switch .state:before{content:'';border:1px solid #bdc3c7;border-radius:60px;width:2em;box-sizing:unset;height:calc(1em + 2px);position:absolute;top:0;top:calc((0% - (100% - 1em)) - 16%);z-index:0;transition:all .5s ease}.pretty.p-switch .state label{text-indent:2.5em}.pretty.p-switch .state label:after,.pretty.p-switch .state label:before{transition:all .5s ease;border-radius:100%;left:0;border-color:transparent;-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-switch .state label:after{background-color:#bdc3c7!important}.pretty.p-switch input:checked~.state:before{border-color:#5a656b}.pretty.p-switch input:checked~.state label:before{opacity:0}.pretty.p-switch input:checked~.state label:after{background-color:#5a656b!important;left:1em}.pretty.p-switch.p-fill input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-switch.p-fill input:checked~.state label:before{opacity:0}.pretty.p-switch.p-fill input:checked~.state label:after{background-color:#fff!important;left:1em}.pretty.p-switch.p-slim .state:before{height:.1em;background:#bdc3c7!important;top:calc(50% - .1em)}.pretty.p-switch.p-slim input:checked~.state:before{border-color:#5a656b;background-color:#5a656b!important}.pretty.p-has-hover input:hover~.state:not(.p-is-hover){display:none}.pretty.p-has-hover input:hover~.state.p-is-hover{display:block}.pretty.p-has-hover input:hover~.state.p-is-hover .icon{display:block}.pretty.p-has-focus input:focus~.state label:before{box-shadow:0 0 3px 0 #bdc3c7}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state:not(.p-is-indeterminate){display:none}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state.p-is-indeterminate{display:block}.pretty.p-has-indeterminate input[type=checkbox]:indeterminate~.state.p-is-indeterminate .icon{display:block;opacity:1}.pretty.p-toggle .state.p-on{opacity:0;display:none}.pretty.p-toggle .state .icon,.pretty.p-toggle .state .svg,.pretty.p-toggle .state img,.pretty.p-toggle .state.p-off{opacity:1;display:inherit}.pretty.p-toggle .state.p-off .icon{color:#bdc3c7}.pretty.p-toggle input:checked~.state.p-on{opacity:1;display:inherit}.pretty.p-toggle input:checked~.state.p-off{opacity:0;display:none}.pretty.p-plain input:checked~.state label:before,.pretty.p-plain.p-toggle .state label:before{content:none}.pretty.p-plain.p-plain .icon{-ms-transform:scale(1.1);transform:scale(1.1)}.pretty.p-round .state label:after,.pretty.p-round .state label:before{border-radius:100%}.pretty.p-round.p-icon .state .icon{border-radius:100%;overflow:hidden}.pretty.p-round.p-icon .state .icon:before{-ms-transform:scale(.8);transform:scale(.8)}.pretty.p-curve .state label:after,.pretty.p-curve .state label:before{border-radius:20%}.pretty.p-smooth .icon,.pretty.p-smooth .svg,.pretty.p-smooth label:after,.pretty.p-smooth label:before{transition:all .5s ease}.pretty.p-smooth input:checked+.state label:after{transition:all .3s ease}.pretty.p-smooth input:checked+.state .icon,.pretty.p-smooth input:checked+.state .svg,.pretty.p-smooth input:checked+.state img{animation:zoom .2s ease}.pretty.p-smooth.p-default input:checked+.state label:after{animation:zoom .2s ease}.pretty.p-smooth.p-plain input:checked+.state label:before{content:'';-ms-transform:scale(0);transform:scale(0);transition:all .5s ease}.pretty.p-tada:not(.p-default) input:checked+.state .icon,.pretty.p-tada:not(.p-default) input:checked+.state .svg,.pretty.p-tada:not(.p-default) input:checked+.state img,.pretty.p-tada:not(.p-default) input:checked+.state label:after,.pretty.p-tada:not(.p-default) input:checked+.state label:before{animation:tada .7s cubic-bezier(.25,.46,.45,.94) 1 alternate;opacity:1}.pretty.p-jelly:not(.p-default) input:checked+.state .icon,.pretty.p-jelly:not(.p-default) input:checked+.state .svg,.pretty.p-jelly:not(.p-default) input:checked+.state img,.pretty.p-jelly:not(.p-default) input:checked+.state label:after,.pretty.p-jelly:not(.p-default) input:checked+.state label:before{animation:jelly .7s cubic-bezier(.25,.46,.45,.94);opacity:1}.pretty.p-jelly:not(.p-default) input:checked+.state label:before{border-color:transparent}.pretty.p-rotate:not(.p-default) input:checked~.state .icon,.pretty.p-rotate:not(.p-default) input:checked~.state .svg,.pretty.p-rotate:not(.p-default) input:checked~.state img,.pretty.p-rotate:not(.p-default) input:checked~.state label:after,.pretty.p-rotate:not(.p-default) input:checked~.state label:before{animation:rotate .7s cubic-bezier(.25,.46,.45,.94);opacity:1}.pretty.p-rotate:not(.p-default) input:checked~.state label:before{border-color:transparent}.pretty.p-pulse:not(.p-switch) input:checked~.state label:before{animation:pulse 1s}.pretty input[disabled]{cursor:not-allowed;display:none}.pretty input[disabled]~*{opacity:.5}.pretty.p-locked input{display:none;cursor:not-allowed}.pretty input:checked~.state.p-primary label:after,.pretty.p-toggle .state.p-primary label:after{background-color:#428bca!important}.pretty input:checked~.state.p-primary .icon,.pretty input:checked~.state.p-primary .svg,.pretty.p-toggle .state.p-primary .icon,.pretty.p-toggle .state.p-primary .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-primary-o label:before,.pretty.p-toggle .state.p-primary-o label:before{border-color:#428bca}.pretty input:checked~.state.p-primary-o label:after,.pretty.p-toggle .state.p-primary-o label:after{background-color:transparent}.pretty input:checked~.state.p-primary-o .icon,.pretty input:checked~.state.p-primary-o .svg,.pretty input:checked~.state.p-primary-o svg,.pretty.p-toggle .state.p-primary-o .icon,.pretty.p-toggle .state.p-primary-o .svg,.pretty.p-toggle .state.p-primary-o svg{color:#428bca;stroke:#428bca}.pretty.p-default:not(.p-fill) input:checked~.state.p-primary-o label:after{background-color:#428bca!important}.pretty.p-switch input:checked~.state.p-primary:before{border-color:#428bca}.pretty.p-switch.p-fill input:checked~.state.p-primary:before{background-color:#428bca!important}.pretty.p-switch.p-slim input:checked~.state.p-primary:before{border-color:#245682;background-color:#245682!important}.pretty input:checked~.state.p-info label:after,.pretty.p-toggle .state.p-info label:after{background-color:#5bc0de!important}.pretty input:checked~.state.p-info .icon,.pretty input:checked~.state.p-info .svg,.pretty.p-toggle .state.p-info .icon,.pretty.p-toggle .state.p-info .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-info-o label:before,.pretty.p-toggle .state.p-info-o label:before{border-color:#5bc0de}.pretty input:checked~.state.p-info-o label:after,.pretty.p-toggle .state.p-info-o label:after{background-color:transparent}.pretty input:checked~.state.p-info-o .icon,.pretty input:checked~.state.p-info-o .svg,.pretty input:checked~.state.p-info-o svg,.pretty.p-toggle .state.p-info-o .icon,.pretty.p-toggle .state.p-info-o .svg,.pretty.p-toggle .state.p-info-o svg{color:#5bc0de;stroke:#5bc0de}.pretty.p-default:not(.p-fill) input:checked~.state.p-info-o label:after{background-color:#5bc0de!important}.pretty.p-switch input:checked~.state.p-info:before{border-color:#5bc0de}.pretty.p-switch.p-fill input:checked~.state.p-info:before{background-color:#5bc0de!important}.pretty.p-switch.p-slim input:checked~.state.p-info:before{border-color:#2390b0;background-color:#2390b0!important}.pretty input:checked~.state.p-success label:after,.pretty.p-toggle .state.p-success label:after{background-color:#5cb85c!important}.pretty input:checked~.state.p-success .icon,.pretty input:checked~.state.p-success .svg,.pretty.p-toggle .state.p-success .icon,.pretty.p-toggle .state.p-success .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-success-o label:before,.pretty.p-toggle .state.p-success-o label:before{border-color:#5cb85c}.pretty input:checked~.state.p-success-o label:after,.pretty.p-toggle .state.p-success-o label:after{background-color:transparent}.pretty input:checked~.state.p-success-o .icon,.pretty input:checked~.state.p-success-o .svg,.pretty input:checked~.state.p-success-o svg,.pretty.p-toggle .state.p-success-o .icon,.pretty.p-toggle .state.p-success-o .svg,.pretty.p-toggle .state.p-success-o svg{color:#5cb85c;stroke:#5cb85c}.pretty.p-default:not(.p-fill) input:checked~.state.p-success-o label:after{background-color:#5cb85c!important}.pretty.p-switch input:checked~.state.p-success:before{border-color:#5cb85c}.pretty.p-switch.p-fill input:checked~.state.p-success:before{background-color:#5cb85c!important}.pretty.p-switch.p-slim input:checked~.state.p-success:before{border-color:#357935;background-color:#357935!important}.pretty input:checked~.state.p-warning label:after,.pretty.p-toggle .state.p-warning label:after{background-color:#f0ad4e!important}.pretty input:checked~.state.p-warning .icon,.pretty input:checked~.state.p-warning .svg,.pretty.p-toggle .state.p-warning .icon,.pretty.p-toggle .state.p-warning .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-warning-o label:before,.pretty.p-toggle .state.p-warning-o label:before{border-color:#f0ad4e}.pretty input:checked~.state.p-warning-o label:after,.pretty.p-toggle .state.p-warning-o label:after{background-color:transparent}.pretty input:checked~.state.p-warning-o .icon,.pretty input:checked~.state.p-warning-o .svg,.pretty input:checked~.state.p-warning-o svg,.pretty.p-toggle .state.p-warning-o .icon,.pretty.p-toggle .state.p-warning-o .svg,.pretty.p-toggle .state.p-warning-o svg{color:#f0ad4e;stroke:#f0ad4e}.pretty.p-default:not(.p-fill) input:checked~.state.p-warning-o label:after{background-color:#f0ad4e!important}.pretty.p-switch input:checked~.state.p-warning:before{border-color:#f0ad4e}.pretty.p-switch.p-fill input:checked~.state.p-warning:before{background-color:#f0ad4e!important}.pretty.p-switch.p-slim input:checked~.state.p-warning:before{border-color:#c77c11;background-color:#c77c11!important}.pretty input:checked~.state.p-danger label:after,.pretty.p-toggle .state.p-danger label:after{background-color:#d9534f!important}.pretty input:checked~.state.p-danger .icon,.pretty input:checked~.state.p-danger .svg,.pretty.p-toggle .state.p-danger .icon,.pretty.p-toggle .state.p-danger .svg{color:#fff;stroke:#fff}.pretty input:checked~.state.p-danger-o label:before,.pretty.p-toggle .state.p-danger-o label:before{border-color:#d9534f}.pretty input:checked~.state.p-danger-o label:after,.pretty.p-toggle .state.p-danger-o label:after{background-color:transparent}.pretty input:checked~.state.p-danger-o .icon,.pretty input:checked~.state.p-danger-o .svg,.pretty input:checked~.state.p-danger-o svg,.pretty.p-toggle .state.p-danger-o .icon,.pretty.p-toggle .state.p-danger-o .svg,.pretty.p-toggle .state.p-danger-o svg{color:#d9534f;stroke:#d9534f}.pretty.p-default:not(.p-fill) input:checked~.state.p-danger-o label:after{background-color:#d9534f!important}.pretty.p-switch input:checked~.state.p-danger:before{border-color:#d9534f}.pretty.p-switch.p-fill input:checked~.state.p-danger:before{background-color:#d9534f!important}.pretty.p-switch.p-slim input:checked~.state.p-danger:before{border-color:#a02622;background-color:#a02622!important}.pretty.p-bigger .icon,.pretty.p-bigger .img,.pretty.p-bigger .svg,.pretty.p-bigger label:after,.pretty.p-bigger label:before{font-size:1.2em!important;top:calc((0% - (100% - 1em)) - 35%)!important}.pretty.p-bigger label{text-indent:1.7em}@media print{.pretty .state .icon,.pretty .state label:after,.pretty .state label:before,.pretty .state:before{color-adjust:exact;-webkit-print-color-adjust:exact;print-color-adjust:exact}} \ No newline at end of file diff --git a/package.json b/package.json index 8cb112a..b1db028 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "A pure css library to beautify checkbox and radio buttons.", "main": "dist/pretty-checkbox.min.css", "scripts": { - "lint":"gulp lint:scss", + "lint": "gulp lint:scss", "fix": "stylelint \"src\\**\\*.scss\" --syntax scss --fix", "format": "gulp css:format", "build": "gulp build", diff --git a/src/pretty-checkbox-rtl.scss b/src/pretty-checkbox-rtl.scss new file mode 100644 index 0000000..bb4a365 --- /dev/null +++ b/src/pretty-checkbox-rtl.scss @@ -0,0 +1,27 @@ +@import 'scss-rtl/variables'; +@import 'scss-rtl/core'; +@import 'scss/essentials/keyframes'; +@import 'scss/essentials/functions'; +@import 'scss/essentials/mixins'; +@import 'scss/elements/default/fill'; +@import 'scss/elements/default/outline'; +@import 'scss/elements/default/thick'; +@import 'scss-rtl/elements/font-icon/general'; +@import 'scss-rtl/elements/svg/general'; +@import 'scss-rtl/elements/image/general'; +@import 'scss-rtl/elements/switch/general'; +@import 'scss-rtl/elements/switch/fill'; +@import 'scss/elements/switch/slim'; +@import 'scss/states/hover'; +@import 'scss/states/focus'; +@import 'scss/states/indeterminate'; +@import 'scss/extras/toggle'; +@import 'scss/extras/plain'; +@import 'scss/extras/round'; +@import 'scss/extras/curve'; +@import 'scss/extras/animation'; +@import 'scss/extras/disabled'; +@import 'scss/extras/locked'; +@import 'scss/extras/colors'; +@import 'scss/extras/bigger'; +@import 'scss/extras/print'; diff --git a/src/scss-rtl/_core.scss b/src/scss-rtl/_core.scss new file mode 100644 index 0000000..5f98905 --- /dev/null +++ b/src/scss-rtl/_core.scss @@ -0,0 +1,85 @@ +@charset 'utf-8'; + +.#{$pretty--class-name} * { + box-sizing: border-box; +} + +//Throw error on invalid input types. +.#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) { + display: none; + + @if $pretty--debug { + + *:after { + content: $pretty--err-message; + border: 1px solid #dedede; + border-right: 3px solid #d9534f; + padding: 9px; + font-size: 1em; + font-weight: 600; + color: #d9534f; + position: absolute; + z-index: 3; + background: #fbfbfb; + top: 0; + right: 0; + } + } +} + +.#{$pretty--class-name} { + position: relative; + display: inline-block; + margin-left: 1em; + white-space: nowrap; + line-height: 1; + + input { + position: absolute; + right: 0; + top: 0; + min-width: 1em; + width: 100%; + height: 100%; + z-index: $pretty--z-index-front; + opacity: 0; + margin: 0; + padding: 0; + cursor: pointer; + } + + .state { + label { + position: initial; + display: inline-block; + font-weight: normal; + margin: 0; + text-indent: $pretty--label-text-offset; + min-width: $pretty--box-size; + + &:before, + &:after { + content: ''; + width: $pretty--box-size; + height: $pretty--box-size; + display: block; + box-sizing: border-box; + border-radius: 0; + border: 1px solid transparent; + z-index: $pretty--z-index-back; + position: absolute; + right: 0; + top: $pretty-top-offset; + background-color: transparent; + } + + &:before { + border-color: $pretty--color-default; + } + } + + &.p-is-hover, + &.p-is-indeterminate { + display: none; + } + } +} diff --git a/src/scss-rtl/_variables.scss b/src/scss-rtl/_variables.scss new file mode 100644 index 0000000..915af22 --- /dev/null +++ b/src/scss-rtl/_variables.scss @@ -0,0 +1,39 @@ +$pretty--class-name: pretty !default; + +// colors +$pretty--color-default: #bdc3c7 !default; +$pretty--color-primary: #428bca !default; +$pretty--color-info: #5bc0de !default; +$pretty--color-success: #5cb85c !default; +$pretty--color-warning: #f0ad4e !default; +$pretty--color-danger: #d9534f !default; +$pretty--color-dark: #5a656b !default; + +// z-index +$pretty--z-index-back: 0 !default; +$pretty--z-index-between: 1 !default; +$pretty--z-index-front: 2 !default; + +// box +$pretty--curve-radius: 20% !default; +$pretty--box-size: calc(1em + 2px) !default; + +// text +$pretty--label-text-offset: 1.5em !default; +$pretty--label-text-offset-switch: 2.5em !default; + +// scale +$pretty--2x: 1.2em !default; + +// color set +$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), (success, $pretty--color-success), (warning, $pretty--color-warning), (danger, $pretty--color-danger) !default; + +// position +$pretty-top: 8; +$pretty-top-switch: ($pretty-top * 2) * 1%; +$pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%}); +$pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch}); + +// dev +$pretty--debug: false !default; +$pretty--err-message: 'Error: Invalid input type!' !default; diff --git a/src/scss-rtl/elements/font-icon/_general.scss b/src/scss-rtl/elements/font-icon/_general.scss new file mode 100644 index 0000000..28ac472 --- /dev/null +++ b/src/scss-rtl/elements/font-icon/_general.scss @@ -0,0 +1,39 @@ +.#{$pretty--class-name}.p-icon { + .state { + .icon { + position: absolute; + font-size: 1em; + width: $pretty--box-size; + height: $pretty--box-size; + right: 0; + z-index: $pretty--z-index-between; + text-align: center; + line-height: normal; + top: $pretty-top-offset; + border: 1px solid transparent; + opacity: 0; + } + + .icon:before { + margin: 0; + width: 100%; + height: 100%; + text-align: center; + display: flex; + flex: 1; + justify-content: center; + align-items: center; + line-height: 1; + } + } + + input:checked ~ .state { + .icon { + opacity: 1; + } + + label:before { + border-color: #5a656b; + } + } +} diff --git a/src/scss-rtl/elements/image/_general.scss b/src/scss-rtl/elements/image/_general.scss new file mode 100644 index 0000000..e28e8b0 --- /dev/null +++ b/src/scss-rtl/elements/image/_general.scss @@ -0,0 +1,21 @@ +.#{$pretty--class-name}.p-image { + .state { + img { + opacity: 0; + position: absolute; + width: $pretty--box-size; + height: $pretty--box-size; + top: 0; + top: $pretty-top-offset; + right: 0; + z-index: $pretty--z-index-back; + text-align: center; + line-height: normal; + transform: scale(0.8); + } + } + + input:checked ~ .state img { + opacity: 1; + } +} diff --git a/src/scss-rtl/elements/svg/_general.scss b/src/scss-rtl/elements/svg/_general.scss new file mode 100644 index 0000000..0c07393 --- /dev/null +++ b/src/scss-rtl/elements/svg/_general.scss @@ -0,0 +1,33 @@ +.#{$pretty--class-name}.p-svg { + .state { + .svg { + position: absolute; + font-size: 1em; + width: $pretty--box-size; + height: $pretty--box-size; + right: 0; + z-index: $pretty--z-index-between; + text-align: center; + line-height: normal; + top: $pretty-top-offset; + border: 1px solid transparent; + opacity: 0; + } + + svg { + margin: 0; + width: 100%; + height: 100%; + text-align: center; + display: flex; + flex: 1; + justify-content: center; + align-items: center; + line-height: 1; + } + } + + input:checked ~ .state .svg { + opacity: 1; + } +} diff --git a/src/scss-rtl/elements/switch/_fill.scss b/src/scss-rtl/elements/switch/_fill.scss new file mode 100644 index 0000000..3e5044d --- /dev/null +++ b/src/scss-rtl/elements/switch/_fill.scss @@ -0,0 +1,15 @@ +.#{$pretty--class-name}.p-switch.p-fill { + input:checked~.state { + &:before { + border-color: $pretty--color-dark; + background-color: $pretty--color-dark !important; + } + label:before { + opacity: 0; + } + label:after { + background-color: #fff !important; + right: 1em; + } + } +} diff --git a/src/scss-rtl/elements/switch/_general.scss b/src/scss-rtl/elements/switch/_general.scss new file mode 100644 index 0000000..487798f --- /dev/null +++ b/src/scss-rtl/elements/switch/_general.scss @@ -0,0 +1,54 @@ +.#{$pretty--class-name}.p-switch { + input{ + min-width:2em; + } + .state { + position: relative; + + &:before { + content: ''; + border: 1px solid $pretty--color-default; + border-radius: 60px; + width: 2em; + box-sizing: unset; + height: $pretty--box-size; + position: absolute; + top: 0; + top: $pretty-top-offset-switch; + z-index: $pretty--z-index-back; + transition: all 0.5s ease; + } + + label { + text-indent: $pretty--label-text-offset-switch; + + &:before, + &:after { + transition: all 0.5s ease; + border-radius: 100%; + right: 0; + border-color: transparent; + transform: scale(0.8); + } + + &:after { + background-color: $pretty--color-default !important; + } + } + } + + input:checked ~ .state { + &:before { + border-color: $pretty--color-dark; + } + + label:before { + opacity: 0; + } + + label:after { + background-color: $pretty--color-dark !important; + right: 1em; + } + } +}