bkui-vue 2.0.2-beta.1 → 2.0.2-beta.10

package/lib/date-picker/date-picker.variable.css

@@ -128,6 +128,222 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
+.bk-time-picker-header {
+  height: 46px;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 46px;
+  color: #63656e;
+  text-align: center;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-time-picker-cells:after {
+  position: absolute;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  height: 32px;
+  padding-top: 6px;
+  margin-top: 0;
+  color: #3a84ff;
+  text-align: left;
+  pointer-events: none;
+  background-color: rgba(58, 132, 255, 0.16);
+  content: '';
+  box-sizing: border-box;
+  mix-blend-mode: multiply;
+}
+.bk-time-picker-cells-with-seconds .bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(1):before,
+.bk-time-picker-cells-with-seconds .bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(2):before {
+  position: absolute;
+  top: 55px;
+  left: 85px;
+  z-index: 1;
+  width: 2px;
+  padding-top: 2px;
+  background-color: #3a84ff;
+  border-radius: 50%;
+  content: '';
+}
+.bk-time-picker-cells-with-seconds .bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(1):after,
+.bk-time-picker-cells-with-seconds .bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(2):after {
+  position: absolute;
+  top: calc(55px + 5px);
+  left: 85px;
+  z-index: 1;
+  width: 2px;
+  padding-top: 2px;
+  background-color: #3a84ff;
+  border-radius: 50%;
+  content: '';
+}
+.bk-time-picker-cells-title-wrapper {
+  width: 100%;
+  height: 42px;
+  line-height: 42px;
+}
+.bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title {
+  position: relative;
+  float: left;
+  width: 33.33%;
+  font-size: 14px;
+  font-weight: 700;
+  color: #63656e;
+  text-align: center;
+  list-style: none;
+}
+.bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title.active {
+  color: #3a84ff;
+}
+.bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(1):before {
+  position: absolute;
+  top: 55px;
+  left: 133px;
+  z-index: 1;
+  width: 2px;
+  padding-top: 2px;
+  background-color: #3a84ff;
+  border-radius: 50%;
+  content: '';
+}
+.bk-time-picker-cells-title-wrapper .bk-time-picker-cells-title:nth-of-type(1):after {
+  position: absolute;
+  top: calc(55px + 5px);
+  left: 133px;
+  z-index: 1;
+  width: 2px;
+  padding-top: 2px;
+  background-color: #3a84ff;
+  border-radius: 50%;
+  content: '';
+}
+.bk-time-picker-cells-list {
+  position: relative;
+  float: left;
+  width: 33.33%;
+  max-height: 200px;
+  overflow: hidden;
+}
+.bk-time-picker-cells-list:hover {
+  overflow-y: auto;
+}
+.bk-time-picker-cells-list:first-child {
+  border-radius: 2px 0 0 2px;
+}
+.bk-time-picker-cells-list:last-child {
+  border-radius: 0 2px 2px 0;
+}
+.bk-time-picker-cells-list::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  background-color: rgba(204, 204, 204, 0);
+}
+.bk-time-picker-cells-list::-webkit-scrollbar-thumb {
+  width: 0;
+  height: 0;
+  background-color: transparent;
+}
+.bk-time-picker-cells-list .bk-time-picker-cells-ul {
+  width: 100%;
+  padding: 0 0 168px 0;
+  margin: 0;
+  list-style: none;
+}
+.bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell {
+  position: relative;
+  width: 100%;
+  height: 32px;
+  padding: 0;
+  margin: 0;
+  font-size: 12px;
+  line-height: 32px;
+  color: #63656e;
+  text-align: center;
+  list-style: none;
+  cursor: pointer;
+  box-sizing: content-box;
+  transition: background 0.2s ease-in-out;
+  user-select: none;
+}
+.bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell:hover {
+  color: #3a84ff;
+}
+.bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell-disabled {
+  color: #c4c6cc;
+  cursor: not-allowed;
+}
+.bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell-disabled:hover {
+  color: #c4c6cc;
+  cursor: not-allowed;
+  background-color: #fff;
+}
+.bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell-selected,
+.bk-time-picker-cells-list .bk-time-picker-cells-ul .bk-time-picker-cells-cell-selected:hover {
+  color: #3a84ff;
+}
+.bk-time-picker-header {
+  height: 46px;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 46px;
+  color: #63656e;
+  text-align: center;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-time-picker-with-range .bk-picker-panel-content {
+  position: relative;
+  float: left;
+}
+.bk-time-picker-with-range .bk-picker-panel-content:after {
+  position: absolute;
+  top: 45px;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  display: block;
+  width: 1px;
+  background: #e8eaec;
+  content: '';
+}
+.bk-time-picker-with-range .bk-picker-panel-content-right {
+  float: right;
+}
+.bk-time-picker-with-range .bk-picker-panel-content-right:after {
+  right: auto;
+  left: 0;
+}
+.bk-time-picker-with-range .bk-time-picker-cells-list:first-child {
+  border-radius: 0;
+}
+.bk-time-picker-with-range .bk-time-picker-cells-list:last-child {
+  border-radius: 0;
+}
+.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells {
+  min-width: 216px;
+  position: relative;
+}
+.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells-with-seconds {
+  min-width: 216px;
+}
+.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells-with-seconds .bk-time-picker-cells-list {
+  width: 72px;
+}
+.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells-with-seconds .bk-time-picker-cells-list ul li {
+  padding: 0;
+}
+.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells-list {
+  width: 108px;
+  max-height: 200px;
+}
+.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells-list:first-child {
+  border-radius: 0;
+}
+.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells-list:last-child {
+  border-radius: 0;
+}
+.bk-picker-panel-content .bk-picker-panel-content .bk-time-picker-cells-list ul {
+  padding: 0 0 168px 0;
+}
 .bk-date-picker {
   display: inline-block;
   width: 261px;
@@ -146,45 +362,45 @@
   position: relative;
 }
 .bk-date-picker-rel .bk-date-picker-editor {
+  box-sizing: border-box;
   display: block;
   width: 100%;
   height: 32px;
   padding: 0 10px 0 30px;
   font-size: 12px;
   line-height: 32px;
-  color: var(--default-color);
+  color: #63656e;
   cursor: pointer;
-  border: 1px solid var(--light-gray);
+  border: 1px solid #c4c6cc;
   border-radius: 2px;
   outline: none;
-  box-sizing: border-box;
 }
 .bk-date-picker-rel .bk-date-picker-editor.only-bottom-border {
-  border-color: transparent transparent var(--light-gray) transparent;
+  border-color: transparent transparent #c4c6cc transparent;
 }
 .bk-date-picker-rel .bk-date-picker-editor.only-bottom-border:focus {
-  border-color: transparent transparent var(--primary-color) transparent;
+  border-color: transparent transparent #3a84ff transparent;
   box-shadow: none;
 }
 .bk-date-picker-rel .bk-date-picker-editor.only-bottom-border[disabled],
 .bk-date-picker-rel .bk-date-picker-editor.only-bottom-border.readonly {
-  border-color: transparent transparent var(--disable-color) transparent;
+  border-color: transparent transparent #dcdee5 transparent;
 }
 .bk-date-picker-rel .bk-date-picker-editor:focus {
-  border: 1px solid var(--primary-color);
+  border: 1px solid #3a84ff;
 }
 .bk-date-picker-rel .bk-date-picker-editor::placeholder {
-  color: var(--light-gray);
+  color: #c4c6cc;
 }
 .bk-date-picker-rel .bk-date-picker-editor[disabled] {
-  color: var(--light-gray);
+  color: #c4c6cc;
   cursor: not-allowed;
-  background-color: var(--date-picker-disabled-bg);
-  border-color: var(--light-gray);
+  background-color: #fafbfd;
+  border-color: #c4c6cc;
 }
 .bk-date-picker-rel .bk-date-picker-editor.readonly {
-  background-color: var(--date-picker-disabled-bg);
-  border-color: var(--light-gray);
+  background-color: #fafbfd;
+  border-color: #c4c6cc;
 }
 .bk-date-picker-rel .bk-date-picker-editor.medium-font {
   font-size: 14px;
@@ -198,12 +414,12 @@
   right: 10px;
   padding: 5px 0;
   font-size: 14px;
-  color: var(--light-gray);
+  color: #c4c6cc;
   cursor: pointer;
   transform: translateY(-50%);
 }
 .bk-date-picker-rel .clear-action:hover {
-  color: var(--gray-color);
+  color: #979ba5;
 }
 .bk-date-picker-rel .icon-wrapper {
   position: absolute;
@@ -212,7 +428,7 @@
   display: inline-block;
   width: 32px;
   height: 32px;
-  color: var(--light-gray);
+  color: #c4c6cc;
   cursor: pointer;
   background-color: transparent;
 }
@@ -236,13 +452,13 @@
 .bk-date-picker-dropdown {
   position: absolute;
   z-index: 900;
+  box-sizing: border-box;
   padding: 5px 0 0 0;
   overflow: auto;
-  background-color: var(--date-picker-dropdown-bg);
-  border: 1px solid var(--disable-color);
+  background-color: #fff;
+  border: 1px solid #dcdee5;
   border-radius: 2px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
-  box-sizing: border-box;
 }
 .bk-date-picker .bk-select-dropdown {
   max-height: none;
@@ -317,6 +533,7 @@
 }
 .bk-picker-confirm {
   display: flex;
+  justify-content: flex-end;
   height: 42px;
   padding: 0 20px;
   clear: both;
@@ -325,7 +542,6 @@
   text-align: right;
   background-color: #fafbfd;
   border-top: 1px solid #dcdee5;
-  justify-content: flex-end;
 }
 .bk-picker-confirm a {
   color: #979ba5;
@@ -456,10 +672,10 @@ span.bk-date-picker-cells-cell-disabled:hover {
   bottom: 0;
   left: 0;
   display: block;
+  content: '';
   background: #e1ecff;
   border: 0;
   border-radius: 0;
-  content: '';
 }
 .bk-date-picker-cells-cell-range em {
   position: relative;