From: Mark Otto <markdotto@gmail.com>
Date: Tue, 4 Mar 2025 20:21:00 +0000 (-0800)
Subject: Migrate docs to Sass modules, comment out docs grid CSS
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=769d539f22dc0d5956e7e767103bd919e2c70ce9;p=thirdparty%2Fbootstrap.git

Migrate docs to Sass modules, comment out docs grid CSS
---

diff --git a/site/src/scss/_brand.scss b/site/src/scss/_brand.scss
index 03fe2fe1ff..447602965f 100644
--- a/site/src/scss/_brand.scss
+++ b/site/src/scss/_brand.scss
@@ -1,3 +1,8 @@
+@use "../../../scss/config" as *;
+@use "../../../scss/colors" as *;
+@use "../../../scss/layout/breakpoints" as *;
+@use "variables" as *;
+
 //
 // Brand guidelines
 //
diff --git a/site/src/scss/_buttons.scss b/site/src/scss/_buttons.scss
index 8e4c3838d2..9ce9277f68 100644
--- a/site/src/scss/_buttons.scss
+++ b/site/src/scss/_buttons.scss
@@ -1,3 +1,7 @@
+@use "../../../scss/config" as *;
+@use "../../../scss/colors" as *;
+@use "variables" as *;
+
 // Buttons
 //
 // Custom buttons for the docs.
diff --git a/site/src/scss/_callouts.scss b/site/src/scss/_callouts.scss
index c3e5629a8e..b5a4cfba54 100644
--- a/site/src/scss/_callouts.scss
+++ b/site/src/scss/_callouts.scss
@@ -1,3 +1,7 @@
+@use "../../../scss/config" as *;
+@use "../../../scss/colors" as *;
+@use "variables" as *;
+
 //
 // Callouts
 //
diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index 177836fcd8..04f2e31eea 100644
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -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
 //
@@ -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 {
diff --git a/site/src/scss/_layout.scss b/site/src/scss/_layout.scss
index d0482d9b71..4bbbfbe0c0 100644
--- a/site/src/scss/_layout.scss
+++ b/site/src/scss/_layout.scss
@@ -1,3 +1,7 @@
+@use "../../../scss/config" as *;
+@use "../../../scss/layout/breakpoints" as *;
+@use "variables" as *;
+
 .bd-gutter {
   --bs-gutter-x: #{$bd-gutter-x};
 }
diff --git a/site/src/scss/_navbar.scss b/site/src/scss/_navbar.scss
index 341b5dd135..f2d13959fe 100644
--- a/site/src/scss/_navbar.scss
+++ b/site/src/scss/_navbar.scss
@@ -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;
diff --git a/site/src/scss/_skippy.scss b/site/src/scss/_skippy.scss
index ea82c625b9..de5cc5e7f3 100644
--- a/site/src/scss/_skippy.scss
+++ b/site/src/scss/_skippy.scss
@@ -1,3 +1,6 @@
+@use "../../../scss/colors" as *;
+@use "variables" as *;
+
 .skippy {
   background-color: $bd-purple;
 
diff --git a/site/src/scss/_variables.scss b/site/src/scss/_variables.scss
index 5e8ab5d6c2..6b6002f62d 100644
--- a/site/src/scss/_variables.scss
+++ b/site/src/scss/_variables.scss
@@ -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
diff --git a/site/src/scss/docs.scss b/site/src/scss/docs.scss
index 4618e1f9a4..5c8f781ee4 100644
--- a/site/src/scss/docs.scss
+++ b/site/src/scss/docs.scss
@@ -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";
diff --git a/site/src/scss/docs_search.scss b/site/src/scss/docs_search.scss
index 03c6659ea6..630d2d24d5 100644
--- a/site/src/scss/docs_search.scss
+++ b/site/src/scss/docs_search.scss
@@ -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";