react-hartan/Components/Accordion/Accordion.module.css

A simple components library for React

/* Accordion Style */

/* Each Accrodion Box */
.accordionBox {
    background-color: #1e90ff;
    margin: .5rem 0;
    padding: 1rem 2rem;
    border-radius: .75rem;
    width: 50rem;
}

/* A div inside each accordion box */
.accordionTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

}

/* Question Text inside each accordion box */
.accordionQues {
    font-size: 2rem;
    font-weight: 500;
}

/* Sign button inside each accordion box */
.accordionSign {
    font-size: 2.5rem;
    font-weight: 500;
}

/* Hidden Content Styling */
.accordionContentHide {
    font-size: 1.25rem;
    font-weight: 500;
    color: #ffffff;
    overflow: hidden;
    max-height: 0;
    transition: all .5s cubic-bezier(0, 1, 0, 1);
}

/* Hidden Content Styling when visible */
.accordionContentHide.accordionContentShow {
    height: auto;
    max-height: 999px;
    transition: all .5s cubic-bezier(1, 0, 1, 0);
}

/* Responsive Design */
@media (max-width: 768px) {
    .accordionBox {
        width: 20rem;
    }
}