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

This commit is contained in:
SiddharthVarshney 2020-07-18 14:42:22 +05:30 committed by Tim Abbott
parent ba4709b000
commit 7f5f61267e
1 changed files with 51 additions and 50 deletions

View File

@ -1144,7 +1144,25 @@ nav {
} }
} }
.portico-landing.hello .screen.hero-screen {
.portico-landing.hello .screen {
position: relative;
margin: -300px auto 0px auto;
width: 600px;
background-color: hsl(0, 0%, 98%);
height: 350px;
padding: 10px 30px 10px 30px;
border-radius: 12px;
box-shadow: 0px 0px 50px hsla(0, 0%, 0%, 0.2);
background-color: hsl(0, 0%, 27%);
z-index: 1;
&.hero-screen {
padding: 95px 170px; padding: 95px 170px;
height: 385px; height: 385px;
@ -1164,27 +1182,9 @@ nav {
transform: translateY(-12px) translateX(3px); transform: translateY(-12px) translateX(3px);
border: 5px solid hsl(0, 0%, 0%); border: 5px solid hsl(0, 0%, 0%);
} }
} }
.portico-landing.hello .screen { &::before {
position: relative;
margin: -300px auto 0px auto;
width: 600px;
background-color: hsl(0, 0%, 98%);
height: 350px;
padding: 10px 30px 10px 30px;
border-radius: 12px;
box-shadow: 0px 0px 50px hsla(0, 0%, 0%, 0.2);
background-color: hsl(0, 0%, 27%);
z-index: 1;
}
.portico-landing.hello .screen::before {
content: " "; content: " ";
position: absolute; position: absolute;
top: calc(50% - 5px); top: calc(50% - 5px);
@ -1195,9 +1195,9 @@ nav {
border-radius: 5px; border-radius: 5px;
background-color: hsl(0, 0%, 13%); background-color: hsl(0, 0%, 13%);
} }
.portico-landing.hello .screen::after { &::after {
content: " "; content: " ";
position: absolute; position: absolute;
top: calc(50% - 12.5px); top: calc(50% - 12.5px);
@ -1208,9 +1208,9 @@ nav {
border-radius: 13px; border-radius: 13px;
background-color: hsl(0, 0%, 73%); background-color: hsl(0, 0%, 73%);
} }
.portico-landing.hello .screen .main-page { .main-page {
display: inline-block; display: inline-block;
height: calc(100% - 30px); height: calc(100% - 30px);
@ -1221,6 +1221,7 @@ nav {
border-radius: 4px; border-radius: 4px;
background-color: hsl(0, 0%, 98%); background-color: hsl(0, 0%, 98%);
}
} }
.portico-landing.hello .features { .portico-landing.hello .features {