Skip to content

Commit

Permalink
Apply rem() function to remaining pixel values
Browse files Browse the repository at this point in the history 
Refs: #6915
  • Loading branch information
@anicyne
anicyne committed Oct 28, 2024
1 parent 6b9a06a commit d620136
Show file tree
Hide file tree
Showing 20 changed files with 40 additions and 37 deletions.
4 changes: 2 additions & 2 deletions packages/themes/bmf/src/components/abbr.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

@layer kol-theme-component {
abbr {
border-bottom: dotted var(--color-black) 1px;
border-bottom: dotted var(--color-black) rem(1);
text-decoration: none;
}

abbr:focus {
border-radius: 5px;
border-radius: rem(5);
}
}
10 changes: 5 additions & 5 deletions packages/themes/bmf/src/components/accordion.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@
}

&__wrapper {
margin-top: 3px;
margin-top: rem(3);
}

&__content {
padding-left: 2.25em;
padding-bottom: 12px;
padding-right: 8px;
padding-bottom: rem(12);
padding-right: rem(8);
}

&__heading-button {
Expand All @@ -34,8 +34,8 @@
}

border-radius: var(--border-radius);
min-height: 24px;
padding: 10px 8px;
min-height: rem(24);
padding: rem(10) rem(8);

@include kol-typography-accordion;
gap: rem(8);
Expand Down
2 changes: 1 addition & 1 deletion packages/themes/bmf/src/components/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
font-weight: 700;
border-radius: var(--a11y-min-size);
border-style: solid;
border-width: 2px;
border-width: rem(2);
min-height: var(--a11y-min-size);
min-width: var(--a11y-min-size);
padding: rem(8) rem(14);
Expand Down
2 changes: 1 addition & 1 deletion packages/themes/bmf/src/components/card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,6 @@
}

:host > div > div.content + div.footer {
border-top: 2px solid var(--color-ice);
border-top: rem(2) solid var(--color-ice);
}
}
2 changes: 1 addition & 1 deletion packages/themes/bmf/src/components/combobox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ $visible-options: 5;

&__listbox {
border-style: solid;
border-width: 1px;
border-width: rem(1);
border-radius: var(--border-radius);
border-color: var(--color-grey);
overflow-y: auto;
Expand Down
4 changes: 2 additions & 2 deletions packages/themes/bmf/src/components/details.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@
}

&__wrapper {
margin-top: 4px;
margin-left: -2px;
margin-top: rem(4);
margin-left: rem(-2);
}

&__content {
Expand Down
6 changes: 3 additions & 3 deletions packages/themes/bmf/src/components/input-radio.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@
cursor: pointer;

border-color: var(--color-grey);
border-width: 2px;
border-width: rem(2);
border-style: solid;
border-radius: 5px;
border-radius: rem(5);
/* padding: rem(10) 14px; */
//line-height: 24px;
font-size: rem(16);
Expand Down Expand Up @@ -109,7 +109,7 @@
}

