Skip to content

Commit 89f0716

Browse files
chrisdo1chrisdo1
committed
US198278 tab design updates
* set v-tabs to appear as horizontal tabs below 768px
1 parent 851f60c commit 89f0716

File tree

4 files changed

+80
-72
lines changed

4 files changed

+80
-72
lines changed

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,13 @@ $LOCAL: tabs;
2626
}
2727

2828
/* Vertical */
29-
:host([pfe-variant="wind"][vertical]) .container {
30-
@include pfe-tab-panel-container($orientation: "vertical");
31-
}
3229

33-
:host([pfe-variant="earth"][vertical]) .container {
34-
@include pfe-tab-panel-container($orientation: "vertical", $border: true);
35-
}
30+
@media screen and (min-width: #{pfe-breakpoint(md)}) {
31+
:host([pfe-variant="wind"][vertical]) .container {
32+
@include pfe-tab-panel-container($orientation: "vertical");
33+
}
3634

35+
:host([pfe-variant="earth"][vertical]) .container {
36+
@include pfe-tab-panel-container($orientation: "vertical", $border: true);
37+
}
38+
}

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

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -55,18 +55,20 @@ $LOCAL: tabs;
5555
/// VERTICAL TAB ORIENTATION
5656
/// ===========================================================================
5757

58-
:host([vertical]) {
59-
text-align: left;
60-
margin: 0 -1px 0 0;
61-
padding-left: calc(#{pfe-var(container-padding)} * .75);
62-
border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} transparent;
63-
border-right: 0;
64-
position: relative;
65-
}
66-
67-
:host([vertical][aria-selected="true"]) {
68-
border-color-top: transparent;
69-
border-right: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-local(highlight)};
58+
@media screen and (min-width: #{pfe-breakpoint(md)}) {
59+
:host([vertical]) {
60+
text-align: left;
61+
margin: 0 -1px 0 0;
62+
padding-left: calc(#{pfe-var(container-padding)} * .75);
63+
border: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} transparent;
64+
border-right: 0;
65+
position: relative;
66+
}
67+
68+
:host([vertical][aria-selected="true"]) {
69+
border-color-top: transparent;
70+
border-right: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-local(highlight)};
71+
}
7072
}
7173

7274
/// ===========================================================================
@@ -104,26 +106,28 @@ $LOCAL: tabs;
104106
/// EARTH TAB VERTICAL ORIENTATION
105107
/// ===========================================================================
106108

107-
:host([vertical][pfe-variant="earth"]) {
108-
border-top: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
109-
}
110-
111-
:host([vertical][pfe-variant="earth"]:first-of-type) {
112-
border-top: 0;
113-
}
114-
115-
:host([vertical][pfe-variant="earth"][aria-selected="true"]) {
116-
border-top: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
117-
border-right: 0;
118-
border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-local(highlight)};
119-
}
120-
121-
:host([vertical][pfe-variant="earth"][aria-selected="false"]) {
122-
border-right: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
123-
border-bottom: 0;
124-
border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(ui--border-style)} #{pfe-color(surface--lighter)};
125-
}
126-
127-
:host([vertical][pfe-variant="earth"][aria-selected="true"]:last-of-type) {
128-
border-bottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
109+
@media screen and (min-width: #{pfe-breakpoint(md)}) {
110+
:host([vertical][pfe-variant="earth"]) {
111+
border-top: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
112+
}
113+
114+
:host([vertical][pfe-variant="earth"]:first-of-type) {
115+
border-top: 0;
116+
}
117+
118+
:host([vertical][pfe-variant="earth"][aria-selected="true"]) {
119+
border-top: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
120+
border-right: 0;
121+
border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-local(highlight)};
122+
}
123+
124+
:host([vertical][pfe-variant="earth"][aria-selected="false"]) {
125+
border-right: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
126+
border-bottom: 0;
127+
border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(ui--border-style)} #{pfe-color(surface--lighter)};
128+
}
129+
130+
:host([vertical][pfe-variant="earth"][aria-selected="true"]:last-of-type) {
131+
border-bottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-color(surface--border)};
132+
}
129133
}

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

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -28,33 +28,37 @@ $pfe-tabs__panel--PaddingLeft-factor: 2;
2828
/// VERTICAL ORIENTATION
2929
/// ===========================================================================
3030

