@element-plus/nightly 0.0.20240222 → 0.0.20240225

package/theme-chalk/src/alert.scss

@@ -61,32 +61,35 @@
   }
 
   @include e(content) {
-    display: table-cell;
-    padding: 0 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
   }
 
   & .#{$namespace}-alert__icon {
     font-size: getCssVar('alert', 'icon-size');
     width: getCssVar('alert', 'icon-size');
+    margin-right: 8px;
 
     @include when(big) {
       font-size: getCssVar('alert', 'icon-large-size');
       width: getCssVar('alert', 'icon-large-size');
+      margin-right: 12px;
     }
   }
 
   @include e(title) {
     font-size: getCssVar('alert', 'title-font-size');
-    line-height: 18px;
-    vertical-align: text-top;
-    @include when(bold) {
-      font-weight: bold;
+    line-height: 24px;
+
+    &.with-description {
+      font-size: getCssVar('alert', 'title-with-description-font-size');
     }
   }
 
   & .#{$namespace}-alert__description {
     font-size: getCssVar('alert', 'description-font-size');
-    margin: 5px 0 0 0;
+    margin: 0;
   }
 
   & .#{$namespace}-alert__close-btn {
@@ -94,13 +97,14 @@
     opacity: 1;
     position: absolute;
     top: 12px;
-    right: 15px;
+    right: 16px;
     cursor: pointer;
 
     @include when(customed) {
       font-style: normal;
       font-size: getCssVar('alert', 'close-customed-font-size');
-      top: 9px;
+      line-height: 24px;
+      top: 8px;
     }
   }
 }

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

@@ -499,10 +499,11 @@ $alert: map.merge(
   (
     'padding': 8px 16px,
     'border-radius-base': getCssVar('border-radius-base'),
-    'title-font-size': 13px,
-    'description-font-size': 12px,
-    'close-font-size': 12px,
-    'close-customed-font-size': 13px,
+    'title-font-size': 14px,
+    'title-with-description-font-size': 16px,
+    'description-font-size': 14px,
+    'close-font-size': 16px,
+    'close-customed-font-size': 14px,
     'icon-size': 16px,
     'icon-large-size': 28px,
   ),
@@ -535,7 +536,7 @@ $message: map.merge(
   (
     'bg-color': getCssVar('color', 'info', 'light-9'),
     'border-color': getCssVar('border-color-lighter'),
-    'padding': 15px 19px,
+    'padding': 11px 15px,
     'close-size': 16px,
     'close-icon-color': getCssVar('text-color-placeholder'),
     'close-hover-color': getCssVar('text-color-secondary'),

package/theme-chalk/src/message.scss

@@ -23,17 +23,12 @@
   padding: getCssVar('message', 'padding');
   display: flex;
   align-items: center;
+  gap: 8px;
 
   @include when(center) {
     justify-content: center;
   }
 
-  @include when(closable) {
-    .#{$namespace}-message__content {
-      padding-right: 31px;
-    }
-  }
-
   p {
     margin: 0;
   }
@@ -61,10 +56,6 @@
     }
   }
 
-  @include e(icon) {
-    margin-right: 10px;
-  }
-
   .#{$namespace}-message__badge {
     position: absolute;
     top: -8px;
@@ -81,10 +72,6 @@
   }
 
   & .#{$namespace}-message__closeBtn {
-    position: absolute;
-    top: 50%;
-    right: 19px;
-    transform: translateY(-50%);
     cursor: pointer;
     color: getCssVar('message', 'close-icon-color');
     font-size: getCssVar('message', 'close-size');