dateyearmonth.css 22 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043
  1. @charset "UTF-8";
  2. @font-face {
  3. font-family: "iconfont";
  4. src: url('iconfont/iconfont.eot?t=1506408675676'); /* IE9*/
  5. src: url('iconfont/iconfont.eot?t=1506408675676#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont/iconfont.woff?t=1506408675676') format('woff'), /* chrome, firefox */ url('iconfont/iconfont.ttf?t=1506408675676') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont/iconfont.svg?t=1506408675676#iconfont') format('svg'); /* iOS 4.1- */
  6. }
  7. .iconfont {
  8. font-family: "iconfont" !important;
  9. font-size: 12px;
  10. font-style: normal;
  11. -webkit-font-smoothing: antialiased;
  12. -moz-osx-font-smoothing: grayscale;
  13. }
  14. .icon-xiangzuo:before {
  15. content: "\e600";
  16. }
  17. .icon-goright:before {
  18. content: "\e601";
  19. }
  20. .kui-absolute {
  21. position: absolute;
  22. }
  23. .kui-relative {
  24. position: relative;
  25. }
  26. .kui-datepicker-range>.clearfix:after {
  27. content: ".";
  28. display: block;
  29. height: 0;
  30. clear: both;
  31. visibility: hidden;
  32. }
  33. .kui-datepicker-range>.clearfix {
  34. *height: 1%;
  35. }
  36. .kui-datepicker-range>.container {
  37. margin-left: auto;
  38. margin-right: auto;
  39. overflow-x: hidden;
  40. padding-left: 1rem;
  41. padding-right: 1rem;
  42. width: 100%;
  43. }
  44. .kui-datepicker-range>.columns {
  45. display: block;
  46. position: relative;/*//margin-left: -1rem;
  47. margin-right: -1rem;*/
  48. }
  49. .kui-datepicker-range>.column {
  50. flex: 1;
  51. padding: 0.5rem;
  52. }
  53. .kui-select {
  54. position: relative;
  55. display: inline-block;
  56. width: 290px;
  57. height: 30px;
  58. }
  59. .kui-select .kui-list ul li {
  60. text-align: left;
  61. }
  62. .kui-select .kui-select-input {
  63. width: 1000%;
  64. height: 100%;
  65. border-radius: 0;
  66. color: #000;
  67. padding-right: 20px;
  68. overflow: hidden;
  69. display: block;
  70. white-space: nowrap;
  71. text-overflow: ellipsis;
  72. cursor: pointer;
  73. text-align: left;
  74. font-size: 12px;
  75. line-height: 28px;
  76. }
  77. .kui-select .select-tag {
  78. color: #666666;
  79. position: absolute;
  80. right: 6px;
  81. top: 10px;
  82. font-size: 12px;
  83. animation: back .3s;
  84. animation-fill-mode: forwards;
  85. height: 14px;
  86. line-height: 14px;
  87. }
  88. .kui-select:hover {
  89. border-color: #66afe9;
  90. outline: 0;
  91. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  92. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  93. }
  94. .kui-select:hover .select-tag {
  95. top: 10px;
  96. animation: turn .3s;
  97. animation-fill-mode: forwards;
  98. }
  99. @keyframes turn {
  100. to {
  101. transform: rotate(180deg);
  102. -o-transform: rotate(180deg);
  103. -webkit-transform: rotate(180deg);
  104. -moz-transform: rotate(180deg);
  105. }
  106. }
  107. @keyframes back {
  108. from {
  109. transform: rotate(180deg);
  110. -o-transform: rotate(180deg);
  111. -webkit-transform: rotate(180deg);
  112. -moz-transform: rotate(180deg);
  113. }
  114. to {
  115. transform: rotate(0deg);
  116. -o-transform: rotate(0deg);
  117. -webkit-transform: rotate(0deg);
  118. -moz-transform: rotate(0deg);
  119. }
  120. }
  121. .kui-list-container {
  122. display: none;
  123. border: 1px solid rgba(0, 0, 0, 0.15);
  124. box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  125. background: #fff;
  126. position: absolute;
  127. width: 100%;
  128. z-index: 9999;
  129. }
  130. .kui-suggest input.form-input {
  131. border-radius: 0;
  132. border: none;
  133. height: 24px;
  134. }
  135. .kui-select .kui-list {
  136. margin: 0 -1px;
  137. overflow: auto;
  138. }
  139. .kui-select .kui-list ul {
  140. overflow: visible;
  141. float: left;
  142. min-width: 100%;
  143. }
  144. .kui-datepicker-range>.searchtag {
  145. position: absolute;
  146. right: 10px;
  147. top: 2px;
  148. font-size: 12px;
  149. color: #00ABFC;
  150. }
  151. .kui-datepicker-range>.searchtag.icon-loading {
  152. animation: spin 1s infinite linear;
  153. }
  154. @keyframes spin {
  155. 0% {
  156. transform: rotate(360deg);
  157. }
  158. 50% {
  159. transform: rotate(180deg);
  160. }
  161. 100% {
  162. transform: rotate(0deg);
  163. }
  164. }
  165. .kui-datepicker-range>.tab-block {
  166. list-style: none;
  167. margin: 5px 0;
  168. }
  169. .kui-datepicker-range>.tab-block {
  170. border-bottom: .1rem solid #c5c5c5;
  171. display: flex;
  172. }
  173. .kui-datepicker-range>.tab-block .tab-item {
  174. margin-bottom: -0.1rem;
  175. margin-top: 0;
  176. }
  177. .kui-datepicker-range>.tab-block .tab-item a {
  178. border-bottom: .2rem solid transparent;
  179. color: #333;
  180. display: block;
  181. padding: .5rem 1.5rem;
  182. text-decoration: none;
  183. }
  184. .kui-datepicker-range>.tab-block .tab-item a:hover, .kui-datepicker-range>.tab-block .tab-item a:focus {
  185. border-bottom-color: #00b450;
  186. color: #00b450;
  187. }
  188. .kui-datepicker-range>.tab-block .tab-item.active a {
  189. border-bottom-color: #00b450;
  190. color: #00b450;
  191. }
  192. .kui-datepicker-range>.tab-block .tab-item {
  193. flex: 1 0 auto;
  194. text-align: center;
  195. }
  196. .kui-datepicker-range>.tab-block .tab-item .badge[data-badge]::after {
  197. position: absolute;
  198. right: 1.5rem;
  199. top: .6rem;
  200. transform: translate(50%, -8px);
  201. }
  202. .kui-datepicker-range>.kui-list {
  203. border: 1px solid rgba(0, 0, 0, 0.15);
  204. box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  205. background: #fff;
  206. z-index: 999;
  207. min-width: 150px;
  208. position: relative;
  209. }
  210. .kui-list-item {
  211. text-indent: 10px;
  212. line-height: 22px;
  213. height: 30px;
  214. padding: 4px 0;
  215. color: #666;
  216. cursor: pointer;
  217. white-space: nowrap;
  218. }
  219. .kui-list-item .iconfont {
  220. line-height: 22px;
  221. }
  222. .kui-list-item .kui-list-content {
  223. display: inline-block;
  224. line-height: 22px;
  225. }
  226. .kui-list-item-active {
  227. /*background: #00ABFC;
  228. color: #fff;*/
  229. line-height: 22px;
  230. }
  231. .kui-list .form-checkbox, .kui-list .form-radio {
  232. padding: 0px 12px;
  233. width: 100%;
  234. height: 100%;
  235. }
  236. .kui-list .form-checkbox .form-icon, .kui-list .form-radio .form-icon {
  237. top: 2px;
  238. }
  239. .kui-list-item:hover {
  240. background: rgba(149, 213, 249, 0.25);
  241. color: #333;
  242. }
  243. .kui-list ul {
  244. height: 200px;
  245. }
  246. .kui-list-item-focus {
  247. background: rgba(149, 213, 249, 0.25);
  248. color: #333;
  249. }
  250. .kui-list input.searchkey {
  251. border: none;
  252. border-bottom: solid 1px #d9d9d9;
  253. }
  254. .kui-list .searchtag {
  255. top: 6px;
  256. }
  257. .kui-contextmenu {
  258. background: #fff;
  259. box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
  260. position: absolute;
  261. display: none;
  262. z-index: 9999;
  263. }
  264. .kui-contextmenu li {
  265. position: relative;
  266. }
  267. .kui-menu-item {
  268. line-height: 22px;
  269. height: 30px;
  270. padding: 4px 0 0 26px;
  271. color: #666;
  272. cursor: pointer;
  273. width: 100%;
  274. display: inline-block;
  275. text-decoration: none;
  276. overflow: hidden;
  277. text-overflow: ellipsis;
  278. white-space: nowrap;
  279. }
  280. .kui-menu-icon-item {
  281. padding: 4px 0 0 14px;
  282. }
  283. .kui-menu-icon-item .iconfont {
  284. margin-right: 4px;
  285. }
  286. .kui-menu-item .iconfont {
  287. line-height: 22px;
  288. }
  289. .kui-menu-item-active {
  290. background: #00ABFC;
  291. color: #fff;
  292. }
  293. .kui-menu-item:hover {
  294. background: rgba(99, 158, 241, 0.2);
  295. color: #333;
  296. }
  297. .kui-menu-item-icon:before {
  298. vertical-align: text-top;
  299. margin-right: 4px;
  300. }
  301. .kui-contextmenu li .submenu {
  302. position: absolute;
  303. top: 10px;
  304. right: 4px;
  305. color: #00ABFC;
  306. font-size: 12px;
  307. }
  308. .kui-datepicker-range>.defaulttag {
  309. visibility: hidden;
  310. position: absolute;
  311. left: 8px;
  312. top: 10px;
  313. font-size: 13px;
  314. }
  315. .kui-menu-sp-item {
  316. border-top: solid 1px #f9f9f9;
  317. display: block;
  318. margin: 2px 8px;
  319. }
  320. .kui-masked-relative {
  321. position: relative;
  322. }
  323. .kui-mask {
  324. height: 100%;
  325. left: 0;
  326. position: absolute;
  327. top: 0;
  328. width: 100%;
  329. z-index: 1040;
  330. background: rgba(0, 0, 0, 0.5);
  331. }
  332. .kui-mask-content {
  333. position: absolute;
  334. top: 50%;
  335. border: 1px solid #c3c3d6;
  336. background: #fff;
  337. z-index: 1050;
  338. padding: 6px;
  339. font-family: Microsoft YaHei;
  340. max-width: 200px;
  341. }
  342. .kui-mask-loading, .kui-mask-text {
  343. display: table-cell;
  344. vertical-align: middle;
  345. word-break: break-all;
  346. }
  347. .kui-mask-loading:before {
  348. content: "\E6C7";
  349. font-family: "iconfont";
  350. width: 16px;
  351. height: 16px;
  352. display: inline-block;
  353. margin-right: 10px;
  354. color: #09c;
  355. font-size: 16px;
  356. animation: loading .5s;
  357. -moz-animation: loading .5s;
  358. /* Firefox */
  359. -webkit-animation: loading .5s;
  360. /* Safari 和 Chrome */
  361. -o-animation: loading .5s;
  362. /* Opera */
  363. animation-iteration-count: infinite;
  364. -moz-animation-iteration-count: infinite;
  365. -webkit-animation-iteration-count: infinite;
  366. -o-animation-iteration-count: infinite;
  367. line-height: 16px;
  368. }
  369. /*
  370. ** todo import theme
  371. *@import "./theme.less";*/
  372. .kui-overlay {
  373. background: #ffffff;
  374. box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
  375. position: absolute;
  376. z-index: 5000;
  377. min-height: 240px;
  378. min-width: 300px;
  379. border: 1px solid rgba(0, 0, 0, 0.3);
  380. }
  381. .kui-dialog {
  382. z-index: 5001;
  383. }
  384. .kui-alert {
  385. z-index: 5002;
  386. }
  387. .kui-overlay .kui-overlay-header {
  388. padding: 0 60px 0 30px;
  389. height: 50px;
  390. border-bottom: solid 1px #eee;
  391. line-height: 50px;
  392. font-family: "Helvetica Neue", Verdana, Tahoma, "Lantinghei SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", sans-serif !important;
  393. font-size: 14px;
  394. color: #333333;
  395. white-space: nowrap;
  396. overflow: hidden;
  397. text-overflow: ellipsis;
  398. }
  399. .kui-overlay .kui-overlay-body {
  400. padding: 20px;
  401. font-family: "Helvetica Neue", Verdana, Tahoma, "Lantinghei SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", sans-serif !important;
  402. font-size: 12px;
  403. color: #666;
  404. line-height: 24px;
  405. text-align: left;
  406. background: #fff;
  407. }
  408. .kui-overlay .kui-overlay-footer {
  409. height: 70px;
  410. border-top: solid 1px #eee;
  411. line-height: 70px;
  412. text-align: right;
  413. padding: 0 30px;
  414. background: #fff;
  415. }
  416. .kui-overlay .kui-overlay-footer button {
  417. margin-left: 20px;
  418. }
  419. .kui-overlay .kui-remover {
  420. position: absolute;
  421. top: 14px;
  422. right: 30px;
  423. font-size: 20px;
  424. color: #aeaeae;
  425. cursor: pointer;
  426. }
  427. .kui-alert-type {
  428. font-size: 30px;
  429. margin: 0 10px;
  430. vertical-align: middle;
  431. padding-right: 20px;
  432. }
  433. .kui-alert-type.icon-success {
  434. color: #87d068;
  435. }
  436. .kui-alert-type.icon-error {
  437. color: #f05634;
  438. }
  439. .kui-alert-type.icon-info {
  440. color: #00c1de;
  441. }
  442. .kui-alert-type.icon-warning {
  443. color: #fa0;
  444. }
  445. .kui-alert-type.icon-question {
  446. color: #00c1de;
  447. }
  448. .kui-alert-type, .msginfo {
  449. display: table-cell;
  450. word-break: break-all;
  451. }
  452. .kui-overlay .msginfo .kui-msg {
  453. max-height: 250px;
  454. overflow-x: hidden;
  455. overflow-y: auto;
  456. }
  457. .kui-datepicker-range>.moretag {
  458. text-align: right;
  459. cursor: pointer;
  460. color: #00c1de;
  461. font-size: 12px;
  462. }
  463. .kui-datepicker-range>.moremsgcontainer {
  464. clear: both;
  465. max-height: 100px;
  466. min-height: 40px;
  467. overflow: auto;
  468. border: solid 1px #ccc;
  469. font-size: 12px;
  470. }
  471. .kui-datepicker-range>.moremsgcontainer textarea {
  472. width: 100%;
  473. min-height: 40px;
  474. max-height: 100px;
  475. border: none;
  476. }
  477. .kui-datepicker-range>.moremsgcontainer textarea:focus {
  478. outline: none;
  479. }
  480. .kui-overlay-loading {
  481. line-height: 20px;
  482. margin-top: 20px;
  483. }
  484. .kui-overlay-loading .kui-mask-loading {
  485. display: inline-block;
  486. }
  487. .kui-notify-container {
  488. position: fixed;
  489. z-index: 999999;
  490. }
  491. .kui-notify {
  492. padding: 16px;
  493. border-radius: 6px;
  494. box-shadow: 0 1px 8px rgba(100, 100, 100, 0.6);
  495. border: 1px solid #d9d9d9;
  496. background: #fff;
  497. line-height: 1.5;
  498. position: relative;
  499. margin-bottom: 10px;
  500. overflow: hidden;
  501. right: -200px;
  502. opacity: 0;
  503. }
  504. .kui-notify .kui-notify-header {
  505. font-size: 14px;
  506. color: #666;
  507. margin-bottom: 6px;
  508. }
  509. .kui-notify .kui-notify-body {
  510. font-size: 12px;
  511. color: #999;
  512. }
  513. .kui-notify .kui-remover {
  514. position: absolute;
  515. right: 16px;
  516. top: 10px;
  517. color: #999;
  518. cursor: pointer;
  519. }
  520. .kui-notify-type {
  521. font-size: 30px;
  522. margin: 0 10px;
  523. }
  524. .kui-notify-type.icon-success {
  525. color: #87d068;
  526. }
  527. .kui-notify-type.icon-error {
  528. color: #f50;
  529. }
  530. .kui-notify-type.icon-info {
  531. color: #2db7f5;
  532. }
  533. .kui-notify-type.icon-warning {
  534. color: #fa0;
  535. }
  536. .kui-datepicker {
  537. box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px;
  538. color: #333333;
  539. background-color: #ffffff;
  540. width: 260px;
  541. padding: 4px 0px;
  542. margin: 2px 0px 0px;
  543. border-width: 1px;
  544. border-style: solid;
  545. border-color: #cccccc;
  546. text-align: center;
  547. color: #c7c7c7;
  548. font-family: "Microsoft YaHei";
  549. height: 310px;
  550. z-index: 5100;
  551. }
  552. .kui-datepicker-year {
  553. height: 160px;
  554. }
  555. .kui-datepicker .kui-datepicker-header {
  556. border-bottom: solid 1px #ddd;
  557. padding-bottom: 4px;
  558. margin: 0 6px;
  559. color: #666;
  560. position: relative;
  561. }
  562. .kui-datepicker .kui-datepicker-header span {
  563. display: inline-block;
  564. text-align: center;
  565. }
  566. .kui-datepicker .kui-datepicker-header span.kui-year-month {
  567. width: 120px;
  568. height: 30px;
  569. line-height: 30px;
  570. }
  571. .kui-datepicker .kui-datepicker-header span.kui-year-month:hover {
  572. background: rgba(17, 194, 216, 0.5);
  573. color: #fff;
  574. cursor: pointer;
  575. }
  576. .kui-datepicker .kui-datepicker-header span.iconfont {
  577. position: absolute;
  578. top: 8px;
  579. font-size: 12px;
  580. cursor: pointer;
  581. color: #B4C8D8;
  582. }
  583. .kui-datepicker .kui-datepicker-header span.prevyear {
  584. left: 4px;
  585. }
  586. .kui-datepicker .kui-datepicker-header span.prevmonth {
  587. left: 34px;
  588. }
  589. .kui-datepicker .kui-datepicker-header span.nextmonth {
  590. right: 34px;
  591. }
  592. .kui-datepicker .kui-datepicker-header span.nextyear {
  593. right: 4px;
  594. }
  595. .kui-datepicker table {
  596. margin: 0 auto;
  597. }
  598. .kui-datepicker thead th, .kui-datepicker tbody td {
  599. width: 30px;
  600. padding: 8px;
  601. height: 30px;
  602. text-align: center;
  603. margin: 2px;
  604. }
  605. .kui-datepicker thead th {
  606. font-weight: bold;
  607. font-size: 12px;
  608. color: #999999;
  609. }
  610. .kui-datepicker table tbody .kui-active-date td {
  611. background: #ccc;
  612. color: #fff;
  613. }
  614. .kui-datepicker table tbody .kui-notvalid-date td {
  615. background: #ccc;
  616. }
  617. .kui-datepicker table tbody .kui-active-date .kui-active-month-date {
  618. background: #11c2d8;
  619. color: #fff;
  620. }
  621. .kui-datepicker .kui-datepicker-footer {
  622. border-top: solid 1px #ddd;
  623. padding: 10px 0 6px 0;
  624. margin: 0 6px;
  625. }
  626. .kui-datepicker .kui-active-month-date {
  627. color: #666;
  628. }
  629. .kui-datepicker .kui-unvalid-date {
  630. color: #ccc;
  631. }
  632. .kui-datepicker .kui-active-date, .kui-datepicker .kui-active-date td {
  633. background: #11c2d8;
  634. color: #fff;
  635. cursor: pointer;
  636. }
  637. .kui-datepicker tbody td:hover, .kui-datepicker-week tbody tr:hover {
  638. background: rgba(17, 194, 216, 0.5);
  639. color: #fff;
  640. cursor: pointer;
  641. }
  642. .kui-datepicker-week tbody tr:hover td, .kui-datepicker-week tbody tr:hover td:hover, .kui-datepicker tbody .kui-active-date td:hover {
  643. background: none;
  644. color: #fff;
  645. }
  646. .kui-datepicker .kui-datepicker-footer button:first-child, .kui-datepicker .kui-datepicker-monthcontainer-footer button:first-child {
  647. margin-right: 20px;
  648. }
  649. .kui-datepicker-range>.datepicker {
  650. position: relative;
  651. width: 150px;
  652. }
  653. .kui-datepicker-range>.datepicker:after {
  654. content: "\E69F";
  655. float: right;
  656. font-family: "iconfont" !important;
  657. font-size: 18px;
  658. position: absolute;
  659. right: 4px;
  660. top: 6px;
  661. color: #00AAFB;
  662. border-left: solid 1px #ddd;
  663. padding-left: 4px;
  664. }
  665. .kui-datepicker-range>.datepicker-week, .kui-datepicker-range>.daterangepicker {
  666. width: 250px;
  667. }
  668. .kui-datepicker-monthcontainer {
  669. position: absolute;
  670. top: 0;
  671. left: 0;
  672. background: #fff;
  673. height: 100%;
  674. color: #666;
  675. }
  676. .kui-datepicker-monthcontainer .kui-month-container, .kui-datepicker-monthcontainer .kui-quarter-container {
  677. width: 130px;
  678. border-right: solid 1px #ddd;
  679. float: left;
  680. height: 250px;
  681. }
  682. .kui-datepicker-monthcontainer .kui-yearlist {
  683. margin-top: -2px;
  684. }
  685. .kui-datepicker-monthcontainer .kui-month-container span, .kui-datepicker-monthcontainer .kui-year-container span, .kui-datepicker-monthcontainer .kui-quarter-container span {
  686. width: 60px;
  687. padding: 8px 5px;
  688. margin: 5px 0;
  689. display: inline-block;
  690. text-align: center;
  691. }
  692. .kui-datepicker-monthcontainer .kui-year-container {
  693. float: left;
  694. width: 128px;
  695. height: 250px;
  696. }
  697. .kui-datepicker-monthcontainer-inner {
  698. height: 250px;
  699. margin-top: 10px;
  700. border-bottom: solid 1px #ddd;
  701. }
  702. .kui-datepicker-monthcontainer-footer {
  703. line-height: 40px;
  704. background: #fff;
  705. }
  706. .kui-datepicker-monthcontainer span:hover {
  707. background: rgba(17, 194, 216, 0.5);
  708. color: #fff;
  709. cursor: pointer;
  710. }
  711. /**
  712. * 以下是range style
  713. */
  714. .kui-datepicker-range {
  715. box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px;
  716. border-width: 1px;
  717. border-style: solid;
  718. border-color: #cccccc;
  719. background: #fff;
  720. display: none;
  721. }
  722. .kui-datepicker-begin, .kui-datepicker-end {
  723. display: inline-block;
  724. }
  725. .kui-datepicker-begin .kui-datepicker, .kui-datepicker-end .kui-datepicker {
  726. box-shadow: none;
  727. border: none;
  728. height: 264px;
  729. }
  730. .kui-datepicker-year-range .kui-datepicker, .kui-datepicker-year-range .kui-datepicker-monthcontainer-inner, .kui-datepicker-year-range .kui-year-container {
  731. height: 150px;
  732. }
  733. .kui-datepicker-range .kui-datepicker .kui-datepicker-footer, .kui-datepicker-month-range .kui-datepicker .kui-datepicker-monthcontainer-footer, .kui-datepicker-year-range .kui-datepicker .kui-datepicker-monthcontainer-footer, .kui-datepicker-quarter-range .kui-datepicker .kui-datepicker-monthcontainer-footer {
  734. display: none;
  735. }
  736. .kui-datepicker-range .kui-datepicker-monthcontainer-inner {
  737. border-bottom: none;
  738. }
  739. .kui-datepicker-month-range .kui-datepicker-end .kui-month-container {
  740. border-left: solid 1px #f2f2f3;
  741. }
  742. .kui-datepicker-range .kui-datepicker-range-footer {
  743. height: 40px;
  744. text-align: right;
  745. padding: 0 14px 0 20px;
  746. border-top: solid 1px #ddd;
  747. line-height: 40px;
  748. margin: 0 6px;
  749. font-size: 0;
  750. }
  751. .kui-datepicker-range .kui-datepicker-range-footer span {
  752. font-size: 12px;
  753. color: #333;
  754. }
  755. /*.kui-datepicker-range .kui-datepicker-range-footer button:last-child*/
  756. .kui-datepicker-range .kui-datepicker-range-footer button {
  757. margin-left: 10px;
  758. }
  759. .kui-datepicker-range button.btn.btn-white, .kui-datepicker button.btn.btn-white {
  760. color: #546478;
  761. border-color: #546478;
  762. }
  763. .kui-error .kui-datepicker, .kui-error .kui-datepicker-monthcontainer {
  764. background: #fffbfb;
  765. transition: background-color 0.2s linear;
  766. -webkit-transition: background-color 0.2s linear;
  767. }
  768. .kui-pagingbar li.kui-pager {
  769. border: 1px solid #ddd;
  770. }
  771. .kui-pagingbar li {
  772. display: inline-block;
  773. padding: 3px 6px;
  774. margin-left: 4px;
  775. color: #666;
  776. cursor: pointer;
  777. min-width: 24px;
  778. height: 24px;
  779. line-height: 16px;
  780. text-align: center;
  781. }
  782. .kui-pagingbar li.focus, .kui-pagingbar li.kui-pager:hover {
  783. background-color: #11c2d8;
  784. color: #FFFFFF;
  785. }
  786. .kui-pagingbar li.kui-pager-disabled, .kui-pagingbar li.kui-pager-disabled:hover {
  787. background-color: #f6f6f6;
  788. cursor: default;
  789. border: none;
  790. color: #ddd;
  791. }
  792. .kui-pagingbar li.kui-paging-toolbar {
  793. padding: 0;
  794. border: none;
  795. }
  796. .kui-pagingbar .kui-paging-count {
  797. line-height: 24px;
  798. height: 24px;
  799. padding: 0;
  800. border: 1px solid #ddd;
  801. text-align: center;
  802. width: 30px;
  803. margin: 0 4px 0 0;
  804. }
  805. .kui-pagingbar a {
  806. border: 1px solid #ddd;
  807. line-height: 24px;
  808. height: 24px;
  809. display: inline-block;
  810. padding: 0 4px;
  811. }
  812. .kui-pagingbar a:hover {
  813. background-color: #11c2d8;
  814. color: #FFFFFF;
  815. }
  816. .kui-grid {
  817. border: solid 1px transparent;
  818. overflow: hidden;
  819. width: 100%;
  820. }
  821. .kui-grid table {
  822. width: 100%;
  823. border-spacing: 0px;
  824. }
  825. .kui-grid .kui-grid-header table > thead > tr > th {
  826. height: 40px;
  827. line-height: 30px;
  828. border-bottom: solid 1px #ececec;
  829. background: #EEE;
  830. padding: 0 8px;
  831. cursor: pointer;
  832. }
  833. .kui-grid .kui-grid-body table > thead > tr > th {
  834. padding: 0 8px;
  835. }
  836. .kui-grid .kui-grid-header table > thead > tr > th:hover {
  837. background: rgba(248, 252, 253, 0.85);
  838. }
  839. .kui-grid .kui-grid-header table > thead > tr > th .iconfont {
  840. float: right;
  841. font-size: 12px;
  842. color: #ccc;
  843. }
  844. .kui-grid .kui-grid-header table > thead > tr > th.sort-asc .iconfont:before {
  845. content: "\E6C6";
  846. color: #00c1de;
  847. }
  848. .kui-grid .kui-grid-header table > thead > tr > th.sort-desc .iconfont:before {
  849. content: "\E6C5";
  850. color: #00c1de;
  851. }
  852. .kui-grid .kui-grid-header table > thead > tr > th:first-child {
  853. border-left: none;
  854. }
  855. .kui-empty-columns {
  856. padding: 20px;
  857. font-size: 14p;
  858. text-align: center;
  859. }
  860. .kui-empty-columns .icon-info {
  861. color: #0099cc;
  862. font-size: 20px;
  863. }
  864. .kui-empty-columns label {
  865. font-size: 16px;
  866. margin-left: 10px;
  867. }
  868. .kui-grid .kui-grid-body {
  869. overflow: auto;
  870. }
  871. .kui-grid .kui-grid-body table > tbody > tr:nth-child(even) {
  872. background: #fff;
  873. }
  874. .kui-grid .kui-grid-body table > tbody > tr:hover {
  875. background: rgba(248, 252, 253, 0.85);
  876. }
  877. .kui-grid .kui-grid-body table > tbody > tr.active {
  878. background: rgba(248, 252, 253, 0.85);
  879. }
  880. .kui-grid .kui-grid-body table > tbody > tr > td {
  881. padding: 12px 8px;
  882. border-top: 0px;
  883. border-bottom: 1px solid #ececec;
  884. vertical-align: middle;
  885. word-break: break-all;
  886. }
  887. .kui-grid .pagingbar {
  888. height: 40px;
  889. text-align: right;
  890. padding: 6px;
  891. }
  892. .kui-datepicker-range>input.error {
  893. border: 1px dotted #E6594E;
  894. }
  895. .kui-datepicker-range>input.highlight {
  896. border: 1px dotted #7abd54;
  897. }
  898. .kui-datepicker-range>label.error, .kui-datepicker-range>label.tip {
  899. line-height: 16px;
  900. font-size: 14px;
  901. text-align: left;
  902. color: red;
  903. position: absolute;
  904. top: -16px;
  905. background: #fff;
  906. display: block;
  907. border: solid 1px #00AAFB;
  908. padding: 4px;
  909. z-index: 999;
  910. border-radius: 4px;
  911. }
  912. .kui-datepicker-range>label.error:before {
  913. content: "\E6B1";
  914. font-family: "iconfont";
  915. margin-right: 4px;
  916. }
  917. .kui-datepicker-range>label.tip {
  918. color: #aaa;
  919. }
  920. .kui-datepicker-range>label.valid {
  921. width: 32px;
  922. }
  923. .kui-datepicker-range>.control-label {
  924. text-align: right;
  925. line-height: 30px;
  926. }
  927. .kui-datepicker-range>.control-label s {
  928. text-decoration: none;
  929. color: #ff0000;
  930. font-size: 14px;
  931. }
  932. .kui-datepicker-range>.columns-control em {
  933. font-style: normal;
  934. font-size: 12px;
  935. color: #999;
  936. line-height: 24px;
  937. }
  938. .kui-list ul {
  939. overflow-x: hidden;
  940. }
  941. .kui-datepicker-range>.row {
  942. margin-bottom: 20px;
  943. }
  944. .kui-datepicker-range>.topbar {
  945. margin-top: 20px;
  946. }
  947. .kui-datepicker-range>.topbar .quickdate, .kui-datepicker-range>.topbar .quickmonth {
  948. padding-top: 4px;
  949. }
  950. .kui-datepicker-range>.date-remark {
  951. height: 24px;
  952. line-height: 22px;
  953. color: #546478;
  954. margin-left: 20px;
  955. }
  956. .kui-datepicker-range>.topbar .quickdate span, .kui-datepicker-range>.topbar .quickmonth span {
  957. /*&:nth-child(1){
  958. display: none;
  959. }*/
  960. display: inline-block;
  961. margin-right: 10px;
  962. width: 60px;
  963. height: 24px;
  964. line-height: 22px;
  965. cursor: pointer;
  966. color: #666;
  967. text-align: center;
  968. background: #D9DEE4;
  969. border: 1px solid #D9DEE4;
  970. }
  971. .kui-datepicker-range>.topbar .quickdate span.active, .kui-datepicker-range>.topbar .quickmonth span.active {
  972. background: #546478;
  973. color: #fff;
  974. border: 1px solid #546478;
  975. }
  976. .kui-datepicker-range>.dateType {
  977. margin-right: 10px;
  978. }
  979. .kui-datepicker-range>.date-text {
  980. margin-left: 8px;
  981. }
  982. .kui-datepicker-range>.range-text, .control-name {
  983. line-height: 30px;
  984. }
  985. .kui-datepicker-range>.select-button {
  986. margin-right: 20px;
  987. }
  988. .kui-datepicker-range>.charts {
  989. border: solid 1px #ddd;
  990. margin-bottom: 20px;
  991. }
  992. .kui-datepicker-range>.charts .chart-menu {
  993. margin-bottom: 20px;
  994. }
  995. .kui-datepicker-range>.charts .chart-menu .column {
  996. text-align: center;
  997. height: 60px;
  998. background: #f2f2f2;
  999. line-height: 50px;
  1000. border-right: solid 1px #ddd;
  1001. border-top: solid 2px #f2f2f2;
  1002. border-bottom: solid 1px #ddd;
  1003. cursor: pointer;
  1004. }
  1005. .kui-datepicker-range>.series {
  1006. margin: 0 10px;
  1007. }
  1008. .kui-datepicker-range>.charts .chart-menu .column.last {
  1009. border-right: none;
  1010. }
  1011. .kui-datepicker-range>.charts .chart-menu .column.active {
  1012. border-top: 2px solid #00a2ca;
  1013. background: #fff;
  1014. border-bottom: solid 1px #fff;
  1015. }
  1016. .kui-datepicker-range>.charts .chart {
  1017. height: 400px;
  1018. }
  1019. .kui-datepicker-range>.download {
  1020. font-size: 12px;
  1021. margin-right: 20px;
  1022. font-style: normal;
  1023. cursor: pointer;
  1024. }
  1025. .kui-datepicker-range>.download:hover {
  1026. color: #00a2ca;
  1027. }
  1028. .kui-datepicker-range>.icon-download:before {
  1029. font-size: 20px;
  1030. margin-right: 4px;
  1031. }
  1032. .kui-datepicker-range>.border-none .kui-grid {
  1033. border: none;
  1034. }
  1035. .kui-datepicker-range>.clearfloat {
  1036. clear: both;
  1037. }
  1038. .kui-datepicker-range>.chart-menu .column {
  1039. width: 20%;
  1040. }