feat: change back top style

alauda · Mar 2, 2021 · b1fdc3d · b1fdc3d
1 parent 8f368a4
commit b1fdc3d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/back-top/back-top.component.scss b/src/back-top/back-top.component.scss
@@ -4,32 +4,39 @@
 $block: 'aui-back-top';
 
 .#{$block} {
-  @include transition(opacity);
+  @include transition;
   @include flex-center;
 
   right: $back-top-position-offset;
   bottom: $back-top-position-offset;
   height: $back-top-box-size;
   width: $back-top-box-size;
+  border-color: transparent;
+  border-width: $border-width;
+  border-style: $border-style;
   border-radius: $back-top-border-radius;
-  background-color: $color-black;
+  background-color: $color-white;
   cursor: pointer;
   overflow: hidden;
   visibility: hidden;
   position: fixed;
-  opacity: 0;
+  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 16%);
 
   .aui-back-top__icon {
-    font-size: 24px;
-    color: #fff;
+    font-size: 18px;
+    color: $color-text-help;
   }
 
   &.show {
     visibility: visible;
-    opacity: 0.4;
   }
 
   &:hover {
-    opacity: 0.6;
+    border-color: $color-primary;
+    background-color: $color-primary-ultra-light;
+    box-shadow: none;
+    .aui-back-top__icon {
+      color: $color-primary;
+    }
   }
 }
diff --git a/src/theme/_var.scss b/src/theme/_var.scss
@@ -522,6 +522,6 @@ $accordion-item-header-padding: 12px 0;
 $accordion-item-header-color: #666;
 
 //Back Top
-$back-top-box-size: 40px;
+$back-top-box-size: 36px;
 $back-top-position-offset: 10px;
 $back-top-border-radius: 2px;