mirror of
https://github.com/twbs/bootstrap.git
synced 2024-09-21 10:37:12 +00:00
Merge branch 'main' into patch-3
This commit is contained in:
Patrick H. Lauke
GitHub
commit
efb074e345
2
.github/workflows/js.yml
vendored
2
.github/workflows/js.yml
vendored
@ -45,7 +45,7 @@ jobs:
|
||||
run: npm run js-test
|
||||
|
||||
- name: Run Coveralls
|
||||
uses: coverallsapp/github-action@1.1.3
|
||||
uses: coverallsapp/github-action@v1.2.2
|
||||
with:
|
||||
github-token: "${{ secrets.GITHUB_TOKEN }}"
|
||||
path-to-lcov: "./js/coverage/lcov.info"
|
||||
|
||||
@ -277,25 +277,25 @@ describe('Collapse', () => {
|
||||
return new Promise(resolve => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div id="parentGroup" class="accordion">',
|
||||
' <div id="parentHeader" class="accordion-header">',
|
||||
' <div class="accordion-header">',
|
||||
' <button data-bs-target="#parentContent" data-bs-toggle="collapse" class="accordion-toggle">Parent</button>',
|
||||
' </div>',
|
||||
' <div id="parentContent" class="accordion-collapse collapse" aria-labelledby="parentHeader" data-bs-parent="#parentGroup">',
|
||||
' <div id="parentContent" class="accordion-collapse collapse" data-bs-parent="#parentGroup">',
|
||||
' <div class="accordion-body">',
|
||||
' <div id="childGroup" class="accordion">',
|
||||
' <div class="accordion-item">',
|
||||
' <div id="childHeader1" class="accordion-header">',
|
||||
' <div class="accordion-header">',
|
||||
' <button data-bs-target="#childContent1" data-bs-toggle="collapse" class="accordion-toggle">Child 1</button>',
|
||||
' </div>',
|
||||
' <div id="childContent1" class="accordion-collapse collapse" aria-labelledby="childHeader1" data-bs-parent="#childGroup">',
|
||||
' <div id="childContent1" class="accordion-collapse collapse" data-bs-parent="#childGroup">',
|
||||
' <div>content</div>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div class="accordion-item">',
|
||||
' <div id="childHeader2" class="accordion-header">',
|
||||
' <div class="accordion-header">',
|
||||
' <button data-bs-target="#childContent2" data-bs-toggle="collapse" class="accordion-toggle">Child 2</button>',
|
||||
' </div>',
|
||||
' <div id="childContent2" class="accordion-collapse collapse" aria-labelledby="childHeader2" data-bs-parent="#childGroup">',
|
||||
' <div id="childContent2" class="accordion-collapse collapse" data-bs-parent="#childGroup">',
|
||||
' <div>content</div>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
@ -338,12 +338,12 @@ describe('Collapse', () => {
|
||||
fixtureEl.innerHTML = [
|
||||
'<div class="accordion" id="accordionExample">',
|
||||
' <div class="accordion-item">',
|
||||
' <h2 class="accordion-header" id="headingOne">',
|
||||
' <h2 class="accordion-header">',
|
||||
' <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">',
|
||||
' Accordion Item #1',
|
||||
' </button>',
|
||||
' </h2>',
|
||||
' <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">',
|
||||
' <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">',
|
||||
' <div class="accordion-body">',
|
||||
' <nav>',
|
||||
' <div class="nav nav-tabs" id="nav-tab" role="tablist">',
|
||||
@ -640,11 +640,11 @@ describe('Collapse', () => {
|
||||
'<div id="accordion">',
|
||||
' <div class="item">',
|
||||
' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
|
||||
' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-bs-parent="#accordion"></div>',
|
||||
' <div id="collapseOne" class="collapse" role="tabpanel" data-bs-parent="#accordion"></div>',
|
||||
' </div>',
|
||||
' <div class="item">',
|
||||
' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
|
||||
' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-bs-parent="#accordion"></div>',
|
||||
' <div id="collapseTwo" class="collapse show" role="tabpanel" data-bs-parent="#accordion"></div>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
@ -699,13 +699,13 @@ describe('Collapse', () => {
|
||||
' <div class="col-lg-6">',
|
||||
' <div class="item">',
|
||||
' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
|
||||
' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-bs-parent="#accordion"></div>',
|
||||
' <div id="collapseOne" class="collapse" role="tabpanel" data-bs-parent="#accordion"></div>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div class="col-lg-6">',
|
||||
' <div class="item">',
|
||||
' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
|
||||
' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-bs-parent="#accordion"></div>',
|
||||
' <div id="collapseTwo" class="collapse show" role="tabpanel" data-bs-parent="#accordion"></div>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
@ -829,18 +829,18 @@ describe('Collapse', () => {
|
||||
'<div id="accordion">',
|
||||
' <div class="item">',
|
||||
' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
|
||||
' <div id="collapseOne" data-bs-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">',
|
||||
' <div id="collapseOne" data-bs-parent="#accordion" class="collapse" role="tabpanel">',
|
||||
' <div id="nestedAccordion">',
|
||||
' <div class="item">',
|
||||
' <a id="nestedLinkTrigger" data-bs-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>',
|
||||
' <div id="nestedCollapseOne" data-bs-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>',
|
||||
' <div id="nestedCollapseOne" data-bs-parent="#nestedAccordion" class="collapse" role="tabpanel"></div>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
' <div class="item">',
|
||||
' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
|
||||
' <div id="collapseTwo" data-bs-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>',
|
||||
' <div id="collapseTwo" data-bs-parent="#accordion" class="collapse show" role="tabpanel"></div>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
28
package-lock.json
generated
28
package-lock.json
generated
@ -58,10 +58,10 @@
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.21",
|
||||
"postcss-cli": "^10.1.0",
|
||||
"rollup": "^3.15.0",
|
||||
"rollup": "^3.17.2",
|
||||
"rollup-plugin-istanbul": "^4.0.0",
|
||||
"rtlcss": "^4.0.0",
|
||||
"sass": "^1.58.1",
|
||||
"sass": "^1.58.3",
|
||||
"sass-true": "^7.0.0",
|
||||
"shelljs": "^0.8.5",
|
||||
"stylelint": "^14.16.1",
|
||||
@ -9192,9 +9192,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "3.15.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.15.0.tgz",
|
||||
"integrity": "sha512-F9hrCAhnp5/zx/7HYmftvsNBkMfLfk/dXUh73hPSM2E3CRgap65orDNJbLetoiUFwSAk6iHPLvBrZ5iHYvzqsg==",
|
||||
"version": "3.17.2",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.17.2.tgz",
|
||||
"integrity": "sha512-qMNZdlQPCkWodrAZ3qnJtvCAl4vpQ8q77uEujVCCbC/6CLB7Lcmvjq7HyiOSnf4fxTT9XgsE36oLHJBH49xjqA==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
@ -9316,9 +9316,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.58.1",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.58.1.tgz",
|
||||
"integrity": "sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==",
|
||||
"version": "1.58.3",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
|
||||
"integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
@ -17611,9 +17611,9 @@
|
||||
}
|
||||
},
|
||||
"rollup": {
|
||||
"version": "3.15.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.15.0.tgz",
|
||||
"integrity": "sha512-F9hrCAhnp5/zx/7HYmftvsNBkMfLfk/dXUh73hPSM2E3CRgap65orDNJbLetoiUFwSAk6iHPLvBrZ5iHYvzqsg==",
|
||||
"version": "3.17.2",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.17.2.tgz",
|
||||
"integrity": "sha512-qMNZdlQPCkWodrAZ3qnJtvCAl4vpQ8q77uEujVCCbC/6CLB7Lcmvjq7HyiOSnf4fxTT9XgsE36oLHJBH49xjqA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fsevents": "~2.3.2"
|
||||
@ -17683,9 +17683,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"sass": {
|
||||
"version": "1.58.1",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.58.1.tgz",
|
||||
"integrity": "sha512-bnINi6nPXbP1XNRaranMFEBZWUfdW/AF16Ql5+ypRxfTvCRTTKrLsMIakyDcayUt2t/RZotmL4kgJwNH5xO+bg==",
|
||||
"version": "1.58.3",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
|
||||
"integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
|
||||
@ -143,10 +143,10 @@
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.21",
|
||||
"postcss-cli": "^10.1.0",
|
||||
"rollup": "^3.15.0",
|
||||
"rollup": "^3.17.2",
|
||||
"rollup-plugin-istanbul": "^4.0.0",
|
||||
"rtlcss": "^4.0.0",
|
||||
"sass": "^1.58.1",
|
||||
"sass": "^1.58.3",
|
||||
"sass-true": "^7.0.0",
|
||||
"shelljs": "^0.8.5",
|
||||
"stylelint": "^14.16.1",
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
|
||||
--#{$prefix}btn-font-weight: #{$btn-font-weight};
|
||||
--#{$prefix}btn-line-height: #{$btn-line-height};
|
||||
--#{$prefix}btn-color: #{$body-color};
|
||||
--#{$prefix}btn-color: #{$btn-color};
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-width: #{$btn-border-width};
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
@ -170,7 +170,7 @@
|
||||
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
|
||||
--#{$prefix}btn-disabled-border-color: transparent;
|
||||
--#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
|
||||
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
|
||||
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))};
|
||||
|
||||
text-decoration: $link-decoration;
|
||||
@if $enable-gradients {
|
||||
|
||||
@ -100,9 +100,11 @@
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
.show > .nav-link,
|
||||
.nav-link.active {
|
||||
color: var(--#{$prefix}navbar-active-color);
|
||||
.nav-link {
|
||||
&.active,
|
||||
&.show {
|
||||
color: var(--#{$prefix}navbar-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
|
||||
@ -120,8 +120,6 @@
|
||||
--#{$prefix}focus-ring-width: #{$focus-ring-width};
|
||||
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
|
||||
--#{$prefix}focus-ring-color: #{$focus-ring-color};
|
||||
// By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
|
||||
--#{$prefix}focus-ring-box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
|
||||
// scss-docs-end root-focus-variables
|
||||
|
||||
// scss-docs-start root-form-validation-variables
|
||||
|
||||
@ -178,8 +178,6 @@ $utilities: map-merge(
|
||||
),
|
||||
"border-width": (
|
||||
property: border-width,
|
||||
// css-var: true,
|
||||
// css-variable-name: border-width,
|
||||
class: border,
|
||||
values: $border-widths
|
||||
),
|
||||
@ -634,7 +632,6 @@ $utilities: map-merge(
|
||||
)
|
||||
),
|
||||
"link-underline": (
|
||||
// css-var: true,
|
||||
property: text-decoration-color,
|
||||
class: link-underline,
|
||||
local-vars: (
|
||||
@ -652,6 +649,7 @@ $utilities: map-merge(
|
||||
class: link-underline-opacity,
|
||||
state: hover,
|
||||
values: (
|
||||
0: 0,
|
||||
10: .1,
|
||||
25: .25,
|
||||
50: .5,
|
||||
|
||||
@ -459,6 +459,15 @@ $link-hover-decoration: null !default;
|
||||
$stretched-link-pseudo-element: after !default;
|
||||
$stretched-link-z-index: 1 !default;
|
||||
|
||||
// Icon links
|
||||
// scss-docs-start icon-link-variables
|
||||
$icon-link-gap: .375rem !default;
|
||||
$icon-link-underline-offset: .25em !default;
|
||||
$icon-link-icon-size: 1em !default;
|
||||
$icon-link-icon-transition: .2s ease-in-out transform !default;
|
||||
$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
|
||||
// scss-docs-end icon-link-variables
|
||||
|
||||
// Paragraphs
|
||||
//
|
||||
// Style p element.
|
||||
@ -801,6 +810,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default;
|
||||
// For each of Bootstrap's buttons, define text, background, and border color.
|
||||
|
||||
// scss-docs-start btn-variables
|
||||
$btn-color: var(--#{$prefix}body-color) !default;
|
||||
$btn-padding-y: $input-btn-padding-y !default;
|
||||
$btn-padding-x: $input-btn-padding-x !default;
|
||||
$btn-font-family: $input-btn-font-family !default;
|
||||
@ -1148,7 +1158,6 @@ $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: var(--#{$prefix}secondary-color) !default;
|
||||
$nav-link-disabled-color: $gray-600 !default;
|
||||
$nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
|
||||
|
||||
$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
|
||||
@ -1365,7 +1374,7 @@ $accordion-button-color: var(--#{$prefix}body-color) !default;
|
||||
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
|
||||
$accordion-transition: $btn-transition, border-radius .15s ease !default;
|
||||
$accordion-button-active-bg: var(--#{$prefix}primary-bg-subtle) !default;
|
||||
$accordion-button-active-color: var(--#{$prefix}primary-text) !default;
|
||||
$accordion-button-active-color: var(--#{$prefix}primary-text-emphasis) !default;
|
||||
|
||||
$accordion-button-focus-border-color: $input-focus-border-color !default;
|
||||
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
|
||||
|
||||
@ -1,16 +1,17 @@
|
||||
.icon-link {
|
||||
display: inline-flex;
|
||||
gap: .375rem;
|
||||
gap: $icon-link-gap;
|
||||
align-items: center;
|
||||
text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
|
||||
text-underline-offset: .25em;
|
||||
text-underline-offset: $icon-link-underline-offset;
|
||||
backface-visibility: hidden;
|
||||
|
||||
> .bi {
|
||||
flex-shrink: 0;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
@include transition(.2s ease-in-out transform);
|
||||
width: $icon-link-icon-size;
|
||||
height: $icon-link-icon-size;
|
||||
fill: currentcolor;
|
||||
@include transition($icon-link-icon-transition);
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +19,7 @@
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
> .bi {
|
||||
transform: var(--#{$prefix}icon-link-transform, translate3d(.25em, 0, 0));
|
||||
transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
@include output() {
|
||||
@include color-mode(dark) {
|
||||
.element {
|
||||
color: var(--bs-primary-text);
|
||||
color: var(--bs-primary-text-emphasis);
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
}
|
||||
@ -22,7 +22,7 @@
|
||||
}
|
||||
@include expect() {
|
||||
[data-bs-theme=dark] .element {
|
||||
color: var(--bs-primary-text);
|
||||
color: var(--bs-primary-text-emphasis);
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
[data-bs-theme=dark] {
|
||||
@ -41,7 +41,7 @@
|
||||
@include output() {
|
||||
@include color-mode(dark) {
|
||||
.element {
|
||||
color: var(--bs-primary-text);
|
||||
color: var(--bs-primary-text-emphasis);
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
}
|
||||
@ -52,7 +52,7 @@
|
||||
@include expect() {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.element {
|
||||
color: var(--bs-primary-text);
|
||||
color: var(--bs-primary-text-emphasis);
|
||||
background-color: var(--bs-primary-bg-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,6 +39,6 @@
|
||||
.btn-clipboard {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: .75rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-right: .75rem;
|
||||
}
|
||||
|
||||
@ -359,10 +359,11 @@
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 0;
|
||||
margin-top: .625rem;
|
||||
padding: .25rem 0 .875rem;
|
||||
margin-top: .8125rem;
|
||||
margin-right: 1.875rem;
|
||||
margin-bottom: .625rem;
|
||||
margin-bottom: 0;
|
||||
overflow: overlay;
|
||||
white-space: pre;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
@ -404,8 +405,3 @@
|
||||
@include border-top-radius(calc(var(--bs-border-radius) + 1px));
|
||||
}
|
||||
}
|
||||
|
||||
.focused {
|
||||
outline: 0;
|
||||
box-shadow: var(--#{$variable-prefix}focus-ring-offset), var(--#{$variable-prefix}focus-ring-x, 0) var(--#{$variable-prefix}focus-ring-y, 0) var(--#{$variable-prefix}focus-ring-blur) var(--#{$variable-prefix}focus-ring-width) var(--#{$variable-prefix}focus-ring-color);
|
||||
}
|
||||
|
||||
@ -36,10 +36,18 @@
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-right: 4rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 0;
|
||||
margin-top: .625rem;
|
||||
margin-right: 1.875rem;
|
||||
margin-bottom: .625rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.btn-clipboard {
|
||||
position: absolute;
|
||||
top: -.125rem;
|
||||
top: -.625rem;
|
||||
right: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@ -214,7 +214,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
|
||||
| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
|
||||
| `selector` | string, false | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
|
||||
| `template` | string | `'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'` | Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`. |
|
||||
| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
|
||||
| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the tooltip is attached to. |
|
||||
| `trigger` | string | `'hover focus'` | How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')` and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
|
||||
{{< /bs-table >}}
|
||||
|
||||
|
||||
@ -62,73 +62,6 @@ For example, to change the color mode of a dropdown menu, add `data-bs-theme="li
|
||||
|
||||
- We use a custom `_variables-dark.scss` to power those shared global CSS variable overrides for dark mode. This file isn't required for your own custom color modes, but it's required for our dark mode for two reasons. First, it's better to have a single place to reset global colors. Second, some Sass variables had to be overridden for background images embedded in our CSS for accordions, form components, and more.
|
||||
|
||||
## Nesting color modes
|
||||
|
||||
Use `data-bs-theme` on a nested element to change the color mode for a group of elements or components. In the example below, we have an outer dark mode with a nested light mode. You'll notice components naturally adapt their appearance, but you may need to add some utilities along the way to utilize the styles specific to each color mode.
|
||||
|
||||
For example, despite using `data-bs-theme="dark"` on a random `<div>`, the `<div>` has no `background-color` as it's set on the `<body>`. As such, if you want the `color` and `background-color` to adapt, you'll need to add `.text-body` and `.bg-body`.
|
||||
|
||||
{{< example class="p-0" >}}
|
||||
<div data-bs-theme="dark" class="p-3 text-body bg-body">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Color modes</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Dark</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<p>This should be shown in a <strong>dark</strong> theme at all times.</p>
|
||||
|
||||
<div class="progress mb-4" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar" style="width: 25%"></div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown mb-4">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dark dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark2">
|
||||
<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 data-bs-theme="light" class="p-3 text-body bg-body rounded">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Color modes</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Dark</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Light</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<p>This should be shown in a <strong>light</strong> theme at all times.</p>
|
||||
|
||||
<div class="progress mb-4" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar" style="width: 25%"></div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight2" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Light dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight2">
|
||||
<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>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Usage
|
||||
|
||||
### Enable dark mode
|
||||
@ -159,7 +92,7 @@ Our new dark mode option is available to use for all users of Bootstrap, but it'
|
||||
|
||||
We use a custom Sass mixin, `color-mode()`, to help you control _how_ color modes are applied. By default, we use a `data` attribute approach, allowing you to create more user-friendly experiences where your visitors can choose to have an automatic dark mode or control their preference (like in our own docs here). This is also an easy and scalable way to add different themes and more custom color modes beyond light and dark.
|
||||
|
||||
In case you want to use media queries and only make color modes automatic, you can change the mixin's default type via Sass variable. Consider the following snippet and it's compiled CSS output.
|
||||
In case you want to use media queries and only make color modes automatic, you can change the mixin's default type via Sass variable. Consider the following snippet and its compiled CSS output.
|
||||
|
||||
```scss
|
||||
$color-mode-type: data;
|
||||
|
||||
@ -23,7 +23,7 @@ aliases: "/examples/"
|
||||
{{ if (eq $i 0) }}<div class="row">{{ end }}
|
||||
{{ if $entry.external }}
|
||||
<div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
|
||||
<svg class="bi fs-5 flex-shrink-0"><use xlink:href="#box-seam"></use></svg>
|
||||
<svg class="bi fs-5 flex-shrink-0 mt-1"><use xlink:href="#box-seam"></use></svg>
|
||||
<div>
|
||||
<h3 class="h5 mb-1">
|
||||
<a class="d-block link-offset-1" href="{{ $.Site.Params.github_org }}{{ $example.url }}/" target="_blank">
|
||||
|
||||
@ -4,16 +4,16 @@ title: مثال الألبوم
|
||||
direction: rtl
|
||||
---
|
||||
|
||||
<header>
|
||||
<div class="collapse bg-dark" id="navbarHeader">
|
||||
<header data-bs-theme="dark">
|
||||
<div class="collapse text-bg-dark" id="navbarHeader">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-md-7 py-4">
|
||||
<h4 class="text-white">حول</h4>
|
||||
<h4>حول</h4>
|
||||
<p class="text-body-secondary">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
|
||||
</div>
|
||||
<div class="col-sm-4 offset-md-1 py-4">
|
||||
<h4 class="text-white">تواصل معي</h4>
|
||||
<h4>تواصل معي</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-white">تابعني على تويتر</a></li>
|
||||
<li><a href="#" class="text-white">شاركني الإعجاب في فيسبوك</a></li>
|
||||
|
||||
@ -3,16 +3,16 @@ layout: examples
|
||||
title: Album example
|
||||
---
|
||||
|
||||
<header>
|
||||
<div class="collapse bg-dark" id="navbarHeader">
|
||||
<header data-bs-theme="dark">
|
||||
<div class="collapse text-bg-dark" id="navbarHeader">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-md-7 py-4">
|
||||
<h4 class="text-white">About</h4>
|
||||
<h4>About</h4>
|
||||
<p class="text-body-secondary">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
|
||||
</div>
|
||||
<div class="col-sm-4 offset-md-1 py-4">
|
||||
<h4 class="text-white">Contact</h4>
|
||||
<h4>Contact</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-white">Follow on Twitter</a></li>
|
||||
<li><a href="#" class="text-white">Like on Facebook</a></li>
|
||||
|
||||
@ -1,13 +1,3 @@
|
||||
/*
|
||||
.text-warning {
|
||||
color: #997404 !important;
|
||||
}
|
||||
|
||||
.text-info {
|
||||
color: #087990 !important;
|
||||
}
|
||||
*/
|
||||
|
||||
.badge > a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@ -7,22 +7,9 @@ body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="chat-fill" viewBox="0 0 16 16">
|
||||
<path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z"/>
|
||||
</symbol>
|
||||
<symbol id="house-door-fill" viewBox="0 0 16 16">
|
||||
<path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"/>
|
||||
</symbol>
|
||||
<symbol id="x-circle-fill" viewBox="0 0 16 16">
|
||||
<path 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"/>
|
||||
</symbol>
|
||||
<symbol id="x-lg" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"/>
|
||||
<path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="container my-5">
|
||||
|
||||
@ -8,12 +8,6 @@ body_class: ""
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="chat-fill" viewBox="0 0 16 16">
|
||||
<path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9.06 9.06 0 0 0 8 15z"/>
|
||||
</symbol>
|
||||
<symbol id="x-circle-fill" viewBox="0 0 16 16">
|
||||
<path 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"/>
|
||||
</symbol>
|
||||
<symbol id="x-lg" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"/>
|
||||
<path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"/>
|
||||
|
||||
@ -6,7 +6,7 @@ extra_css:
|
||||
- "../carousel/carousel.rtl.css"
|
||||
---
|
||||
|
||||
<header>
|
||||
<header data-bs-theme="dark">
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">شرائح العرض</a>
|
||||
@ -44,7 +44,7 @@ extra_css:
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
|
||||
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-start">
|
||||
<h1>عنوان المثال.</h1>
|
||||
@ -54,7 +54,7 @@ extra_css:
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
|
||||
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<h1>عنوان مثال آخر.</h1>
|
||||
@ -64,7 +64,7 @@ extra_css:
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
|
||||
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-end">
|
||||
<h1>واحد أكثر لقياس جيد.</h1>
|
||||
@ -94,19 +94,19 @@ extra_css:
|
||||
<!-- Three columns of text below the carousel -->
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
|
||||
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
|
||||
<h2 class="fw-normal">عنوان</h2>
|
||||
<p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p>
|
||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
|
||||
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
|
||||
<h2 class="fw-normal">عنوان آخر</h2>
|
||||
<p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p>
|
||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
|
||||
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
|
||||
<h2 class="fw-normal">عنوان ثالث لتأكيد المعلومة</h2>
|
||||
<p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
|
||||
<p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
|
||||
@ -124,7 +124,7 @@ extra_css:
|
||||
<p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
||||
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -136,7 +136,7 @@ extra_css:
|
||||
<p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
|
||||
</div>
|
||||
<div class="col-md-5 order-md-1">
|
||||
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
||||
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -148,7 +148,7 @@ extra_css:
|
||||
<p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
||||
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
body {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
color: #5a5a5a;
|
||||
color: rgb(var(--bs-tertiary-color-rgb));
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
body {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
color: #5a5a5a;
|
||||
color: rgb(var(--bs-tertiary-color-rgb));
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ extra_css:
|
||||
- "carousel.css"
|
||||
---
|
||||
|
||||
<header>
|
||||
<header data-bs-theme="dark">
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Carousel</a>
|
||||
@ -43,7 +43,7 @@ extra_css:
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
|
||||
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-start">
|
||||
<h1>Example headline.</h1>
|
||||
@ -53,7 +53,7 @@ extra_css:
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
|
||||
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<h1>Another example headline.</h1>
|
||||
@ -63,7 +63,7 @@ extra_css:
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
|
||||
{{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}}
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-end">
|
||||
<h1>One more for good measure.</h1>
|
||||
@ -93,19 +93,19 @@ extra_css:
|
||||
<!-- Three columns of text below the carousel -->
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
|
||||
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
|
||||
<h2 class="fw-normal">Heading</h2>
|
||||
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
|
||||
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
|
||||
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
|
||||
<h2 class="fw-normal">Heading</h2>
|
||||
<p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
|
||||
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
{{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
|
||||
{{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}}
|
||||
<h2 class="fw-normal">Heading</h2>
|
||||
<p>And lastly this, the third column of representative placeholder content.</p>
|
||||
<p><a class="btn btn-secondary" href="#">View details »</a></p>
|
||||
@ -123,7 +123,7 @@ extra_css:
|
||||
<p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
||||
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -135,7 +135,7 @@ extra_css:
|
||||
<p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
|
||||
</div>
|
||||
<div class="col-md-5 order-md-1">
|
||||
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
||||
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -147,7 +147,7 @@ extra_css:
|
||||
<p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
{{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
||||
{{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -38,15 +38,13 @@
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: false
|
||||
}
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
boxPadding: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -7,8 +7,8 @@ extra_css:
|
||||
extra_js:
|
||||
- src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
|
||||
integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
|
||||
- src: "https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"
|
||||
integrity: "sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha"
|
||||
- src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"
|
||||
integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG"
|
||||
- src: "dashboard.js"
|
||||
---
|
||||
|
||||
|
||||
@ -38,15 +38,13 @@
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: false
|
||||
}
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
boxPadding: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -6,8 +6,8 @@ extra_css:
|
||||
extra_js:
|
||||
- src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
|
||||
integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
|
||||
- src: "https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"
|
||||
integrity: "sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha"
|
||||
- src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"
|
||||
integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG"
|
||||
- src: "dashboard.js"
|
||||
---
|
||||
|
||||
|
||||
@ -25,9 +25,6 @@ body_class: ""
|
||||
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
|
||||
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
|
||||
</symbol>
|
||||
<symbol id="grid" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="collection" viewBox="0 0 16 16">
|
||||
<path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
|
||||
</symbol>
|
||||
@ -35,9 +32,6 @@ body_class: ""
|
||||
<path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
|
||||
<path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
|
||||
</symbol>
|
||||
<symbol id="chat-quote-fill" viewBox="0 0 16 16">
|
||||
<path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>
|
||||
</symbol>
|
||||
<symbol id="cpu-fill" viewBox="0 0 16 16">
|
||||
<path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
|
||||
<path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
|
||||
|
||||
@ -10,6 +10,6 @@
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
.dropdown-toggle:not(:focus) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@ -68,9 +68,11 @@ body_class: ""
|
||||
|
||||
<div class="container">
|
||||
<header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
|
||||
<a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 link-body-emphasis text-decoration-none">
|
||||
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
|
||||
</a>
|
||||
<div class="col-md-3 mb-2 mb-md-0">
|
||||
<a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
|
||||
<svg class="bi" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
|
||||
<li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
|
||||
|
||||
@ -18,9 +18,6 @@ body_class: ""
|
||||
<path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
|
||||
<path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/>
|
||||
</symbol>
|
||||
<symbol id="x-circle-fill" viewBox="0 0 16 16">
|
||||
<path 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"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<div class="container my-5">
|
||||
|
||||
@ -7,11 +7,6 @@ body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
||||
</symbol>
|
||||
|
||||
<symbol id="calendar-event" viewBox="0 0 16 16">
|
||||
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
|
||||
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
|
||||
|
||||
@ -7,24 +7,6 @@ body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
||||
</symbol>
|
||||
|
||||
<symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
|
||||
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="check2-circle" viewBox="0 0 16 16">
|
||||
<path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
|
||||
<path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="bookmark-star" viewBox="0 0 16 16">
|
||||
<path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/>
|
||||
<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
|
||||
@ -34,10 +16,6 @@ body_class: ""
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="stars" viewBox="0 0 16 16">
|
||||
<path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.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 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.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-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="film" viewBox="0 0 16 16">
|
||||
<path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
|
||||
</symbol>
|
||||
|
||||
@ -30,41 +30,6 @@ body_class: ""
|
||||
<symbol id="grid" viewBox="0 0 16 16">
|
||||
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
|
||||
</symbol>
|
||||
<symbol id="collection" viewBox="0 0 16 16">
|
||||
<path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
|
||||
</symbol>
|
||||
<symbol id="calendar3" viewBox="0 0 16 16">
|
||||
<path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
|
||||
<path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
|
||||
</symbol>
|
||||
<symbol id="chat-quote-fill" viewBox="0 0 16 16">
|
||||
<path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>
|
||||
</symbol>
|
||||
<symbol id="cpu-fill" viewBox="0 0 16 16">
|
||||
<path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
|
||||
<path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
|
||||
</symbol>
|
||||
<symbol id="gear-fill" viewBox="0 0 16 16">
|
||||
<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
|
||||
</symbol>
|
||||
<symbol id="speedometer" viewBox="0 0 16 16">
|
||||
<path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
|
||||
<path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/>
|
||||
</symbol>
|
||||
<symbol id="toggles2" viewBox="0 0 16 16">
|
||||
<path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/>
|
||||
<path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/>
|
||||
<path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/>
|
||||
</symbol>
|
||||
<symbol id="tools" viewBox="0 0 16 16">
|
||||
<path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
|
||||
</symbol>
|
||||
<symbol id="chevron-right" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
|
||||
</symbol>
|
||||
<symbol id="geo-fill" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
<main class="d-flex flex-nowrap">
|
||||
|
||||
@ -18,7 +18,7 @@ We'll dive into each of these more throughout, but at a high level, here's what
|
||||
- Components should be responsive and mobile-first
|
||||
- Components should be built with a base class and extended via modifier classes
|
||||
- Component states should obey a common z-index scale
|
||||
- Whenever possible, prefer a HTML and CSS implementation over JavaScript
|
||||
- Whenever possible, prefer an HTML and CSS implementation over JavaScript
|
||||
- Whenever possible, use utilities over custom styles
|
||||
- Whenever possible, avoid enforcing strict HTML requirements (children selectors)
|
||||
|
||||
|
||||
@ -371,7 +371,7 @@ These variables are also color mode adaptive, meaning they change color while in
|
||||
|
||||
### Sass mixins
|
||||
|
||||
Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles.
|
||||
Two mixins are combined, through our [loop](#loop), to generate our form validation feedback styles.
|
||||
|
||||
{{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}}
|
||||
|
||||
|
||||
@ -37,6 +37,14 @@ Modify the `--bs-focus-ring-*` CSS variables as needed to change the default app
|
||||
|
||||
{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}}
|
||||
|
||||
By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values. Modify them to change the default appearance.
|
||||
|
||||
{{< example >}}
|
||||
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2" style="--bs-focus-ring-x: 10px; --bs-focus-ring-y: 10px; --bs-focus-ring-blur: 4px">
|
||||
Blurry offset focus ring
|
||||
</a>
|
||||
{{< /example >}}
|
||||
|
||||
### Sass
|
||||
|
||||
Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project.
|
||||
|
||||
@ -45,6 +45,14 @@ Add `.icon-link-hover` to move the icon to the right on hover.
|
||||
</a>
|
||||
{{< /example >}}
|
||||
|
||||
## Customize
|
||||
|
||||
Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles.
|
||||
|
||||
### CSS variables
|
||||
|
||||
Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to change the default appearance.
|
||||
|
||||
Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable:
|
||||
|
||||
{{< example >}}
|
||||
@ -54,7 +62,22 @@ Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS
|
||||
</a>
|
||||
{{< /example >}}
|
||||
|
||||
## Pairs with link utilities
|
||||
Customize the color by overriding the `--bs-link-*` CSS variable:
|
||||
|
||||
{{< example >}}
|
||||
<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
|
||||
Icon link
|
||||
<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
|
||||
</a>
|
||||
{{< /example >}}
|
||||
|
||||
### Sass
|
||||
|
||||
Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project.
|
||||
|
||||
{{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Utilities
|
||||
|
||||
Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.
|
||||
|
||||
|
||||
@ -69,7 +69,7 @@ If you're migrating from our previous alpha release of v5.3.0, please reviewing
|
||||
|
||||
### Docs
|
||||
|
||||
- Examples are now displayed with the appropriate light or dark color mode as dictated by the setting in our docs. However, they lack an individual color mode picker for the time being.
|
||||
- Examples are now displayed with the appropriate light or dark color mode as dictated by the setting in our docs. Each example has an individual color mode picker.
|
||||
|
||||
- Improved included JavaScript for live Toast demo.
|
||||
|
||||
@ -150,7 +150,7 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
|
||||
|
||||
#### Dropdowns
|
||||
|
||||
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.dropdown-menu-dark` class has been deprecated and replaced with `data-bs-theme="dark"` on the close button or any parent element. [See the docs for an example.]({{< docsref "/components/dropdowns#dark-dropdowns" >}})
|
||||
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.dropdown-menu-dark` class has been deprecated and replaced with `data-bs-theme="dark"` on the dropdown or any parent element. [See the docs for an example.]({{< docsref "/components/dropdowns#dark-dropdowns" >}})
|
||||
|
||||
#### Close button
|
||||
|
||||
@ -214,9 +214,9 @@ We've also introduced a new `.progress-stacked` class to more logically wrap [mu
|
||||
|
||||
### Utilities
|
||||
|
||||
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> `.text-body-secondary` will be be replaced by `.text-body-secondary` in v6.
|
||||
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> `.text-muted` will be replaced by `.text-body-secondary` in v6.
|
||||
|
||||
With the addition of the expanded theme colors and variables, the `.text-body-secondary` variables and utility have been deprecated with v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
|
||||
With the addition of the expanded theme colors and variables, the `.text-muted` variables and utility have been deprecated with v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
|
||||
|
||||
- Adds new `.overflow-x`, `.overflow-y`, and several `.object-fit-*` utilities. _The object-fit property is used to specify how an `<img>` or `<video>` should be resized to fit its container, giving us a responsive alternative to using `background-image` for a resizable fill/fit image._
|
||||
|
||||
|
||||
@ -25,9 +25,8 @@ Color utilities like `.text-*` that generated from our original `$theme-colors`
|
||||
<p class="text-{{ .name }}-emphasis">.text-{{ .name }}-emphasis</p>
|
||||
{{- end -}}
|
||||
{{< /colors.inline >}}
|
||||
<p class="text-body">.text-body</p>
|
||||
<p class="text-body-secondary">.text-body-secondary</p>
|
||||
|
||||
<p class="text-body">.text-body</p>
|
||||
<p class="text-body-emphasis">.text-body-emphasis</p>
|
||||
<p class="text-body-secondary">.text-body-secondary</p>
|
||||
<p class="text-body-tertiary">.text-body-tertiary</p>
|
||||
@ -43,7 +42,7 @@ Color utilities like `.text-*` that generated from our original `$theme-colors`
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout warning >}}
|
||||
**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-body-secondary` utility has been deprecated as of v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
|
||||
**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
|
||||
{{< /callout >}}
|
||||
|
||||
## Opacity
|
||||
|
||||
@ -59,6 +59,7 @@ Change the underline's distance from your text. Offset is set in `em` units to a
|
||||
Change the underline's opacity. Requires adding `.link-underline` to first set an `rgba()` color we use to then modify the alpha opacity.
|
||||
|
||||
{{< example >}}
|
||||
<p><a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>
|
||||
<p><a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>
|
||||
<p><a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>
|
||||
<p><a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>
|
||||
@ -71,8 +72,8 @@ Change the underline's opacity. Requires adding `.link-underline` to first set a
|
||||
Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-underline-opacity` utilities include `:hover` variants by default. Mix and match to create unique link styles.
|
||||
|
||||
{{< example >}}
|
||||
<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-25 link-underline-opacity-75-hover" href="#">
|
||||
Underline opacity 10
|
||||
<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
|
||||
Underline opacity 0
|
||||
</a>
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
@ -72,6 +72,26 @@
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
</style>
|
||||
|
||||
{{ range .Page.Params.extra_css }}
|
||||
@ -80,6 +100,57 @@
|
||||
{{- end }}
|
||||
</head>
|
||||
<body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</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="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="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>
|
||||
</svg>
|
||||
|
||||
<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
|
||||
<button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
|
||||
id="bd-theme"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-label="Toggle theme (auto)">
|
||||
<svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg>
|
||||
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
|
||||
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#sun-fill"></use></svg>
|
||||
Light
|
||||
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
|
||||
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
|
||||
Dark
|
||||
<svg class="bi ms-auto d-none" width="1em" height="1em"><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" aria-pressed="true">
|
||||
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#circle-half"></use></svg>
|
||||
Auto
|
||||
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
{{ if ne .Page.Params.include_js false -}}
|
||||
|
||||
@ -32,14 +32,14 @@
|
||||
</div>
|
||||
|
||||
{{ highlight (printf `<div class="dropdown">
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><button class="dropdown-item" type="button">Dropdown item</button></li>
|
||||
<li><button class="dropdown-item" type="button">Dropdown item</button></li>
|
||||
<li><button class="dropdown-item" type="button">Dropdown item</button></li>
|
||||
</ul>
|
||||
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><button class="dropdown-item" type="button">Dropdown item</button></li>
|
||||
<li><button class="dropdown-item" type="button">Dropdown item</button></li>
|
||||
<li><button class="dropdown-item" type="button">Dropdown item</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
`) "html" "" }}
|
||||
<p>Learn more about <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#using-bootstrap-as-a-module">our JavaScript as modules</a> and <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#programmatic-api">using the programmatic API</a>.</p>
|
||||
|
||||
@ -2,9 +2,6 @@
|
||||
<symbol id="arrow-right" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
|
||||
</symbol>
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
<symbol id="book-half" viewBox="0 0 16 16">
|
||||
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
|
||||
</symbol>
|
||||
|
||||
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Loading…
Reference in New Issue
Block a user