primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-14 23:12:03 +03:00
Code Issues Projects Releases Wiki Activity

Remove Y-padding on buttons

Browse Source 
So .Counters don't increase the height
This commit is contained in:
simurai 2020-03-01 16:40:37 +09:00
parent 9b599099bc
commit d20177758b
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/buttons/button.scss
View File

@ -5,11 +5,11 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
padding: 6px $spacer-3; padding: 0 $spacer-3;
font-size: $body-font-size; font-size: $body-font-size;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/typography // stylelint-disable-next-line primer/typography
line-height: 20px; // Specifically not inherit our `<body>` default line-height: 32px; // + 2px from borders = 34px
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
@ -270,16 +270,18 @@
// Tweak `line-height` to make them smaller. // Tweak `line-height` to make them smaller.
.btn-sm { .btn-sm {
// stylelint-disable-next-line primer/spacing // stylelint-disable-next-line primer/spacing
padding: 3px 12px; padding: 0 12px;
font-size: $font-size-small; font-size: $font-size-small;
// stylelint-disable-next-line primer/typography // stylelint-disable-next-line primer/typography
line-height: 20px; line-height: 26px;
} }
// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p> // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
.btn-large { .btn-large {
padding: $em-spacer-6 1.5em; padding: $em-spacer-6 1.5em;
font-size: inherit; font-size: inherit;
line-height: $lh-default;
// stylelint-disable-next-line primer/borders // stylelint-disable-next-line primer/borders
border-radius: 0.5em; border-radius: 0.5em;
} }