From 77b32d54249fa690109d5ce61cb1b847b78a369e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 24 Mar 2021 22:25:46 +0200 Subject: [PATCH 1/8] Drop usage of large SVG sprite on homepage and in copy buttons, replacing them with the Icons font --- config.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/config.yml b/config.yml index 9723becb48..a7bf3a04ba 100644 --- a/config.yml +++ b/config.yml @@ -38,8 +38,6 @@ module: target: static/apple-touch-icon.png - source: docs/static/assets/img/favicons/favicon.ico target: static/favicon.ico - - source: bootstrap-icons.svg - target: static/bootstrap-icons.svg - source: icons target: static/assets/icons - source: font From d262fe379626210fca8805814c0b7f11ce444aa1 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 25 Nov 2022 19:13:59 +0200 Subject: [PATCH 2/8] partials/icons.html: fix path to SVG file --- config.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/config.yml b/config.yml index a7bf3a04ba..9723becb48 100644 --- a/config.yml +++ b/config.yml @@ -38,6 +38,8 @@ module: target: static/apple-touch-icon.png - source: docs/static/assets/img/favicons/favicon.ico target: static/favicon.ico + - source: bootstrap-icons.svg + target: static/bootstrap-icons.svg - source: icons target: static/assets/icons - source: font From a381d1b59e247477854c7f56222648df8daa1875 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 25 Nov 2022 19:48:57 +0200 Subject: [PATCH 3/8] Attempt to fix line-height discrepancy --- docs/assets/scss/docs.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 8ab1ed50a4..54da2fd4fa 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -50,12 +50,6 @@ --bs-gutter-x: #{$bd-gutter-x}; } -.bi { - display: inline-block; - vertical-align: -.125em; - fill: currentcolor; -} - .hero-notice { background-color: $teal-100; From 3f1137519b4cd0e084c5cc49dc21b1f21f4179a5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Dec 2022 16:10:39 -0800 Subject: [PATCH 4/8] Restore styles --- docs/assets/scss/docs.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 54da2fd4fa..8ab1ed50a4 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -50,6 +50,12 @@ --bs-gutter-x: #{$bd-gutter-x}; } +.bi { + display: inline-block; + vertical-align: -.125em; + fill: currentcolor; +} + .hero-notice { background-color: $teal-100; From 255c3dbf828569400f4469f5fcc4ef742fe681ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 26 Dec 2022 17:33:41 -0800 Subject: [PATCH 5/8] Update to v5.3.0-alpha1 --- config.yml | 15 +- docs/assets/js/color-modes.js | 62 ++++++++ docs/assets/scss/_ads.scss | 6 +- docs/assets/scss/_clipboard-js.scss | 6 +- docs/assets/scss/_footer.scss | 27 +--- docs/assets/scss/_navbar.scss | 45 ++++++ docs/assets/scss/_syntax.scss | 205 ++++++++++++++++----------- docs/assets/scss/docs.scss | 65 +++++---- docs/layouts/partials/footer.html | 64 +++++++-- docs/layouts/partials/head.html | 3 + docs/layouts/partials/home/hero.html | 4 +- docs/layouts/partials/icons.html | 4 +- docs/layouts/partials/navbar.html | 54 +++++++ docs/layouts/partials/scripts.html | 2 +- package-lock.json | 14 +- package.json | 2 +- 16 files changed, 411 insertions(+), 167 deletions(-) create mode 100644 docs/assets/js/color-modes.js diff --git a/config.yml b/config.yml index 9723becb48..f9aba58dbc 100644 --- a/config.yml +++ b/config.yml @@ -46,8 +46,8 @@ module: target: static/assets/font - source: node_modules/bootstrap/scss target: assets/scss/bootstrap - - source: node_modules/bootstrap/dist/js/bootstrap.min.js - target: assets/js/vendor/bootstrap.min.js + - source: node_modules/bootstrap/dist/js/bootstrap.bundle.min.js + target: assets/js/vendor/bootstrap.bundle.min.js - source: node_modules/clipboard/dist/clipboard.min.js target: assets/js/vendor/clipboard.min.js - source: node_modules/list.js/dist/list.min.js @@ -58,13 +58,14 @@ params: social_image_path: /assets/img/bootstrap-icons-social.png version: "1.10.2" - docs_version: "5.2" + docs_version: "5.3" main: "https://getbootstrap.com" - github_org: "https://github.com/twbs" - repo: "https://github.com/twbs/icons" + repo: "https://github.com/twbs/bootstrap" twitter: "getbootstrap" - blog: "https://blog.getbootstrap.com" - themes: "https://themes.getbootstrap.com" opencollective: "https://opencollective.com/bootstrap" + blog: "https://blog.getbootstrap.com/" + themes: "https://themes.getbootstrap.com/" + icons: "https://icons.getbootstrap.com/" + swag: "https://cottonbureau.com/people/bootstrap" icons_figma: "https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons" diff --git a/docs/assets/js/color-modes.js b/docs/assets/js/color-modes.js new file mode 100644 index 0000000000..41b6b893e2 --- /dev/null +++ b/docs/assets/js/color-modes.js @@ -0,0 +1,62 @@ +/*! + * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2022 The Bootstrap Authors + * Licensed under the Creative Commons Attribution 3.0 Unported License. + */ + +(() => { + 'use strict' + + const storedTheme = localStorage.getItem('theme') + + const getPreferredTheme = () => { + if (storedTheme) { + return storedTheme + } + + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + } + + const setTheme = function (theme) { + if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.documentElement.setAttribute('data-bs-theme', 'dark') + } else { + document.documentElement.setAttribute('data-bs-theme', theme) + } + } + + setTheme(getPreferredTheme()) + + const showActiveTheme = theme => { + const activeThemeIcon = document.querySelector('.theme-icon-active use') + const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) + const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href') + + document.querySelectorAll('[data-bs-theme-value]').forEach(element => { + element.classList.remove('active') + }) + + btnToActive.classList.add('active') + activeThemeIcon.setAttribute('href', svgOfActiveBtn) + } + + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { + if (storedTheme !== 'light' || storedTheme !== 'dark') { + setTheme(getPreferredTheme()) + } + }) + + window.addEventListener('DOMContentLoaded', () => { + showActiveTheme(getPreferredTheme()) + + document.querySelectorAll('[data-bs-theme-value]') + .forEach(toggle => { + toggle.addEventListener('click', () => { + const theme = toggle.getAttribute('data-bs-theme-value') + localStorage.setItem('theme', theme) + setTheme(theme) + showActiveTheme(theme) + }) + }) + }) +})() diff --git a/docs/assets/scss/_ads.scss b/docs/assets/scss/_ads.scss index 1251ec5e3a..27612c0a9e 100644 --- a/docs/assets/scss/_ads.scss +++ b/docs/assets/scss/_ads.scss @@ -5,7 +5,7 @@ margin-right: auto; margin-left: auto; overflow: auto; - background-color: var(--bs-gray-100); + background-color: var(--bs-tertiary-bg); border-radius: .25rem; @media (min-width: 992px) { @@ -30,11 +30,11 @@ .carbon-text, .carbon-poweredby { display: block; - color: #6c757d; + color: var(--bs-body-color); &:hover, &:focus { - color: #343a40; + color: var(--bs-body-color); text-decoration: none; } } diff --git a/docs/assets/scss/_clipboard-js.scss b/docs/assets/scss/_clipboard-js.scss index 5d4cbba44e..232b7f4dc6 100644 --- a/docs/assets/scss/_clipboard-js.scss +++ b/docs/assets/scss/_clipboard-js.scss @@ -24,12 +24,12 @@ display: block; padding: .5em .75em .625em; line-height: 1; - color: var(--bs-gray-900); - background-color: var(--bs-gray-100); + color: var(--bs-body-color); + background-color: var(--bs-tertiary-bg); border: 0; border-radius: .25rem; &:hover { - color: var(--bs-primary); + color: var(--bs-link-hover-color); } } diff --git a/docs/assets/scss/_footer.scss b/docs/assets/scss/_footer.scss index 22d20c969d..42e1ca051a 100644 --- a/docs/assets/scss/_footer.scss +++ b/docs/assets/scss/_footer.scss @@ -3,33 +3,14 @@ // .bd-footer { - font-size: .875rem; - color: var(--bs-gray-600); - a { - font-weight: 600; - color: var(--bs-gray-700); + color: var(--bs-body-color); + text-decoration: none; &:hover, &:focus { - color: var(--bs-primary); - } - } - - p { - margin-bottom: 0; - } -} - -.bd-footer-links { - padding-left: 0; - margin-bottom: 1rem; - - li { - display: inline-block; - - + li { - margin-left: 1rem; + color: var(--bs-link-hover-color); + text-decoration: underline; } } } diff --git a/docs/assets/scss/_navbar.scss b/docs/assets/scss/_navbar.scss index 481d489f4e..e0e0f9e445 100644 --- a/docs/assets/scss/_navbar.scss +++ b/docs/assets/scss/_navbar.scss @@ -4,6 +4,11 @@ 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); + .bi { + width: 1em; + height: 1em; + } + .navbar-toggler { padding: 0; margin-right: -.5rem; @@ -61,4 +66,44 @@ box-shadow: $box-shadow-lg; } } + + .dropdown-menu { + --bs-dropdown-min-width: 12rem; + --bs-dropdown-padding-x: .25rem; + --bs-dropdown-padding-y: .25rem; + --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1); + --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1); + @include rfs(.875rem, --bs-dropdown-font-size); + @include font-size(.875rem); + @include border-radius(.5rem); + box-shadow: $dropdown-box-shadow; + + li + li { + margin-top: .125rem; + } + + .dropdown-item { + @include border-radius(.25rem); + + &:active { + .bi { + color: inherit !important; // stylelint-disable-line declaration-no-important + } + } + } + + .active { + font-weight: 600; + + .bi { + display: block !important; // stylelint-disable-line declaration-no-important + } + } + } +} + +@include color-mode(dark) { + .bd-navbar { + box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15); + } } diff --git a/docs/assets/scss/_syntax.scss b/docs/assets/scss/_syntax.scss index 43cb79199d..092307e058 100644 --- a/docs/assets/scss/_syntax.scss +++ b/docs/assets/scss/_syntax.scss @@ -1,101 +1,134 @@ -// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations +:root, +[data-bs-theme="light"] { + --base00: #fff; + --base01: #f5f5f5; + --base02: #c8c8fa; + --base03: #565c64; + --base04: #030303; + --base05: #333; + --base06: #fff; + --base07: #9a6700; + --base08: #bc4c00; + --base09: #087990; + --base0A: #795da3; + --base0B: #183691; + --base0C: #183691; + --base0D: #795da3; + --base0E: #a71d5d; + --base0F: #333; +} + +@include color-mode(dark, true) { + --base00: #282c34; + --base01: #353b45; + --base02: #3e4451; + --base03: #868e96; + --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); } +.k { color: var(--base0E); } +.l { color: var(----base09); } +.n { color: var(--base08); } +.o { color: var(--base05); } +.p { color: var(--base05); } +.cm { color: var(--base04); } +.cp { color: var(--base08); } +.c1 { color: var(--base03); } +.cs { color: var(--base04); } +.gd { color: var(--base08); } +.ge { font-style: italic; } +.gh { + font-weight: 600; + color: #fff; +} +.gi { color: var(--bs-success); } +.gp { + font-weight: 600; + color: var(--base04); +} +.gs { font-weight: 600; } +.gu { + font-weight: 600; + color: var(--base0C); +} +.kc { color: var(--base0E); } +.kd { color: var(--base0E); } +.kn { color: var(--base0C); } +.kp { color: var(--base0E); } +.kr { color: var(--base0E); } +.kt { color: var(--base0A); } +.ld { color: var(--base0C); } +.m { color: var(--base09); } +.s { color: var(--base0C); } +.na { color: var(--base0A); } +.nb { color: var(--base05); } +.nc { color: var(--base07); } +.no { color: var(--base08); } +.nd { color: var(--base07); } +.ni { color: var(--base08); } +.ne { color: var(--base08); } +.nf { color: var(--base0B); } +.nl { color: var(--base05); } +.nn { color: var(--base0A); } +.nx { color: var(--base0A); } +.py { color: var(--base08); } +.nt { color: var(--base08); } +.nv { color: var(--base08); } +.ow { color: var(--base0C); } +.w { color: #fff; } +.mf { color: var(--base09); } +.mh { color: var(--base09); } +.mi { color: var(--base09); } +.mo { color: var(--base09); } +.sb { color: var(--base0C); } +.sc { color: #fff; } +.sd { color: var(--base04); } +.s2 { color: var(--base0C); } +.se { color: var(--base09); } +.sh { color: var(--base0C); } +.si { color: var(--base09); } +.sx { color: var(--base0C); } +.sr { color: var(--base0C); } +.s1 { color: var(--base0C); } +.ss { color: var(--base0C); } +.bp { color: var(--base05); } +.vc { color: var(--base08); } +.vg { color: var(--base08); } +.vi { color: var(--base08); } +.il { color: var(--base09); } -/* Background .chroma { background-color: #f0f0f0; } */ -/* Other .chroma .x { } */ -/* Error .chroma .err { } */ -/* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */ -/* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } */ -/* LineHighlight .chroma .hl { display: block; width: 100%; background-color: #ffffcc; } */ -/* LineNumbersTable .chroma .lnt { margin-right: .4em; padding: 0 .4em; } */ -/* LineNumbers .chroma .ln { margin-right: .4em; padding: 0 .4em; } */ +// Color commas in rgba() values +.m + .o { color: var(--base03); } -/* Comment */ .chroma .c { color: #727272; } -/* CommentHashbang */ .chroma .ch { font-style: italic; color: #60a0b0; } -/* CommentMultiline */ .chroma .cm { color: #727272; } -/* CommentPreproc */ .chroma .cp { color: #008085; } -/* CommentPreprocFile */ .chroma .cpf { color: #007020; } -/* CommentSingle */ .chroma .c1 { color: #727272; } -/* CommentSpecial */ .chroma .cs { color: #727272; } -/* Generic .chroma .g { } */ -/* GenericDeleted */ .chroma .gd { background-color: #fcc; border: 1px solid #c00; } -/* GenericEmph */ .chroma .ge { font-style: italic; } -/* GenericError */ .chroma .gr { color: #f00; } -/* GenericHeading */ .chroma .gh { color: #030; } -/* GenericInserted */ .chroma .gi { background-color: #cfc; border: 1px solid #0c0; } -/* GenericOutput */ .chroma .go { color: #aaa; } -/* GenericPrompt */ .chroma .gp { color: #009; } -/* GenericStrong */ .chroma .gs { font-weight: 700; } -/* GenericSubheading */ .chroma .gu { color: #030; } -/* GenericTraceback */ .chroma .gt { color: #9c6; } -/* GenericUnderline */ .chroma .gl { text-decoration: underline; } -/* Keyword */ .chroma .k { color: #069; } -/* KeywordConstant */ .chroma .kc { color: #069; } -/* KeywordDeclaration */ .chroma .kd { color: #069; } -/* KeywordNamespace */ .chroma .kn { color: #069; } -/* KeywordPseudo */ .chroma .kp { color: #069; } -/* KeywordReserved */ .chroma .kr { color: #069; } -/* KeywordType */ .chroma .kt { color: #078; } -/* Literal .chroma .l { } */ -/* LiteralDate .chroma .ld { color: #c24f19 } */ -/* LiteralNumber */ .chroma .m { color: #c24f19; } -/* LiteralNumberBin */ .chroma .mb { color: #40a070; } -/* LiteralNumberFloat */ .chroma .mf { color: #c24f19; } -/* LiteralNumberHex */ .chroma .mh { color: #c24f19; } -/* LiteralNumberInteger */ .chroma .mi { color: #c24f19; } -/* LiteralNumberIntegerLong */ .chroma .il { color: #c24f19; } -/* LiteralNumberOct */ .chroma .mo { color: #c24f19; } -/* LiteralString */ .chroma .s { color: #d73038; } -/* LiteralStringAffix */ .chroma .sa { color: #4070a0; } -/* LiteralStringBacktick */ .chroma .sb { color: #c30; } -/* LiteralStringChar */ .chroma .sc { color: #c30; } -/* LiteralStringDelimiter */ .chroma .dl { color: #4070a0; } -/* LiteralStringDoc */ .chroma .sd { font-style: italic; color: #c30; } -/* LiteralStringDouble */ .chroma .s2 { color: #c30; } -/* LiteralStringEscape */ .chroma .se { color: #c30; } -/* LiteralStringHeredoc */ .chroma .sh { color: #c30; } -/* LiteralStringInterpol */ .chroma .si { color: #a00; } -/* LiteralStringOther */ .chroma .sx { color: #c30; } -/* LiteralStringRegex */ .chroma .sr { color: #337e7e; } -/* LiteralStringSingle */ .chroma .s1 { color: #c30; } -/* LiteralStringSymbol */ .chroma .ss { color: #fc3; } -/* Name .chroma .n { } */ -/* NameAttribute */ .chroma .na { color: #006ee0; } -/* NameBuiltin */ .chroma .nb { color: #366; } -/* NameBuiltinPseudo .chroma .bp { } */ -/* NameClass */ .chroma .nc { color: #168174; } -/* NameConstant */ .chroma .no { color: #360; } -/* NameDecorator */ .chroma .nd { color: #6b62de; } -/* NameEntity */ .chroma .ni { color: #727272; } -/* NameException */ .chroma .ne { color: #c00; } -/* NameFunction */ .chroma .nf { color: #b715f4; } -/* NameFunctionMagic .chroma .fm { } */ -/* NameLabel */ .chroma .nl { color: #6b62de; } -/* NameNamespace */ .chroma .nn { color: #007ca5; } -/* NameOther .chroma .nx { } */ -/* NameProperty .chroma .py { } */ -/* NameTag */ .chroma .nt { color: #2f6f9f; } -/* NameVariable */ .chroma .nv { color: #033; } -/* NameVariableClass .chroma .vc { } */ -/* NameVariableGlobal .chroma .vg { } */ -/* NameVariableInstance .chroma .vi { } */ -/* NameVariableMagic .chroma .vm { } */ -/* Operator */ .chroma .o { color: #555; } -/* OperatorWord */ .chroma .ow { color: #000; } -/* Punctuation .chroma .p { } */ -/* TextWhitespace */ .chroma .w { color: #bbb; } +// Fix bash +.language-sh .c { color: var(--base03); } .chroma { .language-bash, .language-sh { - &::before { - color: var(--bs-gray-600); + .line::before { + color: var(--base03); content: "$ "; user-select: none; } } .language-powershell::before { - color: #009; + color: var(--base0C); content: "PM> "; user-select: none; } diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 8ab1ed50a4..e20366ba7f 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -1,5 +1,6 @@ @import "bootstrap/functions"; @import "bootstrap/variables"; +@import "bootstrap/variables-dark"; @import "bootstrap/maps"; @import "bootstrap/mixins"; @import "bootstrap/utilities"; @@ -46,6 +47,10 @@ @import "syntax"; @import "ads"; +:root { + color-scheme: light dark; +} + .bd-gutter { --bs-gutter-x: #{$bd-gutter-x}; } @@ -57,42 +62,54 @@ } .hero-notice { - background-color: $teal-100; + color: var(--bs-info-text); + background-color: var(--bs-info-bg-subtle); + border: 1px solid var(--bs-info-border-subtle); @media (min-width: 540px) { border-radius: 5em !important; // stylelint-disable-line declaration-no-important } } +.btn-figma { + --bs-btn-color: var(--bs-emphasis-color); + --bs-btn-border-color: var(--bs-emphasis-color); + --bs-btn-hover-color: var(--bs-body-bg); + --bs-btn-hover-bg: var(--bs-emphasis-color); + --bs-btn-hover-border-color: var(--bs-btn-hover-bg); +} + .highlight { + position: relative; padding: 1.25rem; - margin-bottom: 1.5rem; - background-color: var(--bs-gray-100); - border-radius: .5rem; + margin-bottom: 1rem; + background-color: var(--bs-tertiary-bg); + border-radius: var(--bs-border-radius); pre { + padding: 0; margin-bottom: 0; - scrollbar-width: none; - - &:focus { outline: 0; } - - &::-webkit-scrollbar { - display: none; - } + white-space: pre; + background-color: transparent; + border: 0; + } - code { - word-wrap: normal; - } + pre code { + @include font-size(inherit); + word-wrap: normal; } } + .bd-example { padding: 1.25rem; - border: 1px solid rgba(0, 0, 0, .1); + border: 1px solid var(--bs-border-color); border-top-left-radius: .25rem; border-top-right-radius: .25rem; - + .bd-clipboard + .highlight pre { + + .bd-clipboard + .highlight { + border: 1px solid var(--bs-border-color); + border-width: 0 1px 1px; border-top-left-radius: 0; border-top-right-radius: 0; } @@ -117,12 +134,13 @@ } .hero { - border-bottom: 1px solid rgba(0, 0, 0, .075); + border-bottom: 1px solid var(--bs-border-color-translucent); .highlight { margin-bottom: 0; color: var(--bs-gray-200); background-color: var(--bs-gray-800); + border-radius: .5rem; pre { margin-bottom: 0; @@ -134,8 +152,7 @@ } .btn-clipboard { - top: .625em; - color: var(--bs-gray-200); + top: .5em; background-color: var(--bs-gray-800); } @@ -163,7 +180,7 @@ a:focus { &, .name { - color: var(--bs-blue) !important; + color: var(--bs-link-hover-color) !important; } } // stylelint-enable declaration-no-important @@ -174,10 +191,10 @@ padding: 100px 2rem; margin-right: 15px; margin-left: 15px; - color: var(--bs-gray-500); + color: var(--bs-secondary-color); text-align: center; content: "Nothing found, try searching again."; - background-color: var(--bs-gray-100); + background-color: var(--bs-secondary-bg); border-radius: .5rem; } } @@ -200,8 +217,8 @@ } .icon-demo { - background-color: #fdfdfd; - background-image: radial-gradient(circle, #ddd 1px, rgba(0, 0, 0, 0) 1px); + background-color: var(--bs-tertiary-bg); + background-image: radial-gradient(circle, var(--bs-border-color) 1px, rgba(0, 0, 0, 0) 1px); background-size: 1rem 1rem; } diff --git a/docs/layouts/partials/footer.html b/docs/layouts/partials/footer.html index fdad6d8561..e340df5b1f 100644 --- a/docs/layouts/partials/footer.html +++ b/docs/layouts/partials/footer.html @@ -1,10 +1,58 @@ -