element-plus-mobile 0.1.1 → 0.1.2

package/theme-chalk/src/cascader-panel.scss

@@ -137,3 +137,64 @@
     }
   }
 }
+
+@include b(cascader-panel) {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  border-radius: getCssVar('border-radius-base');
+
+  @include when(bordered) {
+    border: none;
+  }
+}
+
+@include b(cascader-menu) {
+  flex: 0 0 100%;
+  min-width: 100%;
+  border-right: none;
+  scroll-snap-align: start;
+
+  &:not(:last-child) {
+    border-bottom: getCssVar('cascader-menu', 'border');
+  }
+
+  &:last-child {
+    .#{$namespace}-cascader-node {
+      padding-right: to-rem(18px);
+    }
+  }
+
+  @include e(wrap) {
+    &.#{$namespace}-scrollbar__wrap {
+      height: min(45vh, #{to-rem(360px)});
+    }
+  }
+
+  @include e(list) {
+    padding: to-rem(8px) 0;
+  }
+}
+
+@include b(cascader-node) {
+  min-height: to-rem(48px);
+  height: auto;
+  padding: 0 to-rem(18px) 0 to-rem(48px);
+  line-height: to-rem(48px);
+  font-size: to-rem(16px);
+
+  @include e(prefix) {
+    left: to-rem(16px);
+  }
+
+  @include e(postfix) {
+    right: to-rem(16px);
+  }
+
+  @include e(label) {
+    padding: 0 to-rem(8px);
+  }
+}

package/theme-chalk/src/cascader.scss

@@ -260,3 +260,72 @@
     }
   }
 }
+
+@include b(cascader) {
+  display: block;
+  width: 100%;
+
+  .#{$namespace}-input,
+  .#{$namespace}-input__wrapper {
+    width: 100%;
+  }
+
+  @include e(dropdown) {
+    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;
+    padding: to-rem(12px) calc(env(safe-area-inset-right) + #{to-rem(16px)})
+      calc(env(safe-area-inset-bottom) + #{to-rem(16px)})
+      calc(env(safe-area-inset-left) + #{to-rem(16px)});
+    background: getCssVar('bg-color', 'overlay');
+    font-size: to-rem(16px);
+  }
+
+  @include e(header) {
+    padding: to-rem(16px);
+  }
+
+  @include e(footer) {
+    padding: to-rem(16px);
+  }
+
+  @include e(tags) {
+    right: to-rem(40px);
+    padding: to-rem(7px) to-rem(14px);
+    gap: to-rem(8px);
+  }
+
+  @include e(suggestion-panel) {
+    max-height: min(45vh, #{to-rem(360px)});
+  }
+
+  @include e(suggestion-list) {
+    max-height: none;
+    padding: to-rem(8px) 0;
+  }
+
+  @include e(suggestion-item) {
+    min-height: to-rem(48px);
+    height: auto;
+    padding: to-rem(12px) to-rem(16px);
+    font-size: to-rem(16px);
+  }
+
+  @include e(empty-text) {
+    margin: to-rem(12px) 0;
+    font-size: to-rem(14px);
+  }
+
+  @include e(search-input) {
+    min-height: to-rem(32px);
+    font-size: to-rem(16px);
+  }
+}

package/theme-chalk/src/checkbox-group.scss

@@ -3,16 +3,12 @@
 
 @include b(checkbox-group) {
   font-size: 0;
-  line-height: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: to-rem(8px) to-rem(12px);
+  line-height: normal;
 
-  @include res('sm-and-down', $breakpoints-spec) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: to-rem(8px) to-rem(12px);
-    line-height: normal;
-
-    .#{$namespace}-checkbox {
-      margin-right: 0;
-    }
+  .#{$namespace}-checkbox {
+    margin-right: 0;
   }
 }

package/theme-chalk/src/checkbox.scss

@@ -311,32 +311,30 @@ $checkbox-bordered-input-width: map.merge(
     margin-right: 0;
   }
 
-  @include res('sm-and-down', $breakpoints-spec) {
-    align-items: flex-start;
-    min-height: to-rem(44px);
-    height: auto;
-    margin-right: to-rem(16px);
-    white-space: normal;
-    @include touch-feedback;
-
-    @include when(bordered) {
-      padding-top: to-rem(10px);
-      padding-bottom: to-rem(10px);
-    }
+  align-items: flex-start;
+  min-height: to-rem(44px);
+  height: auto;
+  margin-right: to-rem(16px);
+  white-space: normal;
+  @include touch-feedback;
 
-    @include e(inner) {
-      width: to-rem(18px);
-      height: to-rem(18px);
+  @include when(bordered) {
+    padding-top: to-rem(10px);
+    padding-bottom: to-rem(10px);
+  }
 
-      &::after {
-        width: to-rem(4px);
-        height: to-rem(8px);
-      }
-    }
+  @include e(inner) {
+    width: to-rem(18px);
+    height: to-rem(18px);
 
-    @include e(label) {
-      padding-left: to-rem(12px);
-      line-height: 1.4;
+    &::after {
+      width: to-rem(4px);
+      height: to-rem(8px);
     }
   }
+
+  @include e(label) {
+    padding-left: to-rem(12px);
+    line-height: 1.4;
+  }
 }

package/theme-chalk/src/color-picker-panel.scss

@@ -46,9 +46,9 @@
   width: 4px;
   height: 100%;
   border-radius: 1px;
-  background: #fff;
+  background: getCssVar('color-white');
   border: 1px solid getCssVar('border-color', 'lighter');
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 0 1px getCssVar('border-color');
   z-index: 1;
 
   &:focus-visible {
@@ -100,7 +100,7 @@
       @include b(input) {
         line-height: 26px;
         font-size: 12px;
-        color: $color-black;
+        color: getCssVar('text-color', 'primary');
         width: 160px;
       }
     }
@@ -175,7 +175,7 @@
   box-sizing: border-box;
   width: 280px;
   height: 12px;
-  background-color: #f00;
+  background-color: getCssVar('color-primary');
   padding: 0 2px;
   float: right;
 
@@ -212,8 +212,8 @@
   width: 280px;
   height: 180px;
   background-image:
-    linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
-    linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+    linear-gradient(to top, getCssVar('color-black'), transparent),
+    linear-gradient(to right, getCssVar('color-white'), transparent);
 
   @include e(cursor) {
     position: absolute;
@@ -221,9 +221,9 @@
     width: 4px;
     height: 4px;
     box-shadow:
-      0 0 0 1.5px #fff,
-      inset 0 0 1px 1px rgba(0, 0, 0, 0.3),
-      0 0 1px 2px rgba(0, 0, 0, 0.4);
+      0 0 0 1.5px getCssVar('color-white'),
+      inset 0 0 1px 1px getCssVar('overlay-color', 'lighter'),
+      0 0 1px 2px getCssVar('overlay-color', 'light');
     border-radius: 50%;
     transform: translate(-2px, -2px);
 
@@ -251,7 +251,7 @@
     position: relative;
     background: linear-gradient(
       to right,
-      rgba(255, 255, 255, 0) 0%,
+      transparent 0%,
       getCssVar('bg-color') 100%
     );
     height: 100%;
@@ -268,8 +268,8 @@
     .#{$namespace}-color-alpha-slider__bar {
       background: linear-gradient(
         to bottom,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 1) 100%
+        transparent 0%,
+        getCssVar('color-white') 100%
       );
     }
 
@@ -283,12 +283,87 @@
 }
 
 .#{bem('color-picker-panel')} {
