Criação de arquivo breakpoints para adaptação da aplicação em diferen…

…tes telas (#74) * create breakpoints.scss * Update prepare-commit-msg --------- Co-authored-by: Alexandre Gomes <alecell.dev@gmail.com>
devhatt · Feb 21, 2024 · d8605c1 · d8605c1
1 parent 947d574
commit d8605c1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/.husky/prepare-commit-msg b/.husky/prepare-commit-msg
diff --git a/src/styles/breakpoints.scss b/src/styles/breakpoints.scss
@@ -1,7 +1,35 @@
-$from1024SizeMin: 1024px;
+$extraSmallDeviceSizeMin: 20em;
+$smallDeviceSizeMin: 22.5em;
+$mediumDeviceSizeMin: 41.6875em;
+$largeDeviceSizeMin: 64em;
+$largestDeviceSizeMin: 80em;
 
-@mixin from1024() {
-  @media (min-width: #{$from1024SizeMin}) {
+@mixin from320 {
+  @media (min-width: $extraSmallDeviceSizeMin) {
+    @content;
+  }
+}
+
+@mixin from360 {
+  @media (min-width: $smallDeviceSizeMin) {
+    @content;
+  }
+}
+
+@mixin from667 {
+  @media (min-width: $mediumDeviceSizeMin) {
+    @content;
+  }
+}
+
+@mixin from1024 {
+  @media (min-width: $largeDeviceSizeMin) {
+    @content;
+  }
+}
+
+@mixin from1280 {
+  @media (min-width: $largestDeviceSizeMin) {
     @content;
   }
 }