@element-plus/nightly 0.0.20211230 → 0.0.20220103

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

@@ -113,7 +113,7 @@
   @include e(label) {
     flex: 1;
     text-align: left;
-    padding: 0 10px;
+    padding: 0 8px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

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

@@ -591,7 +591,7 @@ $button-border-radius: map.merge(
 $button-padding-vertical: () !default;
 $button-padding-vertical: map.merge(
   (
-    'large': 12px,
+    'large': 13px,
     'default': 9px,
     'small': 6px,
   ),
@@ -1170,10 +1170,8 @@ $empty: map.merge(
 $descriptions: () !default;
 $descriptions: map.merge(
   (
-    'header-margin-bottom': 20px,
-    'title-font-size': 16px,
     'table-border': 1px solid var(--el-border-color-lighter),
-    'item-bordered-label-background': #fafafa,
+    'item-bordered-label-background': #f5f7fa,
   ),
   $descriptions
 );

package/theme-chalk/src/descriptions-item.scss

@@ -1,19 +1,73 @@
+@use 'sass:map';
+
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 
+$descriptions-item-label-margin-right: () !default;
+$descriptions-item-label-margin-right: map.merge(
+  (
+    'large': 16px,
+    'default': 16px,
+    'small': 12px,
+  ),
+  $descriptions-item-label-margin-right
+);
+
+$descriptions-item-vertical-label-padding-bottom: () !default;
+$descriptions-item-vertical-label-padding-bottom: map.merge(
+  (
+    'large': 8px,
+    'default': 6px,
+    'small': 4px,
+  ),
+  $descriptions-item-vertical-label-padding-bottom
+);
+
 @include b(descriptions) {
   @include e(label) {
     &.#{$namespace}-descriptions__cell.is-bordered-label {
       font-weight: bold;
-      color: var(--el-text-color-secondary);
+      color: var(--el-text-color-regular);
       background: var(--el-descriptions-item-bordered-label-background);
     }
 
     &:not(.is-bordered-label) {
-      margin-right: 10px;
+      color: var(--el-text-color-primary);
+      margin-right: map.get($descriptions-item-label-margin-right, 'default');
+    }
+
+    &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
+      padding-bottom: map.get(
+        $descriptions-item-vertical-label-padding-bottom,
+        'default'
+      );
     }
   }
 
   @include e(content) {
+    &.#{$namespace}-descriptions__cell.is-bordered-content {
+      color: var(--el-text-color-primary);
+    }
+
+    &:not(.is-bordered-label) {
+      color: var(--el-text-color-regular);
+    }
+  }
+
+  @each $size in (large, small) {
+    @include m($size) {
+      @include e(label) {
+        &:not(.is-bordered-label) {
+          margin-right: map.get($descriptions-item-label-margin-right, $size);
+        }
+
+        &.#{$namespace}-descriptions__cell:not(.is-bordered-label).is-vertical-label {
+          padding-bottom: map.get(
+            $descriptions-item-vertical-label-padding-bottom,
+            $size
+          );
+        }
+      }
+    }
   }
 }

package/theme-chalk/src/descriptions.scss

@@ -4,12 +4,32 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
+$descriptions-header-margin-bottom: () !default;
+$descriptions-header-margin-bottom: map.merge(
+  (
+    'large': 20px,
+    'default': 16px,
+    'small': 12px,
+  ),
+  $descriptions-header-margin-bottom
+);
+
+$descriptions-title-font-size: () !default;
+$descriptions-title-font-size: map.merge(
+  (
+    'large': 16px,
+    'default': 16px,
+    'small': 14px,
+  ),
+  $descriptions-title-font-size
+);
+
 $descriptions-cell-padding-bottom: () !default;
 $descriptions-cell-padding-bottom: map.merge(
   (
-    'large': 10px,
-    'default': 8px,
-    'small': 6px,
+    'large': 16px,
+    'default': 12px,
+    'small': 8px,
   ),
   $descriptions-cell-padding-bottom
 );
@@ -17,13 +37,23 @@ $descriptions-cell-padding-bottom: map.merge(
 $descriptions-bordered-cell-padding: () !default;
 $descriptions-bordered-cell-padding: map.merge(
   (
-    'large': 10px,
-    'default': 8px 10px,
-    'small': 6px 10px,
+    'large': 12px 15px,
+    'default': 8px 11px,
+    'small': 4px 7px,
   ),
   $descriptions-bordered-cell-padding
 );
 
+$descriptions-cell-font-size: () !default;
+$descriptions-cell-font-size: map.merge(
+  (
+    'large': 14px,
+    'default': 14px,
+    'small': 12px,
+  ),
+  $descriptions-cell-font-size
+);
+
 @include b(descriptions) {
   @include set-component-css-var('descriptions', $descriptions);
 
@@ -35,16 +65,16 @@ $descriptions-bordered-cell-padding: map.merge(
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: var(--el-descriptions-header-margin-bottom);
+    margin-bottom: map.get($descriptions-header-margin-bottom, 'default');
 
     @include e(title) {
-      font-size: var(--el-descriptions-title-font-size);
+      color: var(--el-text-color-primary);
+      font-size: map.get($descriptions-title-font-size, 'default');
       font-weight: bold;
     }
   }
 
   @include e(body) {
-    color: var(--el-text-color-regular);
     background-color: $color-white;
 
     .#{$namespace}-descriptions__table {
@@ -55,7 +85,8 @@ $descriptions-bordered-cell-padding: map.merge(
         box-sizing: border-box;
         text-align: left;
         font-weight: normal;
-        line-height: 1.5;
+        line-height: 23px;
+        font-size: map.get($descriptions-cell-font-size, 'default');
 
         @include when(left) {
           text-align: left;
@@ -69,34 +100,51 @@ $descriptions-bordered-cell-padding: map.merge(
           text-align: right;
         }
       }
-    }
-  }
 
-  .is-bordered {
-    .#{$namespace}-descriptions__cell {
-      border: var(--el-descriptions-table-border);
-      padding: map.get($descriptions-bordered-cell-padding, 'default');
-    }
-  }
+      &.is-bordered {
+        .#{$namespace}-descriptions__cell {
+          border: var(--el-descriptions-table-border);
+          padding: map.get($descriptions-bordered-cell-padding, 'default');
+        }
+      }
 
