element-plus-mobile 0.1.1 → 0.1.2

package/theme-chalk/src/select-dropdown.scss

@@ -5,6 +5,11 @@
 
 @include b(select-dropdown) {
   z-index: calc(#{getCssVar('index-top')} + 1);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: min(70vh, #{to-rem(520px)});
+  padding-bottom: env(safe-area-inset-bottom);
   border-radius: getCssVar('border-radius-base');
   box-sizing: border-box;
 
@@ -13,91 +18,59 @@
   }
 }
 
-@include b(select-dropdown__loading) {
-  padding: map.get($select-dropdown, 'empty-padding');
-  margin: 0;
-  text-align: center;
-  color: map.get($select-dropdown, 'empty-color');
-  font-size: getCssVar('select-font-size');
-}
-
-@include b(select-dropdown__empty) {
-  padding: map.get($select-dropdown, 'empty-padding');
-  margin: 0;
-  text-align: center;
-  color: map.get($select-dropdown, 'empty-color');
-  font-size: getCssVar('select-font-size');
-}
-
 @include b(select-dropdown__wrap) {
-  max-height: map.get($select-dropdown, 'max-height');
+  max-height: min(50vh, #{to-rem(420px)});
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
 }
 
 @include b(select-dropdown__list) {
   list-style: none;
-  padding: map.get($select-dropdown, 'padding');
+  padding: to-rem(8px) 0;
   margin: 0;
   box-sizing: border-box;
 
   &.#{$namespace}-vl__window {
     // for select-v2
-    margin: map.get($select-dropdown, 'padding');
+    margin: to-rem(8px) 0;
     padding: 0;
   }
 }
 
 @include b(select-dropdown__header) {
   padding: map.get($select-dropdown, 'header-padding');
+  padding-left: to-rem(16px);
+  padding-right: to-rem(16px);
   border-bottom: map.get($select-dropdown, 'border');
+  flex-shrink: 0;
 }
 
 @include b(select-dropdown__footer) {
   padding: map.get($select-dropdown, 'footer-padding');
+  padding-left: to-rem(16px);
+  padding-right: to-rem(16px);
   border-top: map.get($select-dropdown, 'border');
+  flex-shrink: 0;
 }
 
-@include res('sm-and-down', $breakpoints-spec) {
-  .#{$namespace}-select__popper.is-mobile {
-    .#{$namespace}-select-dropdown {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      max-height: min(70vh, #{to-rem(520px)});
-      padding-bottom: env(safe-area-inset-bottom);
-    }
-
-    .#{$namespace}-select-dropdown__wrap {
-      max-height: min(50vh, #{to-rem(420px)});
-      overscroll-behavior: contain;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    .#{$namespace}-select-dropdown__list {
-      padding: to-rem(8px) 0;
-
-      &.#{$namespace}-vl__window {
-        margin: to-rem(8px) 0;
-      }
-    }
-
-    .#{$namespace}-select-dropdown__header,
-    .#{$namespace}-select-dropdown__footer,
-    .#{$namespace}-select-dropdown__loading,
-    .#{$namespace}-select-dropdown__empty {
-      padding-left: to-rem(16px);
-      padding-right: to-rem(16px);
-    }
-
-    .#{$namespace}-select-dropdown__header,
-    .#{$namespace}-select-dropdown__footer {
-      flex-shrink: 0;
-    }
+@include b(select-dropdown__loading) {
+  padding-top: to-rem(16px);
+  padding-bottom: to-rem(16px);
+  padding-left: to-rem(16px);
+  padding-right: to-rem(16px);
+  margin: 0;
+  text-align: center;
+  color: map.get($select-dropdown, 'empty-color');
+  font-size: to-rem(14px);
+}
 
-    .#{$namespace}-select-dropdown__loading,
-    .#{$namespace}-select-dropdown__empty {
-      padding-top: to-rem(16px);
-      padding-bottom: to-rem(16px);
-      font-size: to-rem(14px);
-    }
-  }
+@include b(select-dropdown__empty) {
+  padding-top: to-rem(16px);
+  padding-bottom: to-rem(16px);
+  padding-left: to-rem(16px);
+  padding-right: to-rem(16px);
+  margin: 0;
+  text-align: center;
+  color: map.get($select-dropdown, 'empty-color');
+  font-size: to-rem(14px);
 }

package/theme-chalk/src/select.scss

@@ -17,10 +17,9 @@
 }
 
 @include b(select) {
-  display: inline-block;
+  display: block;
   position: relative;
-  vertical-align: middle;
-  width: getCssVar('select-width');
+  width: 100%;
 
   @include e(wrapper) {
     display: flex;
@@ -29,16 +28,17 @@
     box-sizing: border-box;
     cursor: pointer;
     text-align: left;
-    font-size: map.get($input-font-size, 'default');
-    padding: map.get($select-wrapper-padding, 'default');
-    gap: map.get($select-item-gap, 'default');
-    min-height: map.get($input-height, 'default');
-    line-height: map.get($select-item-height, 'default');
+    font-size: to-rem(16px);
+    padding: to-rem(6px) to-rem(14px);
+    gap: to-rem(8px);
+    min-height: to-rem(44px);
+    line-height: to-rem(32px);
     border-radius: getCssVar('border-radius-base');
     background-color: getCssVar('fill-color', 'blank');
     transition: getCssVar('transition', 'duration');
     transform: translate3d(0, 0, 0);
     @include mixed-input-border(#{getCssVar('border-color')});
+    @include touch-feedback;
 
     @include when(filterable) {
       cursor: text;
@@ -97,7 +97,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    gap: map.get($select-item-gap, 'default');
+    gap: to-rem(8px);
     color: var(
       #{getCssVarName('input-icon-color')},
       map.get($input, 'icon-color')
@@ -108,7 +108,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    gap: map.get($select-item-gap, 'default');
+    gap: to-rem(8px);
     color: var(
       #{getCssVarName('input-icon-color')},
       map.get($input, 'icon-color')
@@ -142,7 +142,7 @@
     align-items: center;
     flex: 1;
     min-width: 0;
-    gap: map.get($select-item-gap, 'default');
+    gap: to-rem(8px);
 
     @include when(near) {
       margin-left: map.get($select-near-margin-left, 'default');
@@ -164,7 +164,9 @@
 
   @include e(selected-item) {
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
+    min-height: to-rem(32px);
     user-select: none;
   }
 
@@ -199,23 +201,20 @@
       map.get($select-dropdown, 'border'),
       map.get($select-dropdown, 'shadow')
     );
+    position: fixed !important;
+    inset: auto 0 0 0 !important;
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 0 !important;
+    margin: 0 !important;
+    border: none;
+    border-radius: to-rem(20px) to-rem(20px) 0 0;
+    box-shadow: getCssVar('box-shadow', 'light');
+    overflow: hidden;
+    transform: none !important;
 
-    @include when(mobile) {
-      position: fixed !important;
-      inset: auto 0 0 0 !important;
-      width: 100vw !important;
-      max-width: 100vw !important;
-      min-width: 0 !important;
-      margin: 0 !important;
-      border: none;
-      border-radius: to-rem(20px) to-rem(20px) 0 0;
-      box-shadow: 0 #{to-rem(-12px)} #{to-rem(32px)} rgba(0, 0, 0, 0.18);
-      overflow: hidden;
-      transform: none !important;
-
-      .#{$namespace}-popper__arrow {
-        display: none;
-      }
+    .#{$namespace}-popper__arrow {
+      display: none;
     }
   }
 
@@ -235,10 +234,10 @@
     outline: none;
     padding: 0;
     color: getCssVar('select-multiple-input-color');
-    font-size: inherit;
+    font-size: to-rem(16px);
     font-family: inherit;
     appearance: none;
-    height: map.get($select-item-height, 'default');
+    height: to-rem(32px);
     width: 100%;
     background-color: transparent;
   }
@@ -258,8 +257,6 @@
       @include e(wrapper) {
         gap: map.get($select-item-gap, $size);
         padding: map.get($select-wrapper-padding, $size);
-        min-height: map.get($input-height, $size);
-        line-height: map.get($select-item-height, $size);
         font-size: map.get($input-font-size, $size);
       }
 
@@ -280,7 +277,7 @@
       }
 
       @include e(input) {
-        height: map.get($select-item-height, $size);
+        font-size: inherit;
       }
     }
   }
@@ -296,39 +293,14 @@
     }
   }
 
