Skip to content

Commit 530d829

Browse files
mfranzkemfranzke
authored
refactor: fix scss warnings (#900)
* refactor: fix scss warnings * refactor: fix scss warnings * refactor: fix scss warnings * refactor: fix scss warnings * refactor: fix scss warnings
1 parent f44c861 commit 530d829

File tree

13 files changed

+117
-80
lines changed

13 files changed

+117
-80
lines changed

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

+31-25
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
) {
99
// We're setting this on the parent tag, so that it could get overwritten via data-icon=*
1010
@if $glyph != "" {
11-
--icon-glyph-#{$position}: "#{$glyph}";
11+
& {
12+
--icon-glyph-#{$position}: "#{$glyph}";
13+
}
1214
}
1315

1416
&::#{$position} {
@@ -37,32 +39,34 @@
3739
}
3840

3941
@if $partial {
40-
display: inline-block;
41-
/*** icon - partial ***/
42-
// * use !important to prevent issues with browser extensions that change fonts
43-
font-family: var(--icon-font-family) !important;
44-
font-style: normal;
45-
font-variant: normal;
42+
& {
43+
display: inline-block;
44+
/*** icon - partial ***/
45+
// * use !important to prevent issues with browser extensions that change fonts
46+
font-family: var(--icon-font-family) !important;
47+
font-style: normal;
48+
font-variant: normal;
4649

47-
font-weight: normal; // CSS variables fallback
48-
font-weight: var(--icon-font-weight, normal);
49-
line-height: 1;
50-
text-transform: none;
51-
vertical-align: middle;
50+
font-weight: normal; // CSS variables fallback
51+
font-weight: var(--icon-font-weight, normal);
52+
line-height: 1;
53+
text-transform: none;
54+
vertical-align: middle;
5255

53-
/* stylelint-disable */
54-
// * Better Font Rendering ===========
55-
-webkit-font-smoothing: antialiased;
56-
-moz-osx-font-smoothing: grayscale;
57-
/* stylelint-enable */
56+
/* stylelint-disable */
57+
// * Better Font Rendering ===========
58+
-webkit-font-smoothing: antialiased;
59+
-moz-osx-font-smoothing: grayscale;
60+
/* stylelint-enable */
5861

59-
// Hiding icon from screenreaders
60-
/* stylelint-disable */
61-
-webkit-alt: "";
62-
/* stylelint-enable */
63-
alt: "";
64-
speak: none; // Hiding icon from screenreaders, fallback by older notation
65-
speak: never; // Hiding icon from screenreaders
62+
// Hiding icon from screenreaders
63+
/* stylelint-disable */
64+
-webkit-alt: "";
65+
/* stylelint-enable */
66+
alt: "";
67+
speak: none; // Hiding icon from screenreaders, fallback by older notation
68+
speak: never; // Hiding icon from screenreaders
69+
}
6670
@media aural {
6771
content: none;
6872
}
@@ -77,7 +81,9 @@
7781

7882
// SCSS mixin for elements that text should get hidden in favour of only displaying the included icon
7983
@mixin is-icon-text-replace($position: "before") {
80-
font-size: 0;
84+
& {
85+
font-size: 0;
86+
}
8187

8288
@if $position == "before" {
8389
&::before {

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

+5-3
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,6 @@
1010
#{to-rem($pxValue: 24)}
1111
);
1212

13-
@extend %form-element-enhanced-clickable-area;
14-
15-
@include icon("\00A0", 24, "outline", $partial: $partial);
1613
align-content: center;
1714

1815
appearance: none;
@@ -26,6 +23,11 @@
2623
justify-content: center;
2724
width: var(--db-form-element-dimensions);
2825

26+
& {
27+
@extend %form-element-enhanced-clickable-area;
28+
@include icon("\00A0", 24, "outline", $partial: $partial);
29+
}
30+
2931
&[type="checkbox"] {
3032
vertical-align: top;
3133
}

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

+6-5
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,6 @@
1515

1616
// Style the regular (non-multiple) select elements
1717
&:not([multiple]) {
18-
// Semitransparent is the default style
19-
@at-root :where(#{&}) {
20-
@extend %form-element-semitransparent;
21-
}
22-
2318
background-image: var(
2419
--db-ic-expand-more-20,
2520
url(#{$icons-path}functional/images/navigation/db_ic_expand_more_20.svg)
@@ -28,6 +23,12 @@
2823
background-repeat: no-repeat;
2924
height: to-rem($pxValue: 44);
3025
padding: to-rem($pxValue: 20) to-rem($pxValue: 42) 0 $db-spacing-m;
26+
27+
// Semitransparent is the default style
28+
@at-root :where(#{&}) {
29+
@extend %form-element-semitransparent;
30+
}
31+
3132
// No need to reposition the included value on hidden label
3233
&:has(+ label[data-label-hidden="true"]) {
3334
padding-top: 0;

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,6 @@
77
.elm-textarea {
88
@extend %form-element;
99

10-
// Semitransparent is the default style
11-
@at-root :where(#{&}) {
12-
@extend %form-element-semitransparent;
13-
}
14-
1510
display: block;
1611

1712
font-size: to-rem($pxValue: 16);
@@ -25,6 +20,11 @@
2520

2621
width: 100%;
2722

23+
// Semitransparent is the default style
24+
@at-root :where(#{&}) {
25+
@extend %form-element-semitransparent;
26+
}
27+
2828
// * to be evaluated
2929
// display: inline-flex;
3030
// align-items: center;

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

+10-7
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,6 @@
88
padding-right: $accordion---paddingRight;
99

1010
summary {
11-
@include icon(
12-
glyph(expand-more),
13-
24,
14-
"outline",
15-
"after",
16-
$partial: $partial
17-
);
1811
align-items: center;
1912
display: flex;
2013
justify-content: space-between;
@@ -26,6 +19,16 @@
2619
100% + var(--db-accordion---paddingLeft) + #{$accordion---paddingRight}
2720
);
2821

22+
& {
23+
@include icon(
24+
glyph(expand-more),
25+
24,
26+
"outline",
27+
"after",
28+
$partial: $partial
29+
);
30+
}
31+
2932
// Replace existing marker with an icon from the library
3033
&::-webkit-details-marker {
3134
display: none;

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

+10-3
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,19 @@
7070

7171
.elm-link {
7272
&.is-close {
73-
@include icon(glyph(close), 24, "outline", $partial: $partial);
74-
@include is-icon-text-replace();
75-
7673
position: absolute;
7774
right: 0;
7875
top: 0;
76+
77+
& {
78+
@include icon(
79+
glyph(close),
80+
24,
81+
"outline",
82+
$partial: $partial
83+
);
84+
@include is-icon-text-replace();
85+
}
7986
}
8087
}
8188
}

‎source/_patterns/02-components/language-switcher/language-switcher.scss

+10-8
Original file line numberDiff line numberDiff line change
@@ -95,16 +95,18 @@
9595

9696
.elm-link,
9797
.elm-button {
98-
@include icon(
99-
glyph(expand-more),
100-
24,
101-
"outline",
102-
"after",
103-
$partial: $partial
104-
);
105-
10698
padding-bottom: to-rem($pxValue: 22);
10799

100+
& {
101+
@include icon(
102+
glyph(expand-more),
103+
24,
104+
"outline",
105+
"after",
106+
$partial: $partial
107+
);
108+
}
109+
108110
&:hover {
109111
color: $db-color-red-500;
110112
}

‎source/_patterns/02-components/link-list/link-list.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@
88

99
li {
1010
.elm-link {
11-
@include icon(glyph(chevron-right), $partial: $partial);
12-
1311
font-weight: 700;
1412
text-decoration: none;
1513

14+
& {
15+
@include icon(glyph(chevron-right), $partial: $partial);
16+
}
17+
1618
&:hover,
1719
&:active {
1820
text-decoration: underline;

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

+11-3
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,24 @@
3838
}
3939

4040
& > label[for] {
41-
@include icon(glyph(menu), 24, "outline", $partial: $partial);
42-
@include icon(glyph(close), 24, "outline", "after", $partial: $partial);
43-
4441
background-color: $header---backgroundColor; // TODO: This would need to get replaced by the correct (semantic) color
4542

4643
border-bottom: 1px solid $db-color-warm-gray-100;
4744

4845
display: block;
4946
padding: to-rem($pxValue: 8) to-rem($pxValue: 22) to-rem($pxValue: 10);
5047

48+
& {
49+
@include icon(glyph(menu), 24, "outline", $partial: $partial);
50+
@include icon(
51+
glyph(close),
52+
24,
53+
"outline",
54+
"after",
55+
$partial: $partial
56+
);
57+
}
58+
5159
&::before {
5260
margin-right: to-rem($pxValue: 16);
5361
}

‎source/_patterns/02-components/overflow-menu/overflow-menu.scss

+9-7
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,17 @@
1313
}
1414

1515
summary {
16-
@include icon(
17-
$cmp-overflow-menu-icon,
18-
20,
19-
"outline",
20-
$partial: $partial
21-
);
22-
2316
display: inline-block;
2417

18+
& {
19+
@include icon(
20+
$cmp-overflow-menu-icon,
21+
20,
22+
"outline",
23+
$partial: $partial
24+
);
25+
}
26+
2527
&::before {
2628
display: inline-block;
2729
padding: to-rem($pxValue: 9) to-rem($pxValue: 12);

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

+8-4
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,12 @@
2929
}
3030

3131
.elm-label {
32-
@include icon(glyph(search), 24, "outline", $partial: $partial);
33-
3432
display: inline-block;
3533

34+
& {
35+
@include icon(glyph(search), 24, "outline", $partial: $partial);
36+
}
37+
3638
&::before {
3739
// TODO: Evaluate on whether this declaration could get moved to the general icon declarations
3840
font-size: to-rem($pxValue: 22);
@@ -51,14 +53,16 @@
5153
}
5254

5355
.elm-button {
54-
@include icon(glyph(search), 24, "outline", $partial: $partial);
55-
5656
display: none;
5757
left: 0;
5858
position: absolute;
5959
top: to-em($pxValue: 8);
6060
visibility: hidden;
6161

62+
& {
63+
@include icon(glyph(search), 24, "outline", $partial: $partial);
64+
}
65+
6266
&::before {
6367
left: to-rem($pxValue: 4);
6468
margin: -9px;

‎source/_patterns/03-areas/00-header/meta.scss

+4-6
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,14 @@
2929

3030
& > .elm-link {
3131
&[rel="account"] {
32-
@include is-icon-text-replace();
33-
3432
margin-left: to-rem($pxValue: 4);
3533

36-
@media screen and (min-width: #{($header-srOnly-linkAccount-breakpoint + 1)}rem) {
37-
margin-left: to-rem($pxValue: 8);
34+
& {
35+
@include is-icon-text-replace();
3836
}
3937

40-
@media screen and (max-width: #{($header-srOnly-linkAccount-breakpoint)}rem) {
41-
@include is-icon-text-replace();
38+
@media screen and (min-width: #{($header-srOnly-linkAccount-breakpoint + 1)}rem) {
39+
margin-left: to-rem($pxValue: 8);
4240
}
4341
}
4442
}

‎source/_patterns/03-areas/03-footer/footer.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,17 @@
55
@import "footer.variables";
66

77
.rea-footer {
8-
@include clearfix($partial: $partial);
9-
108
background-color: $footer---backgroundColor;
119
box-shadow: $footer---boxShadow;
1210

1311
color: $db-color-cool-gray-500;
1412
margin-top: $footer---marginTop;
1513
padding: #{to-rem($pxValue: 21)} #{to-rem($pxValue: 16)};
1614

15+
& {
16+
@include clearfix($partial: $partial);
17+
}
18+
1719
&.has-border {
1820
border-top: $footer---borderTop;
1921
}

0 commit comments

Comments
 (0)