From 94693f899c3f6432633036e4a17879d84d33915e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 24 Jul 2019 10:03:39 -0700 Subject: Split up docs _nav.scss - _navbar.scss for all main navbar code - new _subnav.scss to move all subnav styles into --- site/static/docs/4.3/assets/scss/_nav.scss | 113 -------------------------- site/static/docs/4.3/assets/scss/_navbar.scss | 46 +++++++++++ site/static/docs/4.3/assets/scss/_subnav.scss | 62 ++++++++++++++ site/static/docs/4.3/assets/scss/docs.scss | 3 +- 4 files changed, 110 insertions(+), 114 deletions(-) delete mode 100644 site/static/docs/4.3/assets/scss/_nav.scss create mode 100644 site/static/docs/4.3/assets/scss/_navbar.scss create mode 100644 site/static/docs/4.3/assets/scss/_subnav.scss diff --git a/site/static/docs/4.3/assets/scss/_nav.scss b/site/static/docs/4.3/assets/scss/_nav.scss deleted file mode 100644 index b93d42205..000000000 --- a/site/static/docs/4.3/assets/scss/_nav.scss +++ /dev/null @@ -1,113 +0,0 @@ -// -// Main navbar -// - -.bd-subnavbar { - background-color: rgba(#fff, .75); - backdrop-filter: blur(1rem); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15); - - .booticon { - opacity: .25; - } - - .dropdown-toggle { - @include font-size(100%); - text-decoration: none; - } - - .dropdown-menu { - @include font-size(.875rem); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05); - } - - .dropdown-item.active { - font-weight: 600; - color: $gray-900; - background: escape-svg($dropdown-active-icon) no-repeat .4rem .6rem/.75rem .75rem; - } - - @include media-breakpoint-up(md) { - @supports (position: sticky) { - position: sticky; - top: 0; - z-index: 1071; // over everything in bootstrap - } - } -} - -.bd-search { - position: relative; // To contain the Algolia search - - @include media-breakpoint-down(sm) { - width: 100%; - } - - .form-control:focus { - border-color: $bd-purple-bright; - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); - } -} - -.bd-search-docs-toggle { - line-height: 1; - color: $gray-900; -} - -.link-dark { - font-weight: 500; - color: $dark; - - &:hover, - &:focus { - color: $blue; - text-decoration: none; - } -} - -.bd-navbar { - min-height: 4rem; - background-color: $bd-purple-bright; - - @include media-breakpoint-down(md) { - .navbar-nav-scroll { - width: 100%; - height: 2.5rem; - margin-top: .25rem; - overflow: hidden; - - .navbar-nav { - padding-bottom: 2rem; - overflow-x: auto; - white-space: nowrap; - -webkit-overflow-scrolling: touch; - } - } - } - - .navbar-nav { - .nav-link { - padding-right: .5rem; - padding-left: .5rem; - color: $bd-purple-light; - - &.active, - &:hover, - &:focus { - color: $white; - background-color: transparent; - } - - &.active { - font-weight: 600; - } - } - } - - .navbar-nav-svg { - display: inline-block; - width: 1rem; - height: 1rem; - vertical-align: text-top; - } -} diff --git a/site/static/docs/4.3/assets/scss/_navbar.scss b/site/static/docs/4.3/assets/scss/_navbar.scss new file mode 100644 index 000000000..e3f03e7ac --- /dev/null +++ b/site/static/docs/4.3/assets/scss/_navbar.scss @@ -0,0 +1,46 @@ +.bd-navbar { + min-height: 4rem; + background-color: $bd-purple-bright; + + @include media-breakpoint-down(md) { + .navbar-nav-scroll { + width: 100%; + height: 2.5rem; + margin-top: .25rem; + overflow: hidden; + + .navbar-nav { + padding-bottom: 2rem; + overflow-x: auto; + white-space: nowrap; + -webkit-overflow-scrolling: touch; + } + } + } + + .navbar-nav { + .nav-link { + padding-right: .5rem; + padding-left: .5rem; + color: $bd-purple-light; + + &.active, + &:hover, + &:focus { + color: $white; + background-color: transparent; + } + + &.active { + font-weight: 600; + } + } + } + + .navbar-nav-svg { + display: inline-block; + width: 1rem; + height: 1rem; + vertical-align: text-top; + } +} diff --git a/site/static/docs/4.3/assets/scss/_subnav.scss b/site/static/docs/4.3/assets/scss/_subnav.scss new file mode 100644 index 000000000..b82107ee9 --- /dev/null +++ b/site/static/docs/4.3/assets/scss/_subnav.scss @@ -0,0 +1,62 @@ +.bd-subnavbar { + background-color: rgba(#fff, .75); + backdrop-filter: blur(1rem); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15); + + .booticon { + opacity: .25; + } + + .dropdown-toggle { + @include font-size(100%); + text-decoration: none; + } + + .dropdown-menu { + @include font-size(.875rem); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05); + } + + .dropdown-item.active { + font-weight: 600; + color: $gray-900; + background: escape-svg($dropdown-active-icon) no-repeat .4rem .6rem/.75rem .75rem; + } + + @include media-breakpoint-up(md) { + @supports (position: sticky) { + position: sticky; + top: 0; + z-index: 1071; // over everything in bootstrap + } + } +} + +.bd-search { + position: relative; // To contain the Algolia search + + @include media-breakpoint-down(sm) { + width: 100%; + } + + .form-control:focus { + border-color: $bd-purple-bright; + box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); + } +} + +.bd-search-docs-toggle { + line-height: 1; + color: $gray-900; +} + +.link-dark { + font-weight: 500; + color: $dark; + + &:hover, + &:focus { + color: $blue; + text-decoration: none; + } +} diff --git a/site/static/docs/4.3/assets/scss/docs.scss b/site/static/docs/4.3/assets/scss/docs.scss index 382746e0d..e811b0a0e 100644 --- a/site/static/docs/4.3/assets/scss/docs.scss +++ b/site/static/docs/4.3/assets/scss/docs.scss @@ -30,7 +30,8 @@ // Load docs components @import "variables"; -@import "nav"; +@import "navbar"; +@import "subnav"; @import "masthead"; @import "ads"; @import "content"; -- cgit v1.2.3