devextreme/less/sources/widgets/material/list.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

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

.dx-size-default() {
    @MATERIAL_LIST_VERTICAL_PADDING: 8px;

    @MATERIAL_LIST_ITEM_HEIGHT: 48px;
    @MATERIAL_LIST_ITEM_VERTICAL_PADDING: 14px;
    @MATERIAL_LIST_ITEM_HORIZONTAL_PADDING: 16px;
    @MATERIAL_LIST_GROUP_HEADER_VERTICAL_PADDING: 14px;

    @MATERIAL_LIST_SELECT_ALL_MARGIN_TOP: -1px;
    @MATERIAL_LIST_SELECT_ALL_MARGIN_RIGHT: 0;
    @MATERIAL_LIST_SELECT_ALL_LABEL_MARGIN_TOP: 2px;
    @MATERIAL_LIST_SELECT_ALL_LABEL_LINE_HEIGHT: 17px;
    @MATERIAL_LIST_DELETEBUTTON_PADDING: 3px;

    @MATERIAL_LIST_SEARCHBOX_VERTICAL_PADDING: 6px;
    @MATERIAL_LIST_NEXT_BUTTON_HORIZONTAL_PADDING: 58px;

    @MATERIAL_LIST_MAIN_FONT_SIZE: 16px;
}

.dx-size-compact() {
    @MATERIAL_LIST_VERTICAL_PADDING: 4px;

    @MATERIAL_LIST_ITEM_HEIGHT: 36px;
    @MATERIAL_LIST_ITEM_VERTICAL_PADDING: 10px;
    @MATERIAL_LIST_ITEM_HORIZONTAL_PADDING: 8px;
    @MATERIAL_LIST_GROUP_HEADER_VERTICAL_PADDING: 10px;

    @MATERIAL_LIST_SELECT_ALL_MARGIN_TOP: -1px;
    @MATERIAL_LIST_SELECT_ALL_MARGIN_RIGHT: 0;
    @MATERIAL_LIST_SELECT_ALL_LABEL_MARGIN_TOP: 1px;
    @MATERIAL_LIST_SELECT_ALL_LABEL_LINE_HEIGHT: 15px;
    @MATERIAL_LIST_DELETEBUTTON_PADDING: 3px;

    @MATERIAL_LIST_SEARCHBOX_VERTICAL_PADDING: 6px;
    @MATERIAL_LIST_NEXT_BUTTON_HORIZONTAL_PADDING: 58px;

    @MATERIAL_LIST_MAIN_FONT_SIZE: 13px;
}

@MATERIAL_LIST_ITEM_BORDER_WIDTH: 1px;
@MATERIAL_LIST_BORDER_WIDTH: 1px;

@MATERIAL_MOBILE_LIST_ITEM_HORIZONTAL_PADDING: 15px;

@MATERIAL_LIST_BORDER: @MATERIAL_LIST_BORDER_WIDTH solid @list-border-color;
@MATERIAL_LIST_ITEM_BORDER: @MATERIAL_LIST_ITEM_BORDER_WIDTH solid @list-border-color;

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

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

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

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

.dx-list-item-icon-container {
    width: @MATERIAL_BASE_ICON_SIZE + @MATERIAL_LIST_ITEM_HORIZONTAL_PADDING;
    height: @MATERIAL_BASE_ICON_SIZE;
    vertical-align: bottom;
}

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

.dx-list-search {
    padding-top: @MATERIAL_LIST_SEARCHBOX_VERTICAL_PADDING - 2px;

    &.dx-searchbox {
        .dx-placeholder:before {
            font-size: @MATERIAL_LIST_MAIN_FONT_SIZE;
        }


        .dx-clear-button-area {
            width: @MATERIAL_BASE_ICON_SIZE - 1px;
        }
    }
}

.dx-list-select-all,
.dx-list-item,
.dx-list-group-header {
    position: relative;

    .dx-inkripple {
        overflow: hidden;
    }
}

