diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 75d4e96cd8..d48154a86b 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -1,83 +1,3 @@ -// -// Grid examples -// - -.bd-example-row { - .row { - > .col, - > [class^="col-"] { - padding-top: .75rem; - padding-bottom: .75rem; - background-color: rgba(39, 41, 43, .03); - border: 1px solid rgba(39, 41, 43, .1); - } - } - - .row + .row { - margin-top: 1rem; - } -} - -.bd-example-row-flex-cols .row { - min-height: 10rem; - background-color: rgba(255, 0, 0, .1); -} - -.bd-example-cssgrid { - text-align: center; - - .grid + .grid { - margin-top: 1rem; - } - - .grid > * { - padding-top: .75rem; - padding-bottom: .75rem; - background-color: rgba(255, 0, 255, .1); - border: 1px solid rgba(255, 0, 255, .25); - } -} - -.bd-highlight { - background-color: rgba($bd-purple, .15); - border: 1px solid rgba($bd-purple, .15); -} - -// Grid mixins -.example-container { - width: 800px; - @include make-container(); -} - -.example-row { - @include make-row(); -} - -.example-content-main { - @include make-col-ready(); - - @include media-breakpoint-up(sm) { - @include make-col(6); - } - - @include media-breakpoint-up(lg) { - @include make-col(8); - } -} - -.example-content-secondary { - @include make-col-ready(); - - @include media-breakpoint-up(sm) { - @include make-col(6); - } - - @include media-breakpoint-up(lg) { - @include make-col(4); - } -} - - // // Docs examples // @@ -92,15 +12,18 @@ } .bd-example { + --bd-example-padding: 1rem; + position: relative; - padding: 1rem; + padding: var(--bd-example-padding); margin: 0 ($bd-gutter-x * -.5); border: solid $border-color; - border-width: 1px 0 0; + border-width: 1px 0; @include clearfix(); @include media-breakpoint-up(md) { - padding: 1.5rem; + --bd-example-padding: 1.5rem; + margin-right: 0; margin-left: 0; border-width: 1px; @@ -127,7 +50,7 @@ > .alert + .alert, > .navbar + .navbar, > .progress + .progress { - margin-top: 1rem; + margin-top: $spacer; } > .dropdown-menu { @@ -171,30 +94,80 @@ .fixed-top, .sticky-top { position: static; - margin: -1rem -1rem 1rem; + margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list } .fixed-bottom, .sticky-bottom { position: static; - margin: 1rem -1rem -1rem; - } + margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list - @include media-breakpoint-up(sm) { - .fixed-top, - .sticky-top { - margin: -1.5rem -1.5rem 1rem; - } - .fixed-bottom, - .sticky-bottom { - margin: 1rem -1.5rem -1.5rem; - } } // Pagination .pagination { - margin-top: .5rem; - margin-bottom: .5rem; + margin-bottom: 0; + } +} + +// +// Grid examples +// + +.bd-example-row [class^="col"], +.bd-example-cssgrid .grid > * { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(var(--bd-violet-rgb), .1); + border: 1px solid rgba(var(--bd-violet-rgb), .25); +} + +.bd-example-row .row + .row, +.bd-example-cssgrid .grid + .grid { + margin-top: 1rem; +} + +.bd-example-row-flex-cols .row { + min-height: 10rem; + background-color: rgba(255, 0, 0, .1); +} + +.bd-example-flex div { + background-color: rgba($bd-purple, .15); + border: 1px solid rgba($bd-purple, .15); +} + +// Grid mixins +.example-container { + width: 800px; + @include make-container(); +} + +.example-row { + @include make-row(); +} + +.example-content-main { + @include make-col-ready(); + + @include media-breakpoint-up(sm) { + @include make-col(6); + } + + @include media-breakpoint-up(lg) { + @include make-col(8); + } +} + +.example-content-secondary { + @include make-col-ready(); + + @include media-breakpoint-up(sm) { + @include make-col(6); + } + + @include media-breakpoint-up(lg) { + @include make-col(4); } } @@ -224,18 +197,7 @@ } } -.bd-example-modal { - background-color: #fafafa; - - .modal { - position: static; - display: block; - } -} - .bd-example-offcanvas { - @include border-start-radius(0); - .offcanvas { position: static; display: block; @@ -250,9 +212,11 @@ white-space: nowrap; } +// scss-docs-start custom-tooltip .custom-tooltip { --bs-tooltip-bg: var(--bs-primary); } +// scss-docs-end custom-tooltip // scss-docs-start custom-popovers .custom-popover { @@ -290,7 +254,6 @@ .active { background-color: rgba($bd-purple, .15); } - } .bd-example-border-utils { @@ -317,7 +280,7 @@ .bd-example-position-utils { position: relative; - padding: 3em; + padding: 2rem; .position-relative { height: 200px; @@ -325,8 +288,8 @@ } .position-absolute { - width: 2em; - height: 2em; + width: 2rem; + height: 2rem; background-color: $dark; @include border-radius(); } @@ -398,6 +361,7 @@ } .bd-example { + margin: 0; border: 0; } diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md index a33f7e615d..d9bd120d46 100644 --- a/site/content/docs/5.1/components/modal.md +++ b/site/content/docs/5.1/components/modal.md @@ -38,8 +38,8 @@ Keep reading for demos and usage guidelines. Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action. -
-
+
+
diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md index 3abdc3acf0..56ae26e6ba 100644 --- a/site/content/docs/5.1/components/offcanvas.md +++ b/site/content/docs/5.1/components/offcanvas.md @@ -151,7 +151,7 @@ Responsive offcanvas classes hide content outside the viewport from a specified
Responsive offcanvas
- +

This is content within an .offcanvas-lg.

diff --git a/site/content/docs/5.1/components/pagination.md b/site/content/docs/5.1/components/pagination.md index 8e05a18614..7251405761 100644 --- a/site/content/docs/5.1/components/pagination.md +++ b/site/content/docs/5.1/components/pagination.md @@ -122,7 +122,7 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for ## Alignment -Change the alignment of pagination components with [flexbox utilities]({{< docsref "/utilities/flex" >}}). +Change the alignment of pagination components with [flexbox utilities]({{< docsref "/utilities/flex" >}}). For example, with `.justify-content-center`: {{< example >}} {{< /example >}} +Or with `.justify-content-end`: + {{< example >}}