bkui-vue 0.0.1-beta.46 → 0.0.1-beta.461

package/lib/message/message.css

@@ -11,17 +11,22 @@
   border: 1px solid #e1ecff;
   border-radius: 2px;
   transform: translateX(-50%);
-  box-shadow: 0px 2px 4px 0px rgba(16, 37, 74, 0.1);
+  box-shadow: 0px 2px 4px 0px #e1e8f4;
   justify-content: space-between;
 }
 .bk-message .bk-message-close {
   padding-left: 20px;
   margin-right: 0;
-  font-size: 18px;
+  font-size: 14px;
+  color: #c4c6cc;
   cursor: pointer;
 }
+.bk-message .bk-message-close:hover {
+  color: #979ba5;
+}
 .bk-message-icon {
   display: inline-block;
+  height: 18px;
   margin-right: 10px;
   font-size: 18px;
   color: #3a84ff;
@@ -33,6 +38,7 @@
 .bk-message-warning {
   background: #fff4e2;
   border: 1px solid #ffe8c3;
+  box-shadow: 0px 2px 4px 0px #ede6db;
 }
 .bk-message-warning .bk-message-icon {
   color: #ff9c01;
@@ -40,6 +46,7 @@
 .bk-message-success {
   background: #f2fff4;
   border: 1px solid #dcffe2;
+  box-shadow: 0px 2px 4px 0px #cef0d7;
 }
 .bk-message-success .bk-message-icon {
   color: #2dcb56;
@@ -47,16 +54,173 @@
 .bk-message-error {
   background: #ffeded;
   border: 1px solid #ffdddd;
+  box-shadow: 0px 2px 4px 0px #f6dada;
 }
 .bk-message-error .bk-message-icon {
   color: #ea3636;
 }
-.bk-fade-enter-active,
-.bk-fade-leave-active {
+.bk-message-fade-enter-active,
+.bk-message-fade-leave-active {
   transition: margin 0.2s linear;
 }
-.bk-fade-enter-from,
-.bk-fade-leave-to {
+.bk-message-fade-enter-from,
+.bk-message-fade-leave-to {
   margin-top: -50px;
   opacity: 0;
 }
+.bk-message-content {
+  display: flex;
+  width: 100%;
+  word-break: break-all;
+}
+.bk-message-content.multi {
+  flex-direction: column;
+  position: relative;
+}
+.bk-message-content.multi .overview {
+  display: flex;
+  justify-content: space-between;
+  align-items: self-start;
+}
+.bk-message-content.multi .overview .left-content {
+  display: flex;
+}
+.bk-message-content.multi .overview .left-content .describe {
+  display: box;
+  max-width: 560px;
+  max-height: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.bk-message-content.multi .overview .tools {
+  display: flex;
+  align-items: center;
+}
+.bk-message-content.multi .overview .tools .tool {
+  display: flex;
+  padding: 0 5px;
+  font-size: 14px;
+  cursor: pointer;
+  align-items: center;
+}
+.bk-message-content.multi .overview .tools .tool .bk-message-close {
+  padding-left: 0;
+}
+.bk-message-content.multi .overview .tools .tool .message-action-text {
+  padding-left: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-message-content.multi .overview .tools .tool:not(.fix) span {
+  color: #3a84ff;
+}
+.bk-message-content.multi .overview .tools .tool.fix.fixed span {
+  color: #3a84ff;
+}
+.bk-message-content.multi .overview .tools .tool.fix span {
+  color: #979ba5;
+}
+.bk-message-content.multi .overview .tools .tool.fix:hover span {
+  color: #3a84ff;
+}
+.bk-message-content.multi .overview .tools .tool.close span {
+  color: #c4c6cc;
+}
+.bk-message-content.multi .overview .tools .tool.close span:hover {
+  color: #979ba5;
+}
+.bk-message-content.multi .message-detail {
+  position: relative;
+  margin-top: 10px;
+}
+.bk-message-content.multi .message-detail .message-tree {
+  max-height: 480px;
+  padding: 14px 24px;
+  overflow: auto;
+  background: #fff;
+  border-radius: 2px;
+}
+.bk-message-content.multi .message-detail .message-tree .message-row {
+  display: inline-flex;
+  font-size: 14px;
+  line-height: 34px;
+  color: #313238;
+}
+.bk-message-content.multi .message-detail .message-tree .message-row label {
+  display: inline-block;
+  width: 94px;
+  min-width: 94px;
+  margin-right: 8px;
+  overflow: hidden;
+  color: #63656e;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-message-content.multi .message-detail .message-tree .message-row label::after {
+  content: ':';
+}
+.bk-message-content.multi .message-detail .message-copy {
+  position: absolute;
+  top: 20px;
+  right: 40px;
+  font-size: 16px;
+  cursor: pointer;
+}
+.bk-message-content.multi .message-detail .message-copy:hover span {
+  color: #3a84ff;
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status {
+  display: none;
+  padding-bottom: 4px;
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status .inner {
+  position: relative;
+  display: flex;
+  padding: 6px 8px;
+  font-size: 12px;
+  line-height: 20px;
+  color: #63656e;
+  background: #fff;
+  border: 1px solid #dcdee5;
+  box-shadow: 0 2px 6px 0 #0000001a;
+  align-items: center;
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status .inner span {
+  margin-right: 4px;
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status .inner::after {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  background: #fff;
+  border-color: #dcdee5;
+  border-style: solid;
+  border-width: 0px 1px 1px 0px;
+  content: '';
+  transform: translate(0, 4px) rotate(45deg);
+  box-shadow: 5px 3px 6px 0 #0000001a;
+  box-sizing: border-box;
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status.success .inner span {
+  color: #2dcb9d;
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status.error .inner span {
+  color: #ea3636;
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status.is-show {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  white-space: nowrap;
+  transform: translate(-50%, -100%);
+}
+.bk-message-content.multi .message-detail .message-copy .copy-status.is-hidden {
+  display: none;
+}

package/lib/message/message.less

@@ -13,19 +13,25 @@
   border: 1px solid @message-primary-border-color;
   border-radius: 2px;
   transform: translateX(-50%);
-  box-shadow: 0px 2px 4px 0px rgba(16, 37, 74, .1);
+  box-shadow: 0px 2px 4px 0px @message-primary-shadow-color;
   justify-content: space-between;
 
   .bk-message-close {
     padding-left: 20px;
     margin-right: 0;
-    font-size: 18px;
+    font-size: 14px;
+    color: @light-gray;
     cursor: pointer;
+
+    &:hover {
+      color: @gray-color;
+    }
   }
 }
 
 .@{bk-prefix}-message-icon {
   display: inline-block;
+  height: 18px;
   margin-right: 10px;
   font-size: 18px;
   color: @primary-color;
@@ -39,6 +45,7 @@
 .@{bk-prefix}-message-warning {
   background: @message-warning-bg-color;
   border: 1px solid @message-warning-border-color;
+  box-shadow: 0px 2px 4px 0px @message-warning-shadow-color;
   .@{bk-prefix}-message-icon {
     color: @warning-color;
   }
@@ -47,6 +54,7 @@
 .@{bk-prefix}-message-success {
   background: @message-success-bg-color;
   border: 1px solid @message-success-border-color;
+  box-shadow: 0px 2px 4px 0px @message-success-shadow-color;
   .@{bk-prefix}-message-icon {
     color: @success-color;
   }
@@ -55,18 +63,225 @@
 .@{bk-prefix}-message-error {
   background: @message-danger-bg-color;
   border: 1px solid @message-danger-border-color;
+  box-shadow: 0px 2px 4px 0px @message-danger-shadow-color;
   .@{bk-prefix}-message-icon {
     color: @danger-color;
   }
 }
 
-.bk-fade-enter-active,
-.bk-fade-leave-active {
+.@{bk-prefix}-message-fade-enter-active,
+.@{bk-prefix}-message-fade-leave-active {
   transition: margin .2s linear;
 }
 
-.bk-fade-enter-from,
-.bk-fade-leave-to {
+.@{bk-prefix}-message-fade-enter-from,
+.@{bk-prefix}-message-fade-leave-to {
   margin-top: -50px;
   opacity: 0;
-}
+}
+
+.@{bk-prefix}-message-content {
+  display: flex;
+  width: 100%;
+  word-break: break-all;
+
+  &.multi {
+    flex-direction: column;
+    position: relative;
+
+    .overview {
+      display: flex;
+      justify-content: space-between;
+      align-items: self-start;
+
+      .left-content {
+        display: flex;
+
+        .describe {
+          display: box;
+          max-width: 560px;
+          max-height: 60px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
+        }
+      }
+
+      .tools {
+        display: flex;
+        align-items: center;
+
+        .tool {
+          display: flex;
+          padding: 0 5px;
+          font-size: 14px;
+          cursor: pointer;
+          align-items: center;
+
+          .@{bk-prefix}-message-close {
+            padding-left: 0;
+          }
+
+          .message-action-text {
+            padding-left: 4px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          &:not(.fix) {
+            span {
+              color: #3a84ff;
+            }
+          }
+        
+          &.fix {
+            &.fixed {
+              span {
+                color: #3a84ff;
+              }
+            }
+          
+            span {
+              color: #979ba5;
+            }
+
+            &:hover {
+              span {
+                color: #3a84ff;
+              }
+            }
+          }
+
+          &.close {
+            span {
+              color: #c4c6cc;
+
+              &:hover {
+                color: #979ba5;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .message-detail {
+      position: relative;
+      margin-top: 10px;
+
+      .message-tree {
+        max-height: 480px;
+        padding: 14px 24px;
+        overflow: auto;
+        background: #fff;
+        border-radius: 2px;
+
+        .message-row {
+          display: inline-flex;
+          font-size: 14px;
+          line-height: 34px;
+          color: #313238;
+
+          label {
+            display: inline-block;
+            width: 94px;
+            min-width: 94px;
+            margin-right: 8px;
+            overflow: hidden;
+            color: #63656e;
+            text-align: right;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            &::after {
+              content: ':';
+            }
+          }
+        }
+      }
+
+      .message-copy {
+        position: absolute;
+        top: 20px;
+        right: 40px;
+        font-size: 16px;
+        cursor: pointer;
+
+        &:hover {
+          span {
+            color: #3a84ff;
+          }
+        }
+
+        .copy-status {
+          display: none;
+          padding-bottom: 4px;
+
+          .inner {
+            position: relative;
+            display: flex;
+            padding: 6px 8px;
+            font-size: 12px;
+            line-height: 20px;
+            color: #63656e;
+            background: #fff;
+            border: 1px solid #dcdee5;
+            box-shadow: 0 2px 6px 0 #0000001a;
+            align-items: center;
+
+            span {
+              margin-right: 4px;
+            }
+
+            &::after {
+              position: absolute;
+              bottom: 0;
+              left: 50%;
+              width: 8px;
+              height: 8px;
+              background: #fff;
+              border-color: #dcdee5;
+              border-style: solid;
+              border-width: 0px 1px 1px 0px;
+              content: '';
+              transform: translate(0, 4px) rotate(45deg);
+              box-shadow: 5px 3px 6px 0 #0000001a;
+              box-sizing: border-box;
+            }
+          }
+
+          &.success {
+            .inner {
+              span {
+                color: #2dcb9d;
+              }
+            }
+          }
+
+          &.error {
+            .inner {
+              span {
+                color: #ea3636;
+              }
+            }
+          }
+
+          &.is-show {
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: inline-flex;
+            white-space: nowrap;
+            transform: translate(-50%, -100%);
+          }
+
+          &.is-hidden {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}