devextreme/less/sources/widgets/generic/list.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/list.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) "./badge.generic.less";
@import (once) "./button.generic.less";
@import (once) "./scrollView.generic.less";

.dx-size-default() {
    @GENERIC_LIST_BORDER_WIDTH: 1px;

    @GENERIC_LIST_ITEM_HORIZONTAL_PADDING: 10px;
    @GENERIC_LIST_ITEM_BORDER_WIDTH: 1px;
    @GENERIC_LIST_GROUP_HEADER_VERTICAL_PADDING: @list-group-header-default-padding-top;

    @GENERIC_LIST_DELETEBUTTON_PADDING: 3px;

    @GENERIC_LIST_SELECT_ALL_MARGIN_TOP: -1px;
    @GENERIC_LIST_SELECT_ALL_MARGIN_RIGHT: 0;
    @GENERIC_LIST_SELECT_ALL_LABEL_MARGIN_TOP: 1px;
    @GENERIC_LIST_SELECT_ALL_LABEL_LINE_HEIGHT: 17px;

    @GENERIC_LIST_SEARCHBOX_MARGIN_BOTTOM: 5px;
}

.dx-size-compact() {
    @GENERIC_LIST_BORDER_WIDTH: 1px;

    @GENERIC_LIST_ITEM_HORIZONTAL_PADDING: 5px;
    @GENERIC_LIST_ITEM_BORDER_WIDTH: 0;
    @GENERIC_LIST_GROUP_HEADER_VERTICAL_PADDING: @list-group-header-compact-padding-top;

    @GENERIC_LIST_DELETEBUTTON_PADDING: 1px;

    @GENERIC_LIST_SELECT_ALL_MARGIN_TOP: 1px;
    @GENERIC_LIST_SELECT_ALL_MARGIN_RIGHT: @GENERIC_LIST_ITEM_HORIZONTAL_PADDING;
    @GENERIC_LIST_SELECT_ALL_LABEL_MARGIN_TOP: -1px;
    @GENERIC_LIST_SELECT_ALL_LABEL_LINE_HEIGHT: 16px;

    @GENERIC_LIST_SEARCHBOX_MARGIN_BOTTOM: 3px;
}

@GENERIC_MOBILE_LIST_ITEM_HORIZONTAL_PADDING: 15px;

@GENERIC_LIST_BORDER: @GENERIC_LIST_BORDER_WIDTH solid @list-border-color;
@GENERIC_LIST_ITEM_BORDER: @GENERIC_LIST_ITEM_BORDER_WIDTH solid @list-border-color;
@GENERIC_LIST_SEARCH_EDITOR_HEIGHT: round(@GENERIC_BASE_LINE_HEIGHT * @GENERIC_BASE_FONT_SIZE) + @GENERIC_BASE_INLINE_BORDEREDWIDGET_TOP_PADDING + @GENERIC_BASE_INLINE_BORDEREDWIDGET_BOTTOM_PADDING + 2 * @GENERIC_BASE_BORDER_WIDTH;


.dx-list-item-chevron {
    transform: rotate(0);
    border: none;
    opacity: 1;

    .dx-rtl & {
        transform: rotate(0);
    }

    .dx-icon(chevronnext);
    .dx-icon-sizing(@GENERIC_BASE_ICON_SIZE);

    margin-left: -5px;
    color: @list-item-chevron-icon-color;
}

.dx-list-item-icon-container {
    width: @GENERIC_BASE_ICON_SIZE + @GENERIC_LIST_ITEM_HORIZONTAL_PADDING;
    height: @GENERIC_BASE_ICON_SIZE;
    vertical-align: top;
}

.dx-list-item-icon {
    .dx-icon-sizing(@GENERIC_BASE_ICON_SIZE);
}

.dx-list-search {
    margin-bottom: @GENERIC_LIST_SEARCHBOX_MARGIN_BOTTOM;
}

