Fix sizing

LinwoodDev · Feb 18, 2024 · c6494cd · c6494cd
1 parent 9b5f2c4
commit c6494cd
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 24 deletions.
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -2,7 +2,7 @@
   "name": "@linwooddev/style",
   "description": "",
   "main": "index.js",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "sass --watch scss/:css/",

diff --git a/packages/web/scss/_layout.scss b/packages/web/scss/_layout.scss
@@ -12,13 +12,20 @@
   }
 }
 
-@each $breakpoint, $value in vars.$breakpoints {
-  .w-#{$breakpoint} {
-    width: $value;
-  }
-  .h-#{$breakpoint} {
-    height: $value;
-  }
+.col {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 .full {
@@ -44,6 +51,14 @@
   }
 }
 
+@each $breakpoint, $value in vars.$sizing {
+  .w-#{$breakpoint} {
+    width: $value;
+  }
+  .h-#{$breakpoint} {
+    height: $value;
+  }
+}
 
 @each $breakpoint, $value in vars.$spacing {
   .gap-#{$breakpoint} {
@@ -97,22 +112,6 @@
   }
 }
 
-.col {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.row {
-  display: flex;
-  flex-direction: row;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
 .wrap {
   flex-wrap: wrap;
 }

diff --git a/packages/web/scss/_vars.scss b/packages/web/scss/_vars.scss
@@ -8,6 +8,13 @@ $breakpoints: (
   'lg': 1200px,
   'xl': 1400px,
 ) !default;
+$sizing: (
+  'xs': 100px,
+  'sm': 200px,
+  'md': 300px,
+  'lg': 400px,
+  'xl': 500px,
+) !default;
 $mobile-breakpoint: map-get($breakpoints, 'sm') !default;
 $spacing: (
   'xs': 6px,