Give actions full height, but center them visually

stevenharman · stevenharman · commit 22449bc3f2e0 · 2018-07-19T12:51:07.000-04:00
Meaning the are larger click targets, but still centered in the box.
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -30,13 +30,13 @@
 
   /* Open Indicator */
   .v-select .open-indicator {
-    display: inline-block;
+    display: flex;
+    align-items: center;
     cursor: pointer;
     pointer-events: all;
     transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
     transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
     opacity: 1;
-    height: 16px;
     width: 12px; /* To account for extra width from rotating. */
   }
   .v-select .open-indicator:before {
@@ -60,9 +60,6 @@
   .v-select.loading .open-indicator {
     opacity: 0;
   }
-  .v-select.open .open-indicator {
-    bottom: 1px;
-  }
 
   /* Dropdown Toggle */
   .v-select .dropdown-toggle {
@@ -93,7 +90,7 @@
   }
   .v-select .v-select__actions {
     display: flex;
-    align-items: center;
+    align-items: stretch;
     padding: 0 4px 0 3px;
   }
 
@@ -268,6 +265,7 @@
   }
   /* Loading Spinner */
   .v-select .spinner {
+    align-self: center;
     opacity: 0;
     font-size: 5px;
     text-indent: -9999em;
