|
|
| 2번째 줄: |
2번째 줄: |
| | cite { | | cite { |
| | box-shadow: inset 0 -20px 0 #FAFAFA; | | box-shadow: inset 0 -20px 0 #FAFAFA; |
| − | }
| |
| − |
| |
| − |
| |
| − | accordion {
| |
| − | display: flex;
| |
| − | flex-direction: column;
| |
| − | border-radius: var(--accordion-border-radius);
| |
| − | background-color: var(--accordion-bg);
| |
| − | border: var(--accordion-border-width) solid var(--accordion-border-color);
| |
| − | }
| |
| − |
| |
| − | /* Accordion item */
| |
| − | accordion-item {
| |
| − | border-top: var(--accordion-border-width) solid var(--accordion-border-color);
| |
| − | /* Add a shadow or other styling to separate the items */
| |
| − | }
| |
| − |
| |
| − | accordion-item:first-child {
| |
| − | border-top: none;
| |
| − | }
| |
| − |
| |
| − | /* Accordion header (button) */
| |
| − | accordion-header {
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | /* Accordion button styling */
| |
| − | accordion-button {
| |
| − | display: flex;
| |
| − | justify-content: space-between;
| |
| − | align-items: center;
| |
| − | padding: var(--accordion-btn-padding-y) var(--accordion-btn-padding-x);
| |
| − | width: 100%;
| |
| − | text-align: left;
| |
| − | background-color: var(--accordion-btn-bg);
| |
| − | color: var(--accordion-btn-color);
| |
| − | border: none;
| |
| − | font-size: 1rem;
| |
| − | font-weight: bold;
| |
| − | cursor: pointer;
| |
| − | transition: background-color var(--accordion-transition);
| |
| − | }
| |
| − |
| |
| − | accordion-button:focus {
| |
| − | outline: none;
| |
| − | box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
| |
| − | }
| |
| − |
| |
| − | accordion-button.collapsed {
| |
| − | background-color: var(--accordion-btn-bg);
| |
| − | }
| |
| − |
| |
| − | accordion-button:hover {
| |
| − | background-color: var(--accordion-btn-active-bg);
| |
| − | }
| |
| − |
| |
| − | /* Accordion icon */
| |
| − | accordion-button::after {
| |
| − | content: '';
| |
| − | display: inline-block;
| |
| − | width: var(--accordion-btn-icon-width);
| |
| − | height: var(--accordion-btn-icon-width);
| |
| − | background-image: var(--accordion-btn-icon);
| |
| − | background-size: contain;
| |
| − | transition: transform var(--accordion-transition);
| |
| − | }
| |
| − |
| |
| − | /* Accordion button active state */
| |
| − | accordion-button:not(.collapsed)::after {
| |
| − | transform: var(--accordion-btn-icon-transform);
| |
| − | }
| |
| − |
| |
| − | /* Accordion collapse section */
| |
| − | accordion-collapse {
| |
| − | padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
| |
| − | background-color: var(--accordion-bg);
| |
| − | color: var(--accordion-color);
| |
| − | display: none;
| |
| − | transition: max-height var(--accordion-transition);
| |
| − | border-top: var(--accordion-border-width) solid var(--accordion-border-color);
| |
| − | }
| |
| − |
| |
| − | /* Show the collapse section when active */
| |
| − | accordion-collapse.show {
| |
| − | display: block;
| |
| − | max-height: 1000px;
| |
| − | }
| |
| − |
| |
| − | /* Accordion body */
| |
| − | accordion-body {
| |
| − | padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
| |
| − | color: var(--accordion-color);
| |
| − | }
| |
| − |
| |
| − | /* Active accordion button state */
| |
| − | accordion-button:not(.collapsed) {
| |
| − | background-color: var(--accordion-btn-active-bg);
| |
| − | color: var(--accordion-btn-active-color);
| |
| | } | | } |