mirror of
https://github.com/papercss/papercss
synced 2024-06-02 14:02:34 +02:00
61 lines
998 B
SCSS
61 lines
998 B
SCSS
.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;
|
|
opacity: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-close {
|
|
@include transition;
|
|
color: lighten($primary, 10%);
|
|
cursor: pointer;
|
|
margin-left: 1rem;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: darken($primary, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $colorName, $color, $color-light in $colors {
|
|
.alert-#{$colorName} {
|
|
background-color: $color-light;
|
|
border-color: $color;
|
|
color: $color;
|
|
|
|
.btn-close {
|
|
color: lighten($color, 10%);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: darken($color, 10%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.alert-state {
|
|
display: none;
|
|
|
|
&:checked+.dismissible {
|
|
border-width: 0;
|
|
margin: 0;
|
|
max-height: 0;
|
|
opacity: 0;
|
|
padding-bottom: 0;
|
|
padding-top: 0;
|
|
}
|
|
}
|