Unverified Commit 40a0b7ca authored by David Haynes's avatar David Haynes
Browse files

Sex up the navigation menu -- now a sidebar that scrolls

- handy navigation menu follows you around
- removes itself when screen gets too small
parent e672383d
Pipeline #1045 passed with stage
in 57 seconds
......@@ -204,3 +204,72 @@ pre {
text-align: center
}
}
/*
* Style tweaks
* --------------------------------------------------
*/
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 70px;
}
footer {
padding: 30px 0;
}
/*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -100%; /* 12 columns */
}
.row-offcanvas-right.active
.sidebar-offcanvas {
right: -50%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -100%; /* 12 columns */
}
.row-offcanvas-left.active
.sidebar-offcanvas {
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%; /* 6 columns */
}
}
......@@ -2,6 +2,7 @@
<!DOCTYPE html>
<html lang="en">
<!-- Header content -->
<head>
<!-- Metatags -->
<meta charset="utf-8">
......@@ -37,31 +38,30 @@
</head>
<!-- Body content -->
<body>
<!-- Define the navbar with the primary background color -->
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary fixed-top">
<!-- Responsive toggle button -->
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target=".dual-collapse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".dual-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Containter for main navbar content -->
<div class="container">
<!-- Brand logo + title -->
<a class="navbar-brand d-flex mx-auto" href="#">
<img src="/assets/img/SRCT_square.svg" width="30" height="30"
class="d-inline-block align-top">&nbsp;&nbsp;Masonstrap&nbsp;&nbsp;
<img src="/assets/img/SRCT_square.svg" width="30" height="30" class="d-inline-block align-top">&nbsp;&nbsp;Masonstrap&nbsp;&nbsp;
</a>
<!-- Elements that will be collapsed in responsive mode -->
<div class="navbar-collapse collapse dual-collapse">
<!-- Unordered list of elements -->
<ul class="navbar-nav mr-auto">
<!-- Example nav-item -->
<li class="nav-item">
<a class="nav-link" href="">Example nav-link</a>
......@@ -69,10 +69,9 @@
<!-- Example dropdown including links to source files -->
<li class="nav-item dropdown">
<!-- Dropdown for source files -->
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
id="download">Source files<span class="caret"></span>
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Source files<span class="caret"></span>
</a>
<!-- Rounded dropdown-menu -->
......@@ -80,31 +79,27 @@
<!-- Example dropdown-item -->
<a class="dropdown-item" href="#">Open in JSFiddle (TODO)</a>
<!-- Divider divides content in the dropdown-menu -->
<div class="dropdown-divider"></div>
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/masonstrap.min.css"
target="_blank">masonstrap.min.css
<a class="dropdown-item" href="/masonstrap/masonstrap.min.css" target="_blank">masonstrap.min.css
</a>
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/masonstrap.css"
target="_blank">masonstrap.css
<a class="dropdown-item" href="/masonstrap/masonstrap.css" target="_blank">masonstrap.css
</a>
<!-- Divider divides content in the dropdown-menu -->
<div class="dropdown-divider"></div>
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/_variables.scss"
target="_blank">_variables.scss
<a class="dropdown-item" href="/masonstrap/_variables.scss" target="_blank">_variables.scss
</a>
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/_masonstrap.scss"
target="_blank">_masonstrap.scss
<!-- Example dropdown-item -->
<a class="dropdown-item" href="/masonstrap/_masonstrap.scss" target="_blank">_masonstrap.scss
</a>
</div>
</li>
......@@ -130,748 +125,730 @@
<!-- Begin giant container for the entirety of the page content -->
<div class="container">
<div class="page-header" id="banner">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-6">
<h1>Masonstrap</h1>
<h4 id="version"></h4>
<br />
<p class="lead">Easily provide any web project with Mason branding.</p>
</div>
<div class="row row-offcanvas row-offcanvas-right">
</div>
<div class="col-12 col-md-9">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4">
<div class="list-group table-of-contents">
<a class="list-group-item list-group-item-action" href="#navbars">Navbars</a>
<a class="list-group-item list-group-item-action" href="#buttons">Buttons</a>
<a class="list-group-item list-group-item-action" href="#typography">Typography</a>
<a class="list-group-item list-group-item-action" href="#tables">Tables</a>
<a class="list-group-item list-group-item-action" href="#forms">Forms</a>
<a class="list-group-item list-group-item-action" href="#navs">Navs</a>
<a class="list-group-item list-group-item-action" href="#indicators">Indicators</a>
<a class="list-group-item list-group-item-action" href="#progress">Progress</a>
<a class="list-group-item list-group-item-action" href="#containers">Containers</a>
<a class="list-group-item list-group-item-action" href="#cards">Cards</a>
<a class="list-group-item list-group-item-action" href="#dialogs">Dialogs</a>
</div>
</div>
</div>
<br />
<h1>Masonstrap</h1>
<h4 id="version"></h4>
<br />
<p class="lead">Easily provide any web project with Mason branding.</p>
</div>
<!-- Navbar
<!-- Navbar
================================================== -->
<div class="bs-docs-section clearfix">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="navbars">Navbars
<hr />
</h1>
</div>
<div class="bs-docs-section clearfix">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="navbars">Navbars
<hr />
</h1>
</div>
<div class="bs-component">
<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<div class="bs-component">
<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</nav>
</div>
<div class="bs-component">
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<div class="bs-component">
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Buttons
<!-- Buttons
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<div class="row">
<div class="col-lg-12">
<h1 id="buttons">Buttons
<hr />
</h1>
<div class="bs-docs-section">
<div class="page-header">
<div class="row">
<div class="col-lg-12">
<h1 id="buttons">Buttons
<hr />
</h1>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7">
<p class="bs-component">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<p class="bs-component">
<button type="button" class="btn btn-primary disabled">Primary</button>
<button type="button" class="btn btn-secondary disabled">Secondary</button>
<button type="button" class="btn btn-success disabled">Success</button>
<button type="button" class="btn btn-info disabled">Info</button>
<button type="button" class="btn btn-warning disabled">Warning</button>
<button type="button" class="btn btn-danger disabled">Danger</button>
<button type="button" class="btn btn-link disabled">Link</button>
</p>
<p class="bs-component">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
</p>
<div class="bs-component">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">Primary</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"></button>
<div class="rounded dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<div class="row">
<div class="col-lg-7">
<p class="bs-component">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<p class="bs-component">
<button type="button" class="btn btn-primary disabled">Primary</button>
<button type="button" class="btn btn-secondary disabled">Secondary</button>
<button type="button" class="btn btn-success disabled">Success</button>
<button type="button" class="btn btn-info disabled">Info</button>
<button type="button" class="btn btn-warning disabled">Warning</button>
<button type="button" class="btn btn-danger disabled">Danger</button>
<button type="button" class="btn btn-link disabled">Link</button>
</p>
<p class="bs-component">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
</p>
<div class="bs-component">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">Primary</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"></button>
<div class="rounded dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-success">Success</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"></button>
<div class="rounded dropdown-menu" aria-labelledby="btnGroupDrop2">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-success">Success</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"></button>
<div class="rounded dropdown-menu" aria-labelledby="btnGroupDrop2">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-info">Info</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"></button>
<div class="rounded dropdown-menu" aria-labelledby="btnGroupDrop3">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-info">Info</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"></button>
<div class="rounded dropdown-menu" aria-labelledby="btnGroupDrop3">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</div>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-danger">Danger</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"></button>
<div class="rounded dropdown-menu" aria-labelledby="btnGroupDrop4">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-danger">Danger</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"></button>
<div class="rounded dropdown-menu" aria-labelledby="btnGroupDrop4">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bs-component">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
</div>
<div class="bs-component">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
</div>
</div>
<div class="col-lg-5">
</div>
<div class="col-lg-5">
<p class="bs-component">
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
</p>
<p class="bs-component">
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
</p>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Checkbox 1
</label>
<label class="btn btn-primary">
<label class="btn btn-primary">
<input type="checkbox"> Checkbox 2
</label>
<label class="btn btn-primary">
<label class="btn btn-primary">
<input type="checkbox"> Checkbox 3
</label>
</div>
</div>
</div>
</div>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Radio 1
</label>
<label class="btn btn-primary">
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Radio 2
</label>
<label class="btn btn-primary">
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Radio 3
</label>
</div>
</div>
<div class="bs-component">
<div class="btn-group-vertical" data-toggle="buttons">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
</div>
</div>
</div>
<div class="bs-component" style="margin-bottom: 15px;">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">