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 03fe2fe1ff6915f681172eef619f3cd6d0abe768..447602965fb99b310779e2359c3fc85d0fef6985 100644 (file)
--- 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 8e4c3838d275de850eba68294440742804c454de..9ce9277f68348b75cf5bd0aec587714f8fc4d27e 100644 (file)
--- 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 c3e5629a8e3f2551725bc06ceb1c830977b37a00..b5a4cfba54dd3d2c2ba31a7c607e1dce6347a21e 100644 (file)
--- 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 177836fcd8b93cb92d13246369914fe86fad3c6b..04f2e31eea9b401854e217c13f1762d7f7e0a2eb 100644 (file)
--- 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 d0482d9b71233cb63c26c22f7a1b5f5d56b451cc..4bbbfbe0c0e679225330af5f462cc88b55cbf47c 100644 (file)
--- 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 341b5dd135e7f881d622ece4ae452bbfa95a36cc..f2d13959fe8be3d65ce3e1d782064272260c797b 100644 (file)
--- 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 ea82c625b9eb463921b9d833e7ee6bec3bd5bf2a..de5cc5e7f3be4d244f45bee28bc9a5ee1840f038 100644 (file)
--- 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 5e8ab5d6c251341ebec02326d8c92388d4e3e35a..6b6002f62d95df438d746accfffd2afeac266f75 100644 (file)
--- 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 4618e1f9a45073f613cee4f6cc1e6ca5b3c9eca9..5c8f781ee40559f63fa5b12872656dc359e370d3 100644 (file)
--- 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 03c6659ea674bb02bc4f51ac4d7050766f6dd58c..630d2d24d51f6cefa68c84effeb03df4d7223f72 100644 (file)
--- 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";