-
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Initial badge component setup * Add badge styling * Add initial badge documentation * Add !default for background color var * Update border radius and padding * Remove link, button, pill and hollow treatments * Add documentation, remove pill and hollow examples
- Loading branch information
1 parent
3130aa5
commit c671923
Showing
4 changed files
with
54 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
# Badge | ||
|
||
Badges contain small amounts of information that help provide additional | ||
context for a larger piece of content. Context could be describing the | ||
content's state, status, or other pertinent meta-information. | ||
|
||
An example of a badge could be a count for updates, or a status of "new". | ||
Badges are not to be confused with tags or input labels. Tags and input labels | ||
could contain badges, however. | ||
|
||
[View prototype on CodePen][codepen]. | ||
|
||
[codepen]: https://codepen.io/thoughtbot/pen/ZEzROvy | ||
|
||
## Usage | ||
|
||
### Default | ||
|
||
```html | ||
<span class="tbds-badge">Badge Label</span> | ||
``` | ||
|
||
```html | ||
<a href="#" class="tbds-badge">Link Badge</a> | ||
``` | ||
|
||
```html | ||
<button type="button" class="tbds-badge">Button Badge</button> | ||
``` | ||
|
||
```html | ||
<span class="tbds-badge">Badge with <strong>text-level formatting</strong></span> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
@import "../settings/index"; | ||
|
||
@import "./lib/badge"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
$_tbds-badge-font-size: 0.8em !default; | ||
$_tbds-badge-background-color: #f5f5f5 !default; | ||
$_tbds-badge-color: $tbds-brand-gray !default; | ||
|
||
.tbds-badge { | ||
background-color: $_tbds-badge-background-color; | ||
border: 0; | ||
border-radius: $_tbds-badge-font-size; | ||
color: $_tbds-badge-color; | ||
display: inline-block; | ||
font-size: $_tbds-badge-font-size; | ||
font-weight: normal; | ||
line-height: 1; | ||
padding: 0.25em 0.75em; | ||
vertical-align: baseline; | ||
white-space: nowrap; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters