Fix wrong sidebar style on mobile (#808)

* Fix #807 * Add `$b2t-opacity-hover` & Remove hover highlight
theme-next · Apr 4, 2019 · 8ed5d6e · 8ed5d6e
1 parent e35d73c
commit 8ed5d6e
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 13 deletions.
diff --git a/source/css/_common/components/back-to-top-sidebar.styl b/source/css/_common/components/back-to-top-sidebar.styl
@@ -6,10 +6,10 @@
   opacity: $b2t-opacity;
   cursor: pointer;
   text-align: center;
-  &:hover { opacity: 0.8; }
+  &:hover { opacity: $b2t-opacity-hover; }
 
   +tablet-mobile() {
-    hexo-config('sidebar.onmobile') ? fixbutton() : hide();
+    hide() if not hexo-config('sidebar.onmobile');
   }
 
   &.back-to-top-on {

diff --git a/source/css/_common/components/back-to-top.styl b/source/css/_common/components/back-to-top.styl
@@ -18,7 +18,8 @@
   &.back-to-top-on {
     bottom: $b2t-position-bottom-on;
   }
-  &:hover {
-    color: $sidebar-highlight;
+  +tablet-mobile() {
+    opacity: $b2t-opacity-hover;
+    right: $b2t-position-right-mobile;
   }
 }
diff --git a/source/css/_common/components/sidebar/sidebar-toggle.styl b/source/css/_common/components/sidebar/sidebar-toggle.styl
@@ -1,7 +1,4 @@
 .sidebar-toggle {
-  &:hover .sidebar-toggle-line {
-    background: $sidebar-highlight;
-  }
   position: fixed;
   right: $b2t-position-right;
   bottom: 45px;
@@ -14,7 +11,9 @@
   cursor: pointer;
 
   +tablet-mobile() {
-    hexo-config('sidebar.onmobile') ? fixbutton() : hide();
+    opacity: $b2t-opacity-hover;
+    right: $b2t-position-right-mobile;
+    hide() if not hexo-config('sidebar.onmobile');
   }
 }
 

diff --git a/source/css/_mixins/base.styl b/source/css/_mixins/base.styl
@@ -76,11 +76,6 @@ show() {
   display: block;
 }
 
-fixbutton() {
-  right: 20px;
-  opacity: 0.8;
-}
-
 random-color($min, $max) {
   return floor(math(0, 'random') * ($max - $min + 1) + $min);
 }

diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl
@@ -279,9 +279,11 @@ $toc-link-active-current-border-color = $sidebar-highlight
 // --------------------------------------------------
 // Back to top
 $b2t-opacity                  = 1
+$b2t-opacity-hover            = 0.8
 $b2t-position-bottom          = -100px
 $b2t-position-bottom-on       = 19px
 $b2t-position-right           = 30px
+$b2t-position-right-mobile    = 20px
 $b2t-font-size                = 12px
 $b2t-color                    = white
 $b2t-bg-color                 = $black-deep