2018-10-13 20:37:13 +02:00
|
|
|
@import 'variables';
|
|
|
|
@import 'mixins';
|
|
|
|
|
|
|
|
.alert {
|
2019-10-02 13:35:50 +02:00
|
|
|
font-size: $font-size-small;
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
&:empty {
|
|
|
|
display: none;
|
|
|
|
}
|
2018-10-27 14:23:06 +02:00
|
|
|
|
2019-10-02 13:35:50 +02:00
|
|
|
&::after {
|
|
|
|
overflow: hidden;
|
|
|
|
display: inline-block;
|
|
|
|
vertical-align: bottom;
|
|
|
|
animation: ellipsis steps(4, end) 1s infinite;
|
|
|
|
content: '\2026'; // ascii code for the ellipsis character
|
|
|
|
width: 0;
|
|
|
|
position: absolute;
|
|
|
|
}
|
2018-10-30 18:08:07 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.error {
|
2019-10-02 13:35:50 +02:00
|
|
|
composes: alert;
|
|
|
|
color: darken($alert-error, 60%);
|
2018-10-30 18:08:07 +01:00
|
|
|
|
2019-10-02 13:35:50 +02:00
|
|
|
&::after {
|
|
|
|
display: none;
|
|
|
|
}
|
2018-10-13 20:37:13 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.success {
|
2019-10-02 13:35:50 +02:00
|
|
|
composes: alert;
|
|
|
|
color: darken($alert-success, 60%);
|
2018-10-30 18:08:07 +01:00
|
|
|
|
2019-10-02 13:35:50 +02:00
|
|
|
&::after {
|
|
|
|
display: none;
|
|
|
|
}
|
2018-10-30 18:08:07 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes ellipsis {
|
2019-10-02 13:35:50 +02:00
|
|
|
to {
|
|
|
|
width: 0.75rem;
|
|
|
|
}
|
2018-10-13 20:37:13 +02:00
|
|
|
}
|