.dx-list-collapsible-groups .dx-list-group-header {
    &:before {
        content: none;
    }
}

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

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

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

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

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

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

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

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

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

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

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

                &.dx-state-focused {
                    .dx-checkbox {
                        .dx-checkbox-icon:after {
                            background-color: fade(@checkbox-border-color, 10%);
                            transform: scale(1);
                        }

                        &.dx-checkbox-checked,
                        &.dx-checkbox-indeterminate {
                            .dx-checkbox-icon:after {
                                background-color: fade(@checkbox-bg, 10%);
                                transform: scale(1);
                            }
                        }
                    }
                }
            }
        }

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

    .dx-list-group {
        &:not(.dx-list-group-collapsed) {
            &:not(:last-child) {
                padding-bottom: @MATERIAL_LIST_VERTICAL_PADDING;
                border-bottom: @MATERIAL_LIST_ITEM_BORDER;
            }
        }

        &:not(.dx-list-group-collapsed) + &:not(.dx-list-group-collapsed) {
            .dx-list-group-header {
                border-top-color: transparent;
            }
        }

        &.dx-list-group-collapsed {
            .dx-list-group-header-indicator {
                .dx-list-collapsible-groups & {
                    .dx-icon(chevrondown);

                    font-size: @MATERIAL_BASE_ICON_SIZE;
                }
            }

            .dx-list-group-header {
                color: @list-group-color;
            }
        }

        .dx-list-item {
            &:first-of-type {
                margin-top: 0;
            }

            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }

    .dx-list-group-header {
        font-weight: normal;
        padding: @MATERIAL_LIST_GROUP_HEADER_VERTICAL_PADDING @item_horizontal_padding;
        background: @list-group-header-bg;
        color: @list-expanded-group-color;
        border-top: @MATERIAL_LIST_ITEM_BORDER;
        border-top-color: transparent;
        font-size: @MATERIAL_LIST_MAIN_FONT_SIZE;

        .dx-list-group-header-indicator {
            color: @list-header-indicator-color;

            .dx-list-collapsible-groups & {
                .dx-icon(chevronup);

                font-size: @MATERIAL_BASE_ICON_SIZE;
                float: right;
                margin-top: -2px;
            }
        }

        .dx-inkripple {
            height: auto;
            top: -1px;
            bottom: 0;
        }

        &:before {
            content: none;
        }
    }

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

            .dx-list-switchable-delete-button-inner-wrapper {
                background-color: @list-item-hover-bg;
            }
        }

        &:first-of-type {
            border-top: none;
            margin-top: @MATERIAL_LIST_VERTICAL_PADDING;
        }

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

        .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 {
        color: @list-normal-color;

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

    .dx-list-item-content {
        font-size: @MATERIAL_LIST_MAIN_FONT_SIZE;
        padding: @MATERIAL_LIST_ITEM_VERTICAL_PADDING @item_horizontal_padding @MATERIAL_LIST_ITEM_VERTICAL_PADDING - 1px;
    }

    .dx-list .dx-empty-message { // stylelint-disable-line no-duplicate-selectors
        padding: @MATERIAL_LIST_ITEM_VERTICAL_PADDING/2 + 1px @item_horizontal_padding @MATERIAL_LIST_ITEM_VERTICAL_PADDING/2;
        color: fade(@list-normal-color, 54%);
        font-size: 12px;
    }

    .dx-list-next-button .dx-button {
        margin-top: 20px;
        padding: 0;
        .dx-button-withtext-sizing();

        .dx-button-content {
            padding-left: @MATERIAL_LIST_NEXT_BUTTON_HORIZONTAL_PADDING;
            padding-right: @MATERIAL_LIST_NEXT_BUTTON_HORIZONTAL_PADDING;
        }
    }

    .dx-list-item-chevron-container {
        width: 11px + @item_horizontal_padding;
        padding-top: @MATERIAL_LIST_ITEM_VERTICAL_PADDING/2;
    }

    .dx-list-border-visible {
        border: @MATERIAL_LIST_BORDER;
    }

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

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

        .dx-button.dx-list-toggle-delete-switch {
            border: none;
            background: transparent;
            padding: 0;
            height: 24px;
            width: 24px;
            margin-left: @item_horizontal_padding - 1px;
            box-shadow: none;

            .dx-button-content {
                padding: 0;

                .dx-inkripple-wave {
                    display: none;
                }
            }
        }

        .dx-icon-toggle-delete {
            width: 9px + @MATERIAL_LIST_ITEM_VERTICAL_PADDING;
            height: 9px + @MATERIAL_LIST_ITEM_VERTICAL_PADDING;
        }

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

    .dx-list-toggle-delete-switch-container + .dx-list-item-content {
        padding-left: @item_horizontal_padding + 18px;
    }

    .dx-list-select-all {
        padding: @MATERIAL_LIST_ITEM_VERTICAL_PADDING - 1px 0;
        font-size: @MATERIAL_LIST_MAIN_FONT_SIZE;
        position: relative;

        &:after {
            content: "";
            position: absolute;
            bottom: 1px;
            left: @MATERIAL_LIST_ITEM_HORIZONTAL_PADDING;
            right: @MATERIAL_LIST_ITEM_HORIZONTAL_PADDING;
            height: 1px;
            background-color: @list-border-color;
        }
    }

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

    .dx-list-select-all-label {
        line-height: @MATERIAL_LIST_SELECT_ALL_LABEL_LINE_HEIGHT;
        padding: 0 @MATERIAL_LIST_ITEM_HORIZONTAL_PADDING + 19;
        margin-top: @MATERIAL_LIST_SELECT_ALL_LABEL_MARGIN_TOP;
    }

    .dx-list-item-after-bag {
        &.dx-list-static-delete-button-container {
            width: @item_horizontal_padding + @MATERIAL_BUTTON_ICON_SIZE + @MATERIAL_LIST_DELETEBUTTON_PADDING;
        }

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

        .dx-list-reorder-handle {
            .dx-icon(dragvertical);

            color: fade(@base-icon-color, 27%);
            .dx-icon-sizing(@MATERIAL_BASE_ICON_SIZE, @MATERIAL_BASE_ICON_SIZE * 1.6);
        }
    }

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

    .dx-list-slide-menu-button-delete {
        .dx-icon(trash);

        color: @base-inverted-text-color;
        border: 1px solid @list-button-delete-shadow-color;
        border-right-color: transparent;
        background-color: @list-menu-button-delete-bg;
        font-size: @MATERIAL_BASE_ICON_SIZE;
        display: table-cell;
        vertical-align: middle;
        padding: 0 @item_horizontal_padding;
        width: @item_horizontal_padding * 2 + @MATERIAL_BASE_ICON_SIZE;
        box-shadow:
            inset 3px 0 5px -3px @list-button-delete-shadow-color,
            inset 0 3px 5px -3px @list-button-delete-shadow-color,
            inset 0 -3px 5px -3px @list-button-delete-shadow-color;
    }

    .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-static-delete-button {
        margin-right: @item_horizontal_padding;
        padding: 0;
        border-radius: 50%;
        height: @MATERIAL_BASE_ICON_SIZE + @MATERIAL_BUTTON_VERTICAL_PADDING * 2 - 2px;
        margin-top: -2px;

        &.dx-button {
            box-shadow: none;
            background-color: transparent;

            .dx-button-content {
                z-index: 1;
            }
        }
    }

    .dx-list-switchable-delete-button-inner-wrapper {
        padding-right: (@MATERIAL_LIST_ITEM_HEIGHT - @MATERIAL_BUTTON_HEIGHT)/2;
        background-color: @base-bg;
    }

    .dx-button.dx-list-switchable-delete-button {
        .dx-button-flat-color-styling(@button-danger-bg, @button-danger-text-hover-bg, @button-danger-text-focused-bg, @button-danger-text-active-bg);
    }

    .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-button.dx-list-toggle-delete-switch {
                margin-right: @item_horizontal_padding - 1px;
                margin-left: 0;
            }

            .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-right: 0;
        }

        .dx-list-switchable-delete-button-inner-wrapper {
            padding-left: (@MATERIAL_LIST_ITEM_HEIGHT - @MATERIAL_BUTTON_HEIGHT)/2;
            padding-right: 0;
        }
    }

    .dx-list-item-badge-container {
        padding-right: @item_horizontal_padding;
    }
}

.dx-list-sizing(@MATERIAL_LIST_ITEM_HORIZONTAL_PADDING);

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