Browse Source

style(notify,range,swiper,switch,toast): add sass param

richard1015 3 years ago
parent
commit
bc20022271

+ 1 - 0
src/packages/__VUE/notify/index.scss

@@ -29,6 +29,7 @@
   text-align: center;
   word-wrap: break-word;
   height: $notify-height;
+  line-height: $notify-line-height;
   &--base {
     background: $notify-base-background-color;
   }

+ 4 - 4
src/packages/__VUE/range/index.scss

@@ -40,12 +40,12 @@
 
   &-button {
     display: block;
-    width: 24px;
-    height: 24px;
-    background-color: $white;
+    width: $range-bar-btn-width;
+    height: $range-bar-btn-height;
+    background-color: $range-bar-btn-bg-color;
     border-radius: 50%;
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-    border: 1px solid $primary-color;
+    border: $range-bar-btn-border;
     outline: none;
 
     &-wrapper,

+ 4 - 4
src/packages/__VUE/swiper/index.scss

@@ -21,10 +21,10 @@
     bottom: 12px;
     transform: translateX(-50%);
     i {
-      width: 8px;
-      height: 3px;
-      margin-right: 7px;
-      border-radius: 2px;
+      width: $swiper-pagination-item-width;
+      height: $swiper-pagination-item-height;
+      margin-right: $swiper-pagination-item-margin-right;
+      border-radius: $swiper-pagination-item-border-radius;
       &:last-child {
         margin-right: 0;
       }

+ 8 - 8
src/packages/__VUE/switch/index.scss

@@ -3,7 +3,7 @@
   display: inline-flex;
   align-items: center;
   background-color: $primary-color;
-  border-radius: 21px;
+  border-radius: $switch-border-radius;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center center;
@@ -37,17 +37,17 @@
     opacity: 0.6;
   }
   &.nut-switch-base {
-    width: 36px;
-    height: 21px;
-    line-height: 21px;
+    width: $switch-width;
+    height: $switch-height;
+    line-height: $switch-line-height;
     .switch-button {
-      height: 13px;
-      width: 13px;
-      transform: translateX(30%);
+      height: $switch-inside-width;
+      width: $switch-inside-height;
+      transform: $switch-inside-close-transform;
     }
     &.switch-open {
       .switch-button {
-        transform: translateX(146%);
+        transform: $switch-inside-open-transform;
       }
     }
     &.switch-close {

+ 8 - 7
src/packages/__VUE/toast/index.scss

@@ -32,27 +32,28 @@
     justify-content: center;
     pointer-events: auto;
     height: 100%;
+    background: $toast-cover-bg-color;
   }
   &-inner {
     display: inline-block;
-    font-size: $font-size-base;
+    font-size: $toast-text-font-size;
     min-width: 40%;
     max-width: 65%;
     text-align: center;
-    padding: 24px 30px;
+    padding: $toast-inner-padding;
     word-break: break-all;
-    background: rgba(0, 0, 0, 0);
-    border-radius: 12px;
-    color: $white;
+    background: $toast-inner-bg-color;
+    border-radius: $toast-inner-border-radius;
+    color: $toast-font-color;
   }
   &-text {
-    font-size: 14px;
+    font-size: $toast-text-font-size;
     &:empty {
       margin-bottom: -8px;
     }
   }
   &-title {
-    font-size: 16px;
+    font-size: $toast-title-font-size;
     &:empty {
       margin-bottom: -8px;
     }

+ 2 - 2
src/packages/__VUE/toast/index.taro.vue

@@ -76,7 +76,7 @@ export default create({
     },
     bgColor: {
       type: String,
-      default: 'rgba(0, 0, 0, .8)'
+      default: ''
     },
 
     onClose: Function,
@@ -87,7 +87,7 @@ export default create({
     },
     coverColor: {
       type: String,
-      default: 'rgba(0, 0, 0, 0)'
+      default: ''
     },
     title: {
       type: String,

+ 2 - 2
src/packages/__VUE/toast/index.ts

@@ -14,11 +14,11 @@ const defaultOptions = {
   icon: null,
   textAlignCenter: true, // 未实现
   loadingRotate: true, // 未实现
-  bgColor: 'rgba(0, 0, 0, .8)',
+  bgColor: '',
   onClose: null, // 未实现
   unmount: null,
   cover: false, //透明遮罩层 // 未实现
-  coverColor: 'rgba(0, 0, 0, 0)', // 未实现
+  coverColor: '', // 未实现
   closeOnClickOverlay: false // 未实现
 };
 

+ 2 - 2
src/packages/__VUE/toast/index.vue

@@ -72,7 +72,7 @@ export default create({
     },
     bgColor: {
       type: String,
-      default: 'rgba(0, 0, 0, .8)'
+      default: ''
     },
     onClose: Function,
     unmount: Function,
@@ -82,7 +82,7 @@ export default create({
     },
     coverColor: {
       type: String,
-      default: 'rgba(0, 0, 0, 0)'
+      default: ''
     },
     title: {
       type: String,

+ 30 - 7
src/packages/styles/variables.scss

@@ -3,6 +3,7 @@
 // 主色调
 $primary-color: #fa2c19 !default;
 $primary-color-end: #fa6419 !default;
+
 // 辅助色
 $help-color: #f5f5f5 !default;
 // 标题常规文字
@@ -193,6 +194,23 @@ $avatar-normal-height: 40px !default;
 //switch
 $switch-close-bg-color: #ebebeb !default;
 $switch-close--cline-bg-color: #f0f0f0 !default;
+$switch-width: 36px !default;
+$switch-height: 21px !default;
+$switch-line-height: 21px !default;
+$switch-border-radius: 21px !default;
+$switch-inside-width: 13px !default;
+$switch-inside-height: 13px !default;
+$switch-inside-open-transform: translateX(146%) !default;
+$switch-inside-close-transform: translateX(30%) !default;
+
+// toast
+$toast-title-font-size: 16px !default;
+$toast-text-font-size: 14px !default;
+$toast-font-color: $white !default;
+$toast-inner-padding: 24px 30px !default;
+$toast-inner-bg-color: rgba(0, 0, 0, 0.8) !default;
+$toast-inner-border-radius: 12px !default;
+$toast-cover-bg-color: rgba(0, 0, 0, 0) !default;
 
 //backtop
 $backtop-border-color: #e0e0e0 !default;
@@ -219,13 +237,8 @@ $notify-text-color: $white !default;
 $notify-padding: 12px 0 !default;
 $notify-font-size: 14px !default;
 $notify-height: 44px !default;
-$notify-base-background-color: linear-gradient(
-  135deg,
-  rgba(250, 44, 25, 1) 0%,
-  rgba(250, 63, 25, 1) 45%,
-  rgba(250, 89, 25, 1) 83%,
-  rgba(250, 100, 25, 1) 100%
-) !default;
+$notify-line-height: auto !default;
+$notify-base-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
 $notify-primary-background-color: linear-gradient(
   315deg,
   rgba(73, 143, 242, 1) 0%,
@@ -256,6 +269,16 @@ $infiniteloading-bottom-color: #c8c8c8 !default;
 $range-tip-font-color: #333333 !default;
 $range-bg-color: rgba($primary-color, 0.5) !default;
 $range-bar-bg-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
+$range-bar-btn-bg-color: $white !default;
+$range-bar-btn-width: 24px !default;
+$range-bar-btn-height: 24px !default;
+$range-bar-btn-border: 1px solid $primary-color !default;
+
+//swiper
+$swiper-pagination-item-width: 8px !default;
+$swiper-pagination-item-height: 3px !default;
+$swiper-pagination-item-margin-right: 7px !default;
+$swiper-pagination-item-border-radius: 2px !default;
 
 //address
 $address-region-tab-line: linear-gradient(90deg, $primary-color 0%, rgba($primary-color, 0.15) 100%) !default;