mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-15 11:59:39 +03:00
Code Activity

Add dark mode to docs

Browse Source
This commit is contained in:
Mark Otto
2022-02-16 14:55:43 -08:00
parent 54b4b2c66a
commit 143f947083
42 changed files with 736 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.bundlewatch.config.json
+6 -6
View File
@@ -2,19 +2,19 @@
"files": [
{
"path": "./dist/css/bootstrap-grid.css",
"maxSize": "7.5 kB"
"maxSize": "7.75 kB"
},
{
"path": "./dist/css/bootstrap-grid.min.css",
"maxSize": "6.55 kB"
"maxSize": "7.0 kB"
},
{
"path": "./dist/css/bootstrap-reboot.css",
"maxSize": "2.75 kB"
"maxSize": "3.0 kB"
},
{
"path": "./dist/css/bootstrap-reboot.min.css",
"maxSize": "2.5 kB"
"maxSize": "2.75 kB"
},
{
"path": "./dist/css/bootstrap-utilities.css",
@@ -26,11 +26,11 @@
},
{
"path": "./dist/css/bootstrap.css",
"maxSize": "28.75 kB"
"maxSize": "29.25 kB"
},
{
"path": "./dist/css/bootstrap.min.css",
"maxSize": "26.75 kB"
"maxSize": "27.25 kB"
},
{
"path": "./dist/js/bootstrap.bundle.js",
scss/_close.scss
+8
View File
@@ -38,3 +38,11 @@
.btn-close-white {
filter: $btn-close-white-filter;
}
@if $enable-dark-mode {
[data-bs-theme="dark"] {
.btn-close {
filter: $btn-close-white-filter;
}
}
}
scss/_dropdown.scss
+1
View File
@@ -184,6 +184,7 @@
white-space: nowrap; // prevent links from randomly breaking onto new lines
background-color: transparent; // For `<button>`s
border: 0; // For `<button>`s
border-radius: var(--#{$prefix}dropdown-item-border-radius, 0); // stylelint-disable-line property-disallowed-list
&:hover,
&:focus {
scss/_pagination.scss
+1 -1
View File
@@ -75,7 +75,7 @@
margin-left: $pagination-margin-start;
}
@if $pagination-margin-start == ($pagination-border-width * -1) {
@if $pagination-margin-start == calc($pagination-border-width * -1) {
&:first-child {
.page-link {
@include border-start-radius(var(--#{$prefix}pagination-border-radius));
scss/_root.scss
+74 -6
View File
@@ -1,4 +1,5 @@
:root {
:root,
[data-bs-theme="light"] {
// Note: Custom variable values only support SassScript inside `#{}`.
// Colors
@@ -44,12 +45,33 @@
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
--#{$prefix}body-color: #{$body-color};
// --#{$prefix}body-accent-color: #{$body-accent-color};
// todo: replace body-accent-color with secondary-color
--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
@if $body-text-align != null {
--#{$prefix}body-text-align: #{$body-text-align};
}
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
// scss-docs-end root-body-variables
--#{$prefix}heading-color: #{$headings-color};
--#{$prefix}link-color: #{$link-color};
--#{$prefix}link-hover-color: #{$link-hover-color};
--#{$prefix}code-color: #{$code-color};
--#{$prefix}highlight-bg: #{$mark-bg};
// scss-docs-start root-border-var
--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
@@ -64,10 +86,56 @@
--#{$prefix}border-radius-pill: #{$border-radius-pill};
// scss-docs-end root-border-var
--#{$prefix}link-color: #{$link-color};
--#{$prefix}link-hover-color: #{$link-hover-color};
--#{$prefix}emphasis-color: #{$emphasis-color};
--#{$prefix}accent-color: #{$accent-color};
--#{$prefix}accent-bg: #{$accent-bg};
--#{$prefix}accent-border: #{$accent-border};
--#{$prefix}code-color: #{$code-color};
--#{$prefix}highlight-bg: #{$mark-bg};
// TODO: move to form components? or make global?
--#{$prefix}form-control-bg: var(--#{$prefix}body-bg);
--#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg);
}
[data-bs-theme="dark"] {
// --#{$prefix}primary: #{$blue-300};
// --#{$prefix}success: #{$green-300};
// --#{$prefix}danger: #{$red-300};
// --#{$prefix}warning: #{$yellow-300};
// --#{$prefix}info: #{$cyan-300};
// --#{$prefix}primary-rgb: #{to-rgb($blue-300)};
// --#{$prefix}success-rgb: #{to-rgb($green-300)};
// --#{$prefix}danger-rgb: #{to-rgb($red-300)};
// --#{$prefix}warning-rgb: #{to-rgb($yellow-300)};
// --#{$prefix}info-rgb: #{to-rgb($cyan-300)};
--#{$prefix}body-color: #{$body-color-dark};
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
--#{$prefix}body-bg: #{$body-bg-dark};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
--#{$prefix}secondary-color: #{$body-secondary-color-dark};
// --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
--#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
--#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
// --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
--#{$prefix}emphasis-color: #{$emphasis-color-dark};
--#{$prefix}accent-color: #{$accent-color-dark};
--#{$prefix}accent-bg: #{$accent-bg-dark};
--#{$prefix}accent-border: #{$accent-border-dark};
--#{$prefix}heading-color: #{$headings-color-dark};
--#{$prefix}link-color: #{$link-color-dark};
--#{$prefix}link-hover-color: #{$link-hover-color-dark};
--#{$prefix}code-color: #{$code-color-dark};
--#{$prefix}border-color: #{$border-color-dark};
--#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
}
scss/_utilities.scss
+5 -1
View File
@@ -538,6 +538,8 @@ $utilities: map-merge(
"muted": $text-muted,
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"body-secondary": var(--#{$prefix}secondary-color),
"body-tertiary": var(--#{$prefix}tertiary-color),
"reset": inherit,
)
)
@@ -563,7 +565,9 @@ $utilities: map-merge(
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
"transparent": transparent,
"body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
"body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
)
)
),
scss/_variables-dark.scss
+26
View File
@@ -0,0 +1,26 @@
// Dark color mode variables
//
// Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
$body-color-dark: $gray-500 !default;
$body-bg-dark: $gray-900 !default;
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
$body-secondary-bg-dark: $gray-800 !default;
$body-tertiary-color-dark: rgba($body-color-dark, .5) !default;
$body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
$emphasis-color-dark: $white !default;
$accent-bg-dark: $blue-300 !default;
$accent-color-dark: color-contrast($accent-bg-dark) !default;
$accent-border-dark: $blue-400 !default;
$border-color-dark: $gray-700 !default;
$border-color-translucent-dark: rgba($white, .15) !default;
$headings-color-dark: #fff !default;
$link-color-dark: $blue-300 !default;
$link-hover-color-dark: $blue-200 !default;
$code-color-dark: $pink-300 !default;
$form-select-indicator-color-dark: $body-color-dark !default;
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
$form-switch-color-dark: rgba($white, .25) !default;
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
scss/_variables.scss
+109 -95
View File
@@ -350,6 +350,7 @@ $enable-validation-icons: true !default;
$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
$enable-dark-mode: true !default;
// Prefix for :root CSS variables
@@ -398,9 +399,21 @@ $position-values: (
//
// Settings for the `<body>` element.
$body-bg: $white !default;
$body-color: $gray-900 !default;
$body-text-align: null !default;
$body-color: $gray-900 !default;
$body-bg: $white !default;
$body-secondary-color: rgba($body-color, .75) !default;
$body-secondary-bg: $gray-200 !default;
$body-tertiary-color: rgba($body-color, .5) !default;
$body-tertiary-bg: $gray-100 !default;
$emphasis-color: $black !default;
$accent-bg: $blue !default;
$accent-color: color-contrast($accent-bg) !default;
$accent-border: $blue-500 !default;
// Links
//
@@ -485,7 +498,6 @@ $border-widths: (
4: 4px,
5: 5px
) !default;
$border-style: solid !default;
$border-color: $gray-300 !default;
$border-color-translucent: rgba($black, .175) !default;
@@ -824,13 +836,13 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
$input-bg: $body-bg !default;
$input-bg: var(--#{$prefix}form-control-bg) !default;
$input-disabled-color: null !default;
$input-disabled-bg: $gray-200 !default;
$input-disabled-bg: var(--#{$prefix}form-control-disabled-bg) !default;
$input-disabled-border-color: null !default;
$input-color: $body-color !default;
$input-border-color: $gray-400 !default;
$input-color: var(--#{$prefix}body-color) !default;
$input-border-color: var(--#{$prefix}border-color) !default; //$gray-400
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: $box-shadow-inset !default;
@@ -844,8 +856,8 @@ $input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: $gray-600 !default;
$input-plaintext-color: $body-color !default;
$input-placeholder-color: var(--#{$prefix}secondary-color) !default;
$input-plaintext-color: var(--#{$prefix}body-color) !default;
$input-height-border: $input-border-width * 2 !default;
@@ -874,7 +886,7 @@ $form-check-transition: null !default;
$form-check-input-active-filter: brightness(90%) !default;
$form-check-input-bg: $input-bg !default;
$form-check-input-border: 1px solid rgba($black, .25) !default;
$form-check-input-border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color) !default;
$form-check-input-border-radius: .25em !default;
$form-check-radio-border-radius: 50% !default;
$form-check-input-focus-border: $input-focus-border-color !default;
@@ -919,7 +931,7 @@ $input-group-addon-padding-y: $input-padding-y !default;
$input-group-addon-padding-x: $input-padding-x !default;
$input-group-addon-font-weight: $input-font-weight !default;
$input-group-addon-color: $input-color !default;
$input-group-addon-bg: $gray-200 !default;
$input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
$input-group-addon-border-color: $input-border-color !default;
// scss-docs-end input-group-variables
@@ -934,7 +946,7 @@ $form-select-line-height: $input-line-height !default;
$form-select-color: $input-color !default;
$form-select-bg: $input-bg !default;
$form-select-disabled-color: null !default;
$form-select-disabled-bg: $gray-200 !default;
$form-select-disabled-bg: $input-disabled-bg !default;
$form-select-disabled-border-color: $input-disabled-border-color !default;
$form-select-bg-position: right $form-select-padding-x center !default;
$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
@@ -971,7 +983,7 @@ $form-select-transition: $input-transition !default;
$form-range-track-width: 100% !default;
$form-range-track-height: .5rem !default;
$form-range-track-cursor: pointer !default;
$form-range-track-bg: $gray-300 !default;
$form-range-track-bg: var(--#{$prefix}tertiary-bg) !default;
$form-range-track-border-radius: 1rem !default;
$form-range-track-box-shadow: $box-shadow-inset !default;
@@ -984,14 +996,14 @@ $form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !defa
$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
$form-range-thumb-disabled-bg: $gray-500 !default;
$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// scss-docs-end form-range-variables
// scss-docs-start form-file-variables
$form-file-button-color: $input-color !default;
$form-file-button-bg: $input-group-addon-bg !default;
$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
$form-file-button-bg: var(--#{$prefix}tertiary-bg) !default;
$form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default;
// scss-docs-end form-file-variables
// scss-docs-start form-floating-variables
@@ -1063,19 +1075,19 @@ $nav-link-font-weight: null !default;
$nav-link-color: var(--#{$prefix}link-color) !default;
$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
$nav-link-disabled-color: $gray-600 !default;
$nav-link-disabled-color: var(--#{$prefix}secondary-color) !default;
$nav-tabs-border-color: $gray-300 !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
$nav-tabs-link-active-color: $gray-700 !default;
$nav-tabs-link-active-bg: $body-bg !default;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
$nav-tabs-border-width: var(--#{$prefix}border-width) !default;
$nav-tabs-border-radius: var(--#{$prefix}border-radius) !default;
$nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
$nav-tabs-link-active-color: var(--#{$prefix}emphasis-color) !default;
$nav-tabs-link-active-bg: var(--#{$prefix}body-bg) !default;
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default;
$nav-pills-link-active-color: var(--#{$prefix}accent-color) !default;
$nav-pills-link-active-bg: var(--#{$prefix}accent-bg) !default;
// scss-docs-end nav-variables
@@ -1101,10 +1113,10 @@ $navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-toggler-focus-width: $btn-focus-width !default;
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
$navbar-light-color: rgba($black, .55) !default;
$navbar-light-hover-color: rgba($black, .7) !default;
$navbar-light-active-color: rgba($black, .9) !default;
$navbar-light-disabled-color: rgba($black, .3) !default;
$navbar-light-color: var(--#{$prefix}secondary-color) !default;
$navbar-light-hover-color: var(--#{$prefix}body-color) !default;
$navbar-light-active-color: var(--#{$prefix}emphasis-color) !default;
$navbar-light-disabled-color: var(--#{$prefix}tertiary-color) !default;
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba($black, .1) !default;
$navbar-light-brand-color: $navbar-light-active-color !default;
@@ -1133,8 +1145,8 @@ $dropdown-padding-x: 0 !default;
$dropdown-padding-y: .5rem !default;
$dropdown-spacer: .125rem !default;
$dropdown-font-size: $font-size-base !default;
$dropdown-color: $body-color !default;
$dropdown-bg: $white !default;
$dropdown-color: var(--#{$prefix}body-color) !default;
$dropdown-bg: var(--#{$prefix}body-bg) !default;
$dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
@@ -1143,9 +1155,9 @@ $dropdown-divider-bg: $dropdown-border-color !default;
$dropdown-divider-margin-y: $spacer * .5 !default;
$dropdown-box-shadow: $box-shadow !default;
$dropdown-link-color: $gray-900 !default;
$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
$dropdown-link-hover-bg: $gray-200 !default;
$dropdown-link-color: var(--#{$prefix}body-color) !default;
$dropdown-link-hover-color: $dropdown-link-color !default;
$dropdown-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
@@ -1192,28 +1204,28 @@ $pagination-padding-x-lg: 1.5rem !default;
$pagination-font-size: $font-size-base !default;
$pagination-color: var(--#{$prefix}link-color) !default;
$pagination-bg: $white !default;
$pagination-border-radius: $border-radius !default;
$pagination-border-width: $border-width !default;
$pagination-margin-start: ($pagination-border-width * -1) !default;
$pagination-border-color: $gray-300 !default;
$pagination-bg: var(--#{$prefix}body-bg) !default;
$pagination-border-radius: var(--#{$prefix}border-radius) !default;
$pagination-border-width: var(--#{$prefix}border-width) !default;
$pagination-margin-start: calc($pagination-border-width * -1) !default; // stylelint-disable-line function-disallowed-list
$pagination-border-color: var(--#{$prefix}border-color) !default;
$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
$pagination-focus-bg: $gray-200 !default;
$pagination-focus-bg: var(--#{$prefix}secondary-bg) !default;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
$pagination-focus-outline: 0 !default;
$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
$pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default;
$pagination-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$pagination-hover-border-color: var(--#{$prefix}border-color) !default; // Todo in v6: remove this?
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default;
$pagination-active-color: var(--#{$prefix}accent-color) !default;
$pagination-active-bg: var(--#{$prefix}accent-bg) !default;
$pagination-active-border-color: var(--#{$prefix}accent-bg) !default;
$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $gray-300 !default;
$pagination-disabled-color: var(--#{$prefix}secondary-color) !default;
$pagination-disabled-bg: var(--#{$prefix}secondary-bg) !default;
$pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
@@ -1235,18 +1247,18 @@ $placeholder-opacity-min: .2 !default;
$card-spacer-y: $spacer !default;
$card-spacer-x: $spacer !default;
$card-title-spacer-y: $spacer * .5 !default;
$card-border-width: $border-width !default;
$card-border-width: var(--#{$prefix}border-width) !default;
$card-border-color: var(--#{$prefix}border-color-translucent) !default;
$card-border-radius: $border-radius !default;
$card-border-radius: var(--#{$prefix}border-radius) !default;
$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba($black, .03) !default;
$card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
$card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default;
$card-bg: $white !default;
$card-bg: var(--#{$prefix}body-bg) !default;
$card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width * .5 !default;
// scss-docs-end card-variables
@@ -1257,10 +1269,10 @@ $card-group-margin: $grid-gutter-width * .5 !default;
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-color: var(--#{$prefix}body-color) !default;
$accordion-bg: $body-bg !default;
$accordion-border-width: $border-width !default;
$accordion-bg: var(--#{$prefix}body-bg) !default;
$accordion-border-width: var(--#{$prefix}border-width) !default;
$accordion-border-color: var(--#{$prefix}border-color) !default;
$accordion-border-radius: $border-radius !default;
$accordion-border-radius: var(--#{$prefix}border-radius) !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
$accordion-body-padding-y: $accordion-padding-y !default;
@@ -1292,9 +1304,9 @@ $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
// scss-docs-start tooltip-variables
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: $white !default;
$tooltip-bg: $black !default;
$tooltip-border-radius: $border-radius !default;
$tooltip-color: var(--#{$prefix}body-bg) !default;
$tooltip-bg: var(--#{$prefix}emphasis-color) !default;
$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: $spacer * .25 !default;
$tooltip-padding-x: $spacer * .5 !default;
@@ -1322,21 +1334,21 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
// scss-docs-start popover-variables
$popover-font-size: $font-size-sm !default;
$popover-bg: $white !default;
$popover-bg: var(--#{$prefix}body-bg) !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-width: var(--#{$prefix}border-width) !default;
$popover-border-color: var(--#{$prefix}border-color-translucent) !default;
$popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default;
$popover-border-radius: var(--#{$prefix}border-radius-lg) !default;
$popover-inner-border-radius: calc($popover-border-radius - $popover-border-width) !default; // stylelint-disable-line function-disallowed-list
$popover-box-shadow: $box-shadow !default;
$popover-header-font-size: $font-size-base !default;
$popover-header-bg: shade-color($popover-bg, 6%) !default;
$popover-header-bg: var(--#{$prefix}secondary-bg) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: .5rem !default;
$popover-header-padding-x: $spacer !default;
$popover-body-color: $body-color !default;
$popover-body-color: var(--#{$prefix}body-color) !default;
$popover-body-padding-y: $spacer !default;
$popover-body-padding-x: $spacer !default;
@@ -1359,16 +1371,16 @@ $toast-padding-x: .75rem !default;
$toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
$toast-background-color: rgba($white, .85) !default;
$toast-border-width: $border-width !default;
$toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
$toast-border-width: var(--#{$prefix}border-width) !default;
$toast-border-color: var(--#{$prefix}border-color-translucent) !default;
$toast-border-radius: $border-radius !default;
$toast-box-shadow: $box-shadow !default;
$toast-border-radius: var(--#{$prefix}border-radius) !default;
$toast-box-shadow: var(--#{$prefix}box-shadow) !default;
$toast-spacing: $container-padding-x !default;
$toast-header-color: $gray-600 !default;
$toast-header-background-color: rgba($white, .85) !default;
$toast-header-border-color: rgba($black, .05) !default;
$toast-header-color: var(--#{$prefix}secondary-color) !default;
$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
$toast-header-border-color: $toast-border-color !default;
// scss-docs-end toast-variables
@@ -1397,10 +1409,10 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-color: null !default;
$modal-content-bg: $white !default;
$modal-content-bg: var(--#{$prefix}body-bg) !default;
$modal-content-border-color: var(--#{$prefix}border-color-translucent) !default;
$modal-content-border-width: $border-width !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-border-width: var(--#{$prefix}border-width) !default;
$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs: $box-shadow-sm !default;
$modal-content-box-shadow-sm-up: $box-shadow !default;
@@ -1453,9 +1465,9 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers widt
// scss-docs-start progress-variables
$progress-height: 1rem !default;
$progress-font-size: $font-size-base * .75 !default;
$progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: $box-shadow-inset !default;
$progress-bg: var(--#{$prefix}secondary-bg) !default;
$progress-border-radius: var(--#{$prefix}border-radius) !default;
$progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
$progress-bar-color: $white !default;
$progress-bar-bg: $primary !default;
$progress-bar-animation-timing: 1s linear infinite !default;
@@ -1466,30 +1478,30 @@ $progress-bar-transition: width .6s ease !default;
// List group
// scss-docs-start list-group-variables
$list-group-color: $gray-900 !default;
$list-group-bg: $white !default;
$list-group-border-color: rgba($black, .125) !default;
$list-group-color: var(--#{$prefix}body-color) !default;
$list-group-bg: var(--#{$prefix}body-bg) !default;
$list-group-border-color: var(--#{$prefix}border-color) !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
$list-group-border-radius: var(--#{$prefix}border-radius) !default;
$list-group-item-padding-y: $spacer * .5 !default;
$list-group-item-padding-x: $spacer !default;
$list-group-item-bg-scale: -80% !default;
$list-group-item-color-scale: 40% !default;
$list-group-hover-bg: $gray-100 !default;
$list-group-hover-bg: var(--#{$prefix}tertiary-bg) !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default;
$list-group-disabled-color: $gray-600 !default;
$list-group-disabled-color: var(--#{$prefix}secondary-color) !default;
$list-group-disabled-bg: $list-group-bg !default;
$list-group-action-color: $gray-700 !default;
$list-group-action-color: var(--#{$prefix}secondary-color) !default;
$list-group-action-hover-color: $list-group-action-color !default;
$list-group-action-active-color: $body-color !default;
$list-group-action-active-bg: $gray-200 !default;
$list-group-action-active-color: var(--#{$prefix}body-color) !default;
$list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
// scss-docs-end list-group-variables
@@ -1497,11 +1509,11 @@ $list-group-action-active-bg: $gray-200 !default;
// scss-docs-start thumbnail-variables
$thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default;
$thumbnail-bg: var(--#{$prefix}body-bg) !default;
$thumbnail-border-width: $border-width !default;
$thumbnail-border-color: var(--#{$prefix}border-color) !default;
$thumbnail-border-radius: $border-radius !default;
$thumbnail-box-shadow: $box-shadow-sm !default;
$thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
// scss-docs-end thumbnail-variables
@@ -1509,7 +1521,7 @@ $thumbnail-box-shadow: $box-shadow-sm !default;
// scss-docs-start figure-variables
$figure-caption-font-size: $small-font-size !default;
$figure-caption-color: $gray-600 !default;
$figure-caption-color: var(--#{$prefix}secondary-color) !default;
// scss-docs-end figure-variables
@@ -1522,8 +1534,8 @@ $breadcrumb-padding-x: 0 !default;
$breadcrumb-item-padding-x: .5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: null !default;
$breadcrumb-divider-color: $gray-600 !default;
$breadcrumb-active-color: $gray-600 !default;
$breadcrumb-divider-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-active-color: var(--#{$prefix}secondary-color) !default;
$breadcrumb-divider: quote("/") !default;
$breadcrumb-divider-flipped: $breadcrumb-divider !default;
$breadcrumb-border-radius: null !default;
@@ -1612,8 +1624,8 @@ $offcanvas-transition-duration: .3s !default;
$offcanvas-border-color: $modal-content-border-color !default;
$offcanvas-border-width: $modal-content-border-width !default;
$offcanvas-title-line-height: $modal-title-line-height !default;
$offcanvas-bg-color: $modal-content-bg !default;
$offcanvas-color: $modal-content-color !default;
$offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
$offcanvas-color: var(--#{$prefix}body-color) !default;
$offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
@@ -1632,3 +1644,5 @@ $kbd-bg: var(--#{$prefix}body-color) !default;
$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
$pre-color: null !default;
@import "variables-dark";
scss/forms/_form-check.scss
+9
View File
@@ -173,3 +173,12 @@
}
}
}
@if $enable-dark-mode {
[data-bs-theme="dark"] {
// Use `:not()` to keep from having to override subsequent embedded SVGs
.form-switch .form-check-input:not(:checked):not(:focus) {
background-image: escape-svg($form-switch-bg-image-dark);
}
}
}
scss/forms/_form-select.scss
+11 -1
View File
@@ -4,6 +4,8 @@
// https://primer.github.io/.
.form-select {
--#{$prefix}form-select-bg: #{escape-svg($form-select-indicator)};
display: block;
width: 100%;
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
@@ -14,7 +16,7 @@
line-height: $form-select-line-height;
color: $form-select-color;
background-color: $form-select-bg;
background-image: escape-svg($form-select-indicator);
background-image: var(--#{$prefix}form-select-bg);
background-repeat: no-repeat;
background-position: $form-select-bg-position;
background-size: $form-select-bg-size;
@@ -69,3 +71,11 @@
@include font-size($form-select-font-size-lg);
@include border-radius($form-select-border-radius-lg);
}
@if $enable-dark-mode {
[data-bs-theme="dark"] {
.form-select {
--#{$prefix}form-select-bg: #{escape-svg($form-select-indicator-dark)};
}
}
}
site/assets/js/color-modes/index.js
+68
View File
@@ -0,0 +1,68 @@
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
/*!
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors
* Copyright 2011-2022 Twitter, Inc.
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
*/
(() => {
'use strict'
const storedTheme = localStorage.getItem('theme')
const getPreferredTheme = () => {
if (storedTheme) {
return storedTheme
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
const setTheme = function (theme) {
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'dark')
} else {
document.documentElement.setAttribute('data-bs-theme', theme)
}
}
setTheme(getPreferredTheme())
const showActiveTheme = theme => {
const activeThemeIcon = document.querySelector('.theme-icon-active use')
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
element.classList.remove('active')
})
btnToActive.classList.add('active')
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
if (storedTheme !== 'light' || storedTheme !== 'dark') {
setTheme(getPreferredTheme())
}
})
window.addEventListener('load', () => {
showActiveTheme(getPreferredTheme())
document.querySelectorAll('[data-bs-theme-value]')
.forEach(toggle => {
toggle.addEventListener('click', () => {
const theme = toggle.getAttribute('data-bs-theme-value')
localStorage.setItem('theme', theme)
setTheme(theme)
showActiveTheme(theme)
})
})
})
})()
site/assets/scss/_ads.scss
+3 -3
View File
@@ -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;
}
site/assets/scss/_buttons.scss
+5 -1
View File
@@ -34,7 +34,7 @@
.btn-bd-light {
--bs-btn-color: var(--bs-gray-600);
--bs-btn-border-color: var(--bs-gray-400);
--bs-btn-border-color: var(--bs-border-color);
--bs-btn-hover-color: var(--bd-violet);
--bs-btn-hover-border-color: var(--bd-violet);
--bs-btn-active-color: var(--bd-violet);
@@ -43,3 +43,7 @@
--bs-btn-focus-border-color: var(--bd-violet);
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
}
.btn-bd-lg {
padding: .8rem 2rem;
}
site/assets/scss/_clipboard-js.scss
+2 -2
View File
@@ -22,8 +22,8 @@
display: block;
padding: .5em;
line-height: 1;
color: $gray-900;
background-color: $gray-100;
color: var(--bs-body-color);
background-color: var(--bs-tertiary-bg);
border: 0;
@include border-radius(.25rem);
site/assets/scss/_component-examples.scss
+20 -14
View File
@@ -3,7 +3,7 @@
//
.bd-example-snippet {
border: solid $border-color;
border: solid var(--bs-border-color);
border-width: 1px 0;
@include media-breakpoint-up(md) {
@@ -17,7 +17,7 @@
position: relative;
padding: var(--bd-example-padding);
margin: 0 ($bd-gutter-x * -.5);
border: solid $border-color;
border: solid var(--bs-border-color);
border-width: 1px 0;
@include clearfix();
@@ -32,7 +32,7 @@
+ .bd-code-snippet {
@include border-top-radius(0);
border: solid $border-color;
border: solid var(--bs-border-color);
border-width: 0 1px 1px;
}
@@ -129,12 +129,12 @@
.bd-example-row-flex-cols .row {
min-height: 10rem;
background-color: rgba(255, 0, 0, .1);
background-color: rgba(var(--bs-violet-rgb), .1);
}
.bd-example-flex div {
background-color: rgba($bd-purple, .15);
border: 1px solid rgba($bd-purple, .15);
background-color: rgba(var(--bs-violet-rgb), .15);
border: 1px solid rgba(var(--bs-violet-rgb), .15);
}
// Grid mixins
@@ -176,8 +176,8 @@
.ratio {
display: inline-block;
width: 10rem;
color: $gray-600;
background-color: $gray-100;
color: var(--bs-secondary-color);
background-color: var(--bs-tertiary-bg);
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
> div {
@@ -253,7 +253,7 @@
width: 5rem;
height: 5rem;
margin: .25rem;
background-color: #f5f5f5;
background-color: var(--bs-tertiary-bg);
}
}
@@ -269,13 +269,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();
}
}
@@ -310,7 +310,7 @@
position: relative;
padding: .75rem ($bd-gutter-x * .5);
margin-bottom: 1rem;
background-color: var(--bs-gray-100);
background-color: var(--bs-tertiary-bg);
@include media-breakpoint-up(md) {
padding: .75rem 1.25rem;
@@ -329,7 +329,7 @@
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;
}
}
@@ -354,6 +354,12 @@
}
.highlight-toolbar {
border: solid $border-color;
background-color: var(--bs-tertiary-bg);
border: solid var(--bs-border-color);
border-width: 1px 0;
.btn-clipboard {
margin-top: 0;
margin-right: 0;
}
}
site/assets/scss/_content.scss
+36 -5
View File
@@ -32,6 +32,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);
@@ -80,6 +83,11 @@
min-width: 280px;
}
.table-swatches {
td:first-child { width: 340px; }
td:nth-child(2) { width: 200px; }
}
.bd-title {
@include font-size(3rem);
}
@@ -89,13 +97,10 @@
font-weight: 300;
}
.bd-bg-violet {
background-color: $bd-violet;
}
.bi {
width: 1em;
height: 1em;
vertical-align: -.125em;
fill: currentcolor;
}
@@ -121,6 +126,32 @@
.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);
}
}
// 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
site/assets/scss/_footer.scss
+2 -2
View File
@@ -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-primary);
text-decoration: underline;
}
}
site/assets/scss/_masthead.scss
+12 -6
View File
@@ -11,13 +11,12 @@
h1 {
@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 {
@@ -46,8 +45,7 @@
}
#carbonads { // stylelint-disable-line selector-max-id
margin-right: auto;
margin-left: auto;
margin-inline: auto;
}
@include media-breakpoint-up(md) {
@@ -57,7 +55,7 @@
}
}
.masthead-followup {
.bd-masthead-followup {
.lead {
@include font-size(1rem);
}
@@ -86,7 +84,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 +92,11 @@
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);
}
@if $enable-dark-mode {
[data-bs-theme="dark"] {
.masthead-followup-icon {
mix-blend-mode: lighten;
}
}
}
site/assets/scss/_navbar.scss
+69 -11
View File
@@ -2,7 +2,13 @@
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);
[data-bs-theme="dark"] & {
backdrop-filter: blur(.25rem);
background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .75));
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
}
.bd-navbar-toggle {
@include media-breakpoint-down(lg) {
@@ -75,17 +81,69 @@
}
.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;
}
.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;
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
}
}
}
}
.bd-theme-toggle {
width: 2rem;
height: 2rem;
cursor: pointer;
}
.bd-theme-toggle-checkbox {
position: absolute;
z-index: -1;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(100%);
white-space: nowrap;
~ .bd-theme-toggle-light { display: none; }
~ .bd-theme-toggle-dark { display: block; }
&:checked {
~ .bd-theme-toggle-light { display: block; }
~ .bd-theme-toggle-dark { display: none; }
}
}
.bd-theme-toggle-light {
color: var(--bs-warning);
}
.bd-theme-toggle-dark {
color: var(--bs-navbar-brand-color);
}
site/assets/scss/_sidebar.scss
+11 -4
View File
@@ -11,6 +11,13 @@
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-nav {
@@ -35,16 +42,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-heading-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 {
site/assets/scss/_syntax.scss
+21 -1
View File
@@ -1,4 +1,5 @@
:root {
:root,
[data-bs-theme="light"] {
--base00: #fff;
--base01: #f5f5f5;
--base02: #c8c8fa;
@@ -17,6 +18,25 @@
--base0F: #333;
}
[data-bs-theme="dark"] {
--base00: #282c34;
--base01: #353b45;
--base02: #3e4451;
--base03: #545862;
--base04: #565c64;
--base05: #abb2bf;
--base06: #b6bdca;
--base07: #d19a66;
--base08: #e06c75;
--base09: #d19a66;
--base0A: #e5c07b;
--base0B: #98c379;
--base0C: #56b6c2;
--base0D: #61afef;
--base0E: #c678dd;
--base0F: #be5046;
}
.hl { background-color: var(--base02); }
.c { color: var(--base03); }
.err { color: var(--base08); }
site/assets/scss/_toc.scss
+7 -6
View File
@@ -52,15 +52,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);
}
@@ -75,9 +76,9 @@
@include media-breakpoint-down(md) {
nav {
padding: 1.25rem;
background-color: var(--bs-gray-100);
border: 1px solid $border-color;
@include border-radius(.25rem);
background-color: var(--bs-tertiary-bg);
border: 1px solid var(--bs-border-color);
@include border-radius(var(--bs-border-radius));
}
}
site/assets/scss/_variables.scss
+7 -2
View File
@@ -5,12 +5,12 @@ $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-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};
@@ -20,4 +20,9 @@ $bd-callout-variants: info, warning, danger !default;
--bd-teal-rgb: #{to-rgb($teal-500)};
--docsearch-primary-color: var(--bd-violet);
--docsearch-logo-color: var(--bd-violet);
--bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
}
[data-bs-theme="dark"] {
--bd-violet: #{mix($bd-violet, $black, 75%)};
}
site/content/docs/5.2/components/accordion.md
+1 -1
View File
@@ -66,7 +66,7 @@ Click the accordions below to expand/collapse the accordion content.
Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
{{< example class="bg-light" >}}
{{< example class="bg-body-secondary" >}}
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
site/content/docs/5.2/components/dropdowns.md
+6 -2
View File
@@ -998,9 +998,13 @@ As part of Bootstrap's evolving CSS variables approach, dropdowns now use local
{{< scss-docs name="dropdown-css-vars" file="scss/_dropdown.scss" >}}
Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
{{< callout info >}}
Dropdown items include at least one variable that is not set on `.dropdown`. This allows you to provide a new value while Bootstrap defaults to a fallback value.
{{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}}
- `--bs-dropdown-item-border-radius`
{{< /callout >}}
Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
### Sass variables
site/content/docs/5.2/components/modal.md
+1 -1
View File
@@ -38,7 +38,7 @@ Keep reading for demos and usage guidelines.
Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
<div class="bd-example bg-light">
<div class="bd-example bg-body-secondary">
<div class="modal position-static d-block" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
site/content/docs/5.2/components/navbar.md
+29 -29
View File
@@ -37,7 +37,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -75,7 +75,7 @@ Here's an example of all the sub-components included in a responsive light-theme
</nav>
{{< /example >}}
This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.
This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-body-tertiary`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.
### Brand
@@ -87,14 +87,14 @@ Add your text within an element with the `.navbar-brand` class.
{{< example >}}
<!-- As a link -->
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<!-- As a heading -->
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
@@ -106,7 +106,7 @@ Add your text within an element with the `.navbar-brand` class.
You can replace the text within the `.navbar-brand` with an `<img>`.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
@@ -120,7 +120,7 @@ You can replace the text within the `.navbar-brand` with an `<img>`.
You can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `<img>`.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
@@ -139,7 +139,7 @@ Add the `.active` class on `.nav-link` to indicate the current page.
Please note that you should also add the `aria-current` attribute on the active `.nav-link`.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -168,7 +168,7 @@ Please note that you should also add the `aria-current` attribute on the active
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
@@ -189,7 +189,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
@@ -227,7 +227,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele
Place various form controls and components within a navbar:
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
@@ -240,7 +240,7 @@ Place various form controls and components within a navbar:
Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand">Navbar</a>
<form class="d-flex" role="search">
@@ -254,7 +254,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<form>` element as the container and save some HTML.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<form class="container-fluid">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
@@ -267,7 +267,7 @@ Input groups work, too. If your navbar is an entire form, or mostly a form, you
Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
@@ -280,7 +280,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
@@ -292,7 +292,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
Mix and match with other components and utilities as needed.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
@@ -385,7 +385,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
</div>
</nav>
<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;">
<nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
@@ -435,7 +435,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
{{< example >}}
<div class="container">
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
@@ -446,7 +446,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
Use any of the responsive containers to change how wide the content in your navbar is presented.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
@@ -460,7 +460,7 @@ Use our [position utilities]({{< docsref "/utilities/position" >}}) to place nav
Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements.
{{< example >}}
<nav class="navbar bg-light">
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Default</a>
</div>
@@ -468,7 +468,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
{{< /example >}}
{{< example >}}
<nav class="navbar fixed-top bg-light">
<nav class="navbar fixed-top bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed top</a>
</div>
@@ -476,7 +476,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
{{< /example >}}
{{< example >}}
<nav class="navbar fixed-bottom bg-light">
<nav class="navbar fixed-bottom bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed bottom</a>
</div>
@@ -484,7 +484,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
{{< /example >}}
{{< example >}}
<nav class="navbar sticky-top bg-light">
<nav class="navbar sticky-top bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky top</a>
</div>
@@ -492,7 +492,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow
{{< /example >}}
{{< example >}}
<nav class="navbar sticky-bottom bg-light">
<nav class="navbar sticky-bottom bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky bottom</a>
</div>
@@ -508,7 +508,7 @@ Please note that this behavior comes with a potential drawback of `overflow`—w
Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing.
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
@@ -559,7 +559,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el
With no `.navbar-brand` shown at the smallest breakpoint:
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@@ -589,7 +589,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
With a brand name shown on the left and toggler on the right:
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -619,7 +619,7 @@ With a brand name shown on the left and toggler on the right:
With a toggler on the left and brand name on the right:
{{< example >}}
<nav class="navbar navbar-expand-lg bg-light">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@@ -675,7 +675,7 @@ Transform your expanding and collapsing navbar into an offcanvas drawer with the
In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely.
{{< example >}}
<nav class="navbar bg-light fixed-top">
<nav class="navbar bg-body-tertiary fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
@@ -721,7 +721,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`.
```html
<nav class="navbar navbar-expand-lg bg-light fixed-top">
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
<span class="navbar-toggler-icon"></span>
site/content/docs/5.2/components/offcanvas.md
+1 -1
View File
@@ -27,7 +27,7 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr
Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
{{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}}
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
site/content/docs/5.2/components/toasts.md
+9 -9
View File
@@ -27,7 +27,7 @@ To encourage extensible and predictable toasts, we recommend a header and body.
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
@@ -121,7 +121,7 @@ Toasts are slightly translucent to blend in with what's below them.
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast-container position-static">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
@@ -153,7 +153,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
Customize your toasts by removing sub-components, tweaking them with [utilities]({{< docsref "/utilities/api" >}}), or by adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
@@ -166,7 +166,7 @@ Customize your toasts by removing sub-components, tweaking them with [utilities]
Alternatively, you can also add additional controls and components to toasts.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
@@ -182,7 +182,7 @@ Alternatively, you can also add additional controls and components to toasts.
Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
{{< example class="bg-light" >}}
{{< example >}}
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
@@ -215,7 +215,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
</select>
</div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div aria-live="polite" aria-atomic="true" class="bg-body-secondary position-relative bd-example-toasts rounded-3">
<div class="toast-container p-3" id="toastPlacement">
<div class="toast">
<div class="toast-header">
@@ -233,7 +233,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
For systems that generate more notifications, consider using a wrapping element so they can easily stack.
{{< example class="bg-dark bd-example-toasts p-0" >}}
{{< example class="bd-example-toasts p-0" >}}
<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it: -->
<!-- - `.toast-container` for spacing between toasts -->
@@ -271,7 +271,7 @@ For systems that generate more notifications, consider using a wrapping element
You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
{{< example class="bg-dark bd-example-toasts d-flex" >}}
{{< example class="bd-example-toasts d-flex" >}}
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
@@ -308,7 +308,7 @@ As the content you're displaying changes, be sure to update the [`delay` timeout
When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
{{< example class="bg-light" >}}
{{< example >}}
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
site/content/docs/5.2/customize/color.md
+106 -3
View File
@@ -6,7 +6,110 @@ group: customize
toc: true
---
## Theme colors
## Color modes
{{< added-in "5.3.0" >}}
### Dark mode
**Bootstrap now supports color modes, starting with dark mode!** After upgrading to v5.3.0, you'll be able to implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-bs-theme` attribute.
For example, to change the toggle mode of a dropdown menu, add `data-bs-theme="light"` or `data-bs-theme="dark"` to the parent `.dropdown`. Now, no matter the global color mode, these dropdowns will display as intended.
{{< example class="d-flex justify-content-between" >}}
<div class="dropdown" data-bs-theme="light">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
Default dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="dropdown" data-bs-theme="dark">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
Dark dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
{{< /example >}}
### Custom color modes
While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your own `data-bs-theme` selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate `_variables-dark.scss` stylesheet to house Bootstrap's dark mode specific Sass variables, but that's not required for you.
For example, you can create a "blue theme" with the selector `data-bs-theme="blue"`. In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you're using Sass, you can also use Sass's functions within your CSS variable overrides.
{{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}}
<div class="bd-example text-body bg-body" data-bs-theme="blue">
<div class="h4">Example blue theme</div>
<p>Some paragraph text to show how the blue theme might look with written copy.</p>
<hr class="my-4">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonCustom" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonCustom">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
```html
<div data-bs-theme="blue">
...
</div>
```
## Colors
### New theme colors
{{< added-in "5.3.0" >}}
Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0 with the addition of new `secondary` and `tertiary` text and background colors. Our new colors are available through Sass and CSS variables (but not our color maps) with the express goal of making it easier to customize across multiple colors modes like light and dark.
Colors ending in `--rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`.
{{< callout warning>}}
**Heads up!** There's some potentially confusing things regarding new secondary and tertiary colors, and our secondary theme color. Expect this to be ironed out in v6.
{{< /callout >}}
{{< bs-table "table text-start table-swatches" >}}
| Description | Swatch | Variables |
| --- | --- | --- |
| **Body —** Default foreground (color) and background, including components. | <div class="p-3 mb-1 rounded-2" style="background-color: var(--bs-body-color);">&nbsp;</div> <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);">&nbsp;</div> | `--bs-body-color`<br>`--bs-body-color-rgb`<br>`--bs-body-bg`<br>`--bs-body-bg-rgb` |
| **Secondary —** For disabled states, dividers, and lighter text. | <div class="p-3 mb-1 rounded-2" style="background-color: var(--bs-secondary-color);">&nbsp;</div> <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-bg);">&nbsp;</div> | `--bs-secondary-color`<br>`--bs-secondary-color-rgb`<br>`--bs-secondary-bg`<br>`--bs-secondary-bg-rgb` |
| **Tertiary —** For hovers, accents, wells, and text. | <div class="p-3 mb-1 rounded-2" style="background-color: var(--bs-tertiary-color);">&nbsp;</div> <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-bg);">&nbsp;</div> | `--bs-tertiary-color`<br>`--bs-tertiary-color-rgb`<br>`--bs-tertiary-bg`<br>`--bs-tertiary-bg-rgb` |
| **Border —** For component borders, dividers, and rules. Blends with background colors thanks to `rgba()` values. | <div class="p-3 rounded-2" style="background-color: var(--bs-border-color);">Border color</div> | `--bs-border-color` |
| **Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states. | <div class="p-3 text-bg-primary rounded-2">Primary</div> | `--bs-primary`<br>`--bs-primary-rgb` |
| **Success —** Theme color used for positive or successful actions and information. | <div class="p-3 text-bg-success rounded-2">Success</div> | `--bs-success`<br>`--bs-success-rgb` |
| **Danger —** Theme color used for errors and dangerous actions. | <div class="p-3 text-bg-danger rounded-2">Danger</div> | `--bs-danger`<br>`--bs-danger-rgb` |
| **Warning —** Theme color used for warning messages. | <div class="p-3 text-bg-warning rounded-2">Warning</div> | `--bs-warning`<br>`--bs-warning-rgb` |
| **Info —** Theme color used for neutral and informative content. | <div class="p-3 text-bg-info rounded-2">Info</div> | `--bs-info`<br>`--bs-info-rgb` |
{{< /bs-table >}}
### Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap's `scss/_variables.scss` file.
@@ -14,7 +117,7 @@ We use a subset of all colors to create a smaller color palette for generating c
{{< theme-colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="col-md-4">
<div class="p-3 mb-3 bg-{{ .name }} {{ if .contrast_color }}text-{{ .contrast_color }}{{ else }}text-white{{ end }}">{{ .name | title }}</div>
<div class="p-3 mb-3 text-bg-{{ .name }} rounded-3">{{ .name | title }}</div>
</div>
{{ end -}}
{{< /theme-colors.inline >}}
@@ -26,7 +129,7 @@ All these colors are available as a Sass map, `$theme-colors`.
Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
## All colors
### All colors
All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
site/content/docs/5.2/customize/css-variables.md
+1 -1
View File
@@ -46,7 +46,7 @@ Customize the prefix via the `$prefix` Sass variable. By default, it's set to `b
CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables.
```css
```scss
body {
font: 1rem/1.5 var(--bs-font-sans-serif);
}
site/content/docs/5.2/utilities/position.md
+1 -1
View File
@@ -94,7 +94,7 @@ Here are some real life examples of these classes:
</button>
<button type="button" class="btn btn-dark position-relative">
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="inherit" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</button>
<button type="button" class="btn btn-primary position-relative">
site/layouts/_default/baseof.html
+1 -1
View File
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html lang="en" data-bs-theme="auto">
<head>
{{ partial "header" . }}
</head>
site/layouts/_default/docs.html
+2 -2
View File
@@ -26,8 +26,8 @@
</div>
{{ if (eq .Page.Params.toc true) }}
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
<button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
<div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-body-secondary">
<button class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
On this page
<svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
</button>
site/layouts/partials/docs-navbar.html
+43 -2
View File
@@ -72,11 +72,52 @@
<small class="d-lg-none ms-2">Open Collective</small>
</a>
</li>
<li class="nav-item py-1 col-12 col-lg-auto">
<li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none text-white-50">
<hr class="d-lg-none my-2 text-white-50">
</li>
{{ partial "docs-versions" . }}
<li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
<div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
<hr class="d-lg-none my-2 text-white-50">
</li>
<li class="nav-item dropdown">
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
data-bs-display="static">
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
<span class="d-lg-none ms-2">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto">
<svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
</button>
</li>
</ul>
</li>
</ul>
</div>
</div>
site/layouts/partials/docs-versions.html
+2 -1
View File
@@ -17,8 +17,9 @@
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">v5 releases</h6></li>
<li>
<a class="dropdown-item current" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
<a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
Latest ({{ .Site.Params.docs_version }}.x)
<svg class="bi"><use xlink:href="#check2"></use></svg>
</a>
</li>
<li>
site/layouts/partials/footer.html
+4 -4
View File
@@ -1,12 +1,12 @@
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<footer class="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary">
<div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary">
<div class="row">
<div class="col-lg-3 mb-3">
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
<a class="d-inline-flex align-items-center mb-2 text-body-secondary text-decoration-none" href="/" aria-label="Bootstrap">
{{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }}
<span class="fs-5">Bootstrap</span>
</a>
<ul class="list-unstyled small text-muted">
<ul class="list-unstyled small">
<li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</li>
<li class="mb-2">Code licensed <a href="{{ .Site.Params.repo }}/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
<li class="mb-2">Currently v{{ .Site.Params.current_version }}.</li>
site/layouts/partials/header.html
+3
View File
@@ -1,3 +1,6 @@
{{- $colorModeJS := resources.Get "js/color-modes/index.js" }}
<script src="{{ $colorModeJS.Permalink | relURL }}"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
site/layouts/partials/home/masthead-followup.html
+1 -1
View File
@@ -209,7 +209,7 @@ $prefix: "mo-";
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
</li>
</ul>
<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-white border rounded-5 shadow-sm" id="pillNav2" role="tablist">
<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-body border rounded-5 shadow-sm" id="pillNav2" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
</li>
site/layouts/partials/home/masthead.html
+1 -1
View File
@@ -6,7 +6,7 @@
<span class="text-muted">CSS variables, responsive offcanvas, new utilities, and more!</span>
</a>
<img src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-block mx-auto mb-3">
<h1 class="mb-3 fw-semibold">Build fast, responsive sites with&nbsp;Bootstrap</h1>
<h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
<p class="lead mb-4">
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
</p>
site/layouts/partials/icons.html
+10
View File
@@ -21,6 +21,9 @@
<symbol id="chevron-expand" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
</symbol>
<symbol id="circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</symbol>
<symbol id="clipboard" viewBox="0 0 16 16">
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
@@ -50,6 +53,10 @@
<symbol id="menu-button-wide-fill" viewBox="0 0 16 16">
<path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v2A1.5 1.5 0 0 0 1.5 5h13A1.5 1.5 0 0 0 16 3.5v-2A1.5 1.5 0 0 0 14.5 0h-13zm1 2h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1zm9.927.427A.25.25 0 0 1 12.604 2h.792a.25.25 0 0 1 .177.427l-.396.396a.25.25 0 0 1-.354 0l-.396-.396zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
</symbol>
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
</symbol>
<symbol id="palette2" viewBox="0 0 16 16">
<path d="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 .5.5v5.277l4.147-4.131a.5.5 0 0 1 .707 0l3.535 3.536a.5.5 0 0 1 0 .708L10.261 10H15.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5H3a2.99 2.99 0 0 1-2.121-.879A2.99 2.99 0 0 1 0 13.044m6-.21 7.328-7.3-2.829-2.828L6 7.188v5.647zM4.5 13a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zM15 15v-4H9.258l-4.015 4H15zM0 .5v12.495V.5z"/>
<path d="M0 12.995V13a3.07 3.07 0 0 0 0-.005z"/>
@@ -60,6 +67,9 @@
<symbol id="plus" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</symbol>
<symbol id="sun-fill" viewBox="0 0 16 16">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
</symbol>
<symbol id="three-dots" viewBox="0 0 16 16">
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
</symbol>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 13 KiB

site/layouts/shortcodes/example.html
+1 -1
View File
@@ -27,7 +27,7 @@
{{- if eq $show_markup true -}}
{{- if eq $show_preview true -}}
<div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
<small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small>
<div class="d-flex ms-auto">
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">