bkui-vue 0.0.1-beta.206 → 0.0.1-beta.207

package/lib/search-select/search-select.css

@@ -71,182 +71,31 @@
 .bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
   left: -4px;
 }
-.menu-list-mixin {
-  display: flex;
-  flex-direction: column;
-}
-.menu-item-mixin {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 32px;
-  padding: 0 12px;
-  flex: 0 0 32px;
-  outline: none;
-}
-.menu-item-mixin:hover {
-  cursor: pointer;
-  background-color: #f5f7fa;
-}
-.menu-disabled-mixin {
-  color: #c4c6cc;
-}
-.menu-disabled-mixin:hover {
-  cursor: not-allowed;
-  background-color: white;
-}
-.search-select-menu {
-  display: flex;
-  min-width: 160px;
-  font-size: 12px;
-  color: #63656e;
-  flex-direction: column;
-}
-.search-select-menu .menu-header {
-  display: flex;
-  flex-direction: column;
-  border-bottom: 1px solid #dcdee5;
-}
-.search-select-menu .menu-header-item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 32px;
-  padding: 0 12px;
-  flex: 0 0 32px;
-  outline: none;
-}
-.search-select-menu .menu-header-item:hover {
-  cursor: pointer;
-  background-color: #f5f7fa;
-}
-.search-select-menu .menu-header-item.is-disabled {
-  color: #c4c6cc;
-}
-.search-select-menu .menu-header-item.is-disabled:hover {
-  cursor: not-allowed;
-  background-color: white;
-}
-.search-select-menu .menu-content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  max-height: 240px;
-  overflow: auto;
-}
-.search-select-menu .menu-content .menu-item {
-  display: flex;
-  align-items: center;
-  width: 100%;
+.bk-search-select {
+  position: relative;
+  z-index: 9;
   height: 32px;
-  padding: 0 12px;
-  flex: 0 0 32px;
-  outline: none;
-}
-.search-select-menu .menu-content .menu-item:hover {
-  cursor: pointer;
-  background-color: #f5f7fa;
-}
-.search-select-menu .menu-content .menu-item .is-keyword {
-  display: inline-flex;
-  color: #3a84ff;
-}
-.search-select-menu .menu-content .menu-item .is-selected {
-  display: flex;
-  width: 14px;
-  height: 14px;
-  margin-left: auto;
-  overflow: hidden;
-  font-size: 18px;
-  font-weight: bold;
-  color: #3a84ff;
-  align-items: center;
-  justify-content: center;
-}
-.search-select-menu .menu-content .menu-item.is-hover {
-  color: #3a84ff;
-  background-color: #f5f7fa;
-}
-.search-select-menu .menu-content .menu-item.is-hover .menu-name {
-  color: #3a84ff;
-}
-.search-select-menu .menu-content .menu-item.is-disabled {
-  color: #c4c6cc;
-}
-.search-select-menu .menu-content .menu-item.is-disabled:hover {
-  cursor: not-allowed;
-  background-color: white;
-}
-.search-select-menu .menu-content .menu-item.is-disabled .menu-name {
-  color: #c4c6cc;
+  overflow: inherit;
 }
-.search-select-menu .menu-content .menu-item .menu-name {
-  display: flex;
-  max-width: 100px;
-  margin-right: 5px;
-  font-weight: bold;
-  color: #63656e;
-  align-items: center;
+.bk-search-select .focus {
+  color: #3c96ff;
+  background: #fff !important;
+  border-color: #3a84ff !important;
 }
-.search-select-menu .menu-footer {
-  display: flex;
-  width: 100%;
+.bk-search-select .div-input {
   height: 32px;
-  border-top: 1px solid #dcdee5;
-  align-items: center;
-}
-.search-select-menu .menu-footer-btn {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-.search-select-menu .menu-footer-btn:first-child {
-  border-right: 1px solid #dcdee5;
-}
-.search-select-menu .menu-footer-btn:hover {
-  color: #3a84ff;
-  cursor: pointer;
-}
-.search-select-menu .menu-footer-btn.is-disabled {
-  color: #c4c6cc;
-}
-.search-select-menu .menu-footer-btn.is-disabled:hover {
-  cursor: not-allowed;
-  background-color: white;
-}
-.search-seleted-input {
-  position: relative;
-  display: flex;
-  height: 100%;
-  min-width: 150px;
-  min-width: 40px;
-  padding: 0 10px;
-  margin-top: -4px;
-  color: #63656e;
-  border: none;
-  align-items: center;
-  offset: none;
-}
-.search-seleted-input .div-input {
-  height: 30px;
   padding: 5px 0;
   line-height: 20px;
   word-break: break-all;
   flex: 1 1 auto;
-  outline: none;
 }
-.search-select-wrap {
-  position: relative;
-  z-index: 9;
-  height: 32px;
-  overflow: inherit;
+.bk-search-select .div-input:focus {
+  outline: none;
 }
-.search-select-wrap .bk-search-select {
+.bk-search-select-container {
   position: relative;
   display: flex;
-  min-height: 30px;
+  min-height: 32px;
   overflow: hidden;
   font-size: 12px;
   color: #63656e;
@@ -260,19 +109,19 @@
   align-items: center;
   flex-wrap: wrap;
 }
-.search-select-wrap .bk-search-select.is-focus {
+.bk-search-select-container.is-focus {
   overflow: auto;
   color: #3c96ff;
   background: #fff !important;
-  border-color: #3c96ff !important;
+  border-color: #3a84ff !important;
 }
-.search-select-wrap .bk-search-select .search-prefix {
+.bk-search-select-container .search-prefix {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   height: 100%;
 }
-.search-select-wrap .bk-search-select .search-input {
+.bk-search-select-container .search-container {
   position: relative;
   display: flex;
   min-height: 26px;
@@ -285,7 +134,7 @@
   flex-wrap: wrap;
   align-items: center;
 }
-.search-select-wrap .bk-search-select .search-input-chip {
+.bk-search-select-container .search-container-selected {
   position: relative;
   display: inline-block;
   max-width: 99%;
@@ -298,24 +147,24 @@
   flex: 0 0 auto;
   align-self: center;
 }
-.search-select-wrap .bk-search-select .search-input-chip.hidden-chip {
+.bk-search-select-container .search-container-selected.hidden-selected {
   visibility: hidden;
 }
-.search-select-wrap .bk-search-select .search-input-chip.overflow-chip {
+.bk-search-select-container .search-container-selected.overflow-selected {
   padding-right: 8px;
 }
-.search-select-wrap .bk-search-select .search-input-chip:hover {
+.bk-search-select-container .search-container-selected:hover {
   background: #dcdee5;
 }
-.search-select-wrap .bk-search-select .search-input-chip:hover .chip-clear {
+.bk-search-select-container .search-container-selected:hover .selected-clear {
   color: #63656e;
 }
-.search-select-wrap .bk-search-select .search-input-chip .chip-name {
+.bk-search-select-container .search-container-selected .selected-name {
   display: inline-block;
   margin-right: 20px;
   word-break: break-all;
 }
-.search-select-wrap .bk-search-select .search-input-chip .chip-clear {
+.bk-search-select-container .search-container-selected .selected-clear {
   position: absolute;
   top: 4px;
   right: 3px;
@@ -331,7 +180,7 @@
   align-items: center;
   justify-content: center;
 }
-.search-select-wrap .bk-search-select .search-input-input {
+.bk-search-select-container .search-container-input {
   position: relative;
   display: flex;
   height: 100%;
@@ -343,31 +192,34 @@
   flex: 1 1 auto;
   align-items: center;
 }
-.search-select-wrap .bk-search-select .search-input-input .div-input {
-  height: 30px;
-  padding: 5px 0;
-  line-height: 20px;
-  word-break: break-all;
-  flex: 1 1 auto;
-}
-.search-select-wrap .bk-search-select .search-input-input .div-input:focus {
-  outline: none;
-}
-.search-select-wrap .bk-search-select .search-input-input .input-before:before {
+.bk-search-select-container .search-container-input .input-before:before {
   color: #c4c6cc;
   content: attr(data-placeholder);
 }
-.search-select-wrap .bk-search-select .search-input-input .input-after:after {
+.bk-search-select-container .search-container-input .input-after:after {
   padding-left: 2px;
   color: #c4c6cc;
   content: attr(data-tips);
 }
-.search-select-wrap .bk-search-select .search-nextfix {
+.bk-search-select-container .search-container .selected-input {
+  position: relative;
   display: flex;
+  height: 100%;
+  min-width: 40px;
+  padding: 0 10px;
+  margin-top: -4px;
+  color: #63656e;
+  border: none;
+  align-items: center;
+}
+.bk-search-select-container .search-nextfix {
   color: #c4c6cc;
+  flex: 0 0 auto;
+  display: flex;
   align-items: center;
+  height: 100%;
 }
-.search-select-wrap .bk-search-select .search-nextfix .search-clear {
+.bk-search-select-container .search-nextfix .search-clear {
   display: flex;
   width: 12px;
   height: 12px;
@@ -377,11 +229,11 @@
   align-items: center;
   justify-content: center;
 }
-.search-select-wrap .bk-search-select .search-nextfix .search-clear:hover {
+.bk-search-select-container .search-nextfix .search-clear:hover {
   color: #979ba5;
   cursor: pointer;
 }
-.search-select-wrap .bk-search-select .search-nextfix .search-nextfix-icon {
+.bk-search-select-container .search-nextfix .search-nextfix-icon {
   display: flex;
   margin-right: 8px;
   font-size: 16px;
@@ -389,21 +241,21 @@
   align-items: center;
   justify-content: center;
 }
-.search-select-wrap .bk-search-select .search-nextfix .search-nextfix-icon.is-focus {
+.bk-search-select-container .search-nextfix .search-nextfix-icon.is-focus {
   color: #3c96ff;
   background: #fff !important;
-  border-color: #3c96ff !important;
+  border-color: #3a84ff !important;
 }
-.search-select-wrap .bk-search-select::-webkit-scrollbar {
+.bk-search-select-container::-webkit-scrollbar {
   width: 3px;
   height: 5px;
 }
-.search-select-wrap .bk-search-select::-webkit-scrollbar-thumb {
+.bk-search-select-container::-webkit-scrollbar-thumb {
   background: #e6e9ea;
   border-radius: 20px;
   box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
 }
-.search-select-wrap .bk-select-tips {
+.bk-search-select-tips {
   display: flex;
   margin-top: 5px;
   font-size: 12px;
@@ -411,7 +263,7 @@
   color: #ea3636;
   align-items: center;
 }
-.search-select-wrap .bk-select-tips .select-tips {
+.bk-search-select-tips .select-tips {
   display: flex;
   width: 16px;
   height: 16px;
@@ -421,6 +273,151 @@
   align-items: center;
   justify-content: center;
 }
-.popover-content {
+.bk-search-select-menu {
+  display: flex;
+  min-width: 160px;
+  font-size: 12px;
+  color: #63656e;
+  flex-direction: column;
+}
+.bk-search-select-menu .menu-list-mixin {
+  display: flex;
+  flex-direction: column;
+}
+.bk-search-select-menu .menu-item-mixin {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  flex: 0 0 32px;
+  outline: none;
+}
+.bk-search-select-menu .menu-item-mixin:hover {
+  cursor: pointer;
+  background-color: #f5f7fa;
+}
+.bk-search-select-menu .menu-disabled-mixin {
+  color: #c4c6cc;
+}
+.bk-search-select-menu .menu-disabled-mixin:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.bk-search-select-menu .menu-header {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid #c4c6cc;
+}
+.bk-search-select-menu .menu-header-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  flex: 0 0 32px;
+  outline: none;
+}
+.bk-search-select-menu .menu-header-item:hover {
+  cursor: pointer;
+  background-color: #f5f7fa;
+}
+.bk-search-select-menu .menu-header-item.is-disabled {
+  color: #c4c6cc;
+}
+.bk-search-select-menu .menu-header-item.is-disabled:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.bk-search-select-menu .menu-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  max-height: 240px;
+  overflow: auto;
+}
+.bk-search-select-menu .menu-content .menu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  flex: 0 0 32px;
+  outline: none;
+}
+.bk-search-select-menu .menu-content .menu-item:hover {
+  cursor: pointer;
+  background-color: #f5f7fa;
+}
+.bk-search-select-menu .menu-content .menu-item .is-keyword {
+  display: inline-flex;
+  color: #3a84ff;
+}
+.bk-search-select-menu .menu-content .menu-item .is-selected {
+  display: flex;
+  width: 14px;
+  height: 14px;
+  margin-left: auto;
+  overflow: hidden;
+  font-size: 18px;
+  font-weight: bold;
+  color: #3a84ff;
+  align-items: center;
+  justify-content: center;
+}
+.bk-search-select-menu .menu-content .menu-item.is-hover {
+  color: #3a84ff;
+  background-color: #f5f7fa;
+}
+.bk-search-select-menu .menu-content .menu-item.is-hover .menu-name {
+  color: #3a84ff;
+}
+.bk-search-select-menu .menu-content .menu-item.is-disabled {
+  color: #c4c6cc;
+}
+.bk-search-select-menu .menu-content .menu-item.is-disabled:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.bk-search-select-menu .menu-content .menu-item.is-disabled .menu-name {
+  color: #c4c6cc;
+}
+.bk-search-select-menu .menu-content .menu-item .menu-name {
+  display: flex;
+  max-width: 100px;
+  margin-right: 5px;
+  font-weight: bold;
+  color: #63656e;
+  align-items: center;
+}
+.bk-search-select-menu .menu-footer {
+  display: flex;
+  width: 100%;
+  height: 32px;
+  border-top: 1px solid #c4c6cc;
+  align-items: center;
+}
+.bk-search-select-menu .menu-footer-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.bk-search-select-menu .menu-footer-btn:first-child {
+  border-right: 1px solid #c4c6cc;
+}
+.bk-search-select-menu .menu-footer-btn:hover {
+  color: #3a84ff;
+  cursor: pointer;
+}
+.bk-search-select-menu .menu-footer-btn.is-disabled {
+  color: #c4c6cc;
+}
+.bk-search-select-menu .menu-footer-btn.is-disabled:hover {
+  cursor: not-allowed;
+  background-color: white;
+}
+.bk-search-select-popover {
   margin: -7px -14px;
 }