// // Notifications // —————————————-
.notification {
background-color: fallback-rgba($notification-bgr-color, .05, $background-color-regular); // background-color: rgba($notification-bgr-color, .05); since alpha is to low border: 1px solid $notification-border-color; border-radius: $notification-border-radius; @include clearfix(); display: block; margin-bottom: $notification-margin-bottom; padding: $notification-padding; text-align: left; font-size: $notification-font-size; &:empty { display: none; }
}
.notification-dismissible {
padding-right: building-units(4); > .close { margin-right: building-units(-3); margin-top: -7px; margin-left: building-units(1.5); &.focus, &:focus { color: $notification-close-button-focus; outline: 0; } &.hover, &:hover { color: $notification-close-button-hover; } &.active, &:active { color: $notification-close-button-active; } }
}
.notification-content, .notification-left, .notification-right {
overflow: hidden; zoom: 1;
}
.notification-content > p {
padding: 0; margin: 0;
}
.notification-left {
float: left; margin-right: building-units(1);
}
.notification-right {
float: right; margin-left: building-units(1);
}
.notification-heading {
font-size: $notification-heading-font-size; font-weight: 400; padding: 0; margin: 0;
}
.notification-overlay {
box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.notification-positive {
@include notification-variant($color-positive, $color-positive);
}
.notification-warning {
@include notification-variant($color-warning, $color-warning);
}
.notification-negative {
@include notification-variant($color-negative, $color-negative);
}
.notification-badge {
float: right; margin-top: building-units(-.5) + 1; margin-right: building-units(-1); background-color: $color-gray-dark; color: #fff;
}
.notification .icon-frame {
padding: 7px 0 0; .icon-large { font-size: 42px; }
}