From 0d0b66e4f52296dde555b927fb5a5176c2163818 Mon Sep 17 00:00:00 2001 From: Martin Oppitz <6279703+deleonio@users.noreply.github.com> Date: Tue, 29 Oct 2024 21:12:12 +0100 Subject: [PATCH 1/2] refactor: replace rem() for some special css definitions to px Refs: #6988 --- .../@shared/_kol-table-stateless-mixin.scss | 4 ++-- .../components/src/components/drawer/style.scss | 2 +- .../src/components/input-checkbox/common.scss | 2 +- .../src/components/input-radio/style.scss | 2 +- .../src/components/input-range/style.scss | 4 ++-- packages/components/src/components/input.scss | 4 ++-- .../components/src/components/spin/style.scss | 2 +- packages/samples/react/src/style.scss | 2 +- packages/themes/bmf/src/components/abbr.scss | 2 +- .../themes/bmf/src/components/accordion.scss | 2 +- packages/themes/bmf/src/components/badge.scss | 8 ++++---- packages/themes/bmf/src/components/button.scss | 6 +++--- packages/themes/bmf/src/components/card.scss | 10 +++++----- packages/themes/bmf/src/components/combobox.scss | 4 ++-- packages/themes/bmf/src/components/details.scss | 2 +- packages/themes/bmf/src/components/drawer.scss | 2 +- .../bmf/src/components/input-checkbox.scss | 6 +++--- .../themes/bmf/src/components/input-radio.scss | 4 ++-- .../themes/bmf/src/components/link-button.scss | 8 ++++---- packages/themes/bmf/src/components/nav.scss | 2 +- .../themes/bmf/src/components/pagination.scss | 2 +- .../themes/bmf/src/components/single-select.scss | 4 ++-- packages/themes/bmf/src/components/skip-nav.scss | 4 ++-- packages/themes/bmf/src/components/spin.scss | 2 +- .../themes/bmf/src/components/split-button.scss | 8 ++++---- packages/themes/bmf/src/components/tabs.scss | 2 +- packages/themes/bmf/src/components/toolbar.scss | 2 +- packages/themes/bmf/src/global.scss | 4 ++-- packages/themes/bmf/src/mixins/alert.scss | 16 ++++++++-------- packages/themes/bmf/src/mixins/button.scss | 2 +- .../themes/bmf/src/mixins/focus-outline.scss | 2 +- .../themes/bmf/src/mixins/input-messages.scss | 2 +- packages/themes/bmf/src/mixins/input.scss | 2 +- .../bmf/src/mixins/kol-table-stateless-wc.scss | 6 +++--- packages/themes/bmf/src/mixins/link.scss | 2 +- .../themes/default/src/@shared/input-core.scss | 4 ++-- .../themes/default/src/components/accordion.scss | 2 +- .../themes/default/src/components/badge.scss | 2 +- .../default/src/components/button-link.scss | 2 +- .../themes/default/src/components/button.scss | 2 +- packages/themes/default/src/components/card.scss | 8 ++++---- .../themes/default/src/components/combobox.scss | 10 +++++----- .../themes/default/src/components/drawer.scss | 2 +- .../default/src/components/input-checkbox.scss | 8 ++++---- .../default/src/components/input-radio.scss | 6 +++--- .../default/src/components/input-range.scss | 4 ++-- .../default/src/components/link-button.scss | 6 +++--- packages/themes/default/src/components/nav.scss | 2 +- .../default/src/components/pagination.scss | 4 ++-- .../default/src/components/single-select.scss | 10 +++++----- .../themes/default/src/components/skip-nav.scss | 2 +- .../default/src/components/split-button.scss | 4 ++-- .../themes/default/src/components/textarea.scss | 4 ++-- .../themes/default/src/components/toolbar.scss | 2 +- packages/themes/default/src/global.scss | 10 +++++----- packages/themes/default/src/mixins/alert-wc.scss | 4 ++-- packages/themes/default/src/mixins/button.scss | 6 +++--- .../themes/default/src/mixins/indented-text.scss | 2 +- .../src/mixins/kol-table-stateless-wc.scss | 14 +++++++------- .../ecl/src/ecl-ec/@shared/input-core.scss | 2 +- .../ecl/src/ecl-ec/components/accordion.scss | 4 ++-- .../themes/ecl/src/ecl-ec/components/badge.scss | 2 +- .../ecl/src/ecl-ec/components/button-link.scss | 2 +- .../themes/ecl/src/ecl-ec/components/button.scss | 2 +- .../ecl/src/ecl-ec/components/combobox.scss | 8 ++++---- .../src/ecl-ec/components/input-checkbox.scss | 6 +++--- .../ecl/src/ecl-ec/components/input-radio.scss | 4 ++-- .../ecl/src/ecl-ec/components/link-button.scss | 2 +- .../themes/ecl/src/ecl-ec/components/nav.scss | 4 ++-- .../ecl/src/ecl-ec/components/single-select.scss | 8 ++++---- .../ecl/src/ecl-ec/components/skip-nav.scss | 2 +- .../themes/ecl/src/ecl-ec/components/spin.scss | 2 +- .../ecl/src/ecl-ec/components/split-button.scss | 2 +- .../themes/ecl/src/ecl-ec/components/tabs.scss | 10 +++++----- .../ecl/src/ecl-ec/components/toolbar.scss | 2 +- packages/themes/ecl/src/ecl-ec/global.scss | 4 ++-- .../themes/ecl/src/ecl-ec/mixins/alert-wc.scss | 2 +- .../themes/ecl/src/ecl-ec/mixins/button.scss | 2 +- .../ecl-ec/mixins/kol-table-stateless-wc.scss | 6 +++--- .../ecl/src/ecl-eu/@shared/input-core.scss | 2 +- .../ecl/src/ecl-eu/components/accordion.scss | 8 ++++---- .../themes/ecl/src/ecl-eu/components/badge.scss | 2 +- .../themes/ecl/src/ecl-eu/components/button.scss | 2 +- .../ecl/src/ecl-eu/components/combobox.scss | 8 ++++---- .../src/ecl-eu/components/input-checkbox.scss | 6 +++--- .../ecl/src/ecl-eu/components/input-radio.scss | 4 ++-- .../ecl/src/ecl-eu/components/link-button.scss | 14 +++++++------- .../themes/ecl/src/ecl-eu/components/nav.scss | 4 ++-- .../ecl/src/ecl-eu/components/pagination.scss | 8 ++++---- .../ecl/src/ecl-eu/components/single-select.scss | 8 ++++---- .../ecl/src/ecl-eu/components/skip-nav.scss | 4 ++-- .../themes/ecl/src/ecl-eu/components/spin.scss | 2 +- .../ecl/src/ecl-eu/components/split-button.scss | 4 ++-- .../themes/ecl/src/ecl-eu/components/tabs.scss | 10 +++++----- .../ecl/src/ecl-eu/components/toolbar.scss | 2 +- .../ecl/src/ecl-eu/components/tree-item.scss | 2 +- packages/themes/ecl/src/ecl-eu/global.scss | 4 ++-- .../themes/ecl/src/ecl-eu/mixins/alert-wc.scss | 2 +- .../themes/ecl/src/ecl-eu/mixins/button.scss | 12 ++++++------ .../ecl-eu/mixins/kol-table-stateless-wc.scss | 6 +++--- .../themes/itzbund/src/components/accordion.scss | 8 ++++---- .../themes/itzbund/src/components/badge.scss | 4 ++-- .../itzbund/src/components/button-link.scss | 8 ++++---- .../themes/itzbund/src/components/button.scss | 6 +++--- packages/themes/itzbund/src/components/card.scss | 8 ++++---- .../themes/itzbund/src/components/combobox.scss | 8 ++++---- .../itzbund/src/components/input-checkbox.scss | 6 +++--- .../itzbund/src/components/input-radio.scss | 8 ++++---- .../itzbund/src/components/input-range.scss | 4 ++-- .../itzbund/src/components/pagination.scss | 8 ++++---- .../themes/itzbund/src/components/progress.scss | 2 +- .../itzbund/src/components/single-select.scss | 8 ++++---- .../themes/itzbund/src/components/skip-nav.scss | 4 ++-- packages/themes/itzbund/src/components/spin.scss | 2 +- .../itzbund/src/components/split-button.scss | 6 +++--- .../itzbund/src/components/table-stateful.scss | 2 +- packages/themes/itzbund/src/components/tabs.scss | 2 +- .../themes/itzbund/src/components/toolbar.scss | 6 +++--- packages/themes/itzbund/src/components/tree.scss | 2 +- packages/themes/itzbund/src/global.scss | 8 ++++---- packages/themes/itzbund/src/mixins/alert-wc.scss | 2 +- packages/themes/itzbund/src/mixins/button.scss | 2 +- .../themes/itzbund/src/mixins/input-base.scss | 6 +++--- .../src/mixins/kol-table-stateless-wc.scss | 8 ++++---- packages/themes/itzbund/src/mixins/link.scss | 2 +- 125 files changed, 289 insertions(+), 289 deletions(-) diff --git a/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss b/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss index f5315c58fb..fdaac5aceb 100644 --- a/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss +++ b/packages/components/src/components/@shared/_kol-table-stateless-mixin.scss @@ -121,14 +121,14 @@ align-items: center; justify-content: center; background-color: rgb(255, 255, 255); - border-width: rem(2); + border-width: 2px; line-height: 1.5; transition: all 0.5s ease 0s; } input[type='radio'] { display: flex; - border-width: rem(2); + border-width: 2px; border-radius: 100%; height: 1.5em; min-height: 1.5em; diff --git a/packages/components/src/components/drawer/style.scss b/packages/components/src/components/drawer/style.scss index fce5a63908..8729c2772e 100644 --- a/packages/components/src/components/drawer/style.scss +++ b/packages/components/src/components/drawer/style.scss @@ -49,7 +49,7 @@ &__content { position: relative; - padding: rem(16); + padding: 16px; } } } diff --git a/packages/components/src/components/input-checkbox/common.scss b/packages/components/src/components/input-checkbox/common.scss index 7817815f67..35fc7054de 100644 --- a/packages/components/src/components/input-checkbox/common.scss +++ b/packages/components/src/components/input-checkbox/common.scss @@ -60,7 +60,7 @@ input { border-style: solid; - border-width: rem(2); + border-width: 2px; line-height: 1.5; } diff --git a/packages/components/src/components/input-radio/style.scss b/packages/components/src/components/input-radio/style.scss index 42b7a22914..cf1141c835 100644 --- a/packages/components/src/components/input-radio/style.scss +++ b/packages/components/src/components/input-radio/style.scss @@ -6,7 +6,7 @@ @layer kol-component { :host { - --border-width: #{rem(2)}; + --border-width: 2px; --input-size: 1.5em; font-size: rem(16); } diff --git a/packages/components/src/components/input-range/style.scss b/packages/components/src/components/input-range/style.scss index 817fdef57f..f619422801 100644 --- a/packages/components/src/components/input-range/style.scss +++ b/packages/components/src/components/input-range/style.scss @@ -43,7 +43,7 @@ background-color: #000; height: rem(20); width: rem(20); - border-radius: rem(20); + border-radius: 20px; cursor: pointer; -webkit-appearance: none; } @@ -53,7 +53,7 @@ background-color: #000; height: rem(20); width: rem(20); - border-radius: rem(20); + border-radius: 20px; cursor: pointer; -moz-appearance: none; } diff --git a/packages/components/src/components/input.scss b/packages/components/src/components/input.scss index ae517c704f..9ee004e0cb 100644 --- a/packages/components/src/components/input.scss +++ b/packages/components/src/components/input.scss @@ -45,12 +45,12 @@ /* needed hack for vertical alignment */ input[type='file'] { - padding: calc((var(--a11y-min-size) - rem(16)) / 10) 0.5em; + padding: calc((var(--a11y-min-size) - 16px) / 10) 0.5em; } /* needed hack for vertical alignment */ select[multiple] option { - padding: calc((var(--a11y-min-size) - rem(16)) / 2) 0.5em; + padding: calc((var(--a11y-min-size) - 16px) / 2) 0.5em; } .input { diff --git a/packages/components/src/components/spin/style.scss b/packages/components/src/components/spin/style.scss index 30c01a864f..828a4d4a27 100644 --- a/packages/components/src/components/spin/style.scss +++ b/packages/components/src/components/spin/style.scss @@ -10,7 +10,7 @@ .spin { display: block; - padding: rem(2); + padding: 2px; position: relative; } } diff --git a/packages/samples/react/src/style.scss b/packages/samples/react/src/style.scss index d7e02ba869..d23e8387f7 100644 --- a/packages/samples/react/src/style.scss +++ b/packages/samples/react/src/style.scss @@ -34,7 +34,7 @@ hr { background-color: black; display: flex; flex-direction: column; - padding: rem(8); + padding: 8px; } @media (min-width: 1024px) { diff --git a/packages/themes/bmf/src/components/abbr.scss b/packages/themes/bmf/src/components/abbr.scss index 119abfade6..4f4d543e44 100644 --- a/packages/themes/bmf/src/components/abbr.scss +++ b/packages/themes/bmf/src/components/abbr.scss @@ -7,6 +7,6 @@ } abbr:focus { - border-radius: rem(5); + border-radius: 5px; } } diff --git a/packages/themes/bmf/src/components/accordion.scss b/packages/themes/bmf/src/components/accordion.scss index 752060a919..8faf5e2ecf 100644 --- a/packages/themes/bmf/src/components/accordion.scss +++ b/packages/themes/bmf/src/components/accordion.scss @@ -35,7 +35,7 @@ border-radius: var(--border-radius); min-height: rem(24); - padding: rem(10) rem(8); + padding: 10px 8px; @include kol-typography-accordion; gap: rem(8); diff --git a/packages/themes/bmf/src/components/badge.scss b/packages/themes/bmf/src/components/badge.scss index 57fea7fce9..3e869988f5 100644 --- a/packages/themes/bmf/src/components/badge.scss +++ b/packages/themes/bmf/src/components/badge.scss @@ -11,12 +11,12 @@ } :host > span { - border-radius: rem(5); + border-radius: 5px; display: inline-flex; font-style: normal; .kol-span-wc { - padding: rem(4) rem(12); + padding: 4px 12px; } > .kol-span-wc { @@ -35,7 +35,7 @@ align-items: center; .kol-span-wc { - padding: rem(4) rem(8) rem(4) rem(12); + padding: 4px 8px 4px 12px; } } @@ -72,7 +72,7 @@ outline-color: var(--color-ocean); outline-offset: rem(2); outline-style: solid; - outline-width: rem(3); + outline-width: 3px; transition: outline-offset 0.2s linear; } } diff --git a/packages/themes/bmf/src/components/button.scss b/packages/themes/bmf/src/components/button.scss index dd26961615..817dba6f52 100644 --- a/packages/themes/bmf/src/components/button.scss +++ b/packages/themes/bmf/src/components/button.scss @@ -9,7 +9,7 @@ outline-color: var(--color-ocean); outline-offset: rem(2); outline-style: solid; - outline-width: rem(3); + outline-width: 3px; transition: outline-offset 0.2s linear; } @@ -18,10 +18,10 @@ font-weight: 700; border-radius: var(--a11y-min-size); border-style: solid; - border-width: rem(2); + border-width: 2px; min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: rem(8) rem(14); + padding: 8px 14px; text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; diff --git a/packages/themes/bmf/src/components/card.scss b/packages/themes/bmf/src/components/card.scss index 28e0d3680e..f982046e71 100644 --- a/packages/themes/bmf/src/components/card.scss +++ b/packages/themes/bmf/src/components/card.scss @@ -12,8 +12,8 @@ height: 100%; background-color: white; grid-template-rows: min-content 2fr min-content; - box-shadow: 0 0 rem(4) var(--color-grey); - border-radius: rem(4); + box-shadow: 0 0 4px var(--color-grey); + border-radius: 4px; } :host .kol-heading-wc { @@ -21,16 +21,16 @@ } :host div.header { - padding: rem(16) rem(16) rem(8) rem(16); + padding: 16px 16px 8px 16px; } :host div.content { - padding: rem(8) rem(16) rem(16); + padding: 8px 16px 16px; overflow: hidden; } :host div.footer { - padding: rem(8) rem(16); + padding: 8px 16px; } :host > div > div.content + div.footer { diff --git a/packages/themes/bmf/src/components/combobox.scss b/packages/themes/bmf/src/components/combobox.scss index 286d66bc64..80319a9d61 100644 --- a/packages/themes/bmf/src/components/combobox.scss +++ b/packages/themes/bmf/src/components/combobox.scss @@ -52,7 +52,7 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: rem(1); + border-width: 1px; border-radius: var(--border-radius); border-color: var(--color-grey); overflow-y: auto; @@ -66,7 +66,7 @@ $visible-options: 5; display: flex; align-items: center; min-height: $option-height; - padding: rem(10) rem(12); + padding: 10px 12px; border-radius: 0.25em; color: var(--color-black); diff --git a/packages/themes/bmf/src/components/details.scss b/packages/themes/bmf/src/components/details.scss index bbc3560c94..df69e7b393 100644 --- a/packages/themes/bmf/src/components/details.scss +++ b/packages/themes/bmf/src/components/details.scss @@ -71,7 +71,7 @@ border: none; &:hover { - box-shadow: 0 rem(3) var(--color-ocean); + box-shadow: 0 3px var(--color-ocean); } } } diff --git a/packages/themes/bmf/src/components/drawer.scss b/packages/themes/bmf/src/components/drawer.scss index e1db49ced9..94ac6db690 100644 --- a/packages/themes/bmf/src/components/drawer.scss +++ b/packages/themes/bmf/src/components/drawer.scss @@ -2,6 +2,6 @@ @layer kol-theme-component { :host .drawer__wrapper { - box-shadow: 0 0 rem(4) var(--color-grey); + box-shadow: 0 0 4px var(--color-grey); } } diff --git a/packages/themes/bmf/src/components/input-checkbox.scss b/packages/themes/bmf/src/components/input-checkbox.scss index a39fa266ab..d719d4302a 100644 --- a/packages/themes/bmf/src/components/input-checkbox.scss +++ b/packages/themes/bmf/src/components/input-checkbox.scss @@ -75,9 +75,9 @@ order: 1; width: 100%; border-color: var(--color-grey); - border-width: rem(2); + border-width: 2px; border-style: solid; - border-radius: rem(5); + border-radius: 5px; line-height: 1; font-size: rem(16); @@ -337,7 +337,7 @@ min-height: rem(34); border: rem(3) solid var(--color-ocean); background-clip: content-box; // emulate outline with offset - padding: rem(2); + padding: 2px; } } diff --git a/packages/themes/bmf/src/components/input-radio.scss b/packages/themes/bmf/src/components/input-radio.scss index 701655510d..e7dc4bd0ed 100644 --- a/packages/themes/bmf/src/components/input-radio.scss +++ b/packages/themes/bmf/src/components/input-radio.scss @@ -39,9 +39,9 @@ cursor: pointer; border-color: var(--color-grey); - border-width: rem(2); + border-width: 2px; border-style: solid; - border-radius: rem(5); + border-radius: 5px; font-size: rem(16); &:hover { diff --git a/packages/themes/bmf/src/components/link-button.scss b/packages/themes/bmf/src/components/link-button.scss index 0c30df9036..edc111ee3e 100644 --- a/packages/themes/bmf/src/components/link-button.scss +++ b/packages/themes/bmf/src/components/link-button.scss @@ -10,7 +10,7 @@ outline-color: var(--color-ocean); outline-offset: rem(2); outline-style: solid; - outline-width: rem(3); + outline-width: 3px; transition: outline-offset 0.2s linear; } @@ -18,10 +18,10 @@ font-weight: 700; border-radius: var(--a11y-min-size); border-style: solid; - border-width: rem(2); + border-width: 2px; min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: rem(8) rem(14); + padding: 8px 14px; text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; @@ -50,7 +50,7 @@ .kol-span-wc { border: none; - border-radius: rem(5); + border-radius: 5px; } } diff --git a/packages/themes/bmf/src/components/nav.scss b/packages/themes/bmf/src/components/nav.scss index 9241511ef2..d03a8c6fad 100644 --- a/packages/themes/bmf/src/components/nav.scss +++ b/packages/themes/bmf/src/components/nav.scss @@ -29,7 +29,7 @@ line-height: 1; min-height: rem(44); min-width: rem(44); - padding: rem(12) rem(8) rem(12) rem(4); + padding: 12px 8px 12px 4px; place-items: center; text-decoration: none; transition-duration: 0.5s; diff --git a/packages/themes/bmf/src/components/pagination.scss b/packages/themes/bmf/src/components/pagination.scss index be416280b3..ab2c8098b8 100644 --- a/packages/themes/bmf/src/components/pagination.scss +++ b/packages/themes/bmf/src/components/pagination.scss @@ -79,7 +79,7 @@ color: var(--color-midnight); min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: rem(8); + padding: 8px; text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; diff --git a/packages/themes/bmf/src/components/single-select.scss b/packages/themes/bmf/src/components/single-select.scss index 60ff6a7669..4733fb63ae 100644 --- a/packages/themes/bmf/src/components/single-select.scss +++ b/packages/themes/bmf/src/components/single-select.scss @@ -41,7 +41,7 @@ $visible-options: 5; &__button { display: grid; place-items: center; - padding: 0 rem(16); + padding: 0 16px; &:focus { outline: 0; @@ -50,7 +50,7 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: rem(1); + border-width: 1px; border-radius: var(--border-radius); border-color: var(--color-grey); max-height: calc($option-height * $visible-options + rem(2)); diff --git a/packages/themes/bmf/src/components/skip-nav.scss b/packages/themes/bmf/src/components/skip-nav.scss index 2dd943fa6a..247f46a986 100644 --- a/packages/themes/bmf/src/components/skip-nav.scss +++ b/packages/themes/bmf/src/components/skip-nav.scss @@ -4,10 +4,10 @@ .kol-link-wc > a > .kol-span-wc { border-radius: var(--a11y-min-size); border-style: solid; - border-width: rem(2); + border-width: 2px; gap: rem(8); line-height: 1; - padding: rem(8) rem(14); + padding: 8px 14px; background-color: var(--color-ocean); border-color: var(--color-ocean); color: var(--color-white); diff --git a/packages/themes/bmf/src/components/spin.scss b/packages/themes/bmf/src/components/spin.scss index ad683a1e6d..784b02db83 100644 --- a/packages/themes/bmf/src/components/spin.scss +++ b/packages/themes/bmf/src/components/spin.scss @@ -2,7 +2,7 @@ @layer kol-theme-component { .cycle { - padding: rem(2); + padding: 2px; & span { background-color: #fc0; diff --git a/packages/themes/bmf/src/components/split-button.scss b/packages/themes/bmf/src/components/split-button.scss index b00b1cb278..9bee1f11a8 100644 --- a/packages/themes/bmf/src/components/split-button.scss +++ b/packages/themes/bmf/src/components/split-button.scss @@ -6,7 +6,7 @@ font-family: var(--font-family); border-radius: var(--a11y-min-size); border-style: solid; - border-width: rem(2); + border-width: 2px; border-color: var(--color-midnight); } @@ -16,7 +16,7 @@ .horizontal-line { background-color: var(--color-midnight); - border-radius: rem(2); + border-radius: 2px; width: rem(1); } @@ -40,7 +40,7 @@ :is(a, button):focus .kol-span-wc { outline-color: var(--color-ocean); outline-style: solid; - outline-width: rem(3); + outline-width: 3px; outline-offset: rem(2); transition: outline-offset 0.2s linear; } @@ -51,7 +51,7 @@ border-bottom-left-radius: var(--a11y-min-size); min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: rem(8) rem(14); + padding: 8px 14px; text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; diff --git a/packages/themes/bmf/src/components/tabs.scss b/packages/themes/bmf/src/components/tabs.scss index dee98cb3e7..8f7a72b5b3 100644 --- a/packages/themes/bmf/src/components/tabs.scss +++ b/packages/themes/bmf/src/components/tabs.scss @@ -15,7 +15,7 @@ box-sizing: border-box; background-color: transparent; border: 0; - border-radius: rem(4); + border-radius: 4px; font-style: normal; font-weight: 700; font-size: rem(18); diff --git a/packages/themes/bmf/src/components/toolbar.scss b/packages/themes/bmf/src/components/toolbar.scss index dd51a6a990..8aa55ba0c6 100644 --- a/packages/themes/bmf/src/components/toolbar.scss +++ b/packages/themes/bmf/src/components/toolbar.scss @@ -5,7 +5,7 @@ padding: var(--spacing); border-radius: var(--border-radius); background-color: var(--color-ice); - border-width: rem(2); + border-width: 2px; border-style: solid; } } diff --git a/packages/themes/bmf/src/global.scss b/packages/themes/bmf/src/global.scss index cb1104c4c1..35c3c7e724 100644 --- a/packages/themes/bmf/src/global.scss +++ b/packages/themes/bmf/src/global.scss @@ -4,7 +4,7 @@ @layer kol-theme-global { /* Design Tokens */ :host { - --border-radius: #{rem(5)}; + --border-radius: 5px; --color-midnight: #004b76; --color-ocean: #0077b6; --color-sky: #99c9e2; @@ -102,7 +102,7 @@ .kol-tooltip-wc .tooltip-content { border-radius: var(--border-radius); line-height: 1.25; - padding: rem(16) rem(12); + padding: 16px 12px; } .kol-span-wc, diff --git a/packages/themes/bmf/src/mixins/alert.scss b/packages/themes/bmf/src/mixins/alert.scss index e40ab3c6a4..974efa8dd1 100644 --- a/packages/themes/bmf/src/mixins/alert.scss +++ b/packages/themes/bmf/src/mixins/alert.scss @@ -2,9 +2,9 @@ @mixin kol-alert-theme { .kol-alert-wc { - border-width: rem(2); + border-width: 2px; border-style: solid; - border-radius: rem(5); + border-radius: 5px; display: flex; width: 100%; overflow: unset; @@ -174,7 +174,7 @@ } .card { - border-width: rem(2); + border-width: 2px; border-style: solid; filter: drop-shadow(0 rem(2) rem(4) rgba(8, 35, 48, 0.24)); flex-direction: column; @@ -186,7 +186,7 @@ } > .heading { - padding: rem(8) rem(16); + padding: 8px 16px; > div { width: 100%; @@ -218,7 +218,7 @@ outline-color: var(--color-white); outline-offset: rem(-3); outline-style: solid; - outline-width: rem(3); + outline-width: 3px; transition: outline 0.1s linear; } @@ -238,7 +238,7 @@ > .content { color: var(--color-black); - padding: rem(16); + padding: 16px; max-height: rem(152); overflow-y: auto; } @@ -323,10 +323,10 @@ cursor: pointer; border-radius: 1.5em; border-style: solid; - border-width: rem(2); + border-width: 2px; font-size: rem(16); align-items: center; - padding: rem(8); + padding: 8px; justify-content: center; font-style: normal; text-align: center; diff --git a/packages/themes/bmf/src/mixins/button.scss b/packages/themes/bmf/src/mixins/button.scss index a5984c93cb..697829e151 100644 --- a/packages/themes/bmf/src/mixins/button.scss +++ b/packages/themes/bmf/src/mixins/button.scss @@ -145,7 +145,7 @@ } :is(a, button).hide-label > .kol-span-wc { - padding: rem(8); + padding: 8px; width: unset; } diff --git a/packages/themes/bmf/src/mixins/focus-outline.scss b/packages/themes/bmf/src/mixins/focus-outline.scss index 8916db9002..8a230c35f6 100644 --- a/packages/themes/bmf/src/mixins/focus-outline.scss +++ b/packages/themes/bmf/src/mixins/focus-outline.scss @@ -3,6 +3,6 @@ outline-color: var(--color-ocean); outline-offset: rem(2); outline-style: solid; - outline-width: rem(3); + outline-width: 3px; transition: outline-offset 0.2s linear; } diff --git a/packages/themes/bmf/src/mixins/input-messages.scss b/packages/themes/bmf/src/mixins/input-messages.scss index 3cdbec1cd1..260ae24e45 100644 --- a/packages/themes/bmf/src/mixins/input-messages.scss +++ b/packages/themes/bmf/src/mixins/input-messages.scss @@ -93,7 +93,7 @@ &.#{$type} { .input { border-color: var(#{$color}); - border-width: rem(3); + border-width: 3px; &:hover { border-color: var(--color-midnight); diff --git a/packages/themes/bmf/src/mixins/input.scss b/packages/themes/bmf/src/mixins/input.scss index 4a6193d902..489e0b27ad 100644 --- a/packages/themes/bmf/src/mixins/input.scss +++ b/packages/themes/bmf/src/mixins/input.scss @@ -62,7 +62,7 @@ border-color: var(--color-grey); border-radius: var(--border-radius); border-style: solid; - border-width: rem(2); + border-width: 2px; > .kol-icon { width: 1em; diff --git a/packages/themes/bmf/src/mixins/kol-table-stateless-wc.scss b/packages/themes/bmf/src/mixins/kol-table-stateless-wc.scss index 89d034e460..b6d4011394 100644 --- a/packages/themes/bmf/src/mixins/kol-table-stateless-wc.scss +++ b/packages/themes/bmf/src/mixins/kol-table-stateless-wc.scss @@ -24,7 +24,7 @@ .table:has(.focus-element:focus) { outline-color: var(--color-ocean); outline-style: solid; - outline-width: rem(3); + outline-width: 3px; transition: outline-offset 0.2s linear; } @@ -107,14 +107,14 @@ outline-color: var(--color-ocean); outline-style: solid; outline-offset: rem(2); - outline-width: rem(3); + outline-width: 3px; } } // CHECKBOX input[type='checkbox'] { border-color: var(--color-grey); - border-radius: rem(5); + border-radius: 5px; &:checked { background-color: var(--color-midnight); diff --git a/packages/themes/bmf/src/mixins/link.scss b/packages/themes/bmf/src/mixins/link.scss index e2e85f4b09..d820bb2579 100644 --- a/packages/themes/bmf/src/mixins/link.scss +++ b/packages/themes/bmf/src/mixins/link.scss @@ -13,7 +13,7 @@ text-decoration-thickness: unset; .kol-span-wc { - border-radius: rem(5); + border-radius: 5px; outline: rem(3) solid var(--color-ocean); } diff --git a/packages/themes/default/src/@shared/input-core.scss b/packages/themes/default/src/@shared/input-core.scss index e177f802a5..7dc6957584 100644 --- a/packages/themes/default/src/@shared/input-core.scss +++ b/packages/themes/default/src/@shared/input-core.scss @@ -37,8 +37,8 @@ border-color: var(--color-subtle); border-radius: var(--border-radius); border-style: solid; - border-width: rem(2); - padding: 0 rem(8); + border-width: 2px; + padding: 0 8px; > .kol-icon { width: rem(16); diff --git a/packages/themes/default/src/components/accordion.scss b/packages/themes/default/src/components/accordion.scss index 5ea0811765..a227ea30fa 100644 --- a/packages/themes/default/src/components/accordion.scss +++ b/packages/themes/default/src/components/accordion.scss @@ -48,7 +48,7 @@ min-height: rem(35.2); button { - padding: rem(12) rem(8); + padding: 12px 8px; :focus { outline: none; diff --git a/packages/themes/default/src/components/badge.scss b/packages/themes/default/src/components/badge.scss index 2169325cc3..307da4a561 100644 --- a/packages/themes/default/src/components/badge.scss +++ b/packages/themes/default/src/components/badge.scss @@ -29,7 +29,7 @@ } :host > span .kol-span-wc { - padding: rem(4) rem(12); + padding: 4px 12px; } :host > span > .kol-span-wc { diff --git a/packages/themes/default/src/components/button-link.scss b/packages/themes/default/src/components/button-link.scss index 7129e8c1b4..54cb0f4d59 100644 --- a/packages/themes/default/src/components/button-link.scss +++ b/packages/themes/default/src/components/button-link.scss @@ -43,7 +43,7 @@ .access-key-hint { background-color: var(--color-mute-variant); - border-radius: rem(3); + border-radius: 3px; color: var(--color-text); padding: 0 0.3em; } diff --git a/packages/themes/default/src/components/button.scss b/packages/themes/default/src/components/button.scss index 5c798761f8..43421b3273 100644 --- a/packages/themes/default/src/components/button.scss +++ b/packages/themes/default/src/components/button.scss @@ -13,7 +13,7 @@ border-width: var(--border-width); min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: rem(8) rem(14); + padding: 8px 14px; text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; diff --git a/packages/themes/default/src/components/card.scss b/packages/themes/default/src/components/card.scss index 0be4a88c86..1b5793e428 100644 --- a/packages/themes/default/src/components/card.scss +++ b/packages/themes/default/src/components/card.scss @@ -12,7 +12,7 @@ height: 100%; background-color: var(--color-light); grid-template-rows: min-content 2fr min-content; - box-shadow: 0 0 rem(4) var(--color-subtle); + box-shadow: 0 0 4px var(--color-subtle); border-radius: var(--border-radius); } @@ -21,15 +21,15 @@ } :host div.header { - padding: rem(16) rem(16) rem(8) rem(16); + padding: 16px 16px 8px 16px; } :host div.content { - padding: rem(8) rem(16) rem(16); + padding: 8px 16px 16px; overflow: hidden; } :host div.footer { - padding: rem(8) rem(16); + padding: 8px 16px; } } diff --git a/packages/themes/default/src/components/combobox.scss b/packages/themes/default/src/components/combobox.scss index 75407e82ac..4fe004a871 100644 --- a/packages/themes/default/src/components/combobox.scss +++ b/packages/themes/default/src/components/combobox.scss @@ -20,7 +20,7 @@ $visible-options: 5; display: inline-flex; align-items: center; width: 100%; - padding: 0 rem(8); + padding: 0 8px; } &__input { @@ -55,7 +55,7 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: rem(1); + border-width: 1px; border-radius: var(--border-radius); border-color: var(--color-subtle); overflow-y: auto; @@ -70,7 +70,7 @@ $visible-options: 5; align-items: center; min-height: $option-height; line-height: 1; - padding: rem(10) rem(12); + padding: 10px 12px; &:focus { background-color: var(--color-primary-variant); @@ -115,8 +115,8 @@ $visible-options: 5; border-color: var(--color-subtle); border-radius: var(--border-radius); border-style: solid; - border-width: rem(2); - padding: 0 rem(8); + border-width: 2px; + padding: 0 8px; } .input > .kol-icon { diff --git a/packages/themes/default/src/components/drawer.scss b/packages/themes/default/src/components/drawer.scss index f4991d72c9..9169b354c7 100644 --- a/packages/themes/default/src/components/drawer.scss +++ b/packages/themes/default/src/components/drawer.scss @@ -3,7 +3,7 @@ $duration: 0.4s; @layer kol-theme-component { .drawer__wrapper { - box-shadow: 0 0 rem(4) var(--color-subtle); + box-shadow: 0 0 4px var(--color-subtle); &--left { animation: slideInLeft $duration forwards; diff --git a/packages/themes/default/src/components/input-checkbox.scss b/packages/themes/default/src/components/input-checkbox.scss index 1f6b858d6d..4fd5e44196 100644 --- a/packages/themes/default/src/components/input-checkbox.scss +++ b/packages/themes/default/src/components/input-checkbox.scss @@ -83,7 +83,7 @@ order: 1; width: 100%; border-color: var(--color-subtle); - border-width: rem(2); + border-width: 2px; border-style: solid; border-radius: var(--border-radius); @include kol-typography-body; @@ -91,7 +91,7 @@ input:hover { border-color: var(--color-primary); - box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); + box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24); } input:focus:hover { @@ -281,12 +281,12 @@ .input { border-style: solid; - border-width: rem(1) rem(1) rem(1) 0; + border-width: 1px 1px 1px 0; } .input-label { border-style: solid; - border-width: rem(1) 0 rem(1) rem(1); + border-width: 1px 0 1px 1px; } } } diff --git a/packages/themes/default/src/components/input-radio.scss b/packages/themes/default/src/components/input-radio.scss index 5da383a8ec..d527d68ad7 100644 --- a/packages/themes/default/src/components/input-radio.scss +++ b/packages/themes/default/src/components/input-radio.scss @@ -21,15 +21,15 @@ cursor: pointer; width: 100%; border-color: var(--color-subtle); - border-width: rem(2); + border-width: 2px; border-style: solid; - border-radius: rem(5); + border-radius: 5px; line-height: 1.5; } input:hover { border-color: var(--color-primary); - box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); + box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24); } input:focus:hover { diff --git a/packages/themes/default/src/components/input-range.scss b/packages/themes/default/src/components/input-range.scss index 086a6a6497..df3fa6d80e 100644 --- a/packages/themes/default/src/components/input-range.scss +++ b/packages/themes/default/src/components/input-range.scss @@ -43,8 +43,8 @@ border-color: var(--color-subtle); border-radius: var(--border-radius); border-style: solid; - border-width: rem(2); - padding: 0 rem(8); + border-width: 2px; + padding: 0 8px; } .input > .kol-icon { diff --git a/packages/themes/default/src/components/link-button.scss b/packages/themes/default/src/components/link-button.scss index 136f781e92..3203675bcf 100644 --- a/packages/themes/default/src/components/link-button.scss +++ b/packages/themes/default/src/components/link-button.scss @@ -24,7 +24,7 @@ outline-width: calc(var(--border-width) * 2); min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: rem(8) rem(14); + padding: 8px 14px; text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; @@ -74,7 +74,7 @@ .ghost :is(a, button):hover > .kol-span-wc { background-color: var(--color-primary-variant); border-color: var(--color-primary-variant); - box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); + box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24); color: var(--color-light); } @@ -133,7 +133,7 @@ .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span { background-color: var(--color-primary-variant); border-color: var(--color-primary-variant); - box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); + box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24); color: var(--color-light); } diff --git a/packages/themes/default/src/components/nav.scss b/packages/themes/default/src/components/nav.scss index 3c7813a7d0..21adb26eb1 100644 --- a/packages/themes/default/src/components/nav.scss +++ b/packages/themes/default/src/components/nav.scss @@ -33,7 +33,7 @@ } .horizontal & { - padding: 0 rem(16); + padding: 0 16px; } .vertical .active & { diff --git a/packages/themes/default/src/components/pagination.scss b/packages/themes/default/src/components/pagination.scss index ab8bfad6fb..e6c36a4e7f 100644 --- a/packages/themes/default/src/components/pagination.scss +++ b/packages/themes/default/src/components/pagination.scss @@ -18,7 +18,7 @@ font-weight: 700; min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: rem(8); + padding: 8px; text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; @@ -31,7 +31,7 @@ .button:is(:active, :hover):not(:disabled) .button-inner { background-color: var(--color-primary-variant); border-color: var(--color-primary-variant); - box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); + box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24); color: var(--color-light); } diff --git a/packages/themes/default/src/components/single-select.scss b/packages/themes/default/src/components/single-select.scss index 7209616b99..2a2218af6a 100644 --- a/packages/themes/default/src/components/single-select.scss +++ b/packages/themes/default/src/components/single-select.scss @@ -15,7 +15,7 @@ $visible-options: 5; .single-select { &__group { width: 100%; - padding: 0 rem(8); + padding: 0 8px; } &__input { @@ -53,7 +53,7 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: rem(1); + border-width: 1px; border-radius: var(--border-radius); border-color: var(--color-subtle); max-height: calc($option-height * $visible-options + rem(2)); @@ -65,7 +65,7 @@ $visible-options: 5; &__item { min-height: $option-height; line-height: 1; - padding: rem(10) rem(12); + padding: 10px 12px; .radio-label { align-self: center; @@ -116,8 +116,8 @@ $visible-options: 5; border-color: var(--color-subtle); border-radius: var(--border-radius); border-style: solid; - border-width: rem(2); - padding: 0 rem(8); + border-width: 2px; + padding: 0 8px; } .input > .kol-icon { diff --git a/packages/themes/default/src/components/skip-nav.scss b/packages/themes/default/src/components/skip-nav.scss index 61cfc7d623..d5a51946f0 100644 --- a/packages/themes/default/src/components/skip-nav.scss +++ b/packages/themes/default/src/components/skip-nav.scss @@ -11,7 +11,7 @@ border-width: var(--border-width); gap: calc(var(--spacing) * 2); line-height: 1; - padding: rem(8) rem(14); + padding: 8px 14px; background-color: var(--color-primary-variant); border-color: var(--color-primary-variant); color: var(--color-light); diff --git a/packages/themes/default/src/components/split-button.scss b/packages/themes/default/src/components/split-button.scss index 6f12d858d0..e87efb9416 100644 --- a/packages/themes/default/src/components/split-button.scss +++ b/packages/themes/default/src/components/split-button.scss @@ -22,7 +22,7 @@ .horizontal-line { background-color: var(--color-primary); - border-radius: rem(2); + border-radius: 2px; width: rem(1); } @@ -32,7 +32,7 @@ border-bottom-left-radius: var(--border-radius); min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: rem(8) rem(14); + padding: 8px 14px; text-align: center; transition-duration: 0.5s; transition-property: background-color, color, border-color; diff --git a/packages/themes/default/src/components/textarea.scss b/packages/themes/default/src/components/textarea.scss index 63b47ab20d..dcbb2a3320 100644 --- a/packages/themes/default/src/components/textarea.scss +++ b/packages/themes/default/src/components/textarea.scss @@ -47,8 +47,8 @@ border-color: var(--color-subtle); border-radius: var(--border-radius); border-style: solid; - border-width: rem(2); - padding: 0 rem(8); + border-width: 2px; + padding: 0 8px; } .input > .kol-icon { diff --git a/packages/themes/default/src/components/toolbar.scss b/packages/themes/default/src/components/toolbar.scss index 368702dbed..514da49496 100644 --- a/packages/themes/default/src/components/toolbar.scss +++ b/packages/themes/default/src/components/toolbar.scss @@ -2,7 +2,7 @@ @layer kol-theme-component { .toolbar { - padding: rem(8) rem(14); + padding: 8px 14px; border-radius: var(--border-radius); background-color: var(--color-light); border-width: var(--border-width); diff --git a/packages/themes/default/src/global.scss b/packages/themes/default/src/global.scss index a80954986c..efe1dede0c 100644 --- a/packages/themes/default/src/global.scss +++ b/packages/themes/default/src/global.scss @@ -2,11 +2,11 @@ @layer kol-theme-global { :host { - --border-radius: var(--kolibri-border-radius, #{rem(5)}); + --border-radius: var(--kolibri-border-radius, 5px); --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif); --font-size: var(--kolibri-font-size, #{rem(16)}); - --spacing: var(--kolibri-spacing, #{rem(4)}); - --border-width: var(--kolibri-border-width, #{rem(1)}); + --spacing: var(--kolibri-spacing, 4px); + --border-width: var(--kolibri-border-width, 1px); --color-primary: var(--kolibri-color-primary, #004b76); --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6); --color-danger: var(--kolibri-color-danger, #b4003c); @@ -41,7 +41,7 @@ outline-color: var(--color-primary-variant); outline-offset: rem(2); outline-style: solid; - outline-width: rem(3); + outline-width: 3px; transition: outline-offset 0.2s linear; } @@ -65,7 +65,7 @@ .kol-tooltip-wc .tooltip-content { border-radius: var(--border-radius); line-height: 1.5; - padding: rem(8) rem(12); + padding: 8px 12px; } .kol-span-wc, diff --git a/packages/themes/default/src/mixins/alert-wc.scss b/packages/themes/default/src/mixins/alert-wc.scss index a71520c40c..e0ac58b51f 100644 --- a/packages/themes/default/src/mixins/alert-wc.scss +++ b/packages/themes/default/src/mixins/alert-wc.scss @@ -158,7 +158,7 @@ } .card > .heading { - padding: rem(8) rem(16); + padding: 8px 16px; } .card[_has-closer] > .heading { @@ -190,7 +190,7 @@ } .card > .content { - padding: rem(16); + padding: 16px; } .card.default > .heading { diff --git a/packages/themes/default/src/mixins/button.scss b/packages/themes/default/src/mixins/button.scss index 850b3c788e..041d0e98d6 100644 --- a/packages/themes/default/src/mixins/button.scss +++ b/packages/themes/default/src/mixins/button.scss @@ -54,7 +54,7 @@ .ghost :is(a, button):hover > .kol-span-wc { background-color: var(--color-primary-variant); border-color: var(--color-primary-variant); - box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); + box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24); color: var(--color-light); } @@ -113,7 +113,7 @@ .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span { background-color: var(--color-primary-variant); border-color: var(--color-primary-variant); - box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); + box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24); color: var(--color-light); } @@ -127,7 +127,7 @@ .access-key-hint { background-color: var(--color-mute-variant); - border-radius: rem(3); + border-radius: 3px; color: var(--color-text); padding: 0 0.3em; } diff --git a/packages/themes/default/src/mixins/indented-text.scss b/packages/themes/default/src/mixins/indented-text.scss index 05333ee21e..36ee4b948c 100644 --- a/packages/themes/default/src/mixins/indented-text.scss +++ b/packages/themes/default/src/mixins/indented-text.scss @@ -3,7 +3,7 @@ @mixin indented-text { font-family: var(--font-family); border-left: rem(2) solid var(--color-primary-variant); - padding: 0 rem(18) 0 rem(8); + padding: 0 18px 0 8px; margin-left: rem(-2); width: 100%; } diff --git a/packages/themes/default/src/mixins/kol-table-stateless-wc.scss b/packages/themes/default/src/mixins/kol-table-stateless-wc.scss index 5961305476..03121f3819 100644 --- a/packages/themes/default/src/mixins/kol-table-stateless-wc.scss +++ b/packages/themes/default/src/mixins/kol-table-stateless-wc.scss @@ -17,7 +17,7 @@ } caption { - padding: rem(8); + padding: 8px; } th { @@ -34,13 +34,13 @@ } .table { - padding: rem(8); + padding: 8px; &:has(.focus-element:focus) { outline-color: var(--color-primary-variant); outline-offset: rem(2); outline-style: solid; - outline-width: rem(3); + outline-width: 3px; transition: outline-offset 0.2s linear; } } @@ -81,7 +81,7 @@ th, td { - padding: rem(8); + padding: 8px; } th[aria-sort='ascending'], @@ -104,7 +104,7 @@ input { &:hover { border-color: var(--color-primary); - box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); + box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24); } &:focus { @@ -112,7 +112,7 @@ outline-color: var(--color-primary-variant); outline-style: solid; outline-offset: rem(2); - outline-width: rem(3); + outline-width: 3px; } &:focus:hover { @@ -123,7 +123,7 @@ // CHECKBOX input[type='checkbox'] { border-color: var(--color-subtle); - border-radius: rem(5); + border-radius: 5px; &:checked { background-color: var(--color-primary); diff --git a/packages/themes/ecl/src/ecl-ec/@shared/input-core.scss b/packages/themes/ecl/src/ecl-ec/@shared/input-core.scss index 9558b9a81f..d53da54397 100644 --- a/packages/themes/ecl/src/ecl-ec/@shared/input-core.scss +++ b/packages/themes/ecl/src/ecl-ec/@shared/input-core.scss @@ -54,7 +54,7 @@ color: var(--color-grey); order: 4; align-items: center; - padding: rem(1) 0.5em; + padding: 1px 0.5em; } input::placeholder, diff --git a/packages/themes/ecl/src/ecl-ec/components/accordion.scss b/packages/themes/ecl/src/ecl-ec/components/accordion.scss index 4c4f98fea7..f103b8c591 100644 --- a/packages/themes/ecl/src/ecl-ec/components/accordion.scss +++ b/packages/themes/ecl/src/ecl-ec/components/accordion.scss @@ -10,7 +10,7 @@ background-color: var(--color-grey-5); border-color: var(--color-grey-25); border-style: solid; - border-width: rem(1); + border-width: 1px; &__heading-button { button { @@ -24,7 +24,7 @@ span { color: var(--color-grey); font-weight: var(--font-weight-bold); - padding: rem(12) 0; + padding: 12px 0; width: 100%; border: none; } diff --git a/packages/themes/ecl/src/ecl-ec/components/badge.scss b/packages/themes/ecl/src/ecl-ec/components/badge.scss index 066c9d61ba..79e9b574b9 100644 --- a/packages/themes/ecl/src/ecl-ec/components/badge.scss +++ b/packages/themes/ecl/src/ecl-ec/components/badge.scss @@ -3,7 +3,7 @@ @layer kol-theme-component { :host > span { font: normal normal var(--font-weight) 1em var(--font-family); - padding: calc(rem(8) - rem(1)) calc(rem(12) - rem(1)); + padding: calc(8px - 1px) calc(12px - 1px); text-transform: uppercase; } } diff --git a/packages/themes/ecl/src/ecl-ec/components/button-link.scss b/packages/themes/ecl/src/ecl-ec/components/button-link.scss index d3db6889af..da55d17275 100644 --- a/packages/themes/ecl/src/ecl-ec/components/button-link.scss +++ b/packages/themes/ecl/src/ecl-ec/components/button-link.scss @@ -43,7 +43,7 @@ .access-key-hint { background-color: var(--color-mute-variant); - border-radius: rem(3); + border-radius: 3px; color: var(--color-text); padding: 0 0.3em; } diff --git a/packages/themes/ecl/src/ecl-ec/components/button.scss b/packages/themes/ecl/src/ecl-ec/components/button.scss index d30303deee..fe41d76605 100644 --- a/packages/themes/ecl/src/ecl-ec/components/button.scss +++ b/packages/themes/ecl/src/ecl-ec/components/button.scss @@ -10,7 +10,7 @@ button .kol-span-wc { border-radius: 0; border-style: solid; - border-width: rem(2); + border-width: 2px; font-weight: var(--font-weight-bold); margin: 0; min-height: rem(44); diff --git a/packages/themes/ecl/src/ecl-ec/components/combobox.scss b/packages/themes/ecl/src/ecl-ec/components/combobox.scss index 5d8cfcd17f..98c07af1cc 100644 --- a/packages/themes/ecl/src/ecl-ec/components/combobox.scss +++ b/packages/themes/ecl/src/ecl-ec/components/combobox.scss @@ -24,7 +24,7 @@ $visible-options: 5; color: var(--color-grey); order: 4; align-items: center; - padding: rem(1) 0.5em; + padding: 1px 0.5em; } &__input { @@ -59,7 +59,7 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: rem(1); + border-width: 1px; border-color: var(--color-blue); overflow-y: auto; overflow-x: hidden; @@ -73,7 +73,7 @@ $visible-options: 5; align-items: center; min-height: $option-height; line-height: 1.2; - padding: rem(10) rem(12); + padding: 10px 12px; &:focus { background-color: var(--color-blue); @@ -122,7 +122,7 @@ $visible-options: 5; color: var(--color-grey); order: 4; align-items: center; - padding: rem(1); + padding: 1px; } input::placeholder, diff --git a/packages/themes/ecl/src/ecl-ec/components/input-checkbox.scss b/packages/themes/ecl/src/ecl-ec/components/input-checkbox.scss index d8ebddf9fb..29d6fa8fe5 100644 --- a/packages/themes/ecl/src/ecl-ec/components/input-checkbox.scss +++ b/packages/themes/ecl/src/ecl-ec/components/input-checkbox.scss @@ -17,7 +17,7 @@ input[type='checkbox'] { background-color: var(--color-white); - border-width: rem(2); + border-width: 2px; border-style: solid; color: var(--color-grey); line-height: 1.5; @@ -28,7 +28,7 @@ outline-color: var(--color-blue); outline-offset: rem(2); outline-style: solid; - outline-width: rem(2); + outline-width: 2px; } input[type='checkbox'] { @@ -146,6 +146,6 @@ outline-color: var(--color-blue); outline-offset: rem(2); outline-style: solid; - outline-width: rem(2); + outline-width: 2px; } } diff --git a/packages/themes/ecl/src/ecl-ec/components/input-radio.scss b/packages/themes/ecl/src/ecl-ec/components/input-radio.scss index c6a8cf8a92..3eb995beea 100644 --- a/packages/themes/ecl/src/ecl-ec/components/input-radio.scss +++ b/packages/themes/ecl/src/ecl-ec/components/input-radio.scss @@ -66,7 +66,7 @@ input[type='radio']:checked { border-color: var(--color-blue); - border-width: rem(7); + border-width: 7px; } input[type='radio']:focus { @@ -97,7 +97,7 @@ .error input[type='radio']:checked { border-color: var(--color-red); - border-width: rem(7); + border-width: 7px; } .error input[type='radio']:not(:disabled):hover { diff --git a/packages/themes/ecl/src/ecl-ec/components/link-button.scss b/packages/themes/ecl/src/ecl-ec/components/link-button.scss index 44ce9cf8a0..8ee3679f11 100644 --- a/packages/themes/ecl/src/ecl-ec/components/link-button.scss +++ b/packages/themes/ecl/src/ecl-ec/components/link-button.scss @@ -2,7 +2,7 @@ @layer kol-theme-component { :host { - --kolibri-spacing: #{rem(4)}; + --kolibri-spacing: 4px; } a, diff --git a/packages/themes/ecl/src/ecl-ec/components/nav.scss b/packages/themes/ecl/src/ecl-ec/components/nav.scss index dcbfce6619..1ec8307f39 100644 --- a/packages/themes/ecl/src/ecl-ec/components/nav.scss +++ b/packages/themes/ecl/src/ecl-ec/components/nav.scss @@ -46,11 +46,11 @@ .kol-span-wc { border-color: transparent; border-style: solid; - border-width: rem(2); + border-width: 2px; color: var(--color-white); font-size: rem(18); justify-items: start; - padding: rem(16); + padding: 16px; height: 100%; } diff --git a/packages/themes/ecl/src/ecl-ec/components/single-select.scss b/packages/themes/ecl/src/ecl-ec/components/single-select.scss index 8dfc7c6c96..3e50fef027 100644 --- a/packages/themes/ecl/src/ecl-ec/components/single-select.scss +++ b/packages/themes/ecl/src/ecl-ec/components/single-select.scss @@ -22,7 +22,7 @@ $visible-options: 5; color: var(--color-grey); order: 4; align-items: center; - padding: rem(1) 0.5em; + padding: 1px 0.5em; } &__input { @@ -61,7 +61,7 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: rem(1); + border-width: 1px; border-color: var(--color-blue); max-height: calc($option-height * $visible-options + rem(1)); overflow-y: auto; @@ -71,7 +71,7 @@ $visible-options: 5; } &__item { - padding: rem(10) rem(12); + padding: 10px 12px; min-height: $option-height; line-height: 1.2; @@ -128,7 +128,7 @@ $visible-options: 5; color: var(--color-grey); order: 4; align-items: center; - padding: rem(1); + padding: 1px; } input::placeholder, diff --git a/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss b/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss index 83deaea53d..94dd0ead13 100644 --- a/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss +++ b/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss @@ -8,7 +8,7 @@ .kol-link-wc > a > .kol-span-wc { border-radius: 0; border-style: solid; - border-width: rem(2); + border-width: 2px; font-weight: var(--font-weight-bold); gap: rem(8); line-height: 1; diff --git a/packages/themes/ecl/src/ecl-ec/components/spin.scss b/packages/themes/ecl/src/ecl-ec/components/spin.scss index 66f3c58a1d..6f8e93ce9d 100644 --- a/packages/themes/ecl/src/ecl-ec/components/spin.scss +++ b/packages/themes/ecl/src/ecl-ec/components/spin.scss @@ -2,7 +2,7 @@ @layer kol-theme-component { .cycle { - padding: rem(2); + padding: 2px; & span { background-color: var(--color-blue-75); } diff --git a/packages/themes/ecl/src/ecl-ec/components/split-button.scss b/packages/themes/ecl/src/ecl-ec/components/split-button.scss index 569a37f937..ba21ed99cb 100644 --- a/packages/themes/ecl/src/ecl-ec/components/split-button.scss +++ b/packages/themes/ecl/src/ecl-ec/components/split-button.scss @@ -6,7 +6,7 @@ font-family: var(--font-family); border-radius: 0; border-style: solid; - border-width: rem(2); + border-width: 2px; border-color: var(--color-blue); } diff --git a/packages/themes/ecl/src/ecl-ec/components/tabs.scss b/packages/themes/ecl/src/ecl-ec/components/tabs.scss index 450549ab67..c8ef4ce3eb 100644 --- a/packages/themes/ecl/src/ecl-ec/components/tabs.scss +++ b/packages/themes/ecl/src/ecl-ec/components/tabs.scss @@ -3,7 +3,7 @@ @layer kol-theme-component { :host { font-family: var(--font-family); - --kolibri-spacing: #{rem(4)}; + --kolibri-spacing: 4px; } .tabs-button-group { @@ -17,7 +17,7 @@ } .tabs-button-group button .kol-span-wc { - padding: rem(8); + padding: 8px; min-height: rem(44); min-width: rem(44); } @@ -25,10 +25,10 @@ .tabs-button-group button.selected .kol-span-wc { border-color: var(--color-grey-25); border-style: solid; - border-width: rem(1); + border-width: 1px; border-bottom-color: white; border-top-color: var(--color-blue); - box-shadow: 0 rem(-3) var(--color-blue); + box-shadow: 0 -3px var(--color-blue); font-weight: var(--font-weight-bold); color: var(--color-blue); } @@ -40,6 +40,6 @@ .tabs-button-group button:focus .kol-span-wc { outline-color: var(--color-blue-130); outline-style: solid; - outline-width: rem(2); + outline-width: 2px; } } diff --git a/packages/themes/ecl/src/ecl-ec/components/toolbar.scss b/packages/themes/ecl/src/ecl-ec/components/toolbar.scss index fb10a21669..9ab3cd4050 100644 --- a/packages/themes/ecl/src/ecl-ec/components/toolbar.scss +++ b/packages/themes/ecl/src/ecl-ec/components/toolbar.scss @@ -5,7 +5,7 @@ padding: var(--spacing-s); border-color: var(--color-grey-25); border-style: solid; - border-width: rem(1); + border-width: 1px; background-color: var(--color-grey-5); } } diff --git a/packages/themes/ecl/src/ecl-ec/global.scss b/packages/themes/ecl/src/ecl-ec/global.scss index d91c98e69a..088299561e 100644 --- a/packages/themes/ecl/src/ecl-ec/global.scss +++ b/packages/themes/ecl/src/ecl-ec/global.scss @@ -10,10 +10,10 @@ } .kol-tooltip-wc .tooltip-content { - padding: rem(4) rem(8); + padding: 4px 8px; font-size: rem(14); line-height: 1.2; - border-radius: rem(2); + border-radius: 2px; border: rem(1) solid #626262; } diff --git a/packages/themes/ecl/src/ecl-ec/mixins/alert-wc.scss b/packages/themes/ecl/src/ecl-ec/mixins/alert-wc.scss index 964e7afb8d..a22d7ea43b 100644 --- a/packages/themes/ecl/src/ecl-ec/mixins/alert-wc.scss +++ b/packages/themes/ecl/src/ecl-ec/mixins/alert-wc.scss @@ -15,7 +15,7 @@ div.card { border-style: solid; - border-width: rem(2); + border-width: 2px; } div.msg { diff --git a/packages/themes/ecl/src/ecl-ec/mixins/button.scss b/packages/themes/ecl/src/ecl-ec/mixins/button.scss index 563b4abf98..201f5e2bfd 100644 --- a/packages/themes/ecl/src/ecl-ec/mixins/button.scss +++ b/packages/themes/ecl/src/ecl-ec/mixins/button.scss @@ -10,7 +10,7 @@ a:focus .kol-span-wc, button:focus .kol-span-wc { outline-offset: rem(-4); - outline-width: rem(2); + outline-width: 2px; outline-style: solid; } diff --git a/packages/themes/ecl/src/ecl-ec/mixins/kol-table-stateless-wc.scss b/packages/themes/ecl/src/ecl-ec/mixins/kol-table-stateless-wc.scss index e0e0548f7b..f541dd4880 100644 --- a/packages/themes/ecl/src/ecl-ec/mixins/kol-table-stateless-wc.scss +++ b/packages/themes/ecl/src/ecl-ec/mixins/kol-table-stateless-wc.scss @@ -39,7 +39,7 @@ outline-color: var(--color-blue); outline-offset: rem(2); outline-style: solid; - outline-width: rem(2); + outline-width: 2px; } table { @@ -92,7 +92,7 @@ outline-color: var(--color-blue); outline-style: solid; outline-offset: rem(2); - outline-width: rem(2); + outline-width: 2px; } // CHECKBOX @@ -135,7 +135,7 @@ &:checked { border-color: var(--color-blue); - border-width: rem(7); + border-width: 7px; &:before { background-color: var(--color-white); diff --git a/packages/themes/ecl/src/ecl-eu/@shared/input-core.scss b/packages/themes/ecl/src/ecl-eu/@shared/input-core.scss index 9558b9a81f..d53da54397 100644 --- a/packages/themes/ecl/src/ecl-eu/@shared/input-core.scss +++ b/packages/themes/ecl/src/ecl-eu/@shared/input-core.scss @@ -54,7 +54,7 @@ color: var(--color-grey); order: 4; align-items: center; - padding: rem(1) 0.5em; + padding: 1px 0.5em; } input::placeholder, diff --git a/packages/themes/ecl/src/ecl-eu/components/accordion.scss b/packages/themes/ecl/src/ecl-eu/components/accordion.scss index 137700e8ba..479ce816d0 100644 --- a/packages/themes/ecl/src/ecl-eu/components/accordion.scss +++ b/packages/themes/ecl/src/ecl-eu/components/accordion.scss @@ -7,7 +7,7 @@ } .accordion { - border-radius: rem(8); + border-radius: 8px; box-shadow: 0 rem(2) rem(4) rgb(9 49 142 / 8%), 0 0 rem(10) rgb(9 49 142 / 4%), @@ -22,7 +22,7 @@ &__heading-button { button { - border-radius: rem(8); + border-radius: 8px; outline-offset: rem(-1); border: 0; border-bottom-color: #cfdaf5; @@ -34,7 +34,7 @@ font: normal normal 400 rem(18) / rem(28) arial, sans-serif; - padding: rem(24); + padding: 24px; text-align: start; width: 100%; line-height: 1.2; @@ -77,7 +77,7 @@ normal normal 400 rem(16) / rem(24) arial, sans-serif; margin-inline-start: 0; - padding: rem(24); + padding: 24px; } .open &__heading-button { diff --git a/packages/themes/ecl/src/ecl-eu/components/badge.scss b/packages/themes/ecl/src/ecl-eu/components/badge.scss index 19556da6bc..9e18c052c7 100644 --- a/packages/themes/ecl/src/ecl-eu/components/badge.scss +++ b/packages/themes/ecl/src/ecl-eu/components/badge.scss @@ -7,7 +7,7 @@ :host > span { font: normal normal var(--font-weight) rem(14) / 1em var(--font-family); - padding: calc(rem(8) - rem(1)) calc(rem(12) - rem(1)); + padding: calc(8px - 1px) calc(12px - 1px); text-transform: uppercase; } } diff --git a/packages/themes/ecl/src/ecl-eu/components/button.scss b/packages/themes/ecl/src/ecl-eu/components/button.scss index b73e984339..6dff394183 100644 --- a/packages/themes/ecl/src/ecl-eu/components/button.scss +++ b/packages/themes/ecl/src/ecl-eu/components/button.scss @@ -3,7 +3,7 @@ @layer kol-theme-component { :host { - --kolibri-spacing: #{rem(4)}; + --kolibri-spacing: 4px; font-family: var(--font-family); } diff --git a/packages/themes/ecl/src/ecl-eu/components/combobox.scss b/packages/themes/ecl/src/ecl-eu/components/combobox.scss index 49c9bf3d34..06c8ce96e4 100644 --- a/packages/themes/ecl/src/ecl-eu/components/combobox.scss +++ b/packages/themes/ecl/src/ecl-eu/components/combobox.scss @@ -41,7 +41,7 @@ $visible-options: 5; color: var(--color-grey); order: 4; align-items: center; - padding: rem(1) 0.5em; + padding: 1px 0.5em; } &__input { @@ -76,7 +76,7 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: rem(1); + border-width: 1px; border-color: var(--color-blue); overflow-y: auto; overflow-x: hidden; @@ -90,7 +90,7 @@ $visible-options: 5; align-items: center; min-height: $option-height; line-height: 1.2; - padding: rem(10) rem(12); + padding: 10px 12px; &:focus { background-color: var(--color-blue); @@ -140,7 +140,7 @@ $visible-options: 5; color: var(--color-grey); order: 4; align-items: center; - padding: rem(1); + padding: 1px; } input::placeholder, diff --git a/packages/themes/ecl/src/ecl-eu/components/input-checkbox.scss b/packages/themes/ecl/src/ecl-eu/components/input-checkbox.scss index 2f29d383b2..723b908557 100644 --- a/packages/themes/ecl/src/ecl-eu/components/input-checkbox.scss +++ b/packages/themes/ecl/src/ecl-eu/components/input-checkbox.scss @@ -17,7 +17,7 @@ input[type='checkbox'] { background-color: var(--color-white); - border-width: rem(2); + border-width: 2px; border-style: solid; color: var(--color-grey); line-height: 1.5; @@ -28,7 +28,7 @@ outline-color: var(--color-blue); outline-offset: rem(2); outline-style: solid; - outline-width: rem(2); + outline-width: 2px; } input[type='checkbox'] { @@ -145,6 +145,6 @@ .button:focus-within { outline-color: var(--color-blue-130); outline-style: solid; - outline-width: rem(2); + outline-width: 2px; } } diff --git a/packages/themes/ecl/src/ecl-eu/components/input-radio.scss b/packages/themes/ecl/src/ecl-eu/components/input-radio.scss index a4d845ac5c..86ff7b4a9c 100644 --- a/packages/themes/ecl/src/ecl-eu/components/input-radio.scss +++ b/packages/themes/ecl/src/ecl-eu/components/input-radio.scss @@ -63,7 +63,7 @@ input[type='radio']:checked { border-color: var(--color-blue); - border-width: rem(7); + border-width: 7px; } input[type='radio']:focus { @@ -93,7 +93,7 @@ .error input[type='radio']:checked { border-color: var(--color-red); - border-width: rem(7); + border-width: 7px; } .error input[type='radio']:not(:disabled):hover { diff --git a/packages/themes/ecl/src/ecl-eu/components/link-button.scss b/packages/themes/ecl/src/ecl-eu/components/link-button.scss index 5c4a5414ff..b72f6bb619 100644 --- a/packages/themes/ecl/src/ecl-eu/components/link-button.scss +++ b/packages/themes/ecl/src/ecl-eu/components/link-button.scss @@ -2,14 +2,14 @@ @layer kol-theme-component { :host { - --kolibri-spacing: #{rem(4)}; + --kolibri-spacing: 4px; font-family: var(--font-family); } a, button { appearance: none; - border-radius: rem(4); + border-radius: 4px; text-decoration: none; } @@ -22,20 +22,20 @@ button > .kol-span-wc { min-height: rem(44); min-width: rem(44); - border-radius: rem(4); + border-radius: 4px; font: normal normal 400 rem(16) / rem(20) arial, sans-serif; font-weight: 400; margin: 0; - padding: rem(12); + padding: 12px; } a:focus-visible > .kol-span-wc, button:focus-visible > .kol-span-wc { outline-offset: rem(-4); outline-style: solid; - outline-width: rem(2); + outline-width: 2px; } a:active > .kol-span-wc, @@ -70,12 +70,12 @@ background-color: #fff; border: rem(2) solid #0e47cb; color: #0e47cb; - padding: calc(rem(12) - rem(2)) calc(rem(16) - rem(2)); + padding: calc(12px - 2px) calc(16px - 2px); } .secondary a:focus-visible > .kol-span-wc, .secondary button:focus-visible > .kol-span-wc { - box-shadow: inset 0 0 0 rem(4) #0e47cb; + box-shadow: inset 0 0 0 4px #0e47cb; outline-color: #fff; } diff --git a/packages/themes/ecl/src/ecl-eu/components/nav.scss b/packages/themes/ecl/src/ecl-eu/components/nav.scss index dcbfce6619..1ec8307f39 100644 --- a/packages/themes/ecl/src/ecl-eu/components/nav.scss +++ b/packages/themes/ecl/src/ecl-eu/components/nav.scss @@ -46,11 +46,11 @@ .kol-span-wc { border-color: transparent; border-style: solid; - border-width: rem(2); + border-width: 2px; color: var(--color-white); font-size: rem(18); justify-items: start; - padding: rem(16); + padding: 16px; height: 100%; } diff --git a/packages/themes/ecl/src/ecl-eu/components/pagination.scss b/packages/themes/ecl/src/ecl-eu/components/pagination.scss index f30d57acae..9eef4e15d4 100644 --- a/packages/themes/ecl/src/ecl-eu/components/pagination.scss +++ b/packages/themes/ecl/src/ecl-eu/components/pagination.scss @@ -7,8 +7,8 @@ } .button { - --kolibri-spacing: #{rem(4)}; - border-radius: rem(4); + --kolibri-spacing: 4px; + border-radius: 4px; &:focus { outline: none; @@ -18,11 +18,11 @@ .button-inner { min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - border-radius: rem(4); + border-radius: 4px; font: normal normal 400 rem(16) / rem(20) Arial, sans-serif; - padding: rem(12); + padding: 12px; background-color: #fc0; color: #171a22; } diff --git a/packages/themes/ecl/src/ecl-eu/components/single-select.scss b/packages/themes/ecl/src/ecl-eu/components/single-select.scss index 102c6dfa63..5c1eb75dae 100644 --- a/packages/themes/ecl/src/ecl-eu/components/single-select.scss +++ b/packages/themes/ecl/src/ecl-eu/components/single-select.scss @@ -20,7 +20,7 @@ $visible-options: 5; min-height: rem(44); color: var(--color-grey); order: 4; - padding: rem(1) 0.5em; + padding: 1px 0.5em; } &__input { @@ -59,7 +59,7 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: rem(1); + border-width: 1px; border-color: var(--color-blue); max-height: calc($option-height * $visible-options + rem(2)); overflow-y: auto; @@ -71,7 +71,7 @@ $visible-options: 5; display: flex; align-items: flex-start; justify-items: center; - padding: rem(10) rem(12); + padding: 10px 12px; min-height: $option-height; line-height: 1.2; @@ -129,7 +129,7 @@ $visible-options: 5; color: var(--color-grey); order: 4; align-items: center; - padding: rem(1); + padding: 1px; } input::placeholder, diff --git a/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss b/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss index d92e5470fd..50b984dbfd 100644 --- a/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss +++ b/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss @@ -6,10 +6,10 @@ } .kol-link-wc > a > .kol-span-wc { - border-radius: rem(4); + border-radius: 4px; gap: rem(8); line-height: 1; - padding: rem(12); + padding: 12px; background-color: #0e47cb; color: #fff; cursor: pointer; diff --git a/packages/themes/ecl/src/ecl-eu/components/spin.scss b/packages/themes/ecl/src/ecl-eu/components/spin.scss index de202ce2d1..8e97c39f92 100644 --- a/packages/themes/ecl/src/ecl-eu/components/spin.scss +++ b/packages/themes/ecl/src/ecl-eu/components/spin.scss @@ -2,7 +2,7 @@ @layer kol-theme-component { .cycle { - padding: rem(2); + padding: 2px; & span { background-color: var(--color-blue-80); } diff --git a/packages/themes/ecl/src/ecl-eu/components/split-button.scss b/packages/themes/ecl/src/ecl-eu/components/split-button.scss index 402f611c94..bd889082d4 100644 --- a/packages/themes/ecl/src/ecl-eu/components/split-button.scss +++ b/packages/themes/ecl/src/ecl-eu/components/split-button.scss @@ -4,9 +4,9 @@ :host { font-family: var(--font-family); border-style: solid; - border-width: rem(2); + border-width: 2px; border-color: var(--color-blue); - border-radius: rem(4); + border-radius: 4px; } .horizontal-line { diff --git a/packages/themes/ecl/src/ecl-eu/components/tabs.scss b/packages/themes/ecl/src/ecl-eu/components/tabs.scss index d2f7d4d58c..c7d2f97544 100644 --- a/packages/themes/ecl/src/ecl-eu/components/tabs.scss +++ b/packages/themes/ecl/src/ecl-eu/components/tabs.scss @@ -3,7 +3,7 @@ @layer kol-theme-component { :host { font-family: var(--font-family); - --kolibri-spacing: #{rem(4)}; + --kolibri-spacing: 4px; } .tabs-button-group { @@ -17,7 +17,7 @@ } .tabs-button-group button .kol-span-wc { - padding: rem(4); + padding: 4px; min-height: rem(44); min-width: rem(44); } @@ -25,10 +25,10 @@ .tabs-button-group button.selected .kol-span-wc { border-color: var(--color-grey-25); border-style: solid; - border-width: rem(1); + border-width: 1px; border-bottom-color: white; border-top-color: var(--color-blue); - box-shadow: 0 rem(-3) var(--color-blue); + box-shadow: 0 -3px var(--color-blue); font-weight: var(--font-weight-bold); color: var(--color-blue); } @@ -40,6 +40,6 @@ .tabs-button-group button:focus .kol-span-wc { outline-color: var(--color-blue-130); outline-style: solid; - outline-width: rem(2); + outline-width: 2px; } } diff --git a/packages/themes/ecl/src/ecl-eu/components/toolbar.scss b/packages/themes/ecl/src/ecl-eu/components/toolbar.scss index ede7cb29c0..54b7777fef 100644 --- a/packages/themes/ecl/src/ecl-eu/components/toolbar.scss +++ b/packages/themes/ecl/src/ecl-eu/components/toolbar.scss @@ -3,7 +3,7 @@ @layer kol-theme-component { .toolbar { padding: var(--spacing-s); - border-radius: rem(8); + border-radius: 8px; box-shadow: 0 rem(2) rem(4) rgb(9 49 142 / 8%), 0 0 rem(10) rgb(9 49 142 / 4%), diff --git a/packages/themes/ecl/src/ecl-eu/components/tree-item.scss b/packages/themes/ecl/src/ecl-eu/components/tree-item.scss index 2cd9db7d18..9757e44949 100644 --- a/packages/themes/ecl/src/ecl-eu/components/tree-item.scss +++ b/packages/themes/ecl/src/ecl-eu/components/tree-item.scss @@ -11,7 +11,7 @@ .tree-link { display: block; border: rem(2) solid transparent; - border-radius: rem(4); + border-radius: 4px; &:hover, &:focus-within { diff --git a/packages/themes/ecl/src/ecl-eu/global.scss b/packages/themes/ecl/src/ecl-eu/global.scss index 0b998cffad..2bd9017263 100644 --- a/packages/themes/ecl/src/ecl-eu/global.scss +++ b/packages/themes/ecl/src/ecl-eu/global.scss @@ -10,10 +10,10 @@ } .kol-tooltip-wc .tooltip-content { - padding: rem(4) rem(8); + padding: 4px 8px; font-size: rem(14); line-height: 1.2; - border-radius: rem(2); + border-radius: 2px; border: rem(1) solid #626262; } diff --git a/packages/themes/ecl/src/ecl-eu/mixins/alert-wc.scss b/packages/themes/ecl/src/ecl-eu/mixins/alert-wc.scss index 9ee68bb32a..ae1d1fb7d6 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/alert-wc.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/alert-wc.scss @@ -15,7 +15,7 @@ div.card { border-style: solid; - border-width: rem(2); + border-width: 2px; } div.msg { diff --git a/packages/themes/ecl/src/ecl-eu/mixins/button.scss b/packages/themes/ecl/src/ecl-eu/mixins/button.scss index dc9d98f9f1..e93d549b39 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/button.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/button.scss @@ -4,7 +4,7 @@ a, button { appearance: none; - border-radius: rem(4); + border-radius: 4px; text-decoration: none; } @@ -17,13 +17,13 @@ button > .kol-span-wc { min-height: rem(44); min-width: rem(44); - border-radius: rem(4); + border-radius: 4px; font: normal normal 400 rem(16) / rem(20) arial, sans-serif; font-weight: 400; margin: 0; - padding: rem(12); + padding: 12px; line-height: 1.2; } @@ -31,7 +31,7 @@ button:focus-visible > .kol-span-wc { outline-offset: rem(-4); outline-style: solid; - outline-width: rem(2); + outline-width: 2px; } a:active > .kol-span-wc, @@ -66,12 +66,12 @@ background-color: #fff; border: rem(2) solid #0e47cb; color: #0e47cb; - padding: calc(rem(12) - rem(2)) calc(rem(16) - rem(2)); + padding: calc(12px - 2px) calc(16px - 2px); } .secondary a:focus-visible > .kol-span-wc, .secondary button:focus-visible > .kol-span-wc { - box-shadow: inset 0 0 0 rem(4) #0e47cb; + box-shadow: inset 0 0 0 4px #0e47cb; outline-color: #fff; } diff --git a/packages/themes/ecl/src/ecl-eu/mixins/kol-table-stateless-wc.scss b/packages/themes/ecl/src/ecl-eu/mixins/kol-table-stateless-wc.scss index 6036972d93..8c9607ed3b 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/kol-table-stateless-wc.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/kol-table-stateless-wc.scss @@ -33,7 +33,7 @@ outline-color: var(--color-blue); outline-offset: rem(2); outline-style: solid; - outline-width: rem(2); + outline-width: 2px; } table { @@ -86,7 +86,7 @@ outline-color: var(--color-blue); outline-style: solid; outline-offset: rem(2); - outline-width: rem(2); + outline-width: 2px; } // CHECKBOX @@ -131,7 +131,7 @@ &:checked { outline: rem(2) solid var(--color-blue); border-color: var(--color-blue); - border-width: rem(7); + border-width: 7px; &:before { background-color: var(--color-white); diff --git a/packages/themes/itzbund/src/components/accordion.scss b/packages/themes/itzbund/src/components/accordion.scss index c2b613bedf..8910aba39d 100644 --- a/packages/themes/itzbund/src/components/accordion.scss +++ b/packages/themes/itzbund/src/components/accordion.scss @@ -13,9 +13,9 @@ height: 100%; display: grid; border-color: var(--kolibri-border-color); - border-width: rem(1); + border-width: 1px; border-style: solid; - border-radius: rem(4); + border-radius: 4px; &__heading-button { @include kol-typography-accordion; @@ -34,7 +34,7 @@ align-items: center; overflow: hidden; background-color: transparent; - padding: rem(4); + padding: 4px; } .kol-icon::part(icon) { @@ -57,7 +57,7 @@ } &__content { - padding: rem(8); + padding: 8px; } .open &__heading-button { diff --git a/packages/themes/itzbund/src/components/badge.scss b/packages/themes/itzbund/src/components/badge.scss index debad8241d..afd3b0f426 100644 --- a/packages/themes/itzbund/src/components/badge.scss +++ b/packages/themes/itzbund/src/components/badge.scss @@ -7,7 +7,7 @@ } :host > span { - border-radius: rem(5); + border-radius: 5px; display: inline-flex; } @@ -16,7 +16,7 @@ } :host > span .kol-span-wc { - padding: rem(4) rem(8); + padding: 4px 8px; } :host > span > .kol-span-wc { diff --git a/packages/themes/itzbund/src/components/button-link.scss b/packages/themes/itzbund/src/components/button-link.scss index 5603d8fa7e..58082a8003 100644 --- a/packages/themes/itzbund/src/components/button-link.scss +++ b/packages/themes/itzbund/src/components/button-link.scss @@ -3,14 +3,14 @@ @layer kol-theme-component { a, button { - border-radius: rem(32); + border-radius: 32px; font-family: var(--font-family-sans); /* text-transform: uppercase; */ } a > .kol-span-wc, button > .kol-span-wc { - border-radius: rem(32); + border-radius: 32px; border-style: solid; min-width: rem(44); min-height: rem(44); @@ -18,12 +18,12 @@ font-size: inherit; /*line-height: 1.25em;*/ /*padding: calc(4 * var(--spacing));*/ - padding: 0 rem(16); + padding: 0 16px; } .button a.hide-label > .kol-span-wc, .button button.hide-label > .kol-span-wc { - padding: 0 rem(8); + padding: 0 8px; } a > .kol-span-wc, diff --git a/packages/themes/itzbund/src/components/button.scss b/packages/themes/itzbund/src/components/button.scss index 96358443ba..22b6dc6362 100644 --- a/packages/themes/itzbund/src/components/button.scss +++ b/packages/themes/itzbund/src/components/button.scss @@ -4,14 +4,14 @@ @layer kol-theme-component { a, button { - border-radius: rem(32); + border-radius: 32px; font-family: var(--font-family-sans); /* text-transform: uppercase; */ } a > .kol-span-wc, button > .kol-span-wc { - border-radius: rem(32); + border-radius: 32px; border-style: solid; min-width: rem(44); min-height: rem(44); @@ -19,7 +19,7 @@ font-size: inherit; /*line-height: 1.25em;*/ /*padding: calc(4 * var(--spacing));*/ - padding: 0 rem(16); + padding: 0 16px; } @include kol-button; diff --git a/packages/themes/itzbund/src/components/card.scss b/packages/themes/itzbund/src/components/card.scss index 8cc21b4722..7e02001e7a 100644 --- a/packages/themes/itzbund/src/components/card.scss +++ b/packages/themes/itzbund/src/components/card.scss @@ -5,14 +5,14 @@ background-color: white; border-color: var(--border-color); border-style: solid; - border-width: rem(1); + border-width: 1px; border-radius: calc(2 * var(--border-radius)); width: 100%; height: 100%; } .kol-heading { - padding: rem(8); + padding: 8px; display: block; border-bottom-style: solid; border-bottom-color: var(--border-color); @@ -21,12 +21,12 @@ :host > div > div { display: block; - padding: rem(8); + padding: 8px; } :host > div > div:last-child { display: block; - padding: rem(8); + padding: 8px; border-top-style: solid; border-top-color: var(--color-achat); border-top-width: rem(1); diff --git a/packages/themes/itzbund/src/components/combobox.scss b/packages/themes/itzbund/src/components/combobox.scss index ee17772026..76ca83a084 100644 --- a/packages/themes/itzbund/src/components/combobox.scss +++ b/packages/themes/itzbund/src/components/combobox.scss @@ -28,14 +28,14 @@ $visible-options: 5; min-height: var(--a11y-min-size); text-align: left; width: 100%; - padding: rem(4); + padding: 4px; .combobox:not(.combobox--disabled) &:hover { border-color: var(--default-border-hover); outline-color: var(--primary); outline-offset: 0; outline-style: solid; - outline-width: rem(1); + outline-width: 1px; } } @@ -66,7 +66,7 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: rem(1); + border-width: 1px; border-radius: var(--border-radius); border-color: var(--kolibri-color-normal); background-color: #e8edf2; @@ -81,7 +81,7 @@ $visible-options: 5; display: flex; align-items: center; height: $option-height; - padding: rem(10) rem(12); + padding: 10px 12px; &:focus { background-color: var(--color-petrol); diff --git a/packages/themes/itzbund/src/components/input-checkbox.scss b/packages/themes/itzbund/src/components/input-checkbox.scss index 2e30096b2f..4fb4a20aac 100644 --- a/packages/themes/itzbund/src/components/input-checkbox.scss +++ b/packages/themes/itzbund/src/components/input-checkbox.scss @@ -15,7 +15,7 @@ @include kol-typography-body; color: var(--default-letter); border-color: var(--default-border); - border-width: rem(2); + border-width: 2px; border-style: solid; } @@ -164,10 +164,10 @@ } .button:focus-within { - border-radius: rem(32); + border-radius: 32px; outline-color: var(--color-achat); outline-offset: rem(2); outline-style: solid; - outline-width: rem(3); + outline-width: 3px; } } diff --git a/packages/themes/itzbund/src/components/input-radio.scss b/packages/themes/itzbund/src/components/input-radio.scss index 6601bacad0..61ce345754 100644 --- a/packages/themes/itzbund/src/components/input-radio.scss +++ b/packages/themes/itzbund/src/components/input-radio.scss @@ -17,7 +17,7 @@ outline-color: var(--color-achat); outline-offset: rem(2); outline-style: solid; - outline-width: rem(3); + outline-width: 3px; } input { @@ -25,10 +25,10 @@ width: 100%; color: var(--color-anthrazit); border-color: var(--default-border); - border-width: rem(2); + border-width: 2px; border-style: solid; - border-radius: rem(5); - /* padding: rem(10) rem(14); */ + border-radius: 5px; + /* padding: 10px 14px; */ } input:hover { diff --git a/packages/themes/itzbund/src/components/input-range.scss b/packages/themes/itzbund/src/components/input-range.scss index 5f8a4f34d1..49924a41cf 100644 --- a/packages/themes/itzbund/src/components/input-range.scss +++ b/packages/themes/itzbund/src/components/input-range.scss @@ -42,8 +42,8 @@ border-color: var(--color-subtle); border-radius: var(--border-radius); border-style: solid; - border-width: rem(2); - padding: 0 rem(8); + border-width: 2px; + padding: 0 8px; } .input > .kol-icon { diff --git a/packages/themes/itzbund/src/components/pagination.scss b/packages/themes/itzbund/src/components/pagination.scss index 5629ffc012..2433b39e31 100644 --- a/packages/themes/itzbund/src/components/pagination.scss +++ b/packages/themes/itzbund/src/components/pagination.scss @@ -2,27 +2,27 @@ @layer kol-theme-component { .button { - border-radius: rem(32); + border-radius: 32px; font-family: var(--font-family-sans); } .button-inner { background-color: var(--color-weiss); - border-radius: rem(32); + border-radius: 32px; border: var(--spacing) solid var(--color-anthrazit); color: var(--color-anthrazit); font-size: inherit; gap: 0.25em; min-height: var(--a11y-min-size); min-width: var(--a11y-min-size); - padding: 0 rem(16); + padding: 0 16px; transition-duration: 0.5s; transition-property: background, color, border-color; transition-timing-function: ease-in-out; } .hide-label .button-inner { - padding: 0 rem(8); + padding: 0 8px; } .button:not(:disabled):hover .button-inner, diff --git a/packages/themes/itzbund/src/components/progress.scss b/packages/themes/itzbund/src/components/progress.scss index 6f4d52277c..9e79572833 100644 --- a/packages/themes/itzbund/src/components/progress.scss +++ b/packages/themes/itzbund/src/components/progress.scss @@ -2,7 +2,7 @@ @layer kol-theme-component { :host { - --kolibri-text-label-padding: #{rem(60)}; + --kolibri-text-label-padding: 60px; } :host progress, diff --git a/packages/themes/itzbund/src/components/single-select.scss b/packages/themes/itzbund/src/components/single-select.scss index dd6f047c31..e2023391e2 100644 --- a/packages/themes/itzbund/src/components/single-select.scss +++ b/packages/themes/itzbund/src/components/single-select.scss @@ -28,14 +28,14 @@ $visible-options: 5; min-height: var(--a11y-min-size); text-align: left; width: 100%; - padding: rem(4); + padding: 4px; .single-select:not(.disabled) &:hover { border-color: var(--default-border-hover); outline-color: var(--primary); outline-offset: 0; outline-style: solid; - outline-width: rem(1); + outline-width: 1px; } } @@ -65,7 +65,7 @@ $visible-options: 5; &__listbox { border-style: solid; - border-width: rem(1); + border-width: 1px; border-radius: var(--border-radius); border-color: var(--kolibri-color-normal); max-height: calc($option-height * $visible-options + rem(2)); @@ -78,7 +78,7 @@ $visible-options: 5; &__item { min-height: $option-height; - padding: rem(10) rem(12); + padding: 10px 12px; .radio-label { align-self: center; diff --git a/packages/themes/itzbund/src/components/skip-nav.scss b/packages/themes/itzbund/src/components/skip-nav.scss index 2567def78d..76371bbb81 100644 --- a/packages/themes/itzbund/src/components/skip-nav.scss +++ b/packages/themes/itzbund/src/components/skip-nav.scss @@ -2,11 +2,11 @@ @layer kol-theme-component { .kol-link-wc > a > .kol-span-wc { - border-radius: rem(32); + border-radius: 32px; border-style: solid; gap: rem(8); line-height: 1; - padding: 0 rem(16); + padding: 0 16px; background-color: var(--color-petrol); border-color: var(--color-petrol); color: var(--color-weiss); diff --git a/packages/themes/itzbund/src/components/spin.scss b/packages/themes/itzbund/src/components/spin.scss index f4bb7f47f7..c02e88578e 100644 --- a/packages/themes/itzbund/src/components/spin.scss +++ b/packages/themes/itzbund/src/components/spin.scss @@ -2,7 +2,7 @@ @layer kol-theme-component { .cycle { - padding: rem(2); + padding: 2px; & span { background-color: #fc0; } diff --git a/packages/themes/itzbund/src/components/split-button.scss b/packages/themes/itzbund/src/components/split-button.scss index 9c8a097168..c6261fb21c 100644 --- a/packages/themes/itzbund/src/components/split-button.scss +++ b/packages/themes/itzbund/src/components/split-button.scss @@ -3,7 +3,7 @@ @layer kol-theme-component { :host { - border-radius: rem(32); + border-radius: 32px; border-style: solid; border-width: var(--spacing); } @@ -14,7 +14,7 @@ .horizontal-line { background-color: var(--border-color); - border-radius: rem(2); + border-radius: 2px; width: rem(1); } @@ -68,7 +68,7 @@ border-top-left-radius: rem(32); border-bottom-left-radius: rem(32); font-size: inherit; - padding: 0 rem(16); + padding: 0 16px; min-width: rem(44); min-height: rem(44); } diff --git a/packages/themes/itzbund/src/components/table-stateful.scss b/packages/themes/itzbund/src/components/table-stateful.scss index 9c047575c9..9b78023e32 100644 --- a/packages/themes/itzbund/src/components/table-stateful.scss +++ b/packages/themes/itzbund/src/components/table-stateful.scss @@ -9,7 +9,7 @@ :host > div:last-child { border-style: solid; - border-width: rem(1); + border-width: 1px; border-color: var(--border-color); } diff --git a/packages/themes/itzbund/src/components/tabs.scss b/packages/themes/itzbund/src/components/tabs.scss index b2e71de617..bb0cd408d0 100644 --- a/packages/themes/itzbund/src/components/tabs.scss +++ b/packages/themes/itzbund/src/components/tabs.scss @@ -29,7 +29,7 @@ font-size: inherit; line-height: 1.25; cursor: pointer; - border-width: rem(2); + border-width: 2px; box-shadow: 0 0 0.25em gray; width: inherit; overflow: hidden; diff --git a/packages/themes/itzbund/src/components/toolbar.scss b/packages/themes/itzbund/src/components/toolbar.scss index f214ff5f97..3aa10c8650 100644 --- a/packages/themes/itzbund/src/components/toolbar.scss +++ b/packages/themes/itzbund/src/components/toolbar.scss @@ -2,10 +2,10 @@ @layer kol-theme-component { .toolbar { - padding: rem(8); - border-width: rem(1); + padding: 8px; + border-width: 1px; border-style: solid; - border-radius: rem(4); + border-radius: 4px; border-color: var(--kolibri-border-color); background-color: var(--color-white); } diff --git a/packages/themes/itzbund/src/components/tree.scss b/packages/themes/itzbund/src/components/tree.scss index db430a11e5..a942841235 100644 --- a/packages/themes/itzbund/src/components/tree.scss +++ b/packages/themes/itzbund/src/components/tree.scss @@ -6,7 +6,7 @@ display: flex; flex-direction: column; border: rem(2) solid transparent; - border-radius: rem(4); + border-radius: 4px; } &:focus-within { diff --git a/packages/themes/itzbund/src/global.scss b/packages/themes/itzbund/src/global.scss index 91a5bf8484..01f665e565 100644 --- a/packages/themes/itzbund/src/global.scss +++ b/packages/themes/itzbund/src/global.scss @@ -4,7 +4,7 @@ @layer kol-theme-global { :host { --border-color: var(--color-anthrazit); - --border-radius: #{rem(2)}; + --border-radius: 2px; --color-anthrazit: #333; --color-jade: #f3f7fb; --color-weiss: #fff; @@ -58,7 +58,7 @@ outline-color: var(--color-petrol); outline-offset: rem(2); outline-style: solid; - outline-width: rem(3); + outline-width: 3px; transition: outline-offset 0.2s linear; } @@ -77,8 +77,8 @@ .kol-tooltip-wc .tooltip-content { @include kol-typography-label; - padding: rem(4) rem(8); - border-radius: rem(2); + padding: 4px 8px; + border-radius: 2px; border: rem(1) solid #626262; } } diff --git a/packages/themes/itzbund/src/mixins/alert-wc.scss b/packages/themes/itzbund/src/mixins/alert-wc.scss index e7a98a85a1..621d087895 100644 --- a/packages/themes/itzbund/src/mixins/alert-wc.scss +++ b/packages/themes/itzbund/src/mixins/alert-wc.scss @@ -1,7 +1,7 @@ @import './rem'; @mixin kol-alert-theme { - --kolibri-border-width: #{rem(1)}; + --kolibri-border-width: 1px; .default { border-color: var(--color-anthrazit); diff --git a/packages/themes/itzbund/src/mixins/button.scss b/packages/themes/itzbund/src/mixins/button.scss index ac5779ded8..01723e0398 100644 --- a/packages/themes/itzbund/src/mixins/button.scss +++ b/packages/themes/itzbund/src/mixins/button.scss @@ -7,7 +7,7 @@ .button a.hide-label > .kol-span-wc, .button button.hide-label > .kol-span-wc { - padding: 0 rem(8); + padding: 0 8px; } a > .kol-span-wc, diff --git a/packages/themes/itzbund/src/mixins/input-base.scss b/packages/themes/itzbund/src/mixins/input-base.scss index 393838f5ca..336ec01ad8 100644 --- a/packages/themes/itzbund/src/mixins/input-base.scss +++ b/packages/themes/itzbund/src/mixins/input-base.scss @@ -2,7 +2,7 @@ @mixin kol-input-border { color: var(--default-letter); - border-width: rem(1); + border-width: 1px; border-style: solid; border-radius: 0; border-color: var(--kolibri-color-normal); @@ -29,7 +29,7 @@ outline-color: var(--primary); outline-offset: 0; outline-style: solid; - outline-width: rem(1); + outline-width: 1px; } } @@ -47,6 +47,6 @@ outline-color: var(--primary); outline-offset: 0; outline-style: solid; - outline-width: rem(1); + outline-width: 1px; } } diff --git a/packages/themes/itzbund/src/mixins/kol-table-stateless-wc.scss b/packages/themes/itzbund/src/mixins/kol-table-stateless-wc.scss index 18e1b42bd6..8db88629d8 100644 --- a/packages/themes/itzbund/src/mixins/kol-table-stateless-wc.scss +++ b/packages/themes/itzbund/src/mixins/kol-table-stateless-wc.scss @@ -10,7 +10,7 @@ outline-color: var(--color-petrol); outline-offset: rem(2); outline-style: solid; - outline-width: rem(3); + outline-width: 3px; transition: outline-offset 0.2s linear; } @@ -19,7 +19,7 @@ border-collapse: collapse; border-spacing: 0; border: rem(1) solid var(--color-petrol); - border-width: 0 rem(1) rem(1) rem(1); + border-width: 0 1px 1px 1px; } tr { @@ -65,7 +65,7 @@ outline-color: var(--color-petrol); outline-style: solid; outline-offset: rem(2); - outline-width: rem(3); + outline-width: 3px; } } @@ -104,7 +104,7 @@ border-color: var(--color-anthrazit); outline-style: solid; outline-offset: rem(2); - outline-width: rem(2); + outline-width: 2px; } } } diff --git a/packages/themes/itzbund/src/mixins/link.scss b/packages/themes/itzbund/src/mixins/link.scss index bd4c9ad97a..4b3126c7cf 100644 --- a/packages/themes/itzbund/src/mixins/link.scss +++ b/packages/themes/itzbund/src/mixins/link.scss @@ -45,7 +45,7 @@ a.skip:focus { background-color: white; - box-shadow: 0 0 rem(8) rem(8) white; + box-shadow: 0 0 8px 8px white; left: unset; position: unset; } From 033315b3314713cf03669a9205f6eaf64897db7f Mon Sep 17 00:00:00 2001 From: "publicuibot[bot]" <175724668+publicuibot[bot]@users.noreply.github.com> Date: Thu, 14 Nov 2024 15:11:38 +0000 Subject: [PATCH 2/2] chore: release 2.2.0 --- lerna.json | 2 +- packages/adapters/angular/v15/package.json | 2 +- packages/adapters/angular/v16/package.json | 2 +- packages/adapters/angular/v17/package.json | 2 +- packages/adapters/angular/v18/package.json | 2 +- packages/adapters/hydrate/package.json | 2 +- packages/adapters/preact/package.json | 2 +- packages/adapters/react-standalone/package.json | 2 +- packages/adapters/react/package.json | 2 +- packages/adapters/solid/package.json | 2 +- packages/adapters/vue/package.json | 2 +- packages/components/package.json | 2 +- packages/designer/package.json | 2 +- packages/samples/react/package.json | 2 +- packages/themes/default/package.json | 2 +- packages/themes/package.json | 2 +- packages/tools/kolibri-cli/package.json | 2 +- packages/tools/visual-tests/package.json | 2 +- publiccode.yml | 4 ++-- 19 files changed, 20 insertions(+), 20 deletions(-) diff --git a/lerna.json b/lerna.json index efdcbcae6b..5316fea4de 100644 --- a/lerna.json +++ b/lerna.json @@ -23,5 +23,5 @@ "packages/tools/visual-tests" ], "useNx": true, - "version": "2.2.0-alpha.0" + "version": "2.2.0" } diff --git a/packages/adapters/angular/v15/package.json b/packages/adapters/angular/v15/package.json index 0730885e52..f67c22a83a 100644 --- a/packages/adapters/angular/v15/package.json +++ b/packages/adapters/angular/v15/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/angular-v15", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/angular/v16/package.json b/packages/adapters/angular/v16/package.json index 1678f5936e..7ca14310bf 100644 --- a/packages/adapters/angular/v16/package.json +++ b/packages/adapters/angular/v16/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/angular-v16", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/angular/v17/package.json b/packages/adapters/angular/v17/package.json index 6ed94b7bd2..820b64c38b 100644 --- a/packages/adapters/angular/v17/package.json +++ b/packages/adapters/angular/v17/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/angular-v17", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/angular/v18/package.json b/packages/adapters/angular/v18/package.json index d135621ac2..91c3a0aba7 100644 --- a/packages/adapters/angular/v18/package.json +++ b/packages/adapters/angular/v18/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/angular-v18", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/hydrate/package.json b/packages/adapters/hydrate/package.json index bc051ac2b0..431f709ad7 100644 --- a/packages/adapters/hydrate/package.json +++ b/packages/adapters/hydrate/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/hydrate", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/preact/package.json b/packages/adapters/preact/package.json index 4b845cee08..e2e3afa35a 100644 --- a/packages/adapters/preact/package.json +++ b/packages/adapters/preact/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/preact", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/react-standalone/package.json b/packages/adapters/react-standalone/package.json index b85ef92773..ae73e79f33 100644 --- a/packages/adapters/react-standalone/package.json +++ b/packages/adapters/react-standalone/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/react-standalone", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/react/package.json b/packages/adapters/react/package.json index 0e9ce8f8db..d45c20e19b 100644 --- a/packages/adapters/react/package.json +++ b/packages/adapters/react/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/react", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/solid/package.json b/packages/adapters/solid/package.json index d9562011d9..d98367e3f3 100644 --- a/packages/adapters/solid/package.json +++ b/packages/adapters/solid/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/solid", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/adapters/vue/package.json b/packages/adapters/vue/package.json index c258dd224b..9d5094de16 100644 --- a/packages/adapters/vue/package.json +++ b/packages/adapters/vue/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/vue", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/components/package.json b/packages/components/package.json index fd34f61248..5a400efab9 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/components", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/designer/package.json b/packages/designer/package.json index db02c13649..b070e2ee76 100644 --- a/packages/designer/package.json +++ b/packages/designer/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/designer", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/samples/react/package.json b/packages/samples/react/package.json index bce8520725..ce836e8153 100644 --- a/packages/samples/react/package.json +++ b/packages/samples/react/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/sample-react", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "description": "This app contains samples for the KoliBri/Public UI", "license": "EUPL-1.2", "repository": { diff --git a/packages/themes/default/package.json b/packages/themes/default/package.json index 2a229fba86..58b1210e28 100644 --- a/packages/themes/default/package.json +++ b/packages/themes/default/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/theme-default", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/themes/package.json b/packages/themes/package.json index b141da1bcb..ed4bc5ca7d 100644 --- a/packages/themes/package.json +++ b/packages/themes/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/themes", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/tools/kolibri-cli/package.json b/packages/tools/kolibri-cli/package.json index 3ce564451c..dca32ebb0e 100644 --- a/packages/tools/kolibri-cli/package.json +++ b/packages/tools/kolibri-cli/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/kolibri-cli", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/packages/tools/visual-tests/package.json b/packages/tools/visual-tests/package.json index 9e86431e1f..6f94641df8 100644 --- a/packages/tools/visual-tests/package.json +++ b/packages/tools/visual-tests/package.json @@ -1,6 +1,6 @@ { "name": "@public-ui/visual-tests", - "version": "2.2.0-alpha.0", + "version": "2.2.0", "license": "EUPL-1.2", "homepage": "https://public-ui.github.io", "repository": { diff --git a/publiccode.yml b/publiccode.yml index fd5f85a281..38975e0e8d 100644 --- a/publiccode.yml +++ b/publiccode.yml @@ -3,8 +3,8 @@ name: KoliBri - The accessible HTML-Standard applicationSuite: Informationstechnikzentrum Bund url: https://github.com/public-ui/kolibri.git landingURL: https://github.com/public-ui -releaseDate: '2024-11-08' -softwareVersion: 2.2.0-alpha.0 +releaseDate: '2024-11-14' +softwareVersion: 2.2.0 logo: https://avatars.githubusercontent.com/u/109126739 platforms: - android