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

package/lib/button/button.css

@@ -1,4 +1,4 @@
-:where(.bk-button) {
+.bk-button {
   display: inline-flex;
   height: 32px;
   padding: 0 14px;
@@ -17,242 +17,242 @@
   align-items: center;
   justify-content: center;
 }
-:where(.bk-button).bk-button-primary {
+.bk-button.bk-button-primary {
   background-color: #3a84ff;
   color: white;
   border-color: #3a84ff;
 }
-:where(.bk-button).bk-button-primary:hover {
+.bk-button.bk-button-primary:hover {
   background-color: #5594fa;
   border-color: #5594fa;
 }
-:where(.bk-button).bk-button-primary:active {
+.bk-button.bk-button-primary:active {
   background-color: #2c77f4;
   border-color: #2c77f4;
   color: white;
 }
-:where(.bk-button).bk-button-primary.is-outline {
+.bk-button.bk-button-primary.is-outline {
   color: #3a84ff;
   border-color: #3a84ff;
   background-color: white;
 }
-:where(.bk-button).bk-button-primary.is-outline:hover {
+.bk-button.bk-button-primary.is-outline:hover {
   background-color: #5594fa;
   border-color: #5594fa;
   color: white;
 }
-:where(.bk-button).bk-button-primary.is-outline:active {
+.bk-button.bk-button-primary.is-outline:active {
   background-color: #2c77f4;
   border-color: #2c77f4;
   color: white;
 }
-:where(.bk-button).bk-button-primary.is-text {
+.bk-button.bk-button-primary.is-text {
   color: #3a84ff;
   background-color: transparent;
   border: none;
 }
-:where(.bk-button).bk-button-primary.is-text:not(.is-disabled):hover {
+.bk-button.bk-button-primary.is-text:not(.is-disabled):hover {
   color: #5594fa;
 }
-:where(.bk-button).bk-button-primary.is-disabled {
+.bk-button.bk-button-primary.is-disabled {
   color: #dcdee5;
   cursor: not-allowed;
 }
-:where(.bk-button).bk-button-primary.is-disabled:not(.is-text) {
+.bk-button.bk-button-primary.is-disabled:not(.is-text) {
   background-color: #dcdee5;
   color: white;
   border-color: #dcdee5;
 }
-:where(.bk-button).bk-button-hover-primary:hover {
+.bk-button.bk-button-hover-primary:hover {
   background-color: #5594fa;
   border-color: #5594fa;
   color: white;
 }
-:where(.bk-button).bk-button-warning {
+.bk-button.bk-button-warning {
   background-color: #ff9c01;
   color: white;
   border-color: #ff9c01;
 }
-:where(.bk-button).bk-button-warning:hover {
+.bk-button.bk-button-warning:hover {
   background-color: #ffb848;
   border-color: #ffb848;
 }
-:where(.bk-button).bk-button-warning:active {
+.bk-button.bk-button-warning:active {
   background-color: #eb9000;
   border-color: #eb9000;
   color: white;
 }
-:where(.bk-button).bk-button-warning.is-outline {
+.bk-button.bk-button-warning.is-outline {
   color: #ff9c01;
   border-color: #ff9c01;
   background-color: white;
 }
-:where(.bk-button).bk-button-warning.is-outline:hover {
+.bk-button.bk-button-warning.is-outline:hover {
   background-color: #ffb848;
   border-color: #ffb848;
   color: white;
 }
-:where(.bk-button).bk-button-warning.is-outline:active {
+.bk-button.bk-button-warning.is-outline:active {
   background-color: #eb9000;
   border-color: #eb9000;
   color: white;
 }
-:where(.bk-button).bk-button-warning.is-text {
+.bk-button.bk-button-warning.is-text {
   color: #ff9c01;
   background-color: transparent;
   border: none;
 }
-:where(.bk-button).bk-button-warning.is-text:not(.is-disabled):hover {
+.bk-button.bk-button-warning.is-text:not(.is-disabled):hover {
   color: #ffb848;
 }
-:where(.bk-button).bk-button-warning.is-disabled {
+.bk-button.bk-button-warning.is-disabled {
   color: #dcdee5;
   cursor: not-allowed;
 }
-:where(.bk-button).bk-button-warning.is-disabled:not(.is-text) {
+.bk-button.bk-button-warning.is-disabled:not(.is-text) {
   background-color: #dcdee5;
   color: white;
   border-color: #dcdee5;
 }
-:where(.bk-button).bk-button-hover-warning:hover {
+.bk-button.bk-button-hover-warning:hover {
   background-color: #ffb848;
   border-color: #ffb848;
   color: white;
 }
-:where(.bk-button).bk-button-success {
+.bk-button.bk-button-success {
   background-color: #2dcb56;
   color: white;
   border-color: #2dcb56;
 }
-:where(.bk-button).bk-button-success:hover {
+.bk-button.bk-button-success:hover {
   background-color: #45e35f;
   border-color: #45e35f;
 }
-:where(.bk-button).bk-button-success:active {
+.bk-button.bk-button-success:active {
   background-color: #1ab943;
   border-color: #1ab943;
   color: white;
 }
-:where(.bk-button).bk-button-success.is-outline {
+.bk-button.bk-button-success.is-outline {
   color: #2dcb56;
   border-color: #2dcb56;
   background-color: white;
 }
-:where(.bk-button).bk-button-success.is-outline:hover {
+.bk-button.bk-button-success.is-outline:hover {
   background-color: #45e35f;
   border-color: #45e35f;
   color: white;
 }
-:where(.bk-button).bk-button-success.is-outline:active {
+.bk-button.bk-button-success.is-outline:active {
   background-color: #1ab943;
   border-color: #1ab943;
   color: white;
 }
-:where(.bk-button).bk-button-success.is-text {
+.bk-button.bk-button-success.is-text {
   color: #2dcb56;
   background-color: transparent;
   border: none;
 }
-:where(.bk-button).bk-button-success.is-text:not(.is-disabled):hover {
+.bk-button.bk-button-success.is-text:not(.is-disabled):hover {
   color: #45e35f;
 }
-:where(.bk-button).bk-button-success.is-disabled {
+.bk-button.bk-button-success.is-disabled {
   color: #dcdee5;
   cursor: not-allowed;
 }
-:where(.bk-button).bk-button-success.is-disabled:not(.is-text) {
+.bk-button.bk-button-success.is-disabled:not(.is-text) {
   background-color: #dcdee5;
   color: white;
   border-color: #dcdee5;
 }
-:where(.bk-button).bk-button-hover-success:hover {
+.bk-button.bk-button-hover-success:hover {
   background-color: #45e35f;
   border-color: #45e35f;
   color: white;
 }
-:where(.bk-button).bk-button-danger {
+.bk-button.bk-button-danger {
   background-color: #ea3636;
   color: white;
   border-color: #ea3636;
 }
-:where(.bk-button).bk-button-danger:hover {
+.bk-button.bk-button-danger:hover {
   background-color: #ff5656;
   border-color: #ff5656;
 }
-:where(.bk-button).bk-button-danger:active {
+.bk-button.bk-button-danger:active {
   background-color: #db2626;
   border-color: #db2626;
   color: white;
 }
-:where(.bk-button).bk-button-danger.is-outline {
+.bk-button.bk-button-danger.is-outline {
   color: #ea3636;
   border-color: #ea3636;
   background-color: white;
 }
-:where(.bk-button).bk-button-danger.is-outline:hover {
+.bk-button.bk-button-danger.is-outline:hover {
   background-color: #ff5656;
   border-color: #ff5656;
   color: white;
 }
-:where(.bk-button).bk-button-danger.is-outline:active {
+.bk-button.bk-button-danger.is-outline:active {
   background-color: #db2626;
   border-color: #db2626;
   color: white;
 }
-:where(.bk-button).bk-button-danger.is-text {
+.bk-button.bk-button-danger.is-text {
   color: #ea3636;
   background-color: transparent;
   border: none;
 }
-:where(.bk-button).bk-button-danger.is-text:not(.is-disabled):hover {
+.bk-button.bk-button-danger.is-text:not(.is-disabled):hover {
   color: #ff5656;
 }
-:where(.bk-button).bk-button-danger.is-disabled {
+.bk-button.bk-button-danger.is-disabled {
   color: #dcdee5;
   cursor: not-allowed;
 }
-:where(.bk-button).bk-button-danger.is-disabled:not(.is-text) {
+.bk-button.bk-button-danger.is-disabled:not(.is-text) {
   background-color: #dcdee5;
   color: white;
   border-color: #dcdee5;
 }
-:where(.bk-button).bk-button-hover-danger:hover {
+.bk-button.bk-button-hover-danger:hover {
   background-color: #ff5656;
   border-color: #ff5656;
   color: white;
 }
-:where(.bk-button).bk-button-small {
+.bk-button.bk-button-small {
   height: 26px;
   padding: 0 12px;
   font-size: 12px;
 }
-:where(.bk-button).bk-button-large {
+.bk-button.bk-button-large {
   height: 40px;
   padding: 0 16px;
   font-size: 16px;
 }
-:where(.bk-button) .bk-button-text {
+.bk-button .bk-button-text {
   display: inline-flex;
   align-items: center;
   line-height: 1;
 }
-:where(.bk-button).is-loading {
+.bk-button.is-loading {
   position: relative;
 }
-:where(.bk-button).is-loading .bk-button-loading:not(:last-child) {
+.bk-button.is-loading .bk-button-loading:not(:last-child) {
   position: absolute;
 }
-:where(.bk-button).is-loading .bk-button-text {
+.bk-button.is-loading .bk-button-text {
   visibility: hidden;
 }
-:where(.bk-button):hover {
+.bk-button:hover {
   border-color: #979ba5;
 }
-:where(.bk-button):active {
+.bk-button:active {
   color: #3a84ff;
   border-color: #3a84ff;
 }
-:where(.bk-button).is-text {
+.bk-button.is-text {
   height: auto;
   padding: 0;
   font-size: inherit;
@@ -263,61 +263,61 @@
   border: none;
   outline: none;
 }
-:where(.bk-button).is-disabled {
+.bk-button.is-disabled {
   color: #dcdee5;
   cursor: not-allowed;
   border-color: #dcdee5;
 }
-:where(.bk-button).is-disabled:not(.is-text) {
+.bk-button.is-disabled:not(.is-text) {
   background-color: #f9fafd;
 }
-:where(.bk-button-group) {
+.bk-button-group {
   display: inline-block;
   font-size: 0;
 }
-:where(.bk-button-group).bk-button-group-small .bk-button {
+.bk-button-group.bk-button-group-small .bk-button {
   height: 26px;
   padding: 0 12px;
   font-size: 12px;
 }
-:where(.bk-button-group).bk-button-group-large .bk-button {
+.bk-button-group.bk-button-group-large .bk-button {
   height: 40px;
   padding: 0 16px;
   font-size: 16px;
 }
-:where(.bk-button-group) .bk-button {
+.bk-button-group .bk-button {
   height: 32px;
   margin: 0 0 0 -1px;
   border-radius: 0;
 }
-:where(.bk-button-group) .bk-button:not(.is-disabled) {
+.bk-button-group .bk-button:not(.is-disabled) {
   color: #63656e;
   background-color: white;
   border-color: #c4c6cc;
 }
-:where(.bk-button-group) .bk-button.is-disabled {
+.bk-button-group .bk-button.is-disabled {
   color: #c4c6cc;
 }
-:where(.bk-button-group) .bk-button:first-child {
+.bk-button-group .bk-button:first-child {
   border-radius: 2px 0 0 2px;
 }
-:where(.bk-button-group) .bk-button:last-child {
+.bk-button-group .bk-button:last-child {
   border-radius: 0 2px 2px 0;
 }
-:where(.bk-button-group) .bk-button:only-child {
+.bk-button-group .bk-button:only-child {
   border-radius: 2px;
 }
-:where(.bk-button-group) .bk-button:hover:not(.is-disabled),
-:where(.bk-button-group) .bk-button.is-selected:not(.is-disabled) {
+.bk-button-group .bk-button:hover:not(.is-disabled),
+.bk-button-group .bk-button.is-selected:not(.is-disabled) {
   position: relative;
   z-index: 1;
   color: #3a84ff;
   background-color: white;
   border-color: #3a84ff;
 }
-:where(.bk-button-group) .bk-button.is-selected:not(.is-disabled) {
+.bk-button-group .bk-button.is-selected:not(.is-disabled) {
   background-color: #e1ecff;
 }
-:where(.bk-button-group) .bk-button.is-selected.is-disabled {
+.bk-button-group .bk-button.is-selected.is-disabled {
   background-color: #f0f1f5;
 }

package/lib/button/button.less

@@ -15,7 +15,7 @@
 @themeSelectors: primary, warning, success, danger;
 @sizeSelectors: small, large;
 
-:where(.@{bk-prefix}-button) {
+.@{bk-prefix}-button {
   display: inline-flex;
   height: @btnHeight;
   padding: @btnPadding;
@@ -29,7 +29,7 @@
   border-radius: @btnBorderRadius;
   outline: none;
   box-sizing: border-box;
-  transition: background-color ease 0.3s;
+  transition: background-color ease .3s;
   appearance: none;
   align-items: center;
   justify-content: center;
@@ -174,7 +174,8 @@
   // }
 }
 
-:where(.@{bk-prefix}-button-group) {
+
+.@{bk-prefix}-button-group {
   display: inline-block;
   font-size: 0;
 
@@ -235,5 +236,6 @@
     &.is-selected.is-disabled {
       background-color: @button-disabled-selected-bg-color;
     }
+
   }
 }