houdini/app/assets/stylesheets/components/notification_alerts.css.scss

57 lines
1.2 KiB
SCSS
Raw Normal View History

/* License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later */
@import 'mixins';
// @import '/assets/ff-core/notification/index.css'
$notice-red : lighten($red, 10);
$notice-green : lighten($grass, 60);
@mixin slide_message {
position: fixed;
line-height: 1.3;
text-align: center;
font-size: 18px;
font-weight: bold;
width: 100%;
left: 0;
margin: 0;
padding: 25px 10px;
@include transform(translateZ(0));
@include box-shadow(0 0 10px 2px rgba(black, 0.1));
}
[data-ff-notification],
.ff-notification,
#js-notification,
.notification,
#notification {
z-index: 999;
@include slide_message;
background: $notice-green;
bottom: -60px;
@include opacity(0);
@include transition(bottom 0.2s $cubic_bevier, opacity 0.2s ease-out);
}
#js-notification.error,
.notification.error,
#notification.error {
background-color: $notice-red;
}
[data-ff-notification='shown'],
.ff-notification--inView,
#js-notification.show,
.notification.show,
#notification.show {
@include opacity(1);
bottom: 0;
}
.alert--error,
.alert--success {
@include slide_message;
top: 0px;
}
.alert--error {
background: $notice-red;
}
.alert--success {
background: $notice-green;
}