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

This commit is contained in:
SiddharthVarshney 2020-05-27 04:13:36 +05:30 committed by Tim Abbott
parent ff75ea838f
commit ecd383b53c
1 changed files with 213 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -207,140 +207,139 @@ nav {
padding: 40px; padding: 40px;
z-index: 4; z-index: 4;
}
nav .brand.logo { .brand.logo {
text-decoration: none; text-decoration: none;
} }
nav.white { &.white {
background-color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 100%);
li { li {
a, a,
a:hover, a:hover,
a:visited { a:visited {
color: hsl(0, 0%, 27%); color: hsl(0, 0%, 27%);
}
}
ul {
li {
&.active {
&::after {
color: hsl(0, 0%, 27%);
}
}
}
}
.brand.logo {
span {
color: hsl(0, 0%, 27%);
}
circle {
fill: hsl(0, 0%, 27%) !important;
}
path {
fill: hsl(0, 0%, 100%) !important;
stroke: hsl(0, 0%, 100%) !important;
}
}
.hamburger {
fill: hsl(0, 0%, 27%);
} }
} }
.hamburger {
display: none;
fill: hsl(0, 0%, 100%);
cursor: pointer;
margin-top: 3px;
}
.content {
margin: 0 5px 0 10px;
position: relative;
z-index: 2;
}
.logo {
top: 7px;
span {
position: relative;
left: 5px;
top: 1px;
color: hsl(0, 0%, 100%);
font-weight: 600;
vertical-align: top;
text-transform: uppercase;
font-size: 1.2rem;
letter-spacing: 0.1em;
}
}
.brand-logo {
width: 25px;
}
ul { ul {
float: right;
list-style-type: none;
font-weight: 400;
margin: 0;
padding: 0;
outline: 1000px solid;
outline-color: transparent;
cursor: pointer;
transition: outline-color 0.2s ease;
.exit {
display: none;
user-select: none;
}
li { li {
position: relative;
display: inline-block;
margin: 10px;
color: hsl(0, 0%, 100%);
opacity: 0.7;
transition: all 0.2s ease;
&.active,
&:hover {
opacity: 1;
}
&.active { &.active {
&::after { &::after {
color: hsl(0, 0%, 27%); content: "v";
position: absolute;
bottom: -15px;
left: calc(50% - 4px);
font-weight: 100;
transform: scaleX(2) scaleY(0.5);
} }
} }
} }
} }
.brand.logo {
span {
color: hsl(0, 0%, 27%);
}
circle {
fill: hsl(0, 0%, 27%) !important;
}
path {
fill: hsl(0, 0%, 100%) !important;
stroke: hsl(0, 0%, 100%) !important;
}
}
.hamburger {
fill: hsl(0, 0%, 27%);
}
}
nav .hamburger {
display: none;
fill: hsl(0, 0%, 100%);
cursor: pointer;
margin-top: 3px;
}
nav .content {
margin: 0 5px 0 10px;
position: relative;
z-index: 2;
}
nav .logo {
top: 7px;
span {
position: relative;
left: 5px;
top: 1px;
color: hsl(0, 0%, 100%);
font-weight: 600;
vertical-align: top;
text-transform: uppercase;
font-size: 1.2rem;
letter-spacing: 0.1em;
}
}
nav .brand-logo {
width: 25px;
}
nav ul {
float: right;
list-style-type: none;
font-weight: 400;
margin: 0;
padding: 0;
outline: 1000px solid;
outline-color: transparent;
cursor: pointer;
transition: outline-color 0.2s ease;
.exit {
display: none;
user-select: none;
}
li { li {
position: relative; a,
display: inline-block; a:hover,
margin: 10px; a:visited {
text-decoration: none;
color: hsl(0, 0%, 100%); color: hsl(0, 0%, 100%);
font-size: 1.05em;
opacity: 0.7;
transition: all 0.2s ease;
&.active,
&:hover {
opacity: 1;
} }
&.active {
&::after {
content: "v";
position: absolute;
bottom: -15px;
left: calc(50% - 4px);
font-weight: 100;
transform: scaleX(2) scaleY(0.5);
}
}
}
}
nav li {
a,
a:hover,
a:visited {
text-decoration: none;
color: hsl(0, 0%, 100%);
font-size: 1.05em;
} }
} }
@ -2949,36 +2948,38 @@ nav li {
padding-top: 170px; padding-top: 170px;
} }
nav.white { nav {
padding-bottom: 40px; &.white {
} padding-bottom: 40px;
nav .logo {
float: none;
display: block;
margin: 0 auto;
text-align: center;
span {
color: hsl(0, 0%, 100%);
} }
}
nav ul { .logo {
display: block; float: none;
margin: 20px auto 0 auto; display: block;
float: none; margin: 0 auto;
text-align: center; text-align: center;
}
nav svg.brand-logo circle { span {
fill: hsl(0, 0%, 100%) !important; color: hsl(0, 0%, 100%);
stroke: hsl(0, 0%, 100%) !important; }
} }
nav svg.brand-logo path { ul {
fill: hsl(182, 34%, 47%) !important; display: block;
stroke: hsl(182, 34%, 47%) !important; margin: 20px auto 0 auto;
float: none;
text-align: center;
}
svg.brand-logo circle {
fill: hsl(0, 0%, 100%) !important;
stroke: hsl(0, 0%, 100%) !important;
}
svg.brand-logo path {
fill: hsl(182, 34%, 47%) !important;
stroke: hsl(182, 34%, 47%) !important;
}
} }
.portico-landing.features-app section .headliner .image { .portico-landing.features-app section .headliner .image {
@ -3190,11 +3191,11 @@ nav li {
padding-left: 50px; padding-left: 50px;
padding-right: 50px; padding-right: 50px;
width: calc(100% - 100px); width: calc(100% - 100px);
}
nav .hamburger { .hamburger {
position: relative; position: relative;
z-index: 10; z-index: 10;
}
} }
.portico-landing.features-app section.hero { .portico-landing.features-app section.hero {
@ -3379,79 +3380,80 @@ nav li {
height: 450px; height: 450px;
} }
nav ul { nav {
margin-top: 0px; ul {
text-align: left; margin-top: 0px;
} text-align: left;
nav .content {
display: inline-block;
z-index: 11;
}
nav .hamburger {
display: inline-block;
float: right;
}
nav .content {
> ul.show {
outline-color: hsla(203, 43%, 22%, 0.7);
}
}
nav ul {
position: fixed;
float: none;
top: 0;
left: 0;
height: 100vh;
width: 300px;
padding-left: 30px;
background-color: hsl(0, 0%, 100%);
transform: translate(-350px, 0px);
box-shadow: 0px 0px 80px hsla(0, 0%, 0%, 0.12);
transition: all 0.5s ease;
&.show {
transform: translate(0px, 0px);
} }
.exit { .content {
display: block; display: inline-block;
position: absolute; z-index: 11;
top: 10px;
right: 25px;
font-weight: 100;
font-size: 3em;
color: initial;
} }
li { .hamburger {
display: block; display: inline-block;
font-size: 1.5em; float: right;
font-weight: 300; }
line-height: 1.5;
&:first-of-type { .content {
margin-top: 20px; > ul.show {
outline-color: hsla(203, 43%, 22%, 0.7);
}
}
ul {
position: fixed;
float: none;
top: 0;
left: 0;
height: 100vh;
width: 300px;
padding-left: 30px;
background-color: hsl(0, 0%, 100%);
transform: translate(-350px, 0px);
box-shadow: 0px 0px 80px hsla(0, 0%, 0%, 0.12);
transition: all 0.5s ease;
&.show {
transform: translate(0px, 0px);
} }
&.active { .exit {
&::after { display: block;
content: ">"; position: absolute;
transform: scale(1, 1); top: 10px;
bottom: auto; right: 25px;
left: -25px;
font-weight: 400; font-weight: 100;
font-size: 3em;
color: initial;
}
li {
display: block;
font-size: 1.5em;
font-weight: 300;
line-height: 1.5;
&:first-of-type {
margin-top: 20px;
} }
font-weight: 400; &.active {
&::after {
content: ">";
transform: scale(1, 1);
bottom: auto;
left: -25px;
font-weight: 400;
}
font-weight: 400;
}
} }
} }
} }