3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-05 13:17:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: change icon for navToggle (#1394)

Browse source
This commit is contained in:
Roland Balogh 2019-04-26 18:50:41 +02:00 • committed by Yangshun Tay
parent 16bec1cb47
commit 195e934858
2 changed files with 33 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/docusaurus-1.x/lib/core/nav/SideNav.js
View file

@ -134,7 +134,11 @@ class SideNav extends React.Component {
<section className="navWrapper wrapper">
<div className="navBreadcrumb wrapper">
<div className="navToggle" id="navToggler">
<i />
<div className="hamburger-menu">
<div className="line1" />
<div className="line2" />
<div className="line3" />
</div>
</div>
<h2>
<i>›</i>

80
packages/docusaurus-1.x/lib/static/css/main.css
View file

@ -1736,67 +1736,43 @@ input::placeholder {
width: 18px;
}
.toc .toggleNav .navToggle:before,
.toc .toggleNav .navToggle:after {
border: 5px solid #393939;
border-width: 5px 0;
content: '';
height: 6px;
left: 0;
left: 8px;
margin-top: -8px;
.hamburger-menu {
position: absolute;
top: 6px;
width: 100%;
}
.line1, .line2, .line3 {
width: 100%;
height: 3px;
background-color: #393939;
margin: 3px 0;
transition: 0.4s;
border-radius: 10px;
}
.docsSliderActive .hamburger-menu {
top: 12px;
}
.docsSliderActive .line1 {
position: absolute;
top: 50%;
transform: rotate(-45deg);
}
.docsSliderActive .line2 {
display: none;
}
.docsSliderActive .line3 {
position: absolute;
top: 50%;
transform: rotate(45deg);
width: 3px;
z-index: 1;
}
.toc .toggleNav .navToggle:after {
transform: rotate(-45deg);
}
.toc .toggleNav .navToggle i:before,
.toc .toggleNav .navToggle i:after {
background: transparent;
border-color: transparent #393939;
border-style: solid;
border-width: 0 5px 5px;
content: '';
height: 0;
left: 2px;
margin-top: -7px;
opacity: 1;
position: absolute;
top: 50%;
width: 5px;
z-index: 10;
}
.toggleNav h2 i {
padding: 0 4px;
}
.toc .toggleNav .navToggle i:after {
border-width: 5px 5px 0;
margin-top: 2px;
}
.docsSliderActive .toc .toggleNav .navToggle:before,
.docsSliderActive .toc .toggleNav .navToggle:after {
border-width: 8px 0;
height: 0;
margin-top: -8px;
}
.docsSliderActive .toc .toggleNav .navToggle i {
opacity: 0;
}
.docsSliderActive .tocToggler {
visibility: hidden;
}
.toc .toggleNav .navGroup {
margin-bottom: 16px;
}