.item-states() {
    &.dx-state-hover {
        background-color: @list-item-hover-bg;
        color: @list-item-hover-color;

        .dx-icon {
            color: @list-item-hover-color;
        }
    }

    &.dx-list-item-selected {
        background-color: @list-item-selected-bg;
        color: @list-item-selected-color;

        .dx-icon {
            color: @list-item-selected-color;
        }

        &.dx-state-hover:not(.dx-state-focused) {
            background-color: @list-item-selected-hover-bg;
            color: @list-item-color;
        }
    }

    &.dx-state-focused {
        background-color: @list-focused-bg;
        color: @list-item-focus-color;

        .dx-icon {
            color: @list-item-focus-color;
        }

        .dx-list-item-chevron {
            border-color: @list-chevron-focus-color;
        }
    }

    &.dx-state-focused.dx-list-item-selected {
        background-color: @list-item-focused-selected-bg;
        color: @base-inverted-text-color;
    }

    &.dx-state-active {
        background-color: @list-item-active-bg;
        color: @list-item-active-color;

        .dx-icon {
            color: @list-item-active-color;
        }

        .dx-list-slide-item-content {
            background-color: @list-item-active-bg;
            color: @list-item-active-color;
        }
    }

    .dx-icon {
        color: @list-icon-color;
    }

    &.dx-state-active,
    &.dx-state-focused {
        .dx-button .dx-icon {
            color: @button-icon-color;
        }
    }
}

