sass.n2o.components.Collapse.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
The newest version!
@import 'rc-collapse/assets/index';

.n2o-collapse {
    border: 0;
    background-color: transparent;

    .rc-collapse-item-active .rc-collapse-content {
        overflow: initial;
    }

    .rc-collapse-item-active .rc-collapse-anim {
        overflow: hidden;
    }

    .n2o-collapse-icon-wrapper {
        min-width: 16px;
        max-width: 16px;
        min-height: 16px;
        max-height: 16px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        //align-self: flex-start;
        margin: 5px 0;
        border-radius: 50%;
    }

    // panel

    .n2o-collapse-panel {
        border: 0;

        > .rc-collapse-content {
            padding: 0;
            //overflow: visible;
        }

        &.divider {
            border-bottom: $collapse-line-height solid $collapse-line-color;
        }

        &.divider:last-child {
            border-bottom: 0;
        }

        // header
        .n2o-panel-header {
            display: flex;
            align-items: center;
            height: auto;
            padding: 0;
            color: #474747;
            text-indent: initial;
            line-height: 28px;
            font-weight: $font-weight-bold;

            .n2o-panel-header-container {
                display: flex;
                width: 100%;
                align-items: center;
                height: auto;
                padding: 0;
            }

            &:hover {
                > .n2o-collapse-icon-wrapper {
                    background-color: $collapse-line-color;

                    @include transition($btn-transition);
                }
            }

            &:focus {
                outline: none;
            }

            //icon
            .n2o-collapse-icon {
                font-size: 16px;
                transform: rotate(0deg);
                transition: 0.2s;
                margin: 0;
                padding: 0 0 0.125rem 0.1rem;

                &.isActive {
                    transform: rotate(90deg);
                }
            }

            .n2o-panel-header-text {
                padding: 0 5px;
            }

            &.n2o-disabled {
                opacity: 1;
            }
        }

        &.line {
            border: 0;

            .n2o-panel-header-container::after {
                content: '';
                display: inline-block;
                vertical-align: middle;
                box-sizing: border-box;
                flex-grow: 1;
                min-width: 40px;
                margin: 2px 0 0 5px;
                border-bottom: $collapse-line-height solid $collapse-line-color;
            }

            .n2o-panel-header .n2o-panel-header-text {
                white-space: nowrap;
                max-width: calc(100% - 40px);
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 16px;
            }
        }

        .rc-collapse-content-box {
            padding: 5px 21px;
            margin: 0;
            color: black;
        }
    }

    .n2o-collapse-panel.with-badge {
        .n2o-panel-header .n2o-panel-header-text {
            max-width: 100%;
        }
    }
}