devextreme/less/sources/widgets/generic/accordion.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/accordion.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/
*/
.dx-size-default() {
    @GENERIC_ACCORDION_TITLE_PADDING: 9px 12px;
    @GENERIC_ACCORDION_BODY_PADDING: 8px 12px 22px;

    @GENERIC_ACCORDION_ARROW_LINE_HEIGHT: 24px;
}

.dx-size-compact() {
    @GENERIC_ACCORDION_TITLE_PADDING: 5px 7px;
    @GENERIC_ACCORDION_BODY_PADDING: 3px 7px 12px;

    @GENERIC_ACCORDION_ARROW_LINE_HEIGHT: 21px;
}

@GENERIC_ACCORDION_DISABLED_OPACITY: 0.5;


.dx-accordion {
    background-color: @accordion-background-color;
    color: @accordion-color;
}

.dx-accordion-item {
    border: 1px solid transparent;
    border-top-color: @accordion-item-border-color;

    &:last-child {
        border-bottom: 1px solid @accordion-item-border-color;
    }

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

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

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

        &:not(:last-child):not(.dx-accordion-item-opened):not(.dx-state-focused) {
            border-bottom-color: @accordion-item-hover-bg;
        }
    }
}

.dx-accordion-item-opened {
    border-color: @accordion-item-border-color;

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

    & > .dx-accordion-item-title {
        background-color: @accordion-item-title-opened-bg;

        &:before {
            content: "\f014";
        }
    }

    + .dx-accordion-item {
        border-top-color: transparent;

        &.dx-state-hover:not(.dx-state-focused) {
            border-top-color: @accordion-item-hover-bg;
        }
    }
}

.dx-accordion-item-title {
    color: @accordion-title-color;
    padding: @GENERIC_ACCORDION_TITLE_PADDING;
    font-size: @GENERIC_S_FONT_SIZE;

    &:before {
        font-weight: normal;
        color: @accordion-icon-color;
        content: "\f016";
        font-family: DXIcons; // stylelint-disable-line font-family-no-missing-generic-family-keyword
        font-size: @GENERIC_BASE_ICON_SIZE;
        margin-left: @GENERIC_BASE_ICON_SIZE/2;
        margin-right: 0;
        line-height: @GENERIC_ACCORDION_ARROW_LINE_HEIGHT;
    }

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

        display: inline-block;
        color: @accordion-icon-color;
    }

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

        vertical-align: top;
        position: relative;
        top: @ACCORDION_TITLE_ICON_TOP_OFFSET;
    }
}

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

.dx-state-focused {
    &.dx-accordion-item {
        border-color: @accordion-item-focused-border-color;
    }
}

.dx-accordion-item-body {
    padding: @GENERIC_ACCORDION_BODY_PADDING;
    font-size: @GENERIC_BASE_FONT_SIZE;
}

.dx-rtl {
    .dx-accordion-item-title {
        &:before {
            margin-left: 0;
            margin-right: @GENERIC_BASE_ICON_SIZE/2;
        }
    }
}