Fix wrong sidebar style on mobile (#808)

stevenjoezhang · web-flow · commit 8ed5d6edba14 · 2019-04-05T00:44:09.000+08:00
* Fix #807 * Add `$b2t-opacity-hover` & Remove hover highlight
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

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,8 @@`
`18`	`18`	`&.back-to-top-on {`
`19`	`19`	`bottom: $b2t-position-bottom-on;`
`20`	`20`	`}`
`21`		`- &:hover {`
`22`		`- color: $sidebar-highlight;`
	`21`	`+ +tablet-mobile() {`
	`22`	`+ opacity: $b2t-opacity-hover;`
	`23`	`+ right: $b2t-position-right-mobile;`
`23`	`24`	`}`
`24`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -76,11 +76,6 @@ show() {`
`76`	`76`	`display: block;`
`77`	`77`	`}`
`78`	`78`
`79`		`-fixbutton() {`
`80`		`- right: 20px;`
`81`		`- opacity: 0.8;`
`82`		`-}`
`83`		`-`
`84`	`79`	`random-color($min, $max) {`
`85`	`80`	`return floor(math(0, 'random') * ($max - $min + 1) + $min);`
`86`	`81`	`}`