168 lines
3.0 KiB
SCSS
168 lines
3.0 KiB
SCSS
|
|
.wave {
|
|
background-color: #f3f6f9;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.wave > div {
|
|
z-index: 1;
|
|
}
|
|
|
|
.wave:before {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #fff;
|
|
z-index: -1;
|
|
}
|
|
|
|
.wave:after {
|
|
content: " ";
|
|
width: 1000px;
|
|
height: 1025px;
|
|
position: absolute;
|
|
bottom: 65%;
|
|
left: -250px;
|
|
border-radius: 35%;
|
|
background: #fff;
|
|
z-index: 0;
|
|
}
|
|
|
|
.wave:after {
|
|
-webkit-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.wave-animate:after {
|
|
-webkit-animation: animate-wave 15s infinite linear;
|
|
animation: animate-wave 15s infinite linear;
|
|
}
|
|
|
|
.wave-animate-slower:after {
|
|
-webkit-animation: animate-wave 30s infinite linear;
|
|
animation: animate-wave 30s infinite linear;
|
|
}
|
|
|
|
.wave-animate-slow:after {
|
|
-webkit-animation: animate-wave 25s infinite linear;
|
|
animation: animate-wave 25s infinite linear;
|
|
}
|
|
|
|
.wave-animate-fast:after {
|
|
-webkit-animation: animate-wave 10s infinite linear;
|
|
animation: animate-wave 10s infinite linear;
|
|
}
|
|
|
|
.wave-animate-faster:after {
|
|
-webkit-animation: animate-wave 5s infinite linear;
|
|
animation: animate-wave 5s infinite linear;
|
|
}
|
|
|
|
.wave.wave-primary {
|
|
background-color: var(--primary-light) !important;
|
|
}
|
|
|
|
.wave.wave-primary .svg-icon svg g [fill] {
|
|
fill: var(--primary-light);
|
|
}
|
|
|
|
.wave.wave-secondary {
|
|
background-color: rgba(228, 230, 239, 0.1) !important;
|
|
}
|
|
|
|
.wave.wave-secondary .svg-icon svg g [fill] {
|
|
fill: #e4e6ef;
|
|
}
|
|
|
|
.wave.wave-success {
|
|
background-color: rgba(27, 197, 189, 0.1) !important;
|
|
}
|
|
|
|
.wave.wave-success .svg-icon svg g [fill] {
|
|
fill: #43a047;
|
|
}
|
|
|
|
.wave.wave-info {
|
|
background-color: rgba(137, 80, 252, 0.1) !important;
|
|
}
|
|
|
|
.wave.wave-info .svg-icon svg g [fill] {
|
|
fill: #8950fc;
|
|
}
|
|
|
|
.wave.wave-warning {
|
|
background-color: rgba(255, 168, 0, 0.1) !important;
|
|
}
|
|
|
|
.wave.wave-warning .svg-icon svg g [fill] {
|
|
fill: #ffa800;
|
|
}
|
|
|
|
.wave.wave-danger {
|
|
background-color: rgba(246, 78, 96, 0.1) !important;
|
|
}
|
|
|
|
.wave.wave-danger .svg-icon svg g [fill] {
|
|
fill: #039be5;
|
|
}
|
|
|
|
.wave.wave-light {
|
|
background-color: rgba(243, 246, 249, 0.1) !important;
|
|
}
|
|
|
|
.wave.wave-light .svg-icon svg g [fill] {
|
|
fill: #f3f6f9;
|
|
}
|
|
|
|
.wave.wave-dark {
|
|
background-color: rgba(24, 28, 50, 0.1) !important;
|
|
}
|
|
|
|
.wave.wave-dark .svg-icon svg g [fill] {
|
|
fill: #181c32;
|
|
}
|
|
|
|
.wave.wave-white {
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
|
|
.wave.wave-white .svg-icon svg g [fill] {
|
|
fill: #fff;
|
|
}
|
|
|
|
@-webkit-keyframes animate-wave {
|
|
from {
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes animate-wave {
|
|
from {
|
|
-webkit-transform: rotate(0);
|
|
transform: rotate(0);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
|
|
.content-notif {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
} |