@dolanske/vui 1.0.4 → 1.1.1

package/src/style/layout.scss

@@ -1,233 +1,207 @@
-// Container layout styling
-$containers: 'xs', 's', 'm', 'l', 'xl', 'xxl';
-
-.container {
-  display: block;
-  margin-inline: auto;
-  width: 100%;
-  padding-inline: var(--space-m);
-  max-width: var(--container-l);
-
-  @each $container in $containers {
-    &.container-#{$container} {
-      max-width: var(--container-#{$container});
-    }
-  }
-
-  &.container-full {
-    max-width: 100%;
-  }
-}
-
-$widths: 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100;
-
-@each $width in $widths {
-  $extra: '%';
-  .w-#{$width} {
-    width: #{$width + $extra} !important;
-  }
-}
-
-.w-full {
-  width: 100%;
-}
-
-.w-auto {
-  width: auto;
-}
-
-// Layout
-.block {
-  display: block;
-}
-
-.inline-block {
-  display: inline-block;
-}
-
-.inline {
-  display: inline;
-}
-
-// Flex stuff
-
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.flex-row {
-  flex-direction: row;
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-.inline-flex {
-  display: inline-flex;
-}
-
-.x-center {
-  justify-content: center;
-}
-
-.x-start {
-  justify-content: flex-start;
-}
-
-.x-between {
-  justify-content: space-between;
-}
-
-.x-around {
-  justify-content: space-around;
-}
-
-.x-evenly {
-  justify-content: space-evenly;
-}
-
-.x-end {
-  justify-content: flex-end;
-}
-
-.y-start {
-  align-items: flex-start;
-}
-
-.y-end {
-  align-self: flex-end;
-}
-
-.y-center {
-  align-items: center;
-}
-
-.y-baseline {
-  align-items: baseline;
-}
-
-// Sizes
-// Paddings & margins
-.mx-auto {
-  margin-inline: auto;
-}
-
-.my-auto {
-  margin-block: auto;
-}
-
-.m-auto {
-  margin: auto;
-}
-
-// Generate layout classes from size styles
-$sizes: 0, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl';
-
-@each $size in $sizes {
-  // Margin
-  .mb-#{$size} {
-    margin-bottom: var(--space-#{$size});
-  }
-
-  .mr-#{$size} {
-    margin-right: var(--space-#{$size});
-  }
-
-  .ml-#{$size} {
-    margin-left: var(--space-#{$size});
-  }
-
-  .mt-#{$size} {
-    margin-top: var(--space-#{$size});
-  }
-
-  .mx-#{$size} {
-    margin-inline: var(--space-#{$size});
-  }
-
-  .my-#{$size} {
-    margin-block: var(--space-#{$size});
-  }
-
-  .m-#{$size} {
-    margin: var(--space-#{$size});
-  }
-
-  // Padding
-  .pb-#{$size} {
-    padding-bottom: var(--space-#{$size});
-  }
-
-  .pr-#{$size} {
-    padding-right: var(--space-#{$size});
-  }
-
-  .pl-#{$size} {
-    padding-left: var(--space-#{$size});
-  }
-
-  .pt-#{$size} {
-    padding-top: var(--space-#{$size});
-  }
-
-  .px-#{$size} {
-    padding-inline: var(--space-#{$size});
-  }
-
-  .py-#{$size} {
-    padding-block: var(--space-#{$size});
-  }
-
-  .p-#{$size} {
-    padding: var(--space-#{$size});
-  }
-
-  // Gap
-  .g-#{$size} {
-    gap: var(--space-#{$size});
-  }
-
-  .g-y-#{$size} {
-    row-gap: var(--space-#{$size});
-  }
-
-  .g-x-#{$size} {
-    column-gap: var(--space-#{$size});
-  }
-}
-
-// Z-index
-$zindexes: 0, 10, 20, 30, 40, 50, auto;
-
-@each $zindex in $zindexes {
-  .z-#{$zindex} {
-    z-index: $zindex;
-  }
-}
-
-// Grid
-
-.grid {
-  display: grid;
-}
-
-.inline-grid {
-  display: inline-table;
-}
-
-$cols: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
-
-@each $col in $cols {
-  .col-#{$col} {
-    grid-template-columns: repeat($col, 1fr);
-  }
-
-  .row {
-    grid-template-rows: repeat($col, 1fr);
-  }
-}
+// Container layout styling
+$containers: 'xs', 's', 'm', 'l', 'xl', 'xxl';
+
+.container {
+  display: block;
+  margin-inline: auto;
+  width: 100%;
+  padding-inline: var(--space-m);
+  max-width: var(--container-l);
+
+  @each $container in $containers {
+    &.container-#{$container} {
+      max-width: var(--container-#{$container});
+    }
+  }
+
+  &.container-full {
+    max-width: 100%;
+  }
+}
+
+$widths: 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100;
+
+@each $width in $widths {
+  $extra: '%';
+  .w-#{$width} {
+    width: #{$width + $extra} !important;
+  }
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-auto {
+  width: auto;
+}
+
+// Layout
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+// Flex alignment classes
+
+// Horizontal alignment (x-axis)
+.x-start {
+  justify-self: start;
+}
+
+.x-end {
+  justify-self: end;
+}
+
+.x-center {
+  justify-self: center;
+}
+
+.x-stretch {
+  justify-self: stretch;
+}
+
+// Vertical alignment (y-axis)
+.y-start {
+  align-self: start;
+}
+
+.y-end {
+  align-self: end;
+}
+
+.y-center {
+  align-self: center;
+}
+
+.y-stretch {
+  align-self: stretch;
+}
+
+// Sizes
+// Paddings & margins
+.mx-auto {
+  margin-inline: auto;
+}
+
+.my-auto {
+  margin-block: auto;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+// Generate layout classes from size styles
+$sizes: 0, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl';
+
+@each $size in $sizes {
+  // Margin
+  .mb-#{$size} {
+    margin-bottom: var(--space-#{$size});
+  }
+
+  .mr-#{$size} {
+    margin-right: var(--space-#{$size});
+  }
+
+  .ml-#{$size} {
+    margin-left: var(--space-#{$size});
+  }
+
+  .mt-#{$size} {
+    margin-top: var(--space-#{$size});
+  }
+
+  .mx-#{$size} {
+    margin-inline: var(--space-#{$size});
+  }
+
+  .my-#{$size} {
+    margin-block: var(--space-#{$size});
+  }
+
+  .m-#{$size} {
+    margin: var(--space-#{$size});
+  }
+
+  // Padding
+  .pb-#{$size} {
+    padding-bottom: var(--space-#{$size});
+  }
+
+  .pr-#{$size} {
+    padding-right: var(--space-#{$size});
+  }
+
+  .pl-#{$size} {
+    padding-left: var(--space-#{$size});
+  }
+
+  .pt-#{$size} {
+    padding-top: var(--space-#{$size});
+  }
+
+  .px-#{$size} {
+    padding-inline: var(--space-#{$size});
+  }
+
+  .py-#{$size} {
+    padding-block: var(--space-#{$size});
+  }
+
+  .p-#{$size} {
+    padding: var(--space-#{$size});
+  }
+
+  // Gap
+  // .g-#{$size} {
+  //   gap: var(--space-#{$size});
+  // }
+
+  // .g-y-#{$size} {
+  //   row-gap: var(--space-#{$size});
+  // }
+
+  // .g-x-#{$size} {
+  //   column-gap: var(--space-#{$size});
+  // }
+}
+
+// Z-index
+$zindexes: 0, 10, 20, 30, 40, 50, auto;
+
+@each $zindex in $zindexes {
+  .z-#{$zindex} {
+    z-index: $zindex;
+  }
+}
+
+// Grid
+
+// .grid {
+//   display: grid;
+// }
+
+// .inline-grid {
+//   display: inline-table;
+// }
+
+// $cols: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
+
+// @each $col in $cols {
+//   .col-#{$col} {
+//     grid-template-columns: repeat($col, 1fr);
+//   }
+
+//   .row {
+//     grid-template-rows: repeat($col, 1fr);
+//   }
+// }

