UI: various select-kit dropdown tweaks/cleaning (#9922)

app/assets/stylesheets/common/select-kit/combo-box.scss

@@ -44,7 +44,6 @@
       flex-direction: column;
       padding: 0;
       min-width: 100px;
-      max-height: 200px;
 
       .collection-header {
         a {

app/assets/stylesheets/common/select-kit/dropdown-select-box.scss

@@ -1,7 +1,5 @@
 .select-kit {
   &.dropdown-select-box {
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
     display: inline-flex;
     min-width: auto;
     border: none;
@@ -23,52 +21,25 @@
       margin: 0;
 
       .icons {
-        display: -webkit-box;
-        display: -ms-flexbox;
         display: flex;
-        flex: 0 0 auto;
+        margin-right: 0.5em;
-        -webkit-box-align: start;
-        -ms-flex-align: start;
-        align-items: flex-start;
-        -webkit-box-pack: center;
-        -ms-flex-pack: center;
-        justify-content: center;
-        -ms-flex-item-align: start;
-        align-self: flex-start;
-        margin-right: 0.357em;
-        margin-top: 2px;
-        width: 30px;
 
         .d-icon {
           font-size: $font-up-2;
-          -ms-flex-item-align: center;
           align-self: center;
           margin-right: 0;
-          opacity: 1;
         }
       }
 
       .texts {
-        line-height: $line-height-large;
+        line-height: $line-height-medium;
-        -webkit-box-flex: 1;
-        -ms-flex: 1;
         flex: 1 1 0%;
-        -webkit-box-align: start;
-        -ms-flex-align: start;
         align-items: flex-start;
-        display: -webkit-box;
-        display: -ms-flexbox;
         display: flex;
-        -ms-flex-wrap: wrap;
         flex-wrap: wrap;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -ms-flex-direction: column;
         flex-direction: column;
 
         .name {
-          -webkit-box-flex: 1;
-          -ms-flex: 1;
           flex: 1 1 auto;
           font-weight: bold;
           font-size: $font-0;
@@ -79,8 +50,6 @@
         }
 
         .desc {
-          -webkit-box-flex: 1;
-          -ms-flex: 1;
           flex: 1 1 auto;
           font-size: $font-down-1;
           font-weight: normal;
@@ -97,27 +66,15 @@
     }
 
     .dropdown-select-box-header {
-      -webkit-box-sizing: border-box;
-      -moz-box-sizing: border-box;
       box-sizing: border-box;
       border: 0;
-
-      -webkit-box-align: center;
-      -ms-flex-align: center;
       align-items: center;
-      -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
       justify-content: space-between;
-      -webkit-box-orient: horizontal;
-      -webkit-box-direction: normal;
-      -ms-flex-direction: row;
       flex-direction: row;
-      display: -webkit-inline-box;
-      display: -ms-inline-flexbox;
       display: inline-flex;
 
       .d-icon + .d-icon {
-        margin-left: 5px;
+        margin-left: 0.25em;
       }
 
       &.is-focused {

app/assets/stylesheets/common/select-kit/notifications-button.scss

@@ -7,8 +7,8 @@
 
       .select-kit-row {
         .icons {
-          -ms-flex-item-align: start;
           align-self: flex-start;
+          margin-right: 0.75em;
         }
       }
     }

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -190,7 +190,7 @@
     -webkit-overflow-scrolling: touch;
     margin: 0;
     padding: 0;
-    max-height: 200px;
+    max-height: 250px;
     width: 100%;
 
     .validation-message {

app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss

@@ -22,13 +22,13 @@
         }
 
         .d-icon {
-          color: $primary-high;
+          color: $primary-medium;
         }
 
         &.is-highlighted,
         &.is-selected,
         &:hover {
-          background: $primary-low;
+          background: $tertiary-low;
           color: $primary;
         }
       }

app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss

@@ -5,6 +5,10 @@
         padding: 0.75em 0.5em;
         border-bottom: 1px solid rgba($primary-low, 0.5);
 
+        .name {
+          line-height: $line-height-medium;
+        }
+
         &:last-child {
           border: none;
         }

app/assets/stylesheets/mobile/select-kit/dropdown-select-box.scss

@@ -1,8 +1,20 @@
 .select-kit {
   &.dropdown-select-box {
     .select-kit-collection {
-      max-height: 200px;
       overflow-y: auto;
     }
+
+    .select-kit-row {
+      .svg-icon-title {
+        width: auto;
+        height: auto;
+      }
+
+      .texts {
+        .name {
+          font-weight: normal;
+        }
+      }
+    }
   }
 }