Merge pull request #38 from plotly/dropdown-cell-height

dropdown alignment with td alignment

Author: chriddyp

packages/dash-table/src/lib/components/Dropdown.css

@@ -2,10 +2,21 @@
 .dash-spreadsheet .Select-control {
     border: none;
     cursor: pointer;
-    height: 26px;
+    height: 30px;  /* matches the td height and line-height */
     border: none;
 }
 
+.dash-spreadsheet .Select-placeholder,
+.dash-spreadsheet .Select--single > .Select-control .Select-value {
+    height: 100%;
+    line-height: inherit;
+}
+
+.dash-spreadsheet .Select.has-value.Select--single > .Select-control .Select-value .Select-value-label,
+.dash-spreadsheet .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
+    color: var(--text-color);
+}
+
 .dash-spreadsheet .Select:hover,
 .dash-spreadsheet .Select-control:hover {
     border: none;

packages/dash-table/src/lib/components/Table.css

@@ -113,6 +113,12 @@ tr:hover input :not(.cell--selected) {
     box-sizing: border-box;
     color: var(--text-color);
     background-color: transparent; /* so as to not overlay the box shadow */
+
+    /* browser's default text-shadow is `$color 0px 0px 0px;`
+     * for `input`, which makes it look a little bit heavier than dropdowns
+     * or bare `td`
+     */
+    text-shadow: none;
 }
 
 .dash-spreadsheet input.unfocused {