// // Copyright (c) Tiny Technologies, Inc. All rights reserved. // Licensed under the LGPL or a commercial license. // For LGPL see License.txt in the project root for license information. // For commercial licenses see https://www.tiny.cloud/ // // // Checkbox // @checkbox-unselected-color: contrast(@background-color, fade(@color-black, 30%), fade(@color-white, 20%)); @checkbox-selected-color: @color-tint; @checkbox-indeterminate-color: @checkbox-selected-color; @checkbox-disabled-text-color: fade(@text-color, 50%); @checkbox-focus-box-shadow: inset 0 0 0 1px @button-background-color; @checkbox-focus-border-radius: @control-border-radius; .tox { .tox-checkbox { align-items: center; border-radius: @control-border-radius; cursor: pointer; display: flex; height: 36px; min-width: 36px; } .tox-checkbox__input { /* Hide from view but visible to screen readers */ height: 1px; overflow: hidden; position: absolute; top: auto; width: 1px; } .tox-checkbox__icons { align-items: center; border-radius: @checkbox-focus-border-radius; box-shadow: @checkbox-unfocused-box-shadow; box-sizing: content-box; display: flex; height: @textfield-line-height; justify-content: center; padding: calc(@button-padding-y - @button-border-width); width: @textfield-line-height; .tox-checkbox-icon__unchecked svg { display: block; fill: @checkbox-unselected-color; } .tox-checkbox-icon__indeterminate svg { display: none; fill: @checkbox-indeterminate-color; } .tox-checkbox-icon__checked svg { display: none; fill: @checkbox-selected-color; } } .tox-checkbox__icon { // } .tox-checkbox--disabled { color: @checkbox-disabled-text-color; cursor: not-allowed; } .tox-checkbox--disabled .tox-checkbox__icons { .tox-checkbox-icon__checked svg { fill: @checkbox-disabled-text-color; } .tox-checkbox-icon__unchecked svg { fill: @checkbox-disabled-text-color; } .tox-checkbox-icon__indeterminate svg { fill: @checkbox-disabled-text-color; } } input.tox-checkbox__input:checked + .tox-checkbox__icons { .tox-checkbox-icon__unchecked svg { display: none; } .tox-checkbox-icon__checked svg { display: block; } } input.tox-checkbox__input:indeterminate + .tox-checkbox__icons { .tox-checkbox-icon__unchecked svg { display: none; } .tox-checkbox-icon__indeterminate svg { display: block; } } input.tox-checkbox__input:focus + .tox-checkbox__icons { border-radius: @checkbox-focus-border-radius; box-shadow: @checkbox-focus-box-shadow; padding: calc(@button-padding-y - @button-border-width); } } .tox:not([dir=rtl]) { .tox-checkbox__label { margin-left: @pad-xs; } .tox-checkbox__input { left: -10000px; } .tox-bar { .tox-checkbox { margin-left: @pad-xs; } } } // RTL .tox[dir=rtl] { .tox-checkbox__label { margin-right: @pad-xs; } .tox-checkbox__input { right: -10000px; } .tox-bar { .tox-checkbox { margin-right: @pad-xs; } } }