add extjs 6.0.1 sources

[extjs.git] / extjs / modern / theme-mountainview / sass / src / field / Checkbox.scss

/**\r
 * @class Ext.field.Checkbox\r
 */\r
\r
@mixin checkmark($color: #000){\r
    @extend .x-checkmark-base;\r
    color: $color;\r
}\r
\r
.x-checkmark-base {\r
    position: absolute;\r
    top: -2px;\r
    right: -3px;\r
    bottom: 0;\r
    content: '3';\r
    // TODO: Use FontAwesome\r
    font-family: 'Pictos';\r
    font-size: 23px;\r
    text-align: right;\r
    line-height: 1.9em;\r
    @include text-shadow(\r
        0 -1px $background-color,\r
        0 1px $background-color,\r
        -1px 0 $background-color,\r
        1px 0 $background-color,\r
        0 2px 4px rgba($base-color, .3),\r
        0 -2px 4px rgba($base-color, .3),\r
        2px 0 4px rgba($base-color, .3),\r
        -2px 0 4px rgba($base-color, .3)\r
    );\r
}\r
\r
.x-field-checkbox .x-field-mask::before,\r
.x-field-radio .x-field-mask::before,\r
.x-field-radio .x-field-mask::after {\r
    content: '';\r
    position: absolute;\r
    top: 50%;\r
    right: 0;\r
    margin-top: -10px;\r
    height: 20px;\r
    width: 20px;\r
    border: 1px solid $foreground-color;\r
}\r
\r
.x-field-checkbox .x-field-mask::after {\r
    @include checkmark($base-color);\r
    visibility: hidden;\r
}\r
\r
.x-input-checkbox,\r
.x-input-radio {\r
    visibility: hidden;\r
}\r
\r
.x-input-el:checked + .x-field-mask::after {\r
    visibility: visible;\r
}\r
\r
.x-item-disabled {\r
    &.x-field-checkbox .x-field-mask::before,\r
    &.x-field-radio .x-field-mask::before {\r
        border-color: $secondary-color;\r
    }\r
\r
    &.x-field-checkbox .x-input-el:checked + .x-field-mask::after {\r
        text-shadow: none;\r
        color: $foreground-color;\r
    }\r
}\r