3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-05 21:27:24 +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"> <section className="navWrapper wrapper">
<div className="navBreadcrumb wrapper"> <div className="navBreadcrumb wrapper">
<div className="navToggle" id="navToggler"> <div className="navToggle" id="navToggler">
<i /> <div className="hamburger-menu">
<div className="line1" />
<div className="line2" />
<div className="line3" />
</div>
</div> </div>
<h2> <h2>
<i>›</i> <i>›</i>

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

@ -1736,67 +1736,43 @@ input::placeholder {
width: 18px; width: 18px;
} }
.toc .toggleNav .navToggle:before, .hamburger-menu {
.toc .toggleNav .navToggle:after { position: absolute;
border: 5px solid #393939; top: 6px;
border-width: 5px 0; width: 100%;
content: ''; }
height: 6px;
left: 0; .line1, .line2, .line3 {
left: 8px; width: 100%;
margin-top: -8px; 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; position: absolute;
top: 50%; top: 50%;
transform: rotate(45deg); 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 { .toggleNav h2 i {
padding: 0 4px; 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 { .toc .toggleNav .navGroup {
margin-bottom: 16px; margin-bottom: 16px;
} }