mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-05 13:17:32 +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 && (
<svg
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"
>
<use xlink:href={`#${group.icon}`} />

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

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

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

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

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

@@ -17,7 +17,7 @@
@include font-size(.8125rem);
line-height: 1.4;
text-align: left;
background-color: var(--bs-tertiary-bg);
background-color: var(--bs-bg-1);
a {
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
//

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
//
// Custom buttons for the docs.
@@ -32,7 +37,7 @@
}
.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-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
//

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

@@ -1,4 +1,5 @@
@use "sass:map";
@use "sass:string";
@use "../../../scss/config" as *;
@use "../../../scss/colors" as *;
@use "../../../scss/layout/breakpoints" as *;
@@ -25,9 +26,9 @@
line-height: 1.35;
white-space: pre;
content:
str-slice($contrast-ratio, 1, 4) "\A"
str-slice($against-white, 1, 4) "\A"
str-slice($against-black, 1, 4);
string.slice($contrast-ratio, 1, 4) "\A"
string.slice($against-white, 1, 4) "\A"
string.slice($against-black, 1, 4);
background-color: $value;
background-image:
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
//
@@ -93,13 +101,13 @@
.fixed-top,
.sticky-top {
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,
.sticky-bottom {
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);
}
// Grid mixins
.example-container {
width: 800px;
@include make-container();
}
// // Grid mixins
// .example-container {
// width: 800px;
// @include make-container();
// }
.example-row {
@include make-row();
}
// .example-row {
// @include make-row();
// }
.example-content-main {
@include make-col-ready();
// .example-content-main {
// @include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
// @include media-breakpoint-up(sm) {
// @include make-col(6);
// }
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
// @include media-breakpoint-up(lg) {
// @include make-col(8);
// }
// }
.example-content-secondary {
@include make-col-ready();
// .example-content-secondary {
// @include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
// @include media-breakpoint-up(sm) {
// @include make-col(6);
// }
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
// @include media-breakpoint-up(lg) {
// @include make-col(4);
// }
// }
// Ratio helpers
.bd-example-ratios {

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

@@ -1,3 +1,4 @@
@use "sass:color";
@use "../../../scss/colors" as *;
@use "../../../scss/variables" as *;
@use "../../../scss/vendor/rfs" as *;
@@ -117,8 +118,8 @@
}
.bd-subtitle {
@include font-size(1.5rem);
font-weight: 300;
@include font-size(1.5rem);
}
.bi {
@@ -154,16 +155,16 @@
--bs-tertiary-bg: #{$blue-600};
.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};
}
.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-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-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-focus-border-color: #{rgba($white, .5)};
--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 {
--bs-gutter-x: #{$bd-gutter-x};
}

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

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

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

@@ -1,9 +1,9 @@
@use "../../../scss/config" 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/mixins/border-radius" as *;
@use "../../../scss/mixins/color-mode" as *;
@use "../../../scss/mixins/transition" as *;
@use "../../../scss/vendor/rfs" as *;
.bd-navbar {
@@ -21,7 +21,8 @@
z-index: -1;
display: block;
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 {
@@ -85,7 +86,7 @@
border-left: 0;
@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-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);
--bs-dropdown-link-hover-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
--bs-dropdown-link-active-bg: var(--bd-violet);
@include rfs(.875rem, --bs-dropdown-font-size);
@include font-size(.875rem);
@include border-radius(.5rem);
box-shadow: $dropdown-box-shadow;
box-shadow: var(--#{$prefix}dropdown-box-shadow);
li + li {
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/mixins/color-mode" as *;
@use "../../../scss/mixins/border-radius" as *;

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

@@ -9,7 +9,7 @@
// Override collapse behaviors
// stylelint-disable-next-line declaration-no-important
display: block !important;
height: subtract(100vh, 6rem);
height: calc(100vh - 6rem);
// Prevent focus styles to be cut off:
padding-left: .25rem;
margin-left: -.25rem;
@@ -29,9 +29,9 @@
}
.bd-links-nav {
@include media-breakpoint-down(lg) {
font-size: .875rem;
}
// @include media-breakpoint-down(lg) {
// font-size: .875rem;
// }
@include media-breakpoint-between(xs, lg) {
column-count: 2;
@@ -51,6 +51,7 @@
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: 1.125rem;
font-size: .875rem;
color: var(--bs-body-color);
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 {
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/variables" as *;
@use "../../../scss/mixins/color-mode" as *;
@@ -12,7 +13,7 @@
--base05: #333;
--base06: #fff;
--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
--base0A: #{$purple-500}; // #795da3
--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
.bd-toc {
font-size: .875rem;
container-type: inline-size;
@include media-breakpoint-up(lg) {
@@ -13,12 +12,13 @@
top: 5rem;
right: 0;
z-index: 2;
height: subtract(100vh, 7rem);
height: calc(100vh - 7rem);
overflow-y: auto;
}
nav {
@include font-size(.875rem);
font-size: .875rem;
// @include font-size(.875rem);
ul {
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
$bd-purple: #4c0bce;
$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
$bd-violet: color.adjust(color.adjust($bd-purple, $saturation: 5%), $lightness: 15%); // stylelint-disable-line scss/at-function-named-arguments
$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-gutter-x: 3rem;
$bd-callout-variants: info, warning, danger !default;
:root,
[data-bs-theme="light"] {
--bd-purple: #{$bd-purple};
--bd-violet: #{$bd-violet};
--bd-accent: #{$bd-accent};
--bd-violet-rgb: #{to-rgb($bd-violet)};
--bd-accent-rgb: #{to-rgb($bd-accent)};
--bd-pink-rgb: #{to-rgb($pink-500)};
--bd-teal-rgb: #{to-rgb($teal-500)};
--bd-violet-bg: var(--bd-violet);
--bd-toc-color: var(--bd-violet);
--bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
--bd-callout-link: #{to-rgb($blue-600)};
--bd-callout-code-color: #{$pink-600};
--bd-pre-bg: var(--bs-tertiary-bg);
}
@layer custom {
:root {
--bd-purple: #{$bd-purple};
--bd-violet: #{$bd-violet};
--bd-accent: #{$bd-accent};
// --bd-violet-rgb: #{to-rgb($bd-violet)};
// --bd-accent-rgb: #{to-rgb($bd-accent)};
// --bd-pink-rgb: #{to-rgb($pink-500)};
// --bd-teal-rgb: #{to-rgb($teal-500)};
--bd-violet-bg: var(--bd-violet);
--bd-toc-color: light-dark(var(--bd-violet), var(--bs-indigo-300));
--bd-sidebar-link-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
--bd-callout-link: #{$blue-600};
--bd-callout-code-color: light-dark(var(--bs-pink-600), var(--bs-pink-300));
--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) {
// --bd-violet: #{mix($bd-violet, $white, 75%)};
// --bd-violet-bg: #{$bd-violet};
// --bd-toc-color: var(--#{$prefix}emphasis-color);
// --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
// --bd-callout-link: #{to-rgb($blue-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
// }
// @include color-mode(dark, true) {
// --bd-violet: #{mix($bd-violet, $white, 75%)};
// --bd-violet-bg: #{$bd-violet};
// --bd-toc-color: var(--#{$prefix}emphasis-color);
// --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
// --bd-callout-link: #{to-rgb($blue-300)};
// --bd-callout-code-color: #{$pink-300};
// --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
* Licensed under the Creative Commons Attribution 3.0 Unported License.
* For details, see https://creativecommons.org/licenses/by/3.0/.
@@ -23,15 +22,18 @@
// Happy Bootstrapping!
// Load Bootstrap variables and mixins
@import "../../../scss/functions";
@import "../../../scss/variables";
@import "../../../scss/mixins";
// @use "../../../scss/config";
// @use "../../../scss/colors";
// @use "../../../scss/functions";
// @use "../../../scss/mixins";
// @use "../../../scss/variables";
// @use "../../../scss/layout/breakpoints";
// fusv-disable
$enable-grid-classes: false;
$enable-cssgrid: true;
// fusv-enable
@import "../../../scss/grid";
// // fusv-disable
// $enable-grid-classes: false;
// $enable-cssgrid: true;
// // fusv-enable
// @use "../../../scss/layout/";
// Load docs components
// @use "variables";
@@ -54,5 +56,5 @@ $enable-cssgrid: true;
@use "scrolling";
// Load docs dependencies
@import "syntax";
@import "anchor";
@use "syntax";
@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/.
*/
@use "@docsearch/css/dist/style";
@use "search";
@import "@docsearch/css/dist/style";
@import "search";