Skip to content

Commit 2462e69

Browse files
starryeyez024castastrophekylebuch8
authored
fix: pfe-tab design tweaks & support for local vars in non-light contexts (#1021)
* adjust spacing above vertical tabs, and colors of dark/saturated tab highlights * updates to border * Resolve border issues * Fixes for variables * Fix demo page CSS * remove commented out code * remove local debug mixins * Update elements/pfe-tabs/src/pfe-tab.scss Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com> * Tidy * Add const with colors * Remove test colors * changelog * Move TOC over to right side, and other demo CSS adjustments to get more tabs on the page for the visual regression test. * updating pfe-tabs vrt baseline images Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com> Co-authored-by: Kyle Buchanan <kylebuch8@gmail.com>
1 parent 4520a30 commit 2462e69

11 files changed

Lines changed: 104 additions & 114 deletions

File tree

‎CHANGELOG-prerelease.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
## Prerelease 56 ( TBD )
22

33
- [06a9b94](https://github.com/patternfly/patternfly-elements/commit/06a9b94505d1471d899f1db9704727c5a249a489) fix: move visual regression testing to merge script
4-
- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Remove build from postinstall
4+
- [7aad6b](https://github.com/patternfly/patternfly-elements/commit/7aad6b463920cad87de2697ee5fdf99b46eb628e) feat: Remove build from postinstall
5+
- [4520a3](https://github.com/patternfly/patternfly-elements/commit/4520a30c72f46d0f211497d3356cf630a4ed60a5) fix: fix: issue in new automerge scripts (#1056)
6+
- [](https://github.com/patternfly/patternfly-elements/commit/) fix: resolve pfe-tabs color issues and ensure local variables work within dark or saturated contexts
57

68
## Prerelease 55 ( 2020-08-19 )
79

‎elements/pfe-card/src/pfe-card.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,6 @@ $size-small: (
5050
PaddingLeft: pfe-var(container-spacer)
5151
);
5252

53-
// DEBUGGING
54-
// @include pfe-local-debug; // preview local variables
5553

5654
:host {
5755
--theme: #{pfe-local(theme)};

‎elements/pfe-tabs/demo/demo.css‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
html {
22
scroll-behavior: smooth;
3+
34
}
45

56
@media screen and (max-width: 899px) {
@@ -42,8 +43,8 @@ html {
4243

4344
[class^="example"],
4445
section.pfe-l-grid {
45-
margin: 32px;
46-
padding: 32px 20px;
46+
margin: 32px 0;
47+
padding: 0 0;
4748
}
4849

4950
@media screen and (min-width: 900px) {
@@ -68,20 +69,36 @@ section>h2 {
6869
font-family: "Arial";
6970
}
7071
.inner {
71-
margin: auto;
72+
margin: 0 0 0 10px;
7273
max-width:1140px;
73-
padding: 50px 0;
74+
padding: 50px 20px;
75+
}
76+
.toc {
77+
position: fixed;
78+
top: 0;
79+
right: 0;
80+
z-index: 5;
81+
width: 250px;
82+
}
83+
.toc ul {
84+
font-size: 11px;
85+
list-style: disc;
86+
}
87+
@media screen and (max-width: 1240px) {
88+
.toc {
89+
display: none;
90+
}
7491
}
7592
.light-background {
7693
background-color: rgb(252, 250, 244);
7794
--theme: light;
7895
}
7996
.dark-background {
80-
background-color: #383333;
97+
background-color: #000;
8198
--theme: dark;
8299
}
83100
.saturated-background {
84-
background-color: teal;
101+
background-color: #006069;
85102
--theme: saturated;
86103
}
87104

‎elements/pfe-tabs/demo/index.html‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
<div class="light-background"><div class="inner">
4646
<h1 id="top" class="example-heading"><code>&lt;pfe-tabs&gt;</code></h1>
4747

48-
<pfe-card style="margin-bottom: 2em;" class="" pfe-color="lightest">
48+
<pfe-card class="toc" pfe-color="lightest">
4949
<h3 id=" ">Table of contents</h3>
5050
<ul id="jump-links"></ul>
5151
<a href="#top">Scroll to top</a>
@@ -55,7 +55,7 @@ <h3 id=" ">Table of contents</h3>
5555

5656
<section class=" ">
5757
<div>
58-
<h2 id="style-horizontal-plain">Style: Horizontal plain</h2>
58+
<h2 id="style-horizontal-plain">Style: Horizontal wind</h2>
5959
<pfe-tabs>
6060
<pfe-tab role="heading" slot="tab" id="tab1">
6161
<h2>h2</h2>
@@ -93,30 +93,7 @@ <h2>Content 3</h2>
9393
</pfe-tabs>
9494
</div>
9595

96-
<div>
97-
<h2 id="style-horizontal-wind-with-center-alignment">Style: Horizontal wind with center alignment</h2>
98-
<pfe-tabs pfe-tab-align="center" pfe-variant="wind">
99-
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
100-
<pfe-tab-panel role="region" slot="panel">
101-
<h2>Content 1</h2>
102-
<p>Lorem ipsum dolor sit amet, <a href="#">link</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
103-
</pfe-tab-panel>
104-
<pfe-tab role="heading" slot="tab">Tab 2 has a few more words</pfe-tab>
105-
<pfe-tab-panel role="region" slot="panel">
106-
<h2>Content 2</h2>
107-
<p>Lorem ipsum dolor sit amet, <a href="#">link</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
108-
<p>Lorem ipsum dolor sit amet, <a href="#">link</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
109-
</pfe-tab-panel>
110-
<pfe-tab role="heading" slot="tab">Tab 3</pfe-tab>
111-
<pfe-tab-panel role="region" slot="panel">
112-
<h2>Content 3</h2>
113-
<p>Lorem ipsum dolor sit amet, <a href="#">link</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
114-
<p>Lorem ipsum dolor sit amet, <a href="#">link</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
115-
<p>Lorem ipsum dolor sit amet, <a href="#">link</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
116-
<p>Lorem ipsum dolor sit amet, <a href="#">link</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
117-
</pfe-tab-panel>
118-
</pfe-tabs>
119-
</div>
96+
12097

12198
<div>
12299
<h2 id="style-horizontal-earth">Style: Horizontal earth</h2>
@@ -148,6 +125,31 @@ <h2>Content 4</h2>
148125
</pfe-tabs>
149126
</div>
150127

128+
<div>
129+
<h2 id="style-horizontal-wind-with-center-alignment">Style: Horizontal wind with center alignment</h2>
130+
<pfe-tabs pfe-tab-align="center" pfe-variant="wind">
131+
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
132+
<pfe-tab-panel role="region" slot="panel">
133+
<h2>Content 1</h2>
134+
<p>Lorem ipsum dolor sit amet, <a href="#">link</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
135+
</pfe-tab-panel>
136+
<pfe-tab role="heading" slot="tab">Tab 2 has a few more words</pfe-tab>
137+
<pfe-tab-panel role="region" slot="panel">
138+
<h2>Content 2</h2>
139+
<p>Lorem ipsum dolor sit amet, <a href="#">link</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
140+
<p>Lorem ipsum dolor sit amet, <a href="#">link</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
141+
</pfe-tab-panel>
142+
<pfe-tab role="heading" slot="tab">Tab 3</pfe-tab>
143+
<pfe-tab-panel role="region" slot="panel">
144+
<h2>Content 3</h2>
145+
<p>Lorem ipsum dolor sit amet, <a href="#">link</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
146+
<p>Lorem ipsum dolor sit amet, <a href="#">link</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
147+
<p>Lorem ipsum dolor sit amet, <a href="#">link</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
148+
<p>Lorem ipsum dolor sit amet, <a href="#">link</a> consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
149+
</pfe-tab-panel>
150+
</pfe-tabs>
151+
</div>
152+
151153
<div>
152154
<h2 id="style-horizontal-earth">Style: Horizontal earth with center alignment</h2>
153155
<pfe-tabs pfe-variant="earth" pfe-tab-align="center">

‎elements/pfe-tabs/src/pfe-tab-panel.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@ $LOCAL-VARIABLES: (focus: pfe-var(link),
1010
BorderRight: 0,
1111
BorderBottom: 0,
1212
BorderLeft: 0,
13-
));
13+
)
14+
);
15+
16+
/// ===========================================================================
1417

15-
////////////////////////////////
1618

1719
:host {
1820
display: block;

‎elements/pfe-tabs/src/pfe-tab.scss‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ $backwards-compatibility: (
2424
Color--focus: pfe-local(focus, pfe-var(text)),
2525
BorderColor: pfe-local(highlight, pfe-var(ui-accent)),
2626
);
27+
2728
$LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, $backwards-compatibility);
2829

2930

@@ -149,11 +150,10 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, $backwards-compatibility);
149150
color: pfe-fetch(text--muted);
150151
}
151152
}
152-
153+
153154
:host(:not([vertical])[pfe-variant="earth"]:not([aria-selected="true"]):first-of-type) {
154155
border-left-color: transparent;
155156
}
156-
157157
:host(:not([vertical])[pfe-variant="earth"]:not([aria-selected="true"]):last-of-type) {
158158
border-right-color: transparent;
159159
}
@@ -166,6 +166,7 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, $backwards-compatibility);
166166
border-top-color: transparent;
167167
border-bottom-color: pfe-local(BorderColor--hover);
168168
border-bottom-width: pfe-var(ui--border-width);
169+
169170
}
170171

171172
:host([pfe-variant="earth"][aria-selected="false"]:hover) {
@@ -174,7 +175,7 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, $backwards-compatibility);
174175

175176
// nth of type is needed to override first and last of type selectors above
176177
:host([pfe-variant="earth"][aria-selected="true"]) {
177-
background-color: pfe-var(surface--lightest);
178+
background-color: pfe-local(BackgroundColor, $fallback: pfe-var(surface--lightest));
178179
border-bottom: 0;
179180
border-left-color: pfe-var(surface--border);
180181
border-right-color: pfe-var(surface--border);
@@ -252,7 +253,7 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, $backwards-compatibility);
252253

253254
:host([on="dark"][pfe-variant="earth"][aria-selected="false"]) {
254255
--pfe-tabs--Color: #{pfe-var(text--muted--on-dark)};
255-
background-color: pfe-var(surface--darker);
256+
--pfe-tabs--BackgroundColor--inactive: #{pfe-var(surface--darker)};
256257

257258
@include browser-query(ie11) {
258259
background-color: pfe-var(surface--lightest) !important;
@@ -264,7 +265,7 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, $backwards-compatibility);
264265

265266
:host([on="dark"][pfe-variant="earth"][aria-selected="true"]) {
266267
--pfe-tabs--Color--focus: #{pfe-var(text--on-dark)};
267-
background-color: pfe-var(surface--darkest);
268+
--pfe-tabs--BackgroundColor: #{pfe-var(surface--darkest)};
268269
}
269270

270271
// SATURATED
@@ -273,16 +274,9 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, $backwards-compatibility);
273274
}
274275

