// // Checkbox - JS // ---------------------------------------- .form-checkbox-js { width: 22px; height: 22px; font-size: 24px; padding: 0; border: 0; background-color: $checkbox-bgr-color; border-radius: (12px / 3); font-family: 'TeleIconUi'; line-height: 1px; position: relative; -webkit-font-smoothing: antialiased; // reduce font weight -moz-osx-font-smoothing: grayscale; // reduce font weight @include user-select(none); @include transition(all $transition-time-out $transition-function); &.focus, &:focus { outline: 0; } &.focus { // since we simulate the focus behavior, we need a real class background-color: hsv-darken($checkbox-bgr-color, 21%, true); } &.hover, &:hover { background-color: hsv-darken($checkbox-bgr-color, 7%, true); @include transition($transition-time-in, '-duration'); } &.active, &:active { background-color: hsv-darken($checkbox-bgr-color, 15%, true); } // outline > .border { color: $checkbox-border-color; position: absolute; top: 9px; left: -1px; &:before { content: 'A'; } } > .check { font-size: 24px; position: absolute; top: 9px; left: -1px; color: $checkbox-check-color; &:before { content: ''; } } &.checked > .check:before { content: 'B'; } fieldset[disabled] &, &[disabled], &.disabled { cursor: not-allowed; background-color: $checkbox-disabled-bgr-color; > .border:before { color: $checkbox-disabled-border-color; } > .check:before { color: $checkbox-disabled-check-color; } } .form-checkbox-set & { vertical-align: middle; float: left; margin-left: -36px; margin-right: 12px; } } // <= IE8 .lte-ie8 { .form-checkbox-js { background-color: transparent !important; background-repeat: no-repeat; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAYCAYAAAAxkDmIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozNzdDRDJBNDk3RTFFMzExODA1Q0VBNjZFMjk1MzI2MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRDA0Mjc4MUUxQTcxMUUzOUIxMEY2RkFFQTZEM0FCMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRDA0Mjc4MEUxQTcxMUUzOUIxMEY2RkFFQTZEM0FCMSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM4N0NEMkE0OTdFMUUzMTE4MDVDRUE2NkUyOTUzMjYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM3N0NEMkE0OTdFMUUzMTE4MDVDRUE2NkUyOTUzMjYyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+HYcNygAAAP5JREFUeNrsmjFqwzAAReWQsRDImgNk8wlaqiUn6pqxa27SGxQ6lR7BNzAEhAWCroF8geZ2SD6C8B58Izw8Yx7ePCzLEsROO2nP7XwLs/atveWc53bP4k8pWf2lFKs/xmj11/OgwHsdfrRtuC9Ze1Hki9OvyFa/Ilv9imz1r3V5N8hDc1b3BX8/fw18CD4O7QXwd/LXwBvjA56CF/z/+FcBHhoCExgIDAQGAgOBgcBAYAIDgYHAQGAgMBAY/g5cjP5f/H39NfCX8QGf+Pv66x8dR+01eH76OrYz/k7++gVP2qh9aOc7iM/NNeacJ6c/pWT1l1Ks/hij1V/dVwEGAJDahM+tVIFSAAAAAElFTkSuQmCC'); &.focus, &:focus { background-position: -72px 0; } &.hover, &:hover { background-position: -24px 0; } &.active, &:active { background-position: -47px 1px; // -48px 0 -3d click fx ie } &[disabled], &.disabled { background-position: -96px 0; } } } .lte-ie8 fieldset[disabled] .form-checkbox-js { background-position: -96px 0; }