@dolanske/vui 0.3.4 → 0.5.0

package/src/style/{fonts.scss → text.scss}

@@ -1,53 +1,74 @@
-$sizes: 'xxs', 'xs', 's', 'ms', 'm', 'l', 'xl', 'xxl', 'xxxl', 'xxxxl';
-
-@each $size in $sizes {
-  .text-#{$size} {
-    font-size: var(--font-size-#{$size});
-  }
-}
-
-.text-color {
-  color: var(--color-text);
-}
-
-.text-color-accent {
-  color: var(--color-accent);
-}
-
-$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;
-}
+$sizes: 'xxs', 'xs', 's', 'ms', 'm', 'l', 'xl', 'xxl', 'xxxl', 'xxxxl';
+
+@each $size in $sizes {
+  .text-#{$size} {
+    font-size: var(--font-size-#{$size});
+  }
+}
+
+.text-color {
+  color: var(--color-text);
+}
+
+.text-color-accent {
+  color: var(--color-accent);
+}
+
+$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;
+  }
+}

package/src/style/tooltip.scss

@@ -1,128 +1,128 @@
-/*
-This is a trick in which you can add simply tooltips to an element without any additional html.
-Simple add data-title-_position_="Hello world" and hover the element.
-
-Available tooltip positions:
-*/
-
-[data-title-left],
-[data-title-right],
-[data-title-bottom],
-[data-title-bottom-left],
-[data-title-bottom-right],
-[data-title-top],
-[data-title-top-left],
-[data-title-top-right] {
-  position: relative;
-
-  &:before {
-    font-family: var(--global-font);
-    font-weight: 400;
-    background-color: var(--color-bg-raised);
-    color: var(--color-text);
-
-    font-size: var(--font-size-ms);
-    position: absolute;
-    padding: 4px 8px;
-    line-height: 1.3em;
-    border-radius: var(--border-radius-m);
-    transition: var(--transition);
-
-    max-width: 512px;
-    opacity: 0;
-    cursor: default;
-    z-index: -1;
-    visibility: hidden;
-    pointer-events: none;
-  }
-
-  &:hover {
-    &:before {
-      visibility: visible;
-      opacity: 1;
-      z-index: 99999;
-    }
-  }
-}
-
-[data-title-left]:before {
-  content: attr(data-title-left);
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 99999;
-  right: calc(100% + 4px);
-}
-
-[data-title-right]:before {
-  content: attr(data-title-right);
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 99999;
-  left: calc(100% + 4px);
-}
-
-[data-title-bottom]:before,
-[data-title-bottom-left]:before,
-[data-title-bottom-right]:before {
-  content: attr(data-title-bottom);
-  top: calc(100% + 4px);
-  transform: translateX(-50%);
-  left: 50%;
-}
-
-[data-title-bottom-left]:before {
-  content: attr(data-title-bottom-left);
-  transform: unset;
-  left: 0;
-}
-
-[data-title-bottom-right]:before {
-  content: attr(data-title-bottom-right);
-  transform: unset;
-  left: unset;
-  right: 0;
-}
-
-[data-title-top]:before,
-[data-title-top-left]:before,
-[data-title-top-right]:before {
-  content: attr(data-title-top);
-  bottom: calc(100% + 4px);
-  transform: translateX(-50%);
-  left: 50%;
-}
-
-[data-title-top-left]:before {
-  content: attr(data-title-top-left);
-  transform: unset;
-  left: 0;
-}
-
-[data-title-top-right]:before {
-  content: attr(data-title-top-right);
-  transform: unset;
-  left: unset;
-  right: 0;
-}
-
-// Hover
-
-[data-title-left]:hover:before {
-  right: calc(100% + 10px);
-}
-
-[data-title-right]:hover:before {
-  left: calc(100% + 10px);
-}
-
-[data-title-top]:hover:before,
-[data-title-top-left]:hover:before,
-[data-title-top-right]:hover:before {
-  bottom: calc(100% + 10px);
-}
-
-[data-title-bottom]:hover:before,
-[data-title-bottom-left]:hover:before,
-[data-title-bottom-right]:hover:before {
-  top: calc(100% + 10px);
-}
+/*
+This is a trick in which you can add simply tooltips to an element without any additional html.
+Simple add data-title-_position_="Hello world" and hover the element.
+
+Available tooltip positions:
+*/
+
+[data-title-left],
+[data-title-right],
+[data-title-bottom],
+[data-title-bottom-left],
+[data-title-bottom-right],
+[data-title-top],
+[data-title-top-left],
+[data-title-top-right] {
+  position: relative;
+
+  &:before {
+    font-family: var(--global-font);
+    font-weight: 400;
+    background-color: var(--color-bg-raised);
+    color: var(--color-text);
+
+    font-size: var(--font-size-ms);
+    position: absolute;
+    padding: 4px 8px;
+    line-height: 1.3em;
+    border-radius: var(--border-radius-m);
+    transition: var(--transition);
+
+    max-width: 512px;
+    opacity: 0;
+    cursor: default;
+    z-index: -1;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &:hover {
+    &:before {
+      visibility: visible;
+      opacity: 1;
+      z-index: 99999;
+    }
+  }
+}
+
+[data-title-left]:before {
+  content: attr(data-title-left);
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 99999;
+  right: calc(100% + 4px);
+}
+
+[data-title-right]:before {
+  content: attr(data-title-right);
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 99999;
+  left: calc(100% + 4px);
+}
+
+[data-title-bottom]:before,
+[data-title-bottom-left]:before,
+[data-title-bottom-right]:before {
+  content: attr(data-title-bottom);
+  top: calc(100% + 4px);
+  transform: translateX(-50%);
+  left: 50%;
+}
+
+[data-title-bottom-left]:before {
+  content: attr(data-title-bottom-left);
+  transform: unset;
+  left: 0;
+}
+
+[data-title-bottom-right]:before {
+  content: attr(data-title-bottom-right);
+  transform: unset;
+  left: unset;
+  right: 0;
+}
+
+[data-title-top]:before,
+[data-title-top-left]:before,
+[data-title-top-right]:before {
+  content: attr(data-title-top);
+  bottom: calc(100% + 4px);
+  transform: translateX(-50%);
+  left: 50%;
+}
+
+[data-title-top-left]:before {
+  content: attr(data-title-top-left);
+  transform: unset;
+  left: 0;
+}
+
+[data-title-top-right]:before {
+  content: attr(data-title-top-right);
+  transform: unset;
+  left: unset;
+  right: 0;
+}
+
+// Hover
+
+[data-title-left]:hover:before {
+  right: calc(100% + 10px);
+}
+
+[data-title-right]:hover:before {
+  left: calc(100% + 10px);
+}
+
+[data-title-top]:hover:before,
+[data-title-top-left]:hover:before,
+[data-title-top-right]:hover:before {
+  bottom: calc(100% + 10px);
+}
+
+[data-title-bottom]:hover:before,
+[data-title-bottom-left]:hover:before,
+[data-title-bottom-right]:hover:before {
+  top: calc(100% + 10px);
+}