Skip to content

Commit d05d16d

Browse files
mfranzkemfranzke
committed
refactor: we need to harden the font size calculation functions
1 parent 897e1da commit d05d16d

File tree

62 files changed

+327
-267
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+327
-267
lines changed

‎source/_patterns/00-base/_init.global.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ img {
8080
}
8181

8282
small {
83-
font-size: to-em(14);
83+
font-size: to-em($pxValue: 14);
8484
}
8585

8686
// Block

‎source/_patterns/00-base/icons/_icons.demonstration.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
li {
1818
display: inline-block;
1919

20-
margin: to-rem(4);
21-
padding: to-rem(32);
20+
margin: to-rem($pxValue: 4);
21+
padding: to-rem($pxValue: 32);
2222
border-radius: 4px;
2323

2424
color: $db-color-cool-gray-700;

‎source/_patterns/00-base/icons/_icons.helpers.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
) {
99
&::#{$position} {
1010
--icon-font-family: "#{"icons-" + $size + "-" + $style}", "missing-icons" !important;
11-
--icon-font-size: #{to-rem($size)};
11+
--icon-font-size: #{to-rem($pxValue: $size)};
1212

1313
@if $position == "before" {
1414
--icon-margin-right: #{$icon-content-space};
@@ -90,6 +90,6 @@
9090
@mixin iconMeta($size: $icon-size, $style: $icon-style, $position: "before") {
9191
&::#{$position} {
9292
--icon-font-family: "#{"icons-" + $size + "-" + $style}", "missing-icons" !important;
93-
--icon-font-size: #{to-rem($size)};
93+
--icon-font-size: #{to-rem($pxValue: $size)};
9494
}
9595
}

‎source/_patterns/00-base/icons/_icons.placeholder.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,5 +43,5 @@
4343
// TODO: The following construct was especially meant to enable a branch (EDS & FV) specific result - probably we could refactor this the sooner the later
4444
%defaultIconCustomProperties {
4545
--icon-font-family: #{$icons-font-family} !important;
46-
--icon-font-size: #{to-rem($icon-size)};
46+
--icon-font-size: #{to-rem($pxValue: $icon-size)};
4747
}

‎source/_patterns/00-base/icons/_icons.variables.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
$icon-size: 24 !default;
55
$icon-style: "outline" !default;
66
$icons-font-family: '#{"icons-" + $icon-size + "-" + $icon-style}, "missing-icons"' !default;
7-
$icon-content-space: to-rem(6) !default;
7+
$icon-content-space: to-rem(
8+
$pxValue: 6
9+
) !default;
810

911
$icon-glyphs-personenverkehr: (
1012
"account": "\1f642",

‎source/_patterns/00-base/icons/enterprise/_icons.custom-properties.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
&::before {
1111
--icon-font-family: "#{"icons-" + $icon-size + "-" + $icon-domain + "-" + $icon-style}",
1212
"missing-icons" !important;
13-
--icon-font-size: #{to-rem($icon-size)};
13+
--icon-font-size: #{to-rem($pxValue: $icon-size)};
1414
}
1515
}
1616
}
@@ -19,7 +19,7 @@
1919
&::after {
2020
--icon-font-family: "#{"icons-" + $icon-size + $icon-domain + "-" + "-" + $icon-style}",
2121
"missing-icons" !important;
22-
--icon-font-size: #{to-rem($icon-size)};
22+
--icon-font-size: #{to-rem($pxValue: $icon-size)};
2323
}
2424
}
2525
}
@@ -32,7 +32,7 @@
3232
&::before {
3333
--icon-font-family: "#{"icons-" + $icon-domain + "-" + $icon-style}",
3434
"missing-icons" !important;
35-
--icon-font-size: #{to-rem(16)};
35+
--icon-font-size: #{to-rem($pxValue: 16)};
3636
}
3737
}
3838
}
@@ -41,7 +41,7 @@
4141
&::after {
4242
--icon-font-family: "#{"icons-" + $icon-domain + "-" + $icon-style}",
4343
"missing-icons" !important;
44-
--icon-font-size: #{to-rem(16)};
44+
--icon-font-size: #{to-rem($pxValue: 16)};
4545
}
4646
}
4747
}

‎source/_patterns/01-elements/_form-elements.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@
2323

2424
// Description styles
2525
& ~ .description {
26-
font-size: to-rem(14);
26+
font-size: to-rem($pxValue: 14);
2727
color: $db-color-cool-gray-500;
2828

29-
padding: to-rem(6) to-rem(10);
29+
padding: to-rem($pxValue: 6) to-rem($pxValue: 10);
3030
}
3131
}
3232

‎source/_patterns/01-elements/buttons/_button.variables.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44

55
$button---color: #fff !default;
66

7-
$button---minHeight: to-rem(44) !default;
7+
$button---minHeight: to-rem(
8+
$pxValue: 44
9+
) !default;
810

911
// Background colors
1012
$button-brand-primary--backgroundColor: $db-color-red-500 !default;

‎source/_patterns/01-elements/buttons/button.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55
.elm-button {
66
border: 1px solid transparent;
77
border-radius: 4px;
8-
padding: to-rem(7) to-rem(16);
8+
padding: to-rem($pxValue: 7) to-rem($pxValue: 16);
99

1010
&[data-icon],
1111
&[data-icon-before] {
12-
padding-left: to-rem(14);
12+
padding-left: to-rem($pxValue: 14);
1313
}
1414
&[data-icon-after] {
15-
padding-right: to-rem(14);
15+
padding-right: to-rem($pxValue: 14);
1616
}
17-
font-size: to-rem(16);
17+
font-size: to-rem($pxValue: 16);
1818
min-height: $button---minHeight;
1919
// Square icon only buttons
2020
&.is-icon-text-replace {
@@ -132,9 +132,9 @@
132132

133133
// Sizes
134134
&%size-Small {
135-
min-height: to-rem(36);
135+
min-height: to-rem($pxValue: 36);
136136
&:not(.is-icon-text-replace) {
137-
font-size: to-rem(14);
137+
font-size: to-rem($pxValue: 14);
138138
}
139139
&[data-icon],
140140
&[data-icon-before] {
@@ -145,17 +145,17 @@
145145
}
146146
// Square icon only buttons
147147
&.is-icon-text-replace {
148-
width: to-rem(36);
148+
width: to-rem($pxValue: 36);
149149
}
150150
}
151151
&%size-Large {
152-
min-height: to-rem(52);
152+
min-height: to-rem($pxValue: 52);
153153
&:not(.is-icon-text-replace) {
154-
font-size: to-rem(20);
154+
font-size: to-rem($pxValue: 20);
155155
}
156156
// Square icon only buttons
157157
&.is-icon-text-replace {
158-
width: to-rem(52);
158+
width: to-rem($pxValue: 52);
159159
}
160160
}
161161

‎source/_patterns/01-elements/checkbox/checkbox.scss‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@
88

99
appearance: none;
1010
background-color: $checkbox---backgroundColor;
11-
border: #{to-rem(1)} solid $checkbox---borderColor;
11+
border: #{to-rem($pxValue: 1)} solid $checkbox---borderColor;
1212
border-radius: 4px;
1313
color: $checkbox---color;
14-
height: to-rem(24);
15-
margin-right: to-em(9);
14+
height: to-rem($pxValue: 24);
1615
&[type="checkbox"] {
1716
vertical-align: top;
1817
}
19-
width: to-rem(24);
18+
width: to-rem($pxValue: 24);
2019

2120
display: inline-flex;
2221
justify-content: center;

0 commit comments

Comments
 (0)