laydate.css 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461
  1. .laydate-set-ym, .layui-laydate, .layui-laydate *, .layui-laydate-list {
  2. box-sizing: border-box
  3. }
  4. html #layuicss-laydate {
  5. display: none;
  6. position: absolute;
  7. width: 1989px
  8. }
  9. .layui-laydate * {
  10. margin: 0;
  11. padding: 0
  12. }
  13. .layui-laydate {
  14. position: absolute;
  15. z-index: 66666666;
  16. margin: 5px 0;
  17. border-radius: 2px;
  18. font-size: 14px;
  19. -webkit-animation-duration: .2s;
  20. animation-duration: .2s;
  21. -webkit-animation-fill-mode: both;
  22. animation-fill-mode: both;
  23. animation-name: laydate-downbit
  24. }
  25. .layui-laydate-main {
  26. width: 272px
  27. }
  28. .layui-laydate-content td, .layui-laydate-header *, .layui-laydate-list li {
  29. transition-duration: .3s;
  30. -webkit-transition-duration: .3s
  31. }
  32. @keyframes laydate-downbit {
  33. 0% {
  34. opacity: .3;
  35. transform: translate3d(0, -5px, 0)
  36. }
  37. 100% {
  38. opacity: 1;
  39. transform: translate3d(0, 0, 0)
  40. }
  41. }
  42. .layui-laydate-static {
  43. position: relative;
  44. z-index: 0;
  45. display: inline-block;
  46. margin: 0;
  47. -webkit-animation: none;
  48. animation: none
  49. }
  50. .laydate-ym-show .laydate-next-m, .laydate-ym-show .laydate-prev-m {
  51. display: none !important
  52. }
  53. .laydate-ym-show .laydate-next-y, .laydate-ym-show .laydate-prev-y {
  54. display: inline-block !important
  55. }
  56. .laydate-time-show .laydate-set-ym span[lay-type=month], .laydate-time-show .laydate-set-ym span[lay-type=year], .laydate-time-show .layui-laydate-header .layui-icon, .laydate-ym-show .laydate-set-ym span[lay-type=month] {
  57. display: none !important
  58. }
  59. .layui-laydate-header {
  60. position: relative;
  61. line-height: 30px;
  62. padding: 10px 70px 5px
  63. }
  64. .layui-laydate-header * {
  65. display: inline-block;
  66. vertical-align: bottom
  67. }
  68. .layui-laydate-header i {
  69. position: absolute;
  70. top: 10px;
  71. padding: 0 5px;
  72. color: #999;
  73. font-size: 18px;
  74. cursor: pointer
  75. }
  76. .layui-laydate-header i.laydate-prev-y {
  77. left: 15px
  78. }
  79. .layui-laydate-header i.laydate-prev-m {
  80. left: 45px
  81. }
  82. .layui-laydate-header i.laydate-next-y {
  83. right: 15px
  84. }
  85. .layui-laydate-header i.laydate-next-m {
  86. right: 45px
  87. }
  88. .laydate-set-ym {
  89. width: 100%;
  90. text-align: center;
  91. text-overflow: ellipsis;
  92. overflow: hidden;
  93. white-space: nowrap
  94. }
  95. .laydate-set-ym span {
  96. padding: 0 10px;
  97. cursor: pointer
  98. }
  99. .laydate-time-text {
  100. cursor: default !important
  101. }
  102. .layui-laydate-content {
  103. position: relative;
  104. padding: 10px;
  105. -moz-user-select: none;
  106. -webkit-user-select: none;
  107. -ms-user-select: none
  108. }
  109. .layui-laydate-content table {
  110. border-collapse: collapse;
  111. border-spacing: 0
  112. }
  113. .layui-laydate-content td, .layui-laydate-content th {
  114. width: 36px;
  115. height: 30px;
  116. padding: 5px;
  117. text-align: center
  118. }
  119. .layui-laydate-content td {
  120. position: relative;
  121. cursor: pointer
  122. }
  123. .laydate-day-mark {
  124. position: absolute;
  125. left: 0;
  126. top: 0;
  127. width: 100%;
  128. line-height: 30px;
  129. font-size: 12px;
  130. overflow: hidden
  131. }
  132. .laydate-day-mark::after {
  133. position: absolute;
  134. content: '';
  135. right: 2px;
  136. top: 2px;
  137. width: 5px;
  138. height: 5px;
  139. border-radius: 50%
  140. }
  141. .layui-laydate-footer {
  142. position: relative;
  143. height: 46px;
  144. line-height: 26px;
  145. padding: 10px
  146. }
  147. .layui-laydate-footer span {
  148. display: inline-block;
  149. vertical-align: top;
  150. height: 26px;
  151. line-height: 24px;
  152. padding: 0 10px;
  153. border: 1px solid #C9C9C9;
  154. border-radius: 2px;
  155. background-color: #fff;
  156. font-size: 12px;
  157. cursor: pointer;
  158. white-space: nowrap;
  159. transition: all .3s
  160. }
  161. .layui-laydate-list > li, .layui-laydate-range .layui-laydate-main {
  162. display: inline-block;
  163. vertical-align: middle
  164. }
  165. .layui-laydate-footer span:hover {
  166. color: #5FB878
  167. }
  168. .layui-laydate-footer span.layui-laydate-preview {
  169. cursor: default;
  170. border-color: transparent !important
  171. }
  172. .layui-laydate-footer span.layui-laydate-preview:hover {
  173. color: #666
  174. }
  175. .layui-laydate-footer span:first-child.layui-laydate-preview {
  176. padding-left: 0
  177. }
  178. .laydate-footer-btns {
  179. position: absolute;
  180. right: 10px;
  181. top: 10px
  182. }
  183. .laydate-footer-btns span {
  184. margin: 0 0 0 -1px
  185. }
  186. .layui-laydate-list {
  187. position: absolute;
  188. left: 0;
  189. top: 0;
  190. width: 100%;
  191. height: 100%;
  192. padding: 10px;
  193. background-color: #fff
  194. }
  195. .layui-laydate-list > li {
  196. position: relative;
  197. width: 33.3%;
  198. height: 36px;
  199. line-height: 36px;
  200. margin: 3px 0;
  201. text-align: center;
  202. cursor: pointer
  203. }
  204. .laydate-month-list > li {
  205. width: 25%;
  206. margin: 17px 0
  207. }
  208. .laydate-time-list > li {
  209. height: 100%;
  210. margin: 0;
  211. line-height: normal;
  212. cursor: default
  213. }
  214. .laydate-time-list p {
  215. position: relative;
  216. top: -4px;
  217. line-height: 29px
  218. }
  219. .laydate-time-list ol {
  220. height: 181px;
  221. overflow: hidden
  222. }
  223. .laydate-time-list > li:hover ol {
  224. overflow-y: auto
  225. }
  226. .laydate-time-list ol li {
  227. width: 130%;
  228. padding-left: 33px;
  229. height: 30px;
  230. line-height: 30px;
  231. text-align: left;
  232. cursor: pointer
  233. }
  234. .layui-laydate-hint {
  235. position: absolute;
  236. top: 115px;
  237. left: 50%;
  238. width: 250px;
  239. margin-left: -125px;
  240. line-height: 20px;
  241. padding: 15px;
  242. text-align: center;
  243. font-size: 12px
  244. }
  245. .layui-laydate-range {
  246. width: 546px
  247. }
  248. .layui-laydate-range .laydate-main-list-1 .layui-laydate-content, .layui-laydate-range .laydate-main-list-1 .layui-laydate-header {
  249. border-left: 1px solid #e2e2e2
  250. }
  251. .layui-laydate, .layui-laydate-hint {
  252. border: 1px solid #d2d2d2;
  253. box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
  254. background-color: #fff;
  255. color: #666
  256. }
  257. .layui-laydate-header {
  258. border-bottom: 1px solid #e2e2e2
  259. }
  260. .layui-laydate-header i:hover, .layui-laydate-header span:hover {
  261. color: #5FB878
  262. }
  263. .layui-laydate-content {
  264. border-top: none 0;
  265. border-bottom: none 0
  266. }
  267. .layui-laydate-content th {
  268. font-weight: 400;
  269. color: #333
  270. }
  271. .layui-laydate-content td {
  272. color: #666
  273. }
  274. .layui-laydate-content td.laydate-selected {
  275. background-color: #B5FFF8
  276. }
  277. .laydate-selected:hover {
  278. background-color: #00F7DE !important
  279. }
  280. .layui-laydate-content td:hover, .layui-laydate-list li:hover {
  281. background-color: #eee;
  282. color: #333
  283. }
  284. .laydate-time-list li ol {
  285. margin: 0;
  286. padding: 0;
  287. border: 1px solid #e2e2e2;
  288. border-left-width: 0
  289. }
  290. .laydate-time-list li:first-child ol {
  291. border-left-width: 1px
  292. }
  293. .laydate-time-list > li:hover {
  294. background: 0 0
  295. }
  296. .layui-laydate-content .laydate-day-next, .layui-laydate-content .laydate-day-prev {
  297. color: #d2d2d2
  298. }
  299. .laydate-selected.laydate-day-next, .laydate-selected.laydate-day-prev {
  300. background-color: #f8f8f8 !important
  301. }
  302. .layui-laydate-footer {
  303. border-top: 1px solid #e2e2e2
  304. }
  305. .layui-laydate-hint {
  306. color: #FF5722
  307. }
  308. .laydate-day-mark::after {
  309. background-color: #5FB878
  310. }
  311. .layui-laydate-content td.layui-this .laydate-day-mark::after {
  312. display: none
  313. }
  314. .layui-laydate-footer span[lay-type=date] {
  315. color: #5FB878
  316. }
  317. .layui-laydate .layui-this {
  318. background-color: #009688 !important;
  319. color: #fff !important
  320. }
  321. .layui-laydate .laydate-disabled, .layui-laydate .laydate-disabled:hover {
  322. background: 0 0 !important;
  323. color: #d2d2d2 !important;
  324. cursor: not-allowed !important;
  325. -moz-user-select: none;
  326. -webkit-user-select: none;
  327. -ms-user-select: none
  328. }
  329. .laydate-theme-molv {
  330. border: none
  331. }
  332. .laydate-theme-molv.layui-laydate-range {
  333. width: 548px
  334. }
  335. .laydate-theme-molv .layui-laydate-main {
  336. width: 274px
  337. }
  338. .laydate-theme-molv .layui-laydate-header {
  339. border: none;
  340. background-color: #009688
  341. }
  342. .laydate-theme-molv .layui-laydate-header i, .laydate-theme-molv .layui-laydate-header span {
  343. color: #f6f6f6
  344. }
  345. .laydate-theme-molv .layui-laydate-header i:hover, .laydate-theme-molv .layui-laydate-header span:hover {
  346. color: #fff
  347. }
  348. .laydate-theme-molv .layui-laydate-content {
  349. border: 1px solid #e2e2e2;
  350. border-top: none;
  351. border-bottom: none
  352. }
  353. .laydate-theme-molv .laydate-main-list-1 .layui-laydate-content {
  354. border-left: none
  355. }
  356. .laydate-theme-grid .laydate-month-list > li, .laydate-theme-grid .laydate-year-list > li, .laydate-theme-grid .layui-laydate-content td, .laydate-theme-grid .layui-laydate-content thead, .laydate-theme-molv .layui-laydate-footer {
  357. border: 1px solid #e2e2e2
  358. }
  359. .laydate-theme-grid .laydate-selected, .laydate-theme-grid .laydate-selected:hover {
  360. background-color: #f2f2f2 !important;
  361. color: #009688 !important
  362. }
  363. .laydate-theme-grid .laydate-selected.laydate-day-next, .laydate-theme-grid .laydate-selected.laydate-day-prev {
  364. color: #d2d2d2 !important
  365. }
  366. .laydate-theme-grid .laydate-month-list, .laydate-theme-grid .laydate-year-list {
  367. margin: 1px 0 0 1px
  368. }
  369. .laydate-theme-grid .laydate-month-list > li, .laydate-theme-grid .laydate-year-list > li {
  370. margin: 0 -1px -1px 0
  371. }
  372. .laydate-theme-grid .laydate-year-list > li {
  373. height: 43px;
  374. line-height: 43px
  375. }
  376. .laydate-theme-grid .laydate-month-list > li {
  377. height: 71px;
  378. line-height: 71px
  379. }