style.css 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856
  1. /*font*/
  2. /*size*/
  3. /*icon*/
  4. /*color*/
  5. /*input/radio/checkbox*/
  6. /*popup*/
  7. /*table*/
  8. /*filter*/
  9. /*menu*/
  10. /*loading*/
  11. /*validate*/
  12. /*grid*/
  13. /*toolbar*/
  14. /*tooltip*/
  15. /*pager*/
  16. /*modal*/
  17. /*checkbox*/
  18. /*radio*/
  19. /*button*/
  20. /*input*/
  21. /*textarea*/
  22. /*form*/
  23. /*select*/
  24. /*switch*/
  25. /*pulldown*/
  26. .vxe-input--inner {
  27. width: 100%;
  28. height: 100%;
  29. border-radius: 4px;
  30. outline: 0;
  31. margin: 0;
  32. font-size: inherit;
  33. font-family: inherit;
  34. line-height: inherit;
  35. padding: 0 0.6em;
  36. color: #606266;
  37. border: 1px solid #dcdfe6;
  38. background-color: #fff;
  39. -webkit-box-shadow: none;
  40. box-shadow: none; }
  41. .vxe-input--inner::-webkit-input-placeholder {
  42. color: #C0C4CC; }
  43. .vxe-input--inner::-moz-placeholder {
  44. color: #C0C4CC; }
  45. .vxe-input--inner:-ms-input-placeholder {
  46. color: #C0C4CC; }
  47. .vxe-input--inner::-ms-input-placeholder {
  48. color: #C0C4CC; }
  49. .vxe-input--inner::placeholder {
  50. color: #C0C4CC; }
  51. .vxe-input--inner[type="number"] {
  52. -webkit-appearance: none;
  53. appearance: none;
  54. -moz-appearance: textfield; }
  55. .vxe-input--inner[type="search"], .vxe-input--inner[type="search"]::-webkit-search-cancel-button, .vxe-input--inner[type="number"]::-webkit-outer-spin-button, .vxe-input--inner[type="number"]::-webkit-inner-spin-button {
  56. -webkit-appearance: none;
  57. appearance: none; }
  58. .vxe-input--inner[disabled] {
  59. cursor: not-allowed;
  60. color: #BFBFBF;
  61. background-color: #f3f3f3; }
  62. .vxe-input {
  63. display: inline-block;
  64. position: relative;
  65. width: 180px; }
  66. .vxe-input.is--disabled .vxe-input--date-picker-suffix,
  67. .vxe-input.is--disabled .vxe-input--search-suffix,
  68. .vxe-input.is--disabled .vxe-input--suffix,
  69. .vxe-input.is--disabled .vxe-input--password-suffix,
  70. .vxe-input.is--disabled .vxe-input--number-suffix {
  71. cursor: no-drop; }
  72. .vxe-input:not(.is--disabled) .vxe-input--date-picker-suffix,
  73. .vxe-input:not(.is--disabled) .vxe-input--search-suffix,
  74. .vxe-input:not(.is--disabled) .vxe-input--clear-icon,
  75. .vxe-input:not(.is--disabled) .vxe-input--password-suffix,
  76. .vxe-input:not(.is--disabled) .vxe-input--number-suffix {
  77. cursor: pointer; }
  78. .vxe-input:not(.is--disabled).is--active .vxe-input--inner {
  79. border: 1px solid #409eff; }
  80. .vxe-input--prefix,
  81. .vxe-input--suffix,
  82. .vxe-input--extra-suffix {
  83. display: -webkit-box;
  84. display: -ms-flexbox;
  85. display: flex;
  86. position: absolute;
  87. top: 0;
  88. width: 1.6em;
  89. height: 100%;
  90. -webkit-user-select: none;
  91. -moz-user-select: none;
  92. -ms-user-select: none;
  93. user-select: none;
  94. -webkit-box-align: center;
  95. -ms-flex-align: center;
  96. align-items: center;
  97. -webkit-box-pack: center;
  98. -ms-flex-pack: center;
  99. justify-content: center;
  100. color: #c0c4cc; }
  101. .vxe-input .vxe-input--prefix {
  102. left: 0.2em; }
  103. .vxe-input.is--prefix .vxe-input--inner {
  104. padding-left: 1.8em; }
  105. .vxe-input .vxe-input--clear-icon {
  106. display: none; }
  107. .vxe-input .vxe-input--suffix,
  108. .vxe-input .vxe-input--extra-suffix {
  109. right: 0.2em; }
  110. .vxe-input.is--suffix .vxe-input--inner {
  111. padding-right: 1.8em; }
  112. .vxe-input.is--left .vxe-input--inner {
  113. text-align: left; }
  114. .vxe-input.is--center .vxe-input--inner {
  115. text-align: center; }
  116. .vxe-input.is--right .vxe-input--inner {
  117. text-align: right; }
  118. .vxe-input.is--controls.type--search .vxe-input--inner, .vxe-input.is--controls.type--password .vxe-input--inner, .vxe-input.is--controls.type--number .vxe-input--inner, .vxe-input.is--controls.type--integer .vxe-input--inner, .vxe-input.is--controls.type--float .vxe-input--inner, .vxe-input.is--controls.type--date .vxe-input--inner, .vxe-input.is--controls.type--datetime .vxe-input--inner, .vxe-input.is--controls.type--week .vxe-input--inner, .vxe-input.is--controls.type--month .vxe-input--inner, .vxe-input.is--controls.type--year .vxe-input--inner {
  119. padding-right: 1.8em; }
  120. .vxe-input.is--controls.type--search .vxe-input--suffix, .vxe-input.is--controls.type--password .vxe-input--suffix, .vxe-input.is--controls.type--number .vxe-input--suffix, .vxe-input.is--controls.type--integer .vxe-input--suffix, .vxe-input.is--controls.type--float .vxe-input--suffix, .vxe-input.is--controls.type--date .vxe-input--suffix, .vxe-input.is--controls.type--datetime .vxe-input--suffix, .vxe-input.is--controls.type--week .vxe-input--suffix, .vxe-input.is--controls.type--month .vxe-input--suffix, .vxe-input.is--controls.type--year .vxe-input--suffix {
  121. right: 1.6em; }
  122. .vxe-input.is--suffix.is--controls.type--search .vxe-input--inner, .vxe-input.is--suffix.is--controls.type--password .vxe-input--inner, .vxe-input.is--suffix.is--controls.type--number .vxe-input--inner, .vxe-input.is--suffix.is--controls.type--integer .vxe-input--inner, .vxe-input.is--suffix.is--controls.type--float .vxe-input--inner, .vxe-input.is--suffix.is--controls.type--date .vxe-input--inner, .vxe-input.is--suffix.is--controls.type--datetime .vxe-input--inner, .vxe-input.is--suffix.is--controls.type--week .vxe-input--inner, .vxe-input.is--suffix.is--controls.type--month .vxe-input--inner, .vxe-input.is--suffix.is--controls.type--year .vxe-input--inner {
  123. padding-right: 3.2em; }
  124. .vxe-input.is--suffix:hover .vxe-input--suffix.is--clear .vxe-input--suffix-icon {
  125. display: none; }
  126. .vxe-input.is--suffix:hover .vxe-input--suffix.is--clear .vxe-input--clear-icon {
  127. display: inline; }
  128. .vxe-input:not(.is--disabled):not(.is--readonly) .vxe-input--suffix:hover .vxe-input--clear-icon {
  129. color: #606266; }
  130. .vxe-input:not(.is--disabled):not(.is--readonly) .vxe-input--extra-suffix:hover .vxe-input--password-suffix {
  131. color: #606266; }
  132. .vxe-input:not(.is--disabled):not(.is--readonly) .vxe-input--number-prev:hover,
  133. .vxe-input:not(.is--disabled):not(.is--readonly) .vxe-input--number-next:hover {
  134. color: #606266; }
  135. .vxe-input:not(.is--disabled):not(.is--readonly) .vxe-input--number-prev:active,
  136. .vxe-input:not(.is--disabled):not(.is--readonly) .vxe-input--number-next:active {
  137. color: #409eff; }
  138. .vxe-input--password-suffix,
  139. .vxe-input--number-suffix,
  140. .vxe-input--date-picker-suffix,
  141. .vxe-input--search-suffix {
  142. position: relative;
  143. width: 100%;
  144. height: 100%; }
  145. .vxe-input--date-picker-icon,
  146. .vxe-input--search-icon,
  147. .vxe-input--password-icon {
  148. position: absolute;
  149. left: 50%;
  150. top: 50%;
  151. -webkit-transform: translate(-50%, -50%);
  152. transform: translate(-50%, -50%); }
  153. .vxe-input--date-picker-suffix {
  154. display: -webkit-box;
  155. display: -ms-flexbox;
  156. display: flex;
  157. -webkit-box-align: center;
  158. -ms-flex-align: center;
  159. align-items: center;
  160. -webkit-box-pack: center;
  161. -ms-flex-pack: center;
  162. justify-content: center; }
  163. .vxe-input--date-picker-suffix .vxe-input--panel-icon {
  164. -webkit-transition: -webkit-transform 0.2s ease-in-out;
  165. transition: -webkit-transform 0.2s ease-in-out;
  166. transition: transform 0.2s ease-in-out;
  167. transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; }
  168. .vxe-input--number-prev,
  169. .vxe-input--number-next {
  170. position: relative;
  171. display: block;
  172. height: 50%;
  173. width: 100%;
  174. text-align: center; }
  175. .vxe-input--number-prev-icon,
  176. .vxe-input--number-next-icon {
  177. position: absolute;
  178. left: 50%;
  179. -webkit-transform: translateX(-50%);
  180. transform: translateX(-50%); }
  181. .vxe-input--number-prev-icon {
  182. bottom: 0; }
  183. .vxe-input--number-next-icon {
  184. top: 0; }
  185. .vxe-input--panel {
  186. display: none;
  187. position: absolute;
  188. left: 0;
  189. padding: 4px 0;
  190. color: #606266;
  191. font-size: 14px;
  192. text-align: left; }
  193. .vxe-input--panel:not(.is--transfer) {
  194. min-width: 100%; }
  195. .vxe-input--panel.is--transfer {
  196. position: fixed; }
  197. .vxe-input--panel.animat--leave {
  198. display: block;
  199. opacity: 0;
  200. -webkit-transform: scaleY(0.5);
  201. transform: scaleY(0.5);
  202. -webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  203. transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  204. transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  205. transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  206. -webkit-transform-origin: center top;
  207. transform-origin: center top;
  208. -webkit-backface-visibility: hidden;
  209. backface-visibility: hidden;
  210. -webkit-transform-style: preserve-3d;
  211. transform-style: preserve-3d; }
  212. .vxe-input--panel.animat--leave[placement="top"] {
  213. -webkit-transform-origin: center bottom;
  214. transform-origin: center bottom; }
  215. .vxe-input--panel.animat--enter {
  216. opacity: 1;
  217. -webkit-transform: scaleY(1);
  218. transform: scaleY(1); }
  219. .vxe-input--panel-wrapper,
  220. .vxe-input--panel-layout-wrapper {
  221. background-color: #fff;
  222. border: 1px solid #DADCE0;
  223. -webkit-box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  224. box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  225. border-radius: 4px; }
  226. .vxe-input--panel-wrapper {
  227. overflow-x: hidden;
  228. overflow-y: auto; }
  229. .vxe-input--panel-layout-wrapper {
  230. display: -webkit-box;
  231. display: -ms-flexbox;
  232. display: flex;
  233. -webkit-box-orient: horizontal;
  234. -webkit-box-direction: normal;
  235. -ms-flex-direction: row;
  236. flex-direction: row; }
  237. .vxe-input--panel.type--date, .vxe-input--panel.type--week, .vxe-input--panel.type--month, .vxe-input--panel.type--year {
  238. -webkit-user-select: none;
  239. -moz-user-select: none;
  240. -ms-user-select: none;
  241. user-select: none; }
  242. .vxe-input--panel.type--datetime .vxe-input--panel-right-wrapper {
  243. display: -webkit-box;
  244. display: -ms-flexbox;
  245. display: flex;
  246. -webkit-box-orient: vertical;
  247. -webkit-box-direction: normal;
  248. -ms-flex-direction: column;
  249. flex-direction: column;
  250. border-left: 1px solid #dcdfe6; }
  251. .vxe-input--panel.type--date .vxe-input--date-picker-body th, .vxe-input--panel.type--datetime .vxe-input--date-picker-body th {
  252. width: 14.28571%; }
  253. .vxe-input--panel.type--week .vxe-input--date-picker-body table th {
  254. width: 12%; }
  255. .vxe-input--panel.type--week .vxe-input--date-picker-body table th:first-child {
  256. width: 14%; }
  257. .vxe-input--panel.type--month .vxe-input--date-picker-body td, .vxe-input--panel.type--year .vxe-input--date-picker-body td {
  258. width: 25%; }
  259. .vxe-input--time-picker-title {
  260. display: inline-block;
  261. text-align: center;
  262. border: 1px solid #dcdfe6;
  263. border-radius: 4px; }
  264. .vxe-input--time-picker-confirm {
  265. position: absolute;
  266. right: 0;
  267. top: 0;
  268. outline: 0;
  269. border: 1px solid #dcdfe6;
  270. border-radius: 4px;
  271. cursor: pointer;
  272. color: #fff;
  273. border-color: #409eff;
  274. background-color: #409eff; }
  275. .vxe-input--time-picker-confirm:hover {
  276. background-color: #5faeff;
  277. border-color: #5faeff; }
  278. .vxe-input--time-picker-confirm:active {
  279. background-color: #3196ff;
  280. border-color: #3196ff; }
  281. .vxe-input--time-picker-header {
  282. display: -webkit-box;
  283. display: -ms-flexbox;
  284. display: flex;
  285. position: relative;
  286. -ms-flex-negative: 0;
  287. flex-shrink: 0; }
  288. .vxe-input--date-picker-header {
  289. display: -webkit-box;
  290. display: -ms-flexbox;
  291. display: flex;
  292. -webkit-box-orient: horizontal;
  293. -webkit-box-direction: normal;
  294. -ms-flex-direction: row;
  295. flex-direction: row;
  296. -webkit-user-select: none;
  297. -moz-user-select: none;
  298. -ms-user-select: none;
  299. user-select: none; }
  300. .vxe-input--date-picker-header .vxe-input--date-picker-type-wrapper {
  301. -webkit-box-flex: 1;
  302. -ms-flex-positive: 1;
  303. flex-grow: 1; }
  304. .vxe-input--date-picker-header .vxe-input--date-picker-btn-wrapper {
  305. -ms-flex-negative: 0;
  306. flex-shrink: 0;
  307. text-align: center; }
  308. .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label,
  309. .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn {
  310. display: inline-block; }
  311. .vxe-input--date-picker-btn-wrapper {
  312. display: -webkit-box;
  313. display: -ms-flexbox;
  314. display: flex;
  315. -webkit-box-orient: horizontal;
  316. -webkit-box-direction: normal;
  317. -ms-flex-direction: row;
  318. flex-direction: row; }
  319. .vxe-input--date-picker-label,
  320. .vxe-input--date-picker-btn {
  321. display: inline-block;
  322. display: -webkit-box;
  323. display: -ms-flexbox;
  324. display: flex;
  325. border-radius: 4px;
  326. border: 1px solid #dcdfe6;
  327. -webkit-box-align: center;
  328. -ms-flex-align: center;
  329. align-items: center;
  330. -webkit-box-pack: center;
  331. -ms-flex-pack: center;
  332. justify-content: center;
  333. background-color: #fff; }
  334. .vxe-input--date-picker-btn.is--disabled {
  335. color: #BFBFBF;
  336. cursor: no-drop; }
  337. .vxe-input--date-picker-btn:not(.is--disabled) {
  338. cursor: pointer; }
  339. .vxe-input--date-picker-btn:not(.is--disabled):hover {
  340. background-color: white; }
  341. .vxe-input--date-picker-btn:not(.is--disabled):active {
  342. background-color: #f7f7f7; }
  343. .vxe-input--date-picker-body {
  344. border-radius: 4px;
  345. border: 1px solid #DADCE0;
  346. -webkit-user-select: none;
  347. -moz-user-select: none;
  348. -ms-user-select: none;
  349. user-select: none; }
  350. .vxe-input--date-picker-body table {
  351. border: 0;
  352. width: 100%;
  353. border-spacing: 0;
  354. border-collapse: separate;
  355. text-align: center;
  356. table-layout: fixed; }
  357. .vxe-input--date-picker-body th,
  358. .vxe-input--date-picker-body td {
  359. font-weight: normal; }
  360. .vxe-input--date-picker-body th {
  361. -webkit-box-shadow: inset 0 -1px 0 0 #DADCE0;
  362. box-shadow: inset 0 -1px 0 0 #DADCE0; }
  363. .vxe-input--date-picker-body td.is--prev, .vxe-input--date-picker-body td.is--next {
  364. color: #BFBFBF; }
  365. .vxe-input--date-picker-body td.is--prev .vxe-input--date-label,
  366. .vxe-input--date-picker-body td.is--prev .vxe-input--date-festival, .vxe-input--date-picker-body td.is--next .vxe-input--date-label,
  367. .vxe-input--date-picker-body td.is--next .vxe-input--date-festival {
  368. color: #BFBFBF; }
  369. .vxe-input--date-picker-body td.is--now {
  370. -webkit-box-shadow: inset 0 0 0 1px #DADCE0;
  371. box-shadow: inset 0 0 0 1px #DADCE0; }
  372. .vxe-input--date-picker-body td.is--now:not(.is--selected).is--current {
  373. color: #409eff; }
  374. .vxe-input--date-picker-body td.is--now:not(.is--selected).is--current .vxe-input--date-label,
  375. .vxe-input--date-picker-body td.is--now:not(.is--selected).is--current .vxe-input--date-festival {
  376. color: #409eff; }
  377. .vxe-input--date-picker-body td.is--hover {
  378. background-color: #f2f6fc; }
  379. .vxe-input--date-picker-body td.is--selected {
  380. color: #fff;
  381. background-color: #409eff; }
  382. .vxe-input--date-picker-body td.is--selected .vxe-input--date-label,
  383. .vxe-input--date-picker-body td.is--selected .vxe-input--date-festival {
  384. color: #fff; }
  385. .vxe-input--date-picker-body td.is--selected .vxe-input--date-label.is-notice:before {
  386. background-color: #fff; }
  387. .vxe-input--date-picker-body td:not(.is--disabled) {
  388. cursor: pointer; }
  389. .vxe-input--date-picker-body td.is--disabled {
  390. cursor: no-drop;
  391. color: #dcdfe6;
  392. background-color: #f3f3f3; }
  393. .vxe-input--date-picker-body td.is--disabled .vxe-input--date-label,
  394. .vxe-input--date-picker-body td.is--disabled .vxe-input--date-festival {
  395. color: #dcdfe6; }
  396. .vxe-input--date-week-view th:first-child {
  397. -webkit-box-shadow: inset -1px -1px 0 0 #DADCE0;
  398. box-shadow: inset -1px -1px 0 0 #DADCE0; }
  399. .vxe-input--date-week-view td:first-child {
  400. -webkit-box-shadow: inset -1px 0 0 0 #DADCE0;
  401. box-shadow: inset -1px 0 0 0 #DADCE0; }
  402. .vxe-input--date-label,
  403. .vxe-input--date-festival {
  404. display: block;
  405. overflow: hidden; }
  406. .vxe-input--date-label {
  407. position: relative;
  408. padding-top: 8%; }
  409. .vxe-input--date-label.is-notice:before {
  410. content: "";
  411. position: absolute;
  412. width: 4px;
  413. height: 4px;
  414. left: 0.8em;
  415. top: 0.3em;
  416. -webkit-transform: translateX(-50%);
  417. transform: translateX(-50%);
  418. border-radius: 100%;
  419. background-color: #FF0000; }
  420. .vxe-input--date-label--extra {
  421. position: absolute;
  422. right: 0.1em;
  423. top: 0;
  424. font-size: 12px;
  425. line-height: 12px;
  426. -webkit-transform: scale(0.7);
  427. transform: scale(0.7);
  428. color: #67c23a; }
  429. .vxe-input--date-label--extra.is-important {
  430. color: #fd2222; }
  431. .vxe-input--date-festival {
  432. color: #999999;
  433. height: 14px;
  434. line-height: 1;
  435. overflow: hidden; }
  436. .vxe-input--date-festival.is-important {
  437. color: #409eff; }
  438. .vxe-input--date-festival--label {
  439. display: block;
  440. font-size: 12px;
  441. -webkit-transform: scale(0.9);
  442. transform: scale(0.9); }
  443. @-webkit-keyframes festivalOverlap2 {
  444. 0%, 45%, 100% {
  445. -webkit-transform: translateY(0);
  446. transform: translateY(0); }
  447. 50%, 95% {
  448. -webkit-transform: translateY(-14px);
  449. transform: translateY(-14px); } }
  450. @keyframes festivalOverlap2 {
  451. 0%, 45%, 100% {
  452. -webkit-transform: translateY(0);
  453. transform: translateY(0); }
  454. 50%, 95% {
  455. -webkit-transform: translateY(-14px);
  456. transform: translateY(-14px); } }
  457. @-webkit-keyframes festivalOverlap3 {
  458. 0%, 20%, 100% {
  459. -webkit-transform: translateY(0);
  460. transform: translateY(0); }
  461. 25%, 45%, 75%, 95% {
  462. -webkit-transform: translateY(-14px);
  463. transform: translateY(-14px); }
  464. 50%, 70% {
  465. -webkit-transform: translateY(-28px);
  466. transform: translateY(-28px); } }
  467. @keyframes festivalOverlap3 {
  468. 0%, 20%, 100% {
  469. -webkit-transform: translateY(0);
  470. transform: translateY(0); }
  471. 25%, 45%, 75%, 95% {
  472. -webkit-transform: translateY(-14px);
  473. transform: translateY(-14px); }
  474. 50%, 70% {
  475. -webkit-transform: translateY(-28px);
  476. transform: translateY(-28px); } }
  477. .vxe-input--date-festival--overlap {
  478. display: block;
  479. font-size: 12px; }
  480. .vxe-input--date-festival--overlap.overlap--2 {
  481. -webkit-animation: festivalOverlap2 6s infinite ease-in-out;
  482. animation: festivalOverlap2 6s infinite ease-in-out; }
  483. .vxe-input--date-festival--overlap.overlap--3 {
  484. -webkit-animation: festivalOverlap3 9s infinite ease-in-out;
  485. animation: festivalOverlap3 9s infinite ease-in-out; }
  486. .vxe-input--date-festival--overlap > span {
  487. height: 14px;
  488. display: block;
  489. -webkit-transform: scale(0.9);
  490. transform: scale(0.9); }
  491. .vxe-input--time-picker-body {
  492. position: relative;
  493. display: -webkit-box;
  494. display: -ms-flexbox;
  495. display: flex;
  496. -webkit-box-orient: horizontal;
  497. -webkit-box-direction: normal;
  498. -ms-flex-direction: row;
  499. flex-direction: row;
  500. border: 1px solid #DADCE0;
  501. -webkit-box-flex: 1;
  502. -ms-flex-positive: 1;
  503. flex-grow: 1;
  504. border-radius: 4px;
  505. -webkit-user-select: none;
  506. -moz-user-select: none;
  507. -ms-user-select: none;
  508. user-select: none; }
  509. .vxe-input--time-picker-body > ul {
  510. height: 100%;
  511. overflow: hidden;
  512. margin: 0;
  513. padding: 0; }
  514. .vxe-input--time-picker-body > ul:before, .vxe-input--time-picker-body > ul:after {
  515. content: " ";
  516. display: block; }
  517. .vxe-input--time-picker-body > ul:hover {
  518. overflow-y: auto; }
  519. .vxe-input--time-picker-body > ul > li {
  520. display: block; }
  521. .vxe-input--time-picker-body > ul > li:hover {
  522. background-color: #f2f6fc;
  523. cursor: pointer; }
  524. .vxe-input--time-picker-body > ul > li.is--selected {
  525. font-weight: 700;
  526. color: #409eff; }
  527. .vxe-input--time-picker-body .vxe-input--time-picker-minute-list {
  528. border-left: 1px solid #DADCE0; }
  529. .vxe-input--time-picker-body .vxe-input--time-picker-second-list {
  530. border-left: 1px solid #DADCE0; }
  531. .vxe-input {
  532. font-size: 14px;
  533. height: 34px; }
  534. .vxe-input .vxe-input--inner[type="date"]::-webkit-inner-spin-button, .vxe-input .vxe-input--inner[type="month"]::-webkit-inner-spin-button, .vxe-input .vxe-input--inner[type="week"]::-webkit-inner-spin-button {
  535. margin-top: 6px; }
  536. .vxe-input .vxe-input--inner[type="date"]::-webkit-inner-spin-button, .vxe-input .vxe-input--inner[type="month"]::-webkit-inner-spin-button, .vxe-input .vxe-input--inner[type="week"]::-webkit-inner-spin-button, .vxe-input .vxe-input--inner[type="number"]::-webkit-inner-spin-button {
  537. height: 24px; }
  538. .vxe-input.size--medium {
  539. font-size: 14px;
  540. height: 32px; }
  541. .vxe-input.size--medium .vxe-input--inner[type="date"]::-webkit-inner-spin-button, .vxe-input.size--medium .vxe-input--inner[type="month"]::-webkit-inner-spin-button, .vxe-input.size--medium .vxe-input--inner[type="week"]::-webkit-inner-spin-button {
  542. margin-top: 4px; }
  543. .vxe-input.size--small {
  544. font-size: 13px;
  545. height: 30px; }
  546. .vxe-input.size--small .vxe-input--inner[type="date"]::-webkit-inner-spin-button, .vxe-input.size--small .vxe-input--inner[type="month"]::-webkit-inner-spin-button, .vxe-input.size--small .vxe-input--inner[type="week"]::-webkit-inner-spin-button {
  547. margin-top: 2px; }
  548. .vxe-input.size--mini {
  549. font-size: 12px;
  550. height: 28px; }
  551. .vxe-input.size--mini .vxe-input--inner[type="date"]::-webkit-inner-spin-button, .vxe-input.size--mini .vxe-input--inner[type="month"]::-webkit-inner-spin-button, .vxe-input.size--mini .vxe-input--inner[type="week"]::-webkit-inner-spin-button {
  552. margin-top: 0; }
  553. .vxe-input--panel {
  554. font-size: 14px; }
  555. .vxe-input--panel .vxe-input--panel-wrapper {
  556. max-height: 380px; }
  557. .vxe-input--panel.type--date .vxe-input--panel-wrapper, .vxe-input--panel.type--time .vxe-input--panel-wrapper, .vxe-input--panel.type--week .vxe-input--panel-wrapper, .vxe-input--panel.type--month .vxe-input--panel-wrapper, .vxe-input--panel.type--year .vxe-input--panel-wrapper {
  558. padding: 11px; }
  559. .vxe-input--panel.type--date .vxe-input--panel-wrapper, .vxe-input--panel.type--month .vxe-input--panel-wrapper, .vxe-input--panel.type--year .vxe-input--panel-wrapper {
  560. width: 336px; }
  561. .vxe-input--panel.type--week .vxe-input--panel-wrapper {
  562. width: 380px; }
  563. .vxe-input--panel.type--time .vxe-input--panel-wrapper {
  564. width: 170px; }
  565. .vxe-input--panel.type--datetime .vxe-input--panel-left-wrapper {
  566. width: 336px; }
  567. .vxe-input--panel.type--datetime .vxe-input--panel-left-wrapper,
  568. .vxe-input--panel.type--datetime .vxe-input--panel-right-wrapper {
  569. padding: 11px; }
  570. .vxe-input--panel .vxe-input--time-picker-title {
  571. height: 30px;
  572. line-height: 30px;
  573. padding: 0 11px; }
  574. .vxe-input--panel .vxe-input--date-picker-label,
  575. .vxe-input--panel .vxe-input--date-picker-btn {
  576. height: 30px;
  577. line-height: 30px; }
  578. .vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn {
  579. width: 30px;
  580. margin-left: 8px; }
  581. .vxe-input--panel .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label,
  582. .vxe-input--panel .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn {
  583. padding: 0 9px; }
  584. .vxe-input--panel .vxe-input--time-picker-header,
  585. .vxe-input--panel .vxe-input--date-picker-header {
  586. padding-bottom: 8px; }
  587. .vxe-input--panel .vxe-input--date-picker-body table,
  588. .vxe-input--panel .vxe-input--time-picker-body {
  589. height: 258px; }
  590. .vxe-input--panel .vxe-input--time-picker-body > ul {
  591. width: 48px; }
  592. .vxe-input--panel .vxe-input--time-picker-body > ul:before, .vxe-input--panel .vxe-input--time-picker-body > ul:after {
  593. height: 120px; }
  594. .vxe-input--panel .vxe-input--time-picker-body > ul > li {
  595. height: 26px;
  596. padding-left: 9px; }
  597. .vxe-input--panel .vxe-input--time-picker-body .vxe-input--time-picker-minute-list {
  598. left: 48px; }
  599. .vxe-input--panel .vxe-input--time-picker-body .vxe-input--time-picker-second-list {
  600. left: 96px; }
  601. .vxe-input--panel .vxe-input--date-day-view td,
  602. .vxe-input--panel .vxe-input--date-week-view td {
  603. height: 38px; }
  604. .vxe-input--panel .vxe-input--date-month-view td,
  605. .vxe-input--panel .vxe-input--date-year-view td {
  606. height: 48px; }
  607. .vxe-input--panel .vxe-input--date-picker-body th {
  608. height: 30px; }
  609. .vxe-input--panel .vxe-input--time-picker-confirm {
  610. height: 30px;
  611. padding: 0 9px; }
  612. .vxe-input--panel .vxe-input--date-label {
  613. line-height: 15px; }
  614. .vxe-input--panel.size--medium {
  615. font-size: 14px; }
  616. .vxe-input--panel.size--medium .vxe-input--panel-wrapper {
  617. max-height: 360px; }
  618. .vxe-input--panel.size--medium.type--date .vxe-input--panel-wrapper, .vxe-input--panel.size--medium.type--time .vxe-input--panel-wrapper, .vxe-input--panel.size--medium.type--week .vxe-input--panel-wrapper, .vxe-input--panel.size--medium.type--month .vxe-input--panel-wrapper, .vxe-input--panel.size--medium.type--year .vxe-input--panel-wrapper {
  619. padding: 10px; }
  620. .vxe-input--panel.size--medium.type--date .vxe-input--panel-wrapper, .vxe-input--panel.size--medium.type--month .vxe-input--panel-wrapper, .vxe-input--panel.size--medium.type--year .vxe-input--panel-wrapper {
  621. width: 336px; }
  622. .vxe-input--panel.size--medium.type--week .vxe-input--panel-wrapper {
  623. width: 380px; }
  624. .vxe-input--panel.size--medium.type--time .vxe-input--panel-wrapper {
  625. width: 168px; }
  626. .vxe-input--panel.size--medium.type--datetime .vxe-input--panel-left-wrapper {
  627. width: 336px; }
  628. .vxe-input--panel.size--medium.type--datetime .vxe-input--panel-left-wrapper,
  629. .vxe-input--panel.size--medium.type--datetime .vxe-input--panel-right-wrapper {
  630. padding: 10px; }
  631. .vxe-input--panel.size--medium .vxe-input--time-picker-title {
  632. height: 29px;
  633. line-height: 29px;
  634. padding: 0 10px; }
  635. .vxe-input--panel.size--medium .vxe-input--date-picker-label,
  636. .vxe-input--panel.size--medium .vxe-input--date-picker-btn {
  637. height: 29px;
  638. line-height: 29px; }
  639. .vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn {
  640. width: 29px;
  641. margin-left: 7px; }
  642. .vxe-input--panel.size--medium .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label,
  643. .vxe-input--panel.size--medium .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn {
  644. padding: 0 8px; }
  645. .vxe-input--panel.size--medium .vxe-input--time-picker-header,
  646. .vxe-input--panel.size--medium .vxe-input--date-picker-header {
  647. padding-bottom: 7px; }
  648. .vxe-input--panel.size--medium .vxe-input--date-picker-body table,
  649. .vxe-input--panel.size--medium .vxe-input--time-picker-body {
  650. height: 245px; }
  651. .vxe-input--panel.size--medium .vxe-input--time-picker-body > ul {
  652. width: 48px; }
  653. .vxe-input--panel.size--medium .vxe-input--time-picker-body > ul:before, .vxe-input--panel.size--medium .vxe-input--time-picker-body > ul:after {
  654. height: 120px; }
  655. .vxe-input--panel.size--medium .vxe-input--time-picker-body > ul > li {
  656. height: 26px;
  657. padding-left: 8px; }
  658. .vxe-input--panel.size--medium .vxe-input--time-picker-body .vxe-input--time-picker-minute-list {
  659. left: 48px; }
  660. .vxe-input--panel.size--medium .vxe-input--time-picker-body .vxe-input--time-picker-second-list {
  661. left: 96px; }
  662. .vxe-input--panel.size--medium .vxe-input--date-day-view td,
  663. .vxe-input--panel.size--medium .vxe-input--date-week-view td {
  664. height: 36px; }
  665. .vxe-input--panel.size--medium .vxe-input--date-month-view td,
  666. .vxe-input--panel.size--medium .vxe-input--date-year-view td {
  667. height: 46px; }
  668. .vxe-input--panel.size--medium .vxe-input--date-picker-body th {
  669. height: 29px; }
  670. .vxe-input--panel.size--medium .vxe-input--time-picker-confirm {
  671. height: 29px;
  672. padding: 0 8px; }
  673. .vxe-input--panel.size--medium .vxe-input--date-label {
  674. line-height: 15px; }
  675. .vxe-input--panel.size--small {
  676. font-size: 13px; }
  677. .vxe-input--panel.size--small .vxe-input--panel-wrapper {
  678. max-height: 340px; }
  679. .vxe-input--panel.size--small.type--date .vxe-input--panel-wrapper, .vxe-input--panel.size--small.type--time .vxe-input--panel-wrapper, .vxe-input--panel.size--small.type--week .vxe-input--panel-wrapper, .vxe-input--panel.size--small.type--month .vxe-input--panel-wrapper, .vxe-input--panel.size--small.type--year .vxe-input--panel-wrapper {
  680. padding: 9px; }
  681. .vxe-input--panel.size--small.type--date .vxe-input--panel-wrapper, .vxe-input--panel.size--small.type--month .vxe-input--panel-wrapper, .vxe-input--panel.size--small.type--year .vxe-input--panel-wrapper {
  682. width: 312px; }
  683. .vxe-input--panel.size--small.type--week .vxe-input--panel-wrapper {
  684. width: 354px; }
  685. .vxe-input--panel.size--small.type--time .vxe-input--panel-wrapper {
  686. width: 154px; }
  687. .vxe-input--panel.size--small.type--datetime .vxe-input--panel-left-wrapper {
  688. width: 312px; }
  689. .vxe-input--panel.size--small.type--datetime .vxe-input--panel-left-wrapper,
  690. .vxe-input--panel.size--small.type--datetime .vxe-input--panel-right-wrapper {
  691. padding: 9px; }
  692. .vxe-input--panel.size--small .vxe-input--time-picker-title {
  693. height: 28px;
  694. line-height: 28px;
  695. padding: 0 9px; }
  696. .vxe-input--panel.size--small .vxe-input--date-picker-label,
  697. .vxe-input--panel.size--small .vxe-input--date-picker-btn {
  698. height: 28px;
  699. line-height: 28px; }
  700. .vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn {
  701. width: 28px;
  702. margin-left: 6px; }
  703. .vxe-input--panel.size--small .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label,
  704. .vxe-input--panel.size--small .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn {
  705. padding: 0 7px; }
  706. .vxe-input--panel.size--small .vxe-input--time-picker-header,
  707. .vxe-input--panel.size--small .vxe-input--date-picker-header {
  708. padding-bottom: 6px; }
  709. .vxe-input--panel.size--small .vxe-input--date-picker-body table,
  710. .vxe-input--panel.size--small .vxe-input--time-picker-body {
  711. height: 232px; }
  712. .vxe-input--panel.size--small .vxe-input--time-picker-body > ul {
  713. width: 44px; }
  714. .vxe-input--panel.size--small .vxe-input--time-picker-body > ul:before, .vxe-input--panel.size--small .vxe-input--time-picker-body > ul:after {
  715. height: 110px; }
  716. .vxe-input--panel.size--small .vxe-input--time-picker-body > ul > li {
  717. height: 26px;
  718. padding-left: 7px; }
  719. .vxe-input--panel.size--small .vxe-input--time-picker-body .vxe-input--time-picker-minute-list {
  720. left: 44px; }
  721. .vxe-input--panel.size--small .vxe-input--time-picker-body .vxe-input--time-picker-second-list {
  722. left: 88px; }
  723. .vxe-input--panel.size--small .vxe-input--date-day-view td,
  724. .vxe-input--panel.size--small .vxe-input--date-week-view td {
  725. height: 34px; }
  726. .vxe-input--panel.size--small .vxe-input--date-month-view td,
  727. .vxe-input--panel.size--small .vxe-input--date-year-view td {
  728. height: 44px; }
  729. .vxe-input--panel.size--small .vxe-input--date-picker-body th {
  730. height: 28px; }
  731. .vxe-input--panel.size--small .vxe-input--time-picker-confirm {
  732. height: 28px;
  733. padding: 0 7px; }
  734. .vxe-input--panel.size--small .vxe-input--date-label {
  735. line-height: 14px; }
  736. .vxe-input--panel.size--mini {
  737. font-size: 12px; }
  738. .vxe-input--panel.size--mini .vxe-input--panel-wrapper {
  739. max-height: 320px; }
  740. .vxe-input--panel.size--mini.type--date .vxe-input--panel-wrapper, .vxe-input--panel.size--mini.type--time .vxe-input--panel-wrapper, .vxe-input--panel.size--mini.type--week .vxe-input--panel-wrapper, .vxe-input--panel.size--mini.type--month .vxe-input--panel-wrapper, .vxe-input--panel.size--mini.type--year .vxe-input--panel-wrapper {
  741. padding: 8px; }
  742. .vxe-input--panel.size--mini.type--date .vxe-input--panel-wrapper, .vxe-input--panel.size--mini.type--month .vxe-input--panel-wrapper, .vxe-input--panel.size--mini.type--year .vxe-input--panel-wrapper {
  743. width: 288px; }
  744. .vxe-input--panel.size--mini.type--week .vxe-input--panel-wrapper {
  745. width: 326px; }
  746. .vxe-input--panel.size--mini.type--time .vxe-input--panel-wrapper {
  747. width: 146px; }
  748. .vxe-input--panel.size--mini.type--datetime .vxe-input--panel-left-wrapper {
  749. width: 288px; }
  750. .vxe-input--panel.size--mini.type--datetime .vxe-input--panel-left-wrapper,
  751. .vxe-input--panel.size--mini.type--datetime .vxe-input--panel-right-wrapper {
  752. padding: 8px; }
  753. .vxe-input--panel.size--mini .vxe-input--time-picker-title {
  754. height: 27px;
  755. line-height: 27px;
  756. padding: 0 8px; }
  757. .vxe-input--panel.size--mini .vxe-input--date-picker-label,
  758. .vxe-input--panel.size--mini .vxe-input--date-picker-btn {
  759. height: 27px;
  760. line-height: 27px; }
  761. .vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn {
  762. width: 27px;
  763. margin-left: 5px; }
  764. .vxe-input--panel.size--mini .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label,
  765. .vxe-input--panel.size--mini .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn {
  766. padding: 0 6px; }
  767. .vxe-input--panel.size--mini .vxe-input--time-picker-header,
  768. .vxe-input--panel.size--mini .vxe-input--date-picker-header {
  769. padding-bottom: 5px; }
  770. .vxe-input--panel.size--mini .vxe-input--date-picker-body table,
  771. .vxe-input--panel.size--mini .vxe-input--time-picker-body {
  772. height: 218px; }
  773. .vxe-input--panel.size--mini .vxe-input--time-picker-body > ul {
  774. width: 42px; }
  775. .vxe-input--panel.size--mini .vxe-input--time-picker-body > ul:before, .vxe-input--panel.size--mini .vxe-input--time-picker-body > ul:after {
  776. height: 100px; }
  777. .vxe-input--panel.size--mini .vxe-input--time-picker-body > ul > li {
  778. height: 26px;
  779. padding-left: 6px; }
  780. .vxe-input--panel.size--mini .vxe-input--time-picker-body .vxe-input--time-picker-minute-list {
  781. left: 42px; }
  782. .vxe-input--panel.size--mini .vxe-input--time-picker-body .vxe-input--time-picker-second-list {
  783. left: 84px; }
  784. .vxe-input--panel.size--mini .vxe-input--date-day-view td,
  785. .vxe-input--panel.size--mini .vxe-input--date-week-view td {
  786. height: 32px; }
  787. .vxe-input--panel.size--mini .vxe-input--date-month-view td,
  788. .vxe-input--panel.size--mini .vxe-input--date-year-view td {
  789. height: 42px; }
  790. .vxe-input--panel.size--mini .vxe-input--date-picker-body th {
  791. height: 26px; }
  792. .vxe-input--panel.size--mini .vxe-input--time-picker-confirm {
  793. height: 27px;
  794. padding: 0 6px; }
  795. .vxe-input--panel.size--mini .vxe-input--date-label {
  796. line-height: 13px; }