deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-08 00:42:20 +02:00
Code Issues Projects Releases Wiki Activity

Alert components

Browse source
This commit is contained in:
Fraham 2017-11-01 23:23:44 +00:00
parent ce2734ec97
commit 176ee2f3f0
3 changed files with 50 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
index.html
View file

@ -821,6 +821,36 @@ function add(x, y) {
&lt;img src="https://unsplash.it/300" class="no-responsive no-border"&gt;</pre>
</div>
</div>
<div class="section">
<h2>Alerts</h2>
<div class="row flex-spaces">
<div class="alert alert-primary">
Alert-primary
</div>
<div class="alert alert-secondary">
Alert-secondary
</div>
<div class="alert alert-success">
Alert-success
</div>
<div class="alert alert-warning">
Alert-warning
</div>
<div class="alert alert-danger">
Alert-danger
</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces"&gt;
&lt;div class="alert alert-primary"&gt;Alert-primary&lt;/div&gt;
&lt;div class="alert alert-secondary"&gt;Alert-secondary&lt;/div&gt;
&lt;div class="alert alert-success"&gt;Alert-success&lt;/div&gt;
&lt;div class="alert alert-warning"&gt;Alert-warning&lt;/div&gt;
&lt;div class="alert alert-danger"&gt;Alert-danger&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
</div>
<div class="section">
<h2 id="download">Download</h2>
<p>Download the latest version (1.0.1) using either of the links below. Or download an older release via Github.</p>

18
src/alerts.less Normal file
View file

@ -0,0 +1,18 @@
.alert{
.border;
padding: 15px;
margin-bottom: 20px;
width: 100%;
}
.make-alert-color-classes(@a: length(@colors)) when (@a > 0) {
.make-alert-color-classes(@a - 1);
@color: extract(@colors, @a);
.alert-@{color} {
border-color: @@color;
color: @@color;
background-color: ~"@{@{color}-light}";
}
}
.make-alert-color-classes();

3
src/styles.less
View file

@ -13,4 +13,5 @@
@import (less) "./tables.less";
@import (less) "./images.less";
@import (less) "./utilities.less";
@import (less) "./popovers.less";
@import (less) "./popovers.less";
@import (less) "./alerts.less";