diff options
author | Mark Otto <markd.otto@gmail.com> | 2022-04-19 21:21:43 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-04-19 21:21:43 +0300 |
commit | e089aef00fef68c6a815327d8b988e14cfcf4d9b (patch) | |
tree | 12b55f0088354b7be006fe9f3934e291fab08d07 /site/assets/scss | |
parent | 9ec51f449904bae076b2334e748559706182f046 (diff) |
Refactor some docs examples CSS (#36194)
* Fix some more borders and margins
* Flex utilities docs: remove .bd-highlight class from snippets
* Explicit close target
* Reorder to keep base class up top
* Fix custom position example
* Tooltips: add code snippet, use scss-docs ref for custom tooltip
* Tweak text for pagination examples
* Modals: move custom styles to utilities
* Grid docs: Combine selectors and share coloring
* Refactor tons of little things
Diffstat (limited to 'site/assets/scss')
-rw-r--r-- | site/assets/scss/_component-examples.scss | 190 |
1 files changed, 77 insertions, 113 deletions
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,84 +1,4 @@ // -// 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; } |