mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-15 11:59:39 +03:00
Add dark mode to docs
This commit is contained in:
Mark Otto
+4
-1
@@ -1,3 +1,5 @@
|
||||
// stylelint-disable custom-property-empty-line-before
|
||||
|
||||
// The dropdown wrapper (`<div>`)
|
||||
.dropup,
|
||||
.dropend,
|
||||
@@ -23,7 +25,7 @@
|
||||
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
|
||||
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
|
||||
@include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
|
||||
--#{$prefix}dropdown-color: #{$dropdown-color}; // stylelint-disable-line custom-property-empty-line-before
|
||||
--#{$prefix}dropdown-color: #{$dropdown-color};
|
||||
--#{$prefix}dropdown-bg: #{$dropdown-bg};
|
||||
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
|
||||
--#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
|
||||
@@ -171,6 +173,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
|
||||
|
||||
// Prevent dropdown overflow if there's no padding
|
||||
// See https://github.com/twbs/bootstrap/pull/27703
|
||||
|
||||
+64
-8
@@ -1,6 +1,7 @@
|
||||
// stylelint-disable custom-property-empty-line-before
|
||||
|
||||
:root {
|
||||
:root,
|
||||
[data-theme="light"] {
|
||||
// Note: Custom variable values only support SassScript inside `#{}`.
|
||||
|
||||
// Colors
|
||||
@@ -46,12 +47,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};
|
||||
@@ -66,11 +88,45 @@
|
||||
--#{$prefix}border-radius-pill: #{$border-radius-pill};
|
||||
// scss-docs-end root-border-var
|
||||
|
||||
--#{$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};
|
||||
// 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-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}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};
|
||||
}
|
||||
|
||||
@@ -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)),
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
+38
-18
@@ -398,9 +398,24 @@ $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-color-dark: $gray-500 !default;
|
||||
$body-bg-dark: $gray-900 !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;
|
||||
|
||||
$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;
|
||||
|
||||
// Links
|
||||
//
|
||||
@@ -415,6 +430,9 @@ $link-hover-decoration: null !default;
|
||||
$stretched-link-pseudo-element: after !default;
|
||||
$stretched-link-z-index: 1 !default;
|
||||
|
||||
$link-color-dark: $blue-300 !default;
|
||||
$link-hover-color-dark: $blue-200 !default;
|
||||
|
||||
// Paragraphs
|
||||
//
|
||||
// Style p element.
|
||||
@@ -485,9 +503,9 @@ $border-widths: (
|
||||
4: 4px,
|
||||
5: 5px
|
||||
) !default;
|
||||
|
||||
$border-style: solid !default;
|
||||
$border-color: rgba($black, .15) !default;
|
||||
$border-color-dark: rgba($white, .15) !default;
|
||||
// scss-docs-end border-variables
|
||||
|
||||
// scss-docs-start border-radius-variables
|
||||
@@ -591,6 +609,7 @@ $headings-font-style: null !default;
|
||||
$headings-font-weight: 500 !default;
|
||||
$headings-line-height: 1.2 !default;
|
||||
$headings-color: null !default;
|
||||
$headings-color-dark: #fff !default;
|
||||
// scss-docs-end headings-variables
|
||||
|
||||
// scss-docs-start display-headings
|
||||
@@ -821,12 +840,12 @@ $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-disabled-bg: $gray-200 !default;
|
||||
$input-bg: var(--#{$prefix}form-control-bg) !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;
|
||||
|
||||
@@ -870,7 +889,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;
|
||||
@@ -1130,9 +1149,9 @@ $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-border-color: rgba($black, .15) !default;
|
||||
$dropdown-color: var(--#{$prefix}body-color) !default;
|
||||
$dropdown-bg: var(--#{$prefix}body-bg) !default;
|
||||
$dropdown-border-color: var(--#{$prefix}border-color) !default;
|
||||
$dropdown-border-radius: $border-radius !default;
|
||||
$dropdown-border-width: $border-width !default;
|
||||
$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
|
||||
@@ -1140,9 +1159,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;
|
||||
@@ -1253,7 +1272,7 @@ $card-group-margin: $grid-gutter-width * .5 !default;
|
||||
// scss-docs-start accordion-variables
|
||||
$accordion-padding-y: 1rem !default;
|
||||
$accordion-padding-x: 1.25rem !default;
|
||||
$accordion-color: var(--#{$variable-prefix}body-color) !default;
|
||||
$accordion-color: var(--#{$prefix}body-color) !default;
|
||||
$accordion-bg: $body-bg !default;
|
||||
$accordion-border-width: $border-width !default;
|
||||
$accordion-border-color: var(--#{$prefix}border-color) !default;
|
||||
@@ -1266,7 +1285,7 @@ $accordion-body-padding-x: $accordion-padding-x !default;
|
||||
$accordion-button-padding-y: $accordion-padding-y !default;
|
||||
$accordion-button-padding-x: $accordion-padding-x !default;
|
||||
$accordion-button-color: $accordion-color !default;
|
||||
$accordion-button-bg: var(--#{$variable-prefix}accordion-bg) !default;
|
||||
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
|
||||
$accordion-transition: $btn-transition, border-radius .15s ease !default;
|
||||
$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
|
||||
$accordion-button-active-color: shade-color($primary, 10%) !default;
|
||||
@@ -1607,8 +1626,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;
|
||||
@@ -1618,6 +1637,7 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
|
||||
|
||||
$code-font-size: $small-font-size !default;
|
||||
$code-color: $pink !default;
|
||||
$code-color-dark: $pink-300 !default;
|
||||
|
||||
$kbd-padding-y: .1875rem !default;
|
||||
$kbd-padding-x: .375rem !default;
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
// Tooltip and popover demos
|
||||
document.querySelectorAll('.tooltip-demo')
|
||||
document.querySelectorAll('.tooltip-demo, .bd-navbar')
|
||||
.forEach(tooltip => {
|
||||
new bootstrap.Tooltip(tooltip, {
|
||||
selector: '[data-bs-toggle="tooltip"]'
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
// 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 root = document.documentElement
|
||||
const activeTheme = localStorage.getItem('theme')
|
||||
const activeThemeIcon = document.querySelector('.theme-icon-active use')
|
||||
|
||||
const checkSystemTheme = function () {
|
||||
// if OS dark mode is set, and there's no stored theme, set the theme to dark (but don't store it)
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches && !activeTheme) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark')
|
||||
} else {
|
||||
// otherwise, set the theme to the default (light)
|
||||
document.documentElement.removeAttribute('data-theme')
|
||||
}
|
||||
}
|
||||
|
||||
const setTheme = function (theme) {
|
||||
document.querySelectorAll('[data-theme-value]').forEach(element => {
|
||||
element.classList.remove('active')
|
||||
})
|
||||
|
||||
// const btnToActive = document.querySelector('[data-theme-value="' + theme + '"]')
|
||||
const btnToActive = document.querySelector(`[data-theme-value="${theme}"]`)
|
||||
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
|
||||
|
||||
btnToActive.classList.add('active')
|
||||
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
|
||||
}
|
||||
|
||||
document.querySelectorAll('[data-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', () => {
|
||||
const theme = toggle.getAttribute('data-theme-value')
|
||||
|
||||
setTheme(theme)
|
||||
|
||||
if (theme === 'auto') {
|
||||
root.removeAttribute('data-theme')
|
||||
localStorage.removeItem('theme')
|
||||
checkSystemTheme()
|
||||
} else {
|
||||
root.setAttribute('data-theme', theme)
|
||||
localStorage.setItem('theme', theme)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
if (activeTheme) {
|
||||
root.setAttribute('data-theme', activeTheme)
|
||||
setTheme(activeTheme)
|
||||
} else {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
checkSystemTheme()
|
||||
})
|
||||
checkSystemTheme()
|
||||
}
|
||||
})()
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -42,10 +42,3 @@
|
||||
margin-top: .75rem;
|
||||
margin-right: .75rem;
|
||||
}
|
||||
|
||||
.highlight-toolbar {
|
||||
.btn-clipboard {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
@@ -262,7 +262,7 @@
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: .25rem;
|
||||
background-color: #f5f5f5;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -284,13 +284,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();
|
||||
}
|
||||
}
|
||||
@@ -325,7 +325,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;
|
||||
@@ -348,7 +348,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;
|
||||
}
|
||||
}
|
||||
@@ -373,6 +373,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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -124,3 +129,28 @@
|
||||
border-left: $border-width solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// scss-docs-start custom-color-mode
|
||||
[data-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-link-active-bg: #{$blue-700};
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
|
||||
--bs-btn-border-color: #{rgba($white, .25)};
|
||||
--bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
|
||||
--bs-btn-hover-border-color: #{rgba($white, .25)};
|
||||
--bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
|
||||
--bs-btn-active-border-color: #{rgba($white, .5)};
|
||||
--bs-btn-focus-border-color: #{rgba($white, .5)};
|
||||
--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
|
||||
}
|
||||
}
|
||||
// scss-docs-end custom-color-mode
|
||||
|
||||
@@ -4,12 +4,12 @@
|
||||
|
||||
.bd-footer {
|
||||
a {
|
||||
color: $gray-700;
|
||||
color: var(--bs-body-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-color;
|
||||
color: var(--bs-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
@@ -37,8 +36,7 @@
|
||||
}
|
||||
|
||||
#carbonads { // stylelint-disable-line selector-max-id
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@@ -48,7 +46,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.masthead-followup {
|
||||
.bd-masthead-followup {
|
||||
.lead {
|
||||
@include font-size(1rem);
|
||||
}
|
||||
|
||||
@@ -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-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);
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
padding: 0;
|
||||
@@ -69,17 +75,67 @@
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--#{$variable-prefix}dropdown-min-width: 12rem;
|
||||
--#{$variable-prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
@include rfs(.875rem, --#{$variable-prefix}dropdown-font-size);
|
||||
--bs-dropdown-min-width: 12rem;
|
||||
--bs-dropdown-padding: .25rem;
|
||||
--bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
--bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
|
||||
@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);
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
:root {
|
||||
:root,
|
||||
[data-theme="light"] {
|
||||
--base00: #fff;
|
||||
--base01: #f5f5f5;
|
||||
--base02: #c8c8fa;
|
||||
@@ -17,6 +18,25 @@
|
||||
--base0F: #333;
|
||||
}
|
||||
|
||||
[data-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); }
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
border: 1px solid $border-color;
|
||||
border: 1px solid var(--bs-border-color);
|
||||
@include border-radius(.4rem);
|
||||
|
||||
&:hover,
|
||||
|
||||
@@ -5,7 +5,6 @@ $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>");
|
||||
$search-clear-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='rgba(255,255,255,.75)' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/></svg>");
|
||||
|
||||
$bd-gutter-x: 3rem;
|
||||
@@ -19,4 +18,11 @@ $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)};
|
||||
--bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bd-violet: #{mix($bd-violet, $black, 75%)};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -6,6 +6,105 @@ group: customize
|
||||
toc: true
|
||||
---
|
||||
|
||||
## Dark mode
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.3.0</small>
|
||||
|
||||
**Bootstrap now supports 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 an easy `data-theme` attribute.
|
||||
|
||||
For example, to change the toggle mode of a dropdown menu, add `data-theme="light"` or `data-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-theme="light">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown button
|
||||
</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-theme="dark">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown button
|
||||
</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 can easily be added. Create your own `data-theme` selector with a custom value as the name of your color mode, then modify the CSS variables as needed.
|
||||
|
||||
For example, you can create a blue theme with the selector `data-theme="blue"`.
|
||||
|
||||
{{< scss-docs name="custom-color-mode" file="site/assets/scss/_content.scss" >}}
|
||||
|
||||
<div class="bd-example text-body bg-body" data-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-theme="blue">
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
## New theme colors
|
||||
|
||||
<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
|
||||
|
||||
Bootstrap's color palette has continued to expand and become more nuanced in v5.2.0 with the addition of new `secondary` and `tertiary` 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.
|
||||
{{< /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);"> </div> <div class="p-3 rounded-2 border" style="background-color: var(--bs-body-bg);"> </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);"> </div> <div class="p-3 rounded-2" style="background-color: var(--bs-secondary-bg);"> </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);"> </div> <div class="p-3 rounded-2" style="background-color: var(--bs-tertiary-bg);"> </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-body rounded-2" style="background-color: var(--bs-primary);">Primary</div> | `--bs-primary`<br>`--bs-primary-rgb` |
|
||||
| **Success —** Theme color used for positive or successful actions and information. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-success);">Success</div> | `--bs-success`<br>`--bs-success-rgb` |
|
||||
| **Danger —** Theme color used for errors and dangerous actions. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-danger);">Danger</div> | `--bs-danger`<br>`--bs-danger-rgb` |
|
||||
| **Warning —** Theme color used for warning messages. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-warning);">Warning</div> | `--bs-warning`<br>`--bs-warning-rgb` |
|
||||
| **Info —** Theme color used for neutral and informative content. | <div class="p-3 text-body rounded-2" style="background-color: var(--bs-info);">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.
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
{{ partial "header" . }}
|
||||
</head>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{{ define "main" }}
|
||||
<div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<div class="container bd-gutter mt-3 my-md-4 bd-layout">
|
||||
<aside class="bd-sidebar">
|
||||
<div class="offcanvas-lg offcanvas-start" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
|
||||
<div class="offcanvas-header border-bottom">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
|
||||
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
<nav class="container bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
|
||||
{{- if eq .Layout "docs" }}
|
||||
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-expanded="false" aria-label="Toggle docs navigation">
|
||||
{{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "24" "height" "24") }}
|
||||
@@ -78,11 +78,47 @@
|
||||
<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">
|
||||
<a href="#" class="nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" data-bs-toggle="dropdown" aria-expanded="false" 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>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end bd-theme-toggles" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-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-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-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>
|
||||
|
||||
@@ -8,7 +8,12 @@
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
|
||||
<li><h6 class="dropdown-header">v5 releases</h6></li>
|
||||
<li><a class="dropdown-item current" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">Latest ({{ .Site.Params.docs_version }}.x)</a></li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">
|
||||
Latest ({{ .Site.Params.docs_version }}.x)
|
||||
<svg class="bi"><use xlink:href="#check2"></use></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/5.1/{{ $group_slug }}/{{ $page_slug }}/">v5.1.3</a>
|
||||
</li>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="container-xxl bd-gutter masthead-followup">
|
||||
<div class="container bd-gutter masthead-followup">
|
||||
<div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
|
||||
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-violet-rgb);">
|
||||
<svg class="bi fs-1"><use xlink:href="#code"></use></svg>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="bd-masthead mb-3" id="content">
|
||||
<div class="container-xxl bd-gutter">
|
||||
<div class="container bd-gutter">
|
||||
<div class="col-md-8 mx-auto text-center">
|
||||
<a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/">
|
||||
<strong class="d-sm-inline-block p-2 me-2 mb-2 mb-lg-0 rounded-3 masthead-notice">New in v5.1</strong>
|
||||
<span class="text-muted">CSS Grid, offcanvas navbars, improved 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 Bootstrap</h1>
|
||||
<h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with 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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 13 KiB |
@@ -24,7 +24,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" title="Try it on StackBlitz">
|
||||
|
||||
Reference in New Issue
Block a user