275276
:host([pfe-variant="earth"][on="saturated"][aria-selected="true"]) {
276-
color: pfe-local(Color--focus);
277-
}
278-
279-
:host([pfe-variant="earth"][on="saturated"]:hover) {
280-
color: pfe-local(Color--focus);
281-
}
282-
283-
:host([pfe-variant="earth"][on="saturated"][aria-selected="true"]) {
284-
--pfe-tabs--Color: #{pfe-var(text)};
277+
--pfe-tabs--BackgroundColor: #{pfe-var(surface--lightest)};
285278
}
279+
286280

287281
/// ===========================================================================
288282
/// WIND TAB VARIANTS ON DARK & SATURATED
@@ -303,15 +297,15 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, $backwards-compatibility);
303297

304298
:host([on="saturated"][pfe-variant="wind"][aria-selected="true"]) {
305299
--pfe-tabs--Color--focus: #{pfe-var(text--on-saturated)};
306-
--pfe-tabs--BorderColor: #{pfe-var(surface--lightest)};
300+
--pfe-tabs--BorderColor: #{pfe-var(ui-base--on-saturated)};
307301
}
308302

309303
:host([on="saturated"][pfe-variant="wind"][aria-selected="false"]) {
310304
--pfe-tabs--Color: #{pfe-var(text--muted--on-saturated)};
311305
}
312306

