m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-23 02:10:01 +01:00
Code

tweak alert styles

Browse Source
This commit is contained in:
Matthias Kretschmann 2016-06-12 16:36:25 +02:00
parent 209ac51701
commit 44c8aa3c9e
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
2 changed files with 33 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
_src/_assets/styl/_kremalicious/alerts.styl
View File

@ -4,31 +4,35 @@
// Alerts // Alerts
// //
$alert-info = #f7f1e4
$alert-success = #dff0d8
$alert-error = #f2dede
.alert .alert
padding: $padding-base-vertical $padding-base-horizontal padding: $spacer
margin-bottom: $spacer margin-bottom: $spacer
border-radius: $border-radius-base border-radius: $border-radius-base
font-size: $font-size-small
border: 1px solid transparent border: 1px solid transparent
box-shadow: 0 1px 3px rgba($brand-grey, .1), inset 0 1px 0 #fff
> p, > p,
> ul > ul
margin-bottom: 0 margin-bottom: 0
> p + p > p + p
margin-top: 5px margin-top: $spacer
.alert-success .alert-success
color: #468847 color: darken($alert-success, 60%)
background: #dff0d8 background: $alert-success
border-color: darken(#dff0d8, 5%) border-color: darken($alert-success, 10%)
.alert-danger, .alert-danger,
.alert-error .alert-error
color: #b94a48 color: darken($alert-error, 60%)
background: #f2dede background: $alert-error
border-color: darken(#f2dede, 5%) border-color: darken($alert-error, 10%)
.alert-info .alert-info
color: #3a87ad color: darken($alert-info, 60%)
background: #d9edf7 background: $alert-info
border-color: darken(#d9edf7, 5%) border-color: darken($alert-info, 10%)

17
_src/styleguide.md
View File

@ -733,6 +733,23 @@ Forms can be used when you wish to collect data from users. The `fieldset` eleme
Design and mark-up patterns unique to this site. Design and mark-up patterns unique to this site.
### Alerts
<div class="alert alert-info">
<p>I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised <a href="#">more than he could</a> deliver. Why not indeed! We're rescuing ya.</p>
<p>Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?</p>
</div>
<div class="alert alert-success">
<p>I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised <a href="#">more than he could</a> deliver. Why not indeed! We're rescuing ya.</p>
<p>Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?</p>
</div>
<div class="alert alert-error">
<p>I'm sure those windmills will keep them cool. Interesting. No, wait, the other thing: tedious. But, like most politicians, he promised <a href="#">more than he could</a> deliver. Why not indeed! We're rescuing ya.</p>
<p>Isn't it true that you have been paid for your testimony? Oh, I always feared he might run off like this. Why, why, why didn't I break his legs? Oh right. I forgot about the battle. Who are those horrible orange men?</p>
</div>
### Pagination ### Pagination
<nav class="paginator"> <nav class="paginator">