.dx-list-sizing(@item_horizontal_padding) {
    .dx-list {
        border: none;

        &.dx-list-with-search .dx-scrollable-wrapper {
            height: calc(100% - round(@GENERIC_LIST_SEARCH_EDITOR_HEIGHT + @GENERIC_LIST_SEARCHBOX_MARGIN_BOTTOM));
        }

        .dx-empty-message {
            text-align: left;
        }

        &.dx-list-select-decorator-enabled {
            .dx-list-item,
            .dx-list-select-all {
                &.dx-state-hover {
                    .dx-radiobutton-icon:before,
                    .dx-checkbox-icon {
                        border-color: @checkbox-hover-border-color;
                    }
                }

                &.dx-state-focused {
                    .dx-radiobutton-icon:before,
                    .dx-checkbox-icon {
                        border: 1px solid @checkbox-focused-borderd-color;
                    }
                }
            }
        }

        &:not(.dx-list-select-decorator-enabled) {
            .dx-list-item {
                .item-states();
            }
        }
    }

    .dx-list-group-header {
        font-weight: bold;
        padding: @GENERIC_LIST_GROUP_HEADER_VERTICAL_PADDING @item_horizontal_padding @GENERIC_LIST_ITEM_VERTICAL_PADDING @item_horizontal_padding;
        border-top: @GENERIC_LIST_ITEM_BORDER;
        border-bottom: @list-group-header-border-bottom;
        background: @list-group-header-bg;
        color: @list-group-color;

        .dx-list-group:first-of-type & {
            border-top: none;
        }

        &:before {
            border-top-color: @list-group-color;
        }

        .dx-list-group-collapsed &:before {
            border-bottom-color: @list-group-color;
        }
    }


    .dx-list-item {
        &:first-of-type {
            border-top: none;
        }

        &:last-of-type {
            border-bottom: none;
        }

        .dx-icon-toggle-delete {
            background-image: @list-item-icon-toggle-delete-bg;
            background-size: 100%;
        }

        &.dx-list-item-ghost-reordering {
            &.dx-state-focused {
                &.dx-state-hover {
                    color: @list-item-ghost-color;
                    background: @list-item-ghost-bg;
                    border-top: 1px solid fade(@list-item-ghost-border-color, 50%);
                    border-bottom: 1px solid fade(@list-item-ghost-border-color, 50%);
                    box-shadow: 0 0 1px fade(@list-item-ghost-shadow-color, 10%), 0 1px 3px fade(@list-item-ghost-shadow-color, 20%);
                }
            }
        }
    }

    .dx-list-item,
    .dx-list .dx-empty-message {
        border-top: @GENERIC_LIST_ITEM_BORDER;
        color: @list-normal-color;

        .dx-list-item-separator-hidden & {
            border-top: none;
            border-bottom: none;
        }
    }

    .dx-list-item-content,
    .dx-list .dx-empty-message {
        padding: @GENERIC_LIST_ITEM_VERTICAL_PADDING @item_horizontal_padding;
    }

    .dx-list-next-button .dx-button {
        .dx-button-withtext-sizing();
    }

    .dx-list-item-chevron-container {
        width: 6px + @item_horizontal_padding;
    }

    .dx-list-border-visible {
        border: @GENERIC_LIST_BORDER;

        .dx-list-select-all {
            border-bottom: @GENERIC_LIST_BORDER;
        }
    }

    .dx-list-item-before-bag {
        &.dx-list-toggle-delete-switch-container {
            width: @item_horizontal_padding + 19px;
        }

        &.dx-list-select-checkbox-container,
        &.dx-list-select-radiobutton-container {
            width: @item_horizontal_padding + 21px;
        }

        .dx-button.dx-list-toggle-delete-switch {
            border: none;
            background: transparent;
            box-shadow: none;

            .dx-button-content {
                padding: 0;
            }
        }

        .dx-icon-toggle-delete {
            margin: @GENERIC_LIST_ITEM_VERTICAL_PADDING / 2 @item_horizontal_padding / 2 @GENERIC_LIST_ITEM_VERTICAL_PADDING / 2 @item_horizontal_padding;
            width: 9px + @GENERIC_LIST_ITEM_VERTICAL_PADDING;
            height: 9px + @GENERIC_LIST_ITEM_VERTICAL_PADDING;
        }

        .dx-list-select-checkbox,
        .dx-list-select-radiobutton {
            margin-top: @GENERIC_LIST_SELECT_ALL_MARGIN_TOP;
            margin-bottom: -3px;
            margin-left: @item_horizontal_padding;
        }
    }

    .dx-list-select-all {
        padding: @GENERIC_LIST_ITEM_VERTICAL_PADDING - 1px 0 @GENERIC_LIST_ITEM_VERTICAL_PADDING - 2px;
    }

    .dx-list-select-all-checkbox {
        float: left;
        margin: -1px @GENERIC_LIST_SELECT_ALL_MARGIN_RIGHT -3px @item_horizontal_padding;
    }

    .dx-list-select-all-label {
        line-height: @GENERIC_LIST_SELECT_ALL_LABEL_LINE_HEIGHT;
        padding: 0 @GENERIC_LIST_ITEM_HORIZONTAL_PADDING;
        margin-top: @GENERIC_LIST_SELECT_ALL_LABEL_MARGIN_TOP;
    }

    .dx-list-item-after-bag {
        &.dx-list-static-delete-button-container {
            width: @item_horizontal_padding + @GENERIC_BUTTON_ICON_SIZE + @GENERIC_LIST_DELETEBUTTON_PADDING * 2 + @GENERIC_BUTTON_BORDER_WEIGHT * 2;
        }

        &.dx-list-reorder-handle-container {
            width: @item_horizontal_padding + @GENERIC_BASE_ICON_SIZE * 1.3;
        }

        .dx-list-reorder-handle {
            .dx-icon(dragvertical);
            .dx-icon-sizing(@GENERIC_BASE_ICON_SIZE, @GENERIC_BASE_ICON_SIZE * 1.6);
        }
    }

    .dx-list-slide-menu-button {
        bottom: 1px;
    }

    .dx-list-slide-menu-button-delete {
        border: 1px solid transparent;
        color: @list-menu-button-delete-color;
        background-color: @list-menu-button-delete-bg;
    }

    .dx-list-slide-menu-button-menu {
        border: 1px solid transparent;
        color: @list-menu-button-default-color;
        background-color: @list-menu-button-default-bg;
    }

    .dx-list-switchable-delete-button,
    .dx-list-static-delete-button {
        margin-right: @item_horizontal_padding;
        padding: 0;

        .dx-button-content {
            padding: @GENERIC_LIST_DELETEBUTTON_PADDING;
        }
    }

    .dx-list-context-menucontent {
        background-color: @list-holdmenu-bg;
        border: 1px solid @list-holdmenu-border-color;
        border-radius: 0;
        box-shadow: 0 3px 10px @list-holdmenu-shadow-color;
    }

    .dx-state-disabled {
        &.dx-list-item,
        .dx-list-item {
            background-color: transparent;
            opacity: 0.6;
        }
    }

    .dx-rtl .dx-list,
    .dx-rtl.dx-list {
        .dx-empty-message {
            text-align: right;
        }

        .dx-list-item-before-bag {
            .dx-icon-toggle-delete {
                margin: @GENERIC_LIST_ITEM_VERTICAL_PADDING / 2 @item_horizontal_padding @GENERIC_LIST_ITEM_VERTICAL_PADDING / 2 @item_horizontal_padding / 2;
            }

            .dx-list-select-checkbox,
            .dx-list-select-radiobutton {
                margin-right: @item_horizontal_padding;
                margin-left: 1px;
            }
        }

        .dx-list-select-all-checkbox {
            float: right;
            margin-right: @item_horizontal_padding;
            margin-left: 1px;
        }

        .dx-list-switchable-delete-button {
            margin-left: @item_horizontal_padding;
            margin-right: 0;
        }
    }
}

.dx-list-sizing(@GENERIC_LIST_ITEM_HORIZONTAL_PADDING);

.dx-device-mobile {
    .dx-list-sizing(@GENERIC_MOBILE_LIST_ITEM_HORIZONTAL_PADDING);
}