@dolanske/vui 1.0.4 → 1.1.0

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

package/src/style/text.scss

@@ -1,124 +1,137 @@
-$sizes: 'xxs', 'xs', 's', 'ms', 'm', 'l', 'xl', 'xxl', 'xxxl', 'xxxxl';
-
-@each $size in $sizes {
-  .text-#{$size} {
-    font-size: var(--font-size-#{$size});
-  }
-}
-
-$colors: 'light', 'lighter', 'lightest', 'red', 'green', 'yellow', 'blue';
-
-@each $color in $colors {
-  .text-color-#{$color} {
-    color: var(--color-text-#{$color});
-  }
-}
-
-// Font weights
-
-.text-light {
-  font-weight: 300;
-}
-
-.text-regular {
-  font-weight: 400;
-}
-
-.text-medium {
-  font-weight: 500;
-}
-
-.text-semibold {
-  font-weight: 600;
-}
-
-.text-bold {
-  font-weight: 700;
-}
-
-.text-extra-bold {
-  font-weight: 800;
-}
-
-.text-black {
-  font-weight: 900;
-}
-
-// Line truncating
-
-.text-overflow {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-$lines: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
-
-@each $line in $lines {
-  .text-overflow-#{$line} {
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-clamp: $line;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: $line;
-  }
-}
-
-// White space
-
-.ws-wrap {
-  white-space: wrap;
-}
-
-.ws-pre {
-  white-space: pre;
-}
-
-.ws-prewrap {
-  white-space: pre-wrap;
-}
-
-.ws-nowrap {
-  white-space: nowrap;
-}
-
-.color-text {
-  color: var(--color-text);
-}
-
-.color-text-light {
-  color: var(--color-text-light);
-}
-
-.color-text-lighter {
-  color: var(--color-text-lighter);
-}
-
-.color-text-lightest {
-  color: var(--color-text-lightest);
-}
-
-.color-text-invert {
-  color: var(--color-text-invert);
-}
-
-.color-text-red {
-  color: var(--color-text-red);
-}
-
-.color-text-green {
-  color: var(--color-text-green);
-}
-
-.color-text-yellow {
-  color: var(--color-text-yellow);
-}
-
-.color-text-blue {
-  color: var(--color-text-blue);
-}
-
-.color-accent {
-  color: var(--color-accent);
-}
+$sizes: 'xxs', 'xs', 's', 'ms', 'm', 'l', 'xl', 'xxl', 'xxxl', 'xxxxl';
+
+@each $size in $sizes {
+  .text-#{$size} {
+    font-size: var(--font-size-#{$size});
+  }
+}
+
+$colors: 'light', 'lighter', 'lightest', 'red', 'green', 'yellow', 'blue';
+
+@each $color in $colors {
+  .text-color-#{$color} {
+    color: var(--color-text-#{$color});
+  }
+}
+
+// Font weights
+
+.text-light {
+  font-weight: 300;
+}
+
+.text-regular {
+  font-weight: 400;
+}
+
+.text-medium {
+  font-weight: 500;
+}
+
+.text-semibold {
+  font-weight: 600;
+}
+
+.text-bold {
+  font-weight: 700;
+}
+
+.text-extra-bold {
+  font-weight: 800;
+}
+
+.text-black {
+  font-weight: 900;
+}
+
+// Text align
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+// Line truncating
+
+.text-overflow {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+$lines: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
+
+@each $line in $lines {
+  .text-overflow-#{$line} {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-clamp: $line;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $line;
+  }
+}
+
+// White space
+
+.ws-wrap {
+  white-space: wrap;
+}
+
+.ws-pre {
+  white-space: pre;
+}
+
+.ws-prewrap {
+  white-space: pre-wrap;
+}
+
+.ws-nowrap {
+  white-space: nowrap;
+}
+
+.color-text {
+  color: var(--color-text);
+}
+
+.color-text-light {
+  color: var(--color-text-light);
+}
+
+.color-text-lighter {
+  color: var(--color-text-lighter);
+}
+
+.color-text-lightest {
+  color: var(--color-text-lightest);
+}
+
+.color-text-invert {
+  color: var(--color-text-invert);
+}
+
+.color-text-red {
+  color: var(--color-text-red);
+}
+
+.color-text-green {
+  color: var(--color-text-green);
+}
+
+.color-text-yellow {
+  color: var(--color-text-yellow);
+}
+
+.color-text-blue {
+  color: var(--color-text-blue);
+}
+
+.color-accent {
+  color: var(--color-accent);
+}