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

Merge pull request #158 from vanillaSlice/feature-dismissible-alerts

Browse source 
Feature dismissible alerts
This commit is contained in:
Rhyne 2018-10-21 17:18:16 -04:00 committed by GitHub
parent ed5773e2a5 d9e9a88dd5
commit af5ee37717
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 106 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
docs/content/docs/components/alerts.md
View file

@ -2,6 +2,8 @@
title: Alerts
description: PaperCSS Alerts
---
### Simple alerts
<div class="row flex-spaces">
<div class="alert alert-primary">
Alert-primary
@ -31,3 +33,65 @@ description: PaperCSS Alerts
<div class="alert alert-danger">Alert-danger</div>
</div>
```
### Dismissible alerts
<div class="row flex-spaces">
<input class="alert-state" id="alert-1" type="checkbox">
<div class="alert alert-primary dismissible">
Alert-primary
<label class="btn-close" for="alert-1">X</label>
</div>
<input class="alert-state" id="alert-2" type="checkbox">
<div class="alert alert-secondary dismissible">
Alert-secondary
<label class="btn-close" for="alert-2">X</label>
</div>
<input class="alert-state" id="alert-3" type="checkbox">
<div class="alert alert-success dismissible">
Alert-success
<label class="btn-close" for="alert-3">X</label>
</div>
<input class="alert-state" id="alert-4" type="checkbox">
<div class="alert alert-warning dismissible">
Alert-warning
<label class="btn-close" for="alert-4">X</label>
</div>
<input class="alert-state" id="alert-5" type="checkbox">
<div class="alert alert-danger dismissible">
Alert-danger
<label class="btn-close" for="alert-5">X</label>
</div>
</div>
#### Code:
```html
<div class="row flex-spaces">
<input class="alert-state" id="alert-1" type="checkbox">
<div class="alert alert-primary dismissible">
Alert-primary
<label class="btn-close" for="alert-1">X</label>
</div>
<input class="alert-state" id="alert-2" type="checkbox">
<div class="alert alert-secondary dismissible">
Alert-secondary
<label class="btn-close" for="alert-2">X</label>
</div>
<input class="alert-state" id="alert-3" type="checkbox">
<div class="alert alert-success dismissible">
Alert-success
<label class="btn-close" for="alert-3">X</label>
</div>
<input class="alert-state" id="alert-4" type="checkbox">
<div class="alert alert-warning dismissible">
Alert-warning
<label class="btn-close" for="alert-4">X</label>
</div>
<input class="alert-state" id="alert-5" type="checkbox">
<div class="alert alert-danger dismissible">
Alert-danger
<label class="btn-close" for="alert-5">X</label>
</div>
</div>
```

42
src/components/_alerts.scss
View file

@ -1,9 +1,34 @@
@mixin btn-close-color($base-color) {
color: lighten($base-color, 10%);
&:hover,
&:active,
&:focus {
color: darken($base-color, 10%);
}
}
.alert {
@include border-style();
border: 2px solid $primary;
margin-bottom: 20px;
padding: 15px;
width: 100%;
&.dismissible {
@include transition;
display: flex;
justify-content: space-between;
max-height: 48rem;
overflow: hidden;
}
.btn-close {
@include transition;
@include btn-close-color($primary);
cursor: pointer;
margin-left: 0.75rem;
}
}
@each $colorName, $color, $color-light in $colors {
@ -11,5 +36,22 @@
background-color: $color-light;
border-color: $color;
color: $color;
.btn-close {
@include btn-close-color($color);
}
}
}
.alert-state {
display: none;
&:checked + .dismissible {
border-width: 0;
margin: 0;
max-height: 0;
opacity: 0;
padding-bottom: 0;
padding-top: 0;
}
}