Changed css and looks standardized the same look across usages of tag…

…s for viewers

packages/cms/lib/modules/resource-overview-widgets/public/css/main.less

@@ -99,70 +99,59 @@ input.search {
   margin: 15px 0;
 }
 
-.resource-tag {
-  border: solid 2px #ec0000;
-}
-
-
-.resource-tag {
-  float: none !important;
-  padding: 0 20px;
-  height: 40px;
-  margin: 5px 0;
-  border-radius: 20px;
-  border: solid 2px #164995;
-  display: inline-block;
-  //height minus bordersize
-  line-height: 36px;
-  text-align: center;
-  font-size: 17px;
-  color: black;
-  font-weight: bold;
-  position: relative;
-  padding-left: 40px;
-  transition: all 200ms ease-in;
-  overflow: hidden;
+.mobile-tag-group, .tag-group {
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.mobile-tag-group a, .tag-group a {
+  color: #164995;
+  text-decoration: none;
+  padding: 0;
   margin: 0;
-
-  @media @phone {
-    float: left;
-    clear: left;
-    margin: 5px 0;
-  }
-
-  &::after {
-    content: '+';
-    position: absolute;
-    top: -1px;
-    left: 15px;
-    font-size: 22px;
-  }
-
+  transition: all 200ms ease-in;
+}
+.mobile-tag-group a:hover, .tag-group a:hover {
   &:hover, &:active {
     text-decoration: none;
     transform: scale(1.03);
   }
+}
 
-  &--selected {
-    background: #164995 ;
-    color: white ;
-    padding-right: 40px;
-    padding-left: 20px;
-
-    &::after {
-      content: '✕';
-      position: absolute;
-      top: 11px;
-      right: 15px;
-      font-size: 17px;
-      line-height: 1;
-      left: auto;
-    }
+.mobile-tag-group .tag, .tag-group .tag {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0px 8px;
+  border-radius: 2px;
+  border: 2px solid #164995;
 
-    &:hover, &:active {
+  &.large {
+    padding: 4px 12px;
+  }
+
+  &:after {
+    content:'a';
+    margin-left: 4px;
+    content: '+';
+    color: #164995;
+  }
+
+  &.selected {
+    background: #164995;
+    color: white;
+    &:after {
+      margin-left: 8px;
+      content: 'x';
       color: white;
-    }
+    } 
   }
+} 
+.tag  p {
+  margin: 0;
 }
 
 .search-wrapper button[type="submit"],.search-wrapper .search-reset {

packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/group-variants/grouped.njk

@@ -1,6 +1,8 @@
 {% for key, tagList in data.widget.groupedOpenstadTags %}
-    <div id="{{ tagGroupPrefix }}tag-group-{{ 'tags' if key === 'undefined' else key }}" class="{{ tagGroupPrefix }}tag-group">
+    <div class="tag-group-container">
         <p class="{{ tagGroupPrefix }}tag-group-title">{{ "tags" if key === 'undefined' else key }}</p>
-        {% include 'includes/controls/tag-includes/tag-buttons.njk' %}
+        <div id="{{ tagGroupPrefix }}tag-group-{{ 'tags' if key === 'undefined' else key }}" class="{{ tagGroupPrefix }}tag-group">
+            {% include 'includes/controls/tag-includes/tag-buttons.njk' %}
+        </div>
     </div>
 {% endfor %}

packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tag-includes/tag-buttons.njk

@@ -2,6 +2,16 @@
         {% if data
                 .widget
                 .isTagSelected(tag, data.query) %}
-                <a href="{{ data.widget.formatTagRemoveUrl(tag, data.query) }}" class="resource-tag resource-tag--selected openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>{% else %}
-                <a href="{{ data.widget.formatTagSelectUrl(tag, data.query) }}" class="resource-tag openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>{% endif %}
+                <a href="{{ data.widget.formatTagRemoveUrl(tag, data.query) }}" class="openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">
+                        <div class="tag selected">
+                                <p>{{ tag.name }}</p>
+                        </div>
+                </a>
+        {% else %}
+                <a href="{{ data.widget.formatTagSelectUrl(tag, data.query) }}" class="openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">
+                        <div class="tag">
+                                <p>{{ tag.name }}</p>
+                        </div>
+                </a>
+        {% endif %}
 {% endfor %}