Clamp select height to heightNumber (microsoft#4153)

- Fix select control padding - Set select as border-box
AvishekNath · Nov 30, 2020 · aee631c · aee631c
1 parent 6320973
commit aee631c
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/packages/web-components/fast-components/src/select/select.styles.ts b/packages/web-components/fast-components/src/select/select.styles.ts
@@ -32,8 +32,10 @@ export const SelectStyles = css`
         background: ${neutralFillInputRestBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
         border: calc(var(--outline-width) * 1px) solid ${accentFillRestBehavior.var};
+        box-sizing: border-box;
         color: ${neutralForegroundRestBehavior.var};
         contain: contents;
+        height: calc(${heightNumber} * 1px);
         position: relative;
         user-select: none;
         min-width: 250px;
@@ -69,7 +71,7 @@ export const SelectStyles = css`
         font: inherit;
         line-height: var(--type-ramp-base-line-height);
         min-height: calc(${heightNumber} * 1px);
-        padding: calc(var(--design-unit) * 2.25px);
+        padding: 0 calc(var(--design-unit) * 2.25px);
         width: 100%;
     }