1 | .adm-virtual-input {
|
2 | --font-size: var(--adm-font-size-9);
|
3 | --color: var(--adm-color-text);
|
4 | --placeholder-color: var(--adm-color-light);
|
5 | --disabled-color: var(--adm-color-weak);
|
6 | --text-align: left;
|
7 | --caret-width: var(--adm-virtual-input-caret-width, 2px);
|
8 | --caret-color: var(--adm-virtual-input-caret-color, var(--adm-color-primary));
|
9 | display: flex;
|
10 | justify-content: flex-start;
|
11 | align-items: center;
|
12 | position: relative;
|
13 | text-align: var(--text-align);
|
14 | font-size: var(--font-size);
|
15 | line-height: 1.5;
|
16 | white-space: nowrap;
|
17 | color: var(--color);
|
18 | }
|
19 | .adm-virtual-input > * {
|
20 | vertical-align: top;
|
21 | }
|
22 | .adm-virtual-input-content {
|
23 | flex: auto;
|
24 | display: inline-block;
|
25 | position: relative;
|
26 | z-index: 1;
|
27 | width: 100%;
|
28 | max-width: 100%;
|
29 | overflow-y: hidden;
|
30 | overflow-x: scroll;
|
31 | scrollbar-width: none;
|
32 | }
|
33 | .adm-virtual-input-content::-webkit-scrollbar {
|
34 | display: none;
|
35 | }
|
36 | .adm-virtual-input-placeholder {
|
37 | display: block;
|
38 | position: absolute;
|
39 | z-index: 0;
|
40 | left: 0;
|
41 | top: 0;
|
42 | width: 100%;
|
43 | overflow: hidden;
|
44 | text-align: var(--text-align);
|
45 | color: var(--placeholder-color);
|
46 | }
|
47 | .adm-virtual-input-caret-container {
|
48 | display: inline-block;
|
49 | width: var(--caret-width);
|
50 | height: 1.3em;
|
51 | vertical-align: top;
|
52 | margin-right: 1px;
|
53 | }
|
54 | .adm-virtual-input-caret {
|
55 | width: 100%;
|
56 | height: 100%;
|
57 | background-color: var(--caret-color);
|
58 | position: relative;
|
59 | top: 5%;
|
60 | }
|
61 | .adm-virtual-input:focus {
|
62 | outline: none;
|
63 | }
|
64 | .adm-virtual-input:focus .adm-virtual-input-caret {
|
65 | display: block;
|
66 | animation-name: adm-caret-blink;
|
67 | animation-duration: 1s;
|
68 | animation-timing-function: linear;
|
69 | animation-iteration-count: infinite;
|
70 | }
|
71 | .adm-virtual-input-disabled {
|
72 | color: var(--disabled-color);
|
73 | }
|
74 | @keyframes adm-caret-blink {
|
75 | from {
|
76 | opacity: 1;
|
77 | }
|
78 | 60% {
|
79 | opacity: 1;
|
80 | }
|
81 | 80% {
|
82 | opacity: 0;
|
83 | }
|
84 | to {
|
85 | opacity: 0;
|
86 | }
|
87 | }
|
88 | .adm-virtual-input-clear {
|
89 | flex: none;
|
90 | margin-left: 8px;
|
91 | color: var(--placeholder-color);
|
92 | padding: 3px;
|
93 | cursor: pointer;
|
94 | }
|
95 | .adm-virtual-input-clear .antd-mobile-icon {
|
96 | display: block;
|
97 | font-size: var(--adm-font-size-6);
|
98 | }
|