DEV/material-components_material-web
1
0
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2026-01-09 07:21:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): height increases when label wraps

Browse Source 
PiperOrigin-RevId: 582478806
This commit is contained in:
Elizabeth Mitchell 2023-11-14 16:40:39 -08:00 committed by Copybara-Service
parent bf8d3f6289
commit 7cd657b83d
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
button/internal/_shared.scss
View File

@ -21,8 +21,15 @@
cursor: pointer;
display: inline-flex;
gap: 8px;
height: var(--_container-height);
// min-height instead of height so that label can wrap and expand height
min-height: var(--_container-height);
outline: none;
// Add extra space between label and the edge for if the label text wraps.
// The padding added should be relative to the height of the container and
// the height of its content on a single line (label or icon, whichever is
// bigger).
$single-line-height: max(var(--_label-text-line-height), var(--_icon-size));
padding-block: calc((var(--_container-height) - $single-line-height) / 2);
padding-inline-start: var(--_leading-space);
padding-inline-end: var(--_trailing-space);
place-content: center;