@kizmann/nano-ui 0.8.8 → 0.8.10

package/src/tags/src/tags-item/tags-item.scss

@@ -0,0 +1,55 @@
+@import "../../../root/vars";
+
+.n-tags-item {
+    overflow: hidden;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    max-width: 160px;
+    border-radius: $sm-radius;
+    background: $color-gray-10;
+}
+
+.n-tags-item i {
+    flex: 0 0 auto;
+    color: $color-gray-40;
+    text-align: center;
+}
+
+.n-tags-item span {
+    overflow: hidden;
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex: 1 1 auto;
+}
+
+@each $suffix, $values in $form {
+
+    $-tags-item-font: map-get($values, 'font');
+    $-tags-item-size: map-get($values, 'size');
+    $-tags-item-radius: map-get($values, 'radius');
+    $-tags-item-ratio: map-get($values, 'ratio');
+
+    .n-tags-item--#{$suffix} {
+        padding: 0 $-tags-item-size * 0.3 0 $-tags-item-size * 0.3;
+    }
+
+    .n-tags-item--#{$suffix} i,
+    .n-tags-item--#{$suffix} span {
+        height:  $-tags-item-size * 0.8;
+        line-height:  $-tags-item-size * 0.8;
+    }
+
+    .n-tags-item--#{$suffix} i {
+        height:  $-tags-item-size * 0.8;
+        margin-right: $-tags-item-size * 0.2;
+        font-size: $-tags-item-font - 2;
+    }
+
+    .n-tags-item--#{$suffix} span {
+        font-size: $-tags-item-font - 1;
+        margin-left: 2px;
+    }
+}

package/themes/light/index.scss

@@ -26,6 +26,7 @@
 @import "./table/index";
 @import "./paginator/index";
 @import "./tabs/index";
+@import "./tags/index";
 @import "./collapse/index";
 @import "./info/index";
 @import "./map/index";

package/themes/light/root/vars.scss

@@ -158,3 +158,26 @@ $colors: (
                 'dark': $color-danger-dark
         ),
 ) !default;
+
+$colors-tags: (
+        '0': mix($color-secondary, $color-secondary, 65%),
+        '1': mix($color-primary, $color-secondary, 65%),
+        '2': mix($color-danger, $color-secondary, 65%),
+        '3': mix($color-success, $color-secondary, 65%),
+        '4': mix($color-warning, $color-secondary, 65%),
+        '5': mix($color-primary, $color-success, 65%),
+        '6': mix($color-secondary, $color-success, 65%),
+        '7': mix($color-danger, $color-success, 65%),
+        '8': mix($color-success, $color-success, 65%),
+        '9': mix($color-warning, $color-success, 65%),
+        '10': mix($color-primary, $color-danger, 65%),
+        '11': mix($color-secondary, $color-danger, 65%),
+        '12': mix($color-danger, $color-danger, 65%),
+        '13': mix($color-success, $color-danger, 65%),
+        '14': mix($color-warning, $color-danger, 65%),
+        '15': mix($color-primary, $color-warning, 65%),
+        '16': mix($color-secondary, $color-warning, 65%),
+        '17': mix($color-danger, $color-warning, 65%),
+        '18': mix($color-success, $color-warning, 65%),
+        '19': mix($color-warning, $color-warning, 65%),
+) !default;

package/themes/light/tags/index.scss

@@ -0,0 +1,2 @@
+@import "./src/tags/tags";
+@import "./src/tags-item/tags-item";

package/themes/light/tags/src/tags/tags.scss

@@ -0,0 +1 @@
+@import "../../../root/vars";

package/themes/light/tags/src/tags-item/tags-item.scss

@@ -0,0 +1,12 @@
+@import "../../../root/vars";
+
+@each $-tags-index, $-tags-color in $colors-tags {
+
+    .n-tags-item--color-#{$-tags-index} {
+        background: rgba($-tags-color, 0.15);
+    }
+    .n-tags-item--color-#{$-tags-index} i {
+        color: rgba($-tags-color, 0.75);
+    }
+
+}