ngx-snackbar
Version:
Snackbar implementation in Angular 7.
73 lines (64 loc) • 1.16 kB
CSS
.snackbars {
position: fixed;
z-index: 99999;
display: flex;
flex-direction: column;
}
.snackbars .snack {
background: #323232;
color: #fff;
position: relative;
min-width: 288px;
max-width: 568px;
border-radius: 2px;
padding: 14px 0 14px 24px;
min-height: 48px;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 10px;
}
.snack .snack-text {
word-wrap: break-word;
overflow: hidden;
margin-right: 24px;
}
.snack .snack-action {
text-transform: uppercase;
margin-left: auto;
cursor: pointer;
color: #2196F3;
margin-right: 24px;
}
.snackbars.bottom-left {
left: 30px;
bottom: 20px;
align-items: flex-start;
}
.snackbars.bottom-center {
left: 50%;
transform: translate(-50%, 0);
bottom: 20px;
align-items: center;
}
.snackbars.bottom-right {
right: 30px;
bottom: 20px;
align-items: flex-end;
}
.snackbars.top-left {
left: 30px;
top: 30px;
align-items: flex-start;
}
.snackbars.top-center {
left: 50%;
transform: translate(-50%, 0);
top: 30px;
align-items: center;
}
.snackbars.top-right {
right: 30px;
top: 30px;
align-items: flex-end;
}