Skip to content

Commit dbb45e5

Browse files
annschannsch
committed
refactor: updated db-ui-base
1 parent ba76066 commit dbb45e5

File tree

12 files changed

+107
-100
lines changed

12 files changed

+107
-100
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,6 @@
6666
}
6767

6868
& + label {
69-
margin-left: $db-spacing-0-5;
69+
margin-left: $db-spacing-fixed-normal-xs;
7070
}
7171
}

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

Lines changed: 70 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,79 @@
11
@use "sass:math";
22
@import "headline.variables";
33

4-
h1,
5-
h2,
6-
h3 {
7-
&.elm-headline {
8-
font-family: $db-font-family-head;
9-
}
10-
}
4+
// .elm-headline {
5+
// margin-bottom: to-rem($pxValue: 16);
116

12-
.elm-headline {
13-
margin-bottom: to-rem($pxValue: 16);
7+
// // * TODO: These declarations make sense for the moment, but should get aligned with overall definitions of spacing around elements
8+
// margin-top: to-rem($pxValue: 24);
9+
// }
1410

15-
// * TODO: These declarations make sense for the moment, but should get aligned with overall definitions of spacing around elements
16-
margin-top: to-rem($pxValue: 24);
17-
}
11+
// h1,
12+
// h2,
13+
// h3 {
14+
// &.elm-headline {
15+
// font-family: $db-font-family-headline;
16+
// font-weight: 900;
17+
// }
18+
// }
1819

19-
h1,
20-
h2,
21-
h3 {
22-
&.elm-headline {
23-
// TODO: We need to check whether to define headline styles on the HTML tag or DB UI component level
24-
// font-family: $db-font-family-headline;
25-
font-weight: 900;
26-
}
27-
}
20+
// h1 {
21+
// &.elm-headline {
22+
// font-size: to-rem(
23+
// $pxValue: $rea-main-h1-font-size
24+
// ); // * TODO: possibly rework variable naming
25+
// line-height: math.div(40, $rea-main-h1-font-size);
26+
// @media screen and (max-width: 767px) {
27+
// font-size: to-rem(
28+
// $pxValue: $rea-main-h1-font-size-small
29+
// ); // * TODO: possibly rework variable naming
30+
// line-height: 1.14;
31+
// }
32+
// }
33+
// }
2834

29-
h1 {
30-
&.elm-headline {
31-
font-size: to-rem(
32-
$pxValue: $rea-main-h1-font-size
33-
); // * TODO: possibly rework variable naming
34-
line-height: math.div(40, $rea-main-h1-font-size);
35-
@media screen and (max-width: 767px) {
36-
font-size: to-rem(
37-
$pxValue: $rea-main-h1-font-size-small
38-
); // * TODO: possibly rework variable naming
39-
line-height: 1.14;
40-
}
41-
}
42-
}
35+
// h2 {
36+
// &.elm-headline {
37+
// font-size: to-rem(
38+
// $pxValue: $rea-main-h2-font-size
39+
// ); // * TODO: possibly rework variable naming
40+
// line-height: math.div(28, $rea-main-h2-font-size);
41+
// @media screen and (max-width: 767px) {
42+
// font-size: to-rem(
43+
// $pxValue: $rea-main-h2-font-size-small
44+
// ); // * TODO: possibly rework variable naming
45+
// line-height: 1.2;
46+
// }
47+
// }
48+
// }
4349

44-
h2 {
45-
&.elm-headline {
46-
font-size: to-rem(
47-
$pxValue: $rea-main-h2-font-size
48-
); // * TODO: possibly rework variable naming
49-
line-height: math.div(28, $rea-main-h2-font-size);
50-
@media screen and (max-width: 767px) {
51-
font-size: to-rem(
52-
$pxValue: $rea-main-h2-font-size-small
53-
); // * TODO: possibly rework variable naming
54-
line-height: 1.2;
55-
}
56-
}
57-
}
50+
// h3 {
51+
// &.elm-headline {
52+
// font-size: to-rem(
53+
// $pxValue: $rea-main-h3-font-size
54+
// ); // * TODO: possibly rework variable naming
55+
// line-height: math.div(24, $rea-main-h3-font-size);
56+
// @media screen and (max-width: 767px) {
57+
// font-size: to-rem(
58+
// $pxValue: $rea-main-h3-font-size-small
59+
// ); // * TODO: possibly rework variable naming
60+
// line-height: 1.33;
61+
// }
62+
// }
63+
// }
5864

59-
h3 {
60-
&.elm-headline {
61-
font-size: to-rem(
62-
$pxValue: $rea-main-h3-font-size
63-
); // * TODO: possibly rework variable naming
64-
line-height: math.div(24, $rea-main-h3-font-size);
65-
@media screen and (max-width: 767px) {
66-
font-size: to-rem(
67-
$pxValue: $rea-main-h3-font-size-small
68-
); // * TODO: possibly rework variable naming
69-
line-height: 1.33;
70-
}
71-
}
72-
}
73-
74-
h4 {
75-
&.elm-headline {
76-
font-size: to-rem(
77-
$pxValue: $rea-main-h4-font-size
78-
); // * TODO: possibly rework variable naming
79-
font-weight: 400;
80-
line-height: math.div(24, $rea-main-h4-font-size);
81-
@media screen and (max-width: 767px) {
82-
font-size: to-rem(
83-
$pxValue: $rea-main-h4-font-size-small
84-
); // * TODO: possibly rework variable naming
85-
line-height: 1.25;
86-
}
87-
}
88-
}
65+
// h4 {
66+
// &.elm-headline {
67+
// font-size: to-rem(
68+
// $pxValue: $rea-main-h4-font-size
69+
// ); // * TODO: possibly rework variable naming
70+
// font-weight: 400;
71+
// line-height: math.div(24, $rea-main-h4-font-size);
72+
// @media screen and (max-width: 767px) {
73+
// font-size: to-rem(
74+
// $pxValue: $rea-main-h4-font-size-small
75+
// ); // * TODO: possibly rework variable naming
76+
// line-height: 1.25;
77+
// }
78+
// }
79+
// }

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
line-height: to-rem($pxValue: 24);
1414
max-width: 100%;
1515

