Unverified Commit 3918f026 authored by David Haynes's avatar David Haynes
Browse files

Finish containers and indicators

- mostly formatting, some minor updates
parent 8e492d8c
Pipeline #1053 passed with stage
in 58 seconds
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<!-- Header content --> <!-- Header content -->
<head> <head>
<!-- Metatags --> <!-- Metatags -->
<meta charset="utf-8"> <meta charset="utf-8">
...@@ -37,6 +38,7 @@ ...@@ -37,6 +38,7 @@
</head> </head>
<!-- Body content --> <!-- Body content -->
<body> <body>
<!-- Define the navbar with the primary background color --> <!-- Define the navbar with the primary background color -->
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary fixed-top"> <nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary fixed-top">
...@@ -412,7 +414,8 @@ ...@@ -412,7 +414,8 @@
<small class="text-muted">with muted text</small> <small class="text-muted">with muted text</small>
</h3> </h3>
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor.</p> auctor.
</p>
</div> </div>
</div> </div>
...@@ -704,8 +707,8 @@ ...@@ -704,8 +707,8 @@
</form> </form>
</div> </div>
</div> </div>
<div class="col-lg-4 col-lg-offset-1">
<div class="col-lg-4 col-lg-offset-1">
<form class="bs-component"> <form class="bs-component">
<div class="form-group"> <div class="form-group">
...@@ -796,8 +799,7 @@ ...@@ -796,8 +799,7 @@
</div> </div>
</div> </div>
<!-- Navs <!-- Navs ================================================== -->
================================================== -->
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="row"> <div class="row">
...@@ -813,20 +815,26 @@ ...@@ -813,20 +815,26 @@
<div class="row" style="margin-bottom: 2rem;"> <div class="row" style="margin-bottom: 2rem;">
<div class="col-lg-6"> <div class="col-lg-6">
<h2 id="nav-tabs">Tabs</h2> <h2 id="nav-tabs">Tabs</h2>
<div class="bs-component"> <div class="bs-component">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a> <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a> <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" <a class="nav-link dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Dropdown</a> href="#" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="rounded dropdown-menu"> <div class="rounded dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Another action</a>
...@@ -836,6 +844,7 @@ ...@@ -836,6 +844,7 @@
</div> </div>
</li> </li>
</ul> </ul>
<div id="myTabContent" class="tab-content"> <div id="myTabContent" class="tab-content">
<div class="tab-pane fade active show in" id="home"> <div class="tab-pane fade active show in" id="home">
<p>Raw denim you probably haven't heard of them jean shorts Austin. <p>Raw denim you probably haven't heard of them jean shorts Austin.
...@@ -847,6 +856,7 @@ ...@@ -847,6 +856,7 @@
cardigan american apparel, butcher voluptate nisi qui. cardigan american apparel, butcher voluptate nisi qui.
</p> </p>
</div> </div>
<div class="tab-pane fade" id="profile"> <div class="tab-pane fade" id="profile">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla
single-origin coffee squid. Exercitation +1 labore velit, single-origin coffee squid. Exercitation +1 labore velit,
...@@ -856,6 +866,7 @@ ...@@ -856,6 +866,7 @@
shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
assumenda labore aesthetic magna delectus mollit.</p> assumenda labore aesthetic magna delectus mollit.</p>
</div> </div>
<div class="tab-pane fade" id="dropdown1"> <div class="tab-pane fade" id="dropdown1">
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they
sold out mcsweeney's organic lomo retro fanny pack lo-fi sold out mcsweeney's organic lomo retro fanny pack lo-fi
...@@ -864,6 +875,7 @@ ...@@ -864,6 +875,7 @@
salvia banksy hoodie helvetica. DIY synth PBR banksy irony. salvia banksy hoodie helvetica. DIY synth PBR banksy irony.
Leggings gentrify squid 8-bit cred pitchfork.</p> Leggings gentrify squid 8-bit cred pitchfork.</p>
</div> </div>
<div class="tab-pane fade" id="dropdown2"> <div class="tab-pane fade" id="dropdown2">
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy
art party before they sold out master cleanse gluten-free art party before they sold out master cleanse gluten-free
...@@ -871,7 +883,8 @@ ...@@ -871,7 +883,8 @@
seitan DIY, art party locavore wolf cliche high life echo seitan DIY, art party locavore wolf cliche high life echo
park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi
before they sold out farm-to-table VHS viral locavore cosby before they sold out farm-to-table VHS viral locavore cosby
sweater.</p> sweater.
</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -881,12 +894,15 @@ ...@@ -881,12 +894,15 @@
<h2 id="nav-pills">Pills</h2> <h2 id="nav-pills">Pills</h2>
<div class="bs-component"> <div class="bs-component">
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" <a class="nav-link dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Dropdown</a> href="#" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="rounded dropdown-menu"> <div class="rounded dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Another action</a>
...@@ -895,9 +911,11 @@ ...@@ -895,9 +911,11 @@
<a class="dropdown-item" href="#">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
...@@ -909,9 +927,11 @@ ...@@ -909,9 +927,11 @@
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#">Active</a> <a class="nav-link active" href="#">Active</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" <a class="nav-link dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Dropdown</a> href="#" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="rounded dropdown-menu"> <div class="rounded dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Another action</a>
...@@ -920,9 +940,11 @@ ...@@ -920,9 +940,11 @@
<a class="dropdown-item" href="#">Separated link</a> <a class="dropdown-item" href="#">Separated link</a>
</div> </div>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a> <a class="nav-link disabled" href="#">Disabled</a>
</li> </li>
...@@ -935,13 +957,16 @@ ...@@ -935,13 +957,16 @@
<div class="col-lg-6"> <div class="col-lg-6">
<h2 id="nav-breadcrumbs">Breadcrumbs</h2> <h2 id="nav-breadcrumbs">Breadcrumbs</h2>
<div class="bs-component"> <div class="bs-component">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item active">Home</li> <li class="breadcrumb-item active">Home</li>
</ol> </ol>
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Library</li> <li class="breadcrumb-item active">Library</li>
</ol> </ol>
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li>
...@@ -950,7 +975,7 @@ ...@@ -950,7 +975,7 @@
</div> </div>
</div> </div>
<!--<div class="col-lg-6"> <div class="col-lg-6">
<h2 id="pagination">Pagination</h2> <h2 id="pagination">Pagination</h2>
<div class="bs-component"> <div class="bs-component">
<div> <div>
...@@ -1032,12 +1057,11 @@ ...@@ -1032,12 +1057,11 @@
</div> </div>
</div> </div>
</div>--> </div>
</div> </div>
</div> </div>
<!-- Indicators <!-- Indicators ================================================== -->
================================================== -->
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="row"> <div class="row">
...@@ -1055,43 +1079,57 @@ ...@@ -1055,43 +1079,57 @@
<h2>Alerts</h2> <h2>Alerts</h2>
<div class="bs-component"> <div class="bs-component">
<div class="alert alert-dismissible alert-warning"> <div class="alert alert-dismissible alert-warning">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">
&times;
</button>
<h4>Warning!</h4> <h4>Warning!</h4>
<p>Best check yo self, you're not looking too good. Nulla vitae <p>Best check yo self, you're not looking too good. Nulla vitae
elit libero, a pharetra augue. Praesent commodo cursus magna, elit libero, a pharetra augue. Praesent commodo cursus magna,
<a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p> <a href="#" class="alert-link">vel scelerisque nisl consectetur
et</a>.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4">
<div class="bs-component"> <div class="bs-component">
<div class="alert alert-dismissible alert-danger"> <div class="alert alert-dismissible alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. &times;
</button>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change
a few things up</a> and try submitting again.
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<div class="bs-component"> <div class="bs-component">
<div class="alert alert-dismissible alert-success"> <div class="alert alert-dismissible alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close" data-dismiss="alert">
&times;
</button>
<strong>Well done!</strong> You successfully read <a href="#" <strong>Well done!</strong> You successfully read <a href="#"
class="alert-link">this important alert message</a>. class="alert-link">this important alert message</a>.
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<div class="bs-component"> <div class="bs-component">
<div class="alert alert-dismissible alert-info"> <div class="alert alert-dismissible alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button> <button type="button" class="close"
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, data-dismiss="alert">&times;</button>
<strong>Heads up!</strong> This <a href="#"
class="alert-link">alert needs your attention</a>,
but it's not super important. but it's not super important.
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<h2>Badges</h2> <h2>Badges</h2>
<div class="bs-component" style="margin-bottom: 40px;"> <div class="bs-component" style="margin-bottom: 40px;">
...@@ -1102,6 +1140,7 @@ ...@@ -1102,6 +1140,7 @@
<span class="badge badge-danger">Danger</span> <span class="badge badge-danger">Danger</span>
<span class="badge badge-info">Info</span> <span class="badge badge-info">Info</span>
</div> </div>
<div class="bs-component"> <div class="bs-component">
<span class="badge badge-pill badge-default">Default</span> <span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill badge-primary">Primary</span> <span class="badge badge-pill badge-primary">Primary</span>
...@@ -1113,8 +1152,7 @@ ...@@ -1113,8 +1152,7 @@
</div> </div>
</div> </div>
<!-- Progress <!-- Progress ================================================== -->
================================================== -->
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="row"> <div class="row">
...@@ -1125,10 +1163,18 @@ ...@@ -1125,10 +1163,18 @@
</h1> </h1>
</div> </div>
<h3 id="progress-tiny">Controlled Size</h3>
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width: 15%; height: 1px;" aria-valuenow="15"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<h3 id="progress-basic">Basic</h3> <h3 id="progress-basic">Basic</h3>
<div class="bs-component"> <div class="bs-component">
<div class="progress"> <div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%; height: 20px;" aria-valuenow="25" <div class="progress-bar" role="progressbar"
style="width: 25%; height: 20px;" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100"></div> aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
</div> </div>
...@@ -1200,8 +1246,7 @@ ...@@ -1200,8 +1246,7 @@
</div> </div>
</div> </div>
<!-- Containers <!-- Containers ================================================== -->
================================================== -->
<div class="bs-docs-section"> <div class="bs-docs-section">
<div class="row"> <div class="row">
...@@ -1222,7 +1267,6 @@ ...@@ -1222,7 +1267,6 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<h2>List groups</h2> <h2>List groups</h2>
...@@ -1233,18 +1277,25 @@ ...@@ -1233,18 +1277,25 @@
<div class="col-lg-4"> <div class="col-lg-4">
<div class="bs-component"> <div class="bs-component">
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item">
<span class="tag tag-default tag-pill float-xs-right">14</span> Cras justo odio <li class="list-group-item justify-content-between">
Cras justo odio
<span class="badge badge-default badge-pill">14</span>
</li> </li>
<li class="list-group-item">
<span class="tag tag-default tag-pill float-xs-right">2</span> Dapibus ac facilisis in <li class="list-group-item justify-content-between">
Dapibus ac facilisis in
<span class="badge badge-default badge-pill">2</span>
</li> </li>
<li class="list-group-item">
<span class="tag tag-default tag-pill float-xs-right">1</span> Morbi leo risus <li class="list-group-item justify-content-between">
Morbi leo risus
<span class="badge badge-default badge-pill">1</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<div class="bs-component"> <div class="bs-component">
<div class="list-group"> <div class="list-group">
...@@ -1258,14 +1309,17 @@ ...@@ -1258,14 +1309,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-4"> <div class="col-lg-4">
<div class="bs-component"> <div class="bs-component">
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item list-group-item-action active"> <a href="#" class="list-group-item list-group-item-action active">
<h4 class="list-group-item-heading">List group item heading</h4> <h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas
sed diam eget risus varius blandit.</p> sed diam eget risus varius blandit.</p>
</a> </a>
<a href="#" class="list-group-item list-group-item-action"> <a href="#" class="list-group-item list-group-item-action">
<h4 class="list-group-item-heading">List group item heading</h4> <h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas
...@@ -1275,12 +1329,18 @@ ...@@ -1275,12 +1329,18 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- Cards ================================================== -->
<div class="bs-docs-section">
<!-- Cards
================================================== -->
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<h1 id="cards">Cards</h1> <div class="page-header">
<h1 id="cards">Cards
<hr />
</h1>
</div> </div>
</div> </div>
...@@ -1407,7 +1467,7 @@ ...@@ -1407,7 +1467,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<!-- Dialogs <!-- Dialogs
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment