Browse Source

fix: use tailwind to set animation style

Peng Xiao 4 years ago
parent
commit
94286c1e05
3 changed files with 6 additions and 11 deletions
  1. 0 10
      resources/css/common.css
  2. 1 1
      src/main/frontend/components/repo.cljs
  3. 5 0
      tailwind.config.js

+ 0 - 10
resources/css/common.css

@@ -724,16 +724,6 @@ li p:last-child,
   overflow-y: scroll;
 }
 
-.loader-reverse {
-    -webkit-animation: spin 2s infinite linear reverse;
-    animation: spin 2s infinite linear reverse;
-}
-
-.loader {
-    -webkit-animation: spin 2s infinite linear;
-    animation: spin 2s infinite linear;
-}
-
 .canceled,
 .done {
   text-decoration: line-through;

+ 1 - 1
src/main/frontend/components/repo.cljs

@@ -104,7 +104,7 @@
               {:on-click #(nfs-handler/refresh! repo refresh-cb)
                :title (str "Import files from the local directory: " (config/get-local-dir repo) ".\nVersion: "
                            version/version)}
-              [:div {:class (if syncing? "loader-reverse" "initial")} svg/refresh]]])
+              [:div {:class (if syncing? "animate-spin-reverse" "initial")} svg/refresh]]])
           (let [changed-files (state/sub [:repo/changed-files repo])
                 should-push? (seq changed-files)
                 git-status (state/sub [:git/status repo])

+ 5 - 0
tailwind.config.js

@@ -34,6 +34,11 @@ module.exports = {
       yellow: colors.amber,
       orange: colors.orange,
       rose: colors.rose
+    },
+    extend: {
+      animation: {
+        'spin-reverse': 'spin 2s linear infinite reverse',
+      }
     }
   }
 }