refactor(ui): check transition property of all components

affects: @varlet/ui
varletjs · Nov 16, 2021 · e9ec891 · e9ec891
1 parent af893e9
commit e9ec891
Show file tree

Hide file tree

Showing 10 changed files with 11 additions and 4 deletions.
diff --git a/packages/varlet-ui/src/action-sheet/actionSheet.less b/packages/varlet-ui/src/action-sheet/actionSheet.less
@@ -28,6 +28,7 @@
   padding: 10px 0;
   max-height: 80%;
   background: var(--action-sheet-background);
+  transition: background-color 0.25s;
 
   &__popup-radius {
     border-radius: var(--action-sheet-border-radius);

diff --git a/packages/varlet-ui/src/app-bar/appBar.less b/packages/varlet-ui/src/app-bar/appBar.less
@@ -22,6 +22,7 @@
   height: var(--app-bar-height);
   background: var(--app-bar-color);
   color: var(--app-bar-text-color);
+  transition: background-color 0.25s;
 
   &__title {
     flex: 1;

diff --git a/packages/varlet-ui/src/card/card.less b/packages/varlet-ui/src/card/card.less
@@ -48,7 +48,7 @@
   padding: var(--card-padding);
   line-height: var(--card-line-height);
   background: var(--card-background);
-  transition: 0.25s background-color;
+  transition: background-color 0.25s;
 
   &__image {
     width: var(--card-image-width);

diff --git a/packages/varlet-ui/src/counter/counter.less b/packages/varlet-ui/src/counter/counter.less
@@ -34,6 +34,7 @@
     border-radius: var(--counter-button-size);
     padding: var(--counter-padding);
     background: var(--counter-background);
+    transition: background-color 0.25s;
   }
 
   &__decrement-button[var-counter-cover] {

diff --git a/packages/varlet-ui/src/dialog/dialog.less b/packages/varlet-ui/src/dialog/dialog.less
@@ -32,6 +32,7 @@
   width: var(--dialog-width);
   border-radius: 3px;
   background: var(--dialog-background);
+  transition: 0.25s background-color;
 
   &__popup-radius[var-dialog-cover] {
     border-radius: var(--dialog-border-radius);

diff --git a/packages/varlet-ui/src/divider/divider.less b/packages/varlet-ui/src/divider/divider.less
@@ -22,7 +22,7 @@
   border-top: 1px solid var(--divider-color);
   margin: var(--divider-text-margin);
   font-size: var(--font-size-md);
-  color: #888;
+  color: var(--divider-text-color);
 
   &--vertical {
     width: 0;

diff --git a/packages/varlet-ui/src/skeleton/skeleton.less b/packages/varlet-ui/src/skeleton/skeleton.less
@@ -64,7 +64,7 @@
     background-color: var(--skeleton-card-background-color);
     margin-bottom: var(--skeleton-card-margin-bottom);
     border-radius: var(--skeleton-card-border-radius);
-    transition: 0.25s background-color;
+    transition: background-color 0.25s;
   }
 
   &__article {

diff --git a/packages/varlet-ui/src/tabs/tabs.less b/packages/varlet-ui/src/tabs/tabs.less
@@ -20,7 +20,7 @@
   border-radius: var(--tabs-radius);
   background: var(--tabs-background);
   overflow: hidden;
-  transition: 0.25s background-color;
+  transition: background-color 0.25s;
 
   &__tab-wrap {
     position: relative;

diff --git a/packages/varlet-ui/src/themes/dark/divider.ts b/packages/varlet-ui/src/themes/dark/divider.ts
@@ -1,3 +1,4 @@
 export default {
   '--divider-color': 'rgba(255, 255, 255, 0.12)',
+  '--divider-text-color': '#aaa',
 }
diff --git a/packages/varlet-ui/src/uploader/uploader.less b/packages/varlet-ui/src/uploader/uploader.less
@@ -116,6 +116,7 @@
     background: var(--uploader-file-cover-background);
     object-fit: var(--uploader-file-cover-fit);
     pointer-events: none;
+    transition: background-color 0.25s;
   }
 
   &__file-close {
@@ -199,6 +200,7 @@
       z-index: 1;
       animation: var-uploader-loading-animation 0.6s infinite;
       background: var(--uploader-loading-background);
+      transition: background-color 0.25s;
     }
   }