feature: css - common styles + test

src/styles/hubl-framework/forms/widgets.scss

@@ -0,0 +1,82 @@
+solid-form-text-label>input[type='text'] + label {
+  display: block;
+}
+
+solid-form-dropdown-autocompletion,
+solid-form-dropdown-autocompletion-label,
+solid-form-multipleselect-autocompletion-label,
+hubl-status {
+
+  .ss-main {
+    font-weight: normal;
+    margin-top: 6px;
+    text-transform: none;
+  
+    .ss-single-selected {
+      background-color: #F6F6F6;
+      border: none;
+      border-radius: 0px;
+      color: var(--color-grey);
+      font-weight: normal;
+      min-height: 46px;
+      padding: 12px 14px;
+
+      .ss-disabled {
+        color: #7A7F85;
+      }
+
+      .ss-arrow {
+        font-size: 15px;
+        margin: 0 12px 0 0;
+
+        span {
+          border: solid var(--color-grey);
+          border-width: 0 2px 2px 0;
+        }
+      }
+    }
+  }
+
+  .ss-list {
+    color: var(--color-grey);
+    font-weight: normal;
+    text-transform: none;
+  }
+}
+
+solid-form-date {
+  input[type="date"] {
+    background-image: url("/images/calendar.svg");
+    background-position: right 12px top 50%;
+    background-repeat: no-repeat;
+    background-size: 1.4rem;
+    color: var(--color-input-icon);
+    cursor: default;
+    font-size: 1.4rem;
+    margin-top: 1.6rem;
+    max-width: 50vw;
+    padding-right: 3rem;
+    /* Needed to replace the close icon in FF when you are selecting a date */
+    padding-top: 1.2rem;
+    /* Needed to center the close icon in FF when you are selecting a date */
+    position: relative;
+
+    &::-webkit-calendar-picker-indicator {
+      cursor: pointer;
+      opacity: 0;
+      position: absolute;
+      right: 8px;
+    }
+
+    &::-webkit-clear-button {
+      cursor: pointer;
+      margin-bottom: 5px;
+      /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */
+      margin-right: 5px;
+    }
+
+    &::-webkit-inner-spin-button {
+      display: none;
+    }
+  }
+}