feat(Popup): add @popup-close-icon-active-color less var

youzan · Feb 6, 2020 · 660b039 · 660b039
1 parent 265bfea
commit 660b039
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 22 deletions.
diff --git a/src/popup/README.md b/src/popup/README.md
@@ -42,7 +42,7 @@ Use `position` prop to set popup display position
 <van-popup
   v-model="show"
   position="top"
-  :style="{ height: '20%' }"
+  :style="{ height: '30%' }"
 />
 ```
 
@@ -53,23 +53,23 @@ Use `position` prop to set popup display position
   v-model="show"
   closeable
   position="bottom"
-  :style="{ height: '20%' }"
+  :style="{ height: '30%' }"
 />
 <!-- Custom Icon -->
 <van-popup
   v-model="show"
   closeable
   close-icon="close"
   position="bottom"
-  :style="{ height: '20%' }"
+  :style="{ height: '30%' }"
 />
 <!-- Icon Position -->
 <van-popup
   v-model="show"
   closeable
   close-icon-position="top-left"
   position="bottom"
-  :style="{ height: '20%' }"
+  :style="{ height: '30%' }"
 />
 ```
 
@@ -80,7 +80,7 @@ Use `position` prop to set popup display position
   v-model="show"
   round
   position="bottom"
-  :style="{ height: '20%' }"
+  :style="{ height: '30%' }"
 />
 ```
 

diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md
@@ -48,7 +48,7 @@ export default {
 <van-popup
   v-model="show"
   position="top"
-  :style="{ height: '20%' }"
+  :style="{ height: '30%' }"
 />
 ```
 
@@ -61,23 +61,23 @@ export default {
   v-model="show"
   closeable
   position="bottom"
-  :style="{ height: '20%' }"
+  :style="{ height: '30%' }"
 />
 <!-- 自定义图标 -->
 <van-popup
   v-model="show"
   closeable
   close-icon="close"
   position="bottom"
-  :style="{ height: '20%' }"
+  :style="{ height: '30%' }"
 />
 <!-- 图标位置 -->
 <van-popup
   v-model="show"
   closeable
   close-icon-position="top-left"
   position="bottom"
-  :style="{ height: '20%' }"
+  :style="{ height: '30%' }"
 />
 ```
 
@@ -90,7 +90,7 @@ export default {
   v-model="show"
   round
   position="bottom"
-  :style="{ height: '20%' }"
+  :style="{ height: '30%' }"
 />
 ```
 

diff --git a/src/popup/demo/index.vue b/src/popup/demo/index.vue
@@ -17,21 +17,21 @@
       <van-cell :title="$t('buttonLeft')" is-link @click="showLeft = true" />
       <van-cell :title="$t('buttonRight')" is-link @click="showRight = true" />
 
-      <van-popup v-model="showTop" position="top" :style="{ height: '20%' }" />
+      <van-popup v-model="showTop" position="top" :style="{ height: '30%' }" />
       <van-popup
         v-model="showBottom"
         position="bottom"
-        :style="{ height: '20%' }"
+        :style="{ height: '30%' }"
       />
       <van-popup
         v-model="showLeft"
         position="left"
-        :style="{ width: '20%', height: '100%' }"
+        :style="{ width: '30%', height: '100%' }"
       />
       <van-popup
         v-model="showRight"
         position="right"
-        :style="{ width: '20%', height: '100%' }"
+        :style="{ width: '30%', height: '100%' }"
       />
     </demo-block>
 
@@ -56,21 +56,21 @@
         v-model="showCloseIcon"
         closeable
         position="bottom"
-        :style="{ height: '20%' }"
+        :style="{ height: '30%' }"
       />
       <van-popup
         v-model="showCustomCloseIcon"
         closeable
         close-icon="close"
         position="bottom"
-        :style="{ height: '20%' }"
+        :style="{ height: '30%' }"
       />
       <van-popup
         v-model="showCustomIconPosition"
         closeable
         close-icon-position="top-left"
         position="bottom"
-        :style="{ height: '20%' }"
+        :style="{ height: '30%' }"
       />
     </demo-block>
 
@@ -84,7 +84,7 @@
         v-model="showRoundCorner"
         round
         position="bottom"
-        :style="{ height: '20%' }"
+        :style="{ height: '30%' }"
       />
     </demo-block>
 

diff --git a/src/popup/index.less b/src/popup/index.less
@@ -96,7 +96,7 @@
       cursor: pointer;
 
       &:active {
-        opacity: @active-opacity;
+        color: @popup-close-icon-active-color;
       }
 
       &--top-left {

diff --git a/src/style/var.less b/src/style/var.less
@@ -71,7 +71,7 @@
 @action-sheet-item-disabled-text-color: @gray-5;
 @action-sheet-subname-color: @gray-7;
 @action-sheet-subname-font-size: @font-size-sm;
-@action-sheet-close-icon-size: 20px;
+@action-sheet-close-icon-size: 22px;
 @action-sheet-close-icon-color: @gray-5;
 @action-sheet-close-icon-active-color: @gray-6;
 @action-sheet-close-icon-padding: 0 @padding-md;
@@ -527,8 +527,9 @@
 @popup-background-color: @white;
 @popup-transition: transform @animation-duration-base ease-out;
 @popup-round-border-radius: 20px;
-@popup-close-icon-size: 18px;
-@popup-close-icon-color: @gray-6;
+@popup-close-icon-size: 22px;
+@popup-close-icon-color: @gray-5;
+@popup-close-icon-active-color: @gray-6;
 @popup-close-icon-margin: 16px;
 @popup-close-icon-z-index: 1;