mirror of
https://gitee.com/docsifyjs/docsify.git
synced 2024-12-02 20:20:30 +08:00
Fix menu toggle style
This commit is contained in:
parent
b15b286c5c
commit
b4e0d54d7b
@ -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.
|
||||||
|
15
src/event.js
15
src/event.js
@ -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 () {
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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>`
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
Loading…
Reference in New Issue
Block a user