mirror of https://github.com/twbs/bootstrap.git
Scope docs CSS to custom layer
This commit is contained in:
Mark Otto
parent
a4af8c3fcf
commit
dd579b3636
|
|
@ -55,8 +55,10 @@ try {
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -57,8 +57,10 @@ try {
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -8,59 +8,61 @@
|
|||
// 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);
|
||||
|
||||
a {
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include border-radius(.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
.carbon-img {
|
||||
float: left;
|
||||
margin-left: -145px;
|
||||
}
|
||||
|
||||
@container (max-width: 240px) {
|
||||
@layer custom {
|
||||
#carbonads {
|
||||
padding-left: 15px;
|
||||
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;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include border-radius(.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
.carbon-img {
|
||||
float: left;
|
||||
margin-left: -145px;
|
||||
}
|
||||
|
||||
@container (max-width: 240px) {
|
||||
#carbonads {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.carbon-img {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.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-poweredby {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.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));
|
||||
margin-top: .75rem;
|
||||
color: var(--bs-fg-3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.carbon-poweredby {
|
||||
display: block;
|
||||
margin-top: .75rem;
|
||||
color: var(--bs-fg-3) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,24 +2,40 @@
|
|||
@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);
|
||||
|
||||
&::after {
|
||||
content: "#";
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
:hover > &,
|
||||
:target > & {
|
||||
color: var(--#{$prefix}link-color);
|
||||
@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: 1;
|
||||
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: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,59 +7,61 @@
|
|||
// 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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Color swatches
|
||||
//
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,55 +3,53 @@
|
|||
@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-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);
|
||||
}
|
||||
|
||||
.bd-btn-lg {
|
||||
--bs-btn-border-radius: .5rem;
|
||||
|
||||
padding: .8125rem 2rem;
|
||||
.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%)};
|
||||
|
||||
--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;
|
||||
|
||||
padding: .8125rem 2rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,47 +7,49 @@
|
|||
// 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);
|
||||
@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));
|
||||
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;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,43 +5,45 @@
|
|||
//
|
||||
// JS-based `Copy` buttons for code snippets.
|
||||
|
||||
.bd-clipboard,
|
||||
.bd-edit {
|
||||
position: relative;
|
||||
display: none;
|
||||
float: right;
|
||||
@layer custom {
|
||||
.bd-clipboard,
|
||||
.bd-edit {
|
||||
position: relative;
|
||||
display: none;
|
||||
float: right;
|
||||
|
||||
+ .highlight {
|
||||
margin-top: 0;
|
||||
+ .highlight {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.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);
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -346,7 +346,7 @@
|
|||
.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;
|
||||
|
|
|
|||
|
|
@ -8,198 +8,189 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
> 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
|
||||
}
|
||||
|
||||
.bd-reference-table {
|
||||
max-height: 420px;
|
||||
overflow-y: auto;
|
||||
font-size: .75rem;
|
||||
|
||||
thead th {
|
||||
border-bottom-color: currentcolor;
|
||||
@layer custom {
|
||||
.bd-content {
|
||||
> h2,
|
||||
> h3,
|
||||
> h4 {
|
||||
--bs-heading-color: var(--bs-fg);
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding-inline: 0;
|
||||
// Offset content from fixed navbar when jumping to headings
|
||||
> h2:not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
td {
|
||||
font-family: var(--bs-font-monospace);
|
||||
> h3 {
|
||||
margin-top: 2rem;
|
||||
|
||||
&:first-child {
|
||||
padding-inline-end: 1.5rem;
|
||||
code {
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
> 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
|
||||
}
|
||||
|
||||
.bd-reference-table {
|
||||
max-height: 420px;
|
||||
overflow-y: auto;
|
||||
font-size: .75rem;
|
||||
|
||||
thead th {
|
||||
border-bottom-color: currentcolor;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
font-family: var(--bs-font-monospace);
|
||||
|
||||
&:first-child {
|
||||
padding-inline-end: 1.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
color: light-dark(var(--bs-indigo-500), var(--bs-indigo-300));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
// Prevent breaking of code
|
||||
th,
|
||||
td:first-child > code { // stylelint-disable-line selector-max-compound-selectors
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
color: light-dark(var(--bs-indigo-500), var(--bs-indigo-300));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
// 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-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-options {
|
||||
td:nth-child(2) {
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
td code {
|
||||
.table-utilities td:first-child {
|
||||
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-subtitle {
|
||||
font-weight: 300;
|
||||
@include font-size(1.5rem);
|
||||
}
|
||||
|
||||
.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);
|
||||
.bd-title {
|
||||
--bs-heading-color: var(--bs-fg);
|
||||
@include font-size(3rem);
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
.bd-summary-link {
|
||||
color: var(--bs-link-color);
|
||||
|
||||
&:hover,
|
||||
details[open] > & {
|
||||
color: var(--bs-link-hover-color);
|
||||
.bd-subtitle {
|
||||
font-weight: 300;
|
||||
@include font-size(1.5rem);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
.bd-summary-link {
|
||||
color: var(--bs-link-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
|
||||
|
|
|
|||
|
|
@ -2,15 +2,17 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,60 +2,66 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-sidebar {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
.bd-main {
|
||||
grid-area: main;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
max-width: 760px;
|
||||
margin-inline: auto;
|
||||
@layer custom {
|
||||
.bd-gutter {
|
||||
--bs-gutter-x: #{$bd-gutter-x};
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"intro"
|
||||
"toc"
|
||||
"content";
|
||||
grid-template-rows: auto auto 1fr;
|
||||
gap: inherit;
|
||||
.bd-layout {
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: grid;
|
||||
grid-template-areas: "sidebar main";
|
||||
grid-template-columns: 1fr 5fr;
|
||||
gap: $grid-gutter-width;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
grid-template-areas:
|
||||
"intro toc"
|
||||
"content toc";
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 4fr 1fr;
|
||||
.bd-sidebar {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
.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-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-intro {
|
||||
grid-area: intro;
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,127 +7,129 @@
|
|||
@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
|
||||
@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);
|
||||
}
|
||||
|
||||
.lead {
|
||||
@include font-size(1rem);
|
||||
font-weight: 400;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
.bd-code-snippet {
|
||||
margin: 0;
|
||||
border-color: var(--bs-border-color-translucent);
|
||||
border-width: 1px;
|
||||
@include border-radius(.5rem);
|
||||
}
|
||||
|
||||
.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;
|
||||
h1 {
|
||||
--bs-heading-color: var(--bs-emphasis-color);
|
||||
@include font-size(4rem);
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 0;
|
||||
margin: .625rem 0;
|
||||
.lead {
|
||||
@include font-size(1rem);
|
||||
font-weight: 400;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
.bd-code-snippet {
|
||||
margin: 0;
|
||||
border-color: var(--bs-border-color-translucent);
|
||||
border-width: 1px;
|
||||
@include border-radius(.5rem);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.lead {
|
||||
@include font-size(1.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.masthead-followup {
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
--bs-heading-color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.lead {
|
||||
@include font-size(1.5rem);
|
||||
@include font-size(1rem);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.lead {
|
||||
@include font-size(1.25rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.masthead-followup {
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
--bs-heading-color: var(--bs-emphasis-color);
|
||||
}
|
||||
.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;
|
||||
|
||||
.lead {
|
||||
@include font-size(1rem);
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
.animate-img {
|
||||
> img {
|
||||
@include transition(transform .2s ease-in-out);
|
||||
.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);
|
||||
}
|
||||
|
||||
&:hover > img {
|
||||
transform: scale(1.1);
|
||||
.animate-img {
|
||||
> img {
|
||||
@include transition(transform .2s ease-in-out);
|
||||
}
|
||||
|
||||
&: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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -6,137 +6,139 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
&::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;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
padding: 0;
|
||||
margin-right: -.5rem;
|
||||
border: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-left: -.5rem;
|
||||
@media (forced-colors) {
|
||||
background-color: Canvas;
|
||||
}
|
||||
|
||||
.bi {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
&::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%));
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
.bd-navbar-toggle {
|
||||
@include media-breakpoint-down(lg) {
|
||||
width: 4.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: $white;
|
||||
@include transition(transform .2s ease-in-out);
|
||||
.navbar-toggler {
|
||||
padding: 0;
|
||||
margin-right: -.5rem;
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(-5deg) scale(1.1);
|
||||
&:first-child {
|
||||
margin-left: -.5rem;
|
||||
}
|
||||
|
||||
.bi {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler,
|
||||
.nav-link {
|
||||
padding-right: $spacer * .25;
|
||||
padding-left: $spacer * .25;
|
||||
color: rgba($white, .85);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.navbar-brand {
|
||||
color: $white;
|
||||
@include transition(transform .2s ease-in-out);
|
||||
|
||||
&:hover {
|
||||
transform: rotate(-5deg) scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.navbar-toggler,
|
||||
.nav-link {
|
||||
padding-right: $spacer * .25;
|
||||
padding-left: $spacer * .25;
|
||||
color: rgba($white, .85);
|
||||
|
||||
.navbar-nav-svg {
|
||||
display: inline-block;
|
||||
vertical-align: -.125rem;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.offcanvas-lg {
|
||||
background-color: var(--bd-violet-bg);
|
||||
border-left: 0;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
box-shadow: var(--#{$prefix}box-shadow-lg);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
@include border-radius(.25rem);
|
||||
.navbar-nav-svg {
|
||||
display: inline-block;
|
||||
vertical-align: -.125rem;
|
||||
}
|
||||
|
||||
.offcanvas-lg {
|
||||
background-color: var(--bd-violet-bg);
|
||||
border-left: 0;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
box-shadow: var(--#{$prefix}box-shadow-lg);
|
||||
}
|
||||
}
|
||||
|
||||
.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-item {
|
||||
@include border-radius(.25rem);
|
||||
|
||||
&:active {
|
||||
.bi {
|
||||
color: inherit !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: 600;
|
||||
|
||||
&:active {
|
||||
.bi {
|
||||
color: inherit !important; // stylelint-disable-line declaration-no-important
|
||||
display: block !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: 600;
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,14 @@
|
|||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,149 +31,151 @@
|
|||
--docsearch-muted-color: #7f8497;
|
||||
}
|
||||
|
||||
.bd-search {
|
||||
position: relative;
|
||||
@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(lg) {
|
||||
position: absolute;
|
||||
top: .875rem;
|
||||
left: 50%;
|
||||
width: 200px;
|
||||
margin-left: -100px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
width: 280px;
|
||||
margin-left: -140px;
|
||||
.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.
|
||||
|
||||
@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)};
|
||||
|
||||
.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.
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: rgba($bd-accent, 1);
|
||||
|
||||
.DocSearch-Search-Icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
&: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-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-Commands-Key {
|
||||
padding-left: 1px;
|
||||
font-size: .875rem;
|
||||
background-color: rgba($black, .1);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.DocSearch-Form {
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
}
|
||||
|
||||
.DocSearch-Hits {
|
||||
mark {
|
||||
padding: 0;
|
||||
.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-Hit {
|
||||
padding-bottom: 0;
|
||||
@include border-radius(0);
|
||||
.DocSearch-Commands-Key {
|
||||
padding-left: 1px;
|
||||
font-size: .875rem;
|
||||
background-color: rgba($black, .1);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
a {
|
||||
.DocSearch-Form {
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
}
|
||||
|
||||
.DocSearch-Hits {
|
||||
mark {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Hit {
|
||||
padding-bottom: 0;
|
||||
@include border-radius(0);
|
||||
border: solid var(--bs-border-color);
|
||||
border-width: 0 1px 1px;
|
||||
|
||||
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));
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child a {
|
||||
@include border-top-radius(var(--bs-border-radius));
|
||||
border-top-width: 1px;
|
||||
.DocSearch-Hit-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
&:last-child a {
|
||||
@include border-bottom-radius(var(--bs-border-radius));
|
||||
|
||||
// Fix --docsearch-logo-color that doesn't do anything
|
||||
.DocSearch-Logo svg .cls-1,
|
||||
.DocSearch-Logo svg .cls-2 {
|
||||
fill: var(--docsearch-logo-color);
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,73 +2,75 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
@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-subgroup {
|
||||
margin-left: 1.625rem;
|
||||
color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
.bd-links-nav {
|
||||
// @include media-breakpoint-down(lg) {
|
||||
// font-size: .875rem;
|
||||
// }
|
||||
|
||||
@include media-breakpoint-between(xs, lg) {
|
||||
column-count: 2;
|
||||
column-gap: 1.5rem;
|
||||
|
||||
.bd-links-group {
|
||||
break-inside: avoid;
|
||||
@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;
|
||||
}
|
||||
|
||||
.bd-links-span-all {
|
||||
column-span: all;
|
||||
@include media-breakpoint-down(lg) {
|
||||
.offcanvas-lg {
|
||||
border-right-color: var(--bs-border-color);
|
||||
box-shadow: var(--bs-box-shadow-lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
.bd-links-heading {
|
||||
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;
|
||||
.bd-links-subgroup {
|
||||
margin-left: 1.625rem;
|
||||
color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
.bd-links-nav {
|
||||
// @include media-breakpoint-down(lg) {
|
||||
// font-size: .875rem;
|
||||
// }
|
||||
|
||||
@include media-breakpoint-between(xs, lg) {
|
||||
column-count: 2;
|
||||
column-gap: 1.5rem;
|
||||
|
||||
.bd-links-group {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.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);
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,121 +44,122 @@
|
|||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
&.property {
|
||||
color: var(--base0A);
|
||||
}
|
||||
|
||||
&.tag {
|
||||
color: var(--base08);
|
||||
}
|
||||
|
||||
&.boolean,
|
||||
&.number {
|
||||
color: var(--base09);
|
||||
}
|
||||
|
||||
&.constant,
|
||||
&.symbol,
|
||||
&.deleted {
|
||||
color: var(--base08);
|
||||
}
|
||||
|
||||
&.attr-name,
|
||||
&.string,
|
||||
&.char,
|
||||
&.builtin,
|
||||
&.inserted {
|
||||
.language-powershell .line::before {
|
||||
display: inline-block;
|
||||
color: var(--base0C);
|
||||
content: "PM> ";
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.operator,
|
||||
&.entity,
|
||||
&.url {
|
||||
color: var(--base05);
|
||||
}
|
||||
|
||||
&.atrule,
|
||||
&.attr-value,
|
||||
&.keyword {
|
||||
color: var(--base0E);
|
||||
}
|
||||
|
||||
&.function {
|
||||
color: var(--base0B);
|
||||
}
|
||||
|
||||
&.selector,
|
||||
&.class-name {
|
||||
color: var(--base07);
|
||||
}
|
||||
|
||||
&.regex,
|
||||
&.important {
|
||||
color: var(--base0A);
|
||||
}
|
||||
|
||||
&.variable {
|
||||
color: var(--base08);
|
||||
}
|
||||
|
||||
&.important,
|
||||
&.bold {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
&.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&.entity {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
||||
.language-diff {
|
||||
.token {
|
||||
&.deleted {
|
||||
color: var(--#{$prefix}red-400);
|
||||
background-color: transparent;
|
||||
&.comment,
|
||||
&.prolog,
|
||||
&.doctype,
|
||||
&.cdata {
|
||||
color: var(--base03);
|
||||
}
|
||||
&.inserted {
|
||||
color: var(--#{$prefix}green-400);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.language-bash,
|
||||
.language-sh {
|
||||
.token.comment {
|
||||
color: var(--base03);
|
||||
&.punctuation {
|
||||
color: var(--base05);
|
||||
}
|
||||
|
||||
&.property {
|
||||
color: var(--base0A);
|
||||
}
|
||||
|
||||
&.tag {
|
||||
color: var(--base08);
|
||||
}
|
||||
|
||||
&.boolean,
|
||||
&.number {
|
||||
color: var(--base09);
|
||||
}
|
||||
|
||||
&.constant,
|
||||
&.symbol,
|
||||
&.deleted {
|
||||
color: var(--base08);
|
||||
}
|
||||
|
||||
&.attr-name,
|
||||
&.string,
|
||||
&.char,
|
||||
&.builtin,
|
||||
&.inserted {
|
||||
color: var(--base0C);
|
||||
}
|
||||
|
||||
&.operator,
|
||||
&.entity,
|
||||
&.url {
|
||||
color: var(--base05);
|
||||
}
|
||||
|
||||
&.atrule,
|
||||
&.attr-value,
|
||||
&.keyword {
|
||||
color: var(--base0E);
|
||||
}
|
||||
|
||||
&.function {
|
||||
color: var(--base0B);
|
||||
}
|
||||
|
||||
&.selector,
|
||||
&.class-name {
|
||||
color: var(--base07);
|
||||
}
|
||||
|
||||
&.regex,
|
||||
&.important {
|
||||
color: var(--base0A);
|
||||
}
|
||||
|
||||
&.variable {
|
||||
color: var(--base08);
|
||||
}
|
||||
|
||||
&.important,
|
||||
&.bold {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
&.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&.entity {
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,97 +4,99 @@
|
|||
|
||||
// stylelint-disable selector-max-type, selector-no-qualifying-type
|
||||
|
||||
.bd-toc {
|
||||
container-type: inline-size;
|
||||
@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;
|
||||
}
|
||||
@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;
|
||||
nav {
|
||||
font-size: .875rem;
|
||||
// @include font-size(.875rem);
|
||||
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
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);
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 500;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: .125rem 0 .125rem .75rem;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border-left: .125rem solid transparent;
|
||||
|
||||
code {
|
||||
font: inherit;
|
||||
&: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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue