diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 4d65bb88b..57eab0a46 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -462,6 +462,7 @@ $utilities: map-merge( lighter: $font-weight-lighter, normal: $font-weight-normal, bold: $font-weight-bold, + semibold: $font-weight-semibold, bolder: $font-weight-bolder ) ), @@ -589,6 +590,8 @@ $utilities: map-merge( 1: $border-radius-sm, 2: $border-radius, 3: $border-radius-lg, + 4: $border-radius-xl, + 5: $border-radius-2xl, circle: 50%, pill: $border-radius-pill ) diff --git a/scss/_variables.scss b/scss/_variables.scss index fd6166b26..62c295cd7 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -488,9 +488,11 @@ $border-color: $gray-300 !default; // scss-docs-end border-variables // scss-docs-start border-radius-variables -$border-radius: .25rem !default; -$border-radius-sm: .2rem !default; -$border-radius-lg: .3rem !default; +$border-radius: .375rem !default; +$border-radius-sm: .25rem !default; +$border-radius-lg: .5rem !default; +$border-radius-xl: 1rem !default; +$border-radius-2xl: 2rem !default; $border-radius-pill: 50rem !default; // scss-docs-end border-radius-variables @@ -550,6 +552,7 @@ $font-size-lg: $font-size-base * 1.25 !default; $font-weight-lighter: lighter !default; $font-weight-light: 300 !default; $font-weight-normal: 400 !default; +$font-weight-semibold: 600 !default; $font-weight-bold: 700 !default; $font-weight-bolder: bolder !default; diff --git a/site/assets/scss/_ads.scss b/site/assets/scss/_ads.scss index 026d1a17a..b9369eb19 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/_buttons.scss b/site/assets/scss/_buttons.scss index 93ffa83ed..9ebdc6aa6 100644 --- a/site/assets/scss/_buttons.scss +++ b/site/assets/scss/_buttons.scss @@ -12,6 +12,7 @@ --bs-btn-hover-bg: #{shade-color($bd-violet, 20%)}; --bs-btn-hover-border-color: #{shade-color($bd-violet, 20%)}; --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); + --bs-btn-border-radius: .5rem; } // scss-docs-end btn-css-vars-example diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index 83b9a8b9e..756198b0c 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -18,20 +18,18 @@ .btn-clipboard { position: absolute; - top: .65rem; - right: .65rem; + top: .75em; + right: .5em; z-index: 10; display: block; - padding: .25rem .5rem; - @include font-size(.65em); - color: $primary; - background-color: $white; - border: 1px solid; - @include border-radius(); + padding: .5em .75em .625em; + 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; } } diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 9e017c507..a9d180ab8 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -315,12 +315,12 @@ // .highlight { - padding: var(--bs-gutter-x) $bd-gutter-x; + padding: .75rem $bd-gutter-x; margin-bottom: 1rem; background-color: $gray-100; @include media-breakpoint-up(sm) { - padding: 1rem 1.5rem; + padding: .75rem 1.5rem; } pre { @@ -330,6 +330,11 @@ white-space: pre; background-color: transparent; border: 0; + + // Undo tabindex that's automatically added by Hugo + &:focus { + outline: 0; + } } pre code { diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index fa290dabc..4117ae4c2 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -79,3 +79,35 @@ .bd-bg-purple-bright { 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 f83cf094c..96f4fdb63 100644 --- a/site/assets/scss/_layout.scss +++ b/site/assets/scss/_layout.scss @@ -1,6 +1,5 @@ .bd-layout { - padding-right: $bd-gutter-x; - padding-left: $bd-gutter-x; + --bs-gutter-x: #{$bd-gutter-x}; @include media-breakpoint-up(md) { display: grid; diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 2e742e76d..bbc867583 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -7,32 +7,69 @@ line-height: 1; } - p:not(.lead) { - color: $gray-700; - } - - .btn { - padding: .8rem 2rem; - font-weight: 600; - } .lead { - @include font-size(1.5rem); + @include font-size(1rem); font-weight: 400; color: $gray-700; } + + .highlight { + padding: .5rem 4rem .5rem 1rem; + margin-bottom: 0; + line-height: 1.25; + @include border-radius(.5rem); + } + .btn-clipboard { + top: .5rem; + } + + #carbonads { // stylelint-disable-line selector-max-id + margin-right: auto; + margin-left: auto; + } + + @include media-breakpoint-up(md) { + .lead { + @include font-size(1.5rem); + } + } } -@include media-breakpoint-up(md) { - .mw-md-75 { max-width: 75%; } +.masthead-followup { + .lead { + @include font-size(1rem); + } + + .highlight { + @include border-radius(.5rem); + } + + @include media-breakpoint-up(md) { + .lead { + @include font-size(1.25rem); + } + } +} + +.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; + background-color: currentColor; + background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .01), currentColor); + background-blend-mode: multiply; + @include border-radius(1rem); + box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15); + + svg { color: #fff; } } .masthead-followup-svg { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125)); } + +.masthead-notice { + background-color: #d2f4ea; +} diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index 452b155ff..8a1b26074 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -1,6 +1,6 @@ .bd-sidebar { @include media-breakpoint-down(md) { - margin: 0 ($bd-gutter-x * -1) 1rem; + margin: 0 calc(var(--bs-gutter-x) * -.5) 1rem; // stylelint-disable-line function-disallowed-list } } diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss index 89c81d134..19eee4163 100644 --- a/site/assets/scss/_syntax.scss +++ b/site/assets/scss/_syntax.scss @@ -88,7 +88,7 @@ .language-bash, .language-sh { &::before { - color: #009; + color: #777; content: "$ "; user-select: none; } diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 0c40b17e9..2d5364430 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -1,7 +1,7 @@ // 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; diff --git a/site/data/plugins.yml b/site/data/plugins.yml new file mode 100644 index 000000000..22cec9877 --- /dev/null +++ b/site/data/plugins.yml @@ -0,0 +1,47 @@ +- name: Alert + description: Show and hide alert messages to your users. + link: components/alerts/#javascript-behavior + +- name: Button + description: Programmatically control the active state for buttons. + link: components/buttons/#button-plugin + +- name: Carousel + description: Add slideshows to any page, including support for crossfade. + link: components/carousel/ + +- name: Collapse + description: Expand and collapse areas of content, or create accordions. + link: components/collapse/ + +- name: Dropdown + description: Create menus of links, actions, forms, and more. + link: components/dropdowns/ + +- name: Modal + description: Add flexible and responsive dialogs to your project. + link: components/modal/ + +- name: Offcanvas + description: Build and toggle hidden sidebars into any page. + link: components/offcanvas/ + +- name: Popover + description: Create custom overlays. Built on Popper.js. + link: components/popovers/ + +- name: Scrollspy + description: Automatically update active nav links based on page scroll. + link: components/scrollspy/ + +- name: Tab + description: Allow Bootstrap nav components to toggle contents. + link: components/navs-tabs/ + +- name: Toast + description: Show and hide notifications to your visitors. + link: components/toasts/ + +- name: Tooltip + description: Replace browser tooltips with custom ones. Built on Popper.js. + link: components/tooltips/ diff --git a/site/layouts/_default/baseof.html b/site/layouts/_default/baseof.html index 713ab2864..fdf19b31f 100644 --- a/site/layouts/_default/baseof.html +++ b/site/layouts/_default/baseof.html @@ -5,6 +5,7 @@ {{ block "body_override" . }}{{ end }} {{ partial "skippy" . }} + {{ partial "icons" . }} {{ partial "docs-navbar" . }} diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html index 8ba99c718..d6cc8eddf 100644 --- a/site/layouts/_default/single.html +++ b/site/layouts/_default/single.html @@ -6,9 +6,14 @@

{{ .Title | markdownify }}

{{ .Page.Params.Description | markdownify }}

{{ if eq .Title "Examples" }} -
- Download examples - Download source code +
+ + + Download examples + + + Download source code +
{{ end }}
diff --git a/site/layouts/partials/favicons.html b/site/layouts/partials/favicons.html index 50f6a5bbb..58bdb8b8b 100644 --- a/site/layouts/partials/favicons.html +++ b/site/layouts/partials/favicons.html @@ -3,6 +3,6 @@ - + - + diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html index e3d0f13e4..72f4f01fd 100644 --- a/site/layouts/partials/footer.html +++ b/site/layouts/partials/footer.html @@ -1,5 +1,5 @@ -