bkui-vue 1.0.3-beta.24 → 1.0.3-beta.26

package/lib/message/message.less

@@ -1,6 +1,6 @@
 @import '../styles/themes/themes.less';
 
-.@{bk-prefix}-message {
+:where(.@{bk-prefix}-message) {
   position: fixed;
   top: 20px;
   left: 50%;
@@ -29,7 +29,7 @@
   }
 }
 
-.@{bk-prefix}-message-icon {
+:where(.@{bk-prefix}-message-icon) {
   display: inline-block;
   height: 18px;
   margin-right: 10px;
@@ -37,12 +37,12 @@
   color: @primary-color;
 }
 
-.@{bk-prefix}-message-primary {
+:where(.@{bk-prefix}-message-primary) {
   background: @message-primary-bg-color;
   border: 1px solid @message-primary-border-color;
 }
 
-.@{bk-prefix}-message-warning {
+:where(.@{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;
@@ -51,7 +51,7 @@
   }
 }
 
-.@{bk-prefix}-message-success {
+:where(.@{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;
@@ -60,7 +60,7 @@
   }
 }
 
-.@{bk-prefix}-message-error {
+:where(.@{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;
@@ -69,18 +69,18 @@
   }
 }
 
-.@{bk-prefix}-message-fade-enter-active,
-.@{bk-prefix}-message-fade-leave-active {
-  transition: margin .2s linear;
+:where(.@{bk-prefix}-message-fade-enter-active),
+:where(.@{bk-prefix}-message-fade-leave-active) {
+  transition: margin 0.2s linear;
 }
 
-.@{bk-prefix}-message-fade-enter-from,
-.@{bk-prefix}-message-fade-leave-to {
+:where(.@{bk-prefix}-message-fade-enter-from),
+:where(.@{bk-prefix}-message-fade-leave-to) {
   margin-top: -50px;
   opacity: 0;
 }
 
-.@{bk-prefix}-message-content {
+:where(.@{bk-prefix}-message-content) {
   display: flex;
   width: 100%;
   word-break: break-all;
@@ -172,12 +172,12 @@
       margin-top: 10px;
 
       .message-tree {
+        display: flex;
         max-height: 480px;
         padding: 14px 32px;
         overflow: auto;
         background: #fff;
         border-radius: 2px;
-        display: flex;
         flex-direction: column;
 
         .message-row {
@@ -204,10 +204,10 @@
 
           .copy-value {
             padding-left: 4px;
-            
+
             &:hover {
-              background: rgba(186, 188, 192, 0.2);
               cursor: pointer;
+              background: rgba(186, 188, 192, 0.2);
               border-radius: 2px;
             }
           }
@@ -217,23 +217,24 @@
       .message-copy {
         position: absolute;
         top: 20px;
-        right: 40px;
-        font-size: 16px;
         top: 0px;
+        right: 40px;
         right: 0px;
-        font-size: 18px;
+        display: flex;
         width: 24px;
         height: 24px;
-        display: flex;
-        align-items: center;
-        border-radius: 0 2px 0 6px;
+        font-size: 16px;
+        font-size: 18px;
+        color: #9fa3ae;
         cursor: pointer;
+        background: #f5f7fa;
+        border-radius: 0 2px 0 6px;
+        align-items: center;
         justify-content: center;
-        background: #F5F7FA;
-        color: #9FA3AE;
 
         &:hover {
-          background: #F0F5FF;
+          background: #f0f5ff;
+
           span {
             color: #3a84ff;
           }

package/lib/message/message.variable.css

@@ -12,13 +12,13 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
-  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
   --line-height-base: 16px;
   --line-height-medium: 16px;
   --line-height-large: 18px;
+  --border-color: #dcdee5;
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
@@ -111,7 +111,7 @@
   --table-border-color: #dcdee5;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
-  --table-body-font-color: #63656E;
+  --table-body-font-color: #63656e;
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
   --cascader-panel-border-color: #dcdee5;
@@ -127,7 +127,7 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.bk-message {
+:where(.bk-message) {
   position: fixed;
   top: 20px;
   left: 50%;
@@ -143,78 +143,78 @@
   box-shadow: 0px 2px 4px 0px var(--message-primary-shadow-color);
   justify-content: space-between;
 }
-.bk-message .bk-message-close {
+:where(.bk-message) .bk-message-close {
   padding-left: 20px;
   margin-right: 0;
   font-size: 14px;
   color: var(--light-gray);
   cursor: pointer;
 }
-.bk-message .bk-message-close:hover {
+:where(.bk-message) .bk-message-close:hover {
   color: var(--gray-color);
 }
-.bk-message-icon {
+:where(.bk-message-icon) {
   display: inline-block;
   height: 18px;
   margin-right: 10px;
   font-size: 18px;
   color: var(--primary-color);
 }
-.bk-message-primary {
+:where(.bk-message-primary) {
   background: var(--message-primary-bg-color);
   border: 1px solid var(--message-primary-border-color);
 }
-.bk-message-warning {
+:where(.bk-message-warning) {
   background: var(--message-warning-bg-color);
   border: 1px solid var(--message-warning-border-color);
   box-shadow: 0px 2px 4px 0px var(--message-warning-shadow-color);
 }
-.bk-message-warning .bk-message-icon {
+:where(.bk-message-warning) .bk-message-icon {
   color: var(--warning-color);
 }
-.bk-message-success {
+:where(.bk-message-success) {
   background: var(--message-success-bg-color);
   border: 1px solid var(--message-success-border-color);
   box-shadow: 0px 2px 4px 0px var(--message-success-shadow-color);
 }
-.bk-message-success .bk-message-icon {
+:where(.bk-message-success) .bk-message-icon {
   color: var(--success-color);
 }
-.bk-message-error {
+:where(.bk-message-error) {
   background: var(--message-danger-bg-color);
   border: 1px solid var(--message-danger-border-color);
   box-shadow: 0px 2px 4px 0px var(--message-danger-shadow-color);
 }
-.bk-message-error .bk-message-icon {
+:where(.bk-message-error) .bk-message-icon {
   color: var(--danger-color);
 }
-.bk-message-fade-enter-active,
-.bk-message-fade-leave-active {
+:where(.bk-message-fade-enter-active),
+:where(.bk-message-fade-leave-active) {
   transition: margin 0.2s linear;
 }
-.bk-message-fade-enter-from,
-.bk-message-fade-leave-to {
+:where(.bk-message-fade-enter-from),
+:where(.bk-message-fade-leave-to) {
   margin-top: -50px;
   opacity: 0;
 }
-.bk-message-content {
+:where(.bk-message-content) {
   display: flex;
   width: 100%;
   word-break: break-all;
 }
-.bk-message-content.multi {
+:where(.bk-message-content).multi {
   flex-direction: column;
   position: relative;
 }
-.bk-message-content.multi .overview {
+:where(.bk-message-content).multi .overview {
   display: flex;
   justify-content: space-between;
   align-items: self-start;
 }
-.bk-message-content.multi .overview .left-content {
+:where(.bk-message-content).multi .overview .left-content {
   display: flex;
 }
-.bk-message-content.multi .overview .left-content .describe {
+:where(.bk-message-content).multi .overview .left-content .describe {
   display: box;
   max-width: 560px;
   max-height: 60px;
@@ -223,64 +223,64 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 }
-.bk-message-content.multi .overview .tools {
+:where(.bk-message-content).multi .overview .tools {
   display: flex;
   align-items: center;
 }
-.bk-message-content.multi .overview .tools .tool {
+:where(.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 {
+:where(.bk-message-content).multi .overview .tools .tool .bk-message-close {
   padding-left: 0;
 }
-.bk-message-content.multi .overview .tools .tool .message-action-text {
+:where(.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 {
+:where(.bk-message-content).multi .overview .tools .tool:not(.fix) span {
   color: #3a84ff;
 }
-.bk-message-content.multi .overview .tools .tool.fix.fixed span {
+:where(.bk-message-content).multi .overview .tools .tool.fix.fixed span {
   color: #3a84ff;
 }
-.bk-message-content.multi .overview .tools .tool.fix span {
+:where(.bk-message-content).multi .overview .tools .tool.fix span {
   color: #979ba5;
 }
-.bk-message-content.multi .overview .tools .tool.fix:hover span {
+:where(.bk-message-content).multi .overview .tools .tool.fix:hover span {
   color: #3a84ff;
 }
-.bk-message-content.multi .overview .tools .tool.close span {
+:where(.bk-message-content).multi .overview .tools .tool.close span {
   color: #c4c6cc;
 }
-.bk-message-content.multi .overview .tools .tool.close span:hover {
+:where(.bk-message-content).multi .overview .tools .tool.close span:hover {
   color: #979ba5;
 }
-.bk-message-content.multi .message-detail {
+:where(.bk-message-content).multi .message-detail {
   position: relative;
   margin-top: 10px;
 }
-.bk-message-content.multi .message-detail .message-tree {
+:where(.bk-message-content).multi .message-detail .message-tree {
+  display: flex;
   max-height: 480px;
   padding: 14px 32px;
   overflow: auto;
   background: #fff;
   border-radius: 2px;
-  display: flex;
   flex-direction: column;
 }
-.bk-message-content.multi .message-detail .message-tree .message-row {
+:where(.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 {
+:where(.bk-message-content).multi .message-detail .message-tree .message-row label {
   display: inline-block;
   width: 94px;
   min-width: 94px;
@@ -291,46 +291,46 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-message-content.multi .message-detail .message-tree .message-row label::after {
+:where(.bk-message-content).multi .message-detail .message-tree .message-row label::after {
   content: ':';
 }
-.bk-message-content.multi .message-detail .message-tree .message-row .copy-value {
+:where(.bk-message-content).multi .message-detail .message-tree .message-row .copy-value {
   padding-left: 4px;
 }
-.bk-message-content.multi .message-detail .message-tree .message-row .copy-value:hover {
-  background: rgba(186, 188, 192, 0.2);
+:where(.bk-message-content).multi .message-detail .message-tree .message-row .copy-value:hover {
   cursor: pointer;
+  background: rgba(186, 188, 192, 0.2);
   border-radius: 2px;
 }
-.bk-message-content.multi .message-detail .message-copy {
+:where(.bk-message-content).multi .message-detail .message-copy {
   position: absolute;
   top: 20px;
-  right: 40px;
-  font-size: 16px;
   top: 0px;
+  right: 40px;
   right: 0px;
-  font-size: 18px;
+  display: flex;
   width: 24px;
   height: 24px;
-  display: flex;
-  align-items: center;
-  border-radius: 0 2px 0 6px;
+  font-size: 16px;
+  font-size: 18px;
+  color: #9fa3ae;
   cursor: pointer;
+  background: #f5f7fa;
+  border-radius: 0 2px 0 6px;
+  align-items: center;
   justify-content: center;
-  background: #F5F7FA;
-  color: #9FA3AE;
 }
-.bk-message-content.multi .message-detail .message-copy:hover {
-  background: #F0F5FF;
+:where(.bk-message-content).multi .message-detail .message-copy:hover {
+  background: #f0f5ff;
 }
-.bk-message-content.multi .message-detail .message-copy:hover span {
+:where(.bk-message-content).multi .message-detail .message-copy:hover span {
   color: #3a84ff;
 }
-.bk-message-content.multi .message-detail .copy-status {
+:where(.bk-message-content).multi .message-detail .copy-status {
   display: none;
   padding-bottom: 4px;
 }
-.bk-message-content.multi .message-detail .copy-status .inner {
+:where(.bk-message-content).multi .message-detail .copy-status .inner {
   position: relative;
   display: flex;
   padding: 6px 8px;
@@ -342,10 +342,10 @@
   box-shadow: 0 2px 6px 0 #0000001a;
   align-items: center;
 }
-.bk-message-content.multi .message-detail .copy-status .inner span {
+:where(.bk-message-content).multi .message-detail .copy-status .inner span {
   margin-right: 4px;
 }
-.bk-message-content.multi .message-detail .copy-status .inner::after {
+:where(.bk-message-content).multi .message-detail .copy-status .inner::after {
   position: absolute;
   bottom: 0;
   left: 50%;
@@ -360,13 +360,13 @@
   box-shadow: 5px 3px 6px 0 #0000001a;
   box-sizing: border-box;
 }
-.bk-message-content.multi .message-detail .copy-status.success .inner span {
+:where(.bk-message-content).multi .message-detail .copy-status.success .inner span {
   color: #2dcb9d;
 }
-.bk-message-content.multi .message-detail .copy-status.error .inner span {
+:where(.bk-message-content).multi .message-detail .copy-status.error .inner span {
   color: #ea3636;
 }
-.bk-message-content.multi .message-detail .copy-status.is-show {
+:where(.bk-message-content).multi .message-detail .copy-status.is-show {
   position: absolute;
   top: 0;
   left: 0;
@@ -374,6 +374,6 @@
   white-space: nowrap;
   transform: translate(-50%, -100%);
 }
-.bk-message-content.multi .message-detail .copy-status.is-hidden {
+:where(.bk-message-content).multi .message-detail .copy-status.is-hidden {
   display: none;
 }

package/lib/modal/modal.css

@@ -1,68 +1,68 @@
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper {
+:where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper {
   width: 440px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
+:where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper.normal {
   width: 440px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
+:where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper.small {
   width: 400px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
+:where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
   border-radius: 2px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
+:where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
   padding: 24px 24px 0;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
+:where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
   height: 27px;
   margin: 15px 0 10px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
+:where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
   height: 100%;
   max-height: 100%;
   min-height: 100%;
   padding: 0 50px 10px;
   word-break: break-all;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
+:where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
   margin-bottom: 10px;
   text-align: center;
   word-break: break-all;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
+:where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
   padding: 0 65px 33px;
   background-color: #fff;
   border-top: none;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
+:where(.bk-modal-ctx).bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
   min-width: 88px;
 }
-.bk-modal-ctx {
-  pointer-events: auto;
+:where(.bk-modal-ctx) {
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
+  pointer-events: auto;
 }
-.bk-modal-ctx.--show {
+:where(.bk-modal-ctx).--show {
   position: fixed;
 }
-.bk-modal-ctx.--hide {
+:where(.bk-modal-ctx).--hide {
   display: none;
 }
-.bk-modal-ctx .bk-modal-ctx-mask {
-  display: none;
-  left: 0;
+:where(.bk-modal-ctx) .bk-modal-ctx-mask {
   top: 0;
+  left: 0;
+  display: none;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
 }
-.bk-modal-ctx .bk-modal-ctx-mask.--show {
+:where(.bk-modal-ctx) .bk-modal-ctx-mask.--show {
   position: fixed;
   display: inherit;
 }
-.bk-modal-wrapper {
+:where(.bk-modal-wrapper) {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -70,32 +70,32 @@
   border-radius: 2px;
   transform: translate(-50%, -50%);
 }
-.bk-modal-wrapper .bk-modal-outside {
+:where(.bk-modal-wrapper) .bk-modal-outside {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }
-.bk-modal-wrapper.normal {
+:where(.bk-modal-wrapper).normal {
   width: 480px;
   height: 240px;
 }
-.bk-modal-wrapper.small {
+:where(.bk-modal-wrapper).small {
   width: 400px;
   height: 200px;
 }
-.bk-modal-wrapper.medium {
+:where(.bk-modal-wrapper).medium {
   width: 640px;
   height: 400px;
 }
-.bk-modal-wrapper.large {
+:where(.bk-modal-wrapper).large {
   width: 960px;
   height: 720px;
 }
-.bk-modal-wrapper .bk-modal-body {
-  height: 100%;
+:where(.bk-modal-wrapper) .bk-modal-body {
   width: 100%;
+  height: 100%;
   background: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

package/lib/modal/modal.less

@@ -1,13 +1,13 @@
 @import '../styles/themes/themes.less';
 @import '../info-box/info-box.less';
 
-.@{bk-prefix}-modal-ctx {
-  pointer-events: auto;
+:where(.@{bk-prefix}-modal-ctx) {
   top: 0px;
   left: 0px;
 
   width: 100%;
   height: 100%;
+  pointer-events: auto;
 
   &.--show {
     position: fixed;
@@ -18,12 +18,12 @@
   }
 
   .@{bk-prefix}-modal-ctx-mask {
-    display: none;
-    left: 0;
     top: 0;
+    left: 0;
+    display: none;
     width: 100%;
     height: 100%;
-    background-color: rgba(0,0,0,0.6);
+    background-color: rgba(0, 0, 0, 0.6);
 
     &.--show {
       position: fixed;
@@ -32,9 +32,7 @@
   }
 }
 
-
-
-.@{bk-prefix}-modal-wrapper {
+:where(.@{bk-prefix}-modal-wrapper) {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -72,11 +70,9 @@
   }
 
   .@{bk-prefix}-modal-body {
-    height: 100%;
     width: 100%;
+    height: 100%;
     background: #fff;
-    box-shadow: 0 4px 12px rgba(0,0,0,.15);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
 }
-
-