/* ----------------------------- */ /* ==Checkbox, radio, switch */ /* ----------------------------- */ /* use .checkbox class on input type=checkbox */ /* recommanded HTML : */ /* use .radio class on input type=radio */ /* recommanded HTML : */ /* use .switch class on input type=checkbox */ // // common styles .switch, .checkbox, .radio { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; vertical-align: text-bottom; outline: 0; cursor: pointer; box-shadow: inset 0 0 0 1px $checkbox-color; border-radius: $checkbox-border-radius; background: #fff; ~ label { cursor: pointer; user-select: none; } &::-ms-check { display: none; // unstyle IE checkboxes } } // switch styling .switch { width: $checkbox-size *2; height: $checkbox-size; line-height: $checkbox-size; padding-left: $checkbox-size /4; padding-right: $checkbox-size /4; font-size: 60%; box-shadow: inset -#{$checkbox-size} 0 0 $checkbox-color, inset 0 0 0 1px $checkbox-color; transition: box-shadow .15s; &::before, &::after { color: #fff; } &::before { content: "off"; float: right; } &:checked { box-shadow: inset #{$checkbox-size} 0 0 $color-success, inset 0 0 0 1px $color-success; &::before { content: "on"; float: left; } } } // checkbox styling .checkbox { width: $checkbox-size; height: $checkbox-size; transition: background-color .15s; &:checked { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=); background-size: 60% 60%; background-position: center; background-repeat: no-repeat; background-color: $checkbox-color; } } // radio styling .radio { width: $checkbox-size; height: $checkbox-size; transition: background-color .15s; &:checked { background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E); background-size: 80% 80%; background-position: center; background-repeat: no-repeat; background-color: $checkbox-color; } }