deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-07 16:32:15 +02:00
Code Issues Projects Releases Wiki Activity

Added badges

Browse source
This commit is contained in:
Thomas Cazade 2017-11-01 17:44:09 +01:00
parent 73df749cc9
commit 76007dfdeb
3 changed files with 60 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
index.html
View file

@ -668,6 +668,29 @@ function add(x, y) {
</div>
</div>
<div class="section">
<h2>Badges</h2>
<h4>Default</h4>
<p>You can customize badges colors with secondary, success, warning, danger classes.</p>
<h1>Example h1 heading <span class="badge">123</span></h1>
<h2>Example h2 heading <span class="badge secondary">123</span></h2>
<h3>Example h3 heading <span class="badge success">123</span></h3>
<h4>Example h4 heading <span class="badge warning">123</span></h4>
<h5>Example h5 heading <span class="badge danger">123</span></h5>
<h6>Example h6 heading <span class="badge">123</span></h6>
<div class="docs">
<pre>
&lt;h1&gt;Example h1 heading &lt;span class="badge"&gt;123&lt;/span&gt;&lt;/h1&gt;
&lt;h2&gt;Example h2 heading &lt;span class="badge secondary"&gt;123&lt;/span&gt;&lt;/h2&gt;
&lt;h3&gt;Example h3 heading &lt;span class="badge success"&gt;123&lt;/span&gt;&lt;/h3&gt;
&lt;h4&gt;Example h4 heading &lt;span class="badge warning"&gt;123&lt;/span&gt;&lt;/h4&gt;
&lt;h5&gt;Example h5 heading &lt;span class="badge danger"&gt;123&lt;/span&gt;&lt;/h5&gt;
&lt;h6&gt;Example h6 heading &lt;span class="badge"&gt;123&lt;/span&gt;&lt;/h6&gt;</pre>
</div>
</div>
<div class="section">
<h2>Colors</h2>
<h4>Text</h4>

35
src/badges.less Normal file
View file

@ -0,0 +1,35 @@
.badge {
.border;
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #868e96;
color: white;
border-color: transparent;
&.primary {
background-color: @primary;
}
&.secondary {
background-color: @secondary;
}
&.success {
background-color: @success;
}
&.warning {
background-color: @warning;
}
&.danger {
background-color: @danger;
}
}

3
src/styles.less
View file

@ -14,4 +14,5 @@
@import (less) "./images.less";
@import (less) "./utilities.less";
@import (less) "./popovers.less";
@import (less) "./cards.less";
@import (less) "./cards.less";
@import (less) "./badges.less";