Updates in Utilties

hardikforall · Nov 13, 2023 · 73bdf2b · 73bdf2b
1 parent 38000e1
commit 73bdf2b
Show file tree

Hide file tree

Showing 10 changed files with 947 additions and 287 deletions.
diff --git a/dist/minimacss.css b/dist/minimacss.css
diff --git a/dist/minimacss.css.map b/dist/minimacss.css.map
diff --git a/dist/minimacss.min.css b/dist/minimacss.min.css
diff --git a/src/base/_typography.scss b/src/base/_typography.scss
@@ -112,6 +112,10 @@ blockquote {
   background-color: var(--blockquote-bg-color);
 }
 
+blockquote p{
+margin-bottom: 0;
+}
+
 // Horizontal Rule
 hr {
   border: none;

diff --git a/src/common/_variables.scss b/src/common/_variables.scss
@@ -122,16 +122,8 @@ $breakpoints: (
   'xxl': 1400px
 );
 
-$grid-columns: 1 through 12;
-
-$grid-gaps: (
-  '0': 0,           // No gap
-  '1': 0.25rem,     // Small gap
-  '2': 0.5rem,      // Medium gap
-  '3': 1rem,        // Large gap
-  '4': 1.5rem,      // Extra Large gap
-  '5': 2rem         // XXL gap
-);
+$grid-columns-row: (1,2,3,4,5,6,7,8,9,10,11,12);
+
 
 $spacers: (
   0: 0,
@@ -165,7 +157,7 @@ $shadows: (
   'md': "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
   'lg': "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
   'xl': "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
-  '2xl': "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+  '2xl': "0 20px 25px -5px rgba(0, 0, 0, 0.25)",
   'inner': "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
   'none': "none"
 );
@@ -187,8 +179,12 @@ $sizes: (
   '13': 13rem,
   '14': 14rem,
   '15': 15rem,
+  '16': 16rem,
   '20': 20rem,
+  '18': 18rem,
   '24': 24rem,
+  '28': 28rem,
+  '32': 32rem,
   '25': 25%,
   '50': 50%,
   '75': 75%,
@@ -300,11 +296,13 @@ $displays: (
   none,
   inline,
   inline-block,
-  inline-flex,
   block,
   flex,
+  inline-flex,
   grid,
-  table
+  table,
+  table-cell,
+  table-row,
 );
 
 $object-fits: (

diff --git a/src/minimacss.scss b/src/minimacss.scss
@@ -33,6 +33,7 @@
 
 @import 'utilities/borders';
 @import 'utilities/colors';
+@import 'utilities/display';
 @import 'utilities/flexbox';
 @import 'utilities/grid';
 @import 'utilities/interactive';

diff --git a/src/utilities/_display.scss b/src/utilities/_display.scss
@@ -0,0 +1,5 @@
+@each $display in $displays {
+    .d-#{$display} {
+      display: $display !important;
+    }
+  }
diff --git a/src/utilities/_flexbox.scss b/src/utilities/_flexbox.scss
@@ -1,143 +1,171 @@
 // Flex Container Properties
 .flex {
-    display: flex !important;
-  }
-
-  .flex-inline {
-    display: inline-flex !important;
-  }
-
-  .flex-row {
-    flex-direction: row !important;
-  }
-
-  .flex-row-reverse {
-    flex-direction: row-reverse !important;
-  }
-
-  .flex-column {
-    flex-direction: column !important;
-  }
-
-  .flex-column-reverse {
-    flex-direction: column-reverse !important;
-  }
-
-  .flex-wrap {
-    flex-wrap: wrap !important;
-  }
-
-  .flex-nowrap {
-    flex-wrap: nowrap !important;
-  }
-
-  .flex-wrap-reverse {
-    flex-wrap: wrap-reverse !important;
-  }
-
-  .justify-content-start {
-    justify-content: flex-start !important;
-  }
-
-  .justify-content-end {
-    justify-content: flex-end !important;
-  }
-
-  .justify-content-center {
-    justify-content: center !important;
-  }
-
-  .justify-content-between {
-    justify-content: space-between !important;
-  }
-
-  .justify-content-around {
-    justify-content: space-around !important;
-  }
-
-  .justify-content-evenly {
-    justify-content: space-evenly !important;
-  }
-
-  .align-items-start {
-    align-items: flex-start !important;
-  }
-
-  .align-items-end {
-    align-items: flex-end !important;
-  }
-
-  .align-items-center {
-    align-items: center !important;
-  }
-
-  .align-items-baseline {
-    align-items: baseline !important;
-  }
-
-  .align-items-stretch {
-    align-items: stretch !important;
-  }
-
-  .align-content-start {
-    align-content: flex-start !important;
-  }
-
-  .align-content-end {
-    align-content: flex-end !important;
-  }
-
-  .align-content-center {
-    align-content: center !important;
-  }
-
-  .align-content-between {
-    align-content: space-between !important;
-  }
-
-  .align-content-around {
-    align-content: space-around !important;
-  }
-
-  .align-content-stretch {
-    align-content: stretch !important;
-  }
-
-  // Flex Item Properties
-  .flex-grow-0 {
-    flex-grow: 0 !important;
-  }
-
-  .flex-grow-1 {
-    flex-grow: 1 !important;
-  }
-
-  .flex-shrink-0 {
-    flex-shrink: 0 !important;
-  }
-
-  .flex-shrink-1 {
-    flex-shrink: 1 !important;
-  }
-
-  .flex-auto {
-    flex: 1 1 auto !important;
-  }
-
-  .flex-none {
-    flex: none !important;
-  }
-
-  .order-first {
-    order: -1 !important;
-  }
-  @for $i from 0 through 10 {
+  display: flex !important;
+}
+
+.flex-inline {
+  display: inline-flex !important;
+}
+
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+
+.justify-content-start {
+  justify-content: flex-start !important;
+}
+
+.justify-content-end {
+  justify-content: flex-end !important;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.justify-content-between {
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  justify-content: space-around !important;
+}
+
+.justify-content-evenly {
+  justify-content: space-evenly !important;
+}
+
+.align-items-start {
+  align-items: flex-start !important;
+}
+
+.align-items-end {
+  align-items: flex-end !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+
+.align-items-baseline {
+  align-items: baseline !important;
+}
+
+.align-items-stretch {
+  align-items: stretch !important;
+}
+
+.align-content-start {
+  align-content: flex-start !important;
+}
+
+.align-content-end {
+  align-content: flex-end !important;
+}
+
+.align-content-center {
+  align-content: center !important;
+}
+
+.align-content-between {
+  align-content: space-between !important;
+}
+
+.align-content-around {
+  align-content: space-around !important;
+}
+
+.align-content-stretch {
+  align-content: stretch !important;
+}
+
+// Align Self Utilities for Flex Items
+
+.align-self-auto {
+  align-self: auto !important;
+}
+
+.align-self-start {
+  align-self: flex-start !important;
+}
+
+.align-self-end {
+  align-self: flex-end !important;
+}
+
+.align-self-center {
+  align-self: center !important;
+}
+
+.align-self-baseline {
+  align-self: baseline !important;
+}
+
+.align-self-stretch {
+  align-self: stretch !important;
+}
+
+// Flex Item Properties
+.flex-grow-0 {
+  flex-grow: 0 !important;
+}
+
+.flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0 !important;
+}
+
+.flex-shrink-1 {
+  flex-shrink: 1 !important;
+}
+
+.flex-auto {
+  flex: 1 1 auto !important;
+}
+
+.flex-none {
+  flex: none !important;
+}
+
+
+.order-first {
+  order: -1 !important;
+}
+
+
+@for $i from 0 through 10 {
   .order-#{$i} {
     order: $i !important;
   }
 }
-
-  .order-last {
-    order: 99999 !important;
-  }
-
+
+.order-last {
+  order: 99999 !important;
+}