add styles for list box components

Author: Mat Jones

src/assets/scss/6-components/molecules/__molecules.scss

@@ -2,9 +2,11 @@
   MOLECULES
 \*------------------------------------*/
 @import "card";
+@import "drag-and-drop-list-box";
 @import "dropdown-button";
 @import "error-banner";
 @import "form-fields";
 @import "forms";
+@import "list-box";
 @import "radio-list";
 @import "tooltip";

src/assets/scss/6-components/molecules/_drag-and-drop-list-box.scss

@@ -0,0 +1,41 @@
+.c-drag-and-drop-list-box {
+    &.-dragging-container {
+        .c-button {
+            display: none !important;
+        }
+    }
+
+    .c-list-box__item {
+        &.-dragging {
+            @include box-shadow(0px, 7px, 20px, get-color-neutral("30"));
+            background-color: get-color-neutral("05");
+            border-radius: $border-radius-small;
+            border: 1px solid get-color-neutral("30");
+
+            .c-button {
+                display: none;
+            }
+
+            .-drag-handle {
+                @include icon-fill(get-color-neutral("70"));
+            }
+        }
+
+        &:hover {
+            .-drag-handle {
+                @include icon-fill(get-color-neutral("70"));
+            }
+        }
+
+        .-drag-handle {
+            @include icon-fill(get-color-neutral("50"));
+            @include margin-left(-12px);
+            @include margin-right(8px);
+            white-space: nowrap;
+
+            svg {
+                margin-top: 50%;
+            }
+        }
+    }
+}

src/assets/scss/6-components/molecules/_list-box.scss

@@ -0,0 +1,52 @@
+.c-list-box {
+    background-color: get-color-neutral("05");
+    border-radius: $border-radius-small;
+    border: 1px solid get-color-neutral("30");
+
+    &.-empty {
+        background-color: get-color-neutral("white");
+
+        p {
+            @include padding(16px);
+            text-align: center;
+        }
+    }
+
+    &__item {
+        @include padding(20px, 15px, 15px, 20px);
+        display: flex;
+        border-bottom: 1px solid get-color-neutral("30");
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        &__label {
+            @include margin-top(4px);
+            min-width: 12%;
+            width: 12%;
+            white-space: nowrap;
+
+            @include respond-to("tablet") {
+                @include margin-right(8px);
+            }
+        }
+
+        &__text {
+            flex-grow: 1;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            a {
+                @include margin-bottom(8px);
+                text-decoration: none;
+            }
+        }
+
+        &__action {
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+    }
+}