diff options
author | Mark Otto <markd.otto@gmail.com> | 2022-04-18 08:17:50 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-04-18 08:17:50 +0300 |
commit | 195440f2fb1e94c014a9cf08f3eae40f3d224620 (patch) | |
tree | 28b6e15b4bc9af353083ba300474aa6e187a6f7a /site/assets/scss | |
parent | 26ea6f1649c51d2a7edc796221bd5b46b289bb28 (diff) |
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
Diffstat (limited to 'site/assets/scss')
-rw-r--r-- | site/assets/scss/_ads.scss | 5 | ||||
-rw-r--r-- | site/assets/scss/_algolia.scss | 7 | ||||
-rw-r--r-- | site/assets/scss/_buttons.scss | 16 | ||||
-rw-r--r-- | site/assets/scss/_callouts.scss | 30 | ||||
-rw-r--r-- | site/assets/scss/_clipboard-js.scss | 37 | ||||
-rw-r--r-- | site/assets/scss/_component-examples.scss | 42 | ||||
-rw-r--r-- | site/assets/scss/_content.scss | 59 | ||||
-rw-r--r-- | site/assets/scss/_layout.scss | 19 | ||||
-rw-r--r-- | site/assets/scss/_masthead.scss | 77 | ||||
-rw-r--r-- | site/assets/scss/_navbar.scss | 85 | ||||
-rw-r--r-- | site/assets/scss/_search.scss | 62 | ||||
-rw-r--r-- | site/assets/scss/_sidebar.scss | 90 | ||||
-rw-r--r-- | site/assets/scss/_subnav.scss | 82 | ||||
-rw-r--r-- | site/assets/scss/_syntax.scss | 2 | ||||
-rw-r--r-- | site/assets/scss/_toc.scss | 45 | ||||
-rw-r--r-- | site/assets/scss/_variables.scss | 12 | ||||
-rw-r--r-- | site/assets/scss/docs.scss | 2 |
17 files changed, 413 insertions, 259 deletions
diff --git a/site/assets/scss/_ads.scss b/site/assets/scss/_ads.scss index 026d1a17a7..b9369eb19c 100644 --- a/site/assets/scss/_ads.scss +++ b/site/assets/scss/_ads.scss @@ -14,7 +14,7 @@ @include font-size(.8125rem); line-height: 1.4; text-align: left; - background-color: rgba(0, 0, 0, .05); + background-color: $gray-100; a { color: $gray-800; @@ -22,8 +22,7 @@ } @include media-breakpoint-up(sm) { - max-width: 330px; - @include border-radius(4px); + @include border-radius(.5rem); } } diff --git a/site/assets/scss/_algolia.scss b/site/assets/scss/_algolia.scss index 9c457d2e37..ab22ad9a7e 100644 --- a/site/assets/scss/_algolia.scss +++ b/site/assets/scss/_algolia.scss @@ -12,12 +12,15 @@ margin: $dropdown-spacer 0 0; @include font-size(.875rem); background-color: $dropdown-bg; + background-clip: padding-box; border: $dropdown-border-width solid $dropdown-border-color; @include border-radius($dropdown-border-radius); - @include box-shadow($dropdown-box-shadow); + box-shadow: $dropdown-box-shadow; @include media-breakpoint-up(md) { - width: 400px; + width: 500px; + margin-top: .5rem; + margin-left: -110px; } } diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss index 93ffa83ed5..13bd6e48a3 100644 --- a/site/assets/scss/_buttons.scss +++ b/site/assets/scss/_buttons.scss @@ -8,10 +8,14 @@ --bs-btn-color: var(--bs-white); --bs-btn-bg: var(--bd-violet); --bs-btn-border-color: var(--bd-violet); + --bs-btn-border-radius: .5rem; --bs-btn-hover-color: var(--bs-white); - --bs-btn-hover-bg: #{shade-color($bd-violet, 20%)}; - --bs-btn-hover-border-color: #{shade-color($bd-violet, 20%)}; + --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)}; + --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)}; --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); + --bs-btn-active-color: var(--bs-btn-hover-color); + --bs-btn-active-bg: #{shade-color($bd-violet, 20%)}; + --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)}; } // scss-docs-end btn-css-vars-example @@ -23,13 +27,19 @@ --bs-btn-hover-bg: var(--bd-accent); --bs-btn-hover-border-color: var(--bd-accent); --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb); + --bs-btn-active-color: var(--bs-btn-hover-color); + --bs-btn-active-bg: var(--bs-btn-hover-bg); + --bs-btn-active-border-color: var(--bs-btn-hover-border-color); } .btn-bd-light { --bs-btn-color: var(--bs-gray-600); - --bs-btn-border-color: var(--bs-gray-300); + --bs-btn-border-color: var(--bs-gray-400); + --bs-btn-hover-color: var(--bd-violet); + --bs-btn-hover-border-color: var(--bd-violet); --bs-btn-active-color: var(--bd-violet); --bs-btn-active-bg: var(--bs-white); --bs-btn-active-border-color: var(--bd-violet); + --bs-btn-focus-border-color: var(--bd-violet); --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); } diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss index aff91f18b6..4513a7d1d5 100644 --- a/site/assets/scss/_callouts.scss +++ b/site/assets/scss/_callouts.scss @@ -6,36 +6,30 @@ padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; - border: 1px solid $gray-200; - border-left-width: .25rem; - @include border-radius(); + background-color: var(--bd-callout-bg, var(--bs-gray-100)); + border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300)); h4 { margin-bottom: .25rem; } - p:last-child { + > :last-child { margin-bottom: 0; } - code { - @include border-radius(); - } - + .bd-callout { margin-top: -.25rem; } -} -// Variations -.bd-callout-info { - border-left-color: $bd-info; -} - -.bd-callout-warning { - border-left-color: $bd-warning; + .highlight { + background-color: rgba($black, .05); + } } -.bd-callout-danger { - border-left-color: $bd-danger; +// Variations +@each $variant in $bd-callout-variants { + .bd-callout-#{$variant} { + --bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075); + --bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5); + } } diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index b2b0854dc4..7acf90f0b7 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -19,26 +19,29 @@ .btn-clipboard, .btn-edit { - position: absolute; - top: .65rem; - right: .65rem; - z-index: 10; display: block; - padding: .25rem .5rem; - @include font-size(.65em); - color: $primary; - white-space: nowrap; - background-color: $white; - border: 1px solid; - @include border-radius(); + padding: .5em; + line-height: 1; + color: $gray-900; + background-color: $gray-100; + border: 0; + @include border-radius(.25rem); - &:hover, - &:focus { - color: $white; - background-color: $primary; + &:hover { + color: $primary; } } -.btn-edit { - right: 3.65rem; +.btn-clipboard { + position: relative; + z-index: 2; + margin-top: .75rem; + margin-right: .75rem; +} + +.highlight-toolbar { + .btn-clipboard { + margin-top: 0; + margin-right: 0; + } } diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 330bd43bac..b305f088f9 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -85,21 +85,17 @@ .bd-example { position: relative; padding: 1rem; - margin: 1rem ($bd-gutter-x * -1) 0; - border: solid $gray-300; + margin: 1rem ($bd-gutter-x * -.5) 0; + border: solid $border-color; border-width: 1px 0 0; @include clearfix(); - @include media-breakpoint-up(sm) { + @include media-breakpoint-up(md) { padding: 1.5rem; margin-right: 0; margin-left: 0; border-width: 1px; - @include border-top-radius(.25rem); - - + .bd-clipboard + .highlight { - @include border-bottom-radius(.25rem); - } + @include border-top-radius(var(--bs-border-radius)); } + p { @@ -348,12 +344,14 @@ // .highlight { - padding: var(--bs-gutter-x) $bd-gutter-x; + position: relative; + padding: .75rem ($bd-gutter-x * .5); margin-bottom: 1rem; background-color: var(--bs-gray-100); - @include media-breakpoint-up(sm) { - padding: 1rem 1.5rem; + @include media-breakpoint-up(md) { + padding: .75rem 1.25rem; + @include border-radius(var(--bs-border-radius)); } pre { @@ -363,6 +361,11 @@ white-space: pre; background-color: transparent; border: 0; + + // Undo tabindex that's automatically added by Hugo + &:focus { + outline: 0; + } } pre code { @@ -372,11 +375,22 @@ } } +.bd-example-snippet { + .highlight { + @include border-top-radius(0); + border: 1px solid $border-color; + } + .highlight-toolbar { + border: solid $border-color; + border-width: 0 1px; + } +} + .bd-content .highlight { - margin-right: $bd-gutter-x * -1; - margin-left: $bd-gutter-x * -1; + margin-right: $bd-gutter-x * -.5; + margin-left: $bd-gutter-x * -.5; - @include media-breakpoint-up(sm) { + @include media-breakpoint-up(md) { margin-right: 0; margin-left: 0; } diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index d796c491e0..cd594335a6 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -2,14 +2,13 @@ // Bootstrap docs content theming // -// Offset for the sticky header -@include media-breakpoint-up(md) { - :root { - scroll-padding-top: 4rem; +.bd-content { + // Offset content from fixed navbar when jumping to headings + > :target { + padding-top: 5rem; + margin-top: -5rem; } -} -.bd-content { > h2:not(:first-child) { margin-top: 3rem; } @@ -46,6 +45,10 @@ border-bottom: 2px solid currentcolor; } + tbody:not(:first-child) { + border-top: 2px solid currentcolor; + } + th, td { &:first-child { @@ -59,12 +62,24 @@ // Prevent breaking of code // stylelint-disable-next-line selector-max-compound-selectors + th, td:first-child > code { white-space: nowrap; } } } +.table-options { + td:nth-child(2) { + min-width: 160px; + } +} + +.table-options td:last-child, +.table-utilities td:last-child { + min-width: 280px; +} + .bd-title { @include font-size(3rem); } @@ -77,3 +92,35 @@ .bd-bg-violet { background-color: $bd-violet; } + +.bi { + width: 1em; + height: 1em; + fill: currentcolor; +} + +.icon-link { + display: flex; + align-items: center; + text-decoration-color: rgba($primary, .5); + text-underline-offset: .5rem; + backface-visibility: hidden; + + .bi { + width: 1.5em; + height: 1.5em; + transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list + } + + &:hover { + .bi { + transform: translate3d(5px, 0, 0); + } + } +} + +.border-lg-start { + @include media-breakpoint-up(lg) { + border-left: $border-width solid $border-color; + } +} diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss index f83cf094c9..d0482d9b71 100644 --- a/site/assets/scss/_layout.scss +++ b/site/assets/scss/_layout.scss @@ -1,16 +1,14 @@ +.bd-gutter { + --bs-gutter-x: #{$bd-gutter-x}; +} + .bd-layout { - padding-right: $bd-gutter-x; - padding-left: $bd-gutter-x; - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { display: grid; grid-template-areas: "sidebar main"; - grid-template-columns: 1fr 3fr; - gap: $grid-gutter-width; - } - - @include media-breakpoint-up(lg) { grid-template-columns: 1fr 5fr; + gap: $grid-gutter-width; } } @@ -21,6 +19,11 @@ .bd-main { grid-area: main; + @include media-breakpoint-down(lg) { + max-width: 760px; + margin-inline: auto; + } + @include media-breakpoint-up(md) { display: grid; grid-template-areas: diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 2e742e76d1..42ad0f3853 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -1,38 +1,87 @@ .bd-masthead { + --bd-pink-rgb: #{to-rgb($pink)}; padding: 3rem 0; - background: linear-gradient(165deg, tint-color($bd-purple-light, 85%) 50%, $white 50%); + // stylelint-disable + background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), .01), rgba(var(--bs-body-bg-rgb), 1) 85%), + radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), .5), transparent 50%), + radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), .5), transparent 50%), + radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), .5), transparent 50%), + radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), .5), transparent 50%); + // stylelint-enable h1 { @include font-size(4rem); line-height: 1; } - p:not(.lead) { + .lead { + @include font-size(1rem); + font-weight: 400; color: $gray-700; } - .btn { - padding: .8rem 2rem; - font-weight: 600; + .highlight { + padding: .5rem 4rem .5rem 1rem; + margin-bottom: 0; + line-height: 1.25; + background-color: rgba(var(--bs-body-color-rgb), .075); + @include border-radius(.5rem); + } + .btn-clipboard { + margin-top: .4rem; + background-color: transparent; + } + + #carbonads { // stylelint-disable-line selector-max-id + margin-right: auto; + margin-left: auto; } + + @include media-breakpoint-up(md) { + .lead { + @include font-size(1.5rem); + } + } +} + +.masthead-followup { .lead { - @include font-size(1.5rem); - font-weight: 400; - color: $gray-700; + @include font-size(1rem); + } + + .highlight { + @include border-radius(.5rem); + } + + @include media-breakpoint-up(md) { + .lead { + @include font-size(1.25rem); + } } } -@include media-breakpoint-up(md) { - .mw-md-75 { max-width: 75%; } +.bd-btn-lg { + padding: .8rem 2rem; } .masthead-followup-icon { - padding: .75rem; - background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .2), rgba(255, 255, 255, .01)); - @include border-radius(.75rem); - box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1); + padding: 1rem; + color: rgba(var(--bg-rgb), 1); + background-color: rgba(var(--bg-rgb), .1); + background-blend-mode: multiple; + @include border-radius(1rem); + mix-blend-mode: darken; + + svg { + filter: drop-shadow(0 1px 1px #fff); + } } .masthead-followup-svg { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125)); } + +.masthead-notice { + background-color: var(--bd-accent); + box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75); +} diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 401731ae19..4f9f3f8290 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -1,44 +1,85 @@ .bd-navbar { - --bs-gutter-x: $bd-gutter-x; - --bs-gutter-y: $bd-gutter-x; - padding: .75rem 0; - background-color: $bd-violet; + background-color: transparent; + background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95)); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); .navbar-toggler { padding: 0; + margin-right: -.5rem; border: 0; + + &:first-child { + margin-left: -.5rem; + } + + .bi { + width: 1.5rem; + height: 1.5rem; + } + + &:focus { + box-shadow: none; + } } - .navbar-nav { - .nav-link { - padding-right: $spacer * .25; - padding-left: $spacer * .25; - color: rgba($white, .85); + .navbar-brand { + transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list + + &:hover { + transform: rotate(-5deg) scale(1.1); + } + } - &:hover, - &:focus { - color: $white; - } + .navbar-toggler, + .nav-link { + padding-right: $spacer * .25; + padding-left: $spacer * .25; + color: rgba($white, .85); - &.active { - font-weight: 600; - color: $white; - } + &:hover, + &:focus { + color: $white; + } + + &.active { + font-weight: 600; + color: $white; } } .navbar-nav-svg { - width: 1rem; - height: 1rem; + display: inline-block; + vertical-align: -.125rem; } - .offcanvas { - background-color: $bd-violet; + .offcanvas-lg { + background-color: var(--bd-violet); border-left: 0; - @include media-breakpoint-down(md) { + @include media-breakpoint-down(lg) { box-shadow: $box-shadow-lg; } } + + .dropdown-toggle { + &:focus { + outline: 0; + } + } + + .dropdown-menu { + --#{$variable-prefix}dropdown-min-width: 12rem; + --#{$variable-prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1); + @include rfs(.875rem, --#{$variable-prefix}dropdown-font-size); + box-shadow: $dropdown-box-shadow; + } + + .dropdown-item.current { + font-weight: 600; + background-image: escape-svg($dropdown-active-icon); + background-repeat: no-repeat; + background-position: right $dropdown-item-padding-x top .6rem; + background-size: .75rem .75rem; + } } diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss new file mode 100644 index 0000000000..1825337a00 --- /dev/null +++ b/site/assets/scss/_search.scss @@ -0,0 +1,62 @@ +.bd-search { + position: relative; + width: 100%; + + &::after { + position: absolute; + top: .4rem; + right: .4rem; + bottom: .4rem; + display: flex; + align-items: center; + justify-content: center; + padding-right: .3125rem; + padding-left: .3125rem; + @include font-size(.75rem); + color: rgba($white, .65); + // content: "⌘K"; + content: attr(data-shortcut); + background-color: rgba($white, .1); + @include border-radius(.125rem); + } + + @include media-breakpoint-up(lg) { + position: absolute; + top: .75rem; + left: 50%; + width: 200px; + margin-left: -100px; + } + + @include media-breakpoint-up(xl) { + width: 280px; + margin-left: -140px; + } + + .form-control { + padding-right: 2.75rem; + color: $white; + background-color: rgba($black, .1); + border-color: rgba($white, .4); + transition-property: background-color, border-color, box-shadow; + + &::placeholder { + color: rgba($white, .65); + } + + &::-webkit-search-cancel-button { + appearance: none; + width: 1rem; + height: 1rem; + cursor: pointer; + background: escape-svg($search-clear-icon) no-repeat 0 0; + background-size: 100% 100%; + } + + &:focus { + background-color: rgba($black, .25); + border-color: rgba($bd-accent, 1); + box-shadow: 0 0 0 .25rem rgba($bd-accent, .4); + } + } +} diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index 452b155ffa..ed76b3ca82 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -1,87 +1,53 @@ .bd-sidebar { - @include media-breakpoint-down(md) { - margin: 0 ($bd-gutter-x * -1) 1rem; - } -} - -.bd-links { - overflow: auto; - font-weight: 600; - - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { position: sticky; top: 5rem; // Override collapse behaviors // stylelint-disable-next-line declaration-no-important display: block !important; - height: subtract(100vh, 7rem); + height: subtract(100vh, 6rem); // Prevent focus styles to be cut off: padding-left: .25rem; margin-left: -.25rem; overflow-y: auto; } +} - > ul { - @include media-breakpoint-down(md) { - padding: 1.5rem .75rem; - background-color: $gray-100; - border-bottom: 1px solid $gray-200; - } - } - - a { - padding: .1875rem .5rem; - margin-top: .125rem; - margin-left: 1.25rem; - color: rgba($black, .65); - text-decoration: if($link-decoration == none, null, none); - - &:hover, - &:focus { - color: rgba($black, .85); - text-decoration: if($link-hover-decoration == underline, none, null); - background-color: rgba($bd-violet, .1); - } +.bd-links-nav { + @include media-breakpoint-down(lg) { + font-size: .875rem; } - .btn { - // Custom styles (as we don't have a completely neutral button style) - padding: .25rem .5rem; - font-weight: 600; - color: rgba($black, .65); - background-color: transparent; - border: 0; + @include media-breakpoint-between(xs, lg) { + column-count: 2; + column-gap: 1.5rem; - &:hover, - &:focus { - color: rgba($black, .85); - background-color: rgba($bd-violet, .1); + .bd-links-group { + break-inside: avoid; } - &:focus { - box-shadow: 0 0 0 1px rgba($bd-violet, .7); - } - - // Add chevron if there's a submenu - &::before { - width: 1.25em; - line-height: 0; // Align in the middle - content: escape-svg($sidebar-collapse-icon); - @include transition(transform .35s ease); - transform-origin: .5em 50%; + .bd-links-span-all { + column-span: all; } + } +} - &[aria-expanded="true"] { - color: rgba($black, .85); +.bd-links-link { + padding: .1875rem .5rem; + margin-top: .125rem; + margin-left: 1rem; + color: rgba($black, .65); + text-decoration: if($link-decoration == none, null, none); - &::before { - transform: rotate(90deg); - } - } + &:hover, + &:focus, + &.active { + color: rgba($black, .85); + text-decoration: if($link-hover-decoration == underline, none, null); + background-color: rgba(var(--bd-violet-rgb), .1); } - .active { + &.active { font-weight: 600; - color: rgba($black, .85); } } diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss deleted file mode 100644 index db183ff6a8..0000000000 --- a/site/assets/scss/_subnav.scss +++ /dev/null @@ -1,82 +0,0 @@ -.bd-subnavbar { - --bs-gutter-x: $bd-gutter-x; - --bs-gutter-y: $bd-gutter-x; - - // The position and z-index are needed for the dropdown to stay on top of the content - position: relative; - z-index: $zindex-sticky; - background-color: rgba($white, .95); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15); - - .dropdown-menu { - @include font-size(.875rem); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05); - } - - .dropdown-item.current { - font-weight: 600; - background-image: escape-svg($dropdown-active-icon); - background-repeat: no-repeat; - background-position: right $dropdown-item-padding-x top .6rem; - background-size: .75rem .75rem; - } - - @include media-breakpoint-up(md) { - position: sticky; - top: 0; - } -} - -.bd-search { - position: relative; - - &::after { - position: absolute; - top: .4rem; - right: .4rem; - bottom: .4rem; - display: flex; - align-items: center; - justify-content: center; - padding-right: .3125rem; - padding-left: .3125rem; - @include font-size(.75rem); - color: $gray-600; - content: "Ctrl + /"; - background-color: $gray-100; - @include border-radius(.125rem); - } - - @include media-breakpoint-down(md) { - width: 100%; - } - - .form-control { - padding-right: 3.75rem; - - &:focus { - border-color: $bd-violet; - box-shadow: 0 0 0 3px rgba($bd-violet, .25); - } - } -} - -.bd-sidebar-toggle { - color: $text-muted; - - &:hover, - &:focus { - color: $bd-violet; - } - - &:focus { - box-shadow: 0 0 0 3px rgba($bd-violet, .25); - } - - .bi-collapse { display: none; } - - &:not(.collapsed) { - .bi-expand { display: none; } - .bi-collapse { display: inline-block; } - } -} diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss index 54f0cdaaa8..662f70dc4d 100644 --- a/site/assets/scss/_syntax.scss +++ b/site/assets/scss/_syntax.scss @@ -101,7 +101,7 @@ .language-bash, .language-sh { &::before { - color: #009; + color: #777; content: "$ "; user-select: none; } diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss index 596945628e..512a11b420 100644 --- a/site/assets/scss/_toc.scss +++ b/site/assets/scss/_toc.scss @@ -15,6 +15,7 @@ ul { padding-left: 0; + margin-bottom: 0; list-style: none; ul { @@ -40,3 +41,47 @@ } } } + +.bd-toc-toggle { + display: flex; + align-items: center; + + @include media-breakpoint-down(sm) { + justify-content: space-between; + width: 100%; + } + + @include media-breakpoint-down(md) { + border: 1px solid $border-color; + @include border-radius(.4rem); + + &:hover, + &:focus, + &:active, + &[aria-expanded="true"] { + color: var(--bd-violet); + background-color: $white; + border-color: var(--bd-violet); + } + + &:focus, + &[aria-expanded="true"] { + box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25); + } + } +} + +.bd-toc-collapse { + @include media-breakpoint-down(md) { + nav { + padding: 1.25rem; + background-color: var(--bs-gray-100); + border: 1px solid $border-color; + @include border-radius(.25rem); + } + } + + @include media-breakpoint-up(md) { + display: block !important; // stylelint-disable-line declaration-no-important + } +} diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 0c40b17e9e..8f74f94d0b 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -1,17 +1,15 @@ // stylelint-disable scss/dollar-variable-default // Local docs variables -$bd-purple: #563d7c; +$bd-purple: #4c0bce; $bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list $bd-accent: #ffe484; -$bd-info: #5bc0de; -$bd-warning: #f0ad4e; -$bd-danger: #d9534f; $dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>"); -$sidebar-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>"); +$search-clear-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='rgba(255,255,255,.75)' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/></svg>"); -$bd-gutter-x: 1.25rem; +$bd-gutter-x: 3rem; +$bd-callout-variants: info, warning, danger !default; :root { --bd-purple: #{$bd-purple}; @@ -19,4 +17,6 @@ $bd-gutter-x: 1.25rem; --bd-accent: #{$bd-accent}; --bd-violet-rgb: #{to-rgb($bd-violet)}; --bd-accent-rgb: #{to-rgb($bd-accent)}; + --bd-pink-rgb: #{to-rgb($pink-500)}; + --bd-teal-rgb: #{to-rgb($teal-500)}; } diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 0029e83af9..f1390e2fae 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -37,7 +37,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default // Load docs components @import "variables"; @import "navbar"; -@import "subnav"; +@import "search"; @import "masthead"; @import "ads"; @import "content"; |