Fixed transitions on back-to-top button

squidfunk · Jul 10, 2021 · 7ca4ca1 · 7ca4ca1
1 parent f6efb78
commit 7ca4ca1
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 8 deletions.
diff --git a/material/assets/stylesheets/main.2e1f6369.min.css.map b/material/assets/stylesheets/main.2e1f6369.min.css.map
diff --git a/.../assets/stylesheets/main.2e1f6369.min.css → .../assets/stylesheets/main.80873392.min.css b/.../assets/stylesheets/main.2e1f6369.min.css → .../assets/stylesheets/main.80873392.min.css
diff --git a/material/assets/stylesheets/main.80873392.min.css.map b/material/assets/stylesheets/main.80873392.min.css.map
diff --git a/material/base.html b/material/base.html
@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.2e1f6369.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.80873392.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.f1a3b89f.min.css' | url }}">

diff --git a/src/assets/stylesheets/main/layout/_top.scss b/src/assets/stylesheets/main/layout/_top.scss
@@ -33,17 +33,18 @@
   padding: px2rem(8px) px2rem(16px);
   color: var(--md-default-fg-color--light);
   font-size: px2rem(14px);
-  background: var(--md-default-bg-color);
+  background-color: var(--md-default-bg-color);
   border-radius: px2rem(32px);
   outline: none;
   box-shadow:
     0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.1),
     0 0           px2rem(1px)  hsla(0, 0%, 0%, 0.25);
   transform: translate(-50%, 0);
   transition:
-    opacity          125ms,
+    color            125ms,
+    background-color 125ms,
     transform        125ms cubic-bezier(0.4, 0, 0.2, 1),
-    background-color 125ms;
+    opacity          125ms;
 
   // [print]: Hide back-to-top button
   @media print {
@@ -67,7 +68,7 @@
   &:focus,
   &:hover {
     color: var(--md-accent-bg-color);
-    background: var(--md-accent-fg-color);
+    background-color: var(--md-accent-fg-color);
   }
 
   // Inline icon