css: Use SCSS nesting for `.portico-landing.hello .hero .waves`.

This commit is contained in:
SiddharthVarshney 2020-06-20 17:33:45 +05:30 committed by Tim Abbott
parent 45ea511225
commit cabdc72722
1 changed files with 23 additions and 23 deletions

View File

@ -689,37 +689,37 @@ nav {
z-index: 0; z-index: 0;
opacity: 0.3; opacity: 0.3;
}
.portico-landing.hello .hero .waves .wave { .wave {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
border-radius: 35%; border-radius: 35%;
opacity: 0.3; opacity: 0.3;
animation-name: waves; animation-name: waves;
animation-duration: 15s; animation-duration: 15s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function: linear; animation-timing-function: linear;
&.dark-blue { &.dark-blue {
background-color: hsl(219, 39%, 13%); background-color: hsl(219, 39%, 13%);
} }
&.light-blue { &.light-blue {
background-color: hsla(0, 67%, 57%, 0.9); background-color: hsla(0, 67%, 57%, 0.9);
animation-duration: 18s; animation-duration: 18s;
} }
&.light-green { &.light-green {
background-color: hsla(187, 98%, 75%, 0.75); background-color: hsla(187, 98%, 75%, 0.75);
animation-name: wavesBackward; animation-name: wavesBackward;
animation-duration: 21s; animation-duration: 21s;
}
} }
} }