devextreme/less/sources/widgets/generic/switch.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/switch.generic.less)
* Version: 20.1.4
* Build date: Tue Jun 02 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "./validation.generic.less";

.dx-size-default() {
    @GENERIC_SWITCH_WIDTH: 44px;
    @GENERIC_SWITCH_HANDLE_WIDTH: 14px;
    @GENERIC_SWITCH_HANDLE_OFFSET: 2px;
    @GENERIC_SWITCH_CONTAINER_ADJUSTMENT: 6px;
    @GENERIC_SWITCH_FONT_SIZE: 9px;
    @GENERIC_SWITCH_ON_OFF_ADDING_PADDING: 2px;
}

.dx-size-compact() {
    @GENERIC_SWITCH_WIDTH: 36px;
    @GENERIC_SWITCH_HANDLE_WIDTH: 14px;
    @GENERIC_SWITCH_HANDLE_OFFSET: 1px;
    @GENERIC_SWITCH_CONTAINER_ADJUSTMENT: 4px;
    @GENERIC_SWITCH_FONT_SIZE: 8px;
    @GENERIC_SWITCH_ON_OFF_ADDING_PADDING: 0;
}

@GENERIC_SWITCH_BORDER_WEIGHT: 1px;
@GENERIC_SWITCH_INNER_SIZE: @GENERIC_SWITCH_HEIGHT - @GENERIC_SWITCH_BORDER_WEIGHT*2;

.dx-switch {
    width: @GENERIC_SWITCH_WIDTH;
    height: @GENERIC_SWITCH_HEIGHT;

    &.dx-state-readonly {
        .dx-switch-container {
            border-color: @switch-readonly-border-color;
            background-color: @switch-container-readonly-bg;
        }
    }

    &.dx-state-active {
        .dx-switch-handle:before {
            background-color: @switch-handle-active-bg;
        }

        .dx-switch-container {
            border-color: @switch-active-border-color;
            background-color: @switch-container-active-bg;
        }
    }

    &.dx-state-hover {
        .dx-switch-handle:before {
            background-color: @switch-handle-bg;
        }

        .dx-switch-container {
            background-color: @switch-hover-bg;
            border-color: @switch-hover-border-color;
        }
    }

    &.dx-state-focused {
        .dx-switch-container {
            border-color: @switch-focused-border-color;
        }

        .dx-switch-handle:before {
            background-color: @switch-handle-bg;
        }

        &.dx-state-active {
            .dx-switch-handle:before {
                background-color: @switch-handle-active-bg;
            }
        }
    }
}

.dx-switch-container {
    overflow: hidden;
    margin: 0 (-@GENERIC_SWITCH_CONTAINER_ADJUSTMENT) 0 0;
    padding: 0 @GENERIC_SWITCH_HANDLE_OFFSET;
    height: @GENERIC_SWITCH_HEIGHT;
    border: @GENERIC_SWITCH_BORDER_WEIGHT solid @switch-border-color;
    background: @switch-bg;
    border-radius: @switch-border-radius;
}

.dx-switch-inner {
    width: 200%;
    height: 100%;
}

.dx-switch-on,
.dx-switch-off {
    float: left;
    flex-shrink: 0;
    width: 50%;
    padding-right: @GENERIC_SWITCH_HANDLE_WIDTH + @GENERIC_SWITCH_ON_OFF_ADDING_PADDING;
    line-height: @GENERIC_SWITCH_INNER_SIZE;
    text-align: center;
    font-size: @GENERIC_SWITCH_FONT_SIZE;
    font-weight: 600;
    .dx-overflow();

    box-sizing: border-box;
}

.dx-switch-off {
    padding-left: @GENERIC_SWITCH_HANDLE_OFFSET;
    color: @switch-off-color;
}

.dx-switch-on {
    color: @switch-on-color;
}

.dx-switch-handle {
    position: relative;
    float: left;
    flex-basis: @GENERIC_SWITCH_HANDLE_WIDTH;
    flex-shrink: 0;
    width: @GENERIC_SWITCH_HANDLE_WIDTH;
    height: @GENERIC_SWITCH_INNER_SIZE - @GENERIC_SWITCH_HANDLE_OFFSET*2;
    margin-top: @GENERIC_SWITCH_HANDLE_OFFSET;
    box-sizing: border-box;

    &:before {
        display: block;
        content: ' ';
        width: 100%;
        height: 100%;
        background-color: @switch-handle-off-bg;
        border-radius: @switch-handle-border-radius;
    }
}

.dx-switch-on-value {
    .dx-switch-handle:before {
        background-color: @switch-handle-bg;
    }
}

.dx-rtl .dx-switch,
.dx-switch.dx-rtl {
    .dx-switch-on,
    .dx-switch-off {
        float: right;
    }

    .dx-switch-on {
        padding-left: @GENERIC_SWITCH_HANDLE_WIDTH + @GENERIC_SWITCH_ON_OFF_ADDING_PADDING;
        padding-right: @GENERIC_SWITCH_HANDLE_OFFSET;
    }

    .dx-switch-off {
        margin-left: 0;
    }

    .dx-switch-handle {
        float: right;
        margin-left: 0;
        margin-right: -@GENERIC_SWITCH_HANDLE_WIDTH;
    }

    .dx-switch-container {
        margin: 0 0 0 (-@GENERIC_SWITCH_CONTAINER_ADJUSTMENT);
    }
}

.dx-invalid {
    &.dx-switch .dx-switch-container {
        border-color: @base-invalid-faded-border-color;
    }

    &.dx-state-focused,
    &.dx-state-hover {
        .dx-switch-container {
            border-color: @base-invalid-color;
        }
    }

    &.dx-state-focused,
    &.dx-state-hover,
    &.dx-switch-on-value {
        .dx-switch-handle:before {
            background-color: @base-invalid-color;
        }
    }

    .dx-switch-handle:before {
        background-color: @base-invalid-faded-border-color;
    }
}