85 lines
1.5 KiB
CSS
85 lines
1.5 KiB
CSS
.container-modal-main{
|
|
|
|
width: 20em;
|
|
position: absolute;
|
|
right: 0;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
justify-content: flex-start;
|
|
gap: 0.7em;
|
|
height: 100%;
|
|
|
|
z-index: 2;
|
|
}
|
|
.container{
|
|
width: 19em;
|
|
height: 3.9em;
|
|
box-shadow: -3px 0px 15px rgba(0, 0, 0, 0.459);
|
|
background: white;
|
|
/* left: 76%; */
|
|
transform: translateX(105%);
|
|
/* display: none; */
|
|
overflow: hidden;
|
|
animation: container 400ms ease-out 1 forwards ;
|
|
margin-bottom: 0.9em;
|
|
}
|
|
@keyframes container{
|
|
25%{
|
|
|
|
transform: translateX(-1.5%);
|
|
}
|
|
50%{
|
|
transform: translateX(-3%);
|
|
}
|
|
100%{
|
|
|
|
transform: translateX(-1.5%);
|
|
}
|
|
|
|
}
|
|
.container.container-exit{
|
|
|
|
transform: translateX(-1.5%);
|
|
animation: container-exit 400ms ease-out 1 forwards ;
|
|
|
|
}
|
|
@keyframes container-exit{
|
|
|
|
50%{
|
|
transform: translateX(-3%);
|
|
}
|
|
100%{
|
|
|
|
transform: translateX(108%);
|
|
}
|
|
|
|
}
|
|
.container .text-container{
|
|
|
|
padding: 0.9em 0.65em;
|
|
font-size: 1.2em;
|
|
font-family: sans-serif;
|
|
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 0.6em;
|
|
}
|
|
.container .text-container ion-icon{
|
|
transform: translate(0);
|
|
font-size:1.2em;
|
|
}
|
|
.loading-bar{
|
|
background: rgb(222, 146, 4);
|
|
height: calc(3.5em - 2em);
|
|
transform-origin: left;
|
|
transform: scaleX(1);
|
|
animation: loading 3s 100ms linear 1 forwards ;
|
|
}
|
|
|
|
@keyframes loading{
|
|
|
|
100%{
|
|
transform: scaleX(0);
|
|
}
|
|
|
|
} |