diff --git a/scss/atat.scss b/scss/atat.scss index f04b895a..d95957ea 100644 --- a/scss/atat.scss +++ b/scss/atat.scss @@ -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'; diff --git a/scss/core/_grid.scss b/scss/core/_grid.scss index 1e00a9b9..e00b4948 100644 --- a/scss/core/_grid.scss +++ b/scss/core/_grid.scss @@ -12,6 +12,7 @@ @include media($medium-screen) { display: flex; flex-direction: row; + flex-wrap: wrap; } } diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss index 2301e58e..5dbdb23a 100644 --- a/scss/core/_variables.scss +++ b/scss/core/_variables.scss @@ -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; diff --git a/scss/elements/_panels.scss b/scss/elements/_panels.scss index 2ed294d6..357f01dd 100644 --- a/scss/elements/_panels.scss +++ b/scss/elements/_panels.scss @@ -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; } /* diff --git a/scss/elements/_typography.scss b/scss/elements/_typography.scss index f0951959..23637cd6 100644 --- a/scss/elements/_typography.scss +++ b/scss/elements/_typography.scss @@ -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, +} diff --git a/scss/sections/_navigation.scss b/scss/sections/_navigation.scss deleted file mode 100644 index 3de38a0f..00000000 --- a/scss/sections/_navigation.scss +++ /dev/null @@ -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; - } -} diff --git a/scss/sections/_sidenav.scss b/scss/sections/_sidenav.scss new file mode 100644 index 00000000..30dc7865 --- /dev/null +++ b/scss/sections/_sidenav.scss @@ -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; + } + } + } + } +} diff --git a/scss/sections/_topbar.scss b/scss/sections/_topbar.scss new file mode 100644 index 00000000..37114a6c --- /dev/null +++ b/scss/sections/_topbar.scss @@ -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; + } + } + } + } + } +} diff --git a/templates/base.html.to b/templates/base.html.to index dca55fe8..f271513d 100644 --- a/templates/base.html.to +++ b/templates/base.html.to @@ -14,6 +14,8 @@ {% include 'header.html.to' %}
+ {% block sidenav %}{% end %} + {% block content %} these are not the droids you are looking for {% end %} diff --git a/templates/header.html.to b/templates/header.html.to index 9c93791c..48ec82e8 100644 --- a/templates/header.html.to +++ b/templates/header.html.to @@ -1,35 +1,11 @@ - diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index 62ff873e..56954243 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -1,28 +1,47 @@ {% extends "base.html.to" %} +{% block sidenav %} + +{% end %} + {% block content %} - - -
-
-

This is a panel

-
-
- -
-
-

This is a panel

- -
-
col 1
-
col 2
+
+
+

This is a panel

-
- Another panel +
+
+

This is a panel

+ +
+
col 1
+
col 2
+
+
+ +
+ Another panel +
-
- - {% end %}