31-
:host([vertical]) {
32-
display: flex; // Sets tabs to appear to the left of the panels.
33-
34-
.tabs {
35-
flex-direction: column;
36-
width: 22.22%;
37-
border: 0;
38-
border-right: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-local(BorderColor)};
39-
}
31+
@media screen and (min-width: #{pfe-breakpoint(md)}) {
32+
:host([vertical]) {
33+
display: flex; // Sets tabs to appear to the left of the panels.
34+
35+
.tabs {
36+
flex-direction: column;
37+
width: 22.22%;
38+
border: 0;
39+
border-right: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-local(BorderColor)};
40+
}
4041

41-
.panels {
42-
padding: 0;
43-
width: 77.78%;
44-
padding-right: #{pfe-var(container-padding)};
42+
.panels {
43+
padding: 0;
44+
width: 77.78%;
45+
padding-right: #{pfe-var(container-padding)};
46+
}
4547
}
4648
}
4749

4850
/// ===========================================================================
4951
/// TAB VARIANTS
5052
/// ===========================================================================
5153

52-
:host([vertical][pfe-variant="earth"]) {
53-
padding-top: #{pfe-var(container-padding)};
54-
55-
.tabs {
56-
padding-left: 0;
54+
@media screen and (min-width: #{pfe-breakpoint(md)}) {
55+
:host([vertical][pfe-variant="earth"]) {
5756
padding-top: #{pfe-var(container-padding)};
57+
58+
.tabs {
59+
padding-left: 0;
60+
padding-top: #{pfe-var(container-padding)};
61+
}
5862
}
5963
}
6064

@@ -71,22 +75,22 @@ $pfe-tabs__panel--PaddingLeft-factor: 2;
7175
:host([on="dark"]) {
7276
@include pfe-theme($theme: "dark");
7377
}
74-
:host([color="darker"]) {
75-
@include pfe-theme($theme: "darker");
76-
}
77-
:host([color="darkest"]) {
78-
@include pfe-theme($theme: "darkest");
79-
}
78+
// :host([color="darker"]) {
79+
// @include pfe-theme($theme: "darker");
80+
// }
81+
// :host([color="darkest"]) {
82+
// @include pfe-theme($theme: "darkest");
83+
// }
8084

8185

8286
:host([on="light"]) {
8387
@include pfe-theme($theme: "light");
8488
}
8589

86-
:host([on="lighter"]) {
87-
@include pfe-theme($theme: "lighter");
88-
}
89-
:host([on="lightest"]) {
90-
@include pfe-theme($theme: "lightest");
91-
}
90+
// :host([on="lighter"]) {
91+
// @include pfe-theme($theme: "lighter");
92+
// }
93+
// :host([on="lightest"]) {
94+
// @include pfe-theme($theme: "lightest");
95+
// }
9296

‎examples/index.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ <h1>Demos</h1>
2222
<li><a href="../elements/pfe-icon/demo">pfe-icon</a></li>
2323
<li><a href="../elements/pfe-icon-panel/demo">pfe-icon-panel</a></li>
2424
<li><a href="../elements/pfe-layouts/demo">pfe-layouts</a></li>
25-
<li><a href="../elements/pfe-link-list/demo">pfe-link-list</a></li>
26-
<li><a href="../elements/pfe-navigation/demo">pfe-navigation</a></li>
2725
<li><a href="../elements/pfe-number/demo">pfe-number</a></li>
2826
<li><a href="../elements/pfe-tabs/demo">pfe-tabs</a></li>
2927
</ul>

0 commit comments

Comments
 (0)