devextreme/less/sources/widgets/material/accordion.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/accordion.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/
*/
.dx-size-default() {
    @MATERIAL_ACCORDION_TITLE_PADDING: 24px;
    @MATERIAL_ACCORDION_BODY_PADDING: 24px;

    @MATERIAL_ACCORDION_ARROW_LINE_HEIGHT: 16px;

    @MATERIAL_ACCORDION_TITLE_HEIGHT: 48px;
    @MATERIAL_ACCORDION_OPENED_TITLE_HEIGHT: 64px;
    @MATERIAL_ACCORDION_TITLE_FONT_SIZE: 15px;
    @MATERIAL_ACCORDION_OPENED_MARGIN: 16px;
    @MATERIAL_ACCORDION_SHADOW: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.dx-size-compact() {
    @MATERIAL_ACCORDION_TITLE_PADDING: 16px;
    @MATERIAL_ACCORDION_BODY_PADDING: 16px;

    @MATERIAL_ACCORDION_ARROW_LINE_HEIGHT: 16px;

    @MATERIAL_ACCORDION_TITLE_HEIGHT: 40px;
    @MATERIAL_ACCORDION_OPENED_TITLE_HEIGHT: 40px;
    @MATERIAL_ACCORDION_TITLE_FONT_SIZE: 15px;
    @MATERIAL_ACCORDION_OPENED_MARGIN: 8px;
    @MATERIAL_ACCORDION_SHADOW: 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.06);
}

@MATERIAL_ACCORDION_DISABLED_OPACITY: 0.5;


.dx-accordion {
    background-color: @accordion-background-color;
    color: @accordion-color;
    margin: 3px 3px 5px 3px;
}

.dx-accordion-item {
    background-color: @accordion-item-bg;
    box-shadow: @MATERIAL_ACCORDION_SHADOW;
    transition: margin 200ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: margin, height;
    border-top: 1px solid @accordion-item-border-color;

    &:first-child {
        border-top: none;
    }

    &.dx-state-active,
    &.dx-state-focused {
        > .dx-accordion-item-title {
            color: @accordion-title-active-color;
            background-color: @accordion-title-active-bg;
        }

        &:not(.dx-accordion-item-opened) {
            .dx-icon {
                color: @accordion-icon-active-color;
            }
        }
    }

    &.dx-state-hover {
        & > .dx-accordion-item-title {
            background-color: @accordion-item-hover-bg;
        }

        + .dx-accordion-item-closed {
            border-top-color: @accordion-title-hover-border-color;
        }
    }
}

.dx-accordion-item-opened {
    margin: @MATERIAL_ACCORDION_OPENED_MARGIN 0;
    border-top: none;

    &:first-child {
        margin-top: 0;
    }

    & > .dx-accordion-item-title {
        height: @MATERIAL_ACCORDION_OPENED_TITLE_HEIGHT;

        .dx-accordion-item-title-caption {
            top: floor((@MATERIAL_ACCORDION_OPENED_TITLE_HEIGHT - @MATERIAL_ACCORDION_TITLE_FONT_SIZE) / 2);
        }

        &:before {
            content: "\f014";
            top: floor((@MATERIAL_ACCORDION_OPENED_TITLE_HEIGHT - @MATERIAL_BASE_ICON_SIZE) / 2) - 2;
        }
    }

    + .dx-accordion-item-closed {
        border-top: none;
    }
}

.dx-accordion-item-title {
    height: @MATERIAL_ACCORDION_TITLE_HEIGHT;
    position: relative;
    padding: 12px @MATERIAL_ACCORDION_TITLE_PADDING;
    background-color: @accordion-item-bg;

    .dx-accordion-item-title-caption,
    &:before {
        position: absolute;
        transition: top 200ms cubic-bezier(0.4, 0, 0.2, 1);
        will-change: top;
    }

    .dx-accordion-item-title-caption {
        color: @accordion-title-color;
        font-size: @MATERIAL_ACCORDION_TITLE_FONT_SIZE;
        top: floor((@MATERIAL_ACCORDION_TITLE_HEIGHT - @MATERIAL_ACCORDION_TITLE_FONT_SIZE) / 2);
        left: @MATERIAL_ACCORDION_TITLE_PADDING;
        right: @MATERIAL_ACCORDION_TITLE_PADDING*2 + @MATERIAL_BASE_ICON_SIZE;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    &:before {
        top: floor((@MATERIAL_ACCORDION_TITLE_HEIGHT - @MATERIAL_BASE_ICON_SIZE) / 2) - 1;
        right: @MATERIAL_ACCORDION_TITLE_PADDING;
        font-weight: normal;
        color: @accordion-icon-color;
        content: "\f016";
        font-family: DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword
        font-size: @MATERIAL_BASE_ICON_SIZE;
        height: @MATERIAL_BASE_ICON_SIZE;
        width: @MATERIAL_BASE_ICON_SIZE;
    }

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

    .dx-accordion-item-title-caption .dx-icon {
        .dx-icon-margin(@ACCORDION_TITLE_ICON_MARGIN);

        position: relative;
        top: @ACCORDION_TITLE_ICON_TOP_OFFSET;
    }
}

.dx-state-disabled {
    &.dx-accordion-item {
        opacity: @MATERIAL_ACCORDION_DISABLED_OPACITY;
    }
}

.dx-accordion-item-body {
    padding: @MATERIAL_ACCORDION_BODY_PADDING;
    font-size: 12px;
}

.dx-rtl {
    .dx-accordion-item-title {
        .dx-accordion-item-title-caption {
            right: @MATERIAL_ACCORDION_TITLE_PADDING;
            left: @MATERIAL_ACCORDION_TITLE_PADDING*2 + @MATERIAL_BASE_ICON_SIZE;
        }

        &:before {
            left: @MATERIAL_ACCORDION_TITLE_PADDING;
            right: auto;
        }
    }
}