313307
:host([on="saturated"][pfe-variant="wind"][aria-selected="false"]:hover) {
314-
border-bottom-color: pfe-local(BorderColor--hover);
308+
--pfe-tabs--BorderColor: #{pfe-var(surface--border)};
315309
}
316310

317311
:host([on="saturated"][pfe-variant="wind"][aria-selected="true"]:last-of-type) {
@@ -323,18 +317,23 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, $backwards-compatibility);
323317
:host([on="dark"][pfe-variant="wind"]) {
324318
--pfe-tabs--Color: #{pfe-var(text--on-dark)};
325319
--pfe-tabs--Color--focus: #{pfe-var(text--on-dark)};
320+
326321
@include browser-query(ie11) {
327322
.pfe-tab * {
328323
color: pfe-fetch(text) !important;
329324
}
330325
}
331326
}
327+
:host([on="dark"][pfe-variant="wind"][aria-selected="false"]) {
328+
--pfe-tabs--Color: #{pfe-var(text--muted--on-saturated)};
329+
}
332330

333331
:host([on="dark"][pfe-variant="wind"][aria-selected="false"]:hover) {
332+
--pfe-tabs--BorderColor: #{pfe-var(surface--lightest)};
334333
border-bottom-color: pfe-var(surface--base);
335334
--pfe-tabs__tab--BorderBottom: #{pfe-local(BorderWidth)} #{pfe-var(ui--border-style)} #{pfe-var(surface--border)};
336335
}
337336

