Fix menu toggle style

This commit is contained in:
qingwei.li 2016-12-31 14:53:27 +08:00
parent b15b286c5c
commit b4e0d54d7b
4 changed files with 31 additions and 17 deletions

View File

@ -1,3 +1,7 @@
## 1.4.2
### Bug fixes
- Fix scroll to top.
## 1.4.1 ## 1.4.1
### Bug fixes ### Bug fixes
- Fix generate slug. - Fix generate slug.

View File

@ -94,19 +94,14 @@ export function bindToggle (dom) {
dom.addEventListener('click', () => body.classList.toggle('close')) dom.addEventListener('click', () => body.classList.toggle('close'))
if (!/mobile/i.test(navigator.userAgent)) return if (isMobile()) {
document.querySelector('aside').addEventListener('click', event => { document.querySelector('aside')
body.classList.toggle('close') .addEventListener('click', _ => body.classList.toggle('close'))
}) }
} }
let cacheContentDOM
export function scroll2Top () { export function scroll2Top () {
if (!cacheContentDOM) { document.body.scrollTop = 0
const dom = isMobile() ? 'body' : 'section.content'
cacheContentDOM = document.querySelector(dom)
}
cacheContentDOM.scrollTop = 0
} }
export function sticky () { export function sticky () {

View File

@ -177,7 +177,7 @@ main {
.sidebar { .sidebar {
border-right: 1px solid rgba(0, 0, 0, .07); border-right: 1px solid rgba(0, 0, 0, .07);
overflow-y: auto; overflow-y: auto;
padding-top: 40px; padding: 40px 0;
position: absolute 0 * 0 0; position: absolute 0 * 0 0;
transition: transform 250ms ease-out; transition: transform 250ms ease-out;
width: $sidebar-width; width: $sidebar-width;
@ -206,17 +206,18 @@ main {
.sidebar-toggle { .sidebar-toggle {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
bottom: 10px;
left: 10px;
outline: none; outline: none;
position: absolute; position: absolute * * 0 0;
text-align: center; text-align: center;
transition: opacity .3s; transition: opacity .3s;
width: 30px; width: 30px;
z-index: 30; z-index: 30;
outline: none; outline: none;
width: calc($sidebar-width - 16px);
padding: 10px;
background-color: rgba($color-bg, .8);
&:hover { .sidebar-toggle-button:hover {
opacity: .4; opacity: .4;
} }
@ -290,6 +291,10 @@ body.close {
transform: translateX(-$sidebar-width); transform: translateX(-$sidebar-width);
} }
.sidebar-toggle {
width: auto;
}
.content { .content {
left: 0; left: 0;
} }
@ -323,11 +328,19 @@ body.close {
transition: transform 250ms ease-out; transition: transform 250ms ease-out;
} }
.sidebar-toggle {
width: auto;
}
body.close { body.close {
.sidebar { .sidebar {
transform: translateX($sidebar-width); transform: translateX($sidebar-width);
} }
.sidebar-toggle {
width: calc($sidebar-width - 16px);
}
.content { .content {
transform: translateX($sidebar-width); transform: translateX($sidebar-width);
} }

View File

@ -47,8 +47,10 @@ export function cover () {
export function toggle () { export function toggle () {
return `<button class="sidebar-toggle"> return `<button class="sidebar-toggle">
<span></span><span></span><span></span> <div class="sidebar-toggle-button">
</button>` <span></span><span></span><span></span>
</div>
</button>`
} }
/** /**