metro4/source/components/accordion/accordion.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.accordion {
    .reset-list();
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.accordion {
    & > .frame {
        display: block;
        margin: 1px 0;

        & > .heading {
            display: block;
            position: relative;
            padding: 8px 16px;
            background-color: @light;
            cursor: pointer;
            .ellipsis();
        }

        & > .content {
            display: block;
        }
    }
}

.accordion.marker-on {
    .heading {
        padding-left: 40px;

        &::before {
            line-height: 1;
            display: block;
            content: "\203A";
            position: absolute;
            left: 0;
            top: 0;
            font-size: 32px;
            width: 34px;
            height: 34px;
            text-align: center;
            transform: rotate(0);
            transition: transform @transition-speed;
            transform-origin: 50% 50%;
        }
    }

    .frame {
        &.active {
            & > .heading {
                &::before {
                    transform: rotate(90deg);
                    transition: transform @transition-speed;
                }
            }
        }
    }

    &[dir=rtl] {
        .heading {
            padding-left: 1rem;
            padding-right: 32px;
            &::before {
                left: auto;
                right: 0;
            }
        }
        .frame {
            &.active {
                & > .heading {
                    &::before {
                        transform: rotate(-90deg);
                        transition: transform @transition-speed;
                    }
                }
            }
        }
    }
}

.accordion {
    &.material {
        .heading {
            &::before {
                display: none;
            }
        }

        & > .frame > .heading {
            padding: 16px 42px 16px 16px;
            font-size: 16px;
            background-color: @white;

            &::after {
                display: block;
                content: "\203A";
                position: absolute;
                right: 16px;
                top: 8px;
                font-size: 32px;
                width: 40px;
                height: 40px;
                text-align: center;
                line-height: 1;
                transform: rotate(0);
                transition: transform @transition-speed;
                transform-origin: 50% 50%;
            }
        }

        .frame + .frame {
            border-top: 1px @borderColor solid;
        }

        & > .frame > .content {
            padding: 16px;
            font-size: 14px;
        }

        & > .frame {
            &.active {
                .heading {
                    &::after {
                        transform: rotate(90deg);
                        transition: transform @transition-speed;
                    }
                }
            }
        }
    }
}

.accordion.rtl, .accordion[dir=rtl] {
    &.material {
        & > .frame > .heading {
            padding: 16px 16px 16px 42px;

            &::after {
                left: 16px;
                right: auto;
                top: 8px;
                .rotate(180deg);
            }
        }

        & > .frame {
            &.active {
                .heading {
                    &::after {
                        transform: rotate(270deg);
                    }
                }
            }
        }
    }
}