formstone
Version:
Library of modular front end components.
2 lines • 3.41 kB
CSS
/*! formstone v1.4.7 [checkbox.css] 2018-05-22 | GPL-3.0 License | formstone.it */
.fs-checkbox{display:inline-block;vertical-align:middle}.fs-checkbox,.fs-checkbox *,.fs-checkbox :after,.fs-checkbox :before,.fs-checkbox:after,.fs-checkbox:before{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:none;transition:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fs-checkbox-element_placeholder{display:none;visibility:hidden}.fs-checkbox-element{width:110%;height:110%;position:absolute;top:-5%;right:-5%;bottom:-5%;left:-5%;z-index:-1;background:0 0;border:0;margin:0;padding:0;pointer-events:none;-webkit-transition:none;transition:none;opacity:0;-webkit-appearance:none}.fs-checkbox-label{cursor:pointer;display:inline-block;line-height:20px;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fs-checkbox-marker{position:relative;width:20px;height:20px;border:1px solid;cursor:pointer;display:inline-block}.fs-checkbox-flag{width:100%;height:100%;margin:0}.fs-checkbox-flag:before{width:5px;height:10px;border:2px solid;border-top:0;border-left:0;content:'';display:block;margin:3px 0 0 6px;-webkit-transition:-webkit-transform .15s ease;transition:-webkit-transform .15s ease;transition:transform .15s ease;transition:transform .15s ease,-webkit-transform .15s ease;-webkit-transform:rotate(45deg) scale(0);transform:rotate(45deg) scale(0)}.fs-checkbox-checked .fs-checkbox-flag:before{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1)}.fs-checkbox-radio .fs-checkbox-marker{position:relative;border-radius:100%}.fs-checkbox-radio .fs-checkbox-flag{width:10px;height:10px;position:absolute;top:0;right:0;bottom:0;left:0;background:#666;border-radius:100%;margin:auto;-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform .15s ease;transition:-webkit-transform .15s ease;transition:transform .15s ease;transition:transform .15s ease,-webkit-transform .15s ease}.fs-checkbox-radio .fs-checkbox-flag:before{display:none}.fs-checkbox-radio.fs-checkbox-checked .fs-checkbox-flag{-webkit-transform:scale(1);transform:scale(1)}.fs-checkbox-radio.fs-checkbox-checked .fs-checkbox-flag:before{display:none}.fs-checkbox-disabled{cursor:default;opacity:.5}.fs-checkbox-label.fs-checkbox-disabled{cursor:default}.fs-checkbox-disabled .fs-checkbox-marker{cursor:default}.fs-checkbox-toggle{position:relative}.fs-checkbox-label.fs-checkbox-toggle{line-height:40px}.fs-checkbox-toggle .fs-checkbox-marker{width:100px;height:40px;position:relative}.fs-checkbox-toggle .fs-checkbox-marker:after{clear:both;content:'';display:table}.fs-checkbox-toggle .fs-checkbox-flag{width:50%;height:100%;position:absolute;top:0;left:0;background:#666;display:block;-webkit-transition:left .15s ease;transition:left .15s ease}.no-touch .fs-checkbox-toggle:hover .fs-checkbox-flag:after{opacity:1}.fs-checkbox-toggle.fs-checkbox-checked .fs-checkbox-flag{left:50%}.fs-checkbox-toggle.fs-checkbox-checked .fs-checkbox-flag:before{display:none}.fs-checkbox-toggle.fs-checkbox-disabled .fs-checkbox-flag:after{display:none}.fs-checkbox-toggle .fs-checkbox-state{width:50%;display:block;line-height:40px;margin:0;text-align:center}.fs-checkbox-toggle .fs-checkbox-state_on{float:left}.fs-checkbox-toggle .fs-checkbox-state_off{float:right}