oxy-uni-ui 2.0.0 → 2.1.1

package/components/oxy-checkbox/index.scss

@@ -1,102 +1,45 @@
-@import './../common/abstracts/_mixin.scss';
-@import './../common/abstracts/variable.scss';
-
+@import '../common/abstracts/variable.scss';
+@import '../common/abstracts/_mixin.scss';
 .oxy-theme-dark {
   @include b(checkbox) {
     @include e(shape) {
-      background: transparent;
-      border-color: $-checkbox-border-color;
-      color: $-checkbox-check-color;
+      background-color: $-dark-background;
+      border-color: $-color-gray-6;
     }
-
-    @include e(label) {
+    @include e(txt) {
       color: $-dark-color;
     }
-
-    @include when(disabled) {
-      .oxy-checkbox__shape {
-        border-color: $-dark-color-gray;
-        background: $-dark-background4;
-      }
-
-      .oxy-checkbox__label {
-        color: $-dark-color-gray;
-      }
-
-      :deep(.oxy-checkbox__check) {
-        color: $-dark-color-gray;
-      }
-
-      @include when(checked) {
-        .oxy-checkbox__shape {
-          color: $-dark-color-gray;
-        }
-
-        .oxy-checkbox__label {
-          color: $-dark-color-gray;
-        }
-      }
-
-      @include when(button) {
-        .oxy-checkbox__label {
-          border-color: #c8c9cc;
-          background: #3a3a3c;
-          color: $-dark-color-gray;
-        }
-
-        @include when(checked) {
-          .oxy-checkbox__label {
-            border-color: #c8c9cc;
-            background: #3a3a3c;
-            color: #c8c9cc;
-          }
-        }
-      }
-    }
-
-    @include when(button) {
-      .oxy-checkbox__label {
-        background-color: $-dark-background;
-      }
-
-      @include when(checked) {
-        .oxy-checkbox__label {
-          background-color: $-dark-background2;
-        }
-      }
+    @include e(label) {
+      color: $-dark-color3;
     }
   }
 }
-
 @include b(checkbox) {
   display: block;
   margin-bottom: $-checkbox-margin;
-  font-size: 0;
   -webkit-tap-highlight-color: transparent;
   // line-height: 1.2;
-
   @include when(last-child) {
     margin-bottom: 0;
   }
-
   @include e(shape) {
     position: relative;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: $-checkbox-size;
     height: $-checkbox-size;
     border: 4rpx solid $-checkbox-border-color;
-    border-radius: 50%;
+    border-radius: $-radius-circle;
     color: $-checkbox-check-color;
     background: $-checkbox-bg;
     vertical-align: middle;
     transition: background 0.2s;
     box-sizing: border-box;
-
     @include when(square) {
       border-radius: $-checkbox-square-radius;
     }
   }
-
   @include e(input) {
     position: absolute;
     width: 0;
@@ -104,21 +47,22 @@
     margin: 0;
     opacity: 0;
   }
-
+  @include edeep(check, indeterminate) {
+    font-size: $-checkbox-icon-size;
+  }
   @include edeep(btn-check) {
     display: inline-block;
     font-size: $-checkbox-icon-size;
     margin-right: 8rpx;
     vertical-align: middle;
+    color: currentColor;
   }
-
   @include e(txt) {
     display: inline-block;
     vertical-align: middle;
-    line-height: 40rpx;
+    line-height: $-lh-base;
     @include lineEllipsis;
   }
-
   @include e(label) {
     position: relative;
     display: inline-block;
@@ -127,189 +71,100 @@
     font-size: $-checkbox-label-fs;
     color: $-checkbox-label-color;
   }
-
-  @include edeep(check) {
-    color: $-checkbox-check-color;
-    font-size: $-checkbox-icon-size;
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-
-  @include edeep(indeterminate) {
-    color: $-checkbox-check-color;
-    font-size: $-checkbox-icon-size;
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-
-  @include when(indeterminate) {
-    .oxy-checkbox__shape {
-      color: $-checkbox-checked-color;
-      background: currentColor;
-      border-color: currentColor;
-    }
-
-    :deep(.oxy-checkbox__indeterminate) {
-      opacity: 1;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-    :deep(.oxy-checkbox__check) {
-      display: none;
-    }
-  }
-
-  @include when(checked) {
-    .oxy-checkbox__shape {
-      display: inline-block;
-      color: $-checkbox-checked-color;
-      background: currentColor;
-      border-color: currentColor;
-    }
-
-    :deep(.oxy-checkbox__check) {
-      opacity: 1;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    :deep(.oxy-checkbox__indeterminate) {
-      display: none;
+  @include e(icon) {
+    background: $-color-white;
+    border-radius: $-checkbox-square-radius;
+    @include when(icon-checked) {
+      background: $-checkbox-checked-color;
+      border-color: $-checkbox-checked-color;
     }
   }
-
-
   @include when(button) {
     display: inline-block;
+    width: 33.3333%;
     margin-bottom: 0;
-    margin-right: $-checkbox-margin;
-    vertical-align: top;
-    font-size: $-checkbox-button-font-size;
-
-    @include when(last-child) {
-      margin-right: 0;
-    }
-
-    .oxy-checkbox__shape {
-      width: 0;
-      height: 0;
-      overflow: hidden;
-      opacity: 0;
-      border: none;
-    }
-
     .oxy-checkbox__label {
-      display: inline-flex;
-      flex-direction: row;
-      justify-content: center;
+      display: flex;
       align-items: center;
-      min-width: $-checkbox-button-min-width;
+      justify-content: center;
       height: $-checkbox-button-height;
-      font-size: $-checkbox-button-font-size;
-      margin-left: 0;
-      padding: 10rpx 30rpx;
+      min-width: $-checkbox-button-min-width;
+      padding: 16rpx 32rpx;
       border: 1px solid $-checkbox-button-border;
-      background-color: $-checkbox-button-bg;
-      border-radius: $-checkbox-button-radius;
-      transition: color 0.2s, border 0.2s;
       box-sizing: border-box;
+      border-radius: $-checkbox-button-radius;
+      background: $-checkbox-button-bg;
+      transition: background 0.2s;
     }
-
-    @include when(checked) {
+    @include when(disabled) {
       .oxy-checkbox__label {
-        color: $-checkbox-checked-color;
-        background-color: $-checkbox-bg;
-        border-color: $-checkbox-checked-color;
-        border-color: currentColor;
+        border-color: $-checkbox-button-disabled-border;
+        color: $-checkbox-disabled-label-color;
       }
     }
-  }
-
-  @include when(inline) {
-    display: inline-block;
-    margin-bottom: 0;
-    margin-right: $-checkbox-margin;
-
-    @include when(last-child) {
-      margin-right: 0;
-    }
-  }
-
-  @include when(disabled) {
-    .oxy-checkbox__shape {
-      border-color: $-checkbox-border-color;
-      background: $-checkbox-disabled-check-bg;
-    }
-
-    .oxy-checkbox__label {
-      color: $-checkbox-disabled-label-color;
-    }
-
     @include when(checked) {
-      .oxy-checkbox__shape {
-        color: $-checkbox-disabled-check-color;
-      }
-
       .oxy-checkbox__label {
-        color: $-checkbox-disabled-label-color;
+        border-color: $-checkbox-checked-color;
+        background: $-color-white;
+        color: $-checkbox-checked-color;
       }
     }
-
-    @include when(button) {
-      .oxy-checkbox__label {
-        background: $-checkbox-disabled-color;
-        border-color: $-checkbox-button-border;
-        color: $-checkbox-disabled-label-color;
-      }
-
-      @include when(checked) {
+    @include when(checked) {
+      @include when(disabled) {
         .oxy-checkbox__label {
-          border-color: $-checkbox-button-disabled-border;
+          border-color: $-checkbox-disabled-check-bg;
+          background: $-checkbox-disabled-check-bg;
+          color: $-checkbox-disabled-check-color;
         }
       }
     }
   }
-
-  // 以下内容用于解决父子组件样式隔离的问题 —— START
   @include when(cell-box) {
-    padding: 26rpx 30rpx;
-    margin: 0;
-
-    @include when(large) {
-      padding: 28rpx 30rpx;
-    }
-  }
-
-  @include when(button-box) {
-    display: inline-flex;
+    display: inline-block;
+    padding: 32rpx 32rpx;
     width: 33.3333%;
-    padding: 24rpx 24rpx 0 0;
     box-sizing: border-box;
-
-    .oxy-checkbox__label {
-      width: 100%;
-    }
-
-    &:last-child::after {
-      content: '';
-      display: table;
-      clear: both;
+    font-size: 0;
+    @include when(checked) {
+      color: $-checkbox-checked-color;
     }
   }
-
   @include when(large) {
     .oxy-checkbox__shape {
       width: $-checkbox-large-size;
       height: $-checkbox-large-size;
-      font-size: $-checkbox-large-size;
     }
-
     .oxy-checkbox__label {
       font-size: $-checkbox-large-label-fs;
     }
+    @include edeep(check, indeterminate, btn-check) {
+      font-size: $-checkbox-large-icon-size;
+    }
+  }
+  @include when(checked) {
+    .oxy-checkbox__shape {
+      background-color: $-checkbox-checked-color;
+      border-color: $-checkbox-checked-color;
+    }
+    .oxy-checkbox__icon {
+      background: $-checkbox-checked-color;
+      border-color: $-checkbox-checked-color;
+    }
+  }
+  @include when(indeterminate) {
+    .oxy-checkbox__shape {
+      background-color: $-checkbox-checked-color;
+      border-color: $-checkbox-checked-color;
+    }
+  }
+  @include when(disabled) {
+    .oxy-checkbox__shape {
+      border-color: $-checkbox-disabled-check-bg;
+      background: $-checkbox-disabled-color;
+      color: $-checkbox-disabled-check-color;
+    }
+    .oxy-checkbox__label {
+      color: $-checkbox-disabled-label-color;
+    }
   }
 }

package/components/oxy-checkbox-group/index.scss

@@ -9,10 +9,10 @@
 @include b(checkbox-group) {
   background-color: $-checkbox-bg;
 
-  // 上下40rpx 左右30rpx 内部间隔24rpx
+  // 顶部与两侧留白适当放大，避免按钮组在16px基准字号下过于紧凑
   @include when(button) {
     width: 100%;
-    padding: 16rpx 6rpx 40rpx 30rpx;
+    padding: 24rpx 32rpx 40rpx 32rpx;
     box-sizing: border-box;
     overflow: hidden;
     height: auto;

package/components/oxy-col-picker/index.scss

@@ -95,7 +95,7 @@
 
   @include e(selected-line) {
     position: absolute;
-    bottom: 10rpx;
+    bottom: 12rpx;
     width: $-col-picker-line-width;
     left: 0;
     height: $-col-picker-line-height;
@@ -141,13 +141,13 @@
   }
 
   @include e(list-item-tip) {
-    margin-top: 4rpx;
+    margin-top: 8rpx;
     font-size: $-col-picker-list-fs-tip;
     color: $-col-picker-list-color-tip;
   }
 
   @include e(confirm) {
-    padding: 24rpx 50rpx 28rpx;
+    padding: 28rpx 52rpx 32rpx;
   }
 
   @include edeep(checked) {

package/components/oxy-collapse/index.scss

@@ -31,7 +31,7 @@
   @include e(more) {
     display: inline-block;
     font-size: $-collapse-retract-fs;
-    margin-top: 16rpx;
+    margin-top: $-spacing-16;
     color: $-collapse-more-color;
     user-select: none;
   }

package/components/oxy-collapse-item/index.scss

@@ -59,7 +59,7 @@
     display: block;
     font-size: $-collapse-arrow-size;
     color: $-collapse-arrow-color;
-    transition: transform 0.3s;
+    transition: transform $-transition-duration-slow;
 
     @include when(retract) {
       transform: rotate(-180deg);
@@ -76,7 +76,7 @@
     color: $-collapse-body-color;
     font-size: $-collapse-body-fs;
     padding: $-collapse-body-padding;
-    line-height: 1.43;
+    line-height: $-line-height-loose;
   }
 
   @include when(disabled) {

package/components/oxy-corner/index.scss

@@ -160,7 +160,7 @@
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 64rpx;
             padding-left: 0;
-            padding-right: 24rpx;
+            padding-right: $-spacing-24;
           }
         }
         &.is-bottom-left{
@@ -177,7 +177,7 @@
             border-bottom-left-radius: 0;
             border-top-right-radius: 64rpx;
             padding-left: 0;
-            padding-right: 24rpx;
+            padding-right: $-spacing-24;
             > span{
               transform: none;
             }
@@ -240,14 +240,14 @@
         bottom: 0;
         width: 32rpx;
         height: 64rpx;
-        background-color: #ffffff;
+        background-color: $-color-white;
         transform: skewX(30deg);
       }
       .oxy-corner__text {
         right: 0;
         top: 0;
         transform: none;
-        padding-left: 24rpx;
+        padding-left: $-spacing-24;
         box-sizing: border-box;
         font-size: $-corner-embedded-font-size;
         font-weight: $-corner-embedded-font-weight;

package/components/oxy-count-to/oxy-count-to.vue

@@ -2,15 +2,15 @@
   <view :class="rootClass">
     <!-- 前缀插槽 -->
     <slot name="prefix">
-      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 1.4}rpx`" :text="props.prefix"></oxy-text>
+      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 0.7}rpx`" :text="props.prefix"></oxy-text>
     </slot>
     <!-- 默认文本插槽 -->
     <slot>
-      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 2}rpx`" :text="timeText"></oxy-text>
+      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize}rpx`" :text="timeText"></oxy-text>
     </slot>
     <!-- 后缀插槽 -->
     <slot name="suffix">
-      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 1.4}rpx`" :text="props.suffix"></oxy-text>
+      <oxy-text :type="props.type" :color="props.color" :size="`${props.fontSize * 0.7}rpx`" :text="props.suffix"></oxy-text>
     </slot>
   </view>
 </template>

package/components/oxy-count-to/types.ts

@@ -6,7 +6,7 @@ export const countToProps = {
   ...baseProps,
 
   // 字体大小
-  fontSize: makeNumberProp(16),
+  fontSize: makeNumberProp(32),
 
   // 文本颜色
   color: makeStringProp(''),

package/components/oxy-date-strip-item/index.scss

@@ -27,13 +27,13 @@
 		display: flex;
 		flex-direction: column;
 		margin: 0 4rpx;
-		transition-duration: 300ms;
+		transition-duration: $-transition-duration-slow;
 		transition-property: background-color, color;
 		transition-timing-function: linear;
 
 		&-prefix,&-day,&-suffix {
 			text-align: center;
-			transition-duration: 200ms;
+			transition-duration: $-transition-duration-base;
 			transition-property: color;
 			transition-timing-function: linear;
 		}
@@ -69,7 +69,7 @@
 		&-day {
 			font-size: $-date-strip-font-size;
 			color: $-date-strip-color;
-			font-weight: bold;
+			font-weight: $-fw-bold;
 		}
 		&-info {
 			display: flex;
@@ -82,7 +82,7 @@
 			background-color: $-date-strip-active-color;
 		}
 		&--active-text {
-			color: white;
+			color: $-color-white;
 			&-none {
 				color:  $-date-strip-active-color;
 			}

package/components/oxy-datetime-picker/index.scss

@@ -85,7 +85,7 @@
   }
 
   @include edeep(popup) {
-    border-radius: 32rpx 32rpx 0 0;
+    border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
   }
 
   @include e(wraper) {
@@ -110,7 +110,7 @@
     font-size: $-picker-toolbar-fs;
     color: $-picker-toolbar-finish-color;
     background: transparent;
-    padding: 48rpx 30rpx 28rpx 30rpx;
+    padding: 48rpx 32rpx 32rpx 32rpx;
 
     @include m(cancel) {
       color: $-picker-toolbar-cancel-color;
@@ -135,7 +135,7 @@
     display: inline-block;
     color: $-picker-region-color;
     text-align: center;
-    padding: 28rpx 0;
+    padding: 32rpx 0;
     font-size: $-picker-region-fs;
     line-height: 32rpx;
     transition: all 0.15s ease-out;
@@ -147,8 +147,8 @@
   }
 
   @include e(region-time) {
-    font-size: 32rpx;
-    margin-top: 4rpx;
+    font-size: $-picker-region-time-fs;
+    margin-top: 8rpx;
   }
 
   @include e(hidden) {

package/components/oxy-datetime-picker/types.ts

@@ -76,7 +76,7 @@ export const datetimePickerProps = {
   /**
    * picker内部滚筒高
    */
-  columnsHeight: makeNumberProp(217),
+  columnsHeight: makeNumberProp(434),
   /**
    * 选项的key
    */

package/components/oxy-datetime-picker-view/types.ts

@@ -20,11 +20,11 @@ export const datetimePickerViewProps = {
   /**
    * picker内部滚筒高
    */
-  columnsHeight: makeNumberProp(217),
+  columnsHeight: makeNumberProp(434),
   /**
    * picker item的高度
    */
-  itemHeight: makeNumberProp(35),
+  itemHeight: makeNumberProp(70),
   /**
    * 选项的key
    */

package/components/oxy-drop-menu/index.scss

@@ -26,7 +26,7 @@
   @include e(list) {
     display: flex;
     text-align: center;
-    background-color: #fff;
+    background-color: $-drop-menu-bg;
   }
 
   @include e(item) {
@@ -85,6 +85,6 @@
 
   @include edeep(arrow) {
     font-size: $-drop-menu-arrow-fs;
-    margin-left: 4rpx;
+    margin-left: 8rpx;
   }
-}
+}

package/components/oxy-drop-menu-item/index.scss

@@ -60,7 +60,7 @@
     position: fixed;
     left: 0;
     right: 0;
-    background: rgba(0, 0, 0, 0.7);
+    background: $-drop-menu-modal-bg;
     height: 100%;
   }
-}
+}

package/components/oxy-fab/index.scss

@@ -1,10 +1,6 @@
 @import "../common/abstracts/variable";
 @import "../common/abstracts/mixin";
 
-.oxy-theme-dark {
-  @include b(fab) {}
-}
-
 @include b(fab) {
   position: fixed;
   z-index: 99;
@@ -60,7 +56,7 @@
 
     // 动画
     @include e(transition-enter-active, transition-leave-active) {
-      transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+      transition: $-transition-duration-slow $-transition-timing-function-base !important;
     }