rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 20:54:22 +01:00
Code Issues Actions Packages Releases Activity

temp, maybe revert

Browse Source
This commit is contained in:
Mark Otto 2025-02-18 09:50:23 -08:00
parent d5f24df4c6
commit fbfb6a4cea
8 changed files with 59 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
site/assets/scss/_component-examples.scss
View File

@ -137,39 +137,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 {

7
site/assets/scss/_navbar.scss
View File

@ -1,3 +1,10 @@
@use "../../../scss/config" as *;
@use "../../../scss/colors" as *;
@use "../../../scss/functions" as *;
@use "../../../scss/mixins" as *;
@use "../../../scss/variables" as *;
@use "../../../scss/layout/breakpoints" as *;
.bd-navbar { .bd-navbar {
padding: .75rem 0; padding: .75rem 0;
background-color: transparent; background-color: transparent;

4
site/assets/scss/_variables.scss
View File

@ -1,3 +1,7 @@
@use "../../../scss/config" as *;
@use "../../../scss/colors" as *;
@use "../../../scss/functions" 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: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list

19
site/assets/scss/docs.scss
View File

@ -23,15 +23,18 @@
// Happy Bootstrapping! // Happy Bootstrapping!
// Load Bootstrap variables and mixins // Load Bootstrap variables and mixins
@import "../../../scss/functions"; // @import "../../../scss/config";
@import "../../../scss/variables"; // @import "../../../scss/colors";
@import "../../../scss/mixins"; // @import "../../../scss/functions";
// @import "../../../scss/mixins";
// @import "../../../scss/variables";
// @import "../../../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"; // @import "../../../scss/layout/";
// Load docs components // Load docs components
@import "variables"; @import "variables";

5
site/assets/scss/search.scss
View File

@ -5,9 +5,12 @@
* For details, see https://creativecommons.org/licenses/by/3.0/. * For details, see https://creativecommons.org/licenses/by/3.0/.
*/ */
@import "../../../scss/config";
@import "../../../scss/colors";
@import "../../../scss/functions"; @import "../../../scss/functions";
@import "../../../scss/variables";
@import "../../../scss/mixins"; @import "../../../scss/mixins";
@import "../../../scss/variables";
@import "../../../scss/layout/breakpoints";
@import "variables"; @import "variables";
@import "@docsearch/css/dist/style"; @import "@docsearch/css/dist/style";

2
site/content/docs/5.3/customize/color.md
View File

@ -449,7 +449,7 @@ Bootstrap's source Sass files include three maps to help you quickly and easily
Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map: Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map:
{{< scss-docs name="colors-map" file="scss/_variables.scss" >}} <!-- scss-docs name="colors-map" file="scss/_variables.scss" -->
Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map. Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.

6
site/content/docs/5.3/utilities/background.md
View File

@ -94,7 +94,7 @@ In addition to the following Sass functionality, consider reading about our incl
Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables. Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
{{< scss-docs name="color-variables" file="scss/_variables.scss" >}} <!-- scss-docs name="color-variables" file="scss/_variables.scss" -->
{{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}} {{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}}
@ -102,7 +102,7 @@ Most `background-color` utilities are generated by our theme colors, reassigned
Grayscale colors are also available, but only a subset are used to generate any utilities. Grayscale colors are also available, but only a subset are used to generate any utilities.
{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}} <!-- scss-docs name="gray-color-variables" file="scss/_variables.scss" -->
Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode: Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode:
@ -118,7 +118,7 @@ Theme colors are then put into a Sass map so we can loop over them to generate o
Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**
{{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}} <!-- scss-docs name="gray-colors-map" file="scss/_variables.scss" -->
RGB colors are generated from a separate Sass map: RGB colors are generated from a separate Sass map:

6
site/content/docs/5.3/utilities/colors.md
View File

@ -94,13 +94,13 @@ In addition to the following Sass functionality, consider reading about our incl
Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables. Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables.
{{< scss-docs name="color-variables" file="scss/_variables.scss" >}} <!-- scss-docs name="color-variables" file="scss/_variables.scss" -->
{{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}} {{< scss-docs name="theme-color-variables" file="scss/_variables.scss" >}}
Grayscale colors are also available, but only a subset are used to generate any utilities. Grayscale colors are also available, but only a subset are used to generate any utilities.
{{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}} <!-- scss-docs name="gray-color-variables" file="scss/_variables.scss" -->
{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}} {{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
@ -118,7 +118,7 @@ Theme colors are then put into a Sass map so we can loop over them to generate o
Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.** Grayscale colors are also available as a Sass map. **This map is not used to generate any utilities.**
{{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}} <!-- scss-docs name="gray-colors-map" file="scss/_variables.scss" -->
RGB colors are generated from a separate Sass map: RGB colors are generated from a separate Sass map: