diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_accordion-section.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_accordion-section.scss index d4894abd8..6e6d782d3 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_accordion-section.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_accordion-section.scss @@ -2,7 +2,7 @@ margin-left: auto; margin-right: auto; - &__toggler { + .ppcp--toggler { display: block; cursor: pointer; @@ -10,19 +10,18 @@ border: 0; box-shadow: none; padding: 0; - margin: 24px auto; + text-align: var(--accordion-text-align, center); + width: var(--accordion-width, auto); + margin: var(--accordion-toggler-gap, 24px) auto; } - &__title-wrapper { - @include font(14, 32, 450); - color: $color-gray-900; - + .ppcp--title-wrapper { display: flex; align-items: center; gap: 16px; } - &__content { + .ppcp--content { margin: 24px 0 0; } } diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss index 58fdd3e3b..5b1d04dd4 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss @@ -37,14 +37,12 @@ } } -.ppcp-r-settings-block__accordion { - > .ppcp-r-accordion { - width: 100%; +.ppcp-r-accordion { + --accordion-width: 100%; + --accordion-toggler-gap: 0; + --accordion-text-align: left; - .ppcp-r-accordion__toggler { - width: 100%; - margin: 0; - text-align: unset; - } + .ppcp--title-wrapper { + justify-content: space-between; } }