mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-06 13:46:42 +02:00
Code Issues Releases Wiki Activity

Migrate docs to Sass modules, comment out docs grid CSS

Browse Source
This commit is contained in:
Mark Otto
2025-03-04 12:21:00 -08:00
parent ea2a1f4c4f
commit b0d14d1766
21 changed files with 153 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
site/src/components/DocsSidebar.astro
View File

@@ -20,7 +20,7 @@ const sidebar = getData('sidebar')
{group.icon && ( {group.icon && (
<svg <svg
class="bi me-2" class="bi me-2"
style={group.icon_color && `color: var(--bs-${group.icon_color});`} style={group.icon_color && `color: light-dark(var(--bs-${group.icon_color}-500), var(--bs-${group.icon_color}-300));`}
aria-hidden="true" aria-hidden="true"
> >
<use xlink:href={`#${group.icon}`} /> <use xlink:href={`#${group.icon}`} />

6
site/src/components/head/Scss.astro
View File

@@ -2,7 +2,7 @@
--- ---
<style is:global lang="scss"> <style is:global lang="scss">
@import '../../../../scss/bootstrap.scss'; @use '../../../../scss/bootstrap' as *;
@import '../../scss/docs'; @use '../../scss/docs' as *;
@import '../../scss/docs_search'; @use '../../scss/docs_search' as *;
</style> </style>

4
site/src/components/head/ScssProd.astro
View File

@@ -2,6 +2,6 @@
--- ---
<style is:global lang="scss"> <style is:global lang="scss">
@import '../../scss/docs'; @use '../../scss/docs' as *;
@import '../../scss/docs_search'; @use '../../scss/docs_search' as *;
</style> </style>

2
site/src/scss/_ads.scss
View File

@@ -17,7 +17,7 @@
@include font-size(.8125rem); @include font-size(.8125rem);
line-height: 1.4; line-height: 1.4;
text-align: left; text-align: left;
background-color: var(--bs-tertiary-bg); background-color: var(--bs-bg-1);
a { a {
color: var(--bs-body-color); color: var(--bs-body-color);

5
site/src/scss/_brand.scss
View File

@@ -1,3 +1,8 @@
@use "../../../scss/config" as *;
@use "../../../scss/colors" as *;
@use "../../../scss/layout/breakpoints" as *;
@use "variables" as *;
// //
// Brand guidelines // Brand guidelines
// //

7
site/src/scss/_buttons.scss
View File

@@ -1,3 +1,8 @@
@use "sass:color";
@use "../../../scss/config" as *;
@use "../../../scss/colors" as *;
@use "variables" as *;
// Buttons // Buttons
// //
// Custom buttons for the docs. // Custom buttons for the docs.
@@ -32,7 +37,7 @@
} }
.btn-bd-light { .btn-bd-light {
--btn-custom-color: #{mix($bd-violet, $white, 75%)}; --btn-custom-color: #{color.mix($bd-violet, $white, 75%)};
--bs-btn-color: var(--bs-gray-600); --bs-btn-color: var(--bs-gray-600);
--bs-btn-border-color: var(--bs-border-color); --bs-btn-border-color: var(--bs-border-color);

4
site/src/scss/_callouts.scss
View File

@@ -1,3 +1,7 @@
@use "../../../scss/config" as *;
@use "../../../scss/colors" as *;
@use "variables" as *;
// //
// Callouts // Callouts
// //

7
site/src/scss/_colors.scss
View File

@@ -1,4 +1,5 @@
@use "sass:map"; @use "sass:map";
@use "sass:string";
@use "../../../scss/config" as *; @use "../../../scss/config" as *;
@use "../../../scss/colors" as *; @use "../../../scss/colors" as *;
@use "../../../scss/layout/breakpoints" as *; @use "../../../scss/layout/breakpoints" as *;
@@ -25,9 +26,9 @@
line-height: 1.35; line-height: 1.35;
white-space: pre; white-space: pre;
content: content:
str-slice($contrast-ratio, 1, 4) "\A" string.slice($contrast-ratio, 1, 4) "\A"
str-slice($against-white, 1, 4) "\A" string.slice($against-white, 1, 4) "\A"
str-slice($against-black, 1, 4); string.slice($against-black, 1, 4);
background-color: $value; background-color: $value;
background-image: background-image:
linear-gradient( linear-gradient(

64
site/src/scss/_component-examples.scss
View File

@@ -1,3 +1,11 @@
@use "../../../scss/config" as *;
@use "../../../scss/variables" as *;
@use "../../../scss/vendor/rfs" as *;
@use "../../../scss/layout/breakpoints" as *;
@use "../../../scss/mixins/clearfix" as *;
@use "../../../scss/mixins/border-radius" as *;
@use "variables" as *;
// //
// Docs examples // Docs examples
// //
@@ -93,13 +101,13 @@
.fixed-top, .fixed-top,
.sticky-top { .sticky-top {
position: static; position: static;
margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list margin: calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)) var(--bd-example-padding);
} }
.fixed-bottom, .fixed-bottom,
.sticky-bottom { .sticky-bottom {
position: static; position: static;
margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding)); // stylelint-disable-line function-disallowed-list margin: var(--bd-example-padding) calc(-1 * var(--bd-example-padding)) calc(-1 * var(--bd-example-padding));
} }
@@ -137,39 +145,39 @@
border: 1px solid rgba(var(--bd-violet-rgb), .3); border: 1px solid rgba(var(--bd-violet-rgb), .3);
} }
// Grid mixins // // Grid mixins
.example-container { // .example-container {
width: 800px; // width: 800px;
@include make-container(); // @include make-container();
} // }
.example-row { // .example-row {
@include make-row(); // @include make-row();
} // }
.example-content-main { // .example-content-main {
@include make-col-ready(); // @include make-col-ready();
@include media-breakpoint-up(sm) { // @include media-breakpoint-up(sm) {
@include make-col(6); // @include make-col(6);
} // }
@include media-breakpoint-up(lg) { // @include media-breakpoint-up(lg) {
@include make-col(8); // @include make-col(8);
} // }
} // }
.example-content-secondary { // .example-content-secondary {
@include make-col-ready(); // @include make-col-ready();
@include media-breakpoint-up(sm) { // @include media-breakpoint-up(sm) {
@include make-col(6); // @include make-col(6);
} // }
@include media-breakpoint-up(lg) { // @include media-breakpoint-up(lg) {
@include make-col(4); // @include make-col(4);
} // }
} // }
// Ratio helpers // Ratio helpers
.bd-example-ratios { .bd-example-ratios {

11
site/src/scss/_content.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
@use "../../../scss/colors" as *; @use "../../../scss/colors" as *;
@use "../../../scss/variables" as *; @use "../../../scss/variables" as *;
@use "../../../scss/vendor/rfs" as *; @use "../../../scss/vendor/rfs" as *;
@@ -117,8 +118,8 @@
} }
.bd-subtitle { .bd-subtitle {
@include font-size(1.5rem);
font-weight: 300; font-weight: 300;
@include font-size(1.5rem);
} }
.bi { .bi {
@@ -154,16 +155,16 @@
--bs-tertiary-bg: #{$blue-600}; --bs-tertiary-bg: #{$blue-600};
.dropdown-menu { .dropdown-menu {
--bs-dropdown-bg: #{mix($blue-500, $blue-600)}; --bs-dropdown-bg: #{color.mix($blue-500, $blue-600)};
--bs-dropdown-link-active-bg: #{$blue-700}; --bs-dropdown-link-active-bg: #{$blue-700};
} }
.btn-secondary { .btn-secondary {
--bs-btn-bg: #{mix($gray-600, $blue-400, .5)}; --bs-btn-bg: #{color.mix($gray-600, $blue-400)};
--bs-btn-border-color: #{rgba($white, .25)}; --bs-btn-border-color: #{rgba($white, .25)};
--bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)}; --bs-btn-hover-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -5%)}; // stylelint-disable-line scss/at-function-named-arguments
--bs-btn-hover-border-color: #{rgba($white, .25)}; --bs-btn-hover-border-color: #{rgba($white, .25)};
--bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)}; --bs-btn-active-bg: #{color.scale(color.mix($gray-600, $blue-400), $lightness: -10%)}; // stylelint-disable-line scss/at-function-named-arguments
--bs-btn-active-border-color: #{rgba($white, .5)}; --bs-btn-active-border-color: #{rgba($white, .5)};
--bs-btn-focus-border-color: #{rgba($white, .5)}; --bs-btn-focus-border-color: #{rgba($white, .5)};
--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2); --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);

