mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-06 13:46:42 +02:00
Don't import Bootstrap CSS again
This commit is contained in:
Mark Otto
6
package-lock.json
generated
6
package-lock.json
generated
@@ -18,11 +18,6 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"remark": "^15.0.1",
|
||||
"remark-html": "^16.0.1",
|
||||
"yaml": "^2.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@astrojs/check": "^0.9.4",
|
||||
"@astrojs/markdown-remark": "^6.3.2",
|
||||
@@ -19383,6 +19378,7 @@
|
||||
"version": "2.8.0",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
|
||||
"integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"bin": {
|
||||
"yaml": "bin.mjs"
|
||||
|
||||
@@ -146,6 +146,7 @@ $utilities: map.merge(
|
||||
)
|
||||
),
|
||||
"border-top": (
|
||||
class: border-top,
|
||||
property: border-block-start,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
@@ -162,6 +163,7 @@ $utilities: map.merge(
|
||||
),
|
||||
"border-bottom": (
|
||||
property: border-block-end,
|
||||
class: border-bottom,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||
0: 0,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
// import { getVersionedBsCssProps } from '@libs/bootstrap'
|
||||
import { getVersionedBsCssProps } from '@libs/bootstrap'
|
||||
import type { Layout } from '@libs/layout'
|
||||
|
||||
interface Props {
|
||||
@@ -10,5 +10,6 @@ interface Props {
|
||||
const { direction } = Astro.props
|
||||
---
|
||||
|
||||
<!-- <link {...getVersionedBsCssProps(direction)} /> -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
|
||||
|
||||
<link {...getVersionedBsCssProps(direction)} />
|
||||
|
||||
@@ -80,7 +80,7 @@ const simplifiedMarkup = markup
|
||||
showMarkup && (
|
||||
<>
|
||||
{showPreview && (
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1" data-bs-theme="dark">
|
||||
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
|
||||
<small class="font-monospace text-body-secondary text-uppercase">{lang}</small>
|
||||
<div class="d-flex ms-auto">
|
||||
<button
|
||||
|
||||
@@ -6,389 +6,392 @@
|
||||
@use "../../../scss/mixins/border-radius" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
//
|
||||
// Docs examples
|
||||
//
|
||||
|
||||
.bd-code-snippet {
|
||||
margin: 0 ($bd-gutter-x * -.5) 1rem;
|
||||
border: solid var(--bs-border-color);
|
||||
border-width: 1px 0;
|
||||
@layer custom {
|
||||
//
|
||||
// Docs examples
|
||||
//
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-width: 1px;
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
}
|
||||
}
|
||||
.bd-code-snippet {
|
||||
margin: 0 ($bd-gutter-x * -.5) 1rem;
|
||||
border: solid var(--bs-border-color);
|
||||
border-width: 1px 0;
|
||||
|
||||
.bd-example {
|
||||
--bd-example-padding: 1rem;
|
||||
|
||||
position: relative;
|
||||
padding: var(--bd-example-padding);
|
||||
margin: 0 ($bd-gutter-x * -.5) 1rem;
|
||||
border: solid var(--bs-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-radius(var(--bs-border-radius));
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-width: 1px;
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
}
|
||||
}
|
||||
|
||||
+ p {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.bd-example {
|
||||
--bd-example-padding: 1rem;
|
||||
|
||||
> .form-control {
|
||||
+ .form-control {
|
||||
position: relative;
|
||||
padding: var(--bd-example-padding);
|
||||
margin: 0 ($bd-gutter-x * -.5) 1rem;
|
||||
border: solid var(--bs-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-radius(var(--bs-border-radius));
|
||||
}
|
||||
|
||||
+ 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,
|
||||
> nav:last-child .breadcrumb {
|
||||
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);
|
||||
}
|
||||
|
||||
.fixed-bottom,
|
||||
.sticky-bottom {
|
||||
position: static;
|
||||
margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1);
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .nav + .nav,
|
||||
> .alert + .alert,
|
||||
> .navbar + .navbar,
|
||||
> .progress + .progress {
|
||||
margin-top: $spacer;
|
||||
//
|
||||
// Grid examples
|
||||
//
|
||||
|
||||
.bd-example-row [class^="col"],
|
||||
.bd-example-cols [class^="col"] > *,
|
||||
.bd-example-cssgrid [class*="grid"] > * {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(var(--bd-violet-rgb), .15);
|
||||
border: 1px solid rgba(var(--bd-violet-rgb), .3);
|
||||
}
|
||||
|
||||
> .dropdown-menu {
|
||||
position: static;
|
||||
display: block;
|
||||
.bd-example-row .row + .row,
|
||||
.bd-example-cssgrid .grid + .grid {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
> :last-child,
|
||||
> nav:last-child .breadcrumb {
|
||||
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);
|
||||
}
|
||||
|
||||
.fixed-bottom,
|
||||
.sticky-bottom {
|
||||
position: static;
|
||||
margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1);
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Grid examples
|
||||
//
|
||||
|
||||
.bd-example-row [class^="col"],
|
||||
.bd-example-cols [class^="col"] > *,
|
||||
.bd-example-cssgrid [class*="grid"] > * {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(var(--bd-violet-rgb), .15);
|
||||
border: 1px solid rgba(var(--bd-violet-rgb), .3);
|
||||
}
|
||||
|
||||
.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(var(--bd-violet-rgb), .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
|
||||
// .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 {
|
||||
[class*="ratio"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--bs-secondary-color);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bd-example-offcanvas {
|
||||
.offcanvas {
|
||||
position: static;
|
||||
display: block;
|
||||
height: 200px;
|
||||
visibility: visible;
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
.tooltip-demo {
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: .25rem .125rem;
|
||||
}
|
||||
}
|
||||
|
||||
// scss-docs-start custom-tooltip
|
||||
.custom-tooltip {
|
||||
--bs-tooltip-bg: var(--bd-violet-bg);
|
||||
--bs-tooltip-color: var(--bs-white);
|
||||
}
|
||||
// scss-docs-end custom-tooltip
|
||||
|
||||
// scss-docs-start custom-popovers
|
||||
.custom-popover {
|
||||
--bs-popover-max-width: 200px;
|
||||
--bs-popover-border-color: var(--bd-violet-bg);
|
||||
--bs-popover-header-bg: var(--bd-violet-bg);
|
||||
--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 {
|
||||
.bd-example-row-flex-cols .row {
|
||||
min-height: 10rem;
|
||||
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: var(--bs-tertiary-bg);
|
||||
.bd-example-flex div:not(.vr) {
|
||||
background-color: rgba(var(--bd-violet-rgb), .15);
|
||||
border: 1px solid rgba(var(--bd-violet-rgb), .3);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-rounded-utils {
|
||||
[class*="rounded"] {
|
||||
margin: .25rem;
|
||||
// // 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 {
|
||||
[class*="ratio"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--bs-secondary-color);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-position-utils {
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
|
||||
.position-relative {
|
||||
.bd-example-offcanvas {
|
||||
.offcanvas {
|
||||
position: static;
|
||||
display: block;
|
||||
height: 200px;
|
||||
visibility: visible;
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
.tooltip-demo {
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: .25rem .125rem;
|
||||
}
|
||||
}
|
||||
|
||||
// scss-docs-start custom-tooltip
|
||||
.custom-tooltip {
|
||||
--bs-tooltip-bg: var(--bd-violet-bg);
|
||||
--bs-tooltip-color: var(--bs-white);
|
||||
}
|
||||
// scss-docs-end custom-tooltip
|
||||
|
||||
// scss-docs-start custom-popovers
|
||||
.custom-popover {
|
||||
--bs-popover-max-width: 200px;
|
||||
--bs-popover-border-color: var(--bd-violet-bg);
|
||||
--bs-popover-header-bg: var(--bd-violet-bg);
|
||||
--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;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
margin-top: .5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.position-absolute {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: var(--bs-body-color);
|
||||
@include border-radius();
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-position-examples {
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholders
|
||||
.bd-example-placeholder-cards {
|
||||
&::after {
|
||||
display: none;
|
||||
.scrollspy-example-2 {
|
||||
height: 350px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Toasts
|
||||
.bd-example-toasts {
|
||||
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;
|
||||
.simple-list-example-scrollspy {
|
||||
.active {
|
||||
background-color: rgba(var(--bd-violet-rgb), .15);
|
||||
}
|
||||
}
|
||||
|
||||
> :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
|
||||
//
|
||||
|
||||
.highlight {
|
||||
position: relative;
|
||||
padding: .75rem ($bd-gutter-x * .5);
|
||||
background-color: var(--bd-pre-bg);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: .75rem 1.25rem;
|
||||
@include border-radius(calc(var(--bs-border-radius) - 1px));
|
||||
.bd-example-border-utils {
|
||||
[class^="border"] {
|
||||
display: inline-block;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: .25rem;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.bd-example-rounded-utils {
|
||||
[class*="rounded"] {
|
||||
margin: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-position-utils {
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
|
||||
.position-relative {
|
||||
height: 200px;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
.position-absolute {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: var(--bs-body-color);
|
||||
@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;
|
||||
}
|
||||
|
||||
.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
|
||||
//
|
||||
|
||||
.highlight {
|
||||
position: relative;
|
||||
padding: .75rem ($bd-gutter-x * .5);
|
||||
background-color: var(--bd-pre-bg);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: .75rem 1.25rem;
|
||||
@include border-radius(calc(var(--bs-border-radius) - 1px));
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
pre {
|
||||
margin-right: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-right: 1.875rem;
|
||||
padding: .25rem 0 .875rem;
|
||||
margin-top: .8125rem;
|
||||
margin-bottom: 0;
|
||||
overflow: overlay;
|
||||
white-space: pre;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
pre code {
|
||||
@include font-size(inherit);
|
||||
color: var(--bs-body-color); // Effectively the base text color
|
||||
word-wrap: normal;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: .25rem 0 .875rem;
|
||||
margin-top: .8125rem;
|
||||
margin-bottom: 0;
|
||||
overflow: overlay;
|
||||
white-space: pre;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
.bd-example-snippet .highlight pre {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
pre code {
|
||||
@include font-size(inherit);
|
||||
color: var(--bs-body-color); // Effectively the base text color
|
||||
word-wrap: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-snippet .highlight pre {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.highlight-toolbar {
|
||||
background-color: var(--bd-pre-bg);
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.bd-file-ref {
|
||||
.highlight-toolbar {
|
||||
@include border-top-radius(calc(var(--bs-border-radius) + 1px));
|
||||
background-color: var(--bd-pre-bg);
|
||||
border-bottom: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.bd-file-ref {
|
||||
.highlight-toolbar {
|
||||
@include border-top-radius(calc(var(--bs-border-radius) + 1px));
|
||||
}
|
||||
}
|
||||
|
||||
.bd-content .bd-code-snippet {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-content .bd-code-snippet {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@@ -22,28 +22,26 @@
|
||||
//
|
||||
// Happy Bootstrapping!
|
||||
|
||||
@use "../../../scss/bootstrap" as *;
|
||||
|
||||
// Load docs components
|
||||
@use "variables";
|
||||
@use "navbar";
|
||||
@use "masthead";
|
||||
@use "ads";
|
||||
@use "content";
|
||||
@use "skippy";
|
||||
@use "sidebar";
|
||||
@use "layout";
|
||||
@use "toc";
|
||||
@use "footer";
|
||||
@use "component-examples";
|
||||
@use "buttons";
|
||||
@use "callouts";
|
||||
@use "brand";
|
||||
@use "colors";
|
||||
@use "clipboard-js";
|
||||
@use "placeholder-img";
|
||||
@use "scrolling";
|
||||
@use "./variables";
|
||||
@use "./navbar";
|
||||
@use "./masthead";
|
||||
@use "./ads";
|
||||
@use "./content";
|
||||
@use "./skippy";
|
||||
@use "./sidebar";
|
||||
@use "./layout";
|
||||
@use "./toc";
|
||||
@use "./footer";
|
||||
@use "./component-examples";
|
||||
@use "./buttons";
|
||||
@use "./callouts";
|
||||
@use "./brand";
|
||||
@use "./colors";
|
||||
@use "./clipboard-js";
|
||||
@use "./placeholder-img";
|
||||
@use "./scrolling";
|
||||
|
||||
// Load docs dependencies
|
||||
@use "syntax";
|
||||
@use "anchor";
|
||||
@use "./syntax";
|
||||
@use "./anchor";
|
||||
|
||||
Reference in New Issue
Block a user