Skip to content

Commit 6b11aba

Browse files
sahiljoharisahiljohari
committed
added icon variant
1 parent 456cf14 commit 6b11aba

File tree

2 files changed

+103
-30
lines changed

2 files changed

+103
-30
lines changed

‎css/src/components/pivot-stack.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use 'sass:math';
22

3-
$ps-height: 54px !default;
3+
$ps-height: 44px !default;
44
$ps-font-size-mobile: $font-size-8 !default;
55
$ps-font-size-desktop: $font-size-7 !default;
66
$ps-horizontal-spacing: $spacer-3 !default;
@@ -63,6 +63,14 @@ $ps-submenu-button-padding: $spacer-3 $spacer-5 !default;
6363
white-space: nowrap;
6464
cursor: pointer;
6565

66+
> .icon:first-child {
67+
margin-right: $spacer-2;
68+
}
69+
70+
> .icon:last-child {
71+
margin-left: $spacer-2;
72+
}
73+
6674
.dropdown-menu &,
6775
.pivot-stack-mobile-nav & {
6876
justify-content: flex-start;

‎site/src/components/pivot-stack.md‎

Lines changed: 94 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -12,36 +12,101 @@ classPrefixes:
1212

1313
Pivot Stack is a layout component that provides a tabbed interface to display multiple views of a page.
1414

15+
## Usage
16+
17+
Here is an example of a standard pivot stack usage.
18+
1519
```html
1620
<div class="pivot-stack">
17-
<nav class="pivot-stack-nav" role="navigation">
18-
<ul class="pivot-stack-nav-list">
19-
<li class="pivot-stack-item is-active">
20-
<a id="item-1" class="pivot-stack-button" href="#">
21-
<span>Item 1</span>
22-
</a>
23-
</li>
24-
<li class="pivot-stack-item">
25-
<a id="item-2" class="pivot-stack-button" href="#">
26-
<span>Item 2</span>
27-
</a>
28-
</li>
29-
<li class="pivot-stack-item">
30-
<a id="item-3" class="pivot-stack-button" href="#">
31-
<span>Item 3</span>
32-
</a>
33-
</li>
34-
<li class="pivot-stack-item">
35-
<a id="item-4" class="pivot-stack-button" href="#">
36-
<span>Item 4</span>
37-
</a>
38-
</li>
39-
<li class="pivot-stack-item">
40-
<a id="item-5" class="pivot-stack-button" href="#">
41-
<span>Item 5</span>
42-
</a>
43-
</li>
44-
</ul>
45-
</nav>
21+
<nav class="pivot-stack-nav" role="navigation" aria-label="Site">
22+
<ul class="pivot-stack-nav-list">
23+
<li class="pivot-stack-item is-active">
24+
<a id="item-1" class="pivot-stack-button" href="#">
25+
<span>Item 1</span>
26+
</a>
27+
</li>
28+
<li class="pivot-stack-item">
29+
<a id="item-2" class="pivot-stack-button" href="#">
30+
<span>Item 2</span>
31+
</a>
32+
</li>
33+
<li class="pivot-stack-item">
34+
<a id="item-3" class="pivot-stack-button" href="#">
35+
<span>Item 3</span>
36+
</a>
37+
</li>
38+
<li class="pivot-stack-item">
39+
<a id="item-4" class="pivot-stack-button" href="#">
40+
<span>Item 4</span>
41+
</a>
42+
</li>
43+
<li class="pivot-stack-item">
44+
<a id="item-5" class="pivot-stack-button" href="#">
45+
<span>Item 5</span>
46+
</a>
47+
</li>
48+
</ul>
49+
</nav>
4650
</div>
4751
```
52+
53+
### With icons
54+
55+
Pivot stack buttons can be decorated with custom icons for a more elaborate representation. Here is an example.
56+
57+
```html
58+
<section class="margin-bottom-md">
59+
<h2>With leading icons</h2>
60+
<div class="pivot-stack">
61+
<nav class="pivot-stack-nav" role="navigation" aria-label="Site">
62+
<ul class="pivot-stack-nav-list">
63+
<li class="pivot-stack-item is-active">
64+
<a id="item-1" class="pivot-stack-button" href="#">
65+
<span class="icon border"></span>
66+
<span>Item 1</span>
67+
</a>
68+
</li>
69+
<li class="pivot-stack-item">
70+
<a id="item-2" class="pivot-stack-button" href="#">
71+
<span class="icon border"></span>
72+
<span>Item 2</span>
73+
</a>
74+
</li>
75+
<li class="pivot-stack-item">
76+
<a id="item-3" class="pivot-stack-button" href="#">
77+
<span class="icon border"></span>
78+
<span>Item 3</span>
79+
</a>
80+
</li>
81+
</ul>
82+
</nav>
83+
</div>
84+
</section>
85+
<section>
86+
<h2>With trailing icons</h2>
87+
<div class="pivot-stack">
88+
<nav class="pivot-stack-nav" role="navigation" aria-label="Site">
89+
<ul class="pivot-stack-nav-list">
90+
<li class="pivot-stack-item is-active">
91+
<a id="item-1" class="pivot-stack-button" href="#">
92+
<span>Item 1</span>
93+
<span class="icon border"></span>
94+
</a>
95+
</li>
96+
<li class="pivot-stack-item">
97+
<a id="item-2" class="pivot-stack-button" href="#">
98+
<span>Item 2</span>
99+
<span class="icon border"></span>
100+
</a>
101+
</li>
102+
<li class="pivot-stack-item">
103+
<a id="item-3" class="pivot-stack-button" href="#">
104+
<span>Item 3</span>
105+
<span class="icon border"></span>
106+
</a>
107+
</li>
108+
</ul>
109+
</nav>
110+
</div>
111+
</section>
112+
```

0 commit comments

Comments
 (0)