Mobile notification styles

This commit is contained in:
James Lyne 2021-05-29 01:34:53 +01:00
parent 326ca094c8
commit c76d1c1e49

View File

@ -1,31 +1,49 @@
.vue-notification-group .notification {
margin: 0 0.5rem 1rem;
padding: 1rem 1.5rem;
min-height: 5rem;
font-size: 1.6rem;
font-family: Raleway, sans-serif;
color: var(--text-base);
display: flex;
flex-direction: column;
justify-content: center;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
.vue-notification-group {
z-index: 130 !important;
background: var(--background-base);
border-left: none;// 5px solid #187fe7;
.notification {
margin: 0 0.5rem 1rem;
padding: 1rem 1.5rem;
min-height: 5rem;
font-size: 1.6rem;
font-family: Raleway, sans-serif;
color: var(--text-base);
display: flex;
flex-direction: column;
justify-content: center;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
&.success {
background: #68cd86;
border-left-color: #42a85f;
background: var(--background-base);
border-left: none;// 5px solid #187fe7;
&.success {
background: #68cd86;
border-left-color: #42a85f;
}
&.warn {
background: #ffb648;
border-left-color: #f48a06;
}
&.error {
background: var(--background-error);
border-left-color: #b82e24;
}
}
&.warn {
background: #ffb648;
border-left-color: #f48a06;
}
&.error {
background: var(--background-error);
border-left-color: #b82e24;
@media screen and (max-width: 767px) {
.vue-notification-wrapper:first-child:before {
content: '';
position: fixed;
bottom: 0;
lefT: 0;
right: 0;
display: block;
height: 10rem;
background-image: linear-gradient(0deg, var(--background-dark), transparent);
z-index: -1;
}
}
}