@element-plus/nightly 0.0.20221202 → 0.0.20221204

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

@@ -622,7 +622,20 @@ $cascader: map.merge(
   ),
   $cascader
 );
-
+//statistic
+// css3 var in packages/theme-chalk/src/statistic.scss
+$statistic: () !default;
+$statistic: map.merge(
+  (
+    'head-justify-content': center,
+    'content-justify-content': center,
+    'padding': 0 5px,
+    'content-margin-top': 4px,
+    'content-text-color': getCssVar('text-color', 'primary'),
+    'head-text-color': getCssVar('text-color', 'regular'),
+  ),
+  $statistic
+);
 // Button
 // css3 var in packages/theme-chalk/src/button.scss
 $button: () !default;

package/theme-chalk/src/index.scss

@@ -102,3 +102,4 @@
 @use './option.scss';
 @use './option-group.scss';
 @use './option-item.scss';
+@use './statistic.scss';

package/theme-chalk/src/statistic.scss

@@ -0,0 +1,46 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(statistic) {
+  @include set-component-css-var('statistic', $statistic);
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-variant: tabular-nums;
+  // line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  @include e(head) {
+    padding: getCssVar('statistic-padding');
+    font-style: normal;
+    font-weight: 400;
+    font-size: getCssVar('font-size', 'extra-small');
+
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: getCssVar('statistic-head-justify-content');
+    color: getCssVar('statistic-head-text-color');
+  }
+  @include e(content) {
+    display: flex;
+    justify-content: getCssVar('statistic-content-justify-content');
+    align-items: center;
+    padding-top: getCssVar('statistic-content-margin-top');
+    @include e(number) {
+      font-style: normal;
+      padding: getCssVar('statistic-padding');
+      font-family: sans-serif;
+    }
+    span {
+      font-weight: 400;
+      color: getCssVar('statistic-content-text-color');
+      font-size: getCssVar('font-size', 'extra-large');
+      display: inline-block;
+      margin: 0;
+      line-height: 28px;
+    }
+  }
+}