-  @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#ccc');
+  @include set-css-var-value(
+    ('color-picker', 'alpha-bg-a'),
+    getCssVar('fill-color', 'dark')
+  );
   @include set-css-var-value(('color-picker', 'alpha-bg-b'), 'transparent');
 }
 
-.dark {
-  .#{bem('color-picker-panel')} {
-    @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#333333');
+@include b(color-picker-panel) {
+  width: 100%;
+  max-width: min(100%, #{to-rem(420px)});
+  padding: 0;
+  background: transparent;
+
+  @include e(wrapper) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) to-rem(20px);
+    gap: to-rem(12px);
+    margin-bottom: to-rem(12px);
+  }
+
+  @include e(footer) {
+    display: grid;
+    gap: to-rem(12px);
+    margin-top: to-rem(16px);
+
+    .#{$namespace}-input {
+      width: 100%;
+    }
+  }
+}
+
+@include b(color-predefine) {
+  width: 100%;
+  margin-top: to-rem(16px);
+
+  @include e(colors) {
+    gap: to-rem(10px);
+  }
+
+  @include e(color-selector) {
+    width: to-rem(32px);
+    height: to-rem(32px);
+    border-radius: getCssVar('border-radius-base');
+  }
+}
+
+@include b(color-hue-slider) {
+  width: to-rem(20px);
+  height: min(55vw, #{to-rem(240px)});
+  padding: to-rem(2px) 0;
+
+  @include e(thumb) {
+    height: to-rem(8px);
+    border-radius: getCssVar('border-radius-round');
+  }
+}
+
+@include b(color-svpanel) {
+  width: 100%;
+  height: min(55vw, #{to-rem(240px)});
+  border-radius: getCssVar('border-radius-base');
+  overflow: hidden;
+
+  @include e(cursor) {
+    width: to-rem(12px);
+    height: to-rem(12px);
+    transform: translate(
+      calc(#{to-rem(12px)} / -2),
+      calc(#{to-rem(12px)} / -2)
+    );
+  }
+}
+
+@include b(color-alpha-slider) {
+  width: 100%;
+  height: to-rem(16px);
+  border-radius: getCssVar('border-radius-base');
+  overflow: hidden;
+
+  @include e(thumb) {
+    width: to-rem(10px);
+    border-radius: getCssVar('border-radius-base');
   }
 }

package/theme-chalk/src/color-picker.scss

@@ -142,7 +142,7 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   }
 
   @include e(panel) {
-    background-color: $color-white;
+    background-color: getCssVar('colorpicker', 'bg-color');
     border-radius: getCssVar('border-radius-base');
     box-shadow: map.get($dropdown, 'menu-box-shadow');
     &.#{$namespace}-popper {
@@ -153,13 +153,71 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
 
 .#{bem('color-picker')},
 .#{bem('color-picker', 'panel')} {
-  @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#ccc');
+  @include set-css-var-value(
+    ('color-picker', 'alpha-bg-a'),
+    getCssVar('fill-color', 'dark')
+  );
   @include set-css-var-value(('color-picker', 'alpha-bg-b'), 'transparent');
 }
 
-.dark {
-  .#{bem('color-picker')},
-  .#{bem('color-picker', 'panel')} {
-    @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#333333');
+@include b(color-picker) {
+  width: to-rem(44px);
+  height: to-rem(44px);
+
+  @include m(large) {
+    width: to-rem(48px);
+    height: to-rem(48px);
+  }
+
+  @include m(small) {
+    width: to-rem(40px);
+    height: to-rem(40px);
+  }
+
+  @include e(trigger) {
+    padding: to-rem(4px);
+    border-radius: getCssVar('border-radius-base');
+  }
+
+  @include e(color) {
+    border-radius: getCssVar('border-radius-small');
   }
+
+  & .#{$namespace}-color-picker__empty,
+  & .#{$namespace}-color-picker__icon {
+    font-size: to-rem(16px);
+  }
+
+  @include e(panel) {
+    &.#{$namespace}-popper {
+      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;
+      padding: to-rem(12px) calc(env(safe-area-inset-right) + #{to-rem(16px)})
+        calc(env(safe-area-inset-bottom) + #{to-rem(16px)})
+        calc(env(safe-area-inset-left) + #{to-rem(16px)});
+      background: getCssVar('bg-color', 'overlay');
+    }
+  }
+}
+
+.el-color-picker-panel__footer > div {
+  display: flex;
+  gap: to-rem(12px);
+  width: 100%;
+}
+
+.el-color-footer__btn,
+.el-color-footer__link-btn {
+  flex: 1 1 0;
+  min-height: to-rem(44px);
+  margin: 0;
 }

package/theme-chalk/src/common/var.scss

@@ -1403,13 +1403,15 @@ $transfer: map.merge(
   (
     'border-color': getCssVar('border-color-lighter'),
     'border-radius': getCssVar('border-radius-base'),
-    'panel-width': 200px,
-    'panel-header-height': 40px,
+    'panel-header-height': to-rem(40px),
     'panel-header-bg-color': getCssVar('fill-color', 'light'),
-    'panel-footer-height': 40px,
-    'panel-body-height': 278px,
-    'item-height': 30px,
-    'filter-height': 32px,
+    'panel-footer-height': to-rem(40px),
+    'panel-body-height': to-rem(246px),
+    'item-height': to-rem(48px),
+    'filter-height': to-rem(32px),
+    'tab-height': to-rem(48px),
+    'tab-indicator-height': to-rem(2px),
+    'action-height': to-rem(36px),
   ),
   $transfer
 );
@@ -1687,15 +1689,10 @@ $aside: map.merge(
 // Break-point
 $sm: 480px !default;
 $md: 768px !default;
-$lg: 992px !default;
-$xl: 1200px !default;
-
 $breakpoints: (
   'xs': '(max-width: #{$sm - 1})',
   'sm': '(min-width: #{$sm})',
   'md': '(min-width: #{$md})',
-  'lg': '(min-width: #{$lg})',
-  'xl': '(min-width: #{$xl})',
 ) !default;
 
 $breakpoints-spec: (
@@ -1704,10 +1701,6 @@ $breakpoints-spec: (
   'sm-only': '(min-width: #{$sm}) and (max-width: #{$md - 1})',
   'sm-and-down': '(max-width: #{$md - 1})',
   'md-and-up': '(min-width: #{$md})',
-  'md-only': '(min-width: #{$md}) and (max-width: #{$lg - 1})',
-  'md-and-down': '(max-width: #{$lg - 1})',
-  'lg-and-up': '(min-width: #{$lg})',
-  'lg-only': '(min-width: #{$lg}) and (max-width: #{$xl - 1})',
-  'lg-and-down': '(max-width: #{$xl - 1})',
-  'xl-only': '(min-width: #{$xl})',
+  'md-only': '(min-width: #{$md})',
+  'md-and-down': '(max-width: #{$md})',
 ) !default;

package/theme-chalk/src/date-picker/date-picker.scss

@@ -119,3 +119,78 @@
     }
   }
 }
+
+@include b(date-picker) {
+  width: 100%;
+  max-width: 100%;
+
+  &.has-sidebar,
+  &.has-sidebar.has-time {
+    width: 100%;
+  }
+
+  .#{$namespace}-picker-panel__content {
+    width: 100%;
+  }
+
+  @include e(editor-wrap) {
+    display: block;
+    width: 100%;
+    padding: 0;
+  }
+
+  @include e(time-header) {
+    display: grid;
+    gap: to-rem(12px);
+    width: 100%;
+    padding: 0 to-rem(16px) to-rem(12px);
+    border-bottom: none;
+    font-size: to-rem(14px);
+  }
+
+  @include e(header) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: to-rem(8px);
+    padding: to-rem(16px) to-rem(16px) to-rem(12px);
+  }
+
+  @include e(header-label) {
+    min-width: 0;
+    font-size: to-rem(16px);
+    line-height: to-rem(24px);
+  }
+
+  @include e(prev-btn) {
+    display: flex;
+    align-items: center;
+    gap: to-rem(4px);
+    float: none;
+  }
+
+  @include e(next-btn) {
+    display: flex;
+    align-items: center;
+    gap: to-rem(4px);
+    float: none;
+  }
+
+  @include e(time-wrap) {
+    padding: 0 to-rem(16px) to-rem(16px);
+    text-align: left;
+  }
+
+  @include e(time-label) {
+    float: none;
+    display: block;
+    margin-left: 0;
+    margin-bottom: to-rem(8px);
+    line-height: to-rem(22px);
+  }
+
+  .#{$namespace}-time-panel {
+    position: static;
+    width: 100%;
+  }
+}

package/theme-chalk/src/date-picker/date-range-picker.scss

@@ -139,3 +139,98 @@
     }
   }
 }
