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 {
width: 100%;
height: 6px;
margin: 8px 0px;
.screen {
.line {
width: 100%;
height: 6px;
margin: 8px 0px;
background-color: hsl(0, 0%, 93%);
border-radius: 3px;
background-color: hsl(0, 0%, 93%);
border-radius: 3px;
&.small {
width: 60%;
&.small {
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 {
display: inline-block;
vertical-align: top;
.col-4 .action-block {
margin: 20px;
width: 15%;
.sub-block {
margin: 0px 10px;
}
}
&.darker {
background-color: hsl(0, 0%, 73%);
.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%);
}
}
&.nano {
display: inline-block;
vertical-align: top;
width: 10%;
.navbar {
background-color: hsl(170, 48%, 54%);
padding: 10px;
}
&.med {
width: 80%;
.center-page {
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 {
height: calc(100% - 20px);
margin-top: 20px;
.message .content {
margin-left: 24px;
position: relative;
top: -15px;
}
transition: all 0.1s ease;
}
}
.stream {
padding: 3px 5px 0px 5px;
margin: 0px 5px;
.screen .message-feed {
.message .content {
margin-left: 24px;
position: relative;
top: -15px;
}
background-color: hsl(0, 0%, 100%);
border-radius: 4px;
.stream {
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);
box-shadow: 0px 0px 15px hsla(0, 0%, 0%, 0.01);
}
}
}