1 | @import '../../style/themes/index';
|
2 | @import '../../style/mixins/index';
|
3 | @import '../../input/style/mixin';
|
4 |
|
5 | @mention-prefix-cls: ~'@{ant-prefix}-mentions';
|
6 |
|
7 | .@{mention-prefix-cls} {
|
8 | .reset-component();
|
9 | .input();
|
10 |
|
11 | position: relative;
|
12 | display: inline-block;
|
13 | height: auto;
|
14 | padding: 0;
|
15 | overflow: hidden;
|
16 | line-height: @line-height-base;
|
17 | white-space: pre-wrap;
|
18 | vertical-align: bottom;
|
19 |
|
20 |
|
21 | &-disabled {
|
22 | > textarea {
|
23 | .disabled();
|
24 | }
|
25 | }
|
26 |
|
27 | &-focused {
|
28 | .active();
|
29 | }
|
30 |
|
31 |
|
32 | > textarea,
|
33 | &-measure {
|
34 | min-height: @input-height-base - 2px;
|
35 | margin: 0;
|
36 | padding: @input-padding-vertical-base @input-padding-horizontal-base;
|
37 | overflow: inherit;
|
38 | overflow-x: hidden;
|
39 | overflow-y: auto;
|
40 | font-weight: inherit;
|
41 | font-size: inherit;
|
42 | font-family: inherit;
|
43 | font-style: inherit;
|
44 | font-variant: inherit;
|
45 | font-size-adjust: inherit;
|
46 | font-stretch: inherit;
|
47 | line-height: inherit;
|
48 | direction: inherit;
|
49 | letter-spacing: inherit;
|
50 | white-space: inherit;
|
51 | text-align: inherit;
|
52 | vertical-align: top;
|
53 | word-wrap: break-word;
|
54 | word-break: inherit;
|
55 | tab-size: inherit;
|
56 | }
|
57 |
|
58 | > textarea {
|
59 | width: 100%;
|
60 | border: none;
|
61 | outline: none;
|
62 | resize: none;
|
63 | & when (@theme = dark) {
|
64 | background-color: transparent;
|
65 | }
|
66 | .placeholder();
|
67 | }
|
68 |
|
69 | &-measure {
|
70 | position: absolute;
|
71 | top: 0;
|
72 | right: 0;
|
73 | bottom: 0;
|
74 | left: 0;
|
75 | z-index: -1;
|
76 | color: transparent;
|
77 | pointer-events: none;
|
78 |
|
79 | > span {
|
80 | display: inline-block;
|
81 | min-height: 1em;
|
82 | }
|
83 | }
|
84 |
|
85 |
|
86 | &-dropdown {
|
87 |
|
88 | .reset-component();
|
89 |
|
90 | position: absolute;
|
91 | top: -9999px;
|
92 | left: -9999px;
|
93 | z-index: @zindex-dropdown;
|
94 | box-sizing: border-box;
|
95 | font-size: @font-size-base;
|
96 | font-variant: initial;
|
97 | background-color: @mentions-dropdown-bg;
|
98 | border-radius: @border-radius-base;
|
99 | outline: none;
|
100 | box-shadow: @box-shadow-base;
|
101 |
|
102 | &-hidden {
|
103 | display: none;
|
104 | }
|
105 |
|
106 | &-menu {
|
107 | max-height: 250px;
|
108 | margin-bottom: 0;
|
109 | padding-left: 0;
|
110 | overflow: auto;
|
111 | list-style: none;
|
112 | outline: none;
|
113 |
|
114 | &-item {
|
115 | position: relative;
|
116 | display: block;
|
117 | min-width: 100px;
|
118 | padding: 5px @control-padding-horizontal;
|
119 | overflow: hidden;
|
120 | color: @text-color;
|
121 | font-weight: normal;
|
122 | line-height: @line-height-base;
|
123 | white-space: nowrap;
|
124 | text-overflow: ellipsis;
|
125 | cursor: pointer;
|
126 | transition: background 0.3s ease;
|
127 |
|
128 | &:hover {
|
129 | background-color: @item-hover-bg;
|
130 | }
|
131 |
|
132 | &:first-child {
|
133 | border-radius: @border-radius-base @border-radius-base 0 0;
|
134 | }
|
135 |
|
136 | &:last-child {
|
137 | border-radius: 0 0 @border-radius-base @border-radius-base;
|
138 | }
|
139 |
|
140 | &-disabled {
|
141 | color: @disabled-color;
|
142 | cursor: not-allowed;
|
143 |
|
144 | &:hover {
|
145 | color: @disabled-color;
|
146 | background-color: @mentions-dropdown-menu-item-hover-bg;
|
147 | cursor: not-allowed;
|
148 | }
|
149 | }
|
150 |
|
151 | &-selected {
|
152 | color: @text-color;
|
153 | font-weight: @select-item-selected-font-weight;
|
154 | background-color: @background-color-light;
|
155 | }
|
156 |
|
157 | &-active {
|
158 | background-color: @item-hover-bg;
|
159 | }
|
160 | }
|
161 | }
|
162 | }
|
163 | }
|
164 |
|
165 | @import './rtl';
|