4
site/src/scss/_layout.scss
View File

@@ -1,3 +1,7 @@
@use "../../../scss/config" as *;
@use "../../../scss/layout/breakpoints" as *;
@use "variables" as *;
.bd-gutter { .bd-gutter {
--bs-gutter-x: #{$bd-gutter-x}; --bs-gutter-x: #{$bd-gutter-x};
} }

10
site/src/scss/_masthead.scss
View File

@@ -11,11 +11,11 @@
--bd-pink-rgb: #{to-rgb($pink)}; --bd-pink-rgb: #{to-rgb($pink)};
padding: 3rem 0; padding: 3rem 0;
// stylelint-disable // stylelint-disable
background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), .01), rgba(var(--bs-body-bg-rgb), 1) 85%), background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), var(--bs-body-bg) 85%),
radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), .5), transparent 50%), radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-blue-500) 50%, transparent), transparent 50%),
radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), .5), transparent 50%), radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent) 50%, transparent), transparent 50%),
radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), .5), transparent 50%), radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet) 50%, transparent), transparent 50%),
radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), .5), transparent 50%); radial-gradient(ellipse at center left, color-mix(in srgb, var(--bs-pink-500) 50%, transparent), transparent 50%);
// stylelint-enable // stylelint-enable
h1 { h1 {

19
site/src/scss/_navbar.scss
View File

@@ -1,9 +1,9 @@
@use "../../../scss/config" as *;
@use "../../../scss/colors" as *; @use "../../../scss/colors" as *;
// @use "../../../scss/variables" as *; @use "../../../scss/functions" as *;
@use "../../../scss/mixins" as *;
@use "../../../scss/variables" as *;
@use "../../../scss/layout/breakpoints" as *; @use "../../../scss/layout/breakpoints" as *;
@use "../../../scss/mixins/border-radius" as *;
@use "../../../scss/mixins/color-mode" as *;
@use "../../../scss/mixins/transition" as *;
@use "../../../scss/vendor/rfs" as *; @use "../../../scss/vendor/rfs" as *;
.bd-navbar { .bd-navbar {
@@ -21,7 +21,8 @@
z-index: -1; z-index: -1;
display: block; display: block;
content: ""; content: "";
background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95)); background-image: linear-gradient(var(--bd-violet), color-mix(in srgb, var(--bd-violet), transparent 5%));
// background-image: linear-gradient(color-mix(in srgb, var(--bs-gray-900), $black 10%), color-mix(in srgb, var(--bs-gray-900), $black 15%));
} }
.bd-navbar-toggle { .bd-navbar-toggle {
@@ -85,7 +86,7 @@
border-left: 0; border-left: 0;
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
box-shadow: var(--bs-box-shadow-lg); box-shadow: var(--#{$prefix}box-shadow-lg);
} }
} }
@@ -99,12 +100,12 @@
--bs-dropdown-min-width: 12rem; --bs-dropdown-min-width: 12rem;
--bs-dropdown-padding-x: .25rem; --bs-dropdown-padding-x: .25rem;
--bs-dropdown-padding-y: .25rem; --bs-dropdown-padding-y: .25rem;
--bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1); --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
--bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1); --bs-dropdown-link-active-bg: var(--bd-violet);
@include rfs(.875rem, --bs-dropdown-font-size); @include rfs(.875rem, --bs-dropdown-font-size);
@include font-size(.875rem); @include font-size(.875rem);
@include border-radius(.5rem); @include border-radius(.5rem);
box-shadow: $dropdown-box-shadow; box-shadow: var(--#{$prefix}dropdown-box-shadow);
li + li { li + li {
margin-top: .125rem; margin-top: .125rem;

2
site/src/scss/_search.scss
View File

@@ -1,3 +1,5 @@
@use "variables" as *;
@use "../../../scss/colors" as *;
@use "../../../scss/layout/breakpoints" as *; @use "../../../scss/layout/breakpoints" as *;
@use "../../../scss/mixins/color-mode" as *; @use "../../../scss/mixins/color-mode" as *;
@use "../../../scss/mixins/border-radius" as *; @use "../../../scss/mixins/border-radius" as *;

9
site/src/scss/_sidebar.scss
View File

@@ -9,7 +9,7 @@
// Override collapse behaviors // Override collapse behaviors
// stylelint-disable-next-line declaration-no-important // stylelint-disable-next-line declaration-no-important
display: block !important; display: block !important;
height: subtract(100vh, 6rem); height: calc(100vh - 6rem);
// Prevent focus styles to be cut off: // Prevent focus styles to be cut off:
padding-left: .25rem; padding-left: .25rem;
margin-left: -.25rem; margin-left: -.25rem;
@@ -29,9 +29,9 @@
} }
.bd-links-nav { .bd-links-nav {
@include media-breakpoint-down(lg) { // @include media-breakpoint-down(lg) {
font-size: .875rem; // font-size: .875rem;
} // }
@include media-breakpoint-between(xs, lg) { @include media-breakpoint-between(xs, lg) {
column-count: 2; column-count: 2;
@@ -51,6 +51,7 @@
padding: .1875rem .5rem; padding: .1875rem .5rem;
margin-top: .125rem; margin-top: .125rem;
margin-left: 1.125rem; margin-left: 1.125rem;
font-size: .875rem;
color: var(--bs-body-color); color: var(--bs-body-color);
text-decoration: if($link-decoration == none, null, none); text-decoration: if($link-decoration == none, null, none);

3
site/src/scss/_skippy.scss
View File

@@ -1,3 +1,6 @@
@use "../../../scss/colors" as *;
@use "variables" as *;
.skippy { .skippy {
background-color: $bd-purple; background-color: $bd-purple;

3
site/src/scss/_syntax.scss
View File

@@ -1,3 +1,4 @@
@use "sass:color";
@use "../../../scss/colors" as *; @use "../../../scss/colors" as *;
@use "../../../scss/variables" as *; @use "../../../scss/variables" as *;
@use "../../../scss/mixins/color-mode" as *; @use "../../../scss/mixins/color-mode" as *;
@@ -12,7 +13,7 @@
--base05: #333; --base05: #333;
--base06: #fff; --base06: #fff;
--base07: #{$teal-700}; // #9a6700 --base07: #{$teal-700}; // #9a6700
--base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00 --base08: #{color.mix($red-500, $red-600, 50%)}; // #bc4c00
--base09: #{$cyan-700}; // #087990 --base09: #{$cyan-700}; // #087990
--base0A: #{$purple-500}; // #795da3 --base0A: #{$purple-500}; // #795da3
--base0B: #{$blue-700}; // #183691 --base0B: #{$blue-700}; // #183691

6
site/src/scss/_toc.scss
View File

@@ -5,7 +5,6 @@
// stylelint-disable selector-max-type, selector-no-qualifying-type // stylelint-disable selector-max-type, selector-no-qualifying-type
.bd-toc { .bd-toc {
font-size: .875rem;
container-type: inline-size; container-type: inline-size;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
@@ -13,12 +12,13 @@
top: 5rem; top: 5rem;
right: 0; right: 0;
z-index: 2; z-index: 2;
height: subtract(100vh, 7rem); height: calc(100vh - 7rem);
overflow-y: auto; overflow-y: auto;
} }
nav { nav {
@include font-size(.875rem); font-size: .875rem;
// @include font-size(.875rem);
ul { ul {
padding-left: 0; padding-left: 0;

62
site/src/scss/_variables.scss
View File

@@ -1,35 +1,43 @@
@use "sass:color";
@use "../../../scss/config" as *;
@use "../../../scss/colors" as *;
@use "../../../scss/functions" as *;
@use "../../../scss/mixins/color-mode" as *;
// Local docs variables // Local docs variables
$bd-purple: #4c0bce; $bd-purple: #4c0bce;
$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list $bd-violet: color.adjust(color.adjust($bd-purple, $saturation: 5%), $lightness: 15%); // stylelint-disable-line scss/at-function-named-arguments
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list $bd-purple-light: color.adjust(color.adjust($bd-purple, $saturation: 5%), $lightness: 45%); // stylelint-disable-line scss/at-function-named-arguments
$bd-accent: #ffe484; $bd-accent: #ffe484;
$bd-gutter-x: 3rem; $bd-gutter-x: 3rem;
$bd-callout-variants: info, warning, danger !default; $bd-callout-variants: info, warning, danger !default;
:root, @layer custom {
[data-bs-theme="light"] { :root {
--bd-purple: #{$bd-purple}; --bd-purple: #{$bd-purple};
--bd-violet: #{$bd-violet}; --bd-violet: #{$bd-violet};
--bd-accent: #{$bd-accent}; --bd-accent: #{$bd-accent};
--bd-violet-rgb: #{to-rgb($bd-violet)}; // --bd-violet-rgb: #{to-rgb($bd-violet)};
--bd-accent-rgb: #{to-rgb($bd-accent)}; // --bd-accent-rgb: #{to-rgb($bd-accent)};
--bd-pink-rgb: #{to-rgb($pink-500)}; // --bd-pink-rgb: #{to-rgb($pink-500)};
--bd-teal-rgb: #{to-rgb($teal-500)}; // --bd-teal-rgb: #{to-rgb($teal-500)};
--bd-violet-bg: var(--bd-violet); --bd-violet-bg: var(--bd-violet);
--bd-toc-color: var(--bd-violet); --bd-toc-color: light-dark(var(--bd-violet), var(--bs-indigo-300));
--bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1); --bd-sidebar-link-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
--bd-callout-link: #{to-rgb($blue-600)}; --bd-callout-link: #{$blue-600};
--bd-callout-code-color: #{$pink-600}; --bd-callout-code-color: light-dark(var(--bs-pink-600), var(--bs-pink-300));
--bd-pre-bg: var(--bs-tertiary-bg); --bd-pre-bg: light-dark(var(--bs-gray-100), color-mix(in srgb, var(--bs-gray-900), var(--bs-black) 25%));
} --bd-swatch-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1));
}
// @include color-mode(dark, true) { // @include color-mode(dark, true) {
// --bd-violet: #{mix($bd-violet, $white, 75%)}; // --bd-violet: #{mix($bd-violet, $white, 75%)};
// --bd-violet-bg: #{$bd-violet}; // --bd-violet-bg: #{$bd-violet};
// --bd-toc-color: var(--#{$prefix}emphasis-color); // --bd-toc-color: var(--#{$prefix}emphasis-color);
// --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5); // --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
// --bd-callout-link: #{to-rgb($blue-300)}; // --bd-callout-link: #{to-rgb($blue-300)};
// --bd-callout-code-color: #{$pink-300}; // --bd-callout-code-color: #{$pink-300};
// --bd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments // --bd-pre-bg: #{color.adjust($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
// } // }
}

26
site/src/scss/docs.scss
View File

@@ -1,5 +1,4 @@
/*! /* Bootstrap Docs (https://getbootstrap.com/)
* Bootstrap Docs (https://getbootstrap.com/)
* Copyright 2011-2025 The Bootstrap Authors * Copyright 2011-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License. * Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/. * For details, see https://creativecommons.org/licenses/by/3.0/.
@@ -23,15 +22,18 @@
// Happy Bootstrapping! // Happy Bootstrapping!
// Load Bootstrap variables and mixins // Load Bootstrap variables and mixins
@import "../../../scss/functions"; // @use "../../../scss/config";
@import "../../../scss/variables"; // @use "../../../scss/colors";
@import "../../../scss/mixins"; // @use "../../../scss/functions";
// @use "../../../scss/mixins";
// @use "../../../scss/variables";
// @use "../../../scss/layout/breakpoints";
// fusv-disable // // fusv-disable
$enable-grid-classes: false; // $enable-grid-classes: false;
$enable-cssgrid: true; // $enable-cssgrid: true;
// fusv-enable // // fusv-enable
@import "../../../scss/grid"; // @use "../../../scss/layout/";
// Load docs components // Load docs components
// @use "variables"; // @use "variables";
@@ -54,5 +56,5 @@ $enable-cssgrid: true;
@use "scrolling"; @use "scrolling";
// Load docs dependencies // Load docs dependencies
@import "syntax"; @use "syntax";
@import "anchor"; @use "anchor";

4
site/src/scss/docs_search.scss
View File

@@ -5,5 +5,5 @@
* For details, see https://creativecommons.org/licenses/by/3.0/. * For details, see https://creativecommons.org/licenses/by/3.0/.
*/ */
@use "@docsearch/css/dist/style"; @import "@docsearch/css/dist/style";
@use "search"; @import "search";