andrewdds
GitHub
commit
ccb780e843
@ -14,6 +14,7 @@
|
||||
@import 'components/empty_state';
|
||||
|
||||
@import 'sections/main';
|
||||
@import 'sections/navigation';
|
||||
@import 'sections/topbar';
|
||||
@import 'sections/sidenav';
|
||||
@import 'sections/footer';
|
||||
@import 'sections/login';
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
@include media($medium-screen) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -3,8 +3,9 @@
|
||||
* ===================================================
|
||||
*/
|
||||
|
||||
// Standard gap
|
||||
$gap: .8rem; // 8px at 10px $em-base
|
||||
$gap: .8rem; // 8px at 10px $em-base
|
||||
$topbar-height: 4.8rem;
|
||||
|
||||
|
||||
|
||||
/*
|
||||
@ -110,7 +111,8 @@ $color-transparent: rgba(#000, 0);
|
||||
// Mobile First Breakpoints
|
||||
$small-screen: 481px;
|
||||
$medium-screen: 600px;
|
||||
$large-screen: 1201px;
|
||||
$large-screen: 800px;
|
||||
$xlarge-screen: 1200px;
|
||||
|
||||
// Grid column counts by screen size
|
||||
$grid-columns-small: 1;
|
||||
|
||||
@ -9,11 +9,6 @@
|
||||
border-bottom-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
margin-bottom: $site-margins-mobile * 2;
|
||||
|
||||
@include media($medium-screen) {
|
||||
margin-bottom: $site-margins * 2;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin panel-theme-default {
|
||||
@ -21,9 +16,18 @@
|
||||
border-bottom-color: $color-gray-light;
|
||||
}
|
||||
|
||||
@mixin panel-margin {
|
||||
margin-bottom: $site-margins-mobile * 2;
|
||||
|
||||
@include media($medium-screen) {
|
||||
margin-bottom: $site-margins * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
@include panel-base;
|
||||
@include panel-theme-default;
|
||||
@include panel-margin;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@ -22,3 +22,13 @@ h1 {
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
a,
|
||||
a > span {
|
||||
transition:
|
||||
background 0.2s,
|
||||
border 0.2s,
|
||||
box-shadow 0.2s,
|
||||
color 0.2s,
|
||||
}
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
.usa-header {
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.usa-navbar {
|
||||
height: 5rem;
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
.usa-nav {
|
||||
padding-top: 1rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.usa-nav-primary {
|
||||
|
||||
li:last-child {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
}
|
||||
85
scss/sections/_sidenav.scss
Normal file
85
scss/sections/_sidenav.scss
Normal file
@ -0,0 +1,85 @@
|
||||
.sidenav {
|
||||
@include grid-pad;
|
||||
@include panel-margin;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include media($large-screen) {
|
||||
width: 21rem;
|
||||
}
|
||||
|
||||
.sidenav__link {
|
||||
display: block;
|
||||
border-top: 1px solid $color-black;
|
||||
padding: $gap ($gap * 2);
|
||||
color: $color-black;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-white;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
&.sidenav__link--disabled {
|
||||
color: $color-shadow;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.sidenav__link--active {
|
||||
@include h4;
|
||||
background-color: $color-white;
|
||||
color: $color-primary;
|
||||
box-shadow: inset .4rem 0 0 0 $color-primary;
|
||||
|
||||
+ ul {
|
||||
background-color: $color-white;
|
||||
|
||||
.sidenav__link {
|
||||
&.sidenav__link--active {
|
||||
@include h5;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+ ul {
|
||||
li {
|
||||
.sidenav__link {
|
||||
padding: ($gap * .75) ($gap * 3);
|
||||
border: 0;
|
||||
@include h5;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.sidenav__link {
|
||||
padding-bottom: $gap * 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
> ul {
|
||||
> li {
|
||||
&:last-child {
|
||||
> .sidenav__link {
|
||||
border-bottom: 1px solid $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
54
scss/sections/_topbar.scss
Normal file
54
scss/sections/_topbar.scss
Normal file
@ -0,0 +1,54 @@
|
||||
.topbar {
|
||||
background-color: $color-white;
|
||||
height: $topbar-height;
|
||||
border-bottom: 1px solid $color-black;
|
||||
|
||||
.topbar__navigation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: flex-end;
|
||||
|
||||
> .topbar__link {
|
||||
@include h5;
|
||||
color: $color-primary;
|
||||
display: inline-block;
|
||||
height: $topbar-height;
|
||||
line-height: $topbar-height;
|
||||
padding: 0 ($gap * 2);
|
||||
text-decoration: none;
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
height: $topbar-height;
|
||||
line-height: $topbar-height;
|
||||
}
|
||||
|
||||
&.topbar__link--primary {
|
||||
margin-right: auto;
|
||||
> span {
|
||||
@include nav-border;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
background-color: $color-primary-darkest;
|
||||
}
|
||||
}
|
||||
|
||||
&.topbar__link--secondary {
|
||||
font-weight: normal;
|
||||
> span {
|
||||
@include nav-border;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> span {
|
||||
@include nav-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -14,6 +14,8 @@
|
||||
{% include 'header.html.to' %}
|
||||
|
||||
<div class='panel-container'>
|
||||
{% block sidenav %}{% end %}
|
||||
|
||||
{% block content %}
|
||||
these are not the droids you are looking for
|
||||
{% end %}
|
||||
|
||||
@ -1,35 +1,11 @@
|
||||
<header class="usa-header usa-header-basic" role="banner">
|
||||
<div class="usa-nav-container">
|
||||
<div class="usa-navbar">
|
||||
<div class="usa-logo" id="basic-logo">
|
||||
<em class="usa-logo-text">
|
||||
<a href="/" title="Home" aria-label="Home">JEDI</a>
|
||||
</em>
|
||||
</div>
|
||||
</div>
|
||||
<header class="topbar">
|
||||
<nav class="topbar__navigation">
|
||||
<a href="/" class="topbar__link topbar__link--primary">
|
||||
<span>JEDI</span>
|
||||
</a>
|
||||
|
||||
<nav role="navigation" class="usa-nav">
|
||||
<ul class="usa-nav-primary usa-accordion">
|
||||
{% for item in [
|
||||
['home', 'Home'],
|
||||
['workspaces', 'Workspaces'],
|
||||
['requests', 'Requests'],
|
||||
['users', 'Users' ],
|
||||
['reports', 'Reports' ],
|
||||
]
|
||||
%}
|
||||
<li>
|
||||
{% if item[0]==page %}
|
||||
<a class="usa-nav-link usa-current" href='{{ reverse_url(item[0]) }}'><span>{{ item[1] }}</span></a>
|
||||
{% else %}
|
||||
<a class="usa-nav-link" href='{{ reverse_url(item[0]) }}'><span>{{ item[1] }}</span></a>
|
||||
{% end %}
|
||||
</li>
|
||||
{% end %}
|
||||
|
||||
<li>Tech Lead</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
<a href="/" class="topbar__link topbar__link--secondary">
|
||||
<span>Tech Lead</span>
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@ -1,28 +1,47 @@
|
||||
{% extends "base.html.to" %}
|
||||
|
||||
{% block sidenav %}
|
||||
<nav class='sidenav'>
|
||||
<ul>
|
||||
<li>
|
||||
<a href='/' class='sidenav__link sidenav__link--active' aria-current='true'>Navigation Item</a>
|
||||
<ul>
|
||||
<li><a href='/' class='sidenav__link sidenav__link--active'>Sub Navigation</a></li>
|
||||
<li><a href='/' class='sidenav__link'>Sub Navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='/' class='sidenav__link'>Navigation Item</a>
|
||||
<ul>
|
||||
<li><a href='/' class='sidenav__link'>Sub Navigation</a></li>
|
||||
<li><a href='/' class='sidenav__link'>Sub Navigation</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='/' class='sidenav__link'>Navigation Item</a></li>
|
||||
<li><a href='/' class='sidenav__link'>Navigation Item</a></li>
|
||||
<li><a href='/' class='sidenav__link sidenav__link--disabled' aria-disabled='true'>Navigation Item</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% end %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
||||
<div class='col'>
|
||||
<div class='panel'>
|
||||
<p>This is a panel</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='col col--grow'>
|
||||
<div class='panel'>
|
||||
<p>This is a panel</p>
|
||||
|
||||
<div class='row'>
|
||||
<div class='col col--grow'>col 1</div>
|
||||
<div class='col col--grow'>col 2</div>
|
||||
<div class='col'>
|
||||
<div class='panel'>
|
||||
<p>This is a panel</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='panel'>
|
||||
Another panel
|
||||
<div class='col col--grow'>
|
||||
<div class='panel'>
|
||||
<p>This is a panel</p>
|
||||
|
||||
<div class='row'>
|
||||
<div class='col col--grow'>col 1</div>
|
||||
<div class='col col--grow'>col 2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='panel'>
|
||||
Another panel
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% end %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user