UNPKG

8.88 kBCSSView Raw
1/* FormGroup */
2/* Navlayout */
3/* FormGroup */
4/* Navlayout */
5.u-form-control {
6 position: relative;
7 display: inline-block;
8 padding: 0 12px;
9 width: 100%;
10 height: 32px;
11 cursor: text;
12 font-size: 14px;
13 line-height: 1.5;
14 color: #424242;
15 background-color: #fff;
16 background-image: none;
17 border: 1px solid rgb(165, 173, 186);
18 border-radius: 3px;
19 transition: all .3s; }
20 .u-form-control:focus {
21 border-color: #66afe9;
22 outline: 0; }
23 .u-form-control::-ms-clear, .u-form-control ::-ms-reveal {
24 display: none; }
25
26.u-form-control[disabled] {
27 background: #F7F9FB;
28 border-color: #DFE1E6;
29 color: #909090;
30 cursor: not-allowed; }
31
32.u-form-control.lg {
33 height: 40px;
34 font-size: 14px; }
35
36.u-form-control.sm {
37 font-size: 12px;
38 height: 26px; }
39
40.u-form-control-search-wrapper {
41 position: absolute;
42 top: 0;
43 left: 0;
44 height: 28px;
45 padding: 4px;
46 width: 100%; }
47 .u-form-control-search-wrapper .u-form-control-search-action {
48 color: #ccc;
49 position: absolute;
50 top: 2px;
51 right: 2px;
52 width: 32px;
53 height: 32px;
54 line-height: 32px;
55 text-align: center;
56 font-size: 14px;
57 text-decoration: none; }
58 .u-form-control-search-wrapper .u-form-control-search-action .uf {
59 transition: all .3s;
60 font-size: 12px;
61 color: #ccc; }
62 .u-form-control-search-wrapper .u-form-control-search-action .uf.uf-search:before {
63 content: "\e603"; }
64
65.u-form-control-affix-wrapper {
66 position: relative;
67 display: inline-block;
68 width: 100%; }
69 .u-form-control-affix-wrapper .u-form-control-prefix, .u-form-control-affix-wrapper .u-form-control-suffix {
70 position: absolute;
71 top: 50%;
72 transform: translateY(-50%);
73 z-index: 2;
74 line-height: 0;
75 right: 7px;
76 color: rgba(0, 0, 0, 0.65); }
77
78/* FormGroup */
79/* Navlayout */
80/* FormGroup */
81/* Navlayout */
82.u-input-group-addon {
83 padding: 6px 12px;
84 font-size: 14px;
85 font-weight: 400;
86 line-height: 1;
87 color: #505F79;
88 text-align: center;
89 border-radius: 3px;
90 width: 1%;
91 white-space: nowrap;
92 vertical-align: middle;
93 display: table-cell; }
94 .u-input-group-addon:last-child {
95 border-left: 0;
96 border-top-left-radius: 0;
97 border-bottom-left-radius: 0; }
98 .u-input-group-addon:first-child {
99 border-right: 0;
100 border-bottom-right-radius: 0;
101 border-top-right-radius: 0; }
102
103/* FormGroup */
104/* Navlayout */
105.u-input-group-btn {
106 font-size: 0;
107 white-space: nowrap;
108 position: relative;
109 width: 1%;
110 vertical-align: middle;
111 display: table-cell; }
112 .u-input-group-btn .u-button {
113 position: relative; }
114
115.u-input-group-btn:first-child > button, .u-input-group-btn:first-child > .btn-group > button, .u-input-group-btn:first-child > .dropdown-toggle, .u-input-group-btn:last-child > .btn-group:not(:last-child) > button, .u-input-group-btn:last-child > button:not(:last-child):not(.dropdown-toggle) {
116 border-bottom-right-radius: 0;
117 border-top-right-radius: 0; }
118
119.u-input-group-btn:first-child > .btn-group:not(:first-child) > button, .u-input-group-btn:first-child > button:not(:first-child), .u-input-group-btn:last-child > button, .u-input-group-btn:last-child > .btn-group > button, .u-input-group-btn:last-child > .dropdown-toggle {
120 border-bottom-left-radius: 0;
121 border-top-left-radius: 0; }
122
123.u-input-group-btn:last-child > button, .u-input-group-btn:last-child > .btn-group {
124 margin-left: -1px; }
125
126.u-input-group-btn:first-child > button, .u-input-group-btn:first-child > .btn-group {
127 margin-right: -1px; }
128
129.u-input-group {
130 position: relative;
131 display: table;
132 border-collapse: separate; }
133 .u-input-group .u-input-group-btn .u-button {
134 border: 1px solid #ccc;
135 height: 32px;
136 line-height: 1.3; }
137 .u-input-group .u-form-control {
138 position: relative;
139 float: left;
140 width: 100%;
141 margin-bottom: 0;
142 display: table-cell; }
143 .u-input-group .u-form-control:first-child {
144 border-bottom-right-radius: 0;
145 border-top-right-radius: 0; }
146 .u-input-group .u-form-control:last-child {
147 border-bottom-left-radius: 0;
148 border-top-left-radius: 0; }
149 .u-input-group .u-form-control:not(:first-child):not(:last-child) {
150 border-radius: 0; }
151 .u-input-group.simple .u-form-control {
152 border-radius: 3px; }
153 .u-input-group.simple .u-input-group-btn {
154 position: absolute;
155 top: 4px;
156 bottom: 0;
157 right: 6px;
158 min-width: 20px; }
159 .u-input-group.simple .u-form-control:not(:last-child) {
160 padding-right: 23px; }
161
162.u-cascader {
163 font-size: 12px; }
164 .u-cascader-menus {
165 font-size: 12px;
166 overflow: hidden;
167 background: #fff;
168 position: absolute;
169 border: 1px solid #d9d9d9;
170 border-radius: 3px;
171 box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
172 white-space: nowrap;
173 z-index: 10; }
174 .u-cascader-menus-hidden {
175 display: none; }
176 .u-cascader-menus.slide-up-enter, .u-cascader-menus.slide-up-appear {
177 opacity: 0;
178 animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
179 animation-play-state: paused; }
180 .u-cascader-menus.slide-up-leave {
181 opacity: 1;
182 animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
183 animation-play-state: paused; }
184 .u-cascader-menus.slide-up-enter.slide-up-enter-active-placement-bottomLeft {
185 animation-name: SlideUpIn;
186 animation-play-state: running; }
187 .u-cascader-menus.slide-up-appear.slide-up-appear-active-placement-bottomLeft {
188 animation-name: SlideUpIn;
189 animation-play-state: running; }
190 .u-cascader-menus.slide-up-enter.slide-up-enter-active-placement-topLeft {
191 animation-name: SlideDownIn;
192 animation-play-state: running; }
193 .u-cascader-menus.slide-up-appear.slide-up-appear-active-placement-topLeft {
194 animation-name: SlideDownIn;
195 animation-play-state: running; }
196 .u-cascader-menus.slide-up-leave.slide-up-leave-active-placement-bottomLeft {
197 animation-name: SlideUpOut;
198 animation-play-state: running; }
199 .u-cascader-menus.slide-up-leave.slide-up-leave-active-placement-topLeft {
200 animation-name: SlideDownOut;
201 animation-play-state: running; }
202 .u-cascader-menu {
203 display: inline-block;
204 width: 100px;
205 height: 192px;
206 list-style: none;
207 margin: 0;
208 padding: 0;
209 border-right: 1px solid #e9e9e9;
210 overflow: auto; }
211 .u-cascader-menu:last-child {
212 border-right: 0; }
213 .u-cascader-menu-item {
214 height: 32px;
215 line-height: 32px;
216 padding: 0 8px 0 20px;
217 cursor: pointer;
218 white-space: nowrap;
219 overflow: hidden;
220 text-overflow: ellipsis;
221 transition: all 0.3s ease;
222 position: relative; }
223 .u-cascader-menu-item:hover {
224 background-color: rgb(235, 236, 240);
225 color: rgb(245, 60, 50); }
226 .u-cascader-menu-item-disabled {
227 cursor: not-allowed;
228 color: #ccc; }
229 .u-cascader-menu-item-disabled:hover {
230 background: transparent; }
231 .u-cascader-menu-item-loading:after {
232 position: absolute;
233 right: 12px;
234 content: 'loading';
235 color: #aaa;
236 font-style: italic; }
237 .u-cascader-menu-item-active {
238 background-color: #f7f7f7; }
239 .u-cascader-menu-item-expand {
240 position: relative; }
241 .u-cascader-menu-item-expand-icon {
242 position: absolute;
243 right: 8px;
244 line-height: 32px; }
245 .u-cascader-menu-item-expand-icon .uf {
246 font-size: 14px;
247 color: #999; }
248 .u-cascader-input-group .u-form-control {
249 font-size: 12px;
250 color: #212121; }
251 .u-cascader-input-group .u-form-control:hover {
252 border-color: #66afe9; }
253 .u-cascader-input-group .u-input-group-btn .uf {
254 color: #505F79;
255 font-size: 14px; }
256 .u-cascader-input-group .u-input-group-btn .uf.uf-close-c {
257 cursor: pointer;
258 color: #C0C4CC; }
259
260.u-input-group.simple .u-form-control.sm + .u-input-group-btn {
261 top: 2px; }
262
263.u-input-group.simple .u-form-control.lg + .u-input-group-btn {
264 top: 10px; }
265
266@keyframes SlideUpIn {
267 0% {
268 opacity: 0;
269 transform-origin: 0% 0%;
270 transform: scaleY(0.8); }
271 100% {
272 opacity: 1;
273 transform-origin: 0% 0%;
274 transform: scaleY(1); } }
275
276@keyframes SlideUpOut {
277 0% {
278 opacity: 1;
279 transform-origin: 0% 0%;
280 transform: scaleY(1); }
281 100% {
282 opacity: 0;
283 transform-origin: 0% 0%;
284 transform: scaleY(0.8); } }
285
286@keyframes SlideDownIn {
287 0% {
288 opacity: 0;
289 transform-origin: 0% 100%;
290 transform: scaleY(0.8); }
291 100% {
292 opacity: 1;
293 transform-origin: 0% 100%;
294 transform: scaleY(1); } }
295
296@keyframes SlideDownOut {
297 0% {
298 opacity: 1;
299 transform-origin: 0% 100%;
300 transform: scaleY(1); }
301 100% {
302 opacity: 0;
303 transform-origin: 0% 100%;
304 transform: scaleY(0.8); } }
305
306.demo7 span {
307 margin-bottom: 16px; }
308
309.demo7 .u-form-control.lg {
310 width: 183px; }
311
312/*# sourceMappingURL=demo.css.map */