devextreme/less/sources/widgets/generic/tagBox.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/tagBox.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) "./selectBox.generic.less";

.dx-size-default() {
    @GENERIC_TAGBOX_TAG_CONTAINER_PADDING_BOTTOM: 4px;
    @GENERIC_TAGBOX_TAG_CONTENT_MARGIN: 4px 0 0 4px;
    @GENERIC_TAGBOX_TAG_CONTENT_PADDING_LEFT: 6px;
    @GENERIC_TAGBOX_TAG_CONTENT_PADDING_RIGHT: 25px;
    @GENERIC_TAGBOX_TAG_CONTENT_PADDING: 3px @GENERIC_TAGBOX_TAG_CONTENT_PADDING_RIGHT 4px @GENERIC_TAGBOX_TAG_CONTENT_PADDING_LEFT;
    @GENERIC_TAGBOX_REMOVE_BUTTON_RIGHT: 5px;
    @GENERIC_TAGBOX_REMOVE_BUTTON_WIDTH: 25px;
    @GENERIC_TAGBOX_INPUT_MARGIN_LEFT: 5px;
    @GENERIC_TAGBOX_SELECT_ALL_PADDING_BOTTOM: 11px;
    @GENERIC_TAGBOX_SELECT_ALL_MARGIN_BOTTOM: 3px;
}
.dx-size-compact() {
    @GENERIC_TAGBOX_TAG_CONTAINER_PADDING_BOTTOM: 2px;
    @GENERIC_TAGBOX_TAG_CONTENT_MARGIN: 2px 0 0 2px;
    @GENERIC_TAGBOX_TAG_CONTENT_PADDING_LEFT: 4px;
    @GENERIC_TAGBOX_TAG_CONTENT_PADDING_RIGHT: 17px;
    @GENERIC_TAGBOX_TAG_CONTENT_PADDING: 2px @GENERIC_TAGBOX_TAG_CONTENT_PADDING_RIGHT 2px @GENERIC_TAGBOX_TAG_CONTENT_PADDING_LEFT;
    @GENERIC_TAGBOX_REMOVE_BUTTON_RIGHT: 3px;
    @GENERIC_TAGBOX_REMOVE_BUTTON_WIDTH: 17px;
    @GENERIC_TAGBOX_INPUT_MARGIN_LEFT: 3px;
    @GENERIC_TAGBOX_SELECT_ALL_PADDING_BOTTOM: 5px;
    @GENERIC_TAGBOX_SELECT_ALL_MARGIN_BOTTOM: 1px;
}

.dx-tagbox:not(.dx-texteditor-empty) {
    .dx-texteditor-input {
        padding-left: 0;
        margin-left: @GENERIC_TAGBOX_INPUT_MARGIN_LEFT;

        .dx-rtl&,
        .dx-rtl & {
            padding-right: 0;
            padding-left: 0;
            margin-right: 0;
            margin-left: 0;
        }
    }
}

.dx-tagbox-single-line {
    .dx-tag-container {
        padding-right: 0;
    }
}

.dx-tagbox:not(.dx-tagbox-single-line) {
    .dx-texteditor-input {
        height: auto;
    }
}

.dx-tag-container.dx-texteditor-input-container {
    padding-bottom: @GENERIC_TAGBOX_TAG_CONTAINER_PADDING_BOTTOM;

    .dx-texteditor-input {
        padding-bottom: @GENERIC_BASE_INLINE_BORDEREDWIDGET_BOTTOM_PADDING - @GENERIC_TAGBOX_TAG_CONTAINER_PADDING_BOTTOM;
        min-height: @GENERIC_TEXTEDITOR_INPUT_HEIGHT - @GENERIC_TAGBOX_TAG_CONTAINER_PADDING_BOTTOM;
    }
}

.dx-tag-content {
    margin: @GENERIC_TAGBOX_TAG_CONTENT_MARGIN;
    padding: @GENERIC_TAGBOX_TAG_CONTENT_PADDING;
    min-width: 40px;
    background-color: @tagbox-tag-bg;
    border-radius: @tagbox-tag-border-radius;
    color: @tagbox-tag-color;
}

.dx-tag-remove-button {
    width: @GENERIC_TAGBOX_REMOVE_BUTTON_WIDTH;
    height: 100%;

    &:before,
    &:after {
        right: 4px + @GENERIC_TAGBOX_REMOVE_BUTTON_RIGHT;
        margin-top: -5px;
        width: 3px;
        height: 11px;
        background: @tagbox-tag-button-remove-bg;
    }

    &:after {
        right: @GENERIC_TAGBOX_REMOVE_BUTTON_RIGHT;
        margin-top: -1px;
        width: 11px;
        height: 3px;
    }

    &:active {
        &:before,
        &:after {
            background: @tagbox-tag-button-remove-active-bg;
        }
    }
}

.dx-tag.dx-state-focused {
    .dx-tag-content {
        background-color: @tagbox-tag-focused-bg;
        color: @tagbox-tag-focused-color;
    }

    .dx-tag-remove-button {
        &:before,
        &:after {
            background-color: @tagbox-tag-focused-button-remove-bg;
        }

        &:active {
            &:before,
            &:after {
                background: @tagbox-tag-button-remove-active-bg;
            }
        }
    }
}

.tagbox-badge-offset() {
    right: @GENERIC_INVALID_BADGE_HORIZONTAL_PADDING;

    .dx-rtl&,
    .dx-rtl & {
        left: @GENERIC_INVALID_BADGE_HORIZONTAL_PADDING;
    }
}

.dx-tagbox.dx-invalid,
.dx-tagbox.dx-valid {
    .dx-texteditor-container {
        &:after {
            .tagbox-badge-offset();
        }
    }
}

.dx-tagbox.dx-validation-pending {
    .dx-texteditor-container {
        .dx-pending-indicator {
            .tagbox-badge-offset();
        }
    }
}

.dx-tagbox-popup-wrapper {
    .dx-list-select-all {
        border-bottom: 1px solid @tagbox-select-all-border-color;
        padding-bottom: @GENERIC_TAGBOX_SELECT_ALL_PADDING_BOTTOM;
        margin-bottom: @GENERIC_TAGBOX_SELECT_ALL_MARGIN_BOTTOM;
    }
}

.dx-rtl {
    .dx-tag-content {
        padding-right: @GENERIC_TAGBOX_TAG_CONTENT_PADDING_LEFT;
        padding-left: @GENERIC_TAGBOX_TAG_CONTENT_PADDING_RIGHT;
    }

    .dx-tag-remove-button {
        &:before {
            right: auto;
            left: 4px + @GENERIC_TAGBOX_REMOVE_BUTTON_RIGHT;
        }

        &:after {
            right: auto;
            left: @GENERIC_TAGBOX_REMOVE_BUTTON_RIGHT;
        }
    }
}