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 `.screen`.

This commit is contained in:
SiddharthVarshney 2020-07-18 14:34:31 +05:30 committed by Tim Abbott
parent db3530d984
commit 1b5138d546
1 changed files with 100 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1024,121 +1024,123 @@ nav {
} }
} }
.screen .line { .screen {
width: 100%; .line {
height: 6px; width: 100%;
margin: 8px 0px; height: 6px;
margin: 8px 0px;
background-color: hsl(0, 0%, 93%); background-color: hsl(0, 0%, 93%);
border-radius: 3px; border-radius: 3px;
&.small { &.small {
width: 60%; width: 60%;
}
&.micro {
display: inline-block;
vertical-align: top;
width: 15%;
}
&.darker {
background-color: hsl(0, 0%, 73%);
}
&.nano {
display: inline-block;
vertical-align: top;
width: 10%;
}
&.med {
width: 80%;
}
&.red {
background-color: hsl(350, 42%, 77%);
}
&.blue {
background-color: hsl(193, 42%, 77%);
}
&.green {
background-color: hsl(119, 42%, 77%);
}
&.orange {
background-color: hsl(30, 42%, 77%);
}
} }
&.micro { .col-4 .action-block {
display: inline-block; margin: 20px;
vertical-align: top;
width: 15%; .sub-block {
margin: 0px 10px;
}
} }
&.darker { .top {
background-color: hsl(0, 0%, 73%); .avatar {
display: inline-block;
vertical-align: top;
width: 20px;
height: 20px;
background-color: hsl(0, 0%, 73%);
border-radius: 4px;
}
.top-line {
display: inline-block;
vertical-align: top;
width: 50px;
margin-top: 0px;
background-color: hsl(0, 0%, 73%);
}
} }
&.nano { .navbar {
display: inline-block; background-color: hsl(170, 48%, 54%);
vertical-align: top; padding: 10px;
width: 10%;
} }
&.med { .center-page {
width: 80%; height: 100%;
position: relative;
overflow: hidden;
.message-feed {
height: calc(100% - 20px);
margin-top: 20px;
transition: all 0.1s ease;
}
} }
&.red {
background-color: hsl(350, 42%, 77%);
}
&.blue {
background-color: hsl(193, 42%, 77%);
}
&.green {
background-color: hsl(119, 42%, 77%);
}
&.orange {
background-color: hsl(30, 42%, 77%);
}
}
.screen .col-4 .action-block {
margin: 20px;
.sub-block {
margin: 0px 10px;
}
}
.screen .top {
.avatar {
display: inline-block;
vertical-align: top;
width: 20px;
height: 20px;
background-color: hsl(0, 0%, 73%);
border-radius: 4px;
}
.top-line {
display: inline-block;
vertical-align: top;
width: 50px;
margin-top: 0px;
background-color: hsl(0, 0%, 73%);
}
}
.screen .navbar {
background-color: hsl(170, 48%, 54%);
padding: 10px;
}
.screen .center-page {
height: 100%;
position: relative;
overflow: hidden;
.message-feed { .message-feed {
height: calc(100% - 20px); .message .content {
margin-top: 20px; margin-left: 24px;
position: relative;
top: -15px;
}
transition: all 0.1s ease; .stream {
} padding: 3px 5px 0px 5px;
} margin: 0px 5px;
.screen .message-feed { background-color: hsl(0, 0%, 100%);
.message .content { border-radius: 4px;
margin-left: 24px;
position: relative;
top: -15px;
}
.stream { box-shadow: 0px 0px 15px hsla(0, 0%, 0%, 0.01);
padding: 3px 5px 0px 5px; }
margin: 0px 5px;
background-color: hsl(0, 0%, 100%);
border-radius: 4px;
box-shadow: 0px 0px 15px hsla(0, 0%, 0%, 0.01);
} }
} }