deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-10 18:03:27 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #31 from Fraham/feature-RefactorBadgeColours

Browse source 
Refactor badge colours
This commit is contained in:
Rhyne 2017-11-08 16:10:27 -05:00 committed by GitHub
parent 65f1740329 64caeeea22
commit 2e77f7020f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PaperCSS · the less formal CSS framework</title>
<meta name="description" content="The less formal CSS framework.">
@ -53,6 +53,8 @@
<li><a href="#code">Code</a></li>
<li><a href="#tables">Tables</a></li>
<li><a href="#popovers">Popovers</a></li>
<li><a href="#cards">Cards</a></li>
<li><a href="#badges">Badges</a></li>
<li><a href="#colors">Colors</a></li>
<li><a href="#borders">Borders & shadows</a></li>
<li><a href="#utilities">Utilities</a></li>
@ -647,8 +649,7 @@ function add(x, y) {
&lt;button popover="Popover on top" popover-position="top"&gt;Popover on top and on a button!&lt;/button&gt;</pre>
</div>
</div>
<div id="colors" class="section">
<div id="cards" class="section">
<h2>Cards</h2>
<h4>Full card example</h4>
<p>It is possible to not put all the sub-classes like card-title, card-subtitle, card-text, ... But instead the framework will recognize the element properly if it's a h4, h5, p, ... And you need to put all this content on a div with card class.</p>
@ -761,7 +762,7 @@ function add(x, y) {
</div>
</div>
<div class="section">
<div id="badges" class="section">
<h2>Badges</h2>
<h4>Default</h4>
<p>You can customize badges colors with secondary, success, warning, danger classes.</p>

26
src/badges.less
View file

@ -12,24 +12,14 @@
background-color: @muted;
color: white;
border-color: transparent;
}
&.primary {
background-color: @primary;
.make-badge-color-classes(@i: length(@colors)) when (@i > 0) {
.make-badge-color-classes(@i - 1);
@color: extract(@colors, @i);
.badge.@{color} {
background-color: @@color;
}
}
&.secondary {
background-color: @secondary;
}
&.success {
background-color: @success;
}
&.warning {
background-color: @warning;
}
&.danger {
background-color: @danger;
}
}
.make-badge-color-classes();