mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-06 21:56: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",
|
"license": "MIT",
|
||||||
"dependencies": {
|
|
||||||
"remark": "^15.0.1",
|
|
||||||
"remark-html": "^16.0.1",
|
|
||||||
"yaml": "^2.7.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@astrojs/check": "^0.9.4",
|
"@astrojs/check": "^0.9.4",
|
||||||
"@astrojs/markdown-remark": "^6.3.2",
|
"@astrojs/markdown-remark": "^6.3.2",
|
||||||
@@ -19383,6 +19378,7 @@
|
|||||||
"version": "2.8.0",
|
"version": "2.8.0",
|
||||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
|
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
|
||||||
"integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
|
"integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
|
||||||
|
"dev": true,
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"bin": {
|
"bin": {
|
||||||
"yaml": "bin.mjs"
|
"yaml": "bin.mjs"
|
||||||
|
|||||||
@@ -146,6 +146,7 @@ $utilities: map.merge(
|
|||||||
)
|
)
|
||||||
),
|
),
|
||||||
"border-top": (
|
"border-top": (
|
||||||
|
class: border-top,
|
||||||
property: border-block-start,
|
property: border-block-start,
|
||||||
values: (
|
values: (
|
||||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||||
@@ -162,6 +163,7 @@ $utilities: map.merge(
|
|||||||
),
|
),
|
||||||
"border-bottom": (
|
"border-bottom": (
|
||||||
property: border-block-end,
|
property: border-block-end,
|
||||||
|
class: border-bottom,
|
||||||
values: (
|
values: (
|
||||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
|
||||||
0: 0,
|
0: 0,
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
// import { getVersionedBsCssProps } from '@libs/bootstrap'
|
import { getVersionedBsCssProps } from '@libs/bootstrap'
|
||||||
import type { Layout } from '@libs/layout'
|
import type { Layout } from '@libs/layout'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -10,5 +10,6 @@ interface Props {
|
|||||||
const { direction } = Astro.props
|
const { direction } = Astro.props
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- <link {...getVersionedBsCssProps(direction)} /> -->
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
|
||||||
|
|
||||||
|
<link {...getVersionedBsCssProps(direction)} />
|
||||||
|
|||||||
@@ -80,7 +80,7 @@ const simplifiedMarkup = markup
|
|||||||
showMarkup && (
|
showMarkup && (
|
||||||
<>
|
<>
|
||||||
{showPreview && (
|
{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>
|
<small class="font-monospace text-body-secondary text-uppercase">{lang}</small>
|
||||||
<div class="d-flex ms-auto">
|
<div class="d-flex ms-auto">
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -6,389 +6,392 @@
|
|||||||
@use "../../../scss/mixins/border-radius" as *;
|
@use "../../../scss/mixins/border-radius" as *;
|
||||||
@use "variables" as *;
|
@use "variables" as *;
|
||||||
|
|
||||||
//
|
|
||||||
// Docs examples
|
|
||||||
//
|
|
||||||
|
|
||||||
.bd-code-snippet {
|
@layer custom {
|
||||||
margin: 0 ($bd-gutter-x * -.5) 1rem;
|
//
|
||||||
border: solid var(--bs-border-color);
|
// Docs examples
|
||||||
border-width: 1px 0;
|
//
|
||||||
|
|
||||||
@include media-breakpoint-up(md) {
|
.bd-code-snippet {
|
||||||
margin-right: 0;
|
margin: 0 ($bd-gutter-x * -.5) 1rem;
|
||||||
margin-left: 0;
|
border: solid var(--bs-border-color);
|
||||||
border-width: 1px;
|
border-width: 1px 0;
|
||||||
@include border-radius(var(--bs-border-radius));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-example {
|
@include media-breakpoint-up(md) {
|
||||||
--bd-example-padding: 1rem;
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
position: relative;
|
border-width: 1px;
|
||||||
padding: var(--bd-example-padding);
|
@include border-radius(var(--bs-border-radius));
|
||||||
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 {
|
.bd-example {
|
||||||
margin-top: 2rem;
|
--bd-example-padding: 1rem;
|
||||||
}
|
|
||||||
|
|
||||||
> .form-control {
|
position: relative;
|
||||||
+ .form-control {
|
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;
|
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,
|
// Grid examples
|
||||||
> .navbar + .navbar,
|
//
|
||||||
> .progress + .progress {
|
|
||||||
margin-top: $spacer;
|
.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 {
|
.bd-example-row .row + .row,
|
||||||
position: static;
|
.bd-example-cssgrid .grid + .grid {
|
||||||
display: block;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
> :last-child,
|
.bd-example-row-flex-cols .row {
|
||||||
> nav:last-child .breadcrumb {
|
min-height: 10rem;
|
||||||
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 {
|
|
||||||
background-color: rgba(var(--bd-violet-rgb), .15);
|
background-color: rgba(var(--bd-violet-rgb), .15);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.bd-example-border-utils {
|
.bd-example-flex div:not(.vr) {
|
||||||
[class^="border"] {
|
background-color: rgba(var(--bd-violet-rgb), .15);
|
||||||
display: inline-block;
|
border: 1px solid rgba(var(--bd-violet-rgb), .3);
|
||||||
width: 5rem;
|
|
||||||
height: 5rem;
|
|
||||||
margin: .25rem;
|
|
||||||
background-color: var(--bs-tertiary-bg);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.bd-example-rounded-utils {
|
// // Grid mixins
|
||||||
[class*="rounded"] {
|
// .example-container {
|
||||||
margin: .25rem;
|
// 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;
|
height: 200px;
|
||||||
background-color: var(--bs-tertiary-bg);
|
margin-top: .5rem;
|
||||||
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.position-absolute {
|
.scrollspy-example-2 {
|
||||||
width: 2rem;
|
height: 350px;
|
||||||
height: 2rem;
|
overflow: auto;
|
||||||
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 {
|
.simple-list-example-scrollspy {
|
||||||
width: 18rem;
|
.active {
|
||||||
}
|
background-color: rgba(var(--bd-violet-rgb), .15);
|
||||||
}
|
|
||||||
|
|
||||||
// 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) {
|
.bd-example-border-utils {
|
||||||
top: 3rem;
|
[class^="border"] {
|
||||||
left: 3rem;
|
display: inline-block;
|
||||||
}
|
width: 5rem;
|
||||||
> :nth-child(3) {
|
height: 5rem;
|
||||||
top: 4.5rem;
|
margin: .25rem;
|
||||||
left: 4.5rem;
|
background-color: var(--bs-tertiary-bg);
|
||||||
}
|
}
|
||||||
> :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) {
|
.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 {
|
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 {
|
.bd-example-snippet .highlight pre {
|
||||||
padding: .25rem 0 .875rem;
|
margin-right: 0;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
.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!
|
// Happy Bootstrapping!
|
||||||
|
|
||||||
@use "../../../scss/bootstrap" as *;
|
|
||||||
|
|
||||||
// Load docs components
|
// Load docs components
|
||||||
@use "variables";
|
@use "./variables";
|
||||||
@use "navbar";
|
@use "./navbar";
|
||||||
@use "masthead";
|
@use "./masthead";
|
||||||
@use "ads";
|
@use "./ads";
|
||||||
@use "content";
|
@use "./content";
|
||||||
@use "skippy";
|
@use "./skippy";
|
||||||
@use "sidebar";
|
@use "./sidebar";
|
||||||
@use "layout";
|
@use "./layout";
|
||||||
@use "toc";
|
@use "./toc";
|
||||||
@use "footer";
|
@use "./footer";
|
||||||
@use "component-examples";
|
@use "./component-examples";
|
||||||
@use "buttons";
|
@use "./buttons";
|
||||||
@use "callouts";
|
@use "./callouts";
|
||||||
@use "brand";
|
@use "./brand";
|
||||||
@use "colors";
|
@use "./colors";
|
||||||
@use "clipboard-js";
|
@use "./clipboard-js";
|
||||||
@use "placeholder-img";
|
@use "./placeholder-img";
|
||||||
@use "scrolling";
|
@use "./scrolling";
|
||||||
|
|
||||||
// Load docs dependencies
|
// Load docs dependencies
|
||||||
@use "syntax";
|
@use "./syntax";
|
||||||
@use "anchor";
|
@use "./anchor";
|
||||||
|
|||||||
Reference in New Issue
Block a user