-  @include res('sm-and-down', $breakpoints-spec) {
-    width: 100%;
-
-    @include e(wrapper) {
-      min-height: to-rem(44px);
-      padding: to-rem(6px) to-rem(14px);
-      gap: to-rem(8px);
-      @include touch-feedback;
-    }
-
-    @include e(selection) {
-      gap: to-rem(8px);
-    }
-
-    @include e(selected-item) {
-      align-items: center;
-      min-height: to-rem(32px);
-    }
-
-    @include e(input) {
-      height: to-rem(32px);
-      font-size: to-rem(16px);
-    }
-
-    @include e(caret) {
-      font-size: to-rem(18px);
-    }
+  @include e(caret) {
+    font-size: to-rem(18px);
+  }
 
-    @include e(clear) {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      @include touch-target(32px);
-    }
+  @include e(clear) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    @include touch-target(32px);
   }
 }

package/theme-chalk/src/slider.scss

@@ -203,62 +203,61 @@ $slider-height: map.merge($common-component-size, $slider-height);
     }
   }
 
-  @include res('sm-and-down', $breakpoints-spec) {
-    min-height: to-rem(44px);
+  min-height: to-rem(44px);
 
-    @include m(with-input) {
-      flex-direction: column;
-      align-items: stretch;
-      gap: to-rem(16px);
-    }
+  @include m(with-input) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: to-rem(20px);
+  }
 
-    @include e(runway) {
-      height: to-rem(6px);
-      @include touch-feedback;
+  @include e(runway) {
+    height: to-rem(6px);
+    @include touch-feedback;
 
-      &.show-input {
-        margin-right: 0;
-      }
+    &.show-input {
+      margin-right: 0;
     }
+  }
 
-    @include e(input) {
-      width: 100%;
-    }
+  @include e(input) {
+    width: 100%;
+    max-width: 100%;
+  }
 
-    @include e(button-wrapper) {
-      width: to-rem(36px);
-      height: to-rem(36px);
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
+  @include e(button-wrapper) {
+    width: to-rem(36px);
+    height: to-rem(36px);
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
 
-    @include e(button) {
-      width: to-rem(20px);
-      height: to-rem(20px);
-    }
+  @include e(button) {
+    width: to-rem(20px);
+    height: to-rem(20px);
+  }
 
-    @include e(stop) {
-      width: to-rem(8px);
-      height: to-rem(8px);
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
+  @include e(stop) {
+    width: to-rem(8px);
+    height: to-rem(8px);
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
 
-    @include when(vertical) {
-      .#{$namespace}-slider__runway {
-        width: to-rem(6px);
-      }
+  @include when(vertical) {
+    .#{$namespace}-slider__runway {
+      width: to-rem(6px);
+    }
 
-      .#{$namespace}-slider__button-wrapper {
-        top: auto;
-        left: 50%;
-        transform: translate(-50%, 50%);
-      }
+    .#{$namespace}-slider__button-wrapper {
+      top: auto;
+      left: 50%;
+      transform: translate(-50%, 50%);
+    }
 
-      .#{$namespace}-slider__stop {
-        top: auto;
-        transform: translate(-50%, 50%);
-      }
+    .#{$namespace}-slider__stop {
+      top: auto;
+      transform: translate(-50%, 50%);
     }
   }
 }

package/theme-chalk/src/space.scss

@@ -2,20 +2,29 @@
 @use 'common/var' as *;
 
 @include b(space) {
-  display: inline-flex;
-  vertical-align: top;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
   max-width: 100%;
+  width: 100%;
 
   @include e(item) {
-    display: flex;
-    flex-wrap: wrap;
-
-    & > * {
-      flex: 1;
-    }
+    min-width: 0;
   }
 
   @include m(vertical) {
     flex-direction: column;
+
+    > .#{$namespace}-space__item {
+      width: 100%;
+    }
+  }
+
+  @include m(horizontal) {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    width: auto;
+    vertical-align: top;
   }
 }

package/theme-chalk/src/splitter.scss

@@ -17,12 +17,6 @@
     top: 0;
     bottom: 0;
   }
