scinote-web/app/assets/stylesheets/shared_styles/elements/alerts.scss

71 lines
977 B
SCSS

.alert {
border-radius: 0;
margin-bottom: 0;
opacity: .86;
width: 100%;
}
#notifications {
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 3000;
.alert-floating {
align-items: center;
display: flex;
height: 52px;
opacity: 1;
padding: 9px;
.fas {
font-size: $font-size-h2;
margin-left: 12px;
}
.message {
color: $color-volcano;
flex-grow: 1;
margin-left: 14px;
}
.close {
opacity: .3;
right: 10px;
top: 0;
}
}
}
.inline-alert {
align-items: center;
display: flex;
padding: 9px 24px;
.alert-icon {
font-size: 18px;
margin-right: 16px;
}
}
.alert:not(.alert-floating),
.inline-alert {
color: $color-volcano;
&.alert-danger .fas {
color: $brand-danger;
}
&.alert-warning .fas {
color: $brand-warning;
}
&.alert-info .fas {
color: $brand-info;
}
&.alert-success .fas {
color: $brand-success;
}
}