iov-design 2.15.45 → 2.15.46

package/packages/theme-chalk/src/alert.scss

@@ -3,12 +3,12 @@
 
 @include b(alert) {
   width: 100%;
-  padding: $--alert-padding;
+  padding: 11px 12px;
   margin: 0;
   box-sizing: border-box;
-  border-radius: $--alert-border-radius;
+  border-radius: 4px;
   position: relative;
-  background-color: $--color-white;
+  background-color: #fff;
   overflow: hidden;
   opacity: 1;
   display: flex;
@@ -26,10 +26,10 @@
 
   @include when(dark) {
     .el-alert__closebtn {
-      color: $--color-white;
+      color: #fff;
     }
     .el-alert__description {
-      color: $--color-white;
+      color: #fff;
     }
   }
 
@@ -49,7 +49,7 @@
 
     &.is-dark {
       background-color: $--color-success-6;
-      color: $--color-white;
+      color: #fff;
     }
   }
 
@@ -65,7 +65,7 @@
 
     &.is-dark {
       background-color: $--color-primary-6;
-      color: $--color-white;
+      color: #fff;
     }
   }
 
@@ -81,7 +81,7 @@
 
     &.is-dark {
       background-color: $--color-warning-6;
-      color: $--color-white;
+      color: #fff;
     }
   }
 
@@ -97,7 +97,7 @@
 
     &.is-dark {
       background-color: $--color-danger-6;
-      color: $--color-white;
+      color: #fff;
     }
   }
 
@@ -107,30 +107,33 @@
 
   @include e(icon) {
     margin-right: 8px;
-    font-size: $--alert-icon-size;
-    width: $--alert-icon-size;
+    font-size: 16px;
+    width: 16px;
     @include when(big) {
-      font-size: $--alert-icon-large-size;
-      width: $--alert-icon-large-size;
+      font-size: 16px;
+      width: 16px;
+      align-self: flex-start;
     }
   }
 
   @include e(title) {
-    font-size: $--alert-title-font-size;
+    font-size: 12px;
+    line-height: 16px;
+    display: block;
     @include when(bold) {
       font-weight: 500;
     }
   }
 
   & .el-alert__description {
-    font-size: $--alert-description-font-size;
-    margin: 5px 0 0 0;
+    font-size: 12px;
+    margin: 4px 0 0 0;
     color: $--color-text-6;
     font-weight: 400;
   }
 
   @include e(closebtn) {
-    font-size: $--alert-close-font-size;
+    font-size: 14px;
     opacity: 1;
     position: absolute;
     top: 12px;
@@ -139,7 +142,7 @@
 
     @include when(customed) {
       font-style: normal;
-      font-size: $--alert-close-customed-font-size;
+      font-size: 12px;
       top: 11px;
     }
   }

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

@@ -280,44 +280,11 @@ $--select-dropdown-border: solid 0.5px $--color-line-2 !default;
 
 /* Alert
 -------------------------- */
-$--alert-padding: 11px 12px !default;
-$--alert-border-radius: 4px !default;
-$--alert-title-font-size: 12px !default;
-$--alert-description-font-size: 12px !default;
-$--alert-close-font-size: 14px !default;
-$--alert-close-customed-font-size: 12px !default;
-
-$--alert-success-color: $--color-success-lighter !default;
-$--alert-info-color: $--color-info-lighter !default;
-$--alert-warning-color: $--color-warning-lighter !default;
-$--alert-danger-color: $--color-danger-lighter !default;
-
-$--alert-icon-size: 16px !default;
-$--alert-icon-large-size: 28px !default;
 
 /* MessageBox
 
 /* Message
 -------------------------- */
-$--message-shadow: $--box-shadow-base !default;
-$--message-min-width: 380px !default;
-$--message-background-color: #edf2fc !default;
-$--message-padding: 15px 15px 15px 20px !default;
-/// color||Color|0
-$--message-close-icon-color: $--color-text-placeholder !default;
-/// height||Other|4
-$--message-close-size: 16px !default;
-/// color||Color|0
-$--message-close-hover-color: $--color-text-secondary !default;
-
-/// color||Color|0
-$--message-success-font-color: $--color-success !default;
-/// color||Color|0
-$--message-info-font-color: $--color-info !default;
-/// color||Color|0
-$--message-warning-font-color: $--color-warning !default;
-/// color||Color|0
-$--message-danger-font-color: $--color-danger !default;
 
 /* Notification
 -------------------------- */
@@ -329,7 +296,7 @@ $--notification-shadow: $--box-shadow-light !default;
 /// color||Color|0
 $--notification-border-color: $--border-color-lighter !default;
 $--notification-icon-size: 24px !default;
