Mobile notification styles
This commit is contained in:
parent
326ca094c8
commit
c76d1c1e49
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user