diff --git a/packages/themes/default/src/components/pagination.scss b/packages/themes/default/src/components/pagination.scss index 1e2c834a81..93e832c9c2 100644 --- a/packages/themes/default/src/components/pagination.scss +++ b/packages/themes/default/src/components/pagination.scss @@ -2,25 +2,13 @@ @import '../mixins/rem'; @layer kol-theme-component { - :host { + .kol-pagination { font-family: var(--font-family); } - .kol-pagination { - &__button { - &--selected .button { - opacity: 1; - - &:focus { - outline: none; - } - } - - &--selected .button-inner { - background-color: var(--color-primary); - color: var(--color-light); - border: 0; - } + .button { + .kol-pagination__button--selected & { + opacity: 1; } } @@ -37,6 +25,12 @@ transition-duration: 0.5s; transition-property: background-color, color, border-color; + .kol-pagination__button--selected & { + background-color: var(--color-primary); + color: var(--color-light); + border: 0; + } + .button:focus & { @include focus-outline; } diff --git a/packages/themes/ecl/src/ecl-ec/components/pagination.scss b/packages/themes/ecl/src/ecl-ec/components/pagination.scss index 2021c567b5..54b5e95752 100644 --- a/packages/themes/ecl/src/ecl-ec/components/pagination.scss +++ b/packages/themes/ecl/src/ecl-ec/components/pagination.scss @@ -13,18 +13,6 @@ text-decoration: none; } - .kol-pagination { - &__button { - &--selected .button-inner { - background-color: var(--color-blue); - border-color: var(--color-blue); - color: var(--color-white); - opacity: 1; - text-decoration: underline; - } - } - } - .button-inner { background-color: var(--color-yellow); border: rem(2) solid var(--color-yellow); @@ -44,6 +32,14 @@ outline: rem(2) solid var(--color-black); } + .kol-pagination__button--selected & { + background-color: var(--color-blue); + border-color: var(--color-blue); + color: var(--color-white); + opacity: 1; + text-decoration: underline; + } + .button:disabled & { cursor: not-allowed; opacity: 0.5; diff --git a/packages/themes/ecl/src/ecl-eu/components/pagination.scss b/packages/themes/ecl/src/ecl-eu/components/pagination.scss index d0c3b5fd83..c05a9c455a 100644 --- a/packages/themes/ecl/src/ecl-eu/components/pagination.scss +++ b/packages/themes/ecl/src/ecl-eu/components/pagination.scss @@ -15,19 +15,6 @@ } } - .kol-pagination { - &__button { - &--selected .button-inner { - background-color: var(--color-blue); - border-color: var(--color-blue); - color: var(--color-white); - font-weight: bold; - text-decoration: underline; - opacity: 1; - } - } - } - .button-inner { min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); @@ -55,6 +42,15 @@ 0 rem(-4) rem(4) rgb(9 49 142 / 4%); } + .kol-pagination__button--selected & { + background-color: var(--color-blue); + border-color: var(--color-blue); + color: var(--color-white); + font-weight: bold; + text-decoration: underline; + opacity: 1; + } + .button:disabled & { opacity: 0.5; cursor: not-allowed; diff --git a/packages/themes/itzbund/src/components/pagination.scss b/packages/themes/itzbund/src/components/pagination.scss index 8baee61a35..de8c2f6d5b 100644 --- a/packages/themes/itzbund/src/components/pagination.scss +++ b/packages/themes/itzbund/src/components/pagination.scss @@ -6,19 +6,6 @@ font-family: var(--font-family-sans); } - .kol-pagination { - &__button { - &--selected .button-inner { - background-color: var(--color-achat); - border-color: var(--color-achat); - color: var(--color-weiss); - font-weight: bold; - opacity: 1; - text-decoration: underline; - } - } - } - .button-inner { background-color: var(--color-weiss); border-radius: rem(32); @@ -37,6 +24,15 @@ padding: 0 rem(8); } + .kol-pagination__button--selected & { + background-color: var(--color-achat); + border-color: var(--color-achat); + color: var(--color-weiss); + font-weight: bold; + opacity: 1; + text-decoration: underline; + } + .button:not(:disabled):hover &, .button:focus & { background-color: var(--color-anthrazit);