-$--notification-close-font-size: $--message-close-size !default;
+$--notification-close-font-size: 14px !default;
 $--notification-group-margin-left: 13px !default;
 $--notification-group-margin-right: 8px !default;
 /// fontSize||Font|1

package/packages/theme-chalk/src/dialog.scss

@@ -10,13 +10,22 @@
   border-radius: 8px;
   box-sizing: border-box;
   width: 50%;
+  transform: translateY(-50%);
 
   @include when(fullscreen) {
     width: 100%;
-    margin-top: 0;
+    top: 0;
     margin-bottom: 0;
     height: 100%;
     overflow: auto;
+    transform: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .el-dialog__body {
+      flex: 1;
+      max-height: none;
+    }
   }
 
   @include e(wrapper) {
@@ -79,22 +88,23 @@
   }
 
   @include e(footer) {
-    padding: 16px 24px 20px 0;
+    padding: 16px 24px 20px;
     text-align: right;
     box-sizing: border-box;
     font-size: 0;
+    &.el-dialog__footer--shadow {
+      box-shadow: 0 0 12px 0 rgba(196, 198, 207, 0.21);
+    }
   }
 
-  // 内容居中布局
   @include m(center) {
-    text-align: center;
 
     @include e(body) {
-      text-align: initial;
+      text-align: left;
     }
 
     @include e(footer) {
-      text-align: inherit;
+      text-align: center;
     }
   }
 }

package/packages/theme-chalk/src/message-box.scss