-  :not(.is-bordered) {
-    .#{$namespace}-descriptions__cell {
-      padding-bottom: map.get($descriptions-cell-padding-bottom, 'default');
+      &:not(.is-bordered) {
+        .#{$namespace}-descriptions__cell {
+          padding-bottom: map.get($descriptions-cell-padding-bottom, 'default');
+        }
+      }
     }
   }
 
   @each $size in (large, small) {
     @include m($size) {
       font-size: map.get($input-font-size, $size);
-      &.is-bordered {
-        .#{$namespace}-descriptions__cell {
-          padding: map.get($descriptions-bordered-cell-padding, $size);
+
+      @include e(header) {
+        margin-bottom: map.get($descriptions-header-margin-bottom, $size);
+
+        @include e(title) {
+          font-size: map.get($descriptions-title-font-size, $size);
         }
       }
 
-      &:not(.is-bordered) {
-        .#{$namespace}-descriptions__cell {
-          padding-bottom: map.get($descriptions-cell-padding-bottom, $size);
+      @include e(body) {
+        .#{$namespace}-descriptions__table {
+          .#{$namespace}-descriptions__cell {
+            font-size: map.get($descriptions-cell-font-size, $size);
+          }
+
+          &.is-bordered {
+            .#{$namespace}-descriptions__cell {
+              padding: map.get($descriptions-bordered-cell-padding, $size);
+            }
+          }
+
+          &:not(.is-bordered) {
+            .#{$namespace}-descriptions__cell {
+              padding-bottom: map.get($descriptions-cell-padding-bottom, $size);
+            }
+          }
         }
       }
     }

package/theme-chalk/src/form.scss

@@ -77,7 +77,8 @@
     box-sizing: border-box;
   }
   @include e(content) {
-    display: inline-flex;
+    display: flex;
+    flex-wrap: wrap;
     align-items: center;
     flex: 1;
     line-height: calc(var(--font-size) * 2 + 4px);

package/theme-chalk/src/input-number.scss

@@ -125,8 +125,13 @@
     }
 
     @include e((increase, decrease)) {
-      height: auto;
-      line-height: #{math.div(map.get($input-height, 'default') - 2, 2)};
+      --el-input-number-controls-height: #{math.div(
+          map.get($input-height, 'default') - 2,
+          2
+        )};
+
+      height: var(--el-input-number-controls-height);
+      line-height: var(--el-input-number-controls-height);
 
       [class*='#{$namespace}-icon'] {
         transform: scale(0.8);
@@ -134,13 +139,14 @@
     }
 
     @include e(increase) {
+      bottom: auto;
+      left: auto;
       border-radius: 0 var(--el-border-radius-base) 0 0;
       border-bottom: var(--el-border-base);
     }
 
     @include e(decrease) {
       right: 1px;
-      bottom: 1px;
       top: auto;
       left: auto;
       border-right: none;
@@ -152,7 +158,10 @@
       &[class*='#{$size}'] {
         [class*='increase'],
         [class*='decrease'] {
-          line-height: #{math.div(map.get($input-height, $size) - 2, 2)};
+          --el-input-number-controls-height: #{math.div(
+              map.get($input-height, $size) - 2,
+              2
+            )};
         }
       }
     }

package/theme-chalk/src/radio-button.scss

@@ -36,8 +36,8 @@
     user-select: none;
 
     @include button-size(
-      map.get($button-padding-vertical, 'default'),
-      map.get($button-padding-horizontal, 'default'),
+      map.get($button-padding-vertical, 'default') - $button-border-width,
+      map.get($button-padding-horizontal, 'default') - $button-border-width,
       map.get($button-font-size, 'default'),
       0
     );
@@ -133,8 +133,8 @@
     @include m($size) {
       & .#{$namespace}-radio-button__inner {
         @include button-size(
-          map.get($button-padding-vertical, $size),
-          map.get($button-padding-horizontal, $size),
+          map.get($button-padding-vertical, $size) - $button-border-width,
+          map.get($button-padding-horizontal, $size) - $button-border-width,
           map.get($button-font-size, $size),
           0
         );

package/theme-chalk/src/radio.scss

@@ -182,6 +182,6 @@
 
   @include e(label) {
     font-size: var(--el-radio-font-size);
-    padding-left: 10px;
+    padding-left: 8px;
   }
 }