16-
padding: $db-spacing-1 $db-spacing-2;
16+
padding: $db-spacing-fixed-normal-xs $db-spacing-fixed-normal-m;
1717

1818
width: 100%;
1919

@@ -86,7 +86,10 @@
8686
font-size: to-rem($pxValue: 12);
8787

8888
margin-bottom: -#{to-rem($pxValue: 18)};
89-
transform: translate($db-spacing-2, -#{to-rem($pxValue: 41)});
89+
transform: translate(
90+
$db-spacing-fixed-normal-m,
91+
-#{to-rem($pxValue: 41)}
92+
);
9093

9194
& + .description {
9295
margin-top: 0;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
// }
5151

5252
& + label {
53-
margin-left: $db-spacing-0-5;
53+
margin-left: $db-spacing-fixed-normal-xs;
5454
}
5555

5656
&:disabled {

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

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525
background-position: right to-rem($pxValue: 11) center;
2626
background-repeat: no-repeat;
2727
height: to-rem($pxValue: 44);
28-
padding: to-rem($pxValue: 20) to-rem($pxValue: 42) 0 $db-spacing-2;
28+
padding: to-rem($pxValue: 20) to-rem($pxValue: 42) 0
29+
$db-spacing-fixed-normal-m;
2930

3031
// Floating labels
3132
& + .elm-label {
@@ -43,7 +44,10 @@
4344
& + .elm-label {
4445
color: $select-floatingLabel--color;
4546
font-size: to-rem($pxValue: 16);
46-
transform: translate($db-spacing-2, -#{to-rem($pxValue: 35)});
47+
transform: translate(
48+
$db-spacing-fixed-normal-m,
49+
-#{to-rem($pxValue: 35)}
50+
);
4751
}
4852
}
4953
}
@@ -70,7 +74,10 @@
7074
display: block;
7175
font-size: to-rem($pxValue: 12);
7276
margin-bottom: -#{to-rem($pxValue: 18)};
73-
transform: translate($db-spacing-2, -#{to-rem($pxValue: 41)});
77+
transform: translate(
78+
$db-spacing-fixed-normal-m,
79+
-#{to-rem($pxValue: 41)}
80+
);
7481
transition: opacity, transform 150ms;
7582
// Adopted by https://www.heise.de/developer/artikel/a11y-Reduced-Motion-4356171.html
7683
@media (prefers-reduced-motion: reduce) {
@@ -82,7 +89,10 @@
8289
margin-top: to-rem($pxValue: 16);
8390

8491
& + .elm-label {
85-
transform: translate($db-spacing-2, -#{to-rem($pxValue: 100)});
92+
transform: translate(
93+
$db-spacing-fixed-normal-m,
94+
-#{to-rem($pxValue: 100)}
95+
);
8696
}
8797
}
8898

‎source/_patterns/02-components/accordion/accordion.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
align-items: center;
1414
display: flex;
1515

16-
padding-block: $db-spacing-1;
16+
padding-block: db-spacing-fixed-normal-xs;
1717
// Negating the padding left for moving the element into that direction with the same measures
1818
transform: translateX(calc(var(--db-accordion---paddingLeft) * -1));
1919
width: calc(
@@ -95,7 +95,7 @@
9595

9696
summary {
9797
font-size: to-rem($pxValue: 20);
98-
padding-block: $db-spacing-2;
98+
padding-block: $db-spacing-fixed-normal-m;
9999

100100
&::before {
101101
--icon-font-size: #{to-rem($pxValue: 32)};

‎source/_patterns/02-components/cards/card.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
}
1313

1414
figure {
15-
margin: $db-spacing-2 $db-spacing-2 $db-spacing-2 $db-spacing-1;
15+
margin: $db-spacing-fixed-normal-m $db-spacing-fixed-normal-m
16+
$db-spacing-fixed-normal-m $db-spacing-fixed-normal-xs;
1617
}
1718

1819
// Banner variant

‎source/_patterns/02-components/table/_table.variables.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@ $table-line--borderColor: #d7dce1 !default;
1515

1616
$table-row-zebra-color: rgba($db-colors-secondary-enabled, 0.07) !default;
1717

18-
$table-densitySmall--padding: $db-spacing-1 !default;
19-
$table-densityRegular--padding: $db-spacing-1 !default;
20-
$table-densityLarge--padding: $db-spacing-2 !default;
18+
$table-densitySmall--padding: $db-spacing-fixed-normal-xs !default;
19+
$table-densityRegular--padding: $db-spacing-fixed-normal-xs !default;
20+
$table-densityLarge--padding: $db-spacing-fixed-normal-m !default;

‎source/css/_db-ui-core.variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ $icons-path: "../../icons/" !default;
77
$images-path: "../../images/" !default;
88
$fonts-path: "../../fonts/" !default;
99

10-
@import "@db-ui/base/build/scss/variables";
10+
@import "@db-ui/base/build/scss/db-ui-base";
1111

1212
// General configurations
1313
$dbBaseFontSize: 16px;

‎source/css/db-ui-core.general.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,7 @@ select,
1616
textarea {
1717
@extend %general-fonts;
1818
}
19+
20+
body {
21+
@extend %db-ui-normal;
22+
}

0 commit comments

Comments
 (0)