338337
:host([on="dark"][pfe-variant="wind"][vertical][aria-selected="false"]:hover) {
339-
border-bottom: 0;
340-
}
338+
border-bottom-color: transparent;
339+
}

‎elements/pfe-tabs/src/pfe-tabs.scss‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (
3232
)
3333
));
3434

35+
@include pfe-local-debug;
36+
37+
/// ===========================================================================
3538

3639
:host {
3740
display: pfe-local(Display);
@@ -103,7 +106,6 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (
103106

104107
@media screen and (min-width: #{pfe-breakpoint(md)}) {
105108
:host([vertical][pfe-variant="earth"]) {
106-
--pfe-tabs__tabs--Padding: #{pfe-var(container-padding)} 0 0 0;
107109

108110
@include browser-query(ie11) {
109111
.tabs {
@@ -122,7 +124,6 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (
122124

123125
:host([pfe-variant="earth"]) {
124126
--pfe-tabs__tabs--PaddingLeft: #{pfe-var(container-padding)};
125-
126127
}
127128

128129
@include browser-query(ie11) {
@@ -133,29 +134,36 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, (
133134

134135
@include pfe-theme-contexts; // imports on="light" etc support
135136

136-
137137
/// ===========================================================================
138138
/// INSET NOTCH
139139
/// ===========================================================================
140140

141-
@media screen and (min-width: #{pfe-breakpoint(md)}) {
142-
:host([vertical][pfe-variant="wind"]) .tabs-prefix,
143-
:host([vertical][pfe-variant="wind"]) .tabs-suffix {
141+
// Vertical
142+
:host([vertical]) .tabs-prefix,
143+
:host([vertical]) .tabs-suffix {
144144
left: 0px;
145145
top: 0px;
146146
content: " ";
147-
height: 32px;
147+
height: calc(#{pfe-var(container-padding)} * 2);
148148
width: 1px;
149-
background-color: pfe-local(BorderColor, $region: tabs);
150149
position: relative;
151-
}
150+
}
151+
:host([vertical][pfe-variant="wind"]) .tabs-prefix,
152+
:host([vertical][pfe-variant="wind"]) .tabs-suffix {
153+
background-color: pfe-local(BorderColor, $region: tabs);
154+
}
152155

153-
:host(:not([vertical])[pfe-variant="earth"]) .tabs-prefix {
156+
// Horizontal
157+
:host(:not([vertical])[pfe-variant="earth"]) .tabs-prefix {
154158
left: 0px;
155159
top: 0px;
156160
content: " ";
157161
height: 1px;
158-
width: calc(#{pfe-var(container-padding)} * 2);
162+
width: pfe-var(container-padding);
159163
position: relative;
164+
}
165+
@media screen and (min-width: #{pfe-breakpoint(md)}) {
166+
:host(:not([vertical])[pfe-variant="earth"]) .tabs-prefix {
167+
width: calc(#{pfe-var(container-padding)} * 2);
160168
}
161169
}

0 commit comments

Comments
 (0)