From dda740fc2f14f50767a167fd759e8e0f956a47b5 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 14:34:26 -0400 Subject: [PATCH 01/11] topbar styles --- scss/sections/_navigation.scss | 20 ---------- scss/sections/_topbar.scss | 71 ++++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 20 deletions(-) delete mode 100644 scss/sections/_navigation.scss create mode 100644 scss/sections/_topbar.scss 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/_topbar.scss b/scss/sections/_topbar.scss new file mode 100644 index 00000000..907d0628 --- /dev/null +++ b/scss/sections/_topbar.scss @@ -0,0 +1,71 @@ +.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; + } + } + } + } + } +} + +// .usa-navbar { +// height: 5rem; +// width: 5%; +// } + +// .usa-nav { +// padding-top: 1rem; +// padding-left: 0; +// } + +// .usa-nav-primary { + +// li:last-child { +// padding-left: 3rem; +// } +// } From fbfa706721b4c1e1f36079fc79642ca3161376a3 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 14:34:34 -0400 Subject: [PATCH 02/11] side nav styles --- scss/sections/_sidenav.scss | 85 +++++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 scss/sections/_sidenav.scss 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; + } + } + } + } +} From 9368354cc67ef037fa67cb417b8fd21c0582da4a Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 14:34:53 -0400 Subject: [PATCH 03/11] template block for placing the sidenav --- templates/base.html.to | 2 ++ 1 file changed, 2 insertions(+) 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 %} From 3e0f323ce3aabc5595e2258b00f7480100ff12de Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 14:35:02 -0400 Subject: [PATCH 04/11] imports --- scss/atat.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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'; From 7dc746c7e185a1e8636145fe3b5e4c85cb83ddfe Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 14:35:45 -0400 Subject: [PATCH 05/11] Add sidenav example to styleguide --- templates/styleguide.html.to | 59 ++++++++++++++++++++++++------------ 1 file changed, 39 insertions(+), 20 deletions(-) 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 %} From 524ecae3637e35a2b912e0ff78a73825292d44bb Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 14:38:51 -0400 Subject: [PATCH 06/11] Re implement header with new topbar --- templates/header.html.to | 42 +++++++++------------------------------- 1 file changed, 9 insertions(+), 33 deletions(-) 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 @@ - From 5bbf57035bba59e7cbbac1b78922a8e77ccea9ce Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 14:39:07 -0400 Subject: [PATCH 07/11] link transitions --- scss/elements/_typography.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) 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, +} From cae74c8a09cd5966a0970a6860d392622a959bbe Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 14:39:20 -0400 Subject: [PATCH 08/11] panel margin mixin --- scss/elements/_panels.scss | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) 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; } /* From c931446e985fd3f5f81eee904de9bfad6302ab1e Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 14:39:34 -0400 Subject: [PATCH 09/11] grid can wrap --- scss/core/_grid.scss | 1 + 1 file changed, 1 insertion(+) 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; } } From 847e0a43ac8d70af27eaad8e6d3f10c9a34280e3 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 14:39:44 -0400 Subject: [PATCH 10/11] adjustments to breakpoints --- scss/core/_variables.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) 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; From bdf3191b414ac7fec59546fc95da35b98164ac3e Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 9 Jul 2018 14:46:35 -0400 Subject: [PATCH 11/11] remove commented stuff --- scss/sections/_topbar.scss | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/scss/sections/_topbar.scss b/scss/sections/_topbar.scss index 907d0628..37114a6c 100644 --- a/scss/sections/_topbar.scss +++ b/scss/sections/_topbar.scss @@ -52,20 +52,3 @@ } } } - -// .usa-navbar { -// height: 5rem; -// width: 5%; -// } - -// .usa-nav { -// padding-top: 1rem; -// padding-left: 0; -// } - -// .usa-nav-primary { - -// li:last-child { -// padding-left: 3rem; -// } -// }