2020-08-26 00:35:20 +02:00
|
|
|
@mixin btn-close-color($base-color-name) {
|
2022-12-26 19:08:04 +01:00
|
|
|
@include color('color', #{$base-color-name}-text);
|
2020-08-26 00:46:29 +02:00
|
|
|
|
2018-10-01 05:08:30 +02:00
|
|
|
&:hover,
|
|
|
|
&:active,
|
|
|
|
&:focus {
|
2022-12-26 19:08:04 +01:00
|
|
|
@include color('color', #{$base-color-name}-dark);
|
2018-10-01 05:08:30 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-12-19 17:52:33 +01:00
|
|
|
.alert {
|
2020-08-26 00:35:20 +02:00
|
|
|
@include color('border-color', 'primary');
|
2018-05-24 14:13:53 +02:00
|
|
|
@include border-style();
|
2020-08-26 00:35:20 +02:00
|
|
|
border-style: solid;
|
|
|
|
border-width: 2px;
|
2018-05-24 14:13:53 +02:00
|
|
|
margin-bottom: 20px;
|
|
|
|
padding: 15px;
|
|
|
|
width: 100%;
|
2018-09-23 20:27:18 +02:00
|
|
|
|
|
|
|
&.dismissible {
|
2018-09-29 12:17:01 +02:00
|
|
|
@include transition;
|
2018-09-23 20:27:18 +02:00
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
2018-09-29 12:17:01 +02:00
|
|
|
max-height: 48rem;
|
|
|
|
overflow: hidden;
|
2018-09-23 20:27:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.btn-close {
|
|
|
|
@include transition;
|
2020-11-26 19:09:37 +01:00
|
|
|
@include btn-close-color(primary);
|
2018-09-23 20:27:18 +02:00
|
|
|
cursor: pointer;
|
2018-10-05 11:15:02 +02:00
|
|
|
margin-left: 0.75rem;
|
2018-09-23 20:27:18 +02:00
|
|
|
}
|
2017-12-19 17:52:33 +01:00
|
|
|
}
|
|
|
|
|
2020-11-26 19:09:37 +01:00
|
|
|
@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);
|
2018-09-23 20:27:18 +02:00
|
|
|
|
|
|
|
.btn-close {
|
2020-11-26 19:09:37 +01:00
|
|
|
@include btn-close-color($color-name);
|
2018-09-23 20:27:18 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.alert-state {
|
|
|
|
display: none;
|
|
|
|
|
2018-10-05 11:15:02 +02:00
|
|
|
&:checked + .dismissible {
|
2018-09-29 12:17:01 +02:00
|
|
|
border-width: 0;
|
|
|
|
margin: 0;
|
|
|
|
max-height: 0;
|
|
|
|
opacity: 0;
|
|
|
|
padding-bottom: 0;
|
|
|
|
padding-top: 0;
|
2017-12-19 17:52:33 +01:00
|
|
|
}
|
|
|
|
}
|