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

Add small variant, and update documentation

Browse Source
This commit is contained in:
Tobias Ahlin Bjerrome 2021-04-19 17:25:09 +02:00
parent 802321a1ca
commit 6d1b94c21e
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/content/components/marketing-buttons.md
View File

@ -25,14 +25,19 @@ The solid blue and solid green buttons have more visual emphasis than the blue o
## Sizes
Available in two sizes, marketing buttons have a default size and a large size.
Available in three sizes, marketing buttons have a default size and a large size.
```html live
<button class="btn-mktg btn-sm-mktg mr-2" type="button">Learn more</button>
<button class="btn-mktg btn-primary-mktg btn-sm-mktg mr-2" type="button">Sign up</button>
<button class="btn-mktg btn-outline-mktg btn-sm-mktg mr-2" type="button">Learn more</button>
<hr>
<button class="btn-mktg mr-2" type="button">Learn more</button>
<button class="btn-mktg btn-primary-mktg mr-2" type="button">Sign up</button>
<button class="btn-mktg btn-outline-mktg mr-2" type="button">Learn more</button>
<hr>
<button class="btn-mktg btn-large-mktg mr-2" type="button">Learn more</button>
<button class="btn-mktg btn-primary-mktg btn-large-mktg mr-2" type="button">Sign up</button>
<button class="btn-mktg btn-outline-mktg btn-large-mktg mr-2" type="button">Learn more</button>
<button class="btn-mktg btn-lg-mktg mr-2" type="button">Learn more</button>
<button class="btn-mktg btn-primary-mktg btn-lg-mktg mr-2" type="button">Sign up</button>
<button class="btn-mktg btn-outline-mktg btn-lg-mktg mr-2" type="button">Learn more</button>
<hr>
```

9
src/marketing/buttons/button.scss
View File

@ -69,9 +69,14 @@
transition: box-shadow 0.4s, color 0.4s;
}
// Large
// Size modifiers
.btn-large-mktg {
.btn-sm-mktg {
// stylelint-disable-next-line primer/spacing
padding: rem(10px) rem($spacer-4) rem(12px);
}
.btn-lg-mktg {
// stylelint-disable-next-line primer/spacing
padding: 20px 30px 22px !important;
}