summaryrefslogtreecommitdiffstats
path: root/site/assets/scss
diff options
context:
space:
mode:
Diffstat (limited to 'site/assets/scss')
-rw-r--r--site/assets/scss/_ads.scss6
-rw-r--r--site/assets/scss/_brand.scss4
-rw-r--r--site/assets/scss/_buttons.scss25
-rw-r--r--site/assets/scss/_callouts.scss9
-rw-r--r--site/assets/scss/_clipboard-js.scss8
-rw-r--r--site/assets/scss/_colors.scss1
-rw-r--r--site/assets/scss/_component-examples.scss142
-rw-r--r--site/assets/scss/_content.scss89
-rw-r--r--site/assets/scss/_footer.scss4
-rw-r--r--site/assets/scss/_masthead.scss53
-rw-r--r--site/assets/scss/_navbar.scss64
-rw-r--r--site/assets/scss/_scrolling.scss13
-rw-r--r--site/assets/scss/_search.scss33
-rw-r--r--site/assets/scss/_sidebar.scss19
-rw-r--r--site/assets/scss/_syntax.scss57
-rw-r--r--site/assets/scss/_toc.scss36
-rw-r--r--site/assets/scss/_variables.scss26
-rw-r--r--site/assets/scss/docs.scss8
18 files changed, 423 insertions, 174 deletions
diff --git a/site/assets/scss/_ads.scss b/site/assets/scss/_ads.scss
index b9369eb..cc56340 100644
--- a/site/assets/scss/_ads.scss
+++ b/site/assets/scss/_ads.scss
@@ -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;
}
diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss
index 9637cfb..03fe2fe 100644
--- a/site/assets/scss/_brand.scss
+++ b/site/assets/scss/_brand.scss
@@ -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);
}
}
}
diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss
index 13bd6e4..8e4c383 100644
--- a/site/assets/scss/_buttons.scss
+++ b/site/assets/scss/_buttons.scss
@@ -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;
+}
diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
index 4513a7d..c3e5629 100644
--- a/site/assets/scss/_callouts.scss
+++ b/site/assets/scss/_callouts.scss
@@ -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);
}
}
diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 3a876a5..de709d0 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -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;
}
diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
index a71a897..da4bbac 100644
--- a/site/assets/scss/_colors.scss
+++ b/site/assets/scss/_colors.scss
@@ -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; }
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index f4865da..0f1018b 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -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;
- }
+.highlight-toolbar {
+ background-color: var(--bd-pre-bg);
- .bd-example {
- margin: 0;
- border: 0;
+ + .highlight {
+ @include border-top-radius(0);
}
+}
- @include media-breakpoint-up(md) {
- margin-right: 0;
- margin-left: 0;
- @include border-radius($border-radius);
+.bd-file-ref {
+ .highlight-toolbar {
+ @include media-breakpoint-up(md) {
+ @include border-top-radius(calc(var(--bs-border-radius) - 1px));
+ }
}
}
-.highlight-toolbar {
- border: solid $border-color;
- border-width: 1px 0;
+.bd-content .bd-code-snippet {
+ margin-bottom: 1rem;
}
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index cd59433..ba053df 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -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
+.border-lg-start {
+ @include media-breakpoint-up(lg) {
+ border-left: var(--bs-border-width) solid var(--bs-border-color);
}
+}
- &:hover {
- .bi {
- transform: translate3d(5px, 0, 0);
- }
+// 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};
+ }
-.border-lg-start {
- @include media-breakpoint-up(lg) {
- border-left: $border-width solid $border-color;
+ .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
diff --git a/site/assets/scss/_footer.scss b/site/assets/scss/_footer.scss
index 87cee6d..42e1ca0 100644
--- a/site/assets/scss/_footer.scss
+++ b/site/assets/scss/_footer.scss
@@ -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;
}
}
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index 81d4d99..d74d1ec 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -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;
+ }
+ }
+}
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 0cff3e2..110797b 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -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);
}
}
diff --git a/site/assets/scss/_scrolling.scss b/site/assets/scss/_scrolling.scss
new file mode 100644
index 0000000..2017960
--- /dev/null
+++ b/site/assets/scss/_scrolling.scss
@@ -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;
+ }
+}
diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
index 01e9d03..ca1e5b0 100644
--- a/site/assets/scss/_search.scss
+++ b/site/assets/scss/_search.scss
@@ -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);
+}
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index ed76b3c..6f1ef29 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -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 {
diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 106032c..38ac11f 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -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;
}
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index 512a11b..32bf3cf 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -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;
+
+ &:hover,
+ &.active {
+ color: var(--bd-toc-color);
+ border-left-color: var(--bd-toc-color);
+ }
- &:not(:hover) {
- text-decoration: none;
+ &.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));
}
}
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index b460392..5e8ab5d 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -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
}
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index 5214934..4ab417e 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -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";
generated by cgit v1.2.3 (git 2.39.1) at 2024-06-03 14:19:20 +0000