Width Utilities 🫤

ltouroumov · Jul 4, 2024 · fc15b00 · fc15b00
1 parent 384e5c9
commit fc15b00
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/assets/css/bootstrap/_config.scss b/assets/css/bootstrap/_config.scss
@@ -1,4 +1,5 @@
 @import "bootstrap/scss/mixins/banner";
+
 @include bsBanner("");
 
 // Configuration
@@ -9,8 +10,14 @@
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
 
-// Helpers
-@import "bootstrap/scss/helpers";
+$widths: map-merge(
+    map-get(map-get($utilities, "width"), "values"),
+    (20: 20%, 14: 14%, 12: 12%, 11: 11%, 10: 10%, 9: 9%)
+);
 
 // Utilities
-@import "bootstrap/scss/utilities/api";
+@import "utils/width";
+@import "bootstrap/scss/utilities/api";
+
+// Helpers
+@import "bootstrap/scss/helpers";
diff --git a/assets/css/bootstrap/global.scss b/assets/css/bootstrap/global.scss
@@ -3,4 +3,4 @@
 
 body {
   background: $body-bg-dark;
-}
+}
diff --git a/assets/css/bootstrap/utils/_width.scss b/assets/css/bootstrap/utils/_width.scss
@@ -0,0 +1,6 @@
+@each $width, $size in $widths {
+  .w-#{$width} {
+    flex: 0 0 $size !important;
+    max-width: $size !important;
+  }
+}
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -3,6 +3,3 @@
     <slot />
   </div>
 </template>
-<script setup lang="ts"></script>
-
-<style lang="scss"></style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,4 +3,4 @@ @@
     body {
       background: $body-bg-dark;
-    }
+    }