add alert styles and layout_ref content demo

This commit is contained in:
Felix Niklas 2014-11-14 11:14:34 +01:00
parent 54fe28d6b6
commit b101c03eb6
2 changed files with 35 additions and 0 deletions

View file

@ -60,6 +60,16 @@
<hr>
<h2>Alerts</h2>
<pre>&lt;div class=&quot;alert alert--info&quot; role=&quot;alert&quot;&gt;Account must be manually configured&lt;/div&gt;</pre>
<div class="alert alert--info horizontal" role="alert">Account must be manually configured <code class="align-right">.alert--info</code></div>
<div class="alert alert--success horizontal" role="alert">Connection established! <code class="align-right">.alert--success</code></div>
<div class="alert alert--warning horizontal" role="alert">Delete Cookies? <code class="align-right">.alert--warning</code></div>
<div class="alert alert--danger horizontal" role="alert">System Shutting Down! <code class="align-right">.alert--danger</code></div>
<hr>
<h2>User Selection</h2>
<form>

View file

@ -3335,6 +3335,31 @@ footer {
color: hsl(204,3%,72%);
}
.alert {
padding: 10px 15px;
border-radius: 3px;
&.alert--info {
border-color: hsl(188,50%,72%);
background: hsl(191,53%,79%);
}
&.alert--success {
border-color: hsl(145,51%,70%);
background: hsl(145,51%,77%);
}
&.alert--warning {
border-color: hsl(43,92%,71%);
background: hsl(42,94%,80%);
}
&.alert--danger {
border-color: hsl(9,72%,62%);
background: hsl(12,73%,66%);
}
}
.tags {
margin-bottom: 20px;
}