feat(comp:modal): add padding to padding next icon

add title and content color variables feat(comp:empty): add color variables BREAKING CHANGE: replaced empty-color variable with more specific ones BREAKING CHANGE: replace empty-font-size variable with more specific ones
IDuxFE · Jan 5, 2022 · 1faac2e · 1faac2e
1 parent de7f2f8
commit 1faac2e
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 4 deletions.
diff --git a/packages/components/empty/style/index.less b/packages/components/empty/style/index.less
@@ -4,10 +4,8 @@
   .reset-component();
 
   text-align: center;
-  font-size: @empty-font-size;
   line-height: @empty-line-height;
   margin: @empty-margin;
-  color: @empty-color;
 
   &-image {
     margin-bottom: @empty-image-margin-bottom;
@@ -19,15 +17,20 @@
     .@{icon-prefix} {
       opacity: @empty-image-icon-opacity;
       font-size: @empty-image-icon-font-size;
+      color: @empty-image-icon-color;
     }
   }
 
   &-description {
     opacity: @empty-description-opacity;
     margin: @empty-description-margin;
+    color: @empty-description-color;
+    font-size: @empty-description-font-size;
   }
 
   &-content {
     margin-top: @empty-content-margin-top;
+    color: @empty-content-color;
+    font-size: @empty-content-font-size;
   }
 }
diff --git a/packages/components/empty/style/themes/default.variable.less b/packages/components/empty/style/themes/default.variable.less
@@ -1,13 +1,16 @@
-@empty-font-size: @font-size-md;
 @empty-line-height: @line-height-base;
 @empty-margin: @spacing-lg 0;
-@empty-color: @text-color;
 
 @empty-image-margin-bottom: @spacing-sm;
 @empty-image-icon-opacity: 0.3;
 @empty-image-icon-font-size: 64px;
+@empty-image-icon-color: @text-color;
 
 @empty-description-opacity: 0.6;
 @empty-description-margin: 0;
+@empty-description-color: @text-color;
+@empty-description-font-size: @font-size-md;
 
 @empty-content-margin-top: @spacing-lg;
+@empty-content-color: @text-color;
+@empty-content-font-size: @font-size-md;
diff --git a/packages/components/modal/style/index.less b/packages/components/modal/style/index.less
@@ -1,4 +1,5 @@
 @import '../../style/mixins/box.less';
+@import '../../style/mixins/size.less';
 @import '../../style/mixins/reset.less';
 @import '../../style/motion/zoom.less';
 
@@ -54,10 +55,12 @@
       font-size: @modal-body-title-font-size;
       font-weight: @modal-body-title-font-weight;
       margin-bottom: @modal-body-title-margin-bottom;
+      color: @modal-body-title-color;
     }
 
     &-content {
       width: 100%;
+      color: @modal-body-content-color;
     }
 
     &-confirm,
@@ -75,6 +78,12 @@
       margin: @modal-body-icon-margin;
     }
 
+    &-icon + &-content {
+      .getSizeMixin();
+
+      margin-right: ~`getmarginleft('@{modal-body-icon-margin}') `;
+    }
+
     &-confirm {
       .@{modal-prefix}-body-icon {
         color: @modal-body-confirm-color;

diff --git a/packages/components/modal/style/themes/default.variable.less b/packages/components/modal/style/themes/default.variable.less
@@ -15,6 +15,8 @@
 @modal-body-title-font-size: @font-size-lg;
 @modal-body-title-font-weight: @font-weight-xl;
 @modal-body-title-margin-bottom: @spacing-sm;
+@modal-body-title-color: @text-color;
+@modal-body-content-color: @text-color;
 @modal-body-icon-font-size: 48px;
 @modal-body-icon-margin: 0 @spacing-lg;
 @modal-body-confirm-color: @color-warning;

diff --git a/packages/components/style/mixins/size.less b/packages/components/style/mixins/size.less
@@ -6,3 +6,57 @@
 .square(@size) {
   .size(@size; @size);
 }
+
+.getSizeMixin() {
+  @function: ~`(function() {
+    function parsePaddingOrMargin(size) {
+      if (typeof size !== 'string') {
+        return;
+      }
+
+      function filterSizeArr(sizeArr) {
+        return sizeArr.filter(part => !!part).map(part => part.trim().replace(/(\[|\]|\,)/g, ''));
+      }
+
+      if (size.startsWith('[') && size.endsWith(']') && size.indexOf(',') > -1) {
+        return filterSizeArr(size.split(','));
+      }
+
+      return filterSizeArr(size.split(' '));
+    }
+    function getPartAtIdx(padding, idx) {
+      const parts = parsePaddingOrMargin(padding)
+      if (!parts) {
+        return '';
+      }
+
+      if (parts.length === 1) {
+        return parts[0];
+      }
+
+      if (parts.length === 2) {
+        return parts[[0, 2].includes(idx) ? 0 : 1];
+      }
+
+      return parts[idx] ?? '';
+    }
+
+    this.getpaddingtop = function(padding) {
+      return getPartAtIdx(padding, 0);
+    }
+    this.getpaddingbottom = function(padding) {
+      return getPartAtIdx(padding, 2);
+    }
+    this.getpaddingleft = function(padding) {
+      return getPartAtIdx(padding, 3);
+    }
+    this.getpaddingright = function(padding) {
+      return getPartAtIdx(padding, 1);
+    }
+
+    this.getmargintop = this.getpaddingtop;
+    this.getmarginbottom = this.getpaddingbottom;
+    this.getmarginleft = this.getpaddingleft;
+    this.getmarginright = this.getpaddingright;
+  })()`
+}