+
+@include b(date-range-picker) {
+  width: 100%;
+  max-width: 100%;
+
+  &.has-sidebar {
+    width: 100%;
+  }
+
+  .#{$namespace}-picker-panel__body {
+    display: block;
+    min-width: 0;
+  }
+
+  .#{$namespace}-picker-panel__content {
+    margin: 0;
+  }
+
+  @include e(header) {
+    display: flex;
+    align-items: center;
+    gap: to-rem(8px);
+    height: auto;
+    padding-bottom: to-rem(12px);
+
+    div {
+      margin: 0 auto;
+      min-width: 0;
+      text-align: center;
+    }
+  }
+
+  @include e(header-label) {
+    font-size: to-rem(16px);
+    line-height: to-rem(24px);
+  }
+
+  @include e(content) {
+    display: block;
+    width: 100%;
+    padding: to-rem(16px);
+
+    @include when(left) {
+      border-right: none;
+      border-bottom: 1px solid getCssVar('datepicker-inner-border-color');
+    }
+
+    .#{$namespace}-date-range-picker__header {
+      div {
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+  }
+
+  @include e(editors-wrap) {
+    display: grid;
+    gap: to-rem(12px);
+    width: 100%;
+  }
+
+  @include e(time-header) {
+    display: grid;
+    gap: to-rem(12px);
+    width: 100%;
+    padding: 0 to-rem(16px) to-rem(12px);
+
+    > .#{$namespace}-icon-arrow-right {
+      justify-self: center;
+      font-size: to-rem(18px);
+      transform: rotate(90deg);
+    }
+  }
+
+  @include e(time-picker-wrap) {
+    display: block;
+    width: 100%;
+    padding: 0;
+
+    .#{$namespace}-picker-panel {
+      position: static;
+      top: auto;
+      right: auto;
+      width: 100%;
+      margin-top: to-rem(12px);
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .#{$namespace}-time-panel {
+      position: static;
+      width: 100%;
+    }
+  }
+}