steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Color "skins" (#1242)

Browse Source 
* Add YIQ Color Contrast mixin
* Remove text underline from `.btn` links
* Move YIQ variables
* Simplify button classes using YIQ color contrast mixin
  - DRY up button CSS using Sass list and YIQ color contrast mixin.
  - Move `color` and `background-color` to new `btn--primary` class instead of assinging on the default class. Removes the need to override them.
* Add `.btn--primary` to buttons that just had `.btn`
* Apply changes to `/docs`
* Add `.btn--primary` class
* Update CHANGELOG and history
* Add sample form
* Abstract colors away into Sass variables for easier themeing
* Add "dark" skin
* Replace hardcoded color with SCSS variable
* Invert Font Awesome icons' colors in author sidebar and footer
* Add Sass changes to `/docs`
* Use primary button type instead of inverse
* Add missing `!default` on `$muted-text-color`
* Add `contrast` and `sunrise` skin colors
* Add `dirt` skin color
* Add `air` skin color option
* Add `mint` skin color
* Add `btn--primary` class to Submit Comment button
* Set skin to `default`
* Document skin color options
* Add note about skin SCSS import

Close #1208
This commit is contained in:
Michael Rose
2017-09-12 12:01:43 -04:00
committed by GitHub
parent d67aa113c8
commit 93c4fbc4b9
86 changed files with 1395 additions and 985 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docs/_docs/15-utility-classes.md
View File

@ -2,7 +2,7 @@
title: "Utility Classes"
permalink: /docs/utility-classes/
excerpt: "CSS classes for aligning text/image, styling buttons and notices, and more."
last_modified_at: 2016-11-03T11:32:25-04:00
last_modified_at: 2017-09-01T11:54:44-04:00
---
{% include toc icon="gears" title="Utility Classes" %}
@ -108,15 +108,16 @@ The image above should extend outside of the parent container on right.
## Buttons
Make any link standout more when applying the `.btn` class.
Make any link standout more when applying the `.btn .btn--primary` classes.
```html
<a href="#" class="btn">Link Text</a>
<a href="#" class="btn btn--primary">Link Text</a>
```
| Button Type | Example | Class | Kramdown |
| ------ | ------- | ----- | ------- |
| Default | [Text](#link){: .btn} | `.btn` | `[Text](#link){: .btn}` |
| Primary | [Text](#link){: .btn .btn--primary} | `.btn .btn--primary` | `[Text](#link){: .btn .btn--primary}` |
| Success | [Text](#link){: .btn .btn--success} | `.btn .btn--success` | `[Text](#link){: .btn .btn--success}` |
| Warning | [Text](#link){: .btn .btn--warning} | `.btn .btn--warning` | `[Text](#link){: .btn .btn--warning}` |
| Danger | [Text](#link){: .btn .btn--danger} | `.btn .btn--danger` | `[Text](#link){: .btn .btn--danger}` |
@ -126,10 +127,10 @@ Make any link standout more when applying the `.btn` class.
| Button Size | Example | Class | Kramdown |
| ----------- | ------- | ----- | -------- |
| X-Large | [X-Large Button](#){: .btn .btn--x-large} | `.btn .btn--x-large` | `[Text](#link){: .btn .btn--x-large}` |
| Large | [Large Button](#){: .btn .btn--large} | `.btn .btn--large` | `[Text](#link){: .btn .btn--large}` |
| Default | [Default Button](#){: .btn} | `.btn` | `[Text](#link){: .btn}` |
| Small | [Small Button](#){: .btn .btn--small} | `.btn .btn--small` | `[Text](#link){: .btn .btn--small}` |
| X-Large | [X-Large Button](#){: .btn .btn--primary .btn--x-large} | `.btn .btn--primary .btn--x-large` | `[Text](#link){: .btn .btn--primary .btn--x-large}` |
| Large | [Large Button](#){: .btn .btn--primary .btn--large} | `.btn .btn--primary .btn--large` | `[Text](#link){: .btn .btn--primary .btn--large}` |
| Default | [Default Button](#){: .btn .btn--primary} | `.btn .btn--primary` | `[Text](#link){: .btn .btn--primary }` |
| Small | [Small Button](#){: .btn .btn--primary .btn--small} | `.btn .btn--primary .btn--small` | `[Text](#link){: .btn .btn--primary .btn--small}` |
## Notices
@ -144,22 +145,22 @@ Call attention to a block of text.
| Success | `.notice--success` |
| Danger | `.notice--danger` |
**Watch out!** This paragraph of text has been emphasized with the `{: .notice}` class.
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice}` class.
{: .notice}
**Watch out!** This paragraph of text has been emphasized with the `{: .notice--primary}` class.
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--primary}` class.
{: .notice--primary}
**Watch out!** This paragraph of text has been emphasized with the `{: .notice--info}` class.
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--info}` class.
{: .notice--info}
**Watch out!** This paragraph of text has been emphasized with the `{: .notice--warning}` class.
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--warning}` class.
{: .notice--warning}
**Watch out!** This paragraph of text has been emphasized with the `{: .notice--success}` class.
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--success}` class.
{: .notice--success}
**Watch out!** This paragraph of text has been emphasized with the `{: .notice--danger}` class.
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--danger}` class.
{: .notice--danger}
{% capture notice-text %}