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 { .vue-notification-group {
margin: 0 0.5rem 1rem; z-index: 130 !important;
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);
background: var(--background-base); .notification {
border-left: none;// 5px solid #187fe7; 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: var(--background-base);
background: #68cd86; border-left: none;// 5px solid #187fe7;
border-left-color: #42a85f;
&.success {
background: #68cd86;
border-left-color: #42a85f;
}
&.warn {
background: #ffb648;
border-left-color: #f48a06;
}
&.error {
background: var(--background-error);
border-left-color: #b82e24;
}
} }
&.warn { @media screen and (max-width: 767px) {
background: #ffb648; .vue-notification-wrapper:first-child:before {
border-left-color: #f48a06; content: '';
} position: fixed;
bottom: 0;
&.error { lefT: 0;
background: var(--background-error); right: 0;
border-left-color: #b82e24; display: block;
height: 10rem;
background-image: linear-gradient(0deg, var(--background-dark), transparent);
z-index: -1;
}
} }
} }