mirror of
https://github.com/next-theme/hexo-theme-next.git
synced 2026-01-20 19:02:33 +00:00
New mixin sidebar-toggle
This commit is contained in:
parent
b34b8e5b98
commit
d17420b8a2
@ -1,5 +1,4 @@
|
|||||||
.back-to-top {
|
.back-to-top {
|
||||||
background: transparent;
|
|
||||||
margin: 20px - $sidebar-offset -10px -20px;
|
margin: 20px - $sidebar-offset -10px -20px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity $transition-ease;
|
transition: opacity $transition-ease;
|
||||||
|
|||||||
@ -4,12 +4,12 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: $b2t-color;
|
color: $b2t-color;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
left: $b2t-position-right;
|
|
||||||
opacity: $b2t-opacity;
|
opacity: $b2t-opacity;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
transition: bottom $transition-ease;
|
transition: bottom $transition-ease;
|
||||||
z-index: $zindex-3;
|
z-index: $zindex-3;
|
||||||
|
sidebar-toggle();
|
||||||
|
|
||||||
if (hexo-config('back2top.scrollpercent')) {
|
if (hexo-config('back2top.scrollpercent')) {
|
||||||
width: initial;
|
width: initial;
|
||||||
@ -30,7 +30,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
+tablet-mobile() {
|
+tablet-mobile() {
|
||||||
left: $b2t-position-right-mobile;
|
|
||||||
opacity: $b2t-opacity-hover;
|
opacity: $b2t-opacity-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
.book-mark-link {
|
.book-mark-link {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: $b2t-position-right;
|
|
||||||
top: -10px;
|
top: -10px;
|
||||||
transition: top .3s;
|
transition: top .3s;
|
||||||
|
sidebar-toggle(true);
|
||||||
|
|
||||||
+tablet-mobile() {
|
+tablet-mobile() {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@ -3,14 +3,13 @@
|
|||||||
bottom: 45px;
|
bottom: 45px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
left: $b2t-position-right;
|
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 14px;
|
width: 14px;
|
||||||
z-index: $zindex-3;
|
z-index: $zindex-3;
|
||||||
|
sidebar-toggle();
|
||||||
|
|
||||||
+tablet-mobile() {
|
+tablet-mobile() {
|
||||||
left: $b2t-position-right-mobile;
|
|
||||||
opacity: $b2t-opacity-hover;
|
opacity: $b2t-opacity-hover;
|
||||||
|
|
||||||
if (!hexo-config('sidebar.onmobile')) {
|
if (!hexo-config('sidebar.onmobile')) {
|
||||||
|
|||||||
@ -109,3 +109,21 @@ main-container() {
|
|||||||
width: $content-desktop-largest;
|
width: $content-desktop-largest;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
sidebar-toggle($reverse = false) {
|
||||||
|
$condition = hexo-config('sidebar.position') == 'right';
|
||||||
|
if (($scheme == 'Muse') || ($scheme == 'Mist')) {
|
||||||
|
$condition = $condition == $reverse;
|
||||||
|
}
|
||||||
|
if ($condition) {
|
||||||
|
left: $b2t-position-right;
|
||||||
|
+tablet-mobile() {
|
||||||
|
left: $b2t-position-right-mobile;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
right: $b2t-position-right;
|
||||||
|
+tablet-mobile() {
|
||||||
|
right: $b2t-position-right-mobile;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -12,19 +12,6 @@ if (hexo-config('sidebar.position') == 'right') {
|
|||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-toggle, .back-to-top {
|
|
||||||
left: auto;
|
|
||||||
right: $b2t-position-right;
|
|
||||||
|
|
||||||
+tablet-mobile() {
|
|
||||||
right: $b2t-position-right-mobile;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.book-mark-link {
|
|
||||||
left: $b2t-position-right;
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
.sidebar-active {
|
.sidebar-active {
|
||||||
+desktop() {
|
+desktop() {
|
||||||
|
|||||||
@ -74,10 +74,6 @@ if (hexo-config('sidebar.position') == 'right') {
|
|||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.book-mark-link {
|
|
||||||
left: $b2t-position-right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-inner {
|
.footer-inner {
|
||||||
padding-right: $sidebar-desktop + $sidebar-offset;
|
padding-right: $sidebar-desktop + $sidebar-offset;
|
||||||
}
|
}
|
||||||
@ -85,15 +81,6 @@ if (hexo-config('sidebar.position') == 'right') {
|
|||||||
.footer-inner {
|
.footer-inner {
|
||||||
padding-left: $sidebar-desktop + $sidebar-offset;
|
padding-left: $sidebar-desktop + $sidebar-offset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-to-top {
|
|
||||||
left: auto;
|
|
||||||
right: $b2t-position-right;
|
|
||||||
|
|
||||||
+tablet-mobile() {
|
|
||||||
right: $b2t-position-right-mobile;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-inner {
|
.footer-inner {
|
||||||
|
|||||||
@ -263,8 +263,8 @@ $site-state-item-name-color = inherit;
|
|||||||
// Components
|
// Components
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
// Back to top
|
// Back to top
|
||||||
$b2t-opacity = 1;
|
$b2t-opacity = .8;
|
||||||
$b2t-opacity-hover = .8;
|
$b2t-opacity-hover = 1;
|
||||||
$b2t-position-bottom = -100px;
|
$b2t-position-bottom = -100px;
|
||||||
$b2t-position-bottom-on = 19px;
|
$b2t-position-bottom-on = 19px;
|
||||||
$b2t-position-right = 30px;
|
$b2t-position-right = 30px;
|
||||||
|
|||||||
@ -321,8 +321,7 @@ NexT.utils = {
|
|||||||
const sidebarOffset = CONFIG.sidebar.offset || 12;
|
const sidebarOffset = CONFIG.sidebar.offset || 12;
|
||||||
const sidebarb2tHeight = CONFIG.back2top.enable && CONFIG.back2top.sidebar ? document.querySelector('.back-to-top').offsetHeight : 0;
|
const sidebarb2tHeight = CONFIG.back2top.enable && CONFIG.back2top.sidebar ? document.querySelector('.back-to-top').offsetHeight : 0;
|
||||||
let sidebarSchemePadding = (CONFIG.sidebar.padding * 2) + sidebarNavHeight + sidebarb2tHeight;
|
let sidebarSchemePadding = (CONFIG.sidebar.padding * 2) + sidebarNavHeight + sidebarb2tHeight;
|
||||||
// Margin of sidebar b2t: -4px -10px -18px, brings a different of 22px.
|
if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') sidebarSchemePadding += sidebarOffset * 2;
|
||||||
if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') sidebarSchemePadding += (sidebarOffset * 2) - 22;
|
|
||||||
// Initialize Sidebar & TOC Height.
|
// Initialize Sidebar & TOC Height.
|
||||||
const sidebarWrapperHeight = document.body.offsetHeight - sidebarSchemePadding + 'px';
|
const sidebarWrapperHeight = document.body.offsetHeight - sidebarSchemePadding + 'px';
|
||||||
document.querySelector('.site-overview-wrap').style.maxHeight = sidebarWrapperHeight;
|
document.querySelector('.site-overview-wrap').style.maxHeight = sidebarWrapperHeight;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user