devextreme/less/sources/widgets/material/numberBox.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/numberBox.material.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) "./textEditor.material.less";

.dx-size-default() {
    @MATERIAL_NUMBERBOX_SPIN_CONTAINER_WIDTH: 24px;
    @MATERIAL_NUMBERBOX_SPIN_PADDING: 1px;
    @MATERIAL_NUMBERBOX_TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH: 74px;
    @MATERIAL_NUMBERBOX_CLEAR_BUTTON_AREA_WIDTH: 32px;
}
.dx-size-compact() {
    @MATERIAL_NUMBERBOX_SPIN_CONTAINER_WIDTH: 24px;
    @MATERIAL_NUMBERBOX_SPIN_PADDING: 1px;
    @MATERIAL_NUMBERBOX_TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH: 74px;
    @MATERIAL_NUMBERBOX_CLEAR_BUTTON_AREA_WIDTH: 32px;
}


.dx-numberbox-spin-container {
    overflow: hidden;
    width: @MATERIAL_NUMBERBOX_SPIN_CONTAINER_WIDTH;

    .dx-state-disabled & {
        opacity: 1;
    }
}

.dx-numberbox-spin-up-icon {
    .dx-icon(spinup);

    color: @numberbox-spin-icon-color;
}

.dx-numberbox-spin-down-icon {
    .dx-icon(spindown);

    color: @numberbox-spin-icon-color;
}

.dx-numberbox-spin-up-icon,
.dx-numberbox-spin-down-icon {
    .dx-icon-font-centered-sizing(@MATERIAL_BASE_ICON_SIZE);
}

.dx-numberbox-spin-button {
    padding: @MATERIAL_NUMBERBOX_SPIN_PADDING;
    height: 50%;
}

.dx-numberbox-spin.dx-numberbox-box {
    &.dx-editor-underlined {
        .dx-texteditor-input {
            padding-right: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
        }

        .validation-icon-position();
    }

    &.dx-editor-filled,
    &.dx-editor-outlined {
        .dx-texteditor-input {
            padding-right: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
        }

        .validation-icon-position();
    }
}

.dx-numberbox-spin-touch-friendly {
    .validation-icon-position();

    .dx-numberbox-spin-container {
        width: @MATERIAL_NUMBERBOX_TOUCH_FRIENDLY_SPIN_CONTAINER_WIDTH;
        border-left: none;
    }

    .dx-numberbox-spin-up-icon,
    .dx-numberbox-spin-down-icon {
        background-position: center;
    }

    &.dx-editor-underlined {
        &.dx-show-clear-button .dx-texteditor-input {
            padding-right: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
        }
    }

    &.dx-editor-filled,
    &.dx-editor-outlined {
        &.dx-show-clear-button .dx-texteditor-input {
            padding-right: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
        }
    }
}


.dx-rtl .dx-numberbox,
.dx-numberbox.dx-rtl {
    &.dx-numberbox-spin-touch-friendly {
        .dx-numberbox-spin-container {
            border-right: none;
        }

        &.dx-show-clear-button .dx-texteditor-input {
            padding-left: @MATERIAL_NUMBERBOX_SPIN_CONTAINER_WIDTH;
        }
    }

    &.dx-numberbox-spin {
        &.dx-show-clear-button {
            .dx-texteditor-input {
                padding-left: @MATERIAL_NUMBERBOX_SPIN_CONTAINER_WIDTH;
            }
        }

        &.dx-editor-underlined {
            .dx-texteditor-input {
                padding-left: @MATERIAL_STANDARD_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
            }
        }

        &.dx-editor-filled,
        &.dx-editor-outlined {
            .dx-texteditor-input {
                padding-left: @MATERIAL_FILLED_TEXTEDITOR_INPUT_HORIZONTAL_PADDING;
            }
        }
    }
}