diff --git a/modules/ppcp-settings/resources/css/components/_reusable.scss b/modules/ppcp-settings/resources/css/components/_reusable.scss index 2de887f57..c15273368 100644 --- a/modules/ppcp-settings/resources/css/components/_reusable.scss +++ b/modules/ppcp-settings/resources/css/components/_reusable.scss @@ -3,6 +3,7 @@ @import './reusable-components/badge-box'; @import './reusable-components/busy-state'; @import './reusable-components/button'; +@import './reusable-components/elements'; @import './reusable-components/fields'; @import './reusable-components/hstack'; @import './reusable-components/navigation'; diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss new file mode 100644 index 000000000..600d8850c --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss @@ -0,0 +1,71 @@ +/** + * General styling for reusable components in the "Elements" folder. + */ + +.ppcp--header { + display: flex; + flex-direction: column; + gap: 6px; + + &:not(:last-child) { + padding-bottom: var(--block-header-gap, 6px); + } +} + +.ppcp--title { + @include font(11, 22, 600); + color: var(--color-text-title); + display: block; + text-transform: uppercase; + + &.ppcp--no-caps { + @include font(14, 16, 600); + text-transform: none; + } + + &.ppcp--big { + @include font(16, 20, 600); + } + + .ppcp-r-title-badge { + text-transform: none; + margin-left: 6px; + } +} + +.ppcp--title-extra { + @include font(13, 20, 400); + color: var(--color-text-teriary); + text-transform: none; + margin-left: 5px; +} + +.ppcp--title-wrapper { + display: flex; + justify-content: space-between; + align-items: center; +} + +.ppcp--description { + @include font(13, 20, 400); + margin: 0; + color: var(--color-text-description); + + &:not(:last-child) { + padding-bottom: 1em; + } + + a { + color: var(--color-blueberry); + } + + strong { + color: var(--color-gray-800); + } +} + +.ppcp--action { + & + .ppcp--action { + margin-top: var(--block-action-gap, 16px); + } +} 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 bc66032f6..58fdd3e3b 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 @@ -6,50 +6,6 @@ flex-direction: column; gap: var(--block-item-gap, 16px); - .ppcp--header { - display: flex; - flex-direction: column; - gap: 6px; - - &:not(:last-child) { - padding-bottom: var(--block-header-gap, 6px); - } - } - - .ppcp--title { - @include font(11, 22, 600); - color: var(--color-text-title); - display: block; - text-transform: uppercase; - - &.ppcp--no-caps { - @include font(14, 16, 600); - text-transform: none; - } - - &.ppcp--big { - @include font(16, 20, 600); - } - - .ppcp-r-title-badge { - text-transform: none; - margin-left: 6px; - } - } - - .ppcp--title-extra { - @include font(13, 20, 400); - color: var(--color-text-teriary); - text-transform: none; - margin-left: 5px; - } - - .ppcp--title-wrapper { - display: flex; - justify-content: space-between; - align-items: center; - } - &.ppcp-r-settings-block__feature { .ppcp--title { @include font(13, 20, 600); @@ -63,33 +19,11 @@ } } - .ppcp--description { - @include font(13, 20, 400); - margin: 0; - color: var(--color-text-description); - - &:not(:last-child) { - padding-bottom: 1em; - } - - a { - color: var(--color-blueberry); - } - - strong { - color: var(--color-gray-800); - } - } - + .ppcp-r-settings-block:not(.ppcp--no-gap) { margin-top: var(--block-separator-gap, 32px); padding-top: var(--block-separator-gap, 32px); border-top: var(--block-separator-size, 1px) solid var(--block-separator-color); } - - .ppcp--action + .ppcp--action { - margin-top: var(--block-action-gap, 16px); - } } .ppcp-r-settings-block {