|
@@ -0,0 +1,1459 @@
|
|
|
|
+.pretty * {
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty {
|
|
|
|
+ position: relative;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ margin-right: 1em;
|
|
|
|
+ line-height: unset;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox'],
|
|
|
|
+.pretty input[type='radio'] {
|
|
|
|
+ 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: normal;
|
|
|
|
+ margin: 0;
|
|
|
|
+ text-indent: 1.5em;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty .state label:before, .pretty .state label:after {
|
|
|
|
+ content: '';
|
|
|
|
+ width: calc(1em + 2px);
|
|
|
|
+ height: calc(1em + 2px);
|
|
|
|
+ display: inline-block;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ border-radius: 0%;
|
|
|
|
+ border: 1px solid transparent;
|
|
|
|
+ z-index: 0;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 0;
|
|
|
|
+ top: calc(calc(50% - calc(100% - 1em)) - 1px);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty .state label:before {
|
|
|
|
+ background-color: transparent;
|
|
|
|
+ border-color: #bdc3c7;
|
|
|
|
+ margin-right: 0.1em;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty .state.--is-hover, .pretty .state.--is-indeterminate {
|
|
|
|
+ display: none;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@-webkit-keyframes tada {
|
|
|
|
+ 0% {
|
|
|
|
+ -webkit-transform: scale(7);
|
|
|
|
+ transform: scale(7);
|
|
|
|
+ -webkit-animation-timing-function: ease-in;
|
|
|
|
+ animation-timing-function: ease-in;
|
|
|
|
+ opacity: 0;
|
|
|
|
+ }
|
|
|
|
+ 38% {
|
|
|
|
+ -webkit-transform: scale(1);
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ -webkit-animation-timing-function: ease-out;
|
|
|
|
+ animation-timing-function: ease-out;
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+ 55% {
|
|
|
|
+ -webkit-transform: scale(1.5);
|
|
|
|
+ transform: scale(1.5);
|
|
|
|
+ -webkit-animation-timing-function: ease-in;
|
|
|
|
+ animation-timing-function: ease-in;
|
|
|
|
+ }
|
|
|
|
+ 72% {
|
|
|
|
+ -webkit-transform: scale(1);
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ -webkit-animation-timing-function: ease-out;
|
|
|
|
+ animation-timing-function: ease-out;
|
|
|
|
+ }
|
|
|
|
+ 81% {
|
|
|
|
+ -webkit-transform: scale(1.24);
|
|
|
|
+ transform: scale(1.24);
|
|
|
|
+ -webkit-animation-timing-function: ease-in;
|
|
|
|
+ animation-timing-function: ease-in;
|
|
|
|
+ }
|
|
|
|
+ 89% {
|
|
|
|
+ -webkit-transform: scale(1);
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ -webkit-animation-timing-function: ease-out;
|
|
|
|
+ animation-timing-function: ease-out;
|
|
|
|
+ }
|
|
|
|
+ 95% {
|
|
|
|
+ -webkit-transform: scale(1.04);
|
|
|
|
+ transform: scale(1.04);
|
|
|
|
+ -webkit-animation-timing-function: ease-in;
|
|
|
|
+ animation-timing-function: ease-in;
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ -webkit-transform: scale(1);
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ -webkit-animation-timing-function: ease-out;
|
|
|
|
+ animation-timing-function: ease-out;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@keyframes tada {
|
|
|
|
+ 0% {
|
|
|
|
+ -webkit-transform: scale(7);
|
|
|
|
+ transform: scale(7);
|
|
|
|
+ -webkit-animation-timing-function: ease-in;
|
|
|
|
+ animation-timing-function: ease-in;
|
|
|
|
+ opacity: 0;
|
|
|
|
+ }
|
|
|
|
+ 38% {
|
|
|
|
+ -webkit-transform: scale(1);
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ -webkit-animation-timing-function: ease-out;
|
|
|
|
+ animation-timing-function: ease-out;
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+ 55% {
|
|
|
|
+ -webkit-transform: scale(1.5);
|
|
|
|
+ transform: scale(1.5);
|
|
|
|
+ -webkit-animation-timing-function: ease-in;
|
|
|
|
+ animation-timing-function: ease-in;
|
|
|
|
+ }
|
|
|
|
+ 72% {
|
|
|
|
+ -webkit-transform: scale(1);
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ -webkit-animation-timing-function: ease-out;
|
|
|
|
+ animation-timing-function: ease-out;
|
|
|
|
+ }
|
|
|
|
+ 81% {
|
|
|
|
+ -webkit-transform: scale(1.24);
|
|
|
|
+ transform: scale(1.24);
|
|
|
|
+ -webkit-animation-timing-function: ease-in;
|
|
|
|
+ animation-timing-function: ease-in;
|
|
|
|
+ }
|
|
|
|
+ 89% {
|
|
|
|
+ -webkit-transform: scale(1);
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ -webkit-animation-timing-function: ease-out;
|
|
|
|
+ animation-timing-function: ease-out;
|
|
|
|
+ }
|
|
|
|
+ 95% {
|
|
|
|
+ -webkit-transform: scale(1.04);
|
|
|
|
+ transform: scale(1.04);
|
|
|
|
+ -webkit-animation-timing-function: ease-in;
|
|
|
|
+ animation-timing-function: ease-in;
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ -webkit-transform: scale(1);
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ -webkit-animation-timing-function: ease-out;
|
|
|
|
+ animation-timing-function: ease-out;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@-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% {
|
|
|
|
+ -webkit-transform: translateZ(-200px) rotate(-45deg);
|
|
|
|
+ transform: translateZ(-200px) rotate(-45deg);
|
|
|
|
+ opacity: 0;
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ -webkit-transform: translateZ(0) rotate(0);
|
|
|
|
+ transform: translateZ(0) rotate(0);
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@keyframes rotate {
|
|
|
|
+ 0% {
|
|
|
|
+ -webkit-transform: translateZ(-200px) rotate(-45deg);
|
|
|
|
+ transform: translateZ(-200px) rotate(-45deg);
|
|
|
|
+ opacity: 0;
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ -webkit-transform: translateZ(0) rotate(0);
|
|
|
|
+ transform: translateZ(0) rotate(0);
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--default.--fill input[type='checkbox'] ~ .state label:after,
|
|
|
|
+.pretty.--default.--fill input[type='radio'] ~ .state label:after {
|
|
|
|
+ -webkit-transform: scale(1);
|
|
|
|
+ transform: scale(1);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--default.--fill input[type='checkbox']:checked ~ .state label:after,
|
|
|
|
+.pretty.--default.--fill input[type='radio']:checked ~ .state label:after {
|
|
|
|
+ background-color: #bdc3c7;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--default input[type='checkbox'] ~ .state label:after,
|
|
|
|
+.pretty.--default input[type='radio'] ~ .state label:after {
|
|
|
|
+ -webkit-transform: scale(0.6);
|
|
|
|
+ transform: scale(0.6);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--default input[type='checkbox']:checked ~ .state label:after,
|
|
|
|
+.pretty.--default input[type='radio']:checked ~ .state label:after {
|
|
|
|
+ background-color: #bdc3c7;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--default.--thick input[type='checkbox'] ~ .state label:before, .pretty.--default.--thick input[type='checkbox'] ~ .state label:after,
|
|
|
|
+.pretty.--default.--thick input[type='radio'] ~ .state label:before,
|
|
|
|
+.pretty.--default.--thick input[type='radio'] ~ .state label:after {
|
|
|
|
+ border-width: 0.13em;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--default.--thick input[type='checkbox'] ~ .state label:after,
|
|
|
|
+.pretty.--default.--thick input[type='radio'] ~ .state label:after {
|
|
|
|
+ -webkit-transform: scale(0.4) !important;
|
|
|
|
+ transform: scale(0.4) !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--default.--thick input[type='checkbox']:checked + .state label:after,
|
|
|
|
+.pretty.--default.--thick input[type='radio']:checked + .state label:after {
|
|
|
|
+ background-color: #bdc3c7;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--icon .state .icon {
|
|
|
|
+ display: none;
|
|
|
|
+ position: absolute;
|
|
|
|
+ font-size: 1em;
|
|
|
|
+ width: calc(1em + 2px);
|
|
|
|
+ height: calc(1em + 2px);
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: normal;
|
|
|
|
+ top: calc(calc(50% - calc(100% - 1em)) - 1px);
|
|
|
|
+ border: 1px solid transparent;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--icon .state .icon:before {
|
|
|
|
+ line-height: normal;
|
|
|
|
+ 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.--icon input[type='checkbox']:checked ~ .state .icon,
|
|
|
|
+.pretty.--icon input[type='radio']:checked ~ .state .icon {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ vertical-align: top;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--icon input[type='checkbox']:checked ~ .state label:before,
|
|
|
|
+.pretty.--icon input[type='radio']:checked ~ .state label:before {
|
|
|
|
+ border-color: #5a656b;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--svg .state .svg {
|
|
|
|
+ display: none;
|
|
|
|
+ position: absolute;
|
|
|
|
+ font-size: 1em;
|
|
|
|
+ width: calc(1em + 2px);
|
|
|
|
+ height: calc(1em + 2px);
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: normal;
|
|
|
|
+ top: calc(calc(50% - calc(100% - 1em)) - 1px);
|
|
|
|
+ border: 1px solid transparent;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--svg .state svg {
|
|
|
|
+ line-height: normal;
|
|
|
|
+ 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.--svg input[type='checkbox']:checked ~ .state .svg,
|
|
|
|
+.pretty.--svg input[type='radio']:checked ~ .state .svg {
|
|
|
|
+ display: inline-block;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--image .state img {
|
|
|
|
+ display: none;
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: calc(1em + 2px);
|
|
|
|
+ height: calc(1em + 2px);
|
|
|
|
+ top: 0;
|
|
|
|
+ top: calc(calc(50% - calc(100% - 1em)) - 2px);
|
|
|
|
+ left: 0;
|
|
|
|
+ z-index: 0;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: normal;
|
|
|
|
+ -webkit-transform: scale(0.8);
|
|
|
|
+ transform: scale(0.8);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--image input[type='checkbox']:checked ~ .state img,
|
|
|
|
+.pretty.--image input[type='radio']:checked ~ .state img {
|
|
|
|
+ display: inline-block;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch .state {
|
|
|
|
+ position: relative;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch .state:before {
|
|
|
|
+ content: '';
|
|
|
|
+ border: 1px solid #bdc3c7;
|
|
|
|
+ border-radius: 60px;
|
|
|
|
+ width: 2em;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ box-sizing: unset;
|
|
|
|
+ height: calc(1em + 2px);
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ top: calc(calc(50% - calc(100% - 1em)) - 2px);
|
|
|
|
+ z-index: 0;
|
|
|
|
+ transition: all 0.5s ease;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch .state label {
|
|
|
|
+ text-indent: 2.5em;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch .state label:before, .pretty.--switch .state label:after {
|
|
|
|
+ transition: all 0.5s ease;
|
|
|
|
+ border-radius: 100%;
|
|
|
|
+ left: 0;
|
|
|
|
+ border-color: transparent;
|
|
|
|
+ -webkit-transform: scale(0.8);
|
|
|
|
+ transform: scale(0.8);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch .state label:after {
|
|
|
|
+ background-color: #bdc3c7;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state:before,
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state:before {
|
|
|
|
+ border-color: #5a656b;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state label:before,
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state label:before {
|
|
|
|
+ opacity: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state label:after,
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state label:after {
|
|
|
|
+ background-color: #5a656b;
|
|
|
|
+ left: 1em;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--fill input[type='checkbox']:checked ~ .state:before,
|
|
|
|
+.pretty.--switch.--fill input[type='radio']:checked ~ .state:before {
|
|
|
|
+ border-color: #5a656b;
|
|
|
|
+ background-color: #5a656b;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--fill input[type='checkbox']:checked ~ .state label:before,
|
|
|
|
+.pretty.--switch.--fill input[type='radio']:checked ~ .state label:before {
|
|
|
|
+ opacity: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--fill input[type='checkbox']:checked ~ .state label:after,
|
|
|
|
+.pretty.--switch.--fill input[type='radio']:checked ~ .state label:after {
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ left: 1em;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim .state:before {
|
|
|
|
+ height: 0.1em;
|
|
|
|
+ background: #bdc3c7;
|
|
|
|
+ top: calc(50% - 1.5px);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state:before,
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state:before {
|
|
|
|
+ border-color: #5a656b;
|
|
|
|
+ background-color: #5a656b;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--on,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--on {
|
|
|
|
+ display: none;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state .icon,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state .svg,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state img,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state .icon,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state .svg,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state img {
|
|
|
|
+ display: inline-block;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='checkbox']:checked ~ .state.--on,
|
|
|
|
+.pretty.--toggle input[type='radio']:checked ~ .state.--on {
|
|
|
|
+ display: inline-block;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='checkbox']:checked ~ .state.--off,
|
|
|
|
+.pretty.--toggle input[type='radio']:checked ~ .state.--off {
|
|
|
|
+ display: none;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--plain input[type='checkbox']:checked ~ .state label:before,
|
|
|
|
+.pretty.--plain input[type='radio']:checked ~ .state label:before,
|
|
|
|
+.pretty.--plain.--toggle input[type='checkbox'] ~ .state label:before,
|
|
|
|
+.pretty.--plain.--toggle input[type='radio'] ~ .state label:before {
|
|
|
|
+ content: none;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--round input[type='checkbox'] ~ .state label:before, .pretty.--round input[type='checkbox'] ~ .state label:after,
|
|
|
|
+.pretty.--round input[type='radio'] ~ .state label:before,
|
|
|
|
+.pretty.--round input[type='radio'] ~ .state label:after {
|
|
|
|
+ border-radius: 100%;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--round.--icon .state .icon {
|
|
|
|
+ border-radius: 100%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--round.--icon .state .icon:before {
|
|
|
|
+ -webkit-transform: scale(0.8);
|
|
|
|
+ transform: scale(0.8);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--curve input[type='checkbox'] ~ .state label:before, .pretty.--curve input[type='checkbox'] ~ .state label:after,
|
|
|
|
+.pretty.--curve input[type='radio'] ~ .state label:before,
|
|
|
|
+.pretty.--curve input[type='radio'] ~ .state label:after {
|
|
|
|
+ border-radius: 20%;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--smooth input[type='checkbox'] + .state .icon,
|
|
|
|
+.pretty.--smooth input[type='checkbox'] + .state .svg,
|
|
|
|
+.pretty.--smooth input[type='checkbox'] + .state img,
|
|
|
|
+.pretty.--smooth input[type='radio'] + .state .icon,
|
|
|
|
+.pretty.--smooth input[type='radio'] + .state .svg,
|
|
|
|
+.pretty.--smooth input[type='radio'] + .state img {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ -webkit-transform: scale(0);
|
|
|
|
+ transform: scale(0);
|
|
|
|
+ opacity: 0;
|
|
|
|
+ transition: all 0.5s ease;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--smooth input[type='checkbox'] + .state label:before,
|
|
|
|
+.pretty.--smooth input[type='radio'] + .state label:before {
|
|
|
|
+ transition: all 0.5s ease;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--smooth input[type='checkbox'] + .state label:after,
|
|
|
|
+.pretty.--smooth input[type='radio'] + .state label:after {
|
|
|
|
+ opacity: 0;
|
|
|
|
+ transition: all 0.5s ease;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--smooth input[type='checkbox']:checked + .state .icon,
|
|
|
|
+.pretty.--smooth input[type='checkbox']:checked + .state .svg,
|
|
|
|
+.pretty.--smooth input[type='checkbox']:checked + .state img,
|
|
|
|
+.pretty.--smooth input[type='checkbox']:checked + .state label:after,
|
|
|
|
+.pretty.--smooth input[type='radio']:checked + .state .icon,
|
|
|
|
+.pretty.--smooth input[type='radio']:checked + .state .svg,
|
|
|
|
+.pretty.--smooth input[type='radio']:checked + .state img,
|
|
|
|
+.pretty.--smooth input[type='radio']:checked + .state label:after {
|
|
|
|
+ -webkit-transform: scale(1);
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ opacity: 1;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--smooth input[type='checkbox']:checked + .state img,
|
|
|
|
+.pretty.--smooth input[type='radio']:checked + .state img {
|
|
|
|
+ -webkit-transform: scale(0.8);
|
|
|
|
+ transform: scale(0.8);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--smooth input[type='checkbox']:checked + .state label:after,
|
|
|
|
+.pretty.--smooth input[type='radio']:checked + .state label:after {
|
|
|
|
+ opacity: 1;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--smooth.--default:not(.--fill) input[type='checkbox']:checked + .state label:after,
|
|
|
|
+.pretty.--smooth.--default:not(.--fill) input[type='radio']:checked + .state label:after {
|
|
|
|
+ -webkit-transform: scale(0.6);
|
|
|
|
+ transform: scale(0.6);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--smooth.--plain input[type='checkbox']:checked + .state label:before,
|
|
|
|
+.pretty.--smooth.--plain input[type='radio']:checked + .state label:before {
|
|
|
|
+ content: '';
|
|
|
|
+ -webkit-transform: scale(0);
|
|
|
|
+ transform: scale(0);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--tada input[type='checkbox'] + .state .icon,
|
|
|
|
+.pretty.--tada input[type='checkbox'] + .state .svg,
|
|
|
|
+.pretty.--tada input[type='checkbox'] + .state img,
|
|
|
|
+.pretty.--tada input[type='radio'] + .state .icon,
|
|
|
|
+.pretty.--tada input[type='radio'] + .state .svg,
|
|
|
|
+.pretty.--tada input[type='radio'] + .state img {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ opacity: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--tada input[type='checkbox'] + .state label:after,
|
|
|
|
+.pretty.--tada input[type='radio'] + .state label:after {
|
|
|
|
+ opacity: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--tada input[type='checkbox']:checked + .state .icon,
|
|
|
|
+.pretty.--tada input[type='checkbox']:checked + .state .svg,
|
|
|
|
+.pretty.--tada input[type='checkbox']:checked + .state img,
|
|
|
|
+.pretty.--tada input[type='checkbox']:checked + .state label:after,
|
|
|
|
+.pretty.--tada input[type='radio']:checked + .state .icon,
|
|
|
|
+.pretty.--tada input[type='radio']:checked + .state .svg,
|
|
|
|
+.pretty.--tada input[type='radio']:checked + .state img,
|
|
|
|
+.pretty.--tada input[type='radio']: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;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--tada input[type='checkbox']:checked + .state label:after,
|
|
|
|
+.pretty.--tada input[type='radio']:checked + .state label:after {
|
|
|
|
+ opacity: 1;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--jelly input[type='checkbox'] + .state .icon,
|
|
|
|
+.pretty.--jelly input[type='checkbox'] + .state .svg,
|
|
|
|
+.pretty.--jelly input[type='checkbox'] + .state img,
|
|
|
|
+.pretty.--jelly input[type='radio'] + .state .icon,
|
|
|
|
+.pretty.--jelly input[type='radio'] + .state .svg,
|
|
|
|
+.pretty.--jelly input[type='radio'] + .state img {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ opacity: 0;
|
|
|
|
+ -webkit-animation-fill-mode: reverse;
|
|
|
|
+ animation-fill-mode: reverse;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--jelly input[type='checkbox'] + .state label:after,
|
|
|
|
+.pretty.--jelly input[type='radio'] + .state label:after {
|
|
|
|
+ opacity: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--jelly input[type='checkbox']:checked + .state .icon,
|
|
|
|
+.pretty.--jelly input[type='checkbox']:checked + .state .svg,
|
|
|
|
+.pretty.--jelly input[type='checkbox']:checked + .state img,
|
|
|
|
+.pretty.--jelly input[type='checkbox']:checked + .state label:after,
|
|
|
|
+.pretty.--jelly input[type='radio']:checked + .state .icon,
|
|
|
|
+.pretty.--jelly input[type='radio']:checked + .state .svg,
|
|
|
|
+.pretty.--jelly input[type='radio']:checked + .state img,
|
|
|
|
+.pretty.--jelly input[type='radio']:checked + .state label:after {
|
|
|
|
+ -webkit-animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 both alternate;
|
|
|
|
+ animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 both alternate;
|
|
|
|
+ opacity: 1;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--jelly input[type='checkbox']:checked + .state label:before,
|
|
|
|
+.pretty.--jelly input[type='radio']:checked + .state label:before {
|
|
|
|
+ border-color: transparent;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--rotate input[type='checkbox'] ~ .state .icon,
|
|
|
|
+.pretty.--rotate input[type='checkbox'] ~ .state .svg,
|
|
|
|
+.pretty.--rotate input[type='checkbox'] ~ .state img,
|
|
|
|
+.pretty.--rotate input[type='radio'] ~ .state .icon,
|
|
|
|
+.pretty.--rotate input[type='radio'] ~ .state .svg,
|
|
|
|
+.pretty.--rotate input[type='radio'] ~ .state img {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ opacity: 0;
|
|
|
|
+ -webkit-animation-fill-mode: reverse;
|
|
|
|
+ animation-fill-mode: reverse;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--rotate input[type='checkbox'] ~ .state label:after,
|
|
|
|
+.pretty.--rotate input[type='radio'] ~ .state label:after {
|
|
|
|
+ opacity: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--rotate input[type='checkbox']:checked ~ .state .icon,
|
|
|
|
+.pretty.--rotate input[type='checkbox']:checked ~ .state .svg,
|
|
|
|
+.pretty.--rotate input[type='checkbox']:checked ~ .state img,
|
|
|
|
+.pretty.--rotate input[type='checkbox']:checked ~ .state label:after,
|
|
|
|
+.pretty.--rotate input[type='radio']:checked ~ .state .icon,
|
|
|
|
+.pretty.--rotate input[type='radio']:checked ~ .state .svg,
|
|
|
|
+.pretty.--rotate input[type='radio']:checked ~ .state img,
|
|
|
|
+.pretty.--rotate input[type='radio']:checked ~ .state label:after {
|
|
|
|
+ -webkit-animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 both alternate;
|
|
|
|
+ animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 both alternate;
|
|
|
|
+ opacity: 1;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--rotate input[type='checkbox']:checked ~ .state label:before,
|
|
|
|
+.pretty.--rotate input[type='radio']:checked ~ .state label:before {
|
|
|
|
+ border-color: transparent;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox'][disabled],
|
|
|
|
+.pretty input[type='radio'][disabled] {
|
|
|
|
+ display: none;
|
|
|
|
+ cursor: not-allowed;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox'][disabled] ~ *,
|
|
|
|
+.pretty input[type='radio'][disabled] ~ * {
|
|
|
|
+ opacity: 0.5;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--locked input[type='checkbox'],
|
|
|
|
+.pretty.--locked input[type='radio'] {
|
|
|
|
+ display: none;
|
|
|
|
+ cursor: not-allowed;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--primary .icon,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--primary svg.svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--primary .svg svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--primary .svg svg > *,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--primary .icon,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--primary svg.svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--primary .svg svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--primary .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary .icon,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--primary .icon,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--primary svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--primary .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--primary .svg svg > * {
|
|
|
|
+ color: #fff;
|
|
|
|
+ stroke: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--primary label:after,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--primary label:after,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary label:after,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--primary label:after {
|
|
|
|
+ background-color: #428bca !important;
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--primary-o .icon,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--primary-o svg.svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--primary-o .svg svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--primary-o .svg svg > *,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--primary-o .icon,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--primary-o svg.svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--primary-o .svg svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--primary-o .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o .icon,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o .icon,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o .svg svg > * {
|
|
|
|
+ stroke: #428bca;
|
|
|
|
+ color: #428bca;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--primary-o label:before,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--primary-o label:before,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o label:before,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o label:before {
|
|
|
|
+ border-color: #428bca !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--primary-o label:after,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--primary-o label:after,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--primary-o label:after,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--primary-o label:after {
|
|
|
|
+ background-color: #428bca !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--fill input[type='checkbox']:checked ~ .state.--primary-o label:after,
|
|
|
|
+.pretty.--fill input[type='radio']:checked ~ .state.--primary-o label:after {
|
|
|
|
+ background-color: transparent !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--icon input[type='checkbox'] ~ .state.--primary-o label:after,
|
|
|
|
+.pretty.--icon input[type='radio'] ~ .state.--primary-o label:after, .pretty.--svg input[type='checkbox'] ~ .state.--primary-o label:after,
|
|
|
|
+.pretty.--svg input[type='radio'] ~ .state.--primary-o label:after {
|
|
|
|
+ background-color: transparent !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary .icon,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--primary .icon {
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary label:after,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--primary label:after {
|
|
|
|
+ background-color: #428bca !important;
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--primary-o .icon,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary-o .icon {
|
|
|
|
+ color: #428bca;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--primary-o label:before,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary-o label:before {
|
|
|
|
+ border-color: #428bca !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--primary-o label:after,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--primary-o label:after {
|
|
|
|
+ background-color: #428bca;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--primary:before,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--primary:before {
|
|
|
|
+ border-color: #428bca;
|
|
|
|
+ background-color: #428bca;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--primary label:after,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--primary label:after {
|
|
|
|
+ background-color: #fff !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--primary-o:before,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--primary-o:before {
|
|
|
|
+ border-color: #428bca;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--primary:before,
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--primary:before, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--primary:before,
|
|
|
|
+.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--primary:before {
|
|
|
|
+ border-color: #428bca;
|
|
|
|
+ background-color: #428bca;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--primary label:after,
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--primary label:after, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--primary label:after,
|
|
|
|
+.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--primary label:after {
|
|
|
|
+ background-color: #428bca !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--primary-o:before,
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--primary-o:before {
|
|
|
|
+ border-color: #245682;
|
|
|
|
+ background-color: #245682;
|
|
|
|
+ zoom: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--info .icon,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--info svg.svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--info .svg svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--info .svg svg > *,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--info .icon,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--info svg.svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--info .svg svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--info .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info .icon,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--info .icon,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--info svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--info .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--info .svg svg > * {
|
|
|
|
+ color: #fff;
|
|
|
|
+ stroke: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--info label:after,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--info label:after,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info label:after,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--info label:after {
|
|
|
|
+ background-color: #5bc0de !important;
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--info-o .icon,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--info-o svg.svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--info-o .svg svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--info-o .svg svg > *,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--info-o .icon,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--info-o svg.svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--info-o .svg svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--info-o .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o .icon,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o .icon,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o .svg svg > * {
|
|
|
|
+ stroke: #5bc0de;
|
|
|
|
+ color: #5bc0de;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--info-o label:before,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--info-o label:before,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o label:before,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o label:before {
|
|
|
|
+ border-color: #5bc0de !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--info-o label:after,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--info-o label:after,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--info-o label:after,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--info-o label:after {
|
|
|
|
+ background-color: #5bc0de !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--fill input[type='checkbox']:checked ~ .state.--info-o label:after,
|
|
|
|
+.pretty.--fill input[type='radio']:checked ~ .state.--info-o label:after {
|
|
|
|
+ background-color: transparent !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--icon input[type='checkbox'] ~ .state.--info-o label:after,
|
|
|
|
+.pretty.--icon input[type='radio'] ~ .state.--info-o label:after, .pretty.--svg input[type='checkbox'] ~ .state.--info-o label:after,
|
|
|
|
+.pretty.--svg input[type='radio'] ~ .state.--info-o label:after {
|
|
|
|
+ background-color: transparent !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info .icon,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--info .icon {
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info label:after,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--info label:after {
|
|
|
|
+ background-color: #5bc0de !important;
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--info-o .icon,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info-o .icon {
|
|
|
|
+ color: #5bc0de;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--info-o label:before,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info-o label:before {
|
|
|
|
+ border-color: #5bc0de !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--info-o label:after,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--info-o label:after {
|
|
|
|
+ background-color: #5bc0de;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--info:before,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--info:before {
|
|
|
|
+ border-color: #5bc0de;
|
|
|
|
+ background-color: #5bc0de;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--info label:after,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--info label:after {
|
|
|
|
+ background-color: #fff !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--info-o:before,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--info-o:before {
|
|
|
|
+ border-color: #5bc0de;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--info:before,
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--info:before, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--info:before,
|
|
|
|
+.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--info:before {
|
|
|
|
+ border-color: #5bc0de;
|
|
|
|
+ background-color: #5bc0de;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--info label:after,
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--info label:after, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--info label:after,
|
|
|
|
+.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--info label:after {
|
|
|
|
+ background-color: #5bc0de !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--info-o:before,
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--info-o:before {
|
|
|
|
+ border-color: #2390b0;
|
|
|
|
+ background-color: #2390b0;
|
|
|
|
+ zoom: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--success .icon,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--success svg.svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--success .svg svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--success .svg svg > *,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--success .icon,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--success svg.svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--success .svg svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--success .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success .icon,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--success .icon,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--success svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--success .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--success .svg svg > * {
|
|
|
|
+ color: #fff;
|
|
|
|
+ stroke: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--success label:after,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--success label:after,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success label:after,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--success label:after {
|
|
|
|
+ background-color: #5cb85c !important;
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--success-o .icon,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--success-o svg.svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--success-o .svg svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--success-o .svg svg > *,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--success-o .icon,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--success-o svg.svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--success-o .svg svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--success-o .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o .icon,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o .icon,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o .svg svg > * {
|
|
|
|
+ stroke: #5cb85c;
|
|
|
|
+ color: #5cb85c;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--success-o label:before,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--success-o label:before,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o label:before,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o label:before {
|
|
|
|
+ border-color: #5cb85c !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--success-o label:after,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--success-o label:after,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--success-o label:after,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--success-o label:after {
|
|
|
|
+ background-color: #5cb85c !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--fill input[type='checkbox']:checked ~ .state.--success-o label:after,
|
|
|
|
+.pretty.--fill input[type='radio']:checked ~ .state.--success-o label:after {
|
|
|
|
+ background-color: transparent !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--icon input[type='checkbox'] ~ .state.--success-o label:after,
|
|
|
|
+.pretty.--icon input[type='radio'] ~ .state.--success-o label:after, .pretty.--svg input[type='checkbox'] ~ .state.--success-o label:after,
|
|
|
|
+.pretty.--svg input[type='radio'] ~ .state.--success-o label:after {
|
|
|
|
+ background-color: transparent !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success .icon,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--success .icon {
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success label:after,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--success label:after {
|
|
|
|
+ background-color: #5cb85c !important;
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--success-o .icon,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success-o .icon {
|
|
|
|
+ color: #5cb85c;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--success-o label:before,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success-o label:before {
|
|
|
|
+ border-color: #5cb85c !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--success-o label:after,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--success-o label:after {
|
|
|
|
+ background-color: #5cb85c;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--success:before,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--success:before {
|
|
|
|
+ border-color: #5cb85c;
|
|
|
|
+ background-color: #5cb85c;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--success label:after,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--success label:after {
|
|
|
|
+ background-color: #fff !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--success-o:before,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--success-o:before {
|
|
|
|
+ border-color: #5cb85c;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--success:before,
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--success:before, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--success:before,
|
|
|
|
+.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--success:before {
|
|
|
|
+ border-color: #5cb85c;
|
|
|
|
+ background-color: #5cb85c;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--success label:after,
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--success label:after, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--success label:after,
|
|
|
|
+.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--success label:after {
|
|
|
|
+ background-color: #5cb85c !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--success-o:before,
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--success-o:before {
|
|
|
|
+ border-color: #357935;
|
|
|
|
+ background-color: #357935;
|
|
|
|
+ zoom: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--warning .icon,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--warning svg.svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--warning .svg svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--warning .svg svg > *,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--warning .icon,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--warning svg.svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--warning .svg svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--warning .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning .icon,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--warning .icon,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--warning svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--warning .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--warning .svg svg > * {
|
|
|
|
+ color: #fff;
|
|
|
|
+ stroke: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--warning label:after,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--warning label:after,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning label:after,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--warning label:after {
|
|
|
|
+ background-color: #f0ad4e !important;
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--warning-o .icon,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--warning-o svg.svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--warning-o .svg svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--warning-o .svg svg > *,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--warning-o .icon,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--warning-o svg.svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--warning-o .svg svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--warning-o .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o .icon,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o .icon,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o .svg svg > * {
|
|
|
|
+ stroke: #f0ad4e;
|
|
|
|
+ color: #f0ad4e;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--warning-o label:before,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--warning-o label:before,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o label:before,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o label:before {
|
|
|
|
+ border-color: #f0ad4e !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--warning-o label:after,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--warning-o label:after,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--warning-o label:after,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--warning-o label:after {
|
|
|
|
+ background-color: #f0ad4e !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--fill input[type='checkbox']:checked ~ .state.--warning-o label:after,
|
|
|
|
+.pretty.--fill input[type='radio']:checked ~ .state.--warning-o label:after {
|
|
|
|
+ background-color: transparent !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--icon input[type='checkbox'] ~ .state.--warning-o label:after,
|
|
|
|
+.pretty.--icon input[type='radio'] ~ .state.--warning-o label:after, .pretty.--svg input[type='checkbox'] ~ .state.--warning-o label:after,
|
|
|
|
+.pretty.--svg input[type='radio'] ~ .state.--warning-o label:after {
|
|
|
|
+ background-color: transparent !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning .icon,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--warning .icon {
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning label:after,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--warning label:after {
|
|
|
|
+ background-color: #f0ad4e !important;
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--warning-o .icon,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning-o .icon {
|
|
|
|
+ color: #f0ad4e;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--warning-o label:before,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning-o label:before {
|
|
|
|
+ border-color: #f0ad4e !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--warning-o label:after,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--warning-o label:after {
|
|
|
|
+ background-color: #f0ad4e;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--warning:before,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--warning:before {
|
|
|
|
+ border-color: #f0ad4e;
|
|
|
|
+ background-color: #f0ad4e;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--warning label:after,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--warning label:after {
|
|
|
|
+ background-color: #fff !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--warning-o:before,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--warning-o:before {
|
|
|
|
+ border-color: #f0ad4e;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--warning:before,
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--warning:before, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--warning:before,
|
|
|
|
+.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--warning:before {
|
|
|
|
+ border-color: #f0ad4e;
|
|
|
|
+ background-color: #f0ad4e;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--warning label:after,
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--warning label:after, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--warning label:after,
|
|
|
|
+.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--warning label:after {
|
|
|
|
+ background-color: #f0ad4e !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--warning-o:before,
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--warning-o:before {
|
|
|
|
+ border-color: #c77c11;
|
|
|
|
+ background-color: #c77c11;
|
|
|
|
+ zoom: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--danger .icon,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--danger svg.svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--danger .svg svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--danger .svg svg > *,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--danger .icon,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--danger svg.svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--danger .svg svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--danger .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger .icon,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--danger .icon,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--danger svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--danger .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--danger .svg svg > * {
|
|
|
|
+ color: #fff;
|
|
|
|
+ stroke: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--danger label:after,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--danger label:after,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger label:after,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--danger label:after {
|
|
|
|
+ background-color: #d9534f !important;
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--danger-o .icon,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--danger-o svg.svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--danger-o .svg svg,
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--danger-o .svg svg > *,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--danger-o .icon,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--danger-o svg.svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--danger-o .svg svg,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--danger-o .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o .icon,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o .svg svg > *,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o .icon,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o svg.svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o .svg svg,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o .svg svg > * {
|
|
|
|
+ stroke: #d9534f;
|
|
|
|
+ color: #d9534f;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--danger-o label:before,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--danger-o label:before,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o label:before,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o label:before {
|
|
|
|
+ border-color: #d9534f !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty input[type='checkbox']:checked ~ .state.--danger-o label:after,
|
|
|
|
+.pretty input[type='radio']:checked ~ .state.--danger-o label:after,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--danger-o label:after,
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--danger-o label:after {
|
|
|
|
+ background-color: #d9534f !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--fill input[type='checkbox']:checked ~ .state.--danger-o label:after,
|
|
|
|
+.pretty.--fill input[type='radio']:checked ~ .state.--danger-o label:after {
|
|
|
|
+ background-color: transparent !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--icon input[type='checkbox'] ~ .state.--danger-o label:after,
|
|
|
|
+.pretty.--icon input[type='radio'] ~ .state.--danger-o label:after, .pretty.--svg input[type='checkbox'] ~ .state.--danger-o label:after,
|
|
|
|
+.pretty.--svg input[type='radio'] ~ .state.--danger-o label:after {
|
|
|
|
+ background-color: transparent !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger .icon,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--danger .icon {
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger label:after,
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--danger label:after {
|
|
|
|
+ background-color: #d9534f !important;
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--danger-o .icon,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger-o .icon {
|
|
|
|
+ color: #d9534f;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--danger-o label:before,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger-o label:before {
|
|
|
|
+ border-color: #d9534f !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--toggle input[type='radio'] ~ .state.--off.--danger-o label:after,
|
|
|
|
+.pretty.--toggle input[type='checkbox'] ~ .state.--off.--danger-o label:after {
|
|
|
|
+ background-color: #d9534f;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--danger:before,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--danger:before {
|
|
|
|
+ border-color: #d9534f;
|
|
|
|
+ background-color: #d9534f;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--danger label:after,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--danger label:after {
|
|
|
|
+ background-color: #fff !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch input[type='radio']:checked ~ .state.--danger-o:before,
|
|
|
|
+.pretty.--switch input[type='checkbox']:checked ~ .state.--danger-o:before {
|
|
|
|
+ border-color: #d9534f;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--danger:before,
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--danger:before, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--danger:before,
|
|
|
|
+.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--danger:before {
|
|
|
|
+ border-color: #d9534f;
|
|
|
|
+ background-color: #d9534f;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--danger label:after,
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--danger label:after, .pretty.--switch.--fill input[type='radio']:checked ~ .state.--danger label:after,
|
|
|
|
+.pretty.--switch.--fill input[type='checkbox']:checked ~ .state.--danger label:after {
|
|
|
|
+ background-color: #d9534f !important;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--switch.--slim input[type='checkbox']:checked ~ .state.--danger-o:before,
|
|
|
|
+.pretty.--switch.--slim input[type='radio']:checked ~ .state.--danger-o:before {
|
|
|
|
+ border-color: #a02622;
|
|
|
|
+ background-color: #a02622;
|
|
|
|
+ zoom: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@media print {
|
|
|
|
+ .pretty .state:before,
|
|
|
|
+ .pretty .state label:before,
|
|
|
|
+ .pretty .state label:after {
|
|
|
|
+ -webkit-print-color-adjust: exact;
|
|
|
|
+ print-color-adjust: exact;
|
|
|
|
+ color-adjust: exact;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state:not(.--is-hover),
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state:not(.--is-hover) {
|
|
|
|
+ display: none;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--is-hover,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--is-hover {
|
|
|
|
+ display: block;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--has-hover input[type='checkbox']:hover ~ .state.--is-hover .icon,
|
|
|
|
+.pretty.--has-hover input[type='radio']:hover ~ .state.--is-hover .icon {
|
|
|
|
+ display: block;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--has-focus input[type='checkbox']:focus ~ .state label:before,
|
|
|
|
+.pretty.--has-focus input[type='radio']:focus ~ .state label:before {
|
|
|
|
+ box-shadow: 0px 0px 3px 0px #bdc3c7;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--has-indeterminate input[type='checkbox']:indeterminate ~ .state:not(.--is-indeterminate) {
|
|
|
|
+ display: none;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--has-indeterminate input[type='checkbox']:indeterminate ~ .state.--is-indeterminate {
|
|
|
|
+ display: block;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.pretty.--has-indeterminate input[type='checkbox']:indeterminate ~ .state.--is-indeterminate .icon {
|
|
|
|
+ display: block;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/*
|
|
|
|
+
|
|
|
|
+default
|
|
|
|
+ outline
|
|
|
|
+ fill
|
|
|
|
+ thick
|
|
|
|
+icon
|
|
|
|
+svg
|
|
|
|
+image
|
|
|
|
+switch
|
|
|
|
+ inside
|
|
|
|
+ outside
|
|
|
|
+ thin
|
|
|
|
+toggle
|
|
|
|
+insideout
|
|
|
|
+
|
|
|
|
+--common--
|
|
|
|
+color
|
|
|
|
+print
|
|
|
|
+animation
|
|
|
|
+disabled
|
|
|
|
+round
|
|
|
|
+
|
|
|
|
+*/
|