Skip to content

Commit

Permalink
feat(essentials): add standards collapsible searchforms
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed Jul 10, 2019
1 parent 1a60fda commit a825d22
Showing 1 changed file with 131 additions and 43 deletions.
174 changes: 131 additions & 43 deletions site/docs/4.3/essentials/global-headers/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,9 +188,11 @@ <h3 class="mt-5" id="web-glh-nic-001">
</a>
<ul class="navbar-nav d-lg-none flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<button type="button" class="nav-link btn btn-link mx-sm-3 mx-2 p-0 icon svg-search"
data-toggle="collapse" data-target="#search-1"
aria-expanded="false" aria-controls="search-1">
<span class="sr-only">Search bar</span>
</a>
</button>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-mail">
Expand Down Expand Up @@ -302,9 +304,11 @@ <h3 class="mt-5" id="web-glh-nic-001">
</div>
<ul class="navbar-nav d-none d-lg-flex flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<button type="button" class="nav-link btn btn-link mx-sm-3 mx-2 p-0 icon svg-search"
data-toggle="collapse" data-target="#search-1"
aria-expanded="false" aria-controls="search-1">
<span class="sr-only">Search bar</span>
</a>
</button>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-mail">
Expand All @@ -324,6 +328,15 @@ <h3 class="mt-5" id="web-glh-nic-001">
</ul>
</div>
</nav>
<div class="collapse bg-dark" id="search-1">
<form class="container d-flex py-3" role="search">
<input type="search" class="form-control form-control-lg bg-dark border-right-0 border-muted" placeholder="Search" aria-label="Search">
<button class="btn btn-inverse btn-dark btn-xlg border-left-0 border-muted align-self-stretch d-flex pl-0 pr-4" type="submit">
<span class="icon svg-search" aria-hidden="true"></span>
<span class="sr-only">Search</span>
</button>
</form>
</div>

<div class="container">
<h3 id="a11y-suggestion" class="mt-5">
Expand Down Expand Up @@ -492,9 +505,11 @@ <h3 id="a11y-suggestion" class="mt-5">
</div>
<ul class="navbar-nav flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<button type="button" class="nav-link btn btn-link mx-sm-3 mx-2 p-0 icon svg-search"
data-toggle="collapse" data-target="#search-2"
aria-expanded="false" aria-controls="search-2">
<span class="sr-only">Search bar</span>
</a>
</button>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-mail">
Expand All @@ -514,6 +529,15 @@ <h3 id="a11y-suggestion" class="mt-5">
</ul>
</div>
</nav>
<div class="collapse bg-dark" id="search-2">
<form class="container d-flex py-3" role="search">
<input type="search" class="form-control form-control-lg bg-dark border-right-0 border-muted" placeholder="Search" aria-label="Search">
<button class="btn btn-inverse btn-dark btn-xlg border-left-0 border-muted align-self-stretch d-flex pl-0 pr-4" type="submit">
<span class="icon svg-search" aria-hidden="true"></span>
<span class="sr-only">Search</span>
</button>
</form>
</div>

<div class="container">
<h3 class="mt-5" id="web-glh-nic-002">
Expand All @@ -532,9 +556,11 @@ <h3 class="mt-5" id="web-glh-nic-002">
</a>
<ul class="navbar-nav d-lg-none flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<button type="button" class="nav-link btn btn-link mx-sm-3 mx-2 p-0 icon svg-search"
data-toggle="collapse" data-target="#search-3"
aria-expanded="false" aria-controls="search-3">
<span class="sr-only">Search bar</span>
</a>
</button>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-mail">
Expand Down Expand Up @@ -655,9 +681,11 @@ <h3 class="mt-5" id="web-glh-nic-002">
</div>
<ul class="navbar-nav d-none d-lg-flex flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<button type="button" class="nav-link btn btn-link mx-sm-3 mx-2 p-0 icon svg-search"
data-toggle="collapse" data-target="#search-3"
aria-expanded="false" aria-controls="search-3">
<span class="sr-only">Search bar</span>
</a>
</button>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-mail">
Expand All @@ -679,6 +707,15 @@ <h3 class="mt-5" id="web-glh-nic-002">
</ul>
</div>
</nav>
<div class="collapse bg-dark" id="search-3">
<form class="container d-flex py-3" role="search">
<input type="search" class="form-control form-control-lg bg-dark border-right-0 border-muted" placeholder="Search" aria-label="Search">
<button class="btn btn-inverse btn-dark btn-xlg border-left-0 border-muted align-self-stretch d-flex pl-0 pr-4" type="submit">
<span class="icon svg-search" aria-hidden="true"></span>
<span class="sr-only">Search</span>
</button>
</form>
</div>
</header>

