add alert styles and layout_ref content demo
This commit is contained in:
parent
54fe28d6b6
commit
b101c03eb6
2 changed files with 35 additions and 0 deletions
|
@ -60,6 +60,16 @@
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
|
<h2>Alerts</h2>
|
||||||
|
|
||||||
|
<pre><div class="alert alert--info" role="alert">Account must be manually configured</div></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>
|
<h2>User Selection</h2>
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
|
|
|
@ -3335,6 +3335,31 @@ footer {
|
||||||
color: hsl(204,3%,72%);
|
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 {
|
.tags {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue