init

2022-12-09 16:41:41 +08:00
parent c1cce5a7c2
commit ff7aa8774f
2003 changed files with 156639 additions and 140 deletions
--- a/.svn/pristine/a7/a7041df10b10ee4768fb2e062a4f6737ef7f8dcc.svn-base
+++ b/.svn/pristine/a7/a7041df10b10ee4768fb2e062a4f6737ef7f8dcc.svn-base
@@ -0,0 +1,144 @@
+@import "../tag/index.less";
+@import "../popper/index.less";
+@import "../tooltip/index.less";
+
+@tag-input-lg: 44px;
+@tag-input-md: 38px;
+@tag-input-sm: 32px;
+@tag-input-xs: 26px;
+@tag-input-boeder: 1px;
+@tag-input-inner-padding-lg: 2px;
+@tag-input-inner-padding-md: 2px;
+@tag-input-inner-padding-sm: 1px;
+@tag-input-inner-padding-xs: 1px;
+@tag-margin-top-lg: 2px;
+@tag-margin-top-md: 2px;
+@tag-margin-top-sm: 1px;
+@tag-margin-top-xs: 1px;
+@tag-margin-bottom-lg: 2px;
+@tag-margin-bottom-md: 2px;
+@tag-margin-bottom-sm: 1px;
+@tag-margin-bottom-xs: 1px;
+
+.layui-tag-input {
+  display: inline-flex;
+  box-sizing: border-box;
+  width: 100%;
+  border-width: @tag-input-boeder;
+  border-style: solid;
+  border-color: var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  cursor: text;
+
+  &-inner {
+    flex: 1;
+    overflow: hidden;
+    line-height: 0;
+    padding: @tag-input-inner-padding-md 0;
+  }
+
+  &-mirror {
+    position: absolute;
+    top: 0;
+    left: 0;
+    white-space: pre;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &-clear {
+    flex: none;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    color: rgba(0, 0, 0, 0.45);
+    cursor: pointer;
+    visibility: hidden;
+  }
+
+  &-clear:hover {
+    opacity: 0.8;
+  }
+
+  & &-inner-input {
+    box-sizing: border-box;
+    border: none;
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  
+  &-disabled * {
+    cursor: not-allowed;
+  }
+
+  .layui-tag {
+    margin-right: 5px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    white-space: pre-wrap;
+  }
+
+  &-collapsed-panel {
+    white-space: normal;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    width: fit-content;
+    height: auto;
+    overflow: hidden;
+
+    .layui-tag {
+      margin-right: 5px;
+      margin-bottom: 4px;
+    }
+  }
+
+  .set-size(@size) {
+    @height: ~'tag-input-@{size}';
+    @tag-margin-top: ~'tag-margin-top-@{size}';
+    @tag-margin-bottom: ~'tag-margin-bottom-@{size}';
+    @inner-padding: ~'tag-input-inner-padding-@{size}';
+
+    &.layui-tag-input-@{size} {
+      min-height: @@height;
+
+      .layui-tag-input-inner-input {
+        height: @@height - (@@inner-padding + @tag-input-boeder)* 2;
+        vertical-align: middle;
+      }
+
+      .layui-tag-input-inner {
+        padding: @@inner-padding 5px;
+      }
+
+      .layui-tag {
+        margin-top: @@tag-margin-top;
+        margin-bottom: @@tag-margin-bottom;
+      }
+
+    }
+  }
+
+  .set-size(lg);
+  .set-size(md);
+  .set-size(sm);
+  .set-size(xs);
+}
+
+.layui-tag-input-suffix {
+  display: flex;
+  flex: none;
+  align-items: center;
+  padding: 0 10px;
+}
+
+.layui-tag-input:not(.layui-tag-input-disabled):hover,
+.layui-tag-input:not(.layui-tag-input-disabled):focus-within {
+  border-color: #d2d2d2!important;
+  .layui-tag-input-clear{
+    visibility: visible;
+  }
+}