package/src/style/media-query.scss

@@ -1,29 +1,29 @@
-// Mobile phones
-@media screen and (max-width: 572px) {
-  :root {
-    --space-xs: 5px;
-    --space-s: 8px;
-    --space-m: 12px;
-    --space-l: 20px;
-    --space-xl: 32px;
-    --space-xxl: 44px;
-  }
-
-  // Typography changes
-  h1 {
-    font-size: 3.2rem;
-  }
-
-  h2 {
-    font-size: 2.8rem;
-  }
-
-  h3 {
-    font-size: 2.2rem;
-  }
-
-  .vui-tabs .vui-tab {
-    font-size: var(--font-size-s);
-    padding: 0 var(--space-xs);
-  }
-}
+// Mobile phones
+@media screen and (max-width: 572px) {
+  :root {
+    --space-xs: 5px;
+    --space-s: 8px;
+    --space-m: 12px;
+    --space-l: 20px;
+    --space-xl: 32px;
+    --space-xxl: 44px;
+  }
+
+  // Typography changes
+  h1 {
+    font-size: 3.2rem;
+  }
+
+  h2 {
+    font-size: 2.8rem;
+  }
+
+  h3 {
+    font-size: 2.2rem;
+  }
+
+  .vui-tabs .vui-tab {
+    font-size: var(--font-size-s);
+    padding: 0 var(--space-xs);
+  }
+}