Merging upstream version 5.3.0+dfsg.
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
parent
a87fc4fcc7
commit
e92720b6a7
GPG key ID:
FBB4F0E80A80222F
605 changed files with 15320 additions and 9495 deletions
|
|
@ -14,10 +14,10 @@
|
|||
@include font-size(.8125rem);
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
background-color: $gray-100;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
|
||||
a {
|
||||
color: $gray-800;
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -34,5 +34,5 @@
|
|||
.carbon-poweredby {
|
||||
display: block;
|
||||
margin-top: .75rem;
|
||||
color: $gray-700 !important;
|
||||
color: var(--bs-body-color) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,13 +15,13 @@
|
|||
// Individual items
|
||||
.bd-brand-item {
|
||||
+ .bd-brand-item {
|
||||
border-top: 1px solid $white;
|
||||
border-top: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
+ .bd-brand-item {
|
||||
border-top: 0;
|
||||
border-left: 1px solid $white;
|
||||
border-left: 1px solid var(--bs-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,8 @@
|
|||
.btn-bd-primary {
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet);
|
||||
--bs-btn-border-color: var(--bd-violet);
|
||||
--bs-btn-border-radius: .5rem;
|
||||
--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%)};
|
||||
|
|
@ -33,13 +32,21 @@
|
|||
}
|
||||
|
||||
.btn-bd-light {
|
||||
--btn-custom-color: #{mix($bd-violet, $white, 75%)};
|
||||
|
||||
--bs-btn-color: var(--bs-gray-600);
|
||||
--bs-btn-border-color: var(--bs-gray-400);
|
||||
--bs-btn-hover-color: var(--bd-violet);
|
||||
--bs-btn-hover-border-color: var(--bd-violet);
|
||||
--bs-btn-active-color: var(--bd-violet);
|
||||
--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(--bd-violet);
|
||||
--bs-btn-focus-border-color: var(--bd-violet);
|
||||
--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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,13 @@
|
|||
//
|
||||
|
||||
.bd-callout {
|
||||
--#{$prefix}link-color-rgb: var(--bd-callout-link);
|
||||
--#{$prefix}code-color: var(--bd-callout-code-color);
|
||||
|
||||
padding: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
color: var(--bd-callout-color, inherit);
|
||||
background-color: var(--bd-callout-bg, var(--bs-gray-100));
|
||||
border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
|
||||
|
||||
|
|
@ -29,7 +33,8 @@
|
|||
// Variations
|
||||
@each $variant in $bd-callout-variants {
|
||||
.bd-callout-#{$variant} {
|
||||
--bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075);
|
||||
--bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5);
|
||||
--bd-callout-color: var(--bs-#{$variant}-text-emphasis);
|
||||
--bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
|
||||
--bd-callout-border: var(--bs-#{$variant}-border-subtle);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@
|
|||
display: block;
|
||||
padding: .5em;
|
||||
line-height: 1;
|
||||
color: $gray-900;
|
||||
background-color: $gray-100;
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bd-pre-bg);
|
||||
border: 0;
|
||||
@include border-radius(.25rem);
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
color: var(--bs-link-hover-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -39,6 +39,6 @@
|
|||
.btn-clipboard {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: .75rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-right: .75rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@
|
|||
}
|
||||
|
||||
// stylelint-disable declaration-block-single-line-max-declarations
|
||||
|
||||
.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
|
||||
.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
|
||||
.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
|
||||
|
|
|
|||
|
|
@ -2,12 +2,16 @@
|
|||
// Docs examples
|
||||
//
|
||||
|
||||
.bd-example-snippet {
|
||||
border: solid $border-color;
|
||||
.bd-code-snippet {
|
||||
margin: 0 ($bd-gutter-x * -.5) 1rem;
|
||||
border: solid var(--bs-border-color);
|
||||
border-width: 1px 0;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-width: 1px;
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -16,8 +20,8 @@
|
|||
|
||||
position: relative;
|
||||
padding: var(--bd-example-padding);
|
||||
margin: 0 ($bd-gutter-x * -.5);
|
||||
border: solid $border-color;
|
||||
margin: 0 ($bd-gutter-x * -.5) 1rem;
|
||||
border: solid var(--bs-border-color);
|
||||
border-width: 1px 0;
|
||||
@include clearfix();
|
||||
|
||||
|
|
@ -27,13 +31,7 @@
|
|||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-width: 1px;
|
||||
@include border-top-radius(var(--bs-border-radius));
|
||||
}
|
||||
|
||||
+ .bd-code-snippet {
|
||||
@include border-top-radius(0);
|
||||
border: solid $border-color;
|
||||
border-width: 0 1px 1px;
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
}
|
||||
|
||||
+ p {
|
||||
|
|
@ -58,7 +56,8 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
> :last-child,
|
||||
> nav:last-child .breadcrumb {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -115,11 +114,12 @@
|
|||
//
|
||||
|
||||
.bd-example-row [class^="col"],
|
||||
.bd-example-cssgrid .grid > * {
|
||||
.bd-example-cols [class^="col"] > *,
|
||||
.bd-example-cssgrid [class*="grid"] > * {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(var(--bd-violet-rgb), .1);
|
||||
border: 1px solid rgba(var(--bd-violet-rgb), .25);
|
||||
background-color: rgba(var(--bd-violet-rgb), .15);
|
||||
border: 1px solid rgba(var(--bd-violet-rgb), .3);
|
||||
}
|
||||
|
||||
.bd-example-row .row + .row,
|
||||
|
|
@ -129,12 +129,12 @@
|
|||
|
||||
.bd-example-row-flex-cols .row {
|
||||
min-height: 10rem;
|
||||
background-color: rgba(255, 0, 0, .1);
|
||||
background-color: rgba(var(--bd-violet-rgb), .15);
|
||||
}
|
||||
|
||||
.bd-example-flex div {
|
||||
background-color: rgba($bd-purple, .15);
|
||||
border: 1px solid rgba($bd-purple, .15);
|
||||
.bd-example-flex div:not(.vr) {
|
||||
background-color: rgba(var(--bd-violet-rgb), .15);
|
||||
border: 1px solid rgba(var(--bd-violet-rgb), .3);
|
||||
}
|
||||
|
||||
// Grid mixins
|
||||
|
|
@ -176,9 +176,9 @@
|
|||
.ratio {
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
color: $gray-600;
|
||||
background-color: $gray-100;
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
color: var(--bs-secondary-color);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
|
|
@ -208,8 +208,14 @@
|
|||
}
|
||||
|
||||
// Tooltips
|
||||
.tooltip-demo a {
|
||||
white-space: nowrap;
|
||||
.tooltip-demo {
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: .25rem .125rem;
|
||||
}
|
||||
}
|
||||
|
||||
// scss-docs-start custom-tooltip
|
||||
|
|
@ -253,7 +259,7 @@
|
|||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: .25rem;
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -269,13 +275,13 @@
|
|||
|
||||
.position-relative {
|
||||
height: 200px;
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
.position-absolute {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: $dark;
|
||||
background-color: var(--bs-body-color);
|
||||
@include border-radius();
|
||||
}
|
||||
}
|
||||
|
|
@ -302,6 +308,39 @@
|
|||
min-height: 240px;
|
||||
}
|
||||
|
||||
.bd-example-zindex-levels {
|
||||
min-height: 15rem;
|
||||
|
||||
> div {
|
||||
color: var(--bs-body-bg);
|
||||
background-color: var(--bd-violet);
|
||||
border: 1px solid var(--bd-purple);
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
top: 3rem;
|
||||
left: 3rem;
|
||||
}
|
||||
> :nth-child(3) {
|
||||
top: 4.5rem;
|
||||
left: 4.5rem;
|
||||
}
|
||||
> :nth-child(4) {
|
||||
top: 6rem;
|
||||
left: 6rem;
|
||||
}
|
||||
> :nth-child(5) {
|
||||
top: 7.5rem;
|
||||
left: 7.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Code snippets
|
||||
//
|
||||
|
|
@ -309,19 +348,24 @@
|
|||
.highlight {
|
||||
position: relative;
|
||||
padding: .75rem ($bd-gutter-x * .5);
|
||||
margin-bottom: 1rem;
|
||||
background-color: var(--bs-gray-100);
|
||||
background-color: var(--bd-pre-bg);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: .75rem 1.25rem;
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
@include border-radius(calc(var(--bs-border-radius) - 1px));
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
pre {
|
||||
margin-right: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 0;
|
||||
margin-top: .625rem;
|
||||
margin-right: 1.875rem;
|
||||
margin-bottom: .625rem;
|
||||
padding: .25rem 0 .875rem;
|
||||
margin-top: .8125rem;
|
||||
margin-bottom: 0;
|
||||
overflow: overlay;
|
||||
white-space: pre;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
|
@ -329,31 +373,27 @@
|
|||
|
||||
pre code {
|
||||
@include font-size(inherit);
|
||||
color: $gray-900; // Effectively the base text color
|
||||
color: var(--bs-body-color); // Effectively the base text color
|
||||
word-wrap: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-code-snippet {
|
||||
margin: 0 ($bd-gutter-x * -.5) $spacer;
|
||||
|
||||
.highlight {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.bd-example {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-toolbar {
|
||||
border: solid $border-color;
|
||||
border-width: 1px 0;
|
||||
background-color: var(--bd-pre-bg);
|
||||
|
||||
+ .highlight {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-file-ref {
|
||||
.highlight-toolbar {
|
||||
@include media-breakpoint-up(md) {
|
||||
@include border-top-radius(calc(var(--bs-border-radius) - 1px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-content .bd-code-snippet {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@
|
|||
//
|
||||
|
||||
.bd-content {
|
||||
// Offset content from fixed navbar when jumping to headings
|
||||
> :target {
|
||||
padding-top: 5rem;
|
||||
margin-top: -5rem;
|
||||
> h2,
|
||||
> h3,
|
||||
> h4 {
|
||||
--bs-heading-color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
// Offset content from fixed navbar when jumping to headings
|
||||
> h2:not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
|
@ -32,6 +33,9 @@
|
|||
// 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);
|
||||
|
||||
|
|
@ -60,6 +64,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
// Prevent breaking of code
|
||||
// stylelint-disable-next-line selector-max-compound-selectors
|
||||
th,
|
||||
|
|
@ -80,7 +92,18 @@
|
|||
min-width: 280px;
|
||||
}
|
||||
|
||||
.table-swatches {
|
||||
th {
|
||||
color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
td code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-title {
|
||||
--bs-heading-color: var(--bs-emphasis-color);
|
||||
@include font-size(3rem);
|
||||
}
|
||||
|
||||
|
|
@ -89,38 +112,52 @@
|
|||
font-weight: 300;
|
||||
}
|
||||
|
||||
.bd-bg-violet {
|
||||
background-color: $bd-violet;
|
||||
}
|
||||
|
||||
.bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -.125em;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.icon-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration-color: rgba($primary, .5);
|
||||
text-underline-offset: .5rem;
|
||||
backface-visibility: hidden;
|
||||
|
||||
.bi {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.bi {
|
||||
transform: translate3d(5px, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-lg-start {
|
||||
@include media-breakpoint-up(lg) {
|
||||
border-left: $border-width solid $border-color;
|
||||
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: #{mix($blue-500, $blue-600)};
|
||||
--bs-dropdown-link-active-bg: #{$blue-700};
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
|
||||
--bs-btn-border-color: #{rgba($white, .25)};
|
||||
--bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
|
||||
--bs-btn-hover-border-color: #{rgba($white, .25)};
|
||||
--bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
|
||||
--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
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
|
||||
.bd-footer {
|
||||
a {
|
||||
color: $gray-700;
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-color;
|
||||
color: var(--bs-link-hover-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,18 +10,20 @@
|
|||
// stylelint-enable
|
||||
|
||||
h1 {
|
||||
--bs-heading-color: var(--bs-emphasis-color);
|
||||
@include font-size(4rem);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lead {
|
||||
@include font-size(1rem);
|
||||
font-weight: 400;
|
||||
color: $gray-700;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
.bd-code-snippet {
|
||||
margin: 0;
|
||||
border-color: var(--bs-border-color-translucent);
|
||||
border-width: 1px;
|
||||
@include border-radius(.5rem);
|
||||
}
|
||||
|
||||
|
|
@ -32,22 +34,27 @@
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background-color: rgba(var(--bs-body-color-rgb), .075);
|
||||
@include border-radius(.5rem);
|
||||
@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: -.125rem;
|
||||
top: -.625rem;
|
||||
right: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#carbonads { // stylelint-disable-line selector-max-id
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
|
|
@ -58,12 +65,14 @@
|
|||
}
|
||||
|
||||
.masthead-followup {
|
||||
.lead {
|
||||
@include font-size(1rem);
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
--bs-heading-color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
@include border-radius(.5rem);
|
||||
.lead {
|
||||
@include font-size(1rem);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
|
|
@ -73,10 +82,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.bd-btn-lg {
|
||||
padding: .8rem 2rem;
|
||||
}
|
||||
|
||||
.masthead-followup-icon {
|
||||
padding: 1rem;
|
||||
color: rgba(var(--bg-rgb), 1);
|
||||
|
|
@ -86,7 +91,7 @@
|
|||
mix-blend-mode: darken;
|
||||
|
||||
svg {
|
||||
filter: drop-shadow(0 1px 1px #fff);
|
||||
filter: drop-shadow(0 1px 1px var(--bs-body-bg));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -94,3 +99,21 @@
|
|||
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);
|
||||
}
|
||||
|
||||
&:hover > img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
[data-bs-theme="dark"] {
|
||||
.masthead-followup-icon {
|
||||
mix-blend-mode: lighten;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,16 @@
|
|||
.bd-navbar {
|
||||
padding: .75rem 0;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
|
||||
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
content: "";
|
||||
background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
|
||||
}
|
||||
|
||||
.bd-navbar-toggle {
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
|
@ -30,7 +38,8 @@
|
|||
}
|
||||
|
||||
.navbar-brand {
|
||||
transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
|
||||
color: $white;
|
||||
@include transition(transform .2s ease-in-out);
|
||||
|
||||
&:hover {
|
||||
transform: rotate(-5deg) scale(1.1);
|
||||
|
|
@ -60,7 +69,7 @@
|
|||
}
|
||||
|
||||
.offcanvas-lg {
|
||||
background-color: var(--bd-violet);
|
||||
background-color: var(--bd-violet-bg);
|
||||
border-left: 0;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
|
@ -75,17 +84,46 @@
|
|||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--#{$prefix}dropdown-min-width: 12rem;
|
||||
--#{$prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
@include rfs(.875rem, --#{$prefix}dropdown-font-size);
|
||||
--bs-dropdown-min-width: 12rem;
|
||||
--bs-dropdown-padding-x: .25rem;
|
||||
--bs-dropdown-padding-y: .25rem;
|
||||
--bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
--bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
|
||||
@include rfs(.875rem, --bs-dropdown-font-size);
|
||||
@include font-size(.875rem);
|
||||
@include border-radius(.5rem);
|
||||
box-shadow: $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;
|
||||
|
||||
.bi {
|
||||
display: block !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item.current {
|
||||
font-weight: 600;
|
||||
background-image: escape-svg($dropdown-active-icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right $dropdown-item-padding-x top .6rem;
|
||||
background-size: .75rem .75rem;
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
13
site/assets/scss/_scrolling.scss
Normal file
13
site/assets/scss/_scrolling.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// When navigating with the keyboard, prevent focus from landing behind the sticky header
|
||||
|
||||
main {
|
||||
a,
|
||||
button,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
[tabindex="0"] {
|
||||
scroll-margin-top: 80px;
|
||||
scroll-margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,30 @@
|
|||
// stylelint-disable selector-class-pattern
|
||||
|
||||
:root {
|
||||
--docsearch-primary-color: var(--bd-violet);
|
||||
--docsearch-logo-color: var(--bd-violet);
|
||||
}
|
||||
|
||||
@include color-mode(dark, true) {
|
||||
// From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
|
||||
// in html[data-theme="dark"] selector
|
||||
// and are slightly modified for formatting purpose
|
||||
--docsearch-text-color: #f5f6f7;
|
||||
--docsearch-container-background: rgba(9, 10, 17, .8);
|
||||
--docsearch-modal-background: #15172a;
|
||||
--docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
|
||||
--docsearch-searchbox-background: #090a11;
|
||||
--docsearch-searchbox-focus-background: #000;
|
||||
--docsearch-hit-color: #bec3c9;
|
||||
--docsearch-hit-shadow: none;
|
||||
--docsearch-hit-background: #090a11;
|
||||
--docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
|
||||
--docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
|
||||
--docsearch-footer-background: #1e2136;
|
||||
--docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
|
||||
--docsearch-muted-color: #7f8497;
|
||||
}
|
||||
|
||||
.bd-search {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -19,7 +44,7 @@
|
|||
}
|
||||
|
||||
.DocSearch-Container {
|
||||
--docsearch-muted-color: #{$text-muted};
|
||||
--docsearch-muted-color: var(--bs-secondary-color);
|
||||
--docsearch-hit-shadow: none;
|
||||
|
||||
z-index: 2000; // Make sure to be over all components showcased in the documentation
|
||||
|
|
@ -139,3 +164,9 @@
|
|||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,17 @@
|
|||
margin-left: -.25rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.offcanvas-lg {
|
||||
border-right-color: var(--bs-border-color);
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-links-heading {
|
||||
color: var(--bs-emphasis-color);
|
||||
}
|
||||
|
||||
.bd-links-nav {
|
||||
|
|
@ -35,16 +46,16 @@
|
|||
.bd-links-link {
|
||||
padding: .1875rem .5rem;
|
||||
margin-top: .125rem;
|
||||
margin-left: 1rem;
|
||||
color: rgba($black, .65);
|
||||
margin-left: 1.125rem;
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: rgba($black, .85);
|
||||
color: var(--bs-emphasis-color);
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
background-color: rgba(var(--bd-violet-rgb), .1);
|
||||
background-color: var(--bd-sidebar-link-bg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,49 @@
|
|||
:root {
|
||||
--base00: #fff;
|
||||
--base01: #f5f5f5;
|
||||
:root,
|
||||
[data-bs-theme="light"] {
|
||||
// --base00: #fff;
|
||||
// --base01: #f5f5f5;
|
||||
--base02: #c8c8fa;
|
||||
--base03: #565c64;
|
||||
--base04: #030303;
|
||||
--base04: #666;
|
||||
--base05: #333;
|
||||
--base06: #fff;
|
||||
--base07: #9a6700;
|
||||
--base08: #bc4c00;
|
||||
--base09: #087990;
|
||||
--base0A: #795da3;
|
||||
--base0B: #183691;
|
||||
--base0C: #183691;
|
||||
--base0D: #795da3;
|
||||
--base0E: #a71d5d;
|
||||
--base07: #{$teal-700}; // #9a6700
|
||||
--base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
|
||||
--base09: #{$cyan-700}; // #087990
|
||||
--base0A: #{$purple-500}; // #795da3
|
||||
--base0B: #{$blue-700}; // #183691
|
||||
--base0C: #{$blue-700}; // #183691
|
||||
--base0D: #{$purple-500}; // #795da3
|
||||
--base0E: #{$pink-600}; // #a71d5d
|
||||
--base0F: #333;
|
||||
}
|
||||
|
||||
@include color-mode(dark, true) {
|
||||
// --base00: #282c34;
|
||||
// --base01: #353b45;
|
||||
--base02: #3e4451;
|
||||
--base03: #868e96;
|
||||
--base04: #868e96;
|
||||
--base05: #abb2bf;
|
||||
--base06: #b6bdca;
|
||||
--base07: #{$orange-300}; // #d19a66
|
||||
--base08: #{$cyan-300};
|
||||
--base09: #{$orange-300}; // #d19a66
|
||||
--base0A: #{$yellow-200}; // #e5c07b
|
||||
--base0B: #{$teal-300}; // #98c379
|
||||
--base0C: #{$teal-300}; // #56b6c2
|
||||
--base0D: #{$blue-300}; // #61afef
|
||||
--base0E: #{$indigo-200}; // #c678dd
|
||||
--base0F: #{$red-300}; // #be5046
|
||||
|
||||
.language-diff .gd {
|
||||
color: $red-400;
|
||||
}
|
||||
.language-diff .gi {
|
||||
color: $green-400;
|
||||
}
|
||||
}
|
||||
|
||||
.hl { background-color: var(--base02); }
|
||||
.c { color: var(--base03); }
|
||||
.err { color: var(--base08); }
|
||||
|
|
@ -33,7 +60,7 @@
|
|||
.ge { font-style: italic; }
|
||||
.gh {
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
color: var(--base0A);
|
||||
}
|
||||
.gi { color: var(--bs-success); }
|
||||
.gp {
|
||||
|
|
@ -101,14 +128,14 @@
|
|||
.language-bash,
|
||||
.language-sh {
|
||||
.line::before {
|
||||
color: #777;
|
||||
color: var(--base03);
|
||||
content: "$ ";
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.language-powershell::before {
|
||||
color: #009;
|
||||
color: var(--base0C);
|
||||
content: "PM> ";
|
||||
user-select: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// stylelint-disable selector-max-type
|
||||
// stylelint-disable selector-max-type, selector-no-qualifying-type
|
||||
|
||||
.bd-toc {
|
||||
@include media-breakpoint-up(lg) {
|
||||
|
|
@ -20,19 +20,24 @@
|
|||
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: .125rem 0 .125rem .75rem;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border-left: .125rem solid transparent;
|
||||
|
||||
&:not(:hover) {
|
||||
text-decoration: none;
|
||||
&:hover,
|
||||
&.active {
|
||||
color: var(--bd-toc-color);
|
||||
border-left-color: var(--bd-toc-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
code {
|
||||
|
|
@ -52,15 +57,16 @@
|
|||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
border: 1px solid $border-color;
|
||||
@include border-radius(.4rem);
|
||||
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: $white;
|
||||
background-color: var(--bs-body-bg);
|
||||
border-color: var(--bd-violet);
|
||||
}
|
||||
|
||||
|
|
@ -74,10 +80,10 @@
|
|||
.bd-toc-collapse {
|
||||
@include media-breakpoint-down(md) {
|
||||
nav {
|
||||
padding: 1.25rem;
|
||||
background-color: var(--bs-gray-100);
|
||||
border: 1px solid $border-color;
|
||||
@include border-radius(.25rem);
|
||||
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));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,14 @@
|
|||
// stylelint-disable scss/dollar-variable-default
|
||||
|
||||
// Local docs variables
|
||||
$bd-purple: #4c0bce;
|
||||
$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
|
||||
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
|
||||
$bd-accent: #ffe484;
|
||||
$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
|
||||
$bd-accent: #ffe484;
|
||||
|
||||
$bd-gutter-x: 3rem;
|
||||
$bd-callout-variants: info, warning, danger !default;
|
||||
|
||||
:root {
|
||||
:root,
|
||||
[data-bs-theme="light"] {
|
||||
--bd-purple: #{$bd-purple};
|
||||
--bd-violet: #{$bd-violet};
|
||||
--bd-accent: #{$bd-accent};
|
||||
|
|
@ -18,6 +16,20 @@ $bd-callout-variants: info, warning, danger !default;
|
|||
--bd-accent-rgb: #{to-rgb($bd-accent)};
|
||||
--bd-pink-rgb: #{to-rgb($pink-500)};
|
||||
--bd-teal-rgb: #{to-rgb($teal-500)};
|
||||
--docsearch-primary-color: var(--bd-violet);
|
||||
--docsearch-logo-color: var(--bd-violet);
|
||||
--bd-violet-bg: var(--bd-violet);
|
||||
--bd-toc-color: var(--bd-violet);
|
||||
--bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
--bd-callout-link: #{to-rgb($blue-600)};
|
||||
--bd-callout-code-color: #{$pink-600};
|
||||
--bd-pre-bg: var(--bs-tertiary-bg);
|
||||
}
|
||||
|
||||
@include color-mode(dark, true) {
|
||||
--bd-violet: #{mix($bd-violet, $white, 75%)};
|
||||
--bd-violet-bg: #{$bd-violet};
|
||||
--bd-toc-color: var(--#{$prefix}emphasis-color);
|
||||
--bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
|
||||
--bd-callout-link: #{to-rgb($blue-300)};
|
||||
--bd-callout-code-color: #{$pink-300};
|
||||
--bd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
/*!
|
||||
* Bootstrap Docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2022 The Bootstrap Authors
|
||||
* Copyright 2011-2022 Twitter, Inc.
|
||||
* Copyright 2011-2023 The Bootstrap Authors
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
|
@ -29,8 +28,8 @@
|
|||
@import "../../../scss/mixins";
|
||||
|
||||
// fusv-disable
|
||||
$enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default
|
||||
$enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
|
||||
$enable-grid-classes: false;
|
||||
$enable-cssgrid: true;
|
||||
// fusv-enable
|
||||
@import "../../../scss/grid";
|
||||
|
||||
|
|
@ -53,6 +52,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
|
|||
@import "colors";
|
||||
@import "clipboard-js";
|
||||
@import "placeholder-img";
|
||||
@import "scrolling";
|
||||
|
||||
// Load docs dependencies
|
||||
@import "syntax";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue