diff --git a/scss/components/_layout.scss b/scss/components/_layout.scss new file mode 100644 index 00000000..ee8308af --- /dev/null +++ b/scss/components/_layout.scss @@ -0,0 +1,31 @@ +body { + background-color: $color-gray-lightest; + display: flex; + flex-direction: column; + justify-content: flex-start; + min-height: 100vh; + + > footer { + margin-top: auto; + } +} + +.global-layout { + display: flex; + flex-wrap: nowrap; + flex-grow: 1; + + .global-navigation { + margin-top: -1px; + } + + .global-panel-container { + margin: $gap; + max-width: $site-max-width; + overflow: auto; + + @include media($medium-screen) { + margin: $gap * 2; + } + } +} diff --git a/scss/core/_base.scss b/scss/core/_base.scss deleted file mode 100644 index 57513b32..00000000 --- a/scss/core/_base.scss +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Base Styles - * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/core/_base.scss - */ - -body { - background-color: $color-gray-lightest; - display: flex; - flex-direction: column; - justify-content: flex-start; - min-height: 100vh; - - > footer { - margin-top: auto; - } -} diff --git a/scss/sections/_sidenav.scss b/scss/elements/_sidenav.scss similarity index 63% rename from scss/sections/_sidenav.scss rename to scss/elements/_sidenav.scss index 4415c3ae..7fa92cf6 100644 --- a/scss/sections/_sidenav.scss +++ b/scss/elements/_sidenav.scss @@ -1,15 +1,13 @@ .sidenav { - @include grid-pad; - @include panel-margin; - width: 100%; - flex-shrink: 0; + ul { + list-style: none; + margin: 0; + padding: 0; - @include media($large-screen) { - width: 21rem; - } - - @include media($xlarge-screen) { - width: 30rem; + li { + margin: 0; + display: block; + } } .sidenav__link { @@ -18,10 +16,10 @@ padding: $gap ($gap * 2); color: $color-black; text-decoration: none; + white-space: nowrap; - &:hover { - background-color: $color-white; - color: $color-primary; + .sidenav__link-icon { + margin-left: - ($gap * .5); } &.sidenav__link--disabled { @@ -35,60 +33,42 @@ color: $color-primary; box-shadow: inset .4rem 0 0 0 $color-primary; + .sidenav__link-icon { + @include icon-style-active; + } + + ul { background-color: $color-white; .sidenav__link { &--active { @include h5; - box-shadow: none; + color: $color-primary; } } } } + ul { + padding-bottom: $gap / 2; + li { .sidenav__link { + @include h5; 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; + &:hover { + color: $color-primary; - li { - margin: 0; - display: block; - } - } - - > ul { - @include panel-margin; - - &:last-child { - margin: 0; - } - - > li { - &:last-child { - > .sidenav__link { - border-bottom: 1px solid $color-black; - } + .sidenav__link-icon { + @include icon-style-active; } + } } } diff --git a/scss/sections/_main.scss b/scss/sections/_main.scss deleted file mode 100644 index 063b70e7..00000000 --- a/scss/sections/_main.scss +++ /dev/null @@ -1,3 +0,0 @@ -section { - margin-bottom: 10rem; -} diff --git a/scss/sections/_topbar.scss b/scss/sections/_topbar.scss deleted file mode 100644 index 37114a6c..00000000 --- a/scss/sections/_topbar.scss +++ /dev/null @@ -1,54 +0,0 @@ -.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; - } - } - } - } - } -}