mirror of
https://github.com/papercss/papercss
synced 2024-05-17 21:26:42 +02:00
60 lines
1.1 KiB
SCSS
60 lines
1.1 KiB
SCSS
@mixin btn-close-color($base-color-name) {
|
|
@include color('color', #{$base-color-name}-text);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
@include color('color', #{$base-color-name}-dark);
|
|
}
|
|
}
|
|
|
|
.alert {
|
|
@include color('border-color', 'primary');
|
|
@include border-style();
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
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 $color-name, $color, $color-light, $color-text in $colors {
|
|
.alert-#{$color-name} {
|
|
@include color('color', #{$color-name}-text);
|
|
@include color('background-color', #{$color-name}-light);
|
|
@include color('border-color', $color-name);
|
|
|
|
.btn-close {
|
|
@include btn-close-color($color-name);
|
|
}
|
|
}
|
|
}
|
|
|
|
.alert-state {
|
|
display: none;
|
|
|
|
&:checked + .dismissible {
|
|
border-width: 0;
|
|
margin: 0;
|
|
max-height: 0;
|
|
opacity: 0;
|
|
padding-bottom: 0;
|
|
padding-top: 0;
|
|
}
|
|
}
|