<div class="container">
Expand All @@ -698,9 +735,11 @@ <h3 class="mt-5" id="web-glh-min-001">
</a>
<ul class="navbar-nav d-lg-none flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<button type="button" class="nav-link btn btn-link mx-sm-3 mx-2 p-0 icon svg-search"
data-toggle="collapse" data-target="#search-4"
aria-expanded="false" aria-controls="search-4">
<span class="sr-only">Search bar</span>
</a>
</button>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-mail">
Expand Down Expand Up @@ -803,9 +842,11 @@ <h3 class="mt-5" id="web-glh-min-001">
</div>
<ul class="navbar-nav d-none d-lg-flex flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<button type="button" class="nav-link btn btn-link mx-sm-3 mx-2 p-0 icon svg-search"
data-toggle="collapse" data-target="#search-4"
aria-expanded="false" aria-controls="search-4">
<span class="sr-only">Search bar</span>
</a>
</button>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-mail">
Expand All @@ -827,6 +868,15 @@ <h3 class="mt-5" id="web-glh-min-001">
</ul>
</div>
</nav>
<div class="collapse bg-dark" id="search-4">
<form class="container d-flex py-3" role="search">
<input type="search" class="form-control form-control-lg bg-dark border-right-0 border-muted" placeholder="Search" aria-label="Search">
<button class="btn btn-inverse btn-dark btn-xlg border-left-0 border-muted align-self-stretch d-flex pl-0 pr-4" type="submit">
<span class="icon svg-search" aria-hidden="true"></span>
<span class="sr-only">Search</span>
</button>
</form>
</div>
</header>

<div class="container">
Expand Down Expand Up @@ -994,9 +1044,11 @@ <h3 class="mt-5" id="web-glh-tni-001">
<a href="#" class="navbar-title display-4 text-white mt-2 mt-md-auto ml-2 pl-0 pl-md-1 mr-auto">Design</a>
<ul class="navbar-nav d-lg-none flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<button type="button" class="nav-link btn btn-link mx-sm-3 mx-2 p-0 icon svg-search"
data-toggle="collapse" data-target="#search-6"
aria-expanded="false" aria-controls="search-6">
<span class="sr-only">Search bar</span>
</a>
</button>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-avatar">
Expand All @@ -1017,9 +1069,11 @@ <h3 class="mt-5" id="web-glh-tni-001">
</div>
<ul class="navbar-nav d-none d-lg-flex flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<button type="button" class="nav-link btn btn-link mx-sm-3 mx-2 p-0 icon svg-search"
data-toggle="collapse" data-target="#search-6"
aria-expanded="false" aria-controls="search-6">
<span class="sr-only">Search bar</span>
</a>
</button>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link ml-sm-3 ml-2 p-0 icon svg-avatar">
Expand All @@ -1029,6 +1083,15 @@ <h3 class="mt-5" id="web-glh-tni-001">
</ul>
</div>
</nav>
<div class="collapse bg-dark" id="search-6">
<form class="container d-flex py-3" role="search">
<input type="search" class="form-control form-control-lg bg-dark border-right-0 border-muted" placeholder="Search" aria-label="Search">
<button class="btn btn-inverse btn-dark btn-xlg border-left-0 border-muted align-self-stretch d-flex pl-0 pr-4" type="submit">
<span class="icon svg-search" aria-hidden="true"></span>
<span class="sr-only">Search</span>
</button>
</form>
</div>
</header>

<div class="container">
Expand All @@ -1047,34 +1110,24 @@ <h3 class="mt-5" id="web-glh-tni-002">
<img src="/docs/4.3/dist/img/orange_logo.svg" alt="Back to homepage" title="Back to homepage">
</a>
<a href="#" class="navbar-title display-4 text-white mt-2 mt-md-auto ml-2 pl-0 pl-md-1">Design</a>
<ul class="navbar-nav d-lg-none flex-row mb-md-0 mb-auto ml-auto">
<ul class="navbar-nav flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<button type="button" class="nav-link btn btn-link mx-sm-3 mx-2 p-0 icon svg-search"
data-toggle="collapse" data-target="#search-7"
aria-expanded="false" aria-controls="search-7">
<span class="sr-only">Search bar</span>
</a>
</button>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-avatar">
<a href="#" class="nav-link ml-sm-3 ml-2 p-0 icon svg-avatar">
<span class="sr-only">My account</span>
</a>
</li>
</ul>
<button class="navbar-toggler d-sm-block d-md-none mb-md-0 mt-md-auto ml-2 ml-md-3 collapsed" type="button"
<button class="navbar-toggler d-block d-md-none mb-md-0 mt-md-auto ml-2 ml-md-3 collapsed" type="button"
data-toggle="collapse" data-target="#collapsing-navbar5" aria-controls="collapsing-navbar5" aria-expanded="false" aria-label="Toggle navigation">
<span aria-hidden="true" class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav d-none d-lg-flex flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<span class="sr-only">Search bar</span>
</a>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link ml-sm-3 ml-2 p-0 icon svg-avatar">
<span class="sr-only">My account</span>
</a>
</li>
</ul>
<hr class="w-100 mb-2 d-none d-md-block border-700"/>
<div class="navbar-collapse justify-content-between collapse"
id="collapsing-navbar5">
Expand All @@ -1101,6 +1154,15 @@ <h3 class="mt-5" id="web-glh-tni-002">
</div>
</div>
</nav>
<div class="collapse bg-dark" id="search-7">
<form class="container d-flex py-3" role="search">
<input type="search" class="form-control form-control-lg bg-dark border-right-0 border-muted" placeholder="Search" aria-label="Search">
<button class="btn btn-inverse btn-dark btn-xlg border-left-0 border-muted align-self-stretch d-flex pl-0 pr-4" type="submit">
<span class="icon svg-search" aria-hidden="true"></span>
<span class="sr-only">Search</span>
</button>
</form>
</div>
</header>

