Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
static/styles/portico/landing-page.scss
View File

@ -1144,27 +1144,6 @@ nav {
} }
} }
.portico-landing.hello .screen.hero-screen {
padding: 95px 170px;
height: 385px;
background-image: url(/static/images/landing-page/macbook-empty.png);
background-size: 100% auto;
background-color: transparent;
box-shadow: none;
&::before,
&::after {
content: "";
display: none;
}
.main-page {
transform: translateY(-12px) translateX(3px);
border: 5px solid hsl(0, 0%, 0%);
}
}
.portico-landing.hello .screen { .portico-landing.hello .screen {
position: relative; position: relative;
@ -1182,45 +1161,67 @@ nav {
background-color: hsl(0, 0%, 27%); background-color: hsl(0, 0%, 27%);
z-index: 1; z-index: 1;
}
.portico-landing.hello .screen::before { &.hero-screen {
content: " "; padding: 95px 170px;
position: absolute; height: 385px;
top: calc(50% - 5px);
left: 20px;
width: 10px; background-image: url(/static/images/landing-page/macbook-empty.png);
height: 10px; background-size: 100% auto;
border-radius: 5px; background-color: transparent;
background-color: hsl(0, 0%, 13%); box-shadow: none;
}
.portico-landing.hello .screen::after { &::before,
content: " "; &::after {
position: absolute; content: "";
top: calc(50% - 12.5px); display: none;
right: 8px; }
width: 25px; .main-page {
height: 25px; transform: translateY(-12px) translateX(3px);
border: 5px solid hsl(0, 0%, 0%);
}
}
border-radius: 13px; &::before {
background-color: hsl(0, 0%, 73%); content: " ";
} position: absolute;
top: calc(50% - 5px);
left: 20px;
.portico-landing.hello .screen .main-page { width: 10px;
display: inline-block; height: 10px;
height: calc(100% - 30px); border-radius: 5px;
width: calc(100% - 30px); background-color: hsl(0, 0%, 13%);
margin: 10px; }
border: 5px solid hsl(0, 0%, 13%); &::after {
border-radius: 4px; content: " ";
position: absolute;
top: calc(50% - 12.5px);
right: 8px;
background-color: hsl(0, 0%, 98%); width: 25px;
height: 25px;
border-radius: 13px;
background-color: hsl(0, 0%, 73%);
}
.main-page {
display: inline-block;
height: calc(100% - 30px);
width: calc(100% - 30px);
margin: 10px;
border: 5px solid hsl(0, 0%, 13%);
border-radius: 4px;
background-color: hsl(0, 0%, 98%);
}
} }
.portico-landing.hello .features { .portico-landing.hello .features {