bkui-vue 0.0.1-beta.138 → 0.0.1-beta.140

package/lib/radio/radio.less

@@ -1,172 +1,182 @@
-@import '../styles/themes/themes.less';
-
-.bk-radio {
-  display: inline-flex;
-  align-items: center;
-  font-size: @font-size-base;
-  font-weight: normal;
-  line-height: 1;
-  letter-spacing: normal;
-  color: @default-color;
-  white-space: nowrap;
-  cursor: pointer;
-  outline: none;
-  user-select: none;
-
-  &~.bk-radio {
-    margin-left: 30px;
-  }
-
-  &.is-checked {
-    .bk-radio-input {
-      padding: 3px;
-      color: @primary-color;
-      background-color: @primary-color;
-      border-color: @primary-color;
-    }
-  }
-
-  &.is-disabled {
-    color: #c4c6cc;
-    cursor: not-allowed;
-
-    &.is-checked {
-      .bk-radio-input {
-        background-color: #fafbfd;
-      }
-    }
-
-    .bk-radio-input {
-      cursor: not-allowed;
-      border-color: #dcdee5;
-    }
-
-    .bk-radio-text {
-      cursor: not-allowed;
-    }
-  }
-
-  &.is-focused {
-    .bk-radio-input {
-      border-color: @primary-color;
-    }
-  }
-
-  .bk-radio-text {
-    font-size: 12px;
-    font-style: normal;
-    font-weight: normal;
-    vertical-align: middle;
-    cursor: pointer;
-  }
-
-  .bk-radio-input {
-    position: relative;
-    display: inline-block;
-    width: @line-height-base;
-    height: @line-height-base;
-    margin: 0 5px 0 0;
-    color: #fff;
-    vertical-align: middle;
-    cursor: pointer;
-    background-color: #fff;
-    border: @border-width-base @border-style-base #979ba5;
-    border-radius: 50%;
-    outline: none;
-    visibility: visible;
-    transition: all .3s;
-    background-clip: content-box;
-    appearance: none;
-  }
-}
-
-.bk-radio-button {
-  position: relative;
-  z-index: 1;
-  display: inline-block;
-  font-size: 0;
-  font-weight: normal;
-  line-height: 1;
-  letter-spacing: normal;
-  color: @default-color;
-  white-space: nowrap;
-  cursor: pointer;
-  outline: none;
-  opacity: 1;
-  user-select: none;
-
-  &:nth-child(n+2) {
-    margin-left: -1px;
-  }
-
-  &:first-child {
-    .bk-radio-button-text {
-      border-bottom-left-radius: @border-radius-base;
-      border-top-left-radius: @border-radius-base;
-    }
-  }
-
-  &:last-child {
-    .bk-radio-button-text {
-      border-top-right-radius: @border-radius-base;
-      border-bottom-right-radius: @border-radius-base;
-    }
-  }
-
-  &.is-checked {
-    z-index: 2;
-
-    .bk-radio-button-text {
-      color: @primary-color;
-      background: #e1ecff;
-      border-color: @primary-color;
-    }
-  }
-
-  &.is-disabled {
-    z-index: 0;
-    color: @disable-color;
-    cursor: not-allowed;
-
-    .bk-radio-button-text {
-      cursor: not-allowed;
-      background: @disable-color;
-      border-color: @disable-color;
-    }
-  }
-
-  &.is-focused {
-    .bk-radio-button-text {
-      border-color: @primary-color;
-    }
-  }
-
-  .bk-radio-button-input {
-    position: absolute;
-    z-index: -1;
-    outline: none;
-    opacity: 0;
-  }
-
-  .bk-radio-button-text {
-    height: @component-size-base;
-    padding: 0 18px;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: normal;
-    line-height: @component-size-base;
-    color: @default-color;
-    text-align: center;
-    vertical-align: middle;
-    cursor: pointer;
-    border: @border-width-base @border-style-base #979ba5;
-    transition: all .3s;
-  }
-}
-
-.bk-radio-group {
-  display: inline-block;
-  font-size: 0;
-  line-height: 0;
-  letter-spacing: normal;
+@import '../styles/themes/themes.less';
+
+.bk-radio {
+  display: inline-flex;
+  align-items: center;
+  font-size: @font-size-base;
+  font-weight: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  color: @radio-font-color;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+
+  &~.bk-radio {
+    margin-left: 30px;
+  }
+
+  .bk-radio-text {
+    font-size: 12px;
+    font-style: normal;
+    font-weight: normal;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .bk-radio-input {
+    position: relative;
+    display: inline-block;
+    width: @line-height-base;
+    height: @line-height-base;
+    margin: 0 5px 0 0;
+    color: #fff;
+    vertical-align: middle;
+    cursor: pointer;
+    background-color: #fff;
+    border: @border-width-base @border-style-base @light-gray;
+    border-radius: 50%;
+    outline: none;
+    visibility: visible;
+    transition: all .3s;
+    background-clip: content-box;
+    appearance: none;
+
+    &:hover {
+      border-color: @radio-hover-border-color;
+    }
+  }
+
+  &.is-checked {
+    .bk-radio-input {
+      padding: 3px;
+      color: @radio-active-color;
+      background-color: @radio-active-color;
+      border-color: @radio-active-color;
+    }
+  }
+
+  &.is-disabled {
+    color: @radio-disabled-font-color;
+    cursor: not-allowed;
+
+    &.is-checked {
+      .bk-radio-input {
+        background-color: @radio-distable-checked-bg;
+      }
+    }
+
+    .bk-radio-input {
+      cursor: not-allowed;
+      border-color: @radio-disabled-border;
+    }
+
+    .bk-radio-text {
+      cursor: not-allowed;
+    }
+  }
+
+  &.is-focused {
+    .bk-radio-input {
+      border-color: @radio-active-color;
+    }
+  }
+}
+
+.bk-radio-button {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  font-size: 0;
+  font-weight: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  color: @radio-font-color;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  opacity: 1;
+  user-select: none;
+
+  &:nth-child(n+2) {
+    margin-left: -1px;
+  }
+
+  .bk-radio-button-input {
+    position: absolute;
+    z-index: -1;
+    outline: none;
+    opacity: 0;
+  }
+
+  .bk-radio-button-text {
+    height: @component-size-base;
+    padding: 0 18px;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: normal;
+    line-height: @component-size-base;
+    color: @default-color;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    border: @border-width-base @border-style-base @light-gray;
+    transition: all .3s;
+
+    &:hover {
+      border-color: @radio-hover-border-color;
+    }
+  }
+
+  &:first-child {
+    .bk-radio-button-text {
+      border-bottom-left-radius: @border-radius-base;
+      border-top-left-radius: @border-radius-base;
+    }
+  }
+
+  &:last-child {
+    .bk-radio-button-text {
+      border-top-right-radius: @border-radius-base;
+      border-bottom-right-radius: @border-radius-base;
+    }
+  }
+
+  &.is-checked {
+    z-index: 2;
+
+    .bk-radio-button-text {
+      color: @radio-active-color;
+      background: @radio-button-checked-bg;
+      border-color: @radio-active-color;
+    }
+  }
+
+  &.is-disabled {
+    z-index: 0;
+    color: @radio-disabled-font-color;
+    cursor: not-allowed;
+
+    .bk-radio-button-text {
+      cursor: not-allowed;
+      background: currentColor;
+      border-color: currentColor;
+    }
+  }
+
+  &.is-focused {
+    .bk-radio-button-text {
+      border-color: @radio-active-color;
+    }
+  }
+
+  
+}
+
+.bk-radio-group {
+  display: inline-block;
+  font-size: 0;
+  line-height: 0;
+  letter-spacing: normal;
 }

package/lib/radio/radio.variable.css

@@ -47,6 +47,13 @@
   --button-warning-active-color: #eb9000;
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
+  --radio-font-color: #63656e;
+  --radio-active-color: #5594fa;
+  --radio-hover-border-color: #979ba5;
+  --radio-disabled-border: #dcdee5;
+  --radio-disabled-font-color: #c4c6c;
+  --radio-distable-checked-bg: #fafbfd;
+  --radio-button-checked-bg: #e1ecff;
   --fixed-navbar-background: #fff;
   --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
   --switch-default-color: #fff;
@@ -67,12 +74,16 @@
   --message-color: var(--default-color);
   --message-primary-bg-color: #f0f8ff;
   --message-primary-border-color: #e1ecff;
+  --message-primary-shadow-color: #e1e8f4;
   --message-warning-bg-color: #fff4e2;
   --message-warning-border-color: #ffe8c3;
+  --message-warning-shadow-color: #ede6db;
   --message-success-bg-color: #f2fff4;
   --message-success-border-color: #dcffe2;
+  --message-success-shadow-color: #cef0d7;
   --message-danger-bg-color: #ffeded;
   --message-danger-border-color: #ffdddd;
+  --message-danger-shadow-color: #f6dada;
   --slider-default-bg: #dcdee5;
   --slider-disable-bar-bg: #979ba5;
   --menu-bg-color: #182132;
@@ -107,7 +118,7 @@
   font-weight: normal;
   line-height: 1;
   letter-spacing: normal;
-  color: var(--default-color);
+  color: var(--radio-font-color);
   white-space: nowrap;
   cursor: pointer;
   outline: none;
@@ -116,29 +127,6 @@
 .bk-radio ~ .bk-radio {
   margin-left: 30px;
 }
-.bk-radio.is-checked .bk-radio-input {
-  padding: 3px;
-  color: var(--primary-color);
-  background-color: var(--primary-color);
-  border-color: var(--primary-color);
-}
-.bk-radio.is-disabled {
-  color: #c4c6cc;
-  cursor: not-allowed;
-}
-.bk-radio.is-disabled.is-checked .bk-radio-input {
-  background-color: #fafbfd;
-}
-.bk-radio.is-disabled .bk-radio-input {
-  cursor: not-allowed;
-  border-color: #dcdee5;
-}
-.bk-radio.is-disabled .bk-radio-text {
-  cursor: not-allowed;
-}
-.bk-radio.is-focused .bk-radio-input {
-  border-color: var(--primary-color);
-}
 .bk-radio .bk-radio-text {
   font-size: 12px;
   font-style: normal;
@@ -156,7 +144,7 @@
   vertical-align: middle;
   cursor: pointer;
   background-color: #fff;
-  border: var(--border-width-base) var(--border-style-base) #979ba5;
+  border: var(--border-width-base) var(--border-style-base) var(--light-gray);
   border-radius: 50%;
   outline: none;
   visibility: visible;
@@ -164,6 +152,32 @@
   background-clip: content-box;
   appearance: none;
 }
+.bk-radio .bk-radio-input:hover {
+  border-color: var(--radio-hover-border-color);
+}
+.bk-radio.is-checked .bk-radio-input {
+  padding: 3px;
+  color: var(--radio-active-color);
+  background-color: var(--radio-active-color);
+  border-color: var(--radio-active-color);
+}
+.bk-radio.is-disabled {
+  color: var(--radio-disabled-font-color);
+  cursor: not-allowed;
+}
+.bk-radio.is-disabled.is-checked .bk-radio-input {
+  background-color: var(--radio-distable-checked-bg);
+}
+.bk-radio.is-disabled .bk-radio-input {
+  cursor: not-allowed;
+  border-color: var(--radio-disabled-border);
+}
+.bk-radio.is-disabled .bk-radio-text {
+  cursor: not-allowed;
+}
+.bk-radio.is-focused .bk-radio-input {
+  border-color: var(--radio-active-color);
+}
 .bk-radio-button {
   position: relative;
   z-index: 1;
@@ -172,7 +186,7 @@
   font-weight: normal;
   line-height: 1;
   letter-spacing: normal;
-  color: var(--default-color);
+  color: var(--radio-font-color);
   white-space: nowrap;
   cursor: pointer;
   outline: none;
@@ -182,6 +196,29 @@
 .bk-radio-button:nth-child(n+2) {
   margin-left: -1px;
 }
+.bk-radio-button .bk-radio-button-input {
+  position: absolute;
+  z-index: -1;
+  outline: none;
+  opacity: 0;
+}
+.bk-radio-button .bk-radio-button-text {
+  height: var(--component-size-base);
+  padding: 0 18px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: var(--component-size-base);
+  color: var(--default-color);
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: var(--border-width-base) var(--border-style-base) var(--light-gray);
+  transition: all 0.3s;
+}
+.bk-radio-button .bk-radio-button-text:hover {
+  border-color: var(--radio-hover-border-color);
+}
 .bk-radio-button:first-child .bk-radio-button-text {
   border-bottom-left-radius: var(--border-radius-base);
   border-top-left-radius: var(--border-radius-base);
@@ -194,42 +231,22 @@
   z-index: 2;
 }
 .bk-radio-button.is-checked .bk-radio-button-text {
-  color: var(--primary-color);
-  background: #e1ecff;
-  border-color: var(--primary-color);
+  color: var(--radio-active-color);
+  background: var(--radio-button-checked-bg);
+  border-color: var(--radio-active-color);
 }
 .bk-radio-button.is-disabled {
   z-index: 0;
-  color: var(--disable-color);
+  color: var(--radio-disabled-font-color);
   cursor: not-allowed;
 }
 .bk-radio-button.is-disabled .bk-radio-button-text {
   cursor: not-allowed;
-  background: var(--disable-color);
-  border-color: var(--disable-color);
+  background: currentColor;
+  border-color: currentColor;
 }
 .bk-radio-button.is-focused .bk-radio-button-text {
-  border-color: var(--primary-color);
-}
-.bk-radio-button .bk-radio-button-input {
-  position: absolute;
-  z-index: -1;
-  outline: none;
-  opacity: 0;
-}
-.bk-radio-button .bk-radio-button-text {
-  height: var(--component-size-base);
-  padding: 0 18px;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: normal;
-  line-height: var(--component-size-base);
-  color: var(--default-color);
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  border: var(--border-width-base) var(--border-style-base) #979ba5;
-  transition: all 0.3s;
+  border-color: var(--radio-active-color);
 }
 .bk-radio-group {
   display: inline-block;

package/lib/resize-layout/resize-layout.variable.css

@@ -47,6 +47,13 @@
   --button-warning-active-color: #eb9000;
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
+  --radio-font-color: #63656e;
+  --radio-active-color: #5594fa;
+  --radio-hover-border-color: #979ba5;
+  --radio-disabled-border: #dcdee5;
+  --radio-disabled-font-color: #c4c6c;
+  --radio-distable-checked-bg: #fafbfd;
+  --radio-button-checked-bg: #e1ecff;
   --fixed-navbar-background: #fff;
   --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
   --switch-default-color: #fff;
@@ -67,12 +74,16 @@
   --message-color: var(--default-color);
   --message-primary-bg-color: #f0f8ff;
   --message-primary-border-color: #e1ecff;
+  --message-primary-shadow-color: #e1e8f4;
   --message-warning-bg-color: #fff4e2;
   --message-warning-border-color: #ffe8c3;
+  --message-warning-shadow-color: #ede6db;
   --message-success-bg-color: #f2fff4;
   --message-success-border-color: #dcffe2;
+  --message-success-shadow-color: #cef0d7;
   --message-danger-bg-color: #ffeded;
   --message-danger-border-color: #ffdddd;
+  --message-danger-shadow-color: #f6dada;
   --slider-default-bg: #dcdee5;
   --slider-disable-bar-bg: #979ba5;
   --menu-bg-color: #182132;

package/lib/select/select.variable.css

@@ -47,6 +47,13 @@
   --button-warning-active-color: #eb9000;
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
+  --radio-font-color: #63656e;
+  --radio-active-color: #5594fa;
+  --radio-hover-border-color: #979ba5;
+  --radio-disabled-border: #dcdee5;
+  --radio-disabled-font-color: #c4c6c;
+  --radio-distable-checked-bg: #fafbfd;
+  --radio-button-checked-bg: #e1ecff;
   --fixed-navbar-background: #fff;
   --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
   --switch-default-color: #fff;
@@ -67,12 +74,16 @@
   --message-color: var(--default-color);
   --message-primary-bg-color: #f0f8ff;
   --message-primary-border-color: #e1ecff;
+  --message-primary-shadow-color: #e1e8f4;
   --message-warning-bg-color: #fff4e2;
   --message-warning-border-color: #ffe8c3;
+  --message-warning-shadow-color: #ede6db;
   --message-success-bg-color: #f2fff4;
   --message-success-border-color: #dcffe2;
+  --message-success-shadow-color: #cef0d7;
   --message-danger-bg-color: #ffeded;
   --message-danger-border-color: #ffdddd;
+  --message-danger-shadow-color: #f6dada;
   --slider-default-bg: #dcdee5;
   --slider-disable-bar-bg: #979ba5;
   --menu-bg-color: #182132;