#4820 Styling for new search

- Styles for tags and tag application in Notebook entries;
- Significant changes;

example/tags/tags.json

@@ -1,19 +1,19 @@
 {
     "tags": {
         "46a62ad1-bb86-4f88-9a17-2a029e12669d": {
-            "label": "warning",
-            "backgroundColor": "#FF0000",
-            "foregroundColor": "#FFFFFF"
+            "label": "Science",
+            "backgroundColor": "#cc0000",
+            "foregroundColor": "#ffffff"
         },
         "65f150ef-73b7-409a-b2e8-258cbd8b7323": {
-            "label": "caution",
-            "backgroundColor": "#FFA701",
-            "foregroundColor": "#FFFFFF"
+            "label": "Driving",
+            "backgroundColor": "#ffad32",
+            "foregroundColor": "#333333"
         },
         "f156b038-c605-46db-88a6-67cf2489a371": {
-            "label": "nominal",
-            "backgroundColor": "#345414",
+            "label": "Drilling",
+            "backgroundColor": "#b0ac4e",
             "foregroundColor": "#FFFFFF"
         }
     }
-}
+}

src/styles/_mixins.scss

@@ -250,6 +250,12 @@
     width: $plotSwatchD;
 }
 
+@mixin dropDownArrowBg() {
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{svgColorFromHex($colorSelectArw)}' d='M5 5l5-5H0z'/%3e%3c/svg%3e");
+    background-repeat: no-repeat, no-repeat;
+    background-position: right .4em top 80%, 0 0;
+}
+
 @mixin noColor() {
     // A "no fill/stroke" selection option. Used in palettes.
     $c: red;

src/styles/notebook.scss

@@ -272,10 +272,12 @@
     }
 
     &__content {
+        display: flex;
+        flex-direction: column;
         flex: 1 1 auto;
 
-       > [class*="__"] + [class*="__"] {
-            margin-top: $interiorMarginSm;
+       > * + * {
+            margin-top: $interiorMargin;
        }
     }
 

src/styles/vue-styles.scss

@@ -35,7 +35,7 @@
 @import "../ui/components/progress-bar.scss";
 @import "../ui/components/search.scss";
 @import "../ui/components/swim-lane/swimlane.scss";
-@import "../ui/components/tags/tags-editor.scss";
+@import "../ui/components/tags/tags.scss";
 @import "../ui/components/toggle-switch.scss";
 @import "../ui/components/timesystem-axis.scss";
 @import "../ui/components/List/list-view.scss";