diff options
Diffstat (limited to 'site/assets/scss/_component-examples.scss')
-rw-r--r-- | site/assets/scss/_component-examples.scss | 359 |
1 files changed, 359 insertions, 0 deletions
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss new file mode 100644 index 0000000..f4865da --- /dev/null +++ b/site/assets/scss/_component-examples.scss @@ -0,0 +1,359 @@ +// +// Docs examples +// + +.bd-example-snippet { + border: solid $border-color; + border-width: 1px 0; + + @include media-breakpoint-up(md) { + border-width: 1px; + } +} + +.bd-example { + --bd-example-padding: 1rem; + + position: relative; + padding: var(--bd-example-padding); + margin: 0 ($bd-gutter-x * -.5); + border: solid $border-color; + border-width: 1px 0; + @include clearfix(); + + @include media-breakpoint-up(md) { + --bd-example-padding: 1.5rem; + + 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; + } + + + p { + margin-top: 2rem; + } + + > .form-control { + + .form-control { + margin-top: .5rem; + } + } + + > .nav + .nav, + > .alert + .alert, + > .navbar + .navbar, + > .progress + .progress { + margin-top: $spacer; + } + + > .dropdown-menu { + position: static; + display: block; + } + + > :last-child { + margin-bottom: 0; + } + + > hr:last-child { + margin-bottom: $spacer; + } + + // Images + > svg + svg, + > img + img { + margin-left: .5rem; + } + + // Buttons + > .btn, + > .btn-group { + margin: .25rem .125rem; + } + > .btn-toolbar + .btn-toolbar { + margin-top: .5rem; + } + + // List groups + > .list-group { + max-width: 400px; + } + + > [class*="list-group-horizontal"] { + max-width: 100%; + } + + // Navbars + .fixed-top, + .sticky-top { + position: static; + 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: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list + + } + + // Pagination + .pagination { + 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); + } +} + +// Ratio helpers +.bd-example-ratios { + .ratio { + display: inline-block; + width: 10rem; + color: $gray-600; + background-color: $gray-100; + border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color); + + > div { + display: flex; + align-items: center; + justify-content: center; + } + } +} +.bd-example-ratios-breakpoint { + .ratio-4x3 { + width: 16rem; + + @include media-breakpoint-up(md) { + --bs-aspect-ratio: 50%; // 2x1 + } + } +} + +.bd-example-offcanvas { + .offcanvas { + position: static; + display: block; + height: 200px; + visibility: visible; + transform: translate(0); + } +} + +// Tooltips +.tooltip-demo a { + 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 { + --bs-popover-max-width: 200px; + --bs-popover-border-color: var(--bs-primary); + --bs-popover-header-bg: var(--bs-primary); + --bs-popover-header-color: var(--bs-white); + --bs-popover-body-padding-x: 1rem; + --bs-popover-body-padding-y: .5rem; +} +// scss-docs-end custom-popovers + +// Scrollspy demo on fixed height div +.scrollspy-example { + height: 200px; + margin-top: .5rem; + overflow: auto; +} + +.scrollspy-example-2 { + height: 350px; + overflow: auto; +} + +.simple-list-example-scrollspy { + .active { + background-color: rgba(var(--bd-violet-rgb), .15); + } +} + +.bd-example-border-utils { + [class^="border"] { + display: inline-block; + width: 5rem; + height: 5rem; + margin: .25rem; + background-color: #f5f5f5; + } +} + +.bd-example-rounded-utils { + [class*="rounded"] { + margin: .25rem; + } +} + +.bd-example-position-utils { + position: relative; + padding: 2rem; + + .position-relative { + height: 200px; + background-color: #f5f5f5; + } + + .position-absolute { + width: 2rem; + height: 2rem; + background-color: $dark; + @include border-radius(); + } +} + +.bd-example-position-examples { + &::after { + content: none; + } +} + +// Placeholders +.bd-example-placeholder-cards { + &::after { + display: none; + } + + .card { + width: 18rem; + } +} + +// Toasts +.bd-example-toasts { + min-height: 240px; +} + +// +// Code snippets +// + +.highlight { + position: relative; + padding: .75rem ($bd-gutter-x * .5); + margin-bottom: 1rem; + background-color: var(--bs-gray-100); + + @include media-breakpoint-up(md) { + padding: .75rem 1.25rem; + @include border-radius(var(--bs-border-radius)); + } + + pre { + padding: 0; + margin-top: .625rem; + margin-right: 1.875rem; + margin-bottom: .625rem; + white-space: pre; + background-color: transparent; + border: 0; + } + + pre code { + @include font-size(inherit); + color: $gray-900; // Effectively the base text color + word-wrap: normal; + } +} + +.bd-code-snippet { + margin: 0 ($bd-gutter-x * -.5) $spacer; + + .highlight { + margin-bottom: 0; + } + + .bd-example { + margin: 0; + border: 0; + } + + @include media-breakpoint-up(md) { + margin-right: 0; + margin-left: 0; + @include border-radius($border-radius); + } +} + +.highlight-toolbar { + border: solid $border-color; + border-width: 1px 0; +} |