bkui-vue 0.0.1-beta.99 → 0.0.1

package/lib/search-select/search-select.less

@@ -0,0 +1,384 @@
+/* stylelint-disable declaration-no-important */
+@import '../styles/themes/themes.less';
+@import '../styles/mixins/mixins.less';
+
+
+@search-select-name: ~'@{bk-prefix}-search-select';
+
+
+.@{search-select-name} {
+  position: relative;
+  z-index: 9;
+  height: @component-size-base;
+  overflow: inherit;
+  
+  .focus {
+    color: @search-select-focus-color;
+    background: #fff !important;
+    border-color: @search-select-focus-border-color !important;
+  }
+
+  .div-input {
+    height: 100%;
+    padding: 5px 0;
+    line-height: 20px;
+    word-break: break-all;
+    flex: 1 1 auto;
+  
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &-container {
+    // position: relative;
+    display: flex;
+    min-height: 30px;
+    overflow: hidden;
+    font-size: 12px;
+    color: @search-select-font-color;
+    border: @border-width-base @border-style-base @border-style-color;
+    border-radius: @border-radius-base;
+    outline: none;
+    box-sizing: border-box;
+    transition: border .2s linear;
+    resize: none;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+
+    &.is-focus {
+      overflow: auto;
+      .focus();
+
+      // .search-container-selected {
+      //   margin-bottom: 2p;
+      // }
+    }
+
+    .search-prefix {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      height: 100%;
+    }
+
+    .search-container {
+      position: relative;
+      display: flex;
+      max-width: calc(100% - 42px);
+      min-height: 26px;
+      padding: 0 2px;
+      margin-top: 4px;
+      overflow: visible;
+      text-align: left;
+      transition: max-height .3s cubic-bezier(.4, 0, .2, 1);
+      flex: 1;
+      flex-wrap: wrap;
+      align-items: center;
+
+      &-selected {
+        position: relative;
+        display: inline-block;
+        max-width: 99%;
+        padding-left: 8px;
+        margin: 0 0 4px 6px;
+        line-height: 22px;
+        color: @search-select-font-color;
+        background: #f0f1f5;
+        border-radius: 2px;
+        flex: 0 0 auto;
+        align-self: center;
+
+        &.hidden-selected {
+          visibility: hidden
+        }
+
+        &.overflow-selected {
+          padding-right: 8px;
+        }
+
+        &:hover {
+          background: #dcdee5;
+
+          .selected-clear {
+            color: @search-select-font-color;
+          }
+        }
+
+        .selected-name {
+          display: inline-block;
+          margin-right: 20px;
+          word-break: break-all;
+        }
+
+        .selected-clear {
+          position: absolute;
+          top: 4px;
+          right: 3px;
+          display: inline-flex;
+          width: 14px;
+          height: 14px;
+          overflow: hidden;
+          font-size: 14px;
+          line-height: normal;
+          color: #979ba5;
+          text-align: center;
+          cursor: pointer;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+
+      &-input {
+        position: relative;
+        display: flex;
+        height: 100%;
+        min-width: 40px;
+        padding: 0 10px;
+        margin-top: -4px;
+        color: @search-select-font-color;
+        border: none;
+        flex: 1 1 auto;
+        align-items: center;
+
+        .input-before {
+          &:before {
+            color: @search-select-placeholder-color;
+            content: attr(data-placeholder);
+          }
+        }
+
+        .input-after {
+          &:after {
+            padding-left: 2px;
+            color: @search-select-placeholder-color;
+            content: attr(data-tips);
+          }
+        }
+      }
+
+      .selected-input {
+        position: relative;
+        display: flex;
+        height: 100%;
+        min-width: 40px;
+        padding: 0 10px;
+        margin-top: -4px;
+        color: @search-select-font-color;
+        border: none;
+        align-items: center;
+      }
+    }
+
+    .search-nextfix {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      color: @light-gray;
+      align-items: center;
+      .search-prefix();
+
+      .search-clear {
+        display: flex;
+        width: 12px;
+        height: 12px;
+        margin-right: 6px;
+        font-size: 12px;
+        color: @light-gray;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+          color: #979ba5;
+          cursor: pointer;
+        }
+      }
+
+      .search-nextfix-icon {
+        display: flex;
+        margin-right: 8px;
+        font-size: 16px;
+        transition: color .2s linear;
+        align-items: center;
+        justify-content: center;
+
+        &.is-focus {
+          .focus();
+        }
+      }
+    }
+
+    &::-webkit-scrollbar {
+      width: 3px;
+      height: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #e6e9ea;
+      border-radius: 20px;
+      box-shadow: inset 0 0 6px rgba(204, 204, 204, .3);
+    }
+  }
+
+  &-tips {
+    display: flex;
+    margin-top: 5px;
+    font-size: 12px;
+    line-height: 16px;
+    color: @search-select-message-color;
+    align-items: center;
+
+    .select-tips {
+      display: flex;
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+      overflow: hidden;
+      font-size: 16px;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.@{search-select-name}-menu {
+  display: flex;
+  min-width: 160px;
+  font-size: 12px;
+  color: @search-select-font-color;
+  flex-direction: column;
+
+  .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;
+  
+    &:hover {
+      cursor: pointer;
+      background-color: #f5f7fa;
+    }
+  }
+  
+  .menu-disabled-mixin {
+    color: @light-gray;
+  
+    &:hover {
+      cursor: not-allowed;
+      background-color: white;
+    }
+  }
+
+  .menu-header {
+    .menu-list-mixin();
+    border-bottom: @border-width-base @border-style-base @border-style-color;
+
+    &-item {
+      .menu-item-mixin();
+
+      &.is-disabled {
+        .menu-disabled-mixin()
+      }
+    }
+  }
+
+  .menu-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    max-height: 240px;
+    overflow: auto;
+
+    .menu-item {
+      .menu-item-mixin();
+      white-space: pre;
+
+      .is-keyword {
+        display: inline-flex;
+        color: @primary-color;
+      }
+  
+      .is-selected {
+        display: flex;
+        width: 22px;
+        height: 22px;
+        margin-left: auto;
+        overflow: hidden;
+        font-size: 22px;
+        font-weight: bold;
+        color: @primary-color;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &.is-hover {
+        color: @primary-color;
+        background-color: #f5f7fa;
+
+        .menu-name {
+          color: @primary-color;
+        }
+      }
+
+      &.is-disabled {
+        .menu-disabled-mixin();
+
+        .menu-name {
+          color: @light-gray;;
+        }
+      }
+
+      .menu-name {
+        display: flex;
+        max-width: 100px;
+        margin-right: 5px;
+        font-weight: bold;
+        color: @search-select-font-color;
+        align-items: center;
+      }
+    }
+  }
+
+  .menu-footer {
+    display: flex;
+    width: 100%;
+    height: 32px;
+    border-top: @border-width-base @border-style-base @search-select-menu-border-color;
+    align-items: center;
+
+    &-btn {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+
+      &:first-child {
+        border-right: @border-width-base @border-style-base @search-select-menu-border-color;
+      }
+
+      &:hover {
+        color: @primary-color;
+        cursor: pointer;
+      }
+
+      &.is-disabled {
+        .menu-disabled-mixin()
+      }
+    }
+  }
+}
+
+.@{search-select-name}-popover {
+  margin: -7px -14px;
+}