Skip to content

Commit 6f046e7

Browse files
dancormierqheaden-stack
dancormier
authored and
qheaden-stack
committed
Revert "Add child .s-navigation--item-text element"
This reverts commit 6105021.
1 parent 3726964 commit 6f046e7

File tree

8 files changed

+649
-999
lines changed

8 files changed

+649
-999
lines changed

‎docs/_data/navigation.json

Lines changed: 43 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,44 @@
1-
{
2-
"classes": [
3-
{
4-
"class": ".s-navigation",
5-
"applies": "N/A",
6-
"description": "Base parent container for navigation"
7-
},
8-
{
9-
"class": ".s-navigation__vertical",
10-
"applies": "<code class=\"stacks-code\">.s-navigation</code>",
11-
"description": "Renders the navigation vertically"
12-
},
13-
{
14-
"class": ".s-navigation__muted",
15-
"applies": "<code class=\"stacks-code\">.s-navigation</code>",
16-
"description": "Secondary navigation style. To be used on pages that already have a primary navigation"
17-
},
18-
{
19-
"class": ".s-navigation__scroll",
20-
"applies": "<code class=\"stacks-code\">.s-navigation</code>",
21-
"description": "When the navigation items overflow the width of the component, enable horizontal scrolling. By default, navigation items will wrap. This should not be applied to vertical navigations."
22-
},
23-
{
24-
"class": ".s-navigation__sm",
25-
"applies": "<code class=\"stacks-code\">.s-navigation</code>",
26-
"description": "Tightens up the overall spacing and reduces the text size"
27-
},
28-
{
29-
"class": ".s-navigation--item",
30-
"applies": "Child of <code class=\"stacks-code\">.s-navigation</code>",
31-
"description": "The individual pill-shaped link in a navigation"
32-
},
33-
{
34-
"class": ".s-navigation--item-text",
35-
"applies": "Child of <code class=\"stacks-code\">.s-navigation--item</code>",
36-
"description": "The element meant to contain the text of the navigation item"
37-
},
38-
{
39-
"class": ".is-selected",
40-
"applies": "<code class=\"stacks-code\">.s-navigation--item</code>",
41-
"description": "Applies to a navigation item that’s currently selected / active"
42-
},
43-
{
44-
"class": ".s-navigation--item__dropdown",
45-
"applies": "<code class=\"stacks-code\">.s-navigation--item</code>",
46-
"description": "Adds a small caret that indicates a dropdown"
47-
}
48-
]
1+
{
2+
"classes": [
3+
{
4+
"class": ".s-navigation",
5+
"applies": "N/A",
6+
"description": "Base parent container for navigation"
7+
},
8+
{
9+
"class": ".s-navigation__vertical",
10+
"applies": "<code class=\"stacks-code\">.s-navigation</code>",
11+
"description": "Renders the navigation vertically"
12+
},
13+
{
14+
"class": ".s-navigation__muted",
15+
"applies": "<code class=\"stacks-code\">.s-navigation</code>",
16+
"description": "Secondary navigation style. To be used on pages that already have a primary navigation"
17+
},
18+
{
19+
"class": ".s-navigation__scroll",
20+
"applies": "<code class=\"stacks-code\">.s-navigation</code>",
21+
"description": "When the navigation items overflow the width of the component, enable horizontal scrolling. By default, navigation items will wrap. This should not be applied to vertical navigations."
22+
},
23+
{
24+
"class": ".s-navigation__sm",
25+
"applies": "<code class=\"stacks-code\">.s-navigation</code>",
26+
"description": "Tightens up the overall spacing and reduces the text size"
27+
},
28+
{
29+
"class": ".s-navigation--item",
30+
"applies": "Child of <code class=\"stacks-code\">.s-navigation</code>",
31+
"description": "The individual pill-shaped link in a navigation"
32+
},
33+
{
34+
"class": ".is-selected",
35+
"applies": "<code class=\"stacks-code\">.s-navigation--item</code>",
36+
"description": "Applies to a navigation item that’s currently selected / active"
37+
},
38+
{
39+
"class": ".s-navigation--item__dropdown",
40+
"applies": "<code class=\"stacks-code\">.s-navigation--item</code>",
41+
"description": "Adds a small caret that indicates a dropdown"
42+
}
43+
]
4944
}

‎docs/_includes/header.html

Lines changed: 90 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,90 @@
1-
<header class="s-topbar stacks-topbar ps-fixed js-stacks-topbar print:d-none">
2-
<a href="#content" class="s-topbar--skip-link">Skip to main content</a>
3-
<div class="s-topbar--container px8">
4-
<a href="#" class="s-topbar--menu-btn d-none md:d-flex js-hamburger-btn"><span></span></a>
5-
<a class="s-topbar--logo" href="{{ "/" | url }}">
6-
<span class="v-visible-sr">Stacks home</span>
7-
{% embed "LogoGlyphMd", "native" %}
8-
</a>
9-
10-
{% if site-navigation %}
11-
<nav aria-label="Global" class="sm:d-none">
12-
<ul class="s-navigation ml8 fw-nowrap">
13-
{% assign slug = page.url | replace:'/',' ' | truncatewords: 2 | remove:'...' %}
14-
15-
{% for section in site-navigation.sections %}
16-
{% assign url = section.url | replace:'/',' ' | truncatewords: 2 | remove:'...' %}
17-
<li>
18-
<a class="s-navigation--item{% if url == slug %} is-selected{% endif %}" href="{{ section.url }}" {% if url == slug %} aria-current="page"{% endif %}>
19-
<span class="s-navigation--item-text" data-text="{{ section.title }}">{{ section.title }}</span>
20-
</a>
21-
</li>
22-
{% endfor %}
23-
</ul>
24-
</nav>
25-
{% endif %}
26-
27-
<ol class="s-topbar--content sm:ml0 overflow-hidden">
28-
<li>
29-
<a class="s-topbar--item sm:d-none" title="Stack Overflow" href="https://stackoverflow.com">
30-
{% embed "LogoGlyphSm" %}
31-
</a>
32-
</li>
33-
<li>
34-
<a class="s-topbar--item" title="Stacks on GitHub" href="https://github.com/StackExchange/Stacks">
35-
{% icon "GitHub", "", "24" %}
36-
</a>
37-
</li>
38-
<li>
39-
<a class="s-topbar--item" title="Stacks Template on Codepen" href="https://codepen.io/pen?template=wvmRgdp">
40-
<svg aria-hidden="true" class="svg-icon iconCodepen" width="24" height="24" viewBox="0 0 18 18"><path d="M12.67 8.17l-2.98-2v-3.2l5.38 3.6-2.4 1.6zM13.9 9l1.73-1.15v2.3L13.9 9zm-4.2 2.82l2.98-2 2.4 1.62-5.38 3.59v-3.2zm-4.36-2l2.98 2v3.2l-5.38-3.58 2.4-1.61zM4.1 9l-1.73 1.15v-2.3L4.1 9zm4.2-2.82l-2.98 2-2.4-1.62L8.3 2.97v3.2zm.7 4.45L6.57 9 9 7.37 11.43 9 9 10.63zm7.99-4.19l-.01-.05-.01-.04-.02-.05-.02-.03a.6.6 0 0 0-.02-.05l-.02-.03a.69.69 0 0 0-.15-.17L16.7 6h-.02L9.4 1.11a.69.69 0 0 0-.77 0L1.3 5.99h-.02c0 .02-.02.02-.03.03a.81.81 0 0 0-.12.13.69.69 0 0 0-.03.04l-.02.03-.02.05-.02.03-.02.05v.04L1 6.44v.03a.7.7 0 0 0-.01.1v4.87a.7.7 0 0 0 0 .09l.01.03.01.05.01.04.02.05.02.03a.51.51 0 0 0 .07.12.53.53 0 0 0 .08.1c.02 0 .03.02.04.03l.03.02h.02l7.3 4.88a.69.69 0 0 0 .77 0l7.31-4.87h.02c0-.02.02-.02.03-.03a.72.72 0 0 0 .04-.04l.02-.02a.62.62 0 0 0 .13-.19l.02-.03a.6.6 0 0 0 .02-.05v-.04l.02-.05v-.03a.7.7 0 0 0 .01-.1V6.57a.7.7 0 0 0 0-.09l-.01-.03z"/></svg>
41-
</a>
42-
</li>
43-
</ol>
44-
45-
<div class="s-topbar--searchbar w100 wmx3 sm:wmx-initial js-search" role="search">
46-
<div class="s-topbar--searchbar--input-group">
47-
<input id="searchbox" type="text" placeholder="Search Stacks…" value="" autocomplete="off" class="s-input s-input__search" />
48-
{% icon "Search", "s-input-icon s-input-icon__search" %}
49-
</div>
50-
</div>
51-
52-
<ol class="s-topbar--content ml0 sm:fl1 overflow-hidden">
53-
<li class="d-none sm:d-inline-flex ml-auto">
54-
<button class="s-topbar--item s-btn s-btn__unset c-pointer p8 ml-auto js-search-btn">
55-
{% icon "Search", "js-search-icon" %}
56-
{% icon "Clear", "d-none js-search-close-icon" %}
57-
</button>
58-
</li>
59-
<li>
60-
<button type="button" class="s-topbar--item s-btn s-btn__muted s-btn__icon s-btn__dropdown bar0 pr24"
61-
aria-controls="theming-popover"
62-
data-controller="s-popover"
63-
data-action="s-popover#toggle"
64-
data-s-popover-toggle-class="is-selected"
65-
data-s-popover-placement="bottom-end"
66-
title="Select a theme">
67-
{% icon "Theme", "", "24" %}
68-
</button>
69-
</li>
70-
</ol>
71-
72-
<div class="s-popover w-auto wmn-initial wmx-initial"
73-
id="theming-popover"
74-
role="menu">
75-
<div class="s-popover--arrow"></div>
76-
<div class="s-popover--content">
77-
<div class="d-flex fd-column g12">
78-
<div class="d-flex ai-center jc-space-between g8">
79-
<label class="s-label fs-body1 fw-normal" for="toggle-theme-dark">Dark mode</label>
80-
<input class="s-toggle-switch" id="toggle-theme-dark" type="checkbox">
81-
</div>
82-
<div class="d-flex ai-center jc-space-between g8">
83-
<label class="s-label fs-body1 fw-normal" for="toggle-theme-custom">Custom theme</label>
84-
<input class="s-toggle-switch" id="toggle-theme-custom" type="checkbox">
85-
</div>
86-
<div class="d-flex ai-center jc-space-between g8">
87-
<label class="s-label fs-body1 fw-normal js-highcontrast-btn" for="toggle-theme-highcontrast">High contrast mode</label>
88-
<input class="s-toggle-switch" id="toggle-theme-highcontrast" type="checkbox">
89-
</div>
90-
</div>
91-
</div>
92-
</div>
93-
</div>
94-
</header>
1+
<header class="s-topbar stacks-topbar ps-fixed js-stacks-topbar print:d-none">
2+
<a href="#content" class="s-topbar--skip-link">Skip to main content</a>
3+
<div class="s-topbar--container px8">
4+
<a href="#" class="s-topbar--menu-btn d-none md:d-flex js-hamburger-btn"><span></span></a>
5+
<a class="s-topbar--logo" href="{{ "/" | url }}">
6+
<span class="v-visible-sr">Stacks home</span>
7+
{% embed "LogoGlyphMd", "native" %}
8+
</a>
9+
10+
{% if site-navigation %}
11+
<nav aria-label="Global" class="sm:d-none">
12+
<ul class="s-navigation ml8 fw-nowrap sm:d-none">
13+
{% assign slug = page.url | replace:'/',' ' | truncatewords: 2 | remove:'...' %}
14+
15+
{% for section in site-navigation.sections %}
16+
{% assign url = section.url | replace:'/',' ' | truncatewords: 2 | remove:'...' %}
17+
<li><a class="s-navigation--item{% if url == slug %} is-selected{% endif %}" href="{{ section.url }}" {% if url == slug %} aria-current="page"{% endif %}>{{ section.title }}</a></li>
18+
{% endfor %}
19+
</ul>
20+
</nav>
21+
{% endif %}
22+
23+
<ol class="s-topbar--content sm:ml0 overflow-hidden">
24+
<li>
25+
<a class="s-topbar--item sm:d-none" title="Stack Overflow" href="https://stackoverflow.com">
26+
{% embed "LogoGlyphSm" %}
27+
</a>
28+
</li>
29+
<li>
30+
<a class="s-topbar--item" title="Stacks on GitHub" href="https://github.com/StackExchange/Stacks">
31+
{% icon "GitHub", "", "24" %}
32+
</a>
33+
</li>
34+
<li>
35+
<a class="s-topbar--item" title="Stacks Template on Codepen" href="https://codepen.io/pen?template=wvmRgdp">
36+
<svg aria-hidden="true" class="svg-icon iconCodepen" width="24" height="24" viewBox="0 0 18 18"><path d="M12.67 8.17l-2.98-2v-3.2l5.38 3.6-2.4 1.6zM13.9 9l1.73-1.15v2.3L13.9 9zm-4.2 2.82l2.98-2 2.4 1.62-5.38 3.59v-3.2zm-4.36-2l2.98 2v3.2l-5.38-3.58 2.4-1.61zM4.1 9l-1.73 1.15v-2.3L4.1 9zm4.2-2.82l-2.98 2-2.4-1.62L8.3 2.97v3.2zm.7 4.45L6.57 9 9 7.37 11.43 9 9 10.63zm7.99-4.19l-.01-.05-.01-.04-.02-.05-.02-.03a.6.6 0 0 0-.02-.05l-.02-.03a.69.69 0 0 0-.15-.17L16.7 6h-.02L9.4 1.11a.69.69 0 0 0-.77 0L1.3 5.99h-.02c0 .02-.02.02-.03.03a.81.81 0 0 0-.12.13.69.69 0 0 0-.03.04l-.02.03-.02.05-.02.03-.02.05v.04L1 6.44v.03a.7.7 0 0 0-.01.1v4.87a.7.7 0 0 0 0 .09l.01.03.01.05.01.04.02.05.02.03a.51.51 0 0 0 .07.12.53.53 0 0 0 .08.1c.02 0 .03.02.04.03l.03.02h.02l7.3 4.88a.69.69 0 0 0 .77 0l7.31-4.87h.02c0-.02.02-.02.03-.03a.72.72 0 0 0 .04-.04l.02-.02a.62.62 0 0 0 .13-.19l.02-.03a.6.6 0 0 0 .02-.05v-.04l.02-.05v-.03a.7.7 0 0 0 .01-.1V6.57a.7.7 0 0 0 0-.09l-.01-.03z"/></svg>
37+
</a>
38+
</li>
39+
</ol>
40+
41+
<div class="s-topbar--searchbar w100 wmx3 sm:wmx-initial js-search" role="search">
42+
<div class="s-topbar--searchbar--input-group">
43+
<input id="searchbox" type="text" placeholder="Search Stacks…" value="" autocomplete="off" class="s-input s-input__search" />
44+
{% icon "Search", "s-input-icon s-input-icon__search" %}
45+
</div>
46+
</div>
47+
48+
<ol class="s-topbar--content ml0 sm:fl1 overflow-hidden">
49+
<li class="d-none sm:d-inline-flex ml-auto">
50+
<button class="s-topbar--item s-btn s-btn__unset c-pointer p8 ml-auto js-search-btn">
51+
{% icon "Search", "js-search-icon" %}
52+
{% icon "Clear", "d-none js-search-close-icon" %}
53+
</button>
54+
</li>
55+
<li>
56+
<button type="button" class="s-topbar--item s-btn s-btn__muted s-btn__icon s-btn__dropdown bar0 pr24"
57+
aria-controls="theming-popover"
58+
data-controller="s-popover"
59+
data-action="s-popover#toggle"
60+
data-s-popover-toggle-class="is-selected"
61+
data-s-popover-placement="bottom-end"
62+
title="Select a theme">
63+
{% icon "Theme", "", "24" %}
64+
</button>
65+
</li>
66+
</ol>
67+
68+
<div class="s-popover w-auto wmn-initial wmx-initial"
69+
id="theming-popover"
70+
role="menu">
71+
<div class="s-popover--arrow"></div>
72+
<div class="s-popover--content">
73+
<div class="d-flex fd-column g12">
74+
<div class="d-flex ai-center jc-space-between g8">
75+
<label class="s-label fs-body1 fw-normal" for="toggle-theme-dark">Dark mode</label>
76+
<input class="s-toggle-switch" id="toggle-theme-dark" type="checkbox">
77+
</div>
78+
<div class="d-flex ai-center jc-space-between g8">
79+
<label class="s-label fs-body1 fw-normal" for="toggle-theme-custom">Custom theme</label>
80+
<input class="s-toggle-switch" id="toggle-theme-custom" type="checkbox">
81+
</div>
82+
<div class="d-flex ai-center jc-space-between g8">
83+
<label class="s-label fs-body1 fw-normal js-highcontrast-btn" for="toggle-theme-highcontrast">High contrast mode</label>
84+
<input class="s-toggle-switch" id="toggle-theme-highcontrast" type="checkbox">
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</header>

0 commit comments

Comments
 (0)