js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 11:09:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove badge inverse, add secondary/light/dark

Browse Source
This commit is contained in:
Cory LaViska
2017-08-13 11:18:30 -04:00
parent 37f563e088
commit 0a7afe79ac
5 changed files with 65 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/shoelace.css vendored
View File

File diff suppressed because one or more lines are too long

22
docs/badges.html
View File

@@ -80,6 +80,28 @@
<p><h3>Heading 3 <span class="badge">Badge</span></h3></p>
<p>Paragraph <span class="badge">Badge</span></p>
<h3 id="badge-links">Badge Links</h3>
<pre><code class="lang-html">&lt;a href=&quot;#&quot; class=&quot;badge&quot;&gt;Primary&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-secondary&quot;&gt;Secondary&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-success&quot;&gt;Success&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-info&quot;&gt;Info&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-warning&quot;&gt;Warning&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-danger&quot;&gt;Danger&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-light&quot;&gt;Light&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge badge-dark&quot;&gt;Dark&lt;/a&gt;
</code></pre>
<p>
<a href="#" class="badge">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>
</p>
</div>
</main>

15
source/css/badges.css
View File

@@ -9,6 +9,7 @@
padding: var(--badge-spacing-y) var(--badge-spacing-x);
vertical-align: baseline;
display: inline-block;
transition: .1s box-shadow, .1s background-color, .1s color;
}
.badge-secondary {
@@ -49,3 +50,17 @@
.badge:empty {
display: none;
}
a.badge:hover {
color: var(--badge-color);
text-decoration: none;
box-shadow: var(--badge-box-shadow-hover);
}
a.badge-secondary:hover { color: var(--badge-color-secondary) }
a.badge-success:hover { color: var(--badge-color-success) }
a.badge-info:hover { color: var(--badge-color-info) }
a.badge-warning:hover { color: var(--badge-color-warning) }
a.badge-danger:hover { color: var(--badge-color-danger) }
a.badge-dark:hover { color: var(--badge-color-dark) }
a.badge-light:hover { color: var(--badge-color-light) }

1
source/css/variables.css
View File

@@ -141,6 +141,7 @@
--badge-font-size: .8em; /* ems for relative sizing */
--badge-font-weight: var(--font-weight);
--badge-border-radius: 1em; /* ems for relative sizing */
--badge-box-shadow-hover: inset 0 0 0 1em rgba(0, 0, 0, .1);
--badge-spacing-x: .6em;
--badge-spacing-y: .2em;

25
source/docs/badges.md
View File

@@ -43,3 +43,28 @@ By default, badges are sized relative to their parent element.
<h2>Heading 2 <span class="badge">Badge</span></h2>
<h3>Heading 3 <span class="badge">Badge</span></h3>
<p>Paragraph <span class="badge">Badge</span></p>
### Badge Links
```html
<a href="#" class="badge">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>
```
<p>
<a href="#" class="badge">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>
</p>