&.error {
border-left: 3px solid var(--color-red);
border-left: rem(3) solid var(--color-red);
padding-left: 1em;

input:focus,
Expand Down
2 changes: 1 addition & 1 deletion packages/themes/bmf/src/components/link-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
font-weight: 700;
border-radius: var(--a11y-min-size);
border-style: solid;
border-width: 2px;
border-width: rem(2);
min-height: var(--a11y-min-size);
min-width: var(--a11y-min-size);
padding: rem(8) rem(14);
Expand Down
2 changes: 1 addition & 1 deletion packages/themes/bmf/src/components/single-select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ $visible-options: 5;

&__listbox {
border-style: solid;
border-width: 1px;
border-width: rem(1);
border-radius: var(--border-radius);
border-color: var(--color-grey);
max-height: calc($option-height * $visible-options + rem(2));
Expand Down
2 changes: 1 addition & 1 deletion packages/themes/bmf/src/components/skip-nav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
.kol-link-wc > a > .kol-span-wc {
border-radius: var(--a11y-min-size);
border-style: solid;
border-width: 2px;
border-width: rem(2);
gap: rem(8);
line-height: 1;
padding: rem(8) rem(14);
Expand Down
4 changes: 2 additions & 2 deletions packages/themes/bmf/src/components/split-button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
font-family: var(--font-family);
border-radius: var(--a11y-min-size);
border-style: solid;
border-width: 2px;
border-width: rem(2);
border-color: var(--color-midnight);
}

Expand All @@ -16,7 +16,7 @@

.horizontal-line {
background-color: var(--color-midnight);
border-radius: 2px;
border-radius: rem(2);
width: rem(1);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/themes/bmf/src/components/toolbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
padding: var(--spacing);
border-radius: var(--border-radius);
background-color: var(--color-ice);
border-width: 2px;
border-width: rem(2);
border-style: solid;
}
}
6 changes: 3 additions & 3 deletions packages/themes/bmf/src/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@layer kol-theme-global {
/* Design Tokens */
:host {
--border-radius: 5px;
--border-radius: rem(5);
--color-midnight: #004b76;
--color-ocean: #0077b6;
--color-sky: #99c9e2;
Expand Down Expand Up @@ -86,12 +86,12 @@
}

.kol-tooltip-wc .tooltip-floating {
border: 1px solid var(--color-metal);
border: rem(1) solid var(--color-metal);
border-radius: var(--border-radius);
}

.kol-tooltip-wc .tooltip-arrow {
border: 1px solid var(--color-metal);
border: rem(1) solid var(--color-metal);
}

.kol-tooltip-wc .tooltip-area {
Expand Down
8 changes: 4 additions & 4 deletions packages/themes/bmf/src/mixins/alert.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

@mixin kol-alert-theme {
.kol-alert-wc {
border-width: 2px;
border-width: rem(2);
border-style: solid;
border-radius: 5px;
border-radius: rem(5);
display: flex;
width: 100%;
overflow: unset;
Expand Down Expand Up @@ -174,7 +174,7 @@
}

.card {
border-width: 2px;
border-width: rem(2);
border-style: solid;
filter: drop-shadow(rem(0) rem(2) rem(4) rgba(8, 35, 48, 0.24));
flex-direction: column;
Expand Down Expand Up @@ -323,7 +323,7 @@
cursor: pointer;
border-radius: 1.5em;
border-style: solid;
border-width: 2px;
border-width: rem(2);
font-size: rem(16);
align-items: center;
padding: rem(8);
Expand Down
4 changes: 2 additions & 2 deletions packages/themes/bmf/src/mixins/indented-text.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

@mixin indented-text {
font-family: var(--font-family);
border-left: 2px solid var(--color-ocean);
border-left: rem(2) solid var(--color-ocean);
padding: 0 0.5em;
margin-left: -2px;
margin-left: -rem(-2);
width: 100%;
color: var(--color-grey);
}
4 changes: 2 additions & 2 deletions packages/themes/bmf/src/mixins/input-messages.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
&.#{$type} {
.input {
border-color: var(#{$color});
border-width: 3px;
border-width: rem(3);

&:hover {
border-color: var(--color-midnight);
Expand All @@ -102,7 +102,7 @@

&:not(.hidden-error) {
padding-left: 1em;
border-left: 3px solid var(#{$color});
border-left: rem(3) solid var(#{$color});
}
}
}
Expand Down
3 changes: 2 additions & 1 deletion packages/themes/bmf/src/mixins/input.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import './input-messages.scss';
@import 'rem';

@mixin input {
:host {
Expand Down Expand Up @@ -62,7 +63,7 @@
border-color: var(--color-grey);
border-radius: var(--border-radius);
border-style: solid;
border-width: 2px;
border-width: rem(2);

> .kol-icon {
width: 1em;
Expand Down
2 changes: 1 addition & 1 deletion packages/themes/bmf/src/mixins/link.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
text-decoration-thickness: unset;

.kol-span-wc {
border-radius: 5px;
border-radius: rem(5);
outline: 3px solid var(--color-ocean);
}

Expand Down
4 changes: 2 additions & 2 deletions packages/themes/default/src/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

@layer kol-theme-global {
:host {
--border-radius: var(--kolibri-border-radius, 5px);
--border-radius: var(--kolibri-border-radius, rem(5));
--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, 1px);
--border-width: var(--kolibri-border-width, rem(1));
--color-primary: var(--kolibri-color-primary, #004b76);
--color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);
--color-danger: var(--kolibri-color-danger, #b4003c);
Expand Down
4 changes: 3 additions & 1 deletion packages/themes/default/src/mixins/link.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import 'rem';

@mixin kol-link {
:is(a, button) {
color: var(--color-primary);
Expand Down Expand Up @@ -27,7 +29,7 @@
}

.skip {
left: -99999px;
left: rem(-99999);
overflow: hidden;
position: absolute;
z-index: 9999999;
Expand Down

0 comments on commit d620136

Please sign in to comment.