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