<Code containerClass="bd-example-snippet bd-code-snippet bd-file-ref" code={content} lang="js">
<div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a
- class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
+ class="text-decoration-none color-body"
href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
+ target="_blank"
+ rel="noopener noreferrer"
>
{file}
</a>
<Code containerClass="bd-example-snippet bd-file-ref" code={content} lang="scss">
<div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a
- class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
+ class="text-decoration-none color-body"
href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
+ target="_blank"
+ rel="noopener noreferrer"
>
{file}
</a>
// Carbon ads
//
-#carbonads {
- position: static;
- max-width: 400px;
- padding: 15px 15px 15px 160px;
- margin: 1rem 0;
- overflow: hidden;
- @include font-size(.8125rem);
- line-height: 1.4;
- text-align: left;
- background-color: var(--bs-bg-1);
+@layer custom {
+ #carbonads {
+ position: static;
+ max-width: 400px;
+ padding: 15px 15px 15px 160px;
+ margin: 1rem 0;
+ overflow: hidden;
+ @include font-size(.8125rem);
+ line-height: 1.4;
+ text-align: left;
+ background-color: var(--bs-bg-1);
+
+ a {
+ color: var(--bs-body-color);
+ text-decoration: none;
+ }
- a {
- color: var(--bs-body-color);
- text-decoration: none;
+ @include media-breakpoint-up(sm) {
+ @include border-radius(.5rem);
+ }
}
- @include media-breakpoint-up(sm) {
- @include border-radius(.5rem);
+ .carbon-img {
+ float: left;
+ margin-left: -145px;
}
-}
-.carbon-img {
- float: left;
- margin-left: -145px;
-}
+ @container (max-width: 240px) {
+ #carbonads {
+ padding-left: 15px;
+ }
-@container (max-width: 240px) {
- #carbonads {
- padding-left: 15px;
- }
+ .carbon-img {
+ display: block;
+ float: none;
+ margin-left: 0;
+ }
- .carbon-img {
- display: block;
- float: none;
- margin-left: 0;
- }
+ .carbon-wrap {
+ display: flex;
+ flex-direction: column;
+ gap: .5rem;
+ }
- .carbon-wrap {
- display: flex;
- flex-direction: column;
- gap: .5rem;
+ .carbon-img > img {
+ width: 100%;
+ max-width: 100% !important;
+ height: auto;
+ @include border-radius(var(--bs-border-radius-sm));
+ }
}
- .carbon-img > img {
- width: 100%;
- max-width: 100% !important;
- height: auto;
- @include border-radius(var(--bs-border-radius-sm));
+ .carbon-poweredby {
+ display: block;
+ margin-top: .75rem;
+ color: var(--bs-fg-3) !important;
}
}
-
-.carbon-poweredby {
- display: block;
- margin-top: .75rem;
- color: var(--bs-fg-3) !important;
-}
@use "../../../scss/variables" as *;
@use "../../../scss/mixins/transition" as *;
-.anchor-link {
- padding: 0 .175rem;
- font-weight: 400;
- color: color-mix(in srgb, var(--#{$prefix}link-color), transparent .5);
- text-decoration: none;
- opacity: 0;
- @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
+@layer custom {
+ .anchor-link {
+ padding: 0 .175rem;
+ font-weight: 400;
+ color: color-mix(in srgb, var(--#{$prefix}link-color), transparent .5);
+ text-decoration: none;
+ opacity: 0;
+ @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
- &::after {
- content: "#";
- }
+ &::after {
+ content: "#";
+ }
- &:focus,
- &:hover,
- :hover > &,
- :target > & {
- color: var(--#{$prefix}link-color);
- text-decoration: none;
- opacity: 1;
+ &:focus,
+ &:hover,
+ :hover > &,
+ :target > & {
+ color: var(--#{$prefix}link-color);
+ text-decoration: none;
+ opacity: 0;
+ @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
+
+ &::after {
+ content: "#";
+ }
+
+ &:focus,
+ &:hover,
+ :hover > &,
+ :target > & {
+ color: var(--#{$prefix}link-color);
+ text-decoration: none;
+ opacity: 1;
+ }
+ }
}
}
// Brand guidelines
//
-// Logo series wrapper
-.bd-brand-logos {
- color: $bd-violet;
+@layer custom {
+ // Logo series wrapper
+ .bd-brand-logos {
+ color: $bd-violet;
- .inverse {
- color: $white;
- background-color: $bd-violet;
- }
-}
-
-// Individual items
-.bd-brand-item {
- + .bd-brand-item {
- border-top: 1px solid var(--bs-border-color);
+ .inverse {
+ color: $white;
+ background-color: $bd-violet;
+ }
}
- @include media-breakpoint-up(md) {
+ // Individual items
+ .bd-brand-item {
+ .bd-brand-item {
- border-top: 0;
- border-left: 1px solid var(--bs-border-color);
+ border-top: 1px solid var(--bs-border-color);
+ }
+
+ @include media-breakpoint-up(md) {
+ + .bd-brand-item {
+ border-top: 0;
+ border-left: 1px solid var(--bs-border-color);
+ }
}
}
-}
-//
-// Color swatches
-//
+ //
+ // Color swatches
+ //
-.color-swatches {
- margin: 0 -5px;
+ .color-swatches {
+ margin: 0 -5px;
- // Docs colors
- .bd-purple {
- background-color: $bd-purple;
- }
- .bd-purple-light {
- background-color: $bd-purple-light;
- }
- .bd-purple-lighter {
- background-color: #e5e1ea;
- }
- .bd-gray {
- background-color: #f9f9f9;
+ // Docs colors
+ .bd-purple {
+ background-color: $bd-purple;
+ }
+ .bd-purple-light {
+ background-color: $bd-purple-light;
+ }
+ .bd-purple-lighter {
+ background-color: #e5e1ea;
+ }
+ .bd-gray {
+ background-color: #f9f9f9;
+ }
}
-}
-.color-swatch {
- width: 4rem;
- height: 4rem;
+ .color-swatch {
+ width: 4rem;
+ height: 4rem;
- @include media-breakpoint-up(md) {
- width: 6rem;
- height: 6rem;
+ @include media-breakpoint-up(md) {
+ width: 6rem;
+ height: 6rem;
+ }
}
}
@use "../../../scss/colors" as *;
@use "variables" as *;
-// Buttons
-//
-// Custom buttons for the docs.
+@layer custom {
+ // scss-docs-start btn-css-vars-example
+ .btn-bd-primary {
+ --bs-btn-font-weight: 600;
+ --bs-btn-color: var(--bs-white);
+ --bs-btn-bg: var(--bd-violet-bg);
+ --bs-btn-border-color: var(--bd-violet-bg);
+ --bs-btn-hover-color: var(--bs-white);
+ --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
+ --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
+ --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+ --bs-btn-active-color: var(--bs-btn-hover-color);
+ --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
+ --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
+ }
+ // scss-docs-end btn-css-vars-example
-// scss-docs-start btn-css-vars-example
-.btn-bd-primary {
- --bs-btn-font-weight: 600;
- --bs-btn-color: var(--bs-white);
- --bs-btn-bg: var(--bd-violet-bg);
- --bs-btn-border-color: var(--bd-violet-bg);
- --bs-btn-hover-color: var(--bs-white);
- --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
- --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
- --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
- --bs-btn-active-color: var(--bs-btn-hover-color);
- --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
- --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
-}
-// scss-docs-end btn-css-vars-example
-
-.btn-bd-accent {
- --bs-btn-font-weight: 600;
- --bs-btn-color: var(--bd-accent);
- --bs-btn-border-color: var(--bd-accent);
- --bs-btn-hover-color: var(--bd-dark);
- --bs-btn-hover-bg: var(--bd-accent);
- --bs-btn-hover-border-color: var(--bd-accent);
- --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
- --bs-btn-active-color: var(--bs-btn-hover-color);
- --bs-btn-active-bg: var(--bs-btn-hover-bg);
- --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
-}
+ .btn-bd-accent {
+ --bs-btn-font-weight: 600;
+ --bs-btn-color: var(--bd-accent);
+ --bs-btn-border-color: var(--bd-accent);
+ --bs-btn-hover-color: var(--bd-dark);
+ --bs-btn-hover-bg: var(--bd-accent);
+ --bs-btn-hover-border-color: var(--bd-accent);
+ --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
+ --bs-btn-active-color: var(--bs-btn-hover-color);
+ --bs-btn-active-bg: var(--bs-btn-hover-bg);
+ --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
+ }
-.btn-bd-light {
- --btn-custom-color: #{color.mix($bd-violet, $white, 75%)};
+ .btn-bd-light {
+ --btn-custom-color: #{color.mix($bd-violet, $white, 75%)};
- --bs-btn-color: var(--bs-gray-600);
- --bs-btn-border-color: var(--bs-border-color);
- --bs-btn-hover-color: var(--btn-custom-color);
- --bs-btn-hover-border-color: var(--btn-custom-color);
- --bs-btn-active-color: var(--btn-custom-color);
- --bs-btn-active-bg: var(--bs-white);
- --bs-btn-active-border-color: var(--btn-custom-color);
- --bs-btn-focus-border-color: var(--btn-custom-color);
- --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
-}
+ --bs-btn-color: var(--bs-gray-600);
+ --bs-btn-border-color: var(--bs-border-color);
+ --bs-btn-hover-color: var(--btn-custom-color);
+ --bs-btn-hover-border-color: var(--btn-custom-color);
+ --bs-btn-active-color: var(--btn-custom-color);
+ --bs-btn-active-bg: var(--bs-white);
+ --bs-btn-active-border-color: var(--btn-custom-color);
+ --bs-btn-focus-border-color: var(--btn-custom-color);
+ --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+ }
-.bd-btn-lg {
- --bs-btn-border-radius: .5rem;
+ .bd-btn-lg {
+ --bs-btn-border-radius: .5rem;
- padding: .8125rem 2rem;
+ padding: .8125rem 2rem;
+ }
}
// Callouts
//
-.bd-callout {
- --#{$prefix}link-color: var(--bd-callout-color);
- --#{$prefix}link-hover-color: var(--bd-callout-color);
- --#{$prefix}code-color: var(--bd-callout-code-color);
-
- padding: 1.25rem;
- margin-top: 1.25rem;
- margin-bottom: 1.25rem;
- font-size: .875rem;
- line-height: 1.5;
- // color: var(--bd-callout-color, inherit);
- background-color: var(--bd-callout-bg, var(--bs-gray-100));
- border: 1px solid var(--bd-callout-border, var(--bs-border-color));
- border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
- @include border-radius(var(--bs-border-radius));
- // box-shadow: inset .25rem 0 0 var(--bd-callout-border, var(--bs-gray-300));
-
- h4 {
- margin-bottom: .25rem;
+@layer custom {
+ .bd-callout {
+ --#{$prefix}link-color: var(--bd-callout-color);
+ --#{$prefix}link-hover-color: var(--bd-callout-color);
+ --#{$prefix}code-color: var(--bd-callout-code-color);
+
+ padding: 1.25rem;
+ margin-top: 1.25rem;
+ margin-bottom: 1.25rem;
+ font-size: .875rem;
+ line-height: 1.5;
+ // color: var(--bd-callout-color, inherit);
+ background-color: var(--bd-callout-bg, var(--bs-gray-100));
+ border: 1px solid var(--bd-callout-border, var(--bs-border-color));
+ border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
+ @include border-radius(var(--bs-border-radius));
+ // box-shadow: inset .25rem 0 0 var(--bd-callout-border, var(--bs-gray-300));
+
+ h4 {
+ margin-bottom: .25rem;
+ }
+
+ a { font-weight: 500; }
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+
+ + .bd-callout {
+ margin-top: -.25rem;
+ }
+
+ .highlight {
+ background-color: rgba($black, .05);
+ }
}
- a { font-weight: 500; }
-
- > :last-child {
- margin-bottom: 0;
- }
-
- + .bd-callout {
- margin-top: -.25rem;
- }
-
- .highlight {
- background-color: rgba($black, .05);
- }
-}
-
-// Variations
-@each $variant in $bd-callout-variants {
- .bd-callout-#{$variant} {
- // --bd-callout-color: var(--bs-#{$variant}-text);
- --bd-callout-bg: color-mix(in srgb, var(--bs-#{$variant}-bg-subtle), transparent 50%);
- --bd-callout-border: var(--bs-#{$variant}-border);
+ // Variations
+ @each $variant in $bd-callout-variants {
+ .bd-callout-#{$variant} {
+ // --bd-callout-color: var(--bs-#{$variant}-text);
+ --bd-callout-bg: color-mix(in srgb, var(--bs-#{$variant}-bg-subtle), transparent 50%);
+ --bd-callout-border: var(--bs-#{$variant}-border);
+ }
}
}
//
// JS-based `Copy` buttons for code snippets.
-.bd-clipboard,
-.bd-edit {
- position: relative;
- display: none;
- float: right;
-
- + .highlight {
- margin-top: 0;
+@layer custom {
+ .bd-clipboard,
+ .bd-edit {
+ position: relative;
+ display: none;
+ float: right;
+
+ + .highlight {
+ margin-top: 0;
+ }
+
+ @include media-breakpoint-up(md) {
+ display: block;
+ }
}
- @include media-breakpoint-up(md) {
+ .btn-clipboard,
+ .btn-edit {
display: block;
- }
-}
-
-.btn-clipboard,
-.btn-edit {
- display: block;
- padding: .5em;
- line-height: 1;
- color: var(--bs-body-color);
- background-color: var(--bd-pre-bg);
- border: 0;
- @include border-radius(.25rem);
-
- &:hover {
- color: var(--bs-link-hover-color);
+ padding: .5em;
+ line-height: 1;
+ color: var(--bs-body-color);
+ background-color: var(--bd-pre-bg);
+ border: 0;
+ @include border-radius(.25rem);
+
+ &:hover {
+ color: var(--bs-link-hover-color);
+ }
+
+ &:focus {
+ z-index: 3;
+ }
}
- &:focus {
- z-index: 3;
+ .btn-clipboard {
+ position: relative;
+ z-index: 2;
+ margin-top: .5rem;
+ margin-right: .5rem;
}
}
-
-.btn-clipboard {
- position: relative;
- z-index: 2;
- margin-top: 1.25rem;
- margin-right: .75rem;
-}
.highlight {
position: relative;
padding: .75rem ($bd-gutter-x * .5);
- background-color: var(--bs-bg-1);
+ background-color: var(--bd-pre-bg);
@include media-breakpoint-up(md) {
padding: 1rem;
// Bootstrap docs content theming
//
-.bd-content {
- > h2,
- > h3,
- > h4 {
- --bs-heading-color: var(--bs-fg);
- }
-
- // Offset content from fixed navbar when jumping to headings
- > h2:not(:first-child) {
- margin-top: 3rem;
- }
-
- > h3 {
- margin-top: 2rem;
-
- code {
- font-weight: 600;
- color: inherit;
+@layer custom {
+ .bd-content {
+ > h2,
+ > h3,
+ > h4 {
+ --bs-heading-color: var(--bs-fg);
}
- }
-
-
- > ul li,
- > ol li {
- margin-bottom: .25rem;
- // stylelint-disable selector-max-type, selector-max-compound-selectors
- > p ~ ul {
- margin-top: -.5rem;
- margin-bottom: 1rem;
+ // Offset content from fixed navbar when jumping to headings
+ > h2:not(:first-child) {
+ margin-top: 3rem;
}
- // stylelint-enable selector-max-type, selector-max-compound-selectors
- }
- .bd-reference-table {
- max-height: 420px;
- overflow-y: auto;
- font-size: .75rem;
+ > h3 {
+ margin-top: 2rem;
- thead th {
- border-bottom-color: currentcolor;
+ code {
+ font-weight: 600;
+ color: inherit;
+ }
}
- th,
- td {
- padding-inline: 0;
+ > ul li,
+ > ol li {
+ margin-bottom: .25rem;
+
+ // stylelint-disable selector-max-type, selector-max-compound-selectors
+ > p ~ ul {
+ margin-top: -.5rem;
+ margin-bottom: 1rem;
+ }
+ // stylelint-enable selector-max-type, selector-max-compound-selectors
}
- td {
- font-family: var(--bs-font-monospace);
+ .bd-reference-table {
+ max-height: 420px;
+ overflow-y: auto;
+ font-size: .75rem;
- &:first-child {
- padding-inline-end: 1.5rem;
- white-space: nowrap;
+ thead th {
+ border-bottom-color: currentcolor;
}
- &:last-child {
- color: light-dark(var(--bs-indigo-500), var(--bs-indigo-300));
+ th,
+ td {
+ padding-inline: 0;
}
- }
- }
-
- // Override Bootstrap defaults
- > .table,
- > .table-responsive .table {
- --bs-table-border-color: var(--bs-border-color);
+ td {
+ font-family: var(--bs-font-monospace);
- max-width: 100%;
- margin-bottom: 1.5rem;
- @include font-size(.875rem);
+ &:first-child {
+ padding-inline-end: 1.5rem;
+ white-space: nowrap;
+ }
- @include media-breakpoint-down(lg) {
- &.table-bordered {
- border: 0;
+ &:last-child {
+ color: light-dark(var(--bs-indigo-500), var(--bs-indigo-300));
+ }
}
+
}
- th,
- td {
- &:first-child {
- padding-left: 0;
+ // Override Bootstrap defaults
+ > .table,
+ > .table-responsive .table {
+ --bs-table-border-color: var(--bs-border-color);
+
+ max-width: 100%;
+ margin-bottom: 1.5rem;
+ @include font-size(.875rem);
+
+ @include media-breakpoint-down(lg) {
+ &.table-bordered {
+ border: 0;
+ }
}
- &:not(:last-child) {
- padding-right: 1.5rem;
+ th,
+ td {
+ &:first-child {
+ padding-left: 0;
+ }
+
+ &:not(:last-child) {
+ padding-right: 1.5rem;
+ }
}
- }
- th {
- color: var(--bs-emphasis-color);
- border-bottom-color: currentcolor;
- }
+ th {
+ color: var(--bs-emphasis-color);
+ border-bottom-color: currentcolor;
+ }
- &:not(.bd-callout) > strong { // Keep callout correct color when used within tables
- color: var(--bs-emphasis-color);
- }
+ &:not(.bd-callout) > strong { // Keep callout correct color when used within tables
+ color: var(--bs-emphasis-color);
+ }
- // Prevent breaking of code
- th,
- td:first-child > code { // stylelint-disable-line selector-max-compound-selectors
- white-space: nowrap;
+ // Prevent breaking of code
+ th,
+ td:first-child > code { // stylelint-disable-line selector-max-compound-selectors
+ white-space: nowrap;
+ }
}
}
-}
-.table-options {
- td:nth-child(2) {
- min-width: 160px;
+ .table-options {
+ td:nth-child(2) {
+ min-width: 160px;
+ }
}
-}
-
-.table-utilities td:first-child {
- white-space: nowrap;
-}
-.table-options td:last-child,
-.table-utilities td:last-child {
- min-width: 280px;
-}
-
-.table-swatches {
- th {
- color: var(--bs-emphasis-color);
+ .table-utilities td:first-child {
+ white-space: nowrap;
}
- td code {
- white-space: nowrap;
+ .table-options td:last-child,
+ .table-utilities td:last-child {
+ min-width: 280px;
}
// Astro HTML parser adds extra <p> tags to the content
td p {
margin: 0;
}
-}
-.bd-title {
- --bs-heading-color: var(--bs-emphasis-color);
- @include font-size(3rem);
-}
+ .bd-title {
+ --bs-heading-color: var(--bs-fg);
+ @include font-size(3rem);
+ }
-.bd-subtitle {
- font-weight: 300;
- @include font-size(1.5rem);
-}
+ .bd-subtitle {
+ font-weight: 300;
+ @include font-size(1.5rem);
+ }
-.bi {
- width: 1em;
- height: 1em;
- vertical-align: -.125em;
- fill: currentcolor;
-}
+ .bi {
+ width: 1em;
+ height: 1em;
+ vertical-align: -.125em;
+ fill: currentcolor;
+ }
-.border-lg-start {
- @include media-breakpoint-up(lg) {
- border-left: var(--bs-border-width) solid var(--bs-border-color);
+ .border-lg-start {
+ @include media-breakpoint-up(lg) {
+ border-left: var(--bs-border-width) solid var(--bs-border-color);
+ }
}
-}
-// stylelint-disable selector-no-qualifying-type
-.bd-summary-link {
- color: var(--bs-link-color);
+ // stylelint-disable selector-no-qualifying-type
+ .bd-summary-link {
+ color: var(--bs-link-color);
- &:hover,
- details[open] > & {
- color: var(--bs-link-hover-color);
+ &:hover,
+ details[open] > & {
+ color: var(--bs-link-hover-color);
+ }
}
+ // stylelint-enable selector-no-qualifying-type
+
+ // scss-docs-start custom-color-mode
+ // [data-bs-theme="blue"] {
+ // --bs-body-color: var(--bs-white);
+ // --bs-body-color-rgb: #{to-rgb($white)};
+ // --bs-body-bg: var(--bs-blue);
+ // --bs-body-bg-rgb: #{to-rgb($blue)};
+ // --bs-tertiary-bg: #{$blue-600};
+
+ // .dropdown-menu {
+ // --bs-dropdown-bg: #{color.mix($blue-500, $blue-600)};
+ // --bs-dropdown-link-active-bg: #{$blue-700};
+ // }
+
+ // .btn-secondary {
+ // --bs-btn-bg: #{color.mix($gray-600, $blue-400)};
+ // --bs-btn-border-color: #{rgba($white, .25)};
+ // --bs-btn-hover-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -5%)}; // stylelint-disable-line scss/at-function-named-arguments
+ // --bs-btn-hover-border-color: #{rgba($white, .25)};
+ // --bs-btn-active-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -10%)}; // stylelint-disable-line scss/at-function-named-arguments
+ // --bs-btn-active-border-color: #{rgba($white, .5)};
+ // --bs-btn-focus-border-color: #{rgba($white, .5)};
+ // --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
+ // }
+ // }
+ // scss-docs-end custom-color-mode
}
-// stylelint-enable selector-no-qualifying-type
-
-// scss-docs-start custom-color-mode
-// [data-bs-theme="blue"] {
-// --bs-body-color: var(--bs-white);
-// --bs-body-color-rgb: #{to-rgb($white)};
-// --bs-body-bg: var(--bs-blue);
-// --bs-body-bg-rgb: #{to-rgb($blue)};
-// --bs-tertiary-bg: #{$blue-600};
-
-// .dropdown-menu {
-// --bs-dropdown-bg: #{color.mix($blue-500, $blue-600)};
-// --bs-dropdown-link-active-bg: #{$blue-700};
-// }
-
-// .btn-secondary {
-// --bs-btn-bg: #{color.mix(var(--#{$prefix}gray-600), $blue-400)};
-// --bs-btn-border-color: #{rgba($white, .25)};
-// --bs-btn-hover-bg: #{color.scale(color.mix(var(--#{$prefix}gray-600), $blue-400), $lightness: -5%)}; // stylelint-disable-line scss/at-function-named-arguments
-// --bs-btn-hover-border-color: #{rgba($white, .25)};
-// --bs-btn-active-bg: #{color.scale(color.mix(var(--#{$prefix}gray-600), $blue-400), $lightness: -10%)}; // stylelint-disable-line scss/at-function-named-arguments
-// --bs-btn-active-border-color: #{rgba($white, .5)};
-// --bs-btn-focus-border-color: #{rgba($white, .5)};
-// --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
-// }
-// }
-// scss-docs-end custom-color-mode
// Footer
//
-.bd-footer {
- a {
- color: var(--bs-body-color);
- text-decoration: none;
+@layer custom {
+ .bd-footer {
+ a {
+ color: var(--bs-body-color);
+ text-decoration: none;
- &:hover,
- &:focus {
- color: var(--bs-link-hover-color);
- text-decoration: underline;
+ &:hover,
+ &:focus {
+ color: var(--bs-link-hover-color);
+ text-decoration: underline;
+ }
}
}
}
@use "../../../scss/layout/breakpoints" as *;
@use "variables" as *;
-.bd-gutter {
- --bs-gutter-x: #{$bd-gutter-x};
-}
-
-.bd-layout {
-
- @include media-breakpoint-up(lg) {
- display: grid;
- grid-template-areas: "sidebar main";
- grid-template-columns: 1fr 5fr;
- gap: $grid-gutter-width;
+@layer custom {
+ .bd-gutter {
+ --bs-gutter-x: #{$bd-gutter-x};
}
-}
-.bd-sidebar {
- grid-area: sidebar;
-}
+ .bd-layout {
-.bd-main {
- grid-area: main;
+ @include media-breakpoint-up(lg) {
+ display: grid;
+ grid-template-areas: "sidebar main";
+ grid-template-columns: 1fr 5fr;
+ gap: $grid-gutter-width;
+ }
- @include media-breakpoint-down(lg) {
- max-width: 760px;
- margin-inline: auto;
+ @include media-breakpoint-up(xl) {
+ gap: 2rem;
+ }
}
- @include media-breakpoint-up(md) {
- display: grid;
- grid-template-areas:
- "intro"
- "toc"
- "content";
- grid-template-rows: auto auto 1fr;
- gap: inherit;
+ .bd-sidebar {
+ grid-area: sidebar;
}
- @include media-breakpoint-up(lg) {
- grid-template-areas:
- "intro toc"
- "content toc";
- grid-template-rows: auto 1fr;
- grid-template-columns: 4fr 1fr;
+ .bd-main {
+ grid-area: main;
+
+ @include media-breakpoint-down(lg) {
+ max-width: 760px;
+ margin-inline: auto;
+ }
+
+ @include media-breakpoint-up(md) {
+ display: grid;
+ grid-template-areas:
+ "intro"
+ "toc"
+ "content";
+ grid-template-rows: auto auto 1fr;
+ gap: inherit;
+ }
+
+ @include media-breakpoint-up(lg) {
+ grid-template-areas:
+ "intro toc"
+ "content toc";
+ grid-template-rows: auto 1fr;
+ grid-template-columns: 4fr 1fr;
+ }
}
-}
-.bd-intro {
- grid-area: intro;
-}
+ .bd-intro {
+ grid-area: intro;
+ }
-.bd-toc {
- grid-area: toc;
-}
+ .bd-toc {
+ grid-area: toc;
+ }
-.bd-content {
- grid-area: content;
- min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+ .bd-content {
+ grid-area: content;
+ min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+ }
}
@use "../../../scss/mixins/transition" as *;
@use "../../../scss/mixins/color-mode" as *;
-.bd-masthead {
- padding: 3rem 0;
- // stylelint-disable
- background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), var(--bs-body-bg) 85%),
- radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-blue-500) 50%, transparent), transparent 50%),
- radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent) 50%, transparent), transparent 50%),
- radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet) 50%, transparent), transparent 50%),
- radial-gradient(ellipse at center left, color-mix(in srgb, var(--bs-pink-500) 50%, transparent), transparent 50%);
- // stylelint-enable
-
- h1 {
- --bs-heading-color: var(--bs-emphasis-color);
- @include font-size(4rem);
- }
-
- .lead {
- @include font-size(1rem);
- font-weight: 400;
- color: var(--bs-secondary-color);
- }
+@layer custom {
+ .bd-masthead {
+ padding: 3rem 0;
+ // stylelint-disable
+ background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), var(--bs-body-bg) 85%),
+ radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-blue-500) 50%, transparent), transparent 50%),
+ radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent) 50%, transparent), transparent 50%),
+ radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet) 50%, transparent), transparent 50%),
+ radial-gradient(ellipse at center left, color-mix(in srgb, var(--bs-pink-500) 50%, transparent), transparent 50%);
+ // stylelint-enable
+
+ h1 {
+ --bs-heading-color: var(--bs-emphasis-color);
+ @include font-size(4rem);
+ }
- .bd-code-snippet {
- margin: 0;
- border-color: var(--bs-border-color-translucent);
- border-width: 1px;
- @include border-radius(.5rem);
- }
+ .lead {
+ @include font-size(1rem);
+ font-weight: 400;
+ color: var(--bs-secondary-color);
+ }
- .highlight {
- width: 100%;
- padding: .5rem 1rem;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- background-color: rgba(var(--bs-body-color-rgb), .075);
- @include border-radius(calc(.5rem - 1px));
-
- @include media-breakpoint-up(lg) {
- padding-right: 4rem;
+ .bd-code-snippet {
+ margin: 0;
+ border-color: var(--bs-border-color-translucent);
+ border-width: 1px;
+ @include border-radius(.5rem);
}
- pre {
- padding: 0;
- margin: .625rem 0;
+ .highlight {
+ width: 100%;
+ padding: .5rem 1rem;
overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background-color: rgba(var(--bs-body-color-rgb), .075);
+ @include border-radius(calc(.5rem - 1px));
+
+ @include media-breakpoint-up(lg) {
+ padding-right: 4rem;
+ }
+
+ pre {
+ padding: 0;
+ margin: .625rem 0;
+ overflow: hidden;
+ }
+ }
+ .btn-clipboard {
+ position: absolute;
+ top: -.625rem;
+ right: 0;
+ background-color: transparent;
+ }
+
+ #carbonads { // stylelint-disable-line selector-max-id
+ max-width: 400px;
+ margin-block: 2rem;
+ margin-inline: auto;
}
- }
- .btn-clipboard {
- position: absolute;
- top: -.625rem;
- right: 0;
- background-color: transparent;
- }
- #carbonads { // stylelint-disable-line selector-max-id
- max-width: 400px;
- margin-block: 2rem;
- margin-inline: auto;
+ @include media-breakpoint-up(md) {
+ .lead {
+ @include font-size(1.5rem);
+ }
+ }
}
- @include media-breakpoint-up(md) {
+ .masthead-followup {
+ h2,
+ h3,
+ h4 {
+ --bs-heading-color: var(--bs-emphasis-color);
+ }
+
.lead {
- @include font-size(1.5rem);
+ @include font-size(1rem);
}
- }
-}
-.masthead-followup {
- h2,
- h3,
- h4 {
- --bs-heading-color: var(--bs-emphasis-color);
+ @include media-breakpoint-up(md) {
+ .lead {
+ @include font-size(1.25rem);
+ }
+ }
}
- .lead {
- @include font-size(1rem);
- }
+ .masthead-followup-icon {
+ padding: 1rem;
+ color: rgba(var(--bg-rgb), 1);
+ background-color: rgba(var(--bg-rgb), .1);
+ background-blend-mode: multiply;
+ @include border-radius(1rem);
+ mix-blend-mode: darken;
- @include media-breakpoint-up(md) {
- .lead {
- @include font-size(1.25rem);
+ svg {
+ filter: drop-shadow(0 1px 1px var(--bs-body-bg));
}
}
-}
-.masthead-followup-icon {
- padding: 1rem;
- color: rgba(var(--bg-rgb), 1);
- background-color: rgba(var(--bg-rgb), .1);
- background-blend-mode: multiply;
- @include border-radius(1rem);
- mix-blend-mode: darken;
-
- svg {
- filter: drop-shadow(0 1px 1px var(--bs-body-bg));
+ .masthead-notice {
+ background-color: var(--bd-accent);
+ box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
}
-}
-.masthead-notice {
- background-color: var(--bd-accent);
- box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
-}
+ .animate-img {
+ > img {
+ @include transition(transform .2s ease-in-out);
+ }
-.animate-img {
- > img {
- @include transition(transform .2s ease-in-out);
- }
+ &:hover > img {
+ transform: scale(1.1);
+ }
- &:hover > img {
- transform: scale(1.1);
+ &:active > img {
+ transform: scale(1);
+ }
}
- &:active > img {
- transform: scale(1);
- }
+ // @if $enable-dark-mode {
+ // [data-bs-theme="dark"] {
+ // .masthead-followup-icon {
+ // mix-blend-mode: lighten;
+ // }
+ // }
+ // }
}
-
-// @if $enable-dark-mode {
-// [data-bs-theme="dark"] {
-// .masthead-followup-icon {
-// mix-blend-mode: lighten;
-// }
-// }
-// }
@use "../../../scss/layout/breakpoints" as *;
@use "../../../scss/vendor/rfs" as *;
-.bd-navbar {
- padding: .75rem 0;
- background-color: transparent;
- box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+@layer custom {
+ .bd-navbar {
+ padding: .75rem 0;
+ background-color: transparent;
+ box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
- @media (forced-colors) {
- background-color: Canvas;
- }
+ @media (forced-colors) {
+ background-color: Canvas;
+ }
- &::after {
- position: absolute;
- inset: 0;
- z-index: -1;
- display: block;
- content: "";
- background-image: linear-gradient(var(--bd-violet), color-mix(in srgb, var(--bd-violet), transparent 5%));
- // background-image: linear-gradient(color-mix(in srgb, var(--bs-gray-900), $black 10%), color-mix(in srgb, var(--bs-gray-900), $black 15%));
- }
+ &::after {
+ position: absolute;
+ inset: 0;
+ z-index: -1;
+ display: block;
+ content: "";
+ background-image: linear-gradient(var(--bd-violet), color-mix(in srgb, var(--bd-violet), transparent 5%));
+ // background-image: linear-gradient(color-mix(in srgb, var(--bs-gray-900), $black 10%), color-mix(in srgb, var(--bs-gray-900), $black 15%));
+ }
- .bd-navbar-toggle {
- @include media-breakpoint-down(lg) {
- width: 4.25rem;
+ .bd-navbar-toggle {
+ @include media-breakpoint-down(lg) {
+ width: 4.25rem;
+ }
}
- }
- .navbar-toggler {
- padding: 0;
- margin-right: -.5rem;
- border: 0;
+ .navbar-toggler {
+ padding: 0;
+ margin-right: -.5rem;
+ border: 0;
- &:first-child {
- margin-left: -.5rem;
- }
+ &:first-child {
+ margin-left: -.5rem;
+ }
- .bi {
- width: 1.5rem;
- height: 1.5rem;
- }
+ .bi {
+ width: 1.5rem;
+ height: 1.5rem;
+ }
- &:focus {
- box-shadow: none;
+ &:focus {
+ box-shadow: none;
+ }
}
- }
- .navbar-brand {
- color: $white;
- @include transition(transform .2s ease-in-out);
+ .navbar-brand {
+ color: $white;
+ @include transition(transform .2s ease-in-out);
- &:hover {
- transform: rotate(-5deg) scale(1.1);
+ &:hover {
+ transform: rotate(-5deg) scale(1.1);
+ }
}
- }
- .navbar-toggler,
- .nav-link {
- padding-right: $spacer * .25;
- padding-left: $spacer * .25;
- color: rgba($white, .85);
+ .navbar-toggler,
+ .nav-link {
+ padding-right: $spacer * .25;
+ padding-left: $spacer * .25;
+ color: rgba($white, .85);
- &:hover,
- &:focus {
- color: $white;
- }
+ &:hover,
+ &:focus {
+ color: $white;
+ }
- &.active {
- font-weight: 600;
- color: $white;
+ &.active {
+ font-weight: 600;
+ color: $white;
+ }
}
- }
- .navbar-nav-svg {
- display: inline-block;
- vertical-align: -.125rem;
- }
+ .navbar-nav-svg {
+ display: inline-block;
+ vertical-align: -.125rem;
+ }
- .offcanvas-lg {
- background-color: var(--bd-violet-bg);
- border-left: 0;
+ .offcanvas-lg {
+ background-color: var(--bd-violet-bg);
+ border-left: 0;
- @include media-breakpoint-down(lg) {
- box-shadow: var(--#{$prefix}box-shadow-lg);
+ @include media-breakpoint-down(lg) {
+ box-shadow: var(--#{$prefix}box-shadow-lg);
+ }
}
- }
- .dropdown-toggle {
- &:focus:not(:focus-visible) {
- outline: 0;
+ .dropdown-toggle {
+ &:focus:not(:focus-visible) {
+ outline: 0;
+ }
}
- }
- .dropdown-menu {
- --bs-dropdown-min-width: 12rem;
- --bs-dropdown-padding-x: .25rem;
- --bs-dropdown-padding-y: .25rem;
- --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
- --bs-dropdown-link-active-bg: var(--bd-violet);
- @include rfs(.875rem, --bs-dropdown-font-size);
- @include font-size(.875rem);
- @include border-radius(.5rem);
- box-shadow: var(--#{$prefix}dropdown-box-shadow);
-
- li + li {
- margin-top: .125rem;
- }
+ .dropdown-menu {
+ --bs-dropdown-min-width: 12rem;
+ --bs-dropdown-padding-x: .25rem;
+ --bs-dropdown-padding-y: .25rem;
+ --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
+ --bs-dropdown-link-active-bg: var(--bd-violet);
+ @include rfs(.875rem, --bs-dropdown-font-size);
+ @include font-size(.875rem);
+ @include border-radius(.5rem);
+ box-shadow: var(--#{$prefix}dropdown-box-shadow);
+
+ li + li {
+ margin-top: .125rem;
+ }
- .dropdown-item {
- @include border-radius(.25rem);
+ .dropdown-item {
+ @include border-radius(.25rem);
- &:active {
- .bi {
- color: inherit !important; // stylelint-disable-line declaration-no-important
+ &:active {
+ .bi {
+ color: inherit !important; // stylelint-disable-line declaration-no-important
+ }
}
}
- }
- .active {
- font-weight: 600;
+ .active {
+ font-weight: 600;
- .bi {
- display: block !important; // stylelint-disable-line declaration-no-important
+ .bi {
+ display: block !important; // stylelint-disable-line declaration-no-important
+ }
}
}
- }
- .dropdown-menu-end {
- --bs-dropdown-min-width: 8rem;
+ .dropdown-menu-end {
+ --bs-dropdown-min-width: 8rem;
+ }
}
-}
-@include color-mode(dark) {
- .bd-navbar {
- box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+ @include color-mode(dark) {
+ .bd-navbar {
+ box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+ }
}
}
// Remember to update `site/_layouts/examples.html` too if this changes!
-.bd-placeholder-img {
- @include font-size(1.125rem);
- user-select: none;
- text-anchor: middle;
-}
+@layer custom {
+ .bd-placeholder-img {
+ @include font-size(1.125rem);
+ user-select: none;
+ text-anchor: middle;
+ }
-.bd-placeholder-img-lg {
- @include font-size(3.5rem);
+ .bd-placeholder-img-lg {
+ @include font-size(3.5rem);
+ }
}
// When navigating with the keyboard, prevent focus from landing behind the sticky header
-main {
- a,
- button,
- input,
- select,
- textarea,
- h2,
- h3,
- h4,
- [tabindex="0"] {
- scroll-margin-top: 80px;
- scroll-margin-bottom: 100px;
+@layer custom {
+ main {
+ a,
+ button,
+ input,
+ select,
+ textarea,
+ h2,
+ h3,
+ h4,
+ [tabindex="0"] {
+ scroll-margin-top: 80px;
+ scroll-margin-bottom: 100px;
+ }
}
}
--docsearch-muted-color: #7f8497;
}
-.bd-search {
- position: relative;
-
- @include media-breakpoint-up(lg) {
- position: absolute;
- top: .875rem;
- left: 50%;
- width: 200px;
- margin-left: -100px;
- }
+@layer custom {
+ .bd-search {
+ position: relative;
+
+ @include media-breakpoint-up(lg) {
+ position: absolute;
+ top: .875rem;
+ left: 50%;
+ width: 200px;
+ margin-left: -100px;
+ }
- @include media-breakpoint-up(xl) {
- width: 280px;
- margin-left: -140px;
- }
+ @include media-breakpoint-up(xl) {
+ width: 280px;
+ margin-left: -140px;
+ }
-}
+ }
-.DocSearch-Container {
- --docsearch-muted-color: var(--bs-secondary-color);
- --docsearch-hit-shadow: none;
+ .DocSearch-Container {
+ --docsearch-muted-color: var(--bs-secondary-color);
+ --docsearch-hit-shadow: none;
- position: fixed;
- z-index: 2000; // Make sure to be over all components showcased in the documentation
- cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
+ position: fixed;
+ z-index: 2000; // Make sure to be over all components showcased in the documentation
+ cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
- @include media-breakpoint-up(lg) {
- padding-top: 4rem;
+ @include media-breakpoint-up(lg) {
+ padding-top: 4rem;
+ }
}
-}
-.DocSearch-Button {
- --docsearch-searchbox-background: #{rgba($black, .1)};
- --docsearch-searchbox-color: #{$white};
- --docsearch-searchbox-focus-background: #{rgba($black, .25)};
- --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
- --docsearch-text-color: #{$white};
- --docsearch-muted-color: #{rgba($white, .65)};
-
- width: 100%;
- height: 38px; // Match Bootstrap inputs
- margin: 0;
- border: 1px solid rgba($white, .4);
- @include border-radius(.375rem);
-
- .DocSearch-Search-Icon {
- opacity: .65;
- }
+ .DocSearch-Button {
+ --docsearch-searchbox-background: #{rgba($black, .1)};
+ --docsearch-searchbox-color: #{$white};
+ --docsearch-searchbox-focus-background: #{rgba($black, .25)};
+ --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
+ --docsearch-text-color: #{$white};
+ --docsearch-muted-color: #{rgba($white, .65)};
- &:active,
- &:focus,
- &:hover {
- border-color: rgba($bd-accent, 1);
+ width: 100%;
+ height: 38px; // Match Bootstrap inputs
+ margin: 0;
+ border: 1px solid rgba($white, .4);
+ @include border-radius(.375rem);
.DocSearch-Search-Icon {
- opacity: 1;
+ opacity: .65;
}
- }
- @include media-breakpoint-down(lg) {
- &,
- &:hover,
- &:focus {
- background: transparent;
- border: 0;
- box-shadow: none;
+ &:active,
+ &:focus,
+ &:hover {
+ border-color: rgba($bd-accent, 1);
+
+ .DocSearch-Search-Icon {
+ opacity: 1;
+ }
}
- &:focus {
- box-shadow: var(--docsearch-searchbox-shadow);
+
+ @include media-breakpoint-down(lg) {
+ &,
+ &:hover,
+ &:focus {
+ background: transparent;
+ border: 0;
+ box-shadow: none;
+ }
+ &:focus {
+ box-shadow: var(--docsearch-searchbox-shadow);
+ }
}
}
-}
-.DocSearch-Button-Keys,
-.DocSearch-Button-Placeholder {
- @include media-breakpoint-down(lg) {
- display: none;
+ .DocSearch-Button-Keys,
+ .DocSearch-Button-Placeholder {
+ @include media-breakpoint-down(lg) {
+ display: none;
+ }
}
-}
-
-.DocSearch-Button-Keys {
- min-width: 0;
- padding: .125rem .25rem;
- background: rgba($black, .25);
- @include border-radius(.25rem);
-}
-.DocSearch-Button-Key {
- top: 0;
- width: auto;
- height: 1.25rem;
- padding-right: .125rem;
- padding-left: .125rem;
- margin-right: 0;
- font-size: .875rem;
- background: none;
- box-shadow: none;
-}
+ .DocSearch-Button-Keys {
+ min-width: 0;
+ padding: .125rem .25rem;
+ background: rgba($black, .25);
+ @include border-radius(.25rem);
+ }
-.DocSearch-Commands-Key {
- padding-left: 1px;
- font-size: .875rem;
- background-color: rgba($black, .1);
- background-image: none;
- box-shadow: none;
-}
+ .DocSearch-Button-Key {
+ top: 0;
+ width: auto;
+ height: 1.25rem;
+ padding-right: .125rem;
+ padding-left: .125rem;
+ margin-right: 0;
+ font-size: .875rem;
+ background: none;
+ box-shadow: none;
+ }
-.DocSearch-Form {
- @include border-radius(var(--bs-border-radius));
-}
+ .DocSearch-Commands-Key {
+ padding-left: 1px;
+ font-size: .875rem;
+ background-color: rgba($black, .1);
+ background-image: none;
+ box-shadow: none;
+ }
-.DocSearch-Hits {
- mark {
- padding: 0;
+ .DocSearch-Form {
+ @include border-radius(var(--bs-border-radius));
}
-}
-.DocSearch-Hit {
- padding-bottom: 0;
- @include border-radius(0);
+ .DocSearch-Hits {
+ mark {
+ padding: 0;
+ }
+ }
- a {
+ .DocSearch-Hit {
+ padding-bottom: 0;
@include border-radius(0);
- border: solid var(--bs-border-color);
- border-width: 0 1px 1px;
- }
- &:first-child a {
- @include border-top-radius(var(--bs-border-radius));
- border-top-width: 1px;
- }
- &:last-child a {
- @include border-bottom-radius(var(--bs-border-radius));
+ a {
+ @include border-radius(0);
+ border: solid var(--bs-border-color);
+ border-width: 0 1px 1px;
+ }
+
+ &:first-child a {
+ @include border-top-radius(var(--bs-border-radius));
+ border-top-width: 1px;
+ }
+ &:last-child a {
+ @include border-bottom-radius(var(--bs-border-radius));
+ }
}
-}
-.DocSearch-Hit-icon {
- display: flex;
- align-items: center;
-}
+ .DocSearch-Hit-icon {
+ display: flex;
+ align-items: center;
+ }
-// Fix --docsearch-logo-color that doesn't do anything
-.DocSearch-Logo svg .cls-1,
-.DocSearch-Logo svg .cls-2 {
- fill: var(--docsearch-logo-color);
+ // Fix --docsearch-logo-color that doesn't do anything
+ .DocSearch-Logo svg .cls-1,
+ .DocSearch-Logo svg .cls-2 {
+ fill: var(--docsearch-logo-color);
+ }
}
@use "../../../scss/layout/breakpoints" as *;
@use "../../../scss/mixins/border-radius" as *;
-.bd-sidebar {
- @include media-breakpoint-up(lg) {
- position: sticky;
- top: 5rem;
- // Override collapse behaviors
- // stylelint-disable-next-line declaration-no-important
- display: block !important;
- height: calc(100vh - 6rem);
- // Prevent focus styles to be cut off:
- padding-left: .25rem;
- margin-left: -.25rem;
- overflow-y: auto;
- }
+@layer custom {
+ .bd-sidebar {
+ @include media-breakpoint-up(lg) {
+ position: sticky;
+ top: 5rem;
+ // Override collapse behaviors
+ // stylelint-disable-next-line declaration-no-important
+ display: block !important;
+ height: calc(100vh - 6rem);
+ // Prevent focus styles to be cut off:
+ padding-left: .25rem;
+ margin-left: -.25rem;
+ overflow-y: auto;
+ }
- @include media-breakpoint-down(lg) {
- .offcanvas-lg {
- border-right-color: var(--bs-border-color);
- box-shadow: var(--bs-box-shadow-lg);
+ @include media-breakpoint-down(lg) {
+ .offcanvas-lg {
+ border-right-color: var(--bs-border-color);
+ box-shadow: var(--bs-box-shadow-lg);
+ }
}
}
-}
-.bd-links-heading {
- color: var(--bs-emphasis-color);
-}
+ .bd-links-heading {
+ color: var(--bs-emphasis-color);
+ }
-.bd-links-subgroup {
- margin-left: 1.625rem;
- color: var(--bs-emphasis-color);
-}
+ .bd-links-subgroup {
+ margin-left: 1.625rem;
+ color: var(--bs-emphasis-color);
+ }
-.bd-links-nav {
- // @include media-breakpoint-down(lg) {
- // font-size: .875rem;
- // }
+ .bd-links-nav {
+ // @include media-breakpoint-down(lg) {
+ // font-size: .875rem;
+ // }
- @include media-breakpoint-between(xs, lg) {
- column-count: 2;
- column-gap: 1.5rem;
+ @include media-breakpoint-between(xs, lg) {
+ column-count: 2;
+ column-gap: 1.5rem;
- .bd-links-group {
- break-inside: avoid;
- }
+ .bd-links-group {
+ break-inside: avoid;
+ }
- .bd-links-span-all {
- column-span: all;
+ .bd-links-span-all {
+ column-span: all;
+ }
}
}
-}
-.bd-links-link {
- padding: .1875rem .5rem;
- margin-top: .125rem;
- margin-left: 1.125rem;
- font-size: .875rem;
- color: var(--bs-body-color);
- text-decoration: if($link-decoration == none, null, none);
+ .bd-links-link {
+ padding: .1875rem .5rem;
+ margin-top: .125rem;
+ margin-left: 1.125rem;
+ font-size: .875rem;
+ color: var(--bs-body-color);
+ text-decoration: if($link-decoration == none, null, none);
- &:hover,
- &:focus,
- &.active {
- color: var(--bs-emphasis-color);
- text-decoration: if($link-hover-decoration == underline, none, null);
- background-color: var(--bd-sidebar-link-bg);
- }
+ &:hover,
+ &:focus,
+ &.active {
+ color: var(--bs-emphasis-color);
+ text-decoration: if($link-hover-decoration == underline, none, null);
+ background-color: var(--bd-sidebar-link-bg);
+ }
- &.active {
- font-weight: 600;
+ &.active {
+ font-weight: 600;
+ }
}
}
@use "../../../scss/colors" as *;
@use "variables" as *;
-.skippy {
- background-color: $bd-purple;
+@layer custom {
+ .skippy {
+ background-color: $bd-purple;
- a {
- color: $white;
+ a {
+ color: $white;
+ }
}
}
}
// Shell prompts
-.language-bash .line::before,
-.language-sh .line::before {
- display: inline-block;
- color: var(--base03);
- content: "$ ";
- user-select: none;
-}
-
-.language-powershell .line::before {
- display: inline-block;
- color: var(--base0C);
- content: "PM> ";
- user-select: none;
-}
-
-// Token styles
-.token {
- &.comment,
- &.prolog,
- &.doctype,
- &.cdata {
+@layer custom {
+ .language-bash .line::before,
+ .language-sh .line::before {
+ display: inline-block;
color: var(--base03);
+ content: "$ ";
+ user-select: none;
}
- &.punctuation {
- color: var(--base05);
+ .language-powershell .line::before {
+ display: inline-block;
+ color: var(--base0C);
+ content: "PM> ";
+ user-select: none;
}
- &.property {
- color: var(--base0A);
- }
+ .token {
+ &.comment,
+ &.prolog,
+ &.doctype,
+ &.cdata {
+ color: var(--base03);
+ }
- &.tag {
- color: var(--base08);
- }
+ &.punctuation {
+ color: var(--base05);
+ }
- &.boolean,
- &.number {
- color: var(--base09);
- }
+ &.property {
+ color: var(--base0A);
+ }
- &.constant,
- &.symbol,
- &.deleted {
- color: var(--base08);
- }
+ &.tag {
+ color: var(--base08);
+ }
- &.attr-name,
- &.string,
- &.char,
- &.builtin,
- &.inserted {
- color: var(--base0C);
- }
+ &.boolean,
+ &.number {
+ color: var(--base09);
+ }
- &.operator,
- &.entity,
- &.url {
- color: var(--base05);
- }
+ &.constant,
+ &.symbol,
+ &.deleted {
+ color: var(--base08);
+ }
- &.atrule,
- &.attr-value,
- &.keyword {
- color: var(--base0E);
- }
+ &.attr-name,
+ &.string,
+ &.char,
+ &.builtin,
+ &.inserted {
+ color: var(--base0C);
+ }
- &.function {
- color: var(--base0B);
- }
+ &.operator,
+ &.entity,
+ &.url {
+ color: var(--base05);
+ }
- &.selector,
- &.class-name {
- color: var(--base07);
- }
+ &.atrule,
+ &.attr-value,
+ &.keyword {
+ color: var(--base0E);
+ }
- &.regex,
- &.important {
- color: var(--base0A);
- }
+ &.function {
+ color: var(--base0B);
+ }
- &.variable {
- color: var(--base08);
- }
+ &.selector,
+ &.class-name {
+ color: var(--base07);
+ }
- &.important,
- &.bold {
- font-weight: $font-weight-bold;
- }
+ &.regex,
+ &.important {
+ color: var(--base0A);
+ }
- &.italic {
- font-style: italic;
- }
+ &.variable {
+ color: var(--base08);
+ }
- &.entity {
- cursor: help;
- }
-}
+ &.important,
+ &.bold {
+ font-weight: $font-weight-bold;
+ }
-.language-diff {
- .token {
- &.deleted {
- color: var(--#{$prefix}red-400);
- background-color: transparent;
+ &.italic {
+ font-style: italic;
}
- &.inserted {
- color: var(--#{$prefix}green-400);
- background-color: transparent;
+
+ &.entity {
+ cursor: help;
}
}
-}
-.language-bash,
-.language-sh {
- .token.comment {
- color: var(--base03);
+ .language-diff {
+ .token {
+ &.deleted {
+ color: var(--#{$prefix}red-400);
+ background-color: transparent;
+ }
+ &.inserted {
+ color: var(--#{$prefix}green-400);
+ background-color: transparent;
+ }
+ }
+ }
+
+ .language-bash,
+ .language-sh {
+ .token.comment {
+ color: var(--base03);
+ }
}
}
// stylelint-disable selector-max-type, selector-no-qualifying-type
-.bd-toc {
- container-type: inline-size;
-
- @include media-breakpoint-up(lg) {
- position: sticky;
- top: 5rem;
- right: 0;
- z-index: 2;
- height: calc(100vh - 7rem);
- overflow-y: auto;
- }
-
- nav {
- font-size: .875rem;
- // @include font-size(.875rem);
-
- ul {
- padding-left: 0;
- margin-bottom: 0;
- list-style: none;
-
- ul {
- padding-left: 1rem;
- }
+@layer custom {
+ .bd-toc {
+ container-type: inline-size;
+
+ @include media-breakpoint-up(lg) {
+ position: sticky;
+ top: 5rem;
+ right: 0;
+ z-index: 2;
+ height: calc(100vh - 7rem);
+ overflow-y: auto;
}
- a {
- display: block;
- padding: .125rem 0 .125rem .75rem;
- color: inherit;
- text-decoration: none;
- border-left: .125rem solid transparent;
+ nav {
+ font-size: .875rem;
+ // @include font-size(.875rem);
- &:hover,
- &.active {
- color: var(--bd-toc-color);
- border-left-color: var(--bd-toc-color);
- }
+ ul {
+ padding-left: 0;
+ margin-bottom: 0;
+ list-style: none;
- &.active {
- font-weight: 500;
+ ul {
+ padding-left: 1rem;
+ }
}
- code {
- font: inherit;
+ a {
+ display: block;
+ padding: .125rem 0 .125rem .75rem;
+ color: inherit;
+ text-decoration: none;
+ border-left: .125rem solid transparent;
+
+ &:hover,
+ &.active {
+ color: var(--bd-toc-color);
+ border-left-color: var(--bd-toc-color);
+ }
+
+ &.active {
+ font-weight: 500;
+ }
+
+ code {
+ font: inherit;
+ }
}
}
}
-}
-.bd-toc-toggle {
- display: flex;
- align-items: center;
+ .bd-toc-toggle {
+ display: flex;
+ align-items: center;
- @include media-breakpoint-down(sm) {
- justify-content: space-between;
- width: 100%;
- }
-
- @include media-breakpoint-down(md) {
- color: var(--bs-body-color);
- border: 1px solid var(--bs-border-color);
- @include border-radius(var(--bs-border-radius));
-
- &:hover,
- &:focus,
- &:active,
- &[aria-expanded="true"] {
- color: var(--bd-violet);
- background-color: var(--bs-body-bg);
- border-color: var(--bd-violet);
+ @include media-breakpoint-down(sm) {
+ justify-content: space-between;
+ width: 100%;
}
- &:focus,
- &[aria-expanded="true"] {
- box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25);
- }
- }
-}
-
-.bd-toc-collapse {
- @include media-breakpoint-down(md) {
- nav {
- padding: 1.25rem 1.25rem 1.25rem 1rem;
- background-color: var(--bs-tertiary-bg);
+ @include media-breakpoint-down(md) {
+ color: var(--bs-body-color);
border: 1px solid var(--bs-border-color);
@include border-radius(var(--bs-border-radius));
+
+ &:hover,
+ &:focus,
+ &:active,
+ &[aria-expanded="true"] {
+ color: var(--bd-violet);
+ background-color: var(--bs-body-bg);
+ border-color: var(--bd-violet);
+ }
+
+ &:focus,
+ &[aria-expanded="true"] {
+ box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25);
+ }
}
}
- @include media-breakpoint-up(md) {
- display: block !important; // stylelint-disable-line declaration-no-important
+ .bd-toc-collapse {
+ @include media-breakpoint-down(md) {
+ nav {
+ padding: 1.25rem 1.25rem 1.25rem 1rem;
+ background-color: var(--bs-tertiary-bg);
+ border: 1px solid var(--bs-border-color);
+ @include border-radius(var(--bs-border-radius));
+ }
+ }
+
+ @include media-breakpoint-up(md) {
+ display: block !important; // stylelint-disable-line declaration-no-important
+ }
}
}
projects / thirdparty / bootstrap.git / commitdiff
