Migrate docs to Sass modules, comment out docs grid CSS

This commit is contained in:
Mark Otto 2025-03-04 12:21:00 -08:00
parent 9e28b858b5
commit b9416b7630
10 changed files with 100 additions and 55 deletions

View File

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

View File

@ -1,3 +1,7 @@
@use "../../../scss/config" as *;
@use "../../../scss/colors" as *;
@use "variables" as *;
// Buttons
//
// Custom buttons for the docs.

View File

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

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
//
@ -139,39 +147,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 {

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};
}

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 {
padding: .75rem 0;
background-color: transparent;

View File

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

View File

@ -1,3 +1,7 @@
@use "../../../scss/config" as *;
@use "../../../scss/colors" as *;
@use "../../../scss/functions" as *;
// Local docs variables
$bd-purple: #4c0bce;
$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list

View File

@ -23,36 +23,39 @@
// 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
@import "variables";
@import "navbar";
@import "masthead";
@import "ads";
@import "content";
@import "skippy";
@import "sidebar";
@import "layout";
@import "toc";
@import "footer";
@import "component-examples";
@import "buttons";
@import "callouts";
@import "brand";
@import "colors";
@import "clipboard-js";
@import "placeholder-img";
@import "scrolling";
@use "variables";
@use "navbar";
@use "masthead";
@use "ads";
@use "content";
@use "skippy";
@use "sidebar";
@use "layout";
@use "toc";
@use "footer";
@use "component-examples";
@use "buttons";
@use "callouts";
@use "brand";
@use "colors";
@use "clipboard-js";
@use "placeholder-img";
@use "scrolling";
// Load docs dependencies
@import "syntax";
@import "anchor";
@use "syntax";
@use "anchor";

View File

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