Going to pull changes from dev

src/pages/tag.html

@@ -2,11 +2,14 @@
 title: Tags
 page-header: Tags
 ---
-
-<div class="tag-container">
-	<div class="tag">Label</div>
-	<div class="tag cross-icon-tag">Label <span class="icon">x</span></div>
-	<div class="tag number-tag">Label <span class="number">100</span></div>
-	<div class="tag status-tag"><span class="status-circle"></span> Label</div>
-	<div class="tag box-status-tag"><span class="box-status"></span> Label</div>
+    
+<div class="tags-list">        
+	<div class="tag">Label </div> 
+	<div class="tag">Label <span class="tag-close">{% include ui/modal/close.html %}</span></div>
+	<div class="tag">Label <span class="tag-number">100</span></div>
+	<div class="tag"><span class="badge bg-green ms-auto tag-status"></span> Label</div>
+	<div class="tag"><input class="tag-checkbox" type="checkbox" id="grid-axis-y" ng-model="ctrl.overlayGrid.vertical" ng-change="ctrl.toggleAxis('vertical', ctrl.overlayGrid.vertical)" /> Label</div>
+	<div class="tag"><span class="tag-avatar">{% include ui/avatar.html size="xs" person-id="1" %}</span>label</div>
+	<div class="tag">Label<span>{% include ui/flag.html flag="pl" %}</span>flag</div>      
 </div>
+ 
\ No newline at end of file

src/scss/_core.scss

@@ -53,6 +53,7 @@
 @import "ui/status";
 @import "ui/switch-icon";
 @import "ui/tables";
+@import "ui/tag";
 @import "ui/toasts";
 @import "ui/toolbar";
 @import "ui/tracking";
@@ -71,4 +72,3 @@
 
 @import "debug";
 
-@import "ui/tag"
\ No newline at end of file

src/scss/_variables.scss

@@ -904,11 +904,3 @@ $offcanvas-border-color: var(--#{$prefix}border-color) !default;
 // Placeholder
 $placeholder-opacity-min: 0.1 !default;
 $placeholder-opacity-max: 0.2 !default;
-
-//tags
-$tag-bg-color: #ffffff !default;
-$status-color: #008000 !default;
-$tag-gap: 8px !default;
-$tag-icon-hover-color: #ebeaea;
-$tag-status-online: green;
-$tag-status-offline: red;

src/scss/ui/_tag.scss

-.tag-container {
+.tags-list {
     display: flex;
+    justify-content: space-around;
     flex-wrap: wrap;
 
     .tag {
-        background-color: $tag-bg-color;
-        height: 23px;
-        border: 1px solid gray;
-        padding: 0 .2rem;
-        margin: 0 1rem;
-        border-radius: 5px;
-    }
-
-    .cross-icon-tag {
+        border: $border-width solid $gray-300;
         display: flex;
         align-items: center;
-        gap: $tag-gap;
-
-        .icon {
+        height: 1.5rem;
+        border-radius: $border-radius;
+        font-size: 1rem;
+        padding-left: .25rem;
+        padding-right: .25rem;
+        background: $white;
+        box-shadow: .06rem .06rem $gray-300;
+
+        .tag-close {
+            margin-left: .5rem;
             display: flex;
-            justify-content: center;
             align-items: center;
-            padding: 0;
-            margin: 0;
-            height: 16px;
-            font-size: 14px;
-            transition: .5 all;
+            height: 1rem;
+            border-radius: $border-radius;
+
 
             &:hover {
-                background-color: $tag-icon-hover-color;
-                cursor: pointer;
+                background-color: $gray-200;
             }
-        }
-    }
 
-    .number {
-        background: $tag-icon-hover-color;
-        height: 16px;
-    }
+            > :nth-child(1) {
+                height: auto;
+                max-height: .5rem;
+            }
+        }
 
-    .status-tag {
-        display: flex;
-        align-items: center;
-        gap: $tag-gap;
+        .tag-number {
+            margin-left: .5rem;
+        }
 
-        .status-circle {
 
-            height: 8px;
-            width: 8px;
-            border-radius: 50%;
-            background-color: $tag-status-online;
+        .tag-checkbox,
+        .tag-status,
+        .tag-avatar {
+            margin-right: .5rem;
         }
-    }
 
-    .box-status-tag {
-        display: flex;
-        align-items: center;
-        gap: $tag-gap;
+        .tag-avatar {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            max-height: .5rem;
 
-        .box-status {
-            height: 15px;
-            width: 16px;
-            border: 1px solid gray;
-            background-color: white;
-            border-radius: 4px;
+            img {
+                height: auto;
+                max-height: 100%;
+                max-width: 100%;
+
+            }
         }
     }
 }
\ No newline at end of file