-  @include e(mask-horizontal) {
-    cursor: ew-resize;
-  }
-  @include e(mask-vertical) {
-    cursor: ns-resize;
-  }
 
   @include e(horizontal) {
     flex-direction: row;
@@ -42,105 +36,79 @@
   @include e(dragger) {
     z-index: 1;
     position: absolute;
-    background: transparent;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: to-rem(4px);
+    padding: to-rem(4px);
+    border-radius: to-rem(14px);
+    background: getCssVar('bg-color', 'overlay');
+    box-shadow: 0 0 0 1px getCssVar('border-color-light');
     @include touch-feedback(none);
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      background-color: getCssVar('border-color-light');
-    }
-
-    &:not(.is-lazy)::after {
-      display: none;
-    }
-
-    &::after {
-      opacity: 0.4;
-    }
 
     &:active {
-      &:not(.is-disabled)::before {
-        background-color: getCssVar('color-primary-light-5');
+      &:not(.is-disabled) {
+        box-shadow: 0 0 0 1px getCssVar('color-primary-light-5');
       }
     }
   }
   @include e(dragger-horizontal) {
-    &::before,
-    &::after {
-      height: 100%;
-      width: to-rem(2px);
-    }
+    flex-direction: column;
   }
   @include e(dragger-vertical) {
-    &::before,
-    &::after {
-      height: to-rem(2px);
-      width: 100%;
-    }
+    flex-direction: row;
   }
   @include e(dragger-active) {
-    &::before,
-    &::after {
+    .#{$namespace}-splitter-bar__handle {
       background-color: getCssVar('color-primary-light-3');
     }
-
-    &.#{$namespace}-splitter-bar__dragger-horizontal::after {
-      transform: translate(calc(-50% + getCssVar('splitter-bar-offset')), -50%);
-    }
-
-    &.#{$namespace}-splitter-bar__dragger-vertical::after {
-      transform: translate(-50%, calc(-50% + getCssVar('splitter-bar-offset')));
-    }
+  }
+  @include e(handle) {
+    flex: none;
+    display: block;
+    border-radius: getCssVar('border-radius-round');
+    background-color: getCssVar('border-color-light');
+    transition: background-color getCssVar('transition-duration-fast');
+  }
+  @include e(handle-horizontal) {
+    width: to-rem(2px);
+    min-height: to-rem(32px);
+    height: 100%;
+  }
+  @include e(handle-vertical) {
+    width: 100%;
+    min-width: to-rem(32px);
+    height: to-rem(2px);
   }
   @include e(collapse-icon) {
     display: flex;
     align-items: center;
     justify-content: center;
-    position: absolute;
-    background: getCssVar('border-color-light');
-    border-radius: to-rem(6px);
-    cursor: pointer;
-    opacity: 0.92;
-    z-index: 9;
+    padding: 0;
+    width: to-rem(20px);
+    height: to-rem(20px);
+    border: none;
+    background: getCssVar('fill-color', 'light');
+    border-radius: to-rem(10px);
+    color: getCssVar('text-color', 'regular');
     @include touch-feedback;
+
     &:active {
-      opacity: 1;
-      background-color: getCssVar('color-primary-light-5');
+      background-color: getCssVar('color-primary-light-8');
+      color: getCssVar('color-primary');
     }
   }
-  @include e(horizontal-collapse-icon-start) {
-    left: to-rem(-16px);
-    top: 50%;
-    height: to-rem(32px);
-    width: to-rem(24px);
-    transform: translate(-50%, -50%);
-  }
-  @include e(horizontal-collapse-icon-end) {
-    left: to-rem(16px);
-    top: 50%;
-    height: to-rem(32px);
-    width: to-rem(24px);
-    transform: translate(-50%, -50%);
-  }
-  @include e(vertical-collapse-icon-start) {
-    top: to-rem(-16px);
-    right: 50%;
-    height: to-rem(24px);
-    width: to-rem(32px);
-    transform: translate(50%, -50%);
-  }
-  @include e(vertical-collapse-icon-end) {
-    top: to-rem(16px);
-    right: 50%;
-    height: to-rem(24px);
-    width: to-rem(32px);
-    transform: translate(50%, -50%);
+
+  .#{$namespace}-splitter-bar__dragger.is-disabled {
+    background: getCssVar('fill-color', 'light');
+    box-shadow: 0 0 0 1px getCssVar('border-color-lighter');
+
+    .#{$namespace}-splitter-bar__handle,
+    .#{$namespace}-splitter-bar__collapse-icon {
+      opacity: 0.6;
+    }
   }
 }