slicker alerts
This commit is contained in:
parent
8987f1d476
commit
46ef39f40d
@ -35,8 +35,6 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: var(--color-dark);
|
background-color: var(--color-dark);
|
||||||
border-top-left-radius: 4px;
|
|
||||||
border-bottom-left-radius: 4px;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: #f3f3f3;
|
color: #f3f3f3;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
@ -44,7 +42,6 @@
|
|||||||
transition: all .3s ease-in-out;
|
transition: all .3s ease-in-out;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
box-shadow: 0 0 7px var(--color-dark);
|
|
||||||
animation: slide-in-alert .2s ease-out forwards;
|
animation: slide-in-alert .2s ease-out forwards;
|
||||||
|
|
||||||
+ .alert:not(.alert--invisible) {
|
+ .alert:not(.alert--invisible) {
|
||||||
@ -90,15 +87,18 @@
|
|||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
|
|
||||||
.alert {
|
.alert {
|
||||||
min-width: 400px;
|
min-width: 350px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert__content {
|
.alert__content {
|
||||||
padding: 1.25em 1.5em;
|
padding: 8px 1.5em;
|
||||||
|
min-height: 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: flex;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
@ -160,7 +160,6 @@
|
|||||||
.alert-warning {
|
.alert-warning {
|
||||||
background-color: var(--color-warning);
|
background-color: var(--color-warning);
|
||||||
color: var(--color-dark);
|
color: var(--color-dark);
|
||||||
box-shadow: 0 0 7px var(--color-warning);
|
|
||||||
|
|
||||||
.alert__close {
|
.alert__close {
|
||||||
color: var(--color-warning);
|
color: var(--color-warning);
|
||||||
@ -176,7 +175,6 @@
|
|||||||
.alert-error {
|
.alert-error {
|
||||||
background-color: var(--color-error);
|
background-color: var(--color-error);
|
||||||
color: var(--color-lightwhite);
|
color: var(--color-lightwhite);
|
||||||
box-shadow: 0 0 7px var(--color-error);
|
|
||||||
|
|
||||||
.alert__close {
|
.alert__close {
|
||||||
color: var(--color-error);
|
color: var(--color-error);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user