Skip to content

Commit ddd6779

Browse files
starryeyez024kylebuch8
authored andcommitted
Pfe-tabs - add centered alignment (#467)
* pfe-tab-centered Add support for center alignment * remove css support from vertical * Update index.html add back vertical attribute to demo * pfe-tab-centered Update attribute to pfe-tab-align * pfe-tab-centered add back earth variant * fixes
1 parent 48f19f2 commit ddd6779

File tree

2 files changed

+10
-4
lines changed

2 files changed

+10
-4
lines changed

elements/pfe-tabs/demo/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,8 @@ <h2>Content 3</h2>
101101
</pfe-tabs>
102102
</section>
103103
<section class="example">
104-
<h2>Style: Horizontal wind</h2>
105-
<pfe-tabs pfe-variant="wind">
104+
<h2>Style: Horizontal wind with center alignment</h2>
105+
<pfe-tabs pfe-tab-align="center" pfe-variant="wind">
106106
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
107107
<pfe-tab-panel role="region" slot="panel">
108108
<h2>Content 1</h2>
@@ -173,8 +173,8 @@ <h2>Content 3</h2>
173173
</pfe-tabs>
174174
</section>
175175
<section class="example">
176-
<h2>Style: Vertical earth</h2>
177-
<pfe-tabs vertical pfe-variant="earth">
176+
<h2>Style: Vertical earth </h2>
177+
<pfe-tabs vertical pfe-variant="earth" pfe-tab-align="center" >
178178
<pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
179179
<pfe-tab-panel role="region" slot="panel">
180180
<h2>Content 1</h2>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@ $pfe-tabs__panel--PaddingLeft-factor: 2;
2323
border-bottom: #{pfe-var(ui--border-width)} #{pfe-var(ui--border-style)} #{pfe-local(BorderColor)};
2424
}
2525

26+
:host(:not([vertical])[pfe-tab-align="center"]) {
27+
.tabs {
28+
justify-content: center;
29+
}
30+
}
31+
2632

2733
/// ===========================================================================
2834
/// VERTICAL ORIENTATION

0 commit comments

Comments
 (0)