From c1d5a801b4bc66e3866f815be00e11d1b20d3539 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 24 Jun 2023 14:44:36 +0200 Subject: Adding upstream version 5.3.0+dfsg. Signed-off-by: Daniel Baumann --- site/assets/scss/_component-examples.scss | 142 +++++++++++++++++++----------- 1 file changed, 91 insertions(+), 51 deletions(-) (limited to 'site/assets/scss/_component-examples.scss') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index f4865da..0f1018b 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -2,12 +2,16 @@ // Docs examples // -.bd-example-snippet { - border: solid $border-color; +.bd-code-snippet { + margin: 0 ($bd-gutter-x * -.5) 1rem; + border: solid var(--bs-border-color); border-width: 1px 0; @include media-breakpoint-up(md) { + margin-right: 0; + margin-left: 0; border-width: 1px; + @include border-radius(var(--bs-border-radius)); } } @@ -16,8 +20,8 @@ position: relative; padding: var(--bd-example-padding); - margin: 0 ($bd-gutter-x * -.5); - border: solid $border-color; + margin: 0 ($bd-gutter-x * -.5) 1rem; + border: solid var(--bs-border-color); border-width: 1px 0; @include clearfix(); @@ -27,13 +31,7 @@ margin-right: 0; margin-left: 0; border-width: 1px; - @include border-top-radius(var(--bs-border-radius)); - } - - + .bd-code-snippet { - @include border-top-radius(0); - border: solid $border-color; - border-width: 0 1px 1px; + @include border-radius(var(--bs-border-radius)); } + p { @@ -58,7 +56,8 @@ display: block; } - > :last-child { + > :last-child, + > nav:last-child .breadcrumb { margin-bottom: 0; } @@ -115,11 +114,12 @@ // .bd-example-row [class^="col"], -.bd-example-cssgrid .grid > * { +.bd-example-cols [class^="col"] > *, +.bd-example-cssgrid [class*="grid"] > * { padding-top: .75rem; padding-bottom: .75rem; - background-color: rgba(var(--bd-violet-rgb), .1); - border: 1px solid rgba(var(--bd-violet-rgb), .25); + background-color: rgba(var(--bd-violet-rgb), .15); + border: 1px solid rgba(var(--bd-violet-rgb), .3); } .bd-example-row .row + .row, @@ -129,12 +129,12 @@ .bd-example-row-flex-cols .row { min-height: 10rem; - background-color: rgba(255, 0, 0, .1); + background-color: rgba(var(--bd-violet-rgb), .15); } -.bd-example-flex div { - background-color: rgba($bd-purple, .15); - border: 1px solid rgba($bd-purple, .15); +.bd-example-flex div:not(.vr) { + background-color: rgba(var(--bd-violet-rgb), .15); + border: 1px solid rgba(var(--bd-violet-rgb), .3); } // Grid mixins @@ -176,9 +176,9 @@ .ratio { display: inline-block; width: 10rem; - color: $gray-600; - background-color: $gray-100; - border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color); + color: var(--bs-secondary-color); + background-color: var(--bs-tertiary-bg); + border: var(--bs-border-width) solid var(--bs-border-color); > div { display: flex; @@ -208,8 +208,14 @@ } // Tooltips -.tooltip-demo a { - white-space: nowrap; +.tooltip-demo { + a { + white-space: nowrap; + } + + .btn { + margin: .25rem .125rem; + } } // scss-docs-start custom-tooltip @@ -253,7 +259,7 @@ width: 5rem; height: 5rem; margin: .25rem; - background-color: #f5f5f5; + background-color: var(--bs-tertiary-bg); } } @@ -269,13 +275,13 @@ .position-relative { height: 200px; - background-color: #f5f5f5; + background-color: var(--bs-tertiary-bg); } .position-absolute { width: 2rem; height: 2rem; - background-color: $dark; + background-color: var(--bs-body-color); @include border-radius(); } } @@ -302,6 +308,39 @@ min-height: 240px; } +.bd-example-zindex-levels { + min-height: 15rem; + + > div { + color: var(--bs-body-bg); + background-color: var(--bd-violet); + border: 1px solid var(--bd-purple); + + > span { + position: absolute; + right: 5px; + bottom: 0; + } + } + + > :nth-child(2) { + top: 3rem; + left: 3rem; + } + > :nth-child(3) { + top: 4.5rem; + left: 4.5rem; + } + > :nth-child(4) { + top: 6rem; + left: 6rem; + } + > :nth-child(5) { + top: 7.5rem; + left: 7.5rem; + } +} + // // Code snippets // @@ -309,19 +348,24 @@ .highlight { position: relative; padding: .75rem ($bd-gutter-x * .5); - margin-bottom: 1rem; - background-color: var(--bs-gray-100); + background-color: var(--bd-pre-bg); @include media-breakpoint-up(md) { padding: .75rem 1.25rem; - @include border-radius(var(--bs-border-radius)); + @include border-radius(calc(var(--bs-border-radius) - 1px)); + } + + @include media-breakpoint-up(lg) { + pre { + margin-right: 1.875rem; + } } pre { - padding: 0; - margin-top: .625rem; - margin-right: 1.875rem; - margin-bottom: .625rem; + padding: .25rem 0 .875rem; + margin-top: .8125rem; + margin-bottom: 0; + overflow: overlay; white-space: pre; background-color: transparent; border: 0; @@ -329,31 +373,27 @@ pre code { @include font-size(inherit); - color: $gray-900; // Effectively the base text color + color: var(--bs-body-color); // Effectively the base text color word-wrap: normal; } } -.bd-code-snippet { - margin: 0 ($bd-gutter-x * -.5) $spacer; - - .highlight { - margin-bottom: 0; - } +.highlight-toolbar { + background-color: var(--bd-pre-bg); - .bd-example { - margin: 0; - border: 0; + + .highlight { + @include border-top-radius(0); } +} - @include media-breakpoint-up(md) { - margin-right: 0; - margin-left: 0; - @include border-radius($border-radius); +.bd-file-ref { + .highlight-toolbar { + @include media-breakpoint-up(md) { + @include border-top-radius(calc(var(--bs-border-radius) - 1px)); + } } } -.highlight-toolbar { - border: solid $border-color; - border-width: 1px 0; +.bd-content .bd-code-snippet { + margin-bottom: 1rem; } -- cgit v1.2.3