selector styles

styles/atat.scss

@@ -33,6 +33,8 @@
 @import 'components/progress_menu.scss';
 @import 'components/search_bar';
 @import 'components/forms';
+@import 'components/selector';
+
 
 @import 'sections/login';
 @import 'sections/request_approval';

styles/components/_selector.scss

@@ -0,0 +1,54 @@
+.selector {
+  max-width: 30em;
+
+  .trigger {
+    display: block !important;
+  }
+
+  legend {
+    @include h4;
+    padding-bottom: $gap / 2;
+  }
+
+  .selector__button {
+    width: 100%;
+    height: $input-height;
+    margin: 0;
+    padding: $input-padding-vertical 0.7em;
+    line-height: $input-line-height;
+    color: $color-base;
+    font-size: $base-font-size;
+    font-weight: $font-normal;
+    text-align: left;
+    border-width: 1px;
+    border-style: solid;
+    border-color: $color-gray;
+    border-radius: 0;
+    box-sizing: border-box;
+    background-color: $color-white;
+    background-image: none, url('#{$image-path}/arrow-both.svg'), url('#{$image-path}/arrow-both.png');
+    background-position: right 1.3rem center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
+  }
+
+  .tooltip {
+    &.popover {
+      .popover-inner {
+        padding: 0;
+
+        .block-list {
+          margin: 0;
+
+          label {
+            padding: 0;
+          }
+        }
+      }
+
+      .popover-arrow {
+        background-color: $color-white;
+      }
+    }
+  }
+}

styles/elements/_block_lists.scss

@@ -106,6 +106,8 @@
       justify-content: space-between;
       &::before {
         flex-shrink: 0;
+        margin-right: 0;
+        margin-left: $gap * 2;
       }
 
       &:hover {

styles/elements/_inputs.scss

@@ -37,7 +37,8 @@
 
   input,
   textarea,
-  select {
+  select,
+  .selector__button {
     border-color: $state-color;
     border-width: $border-width;
   }
@@ -72,6 +73,10 @@
     position: relative;
     clear: both;
 
+    dd {
+      font-weight: normal;
+    }
+
     .icon-validation {
       position: absolute;
       top: 100%;
@@ -105,7 +110,8 @@
 
   input,
   textarea,
-  select {
+  select,
+  .selector__button {
     @include line-max;
     margin: 0;
     box-sizing: border-box;

styles/elements/_tooltip.scss

@@ -68,7 +68,7 @@
       background: $color;
       color: black;
       padding: 24px;
-      border-radius: 5px;
+      //border-radius: 5px;
       box-shadow: 0 5px 30px rgba(black, .1);
     }