@@ -1,207 +1,207 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "common/popup";
-@import "button";
-@import "input";
-
-@include b(message-box) {
-  display: inline-block;
-  width: 480px;
-  background: #fff;
-  border-radius: 8px;
-  text-align: left;
-  overflow: hidden;
-  backface-visibility: hidden;
-
-  @include e(wrapper) {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    text-align: center;
-
-    &::after {
-      content: "";
-      display: inline-block;
-      height: 100%;
-      width: 0;
-      vertical-align: middle;
-    }
-  }
-
-  @include e(header) {
-    position: relative;
-    padding: 16px 24px;
-    border-bottom: 1px solid $--color-line-1;
-  }
-
-  @include e(title) {
-    padding-left: 0;
-    margin-bottom: 0;
-    font-size: 16px;
-    line-height: 1;
-    color: $--color-text-6;
-    span {
-      font-weight: 500;
-    }
-  }
-
-  @include e(headerbtn) {
-    position: absolute;
-    top: 50%;
-    right: 20px;
-    padding: 4px;
-    cursor: pointer;
-    font-size: 0;
-    margin-top: -12px;
-    transition: all ease .3s;
-    border-radius: 4px;
-
-    .el-message-box__close {
-      font-size: 16px;
-      color: $--color-fill-5;
-    }
-
-    &:focus, &:hover {
-      background: $--color-fill-1;
-      .el-message-box__close {
-        color: $--color-fill-6;
-      }
-    }
-
-  }
-
-  @include e(content) {
-    padding: 16px 24px 0;
-    color: $--color-text-6;
-    font-size: 13px;
-    line-height: 20px;
-  }
-
-  @include e(container) {
-    position: relative;
-    overflow: hidden;
-  }
-
-  @include e(input) {
-    padding-top: 4px;
-    & input.invalid {
-      border-color: $--color-danger;
-      &:focus {
-        border-color: $--color-danger;
-      }
-    }
-  }
-
-  @include e(status) {
-    margin-right: 8px;
-    font-size: 24px !important;
-    float: left;
-
-    + .el-message-box__message {
-      padding-top: 2px;
-      overflow: hidden;
-    }
-
-    &.iov-icon-fill-success {
-      color: $--color-success-6;
-    }
-
-    &.iov-icon-fill-explain {
-      color: $--color-primary-6;
-    }
-
-    &.iov-icon-fill-warning {
-      color: $--color-warning-6;
-    }
-
-    &.iov-icon-fill-fail {
-      color: $--color-danger-6;
-    }
-  }
-
-  @include e(message) {
-    margin: 0;
-
-    & p {
-      margin: 0;
-      line-height: 20px;
-    }
-  }
-
-  @include e(errormsg) {
-    color: $--color-danger-6;
-    font-size: 12px;
-    min-height: 18px;
-    margin-top: 2px;
-  }
-
-  @include e(btns) {
-    padding: 16px 24px 20px;
-    text-align: right;
-
-    & button:nth-child(2) {
-      margin-left: 10px;
-    }
-  }
-
-  @include e(btns-reverse) {
-    flex-direction: row-reverse;
-  }
-
-  // centerAlign 布局
-  @include m(title-icon) {
-    @include e(header) {
-      padding: 24px 24px 0;
-      border-bottom: 0 none;
-    }
-    @include e(title) {
-      display: flex;
-      align-items: center;
-    }
-    @include e(status) {
-      float: none;
-    }
-    @include e(content) {
-      padding-top: 8px;
-      color: $--color-text-3;
-    }
-    @include e(message) {
-      padding-left: 32px;
-      &.no-type {
-        padding-left: 0;
-      }
-    }
-  }
-}
-
-.msgbox-fade-enter-active {
-  animation: msgbox-fade-in .3s;
-}
-
-.msgbox-fade-leave-active {
-  animation: msgbox-fade-out .3s;
-}
-
-@keyframes msgbox-fade-in {
-  0% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes msgbox-fade-out {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  100% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-}
+@import "mixins/mixins";
+@import "common/var";
+@import "common/popup";
+@import "button";
+@import "input";
+
+@include b(message-box) {
+  display: inline-block;
+  width: 480px;
+  background: #fff;
+  border-radius: 8px;
+  text-align: left;
+  overflow: hidden;
+  backface-visibility: hidden;
+
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+
+    &::after {
+      content: "";
+      display: inline-block;
+      height: 100%;
+      width: 0;
+      vertical-align: middle;
+    }
+  }
+
+  @include e(header) {
+    position: relative;
+    padding: 16px 24px;
+    border-bottom: 1px solid $--color-line-1;
+  }
+
+  @include e(title) {
+    padding-left: 0;
+    margin-bottom: 0;
+    font-size: 16px;
+    line-height: 1;
+    color: $--color-text-6;
+    span {
+      font-weight: 500;
+    }
+  }
+
+  @include e(headerbtn) {
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    padding: 4px;
+    cursor: pointer;
+    font-size: 0;
+    margin-top: -12px;
+    transition: all ease .3s;
+    border-radius: 4px;
+
+    .el-message-box__close {
+      font-size: 16px;
+      color: $--color-fill-5;
+    }
+
+    &:focus, &:hover {
+      background: $--color-fill-1;
+      .el-message-box__close {
+        color: $--color-fill-6;
+      }
+    }
+
+  }
+
+  @include e(content) {
+    padding: 16px 24px 0;
+    color: $--color-text-6;
+    font-size: 13px;
+    line-height: 20px;
+  }
+
+  @include e(container) {
+    position: relative;
+    overflow: hidden;
+  }
+
+  @include e(input) {
+    padding-top: 4px;
+    & input.invalid {
+      border-color: $--color-danger;
+      &:focus {
+        border-color: $--color-danger;
+      }
+    }
+  }
+
+  @include e(status) {
+    margin-right: 8px;
+    font-size: 24px !important;
+    float: left;
+
+    + .el-message-box__message {
+      padding-top: 2px;
+      overflow: hidden;
+    }
+
+    &.iov-icon-fill-success {
+      color: $--color-success-6;
+    }
+
+    &.iov-icon-fill-explain {
+      color: $--color-primary-6;
+    }
+
+    &.iov-icon-fill-warning {
+      color: $--color-warning-6;
+    }
+
+    &.iov-icon-fill-fail {
+      color: $--color-danger-6;
+    }
+  }
+
+  @include e(message) {
+    margin: 0;
+
+    & p {
+      margin: 0;
+      line-height: 20px;
+    }
+  }
+
+  @include e(errormsg) {
+    color: $--color-danger-6;
+    font-size: 12px;
+    min-height: 18px;
+    margin-top: 2px;
+  }
+
+  @include e(btns) {
+    padding: 16px 24px 20px;
+    text-align: right;
+
+    & button:nth-child(2) {
+      margin-left: 10px;
+    }
+  }
+
+  @include e(btns-reverse) {
+    flex-direction: row-reverse;
+  }
+
+  // centerAlign 布局
+  @include m(title-icon) {
+    @include e(header) {
+      padding: 24px 24px 0;
+      border-bottom: 0 none;
+    }
+    @include e(title) {
+      display: flex;
+      align-items: center;
+    }
+    @include e(status) {
+      float: none;
+    }
+    @include e(content) {
+      padding-top: 8px;
+      color: $--color-text-3;
+    }
+    @include e(message) {
+      padding-left: 32px;
+      &.no-type {
+        padding-left: 0;
+      }
+    }
+  }
+}
+
+.msgbox-fade-enter-active {
+  animation: msgbox-fade-in .3s;
+}
+
+.msgbox-fade-leave-active {
+  animation: msgbox-fade-out .3s;
+}
+
+@keyframes msgbox-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes msgbox-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}