<div class="container">
Expand All @@ -1121,9 +1183,11 @@ <h3 class="mt-5" id="web-glh-tni-003">
<a href="#" class="navbar-title display-5 text-white mt-md-auto ml-2 pl-0 pl-md-1 mr-auto">Orange Labs<br>Prime Zone</a>
<ul class="navbar-nav d-lg-none flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<button type="button" class="nav-link btn btn-link mx-sm-3 mx-2 p-0 icon svg-search"
data-toggle="collapse" data-target="#search-8"
aria-expanded="false" aria-controls="search-8">
<span class="sr-only">Search bar</span>
</a>
</button>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-avatar">
Expand All @@ -1145,9 +1209,11 @@ <h3 class="mt-5" id="web-glh-tni-003">
</div>
<ul class="navbar-nav d-none d-lg-flex flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<button type="button" class="nav-link btn btn-link mx-sm-3 mx-2 p-0 icon svg-search"
data-toggle="collapse" data-target="#search-8"
aria-expanded="false" aria-controls="search-8">
<span class="sr-only">Search bar</span>
</a>
</button>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link ml-sm-3 ml-2 p-0 icon svg-avatar">
Expand All @@ -1157,6 +1223,15 @@ <h3 class="mt-5" id="web-glh-tni-003">
</ul>
</div>
</nav>
<div class="collapse bg-dark" id="search-8">
<form class="container d-flex py-3" role="search">
<input type="search" class="form-control form-control-lg bg-dark border-right-0 border-muted" placeholder="Search" aria-label="Search">
<button class="btn btn-inverse btn-dark btn-xlg border-left-0 border-muted align-self-stretch d-flex pl-0 pr-4" type="submit">
<span class="icon svg-search" aria-hidden="true"></span>
<span class="sr-only">Search</span>
</button>
</form>
</div>
</header>

<div class="container">
Expand All @@ -1177,9 +1252,11 @@ <h3 class="mt-5" id="web-glh-obs-001">
<a href="#" class="navbar-title display-8 display-obs text-white mt-md-auto mr-auto">Business<br>Services</a>
<ul class="navbar-nav d-lg-none flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<button type="button" class="nav-link btn btn-link mx-sm-3 mx-2 p-0 icon svg-search"
data-toggle="collapse" data-target="#search-9"
aria-expanded="false" aria-controls="search-9">
<span class="sr-only">Search bar</span>
</a>
</button>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-avatar">
Expand All @@ -1202,9 +1279,11 @@ <h3 class="mt-5" id="web-glh-obs-001">
</div>
<ul class="navbar-nav d-none d-lg-flex flex-row mb-md-0 mb-auto ml-auto">
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link mx-sm-3 mx-2 p-0 icon svg-search">
<button type="button" class="nav-link btn btn-link mx-sm-3 mx-2 p-0 icon svg-search"
data-toggle="collapse" data-target="#search-9"
aria-expanded="false" aria-controls="search-9">
<span class="sr-only">Search bar</span>
</a>
</button>
</li>
<li class="nav-item border-0 px-1 px-sm-0">
<a href="#" class="nav-link ml-sm-3 ml-2 p-0 icon svg-avatar">
Expand All @@ -1214,6 +1293,15 @@ <h3 class="mt-5" id="web-glh-obs-001">
</ul>
</div>
</nav>
<div class="collapse bg-dark" id="search-9">
<form class="container d-flex py-3" role="search">
<input type="search" class="form-control form-control-lg bg-dark border-right-0 border-muted" placeholder="Search" aria-label="Search">
<button class="btn btn-inverse btn-dark btn-xlg border-left-0 border-muted align-self-stretch d-flex pl-0 pr-4" type="submit">
<span class="icon svg-search" aria-hidden="true"></span>
<span class="sr-only">Search</span>
</button>
</form>
</div>
</header>

<div class="container">
Expand Down

0 comments on commit a825d22

Please sign in to comment.