@dolanske/vui 0.3.4 → 0.5.0

package/src/style/layout.scss

@@ -1,136 +1,168 @@
-// 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%;
-  }
-}
-
-// Layout
-.flex {
-  display: flex;
-}
-
-.inline-flex {
-  display: inline-flex;
-}
-
-.block {
-  display: block;
-}
-
-.inline-block {
-  display: inline-block;
-}
-
-// Sizes
-// Paddings & margins
-.mx-auto {
-  margin-inline: auto;
-}
-
-.my-auto {
-  margin-block: auto;
-}
-
-.m-auto {
-  margin: auto;
-}
-
-// Generate layout classes from size styles
-$sizes: '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;
-  }
-}
+// 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%;
+  }
+}
+
+// Layout
+.flex {
+  display: flex;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+.x-center {
+  justify-content: center;
+}
+
+.x-start {
+  justify-content: flex-start;
+}
+
+.x-end {
+  justify-content: flex-end;
+}
+
+.y-start {
+  align-items: center;
+}
+
+.y-end {
+  align-self: flex-end;
+}
+
+.y-center {
+  align-items: center;
+}
+
+// Sizes
+// Paddings & margins
+.mx-auto {
+  margin-inline: auto;
+}
+
+.my-auto {
+  margin-block: auto;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+// Generate layout classes from size styles
+$sizes: '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;
+  }
+}

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);
+  }
+}

package/src/style/reset.scss

@@ -1,135 +1,135 @@
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol,
-ul {
-  list-style: none;
-}
-blockquote,
-q {
-  quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-button {
-  border: none;
-  background-color: unset;
-  margin: 0;
-  font-family: var(--global-font);
-}
-
-hr {
-  border: none;
-  border-bottom: 1px solid var(--color-border);
-}
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+button {
+  border: none;
+  background-color: unset;
+  margin: 0;
+  font-family: var(--global-font);
+}
+
+hr {
+  border: none;
+  border-bottom: 1px solid var(--color-border);
+}