devextreme/less/sources/widgets/ios7/tagBox.ios7.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

.dx-tagbox:not(.dx-texteditor-empty) {
    &.dx-show-clear-button .dx-icon-clear {
        position: absolute;
        top: 50%;
        margin-top: -@CLEAR_ICON_SIZE/2;
        right: auto;
    }
}

.dx-texteditor-container {
    background: #fff;
}

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

.dx-tagbox-single-line {
    .dx-texteditor-container();

    .dx-dropdowneditor-input-wrapper {
        border: none;
    }

    &.dx-tagbox-only-select {
        .dx-texteditor-input {
            padding-left: 0;
        }
    }
}

.dx-tag-content {
    min-width: 40px;
    margin-top: 2px;
    margin-left: 2px;
    padding: 4px 19px 4px 7px;
    color: #fff;
    font-size: 1em;
    background-color: @IOS7_TAGBOX_TAG_ITEM_BACKGROUND_COLOR;
    border-radius: 10px;
}

.dx-tag-remove-button {
    padding: 7px 5px;
    width: 24px;
    height: 24px;

    &:before,
    &:after {
        left: 12px;
        margin-top: -5px;
        width: 2px;
        height: 12px;
        background: #fff;
    }

    &:after {
        left: 7px;
        margin-top: 0;
        width: 12px;
        height: 2px;
    }

    .dx-hairlines & {
        top: 2px;
    }

    &:active {
        &:before,
        &:after {
            background: lighten(@IOS7_TAGBOX_TAG_ITEM_BACKGROUND_COLOR, 25%);
        }
    }
}

.dx-tag.dx-state-focused {
    .dx-tag-content {
        background: @IOS7_TAGBOX_TAG_FOCUSED_BACKGROUND;
    }
}

.dx-tagbox-popup-wrapper {
    .dx-list-select-all:after {
        margin-left: 0;
    }
}

.dx-rtl {
    &.dx-tagbox.dx-show-clear-button .dx-icon-clear {
        left: auto;
        right: auto;
    }

    .dx-tag-content {
        padding-right: 7px;
        padding-left: 19px;
    }

    .dx-tag-remove-button {
        &:before {
            right: 12px;
            left: auto;
        }

        &:after {
            right: 7px;
            left: auto;
        }
    }
}