pickadate.css 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. /****************************************************/
  2. /* Pick-a-date - Picker base */
  3. /****************************************************/
  4. .picker {
  5. width: 100%;
  6. text-align: left;
  7. position: absolute;
  8. top: 100%;
  9. margin-top: -1px;
  10. z-index: 990;
  11. -webkit-user-select: none;
  12. -moz-user-select: none;
  13. -ms-user-select: none;
  14. user-select: none;
  15. }
  16. .picker__input {
  17. cursor: default;
  18. }
  19. .picker__holder {
  20. width: 100%;
  21. overflow-y: auto;
  22. position: absolute;
  23. display: none;
  24. background-color: #fff;
  25. border: 1px solid #ddd;
  26. border-top-width: 0;
  27. border-bottom-width: 0;
  28. max-width: 280px;
  29. max-height: 0;
  30. -webkit-overflow-scrolling: touch;
  31. }
  32. .picker--opened .picker__holder {
  33. max-height: 480px;
  34. border-top-width: 1px;
  35. border-bottom-width: 1px;
  36. display: block;
  37. }
  38. /****************************************************/
  39. /* Pick-a-date - Date picker */
  40. /****************************************************/
  41. .picker__box {
  42. padding: 5px;
  43. }
  44. .picker__header {
  45. text-align: center;
  46. position: relative;
  47. font-size: 15px;
  48. padding-top: 15px;
  49. padding-bottom: 15px;
  50. }
  51. .picker__month,
  52. .picker__year {
  53. font-weight: 500;
  54. display: inline-block;
  55. margin-left: 5px;
  56. margin-right: 5px;
  57. }
  58. .picker__year {
  59. color: #999999;
  60. font-size: 12px;
  61. font-weight: normal;
  62. }
  63. .picker__select--month,
  64. .picker__select--year {
  65. border-color: #ddd;
  66. height: 32px;
  67. font-size: 13px;
  68. line-height: 1.6666667;
  69. margin-left: 5px;
  70. margin-right: 5px;
  71. outline: 0;
  72. }
  73. .picker__select--month {
  74. width: 35%;
  75. }
  76. .picker__select--year {
  77. width: 22.5%;
  78. }
  79. .picker__nav--prev,
  80. .picker__nav--next {
  81. position: absolute;
  82. padding: 8px;
  83. top: 50%;
  84. margin-top: -16px;
  85. border-radius: 2px;
  86. line-height: 1;
  87. }
  88. .picker__nav--prev:before,
  89. .picker__nav--next:before {
  90. font-family: 'FontAwesome';
  91. display: block;
  92. font-size: 14px;
  93. width: 14px;
  94. text-align: center;
  95. -webkit-font-smoothing: antialiased;
  96. -moz-osx-font-smoothing: grayscale;
  97. }
  98. .picker__nav--prev:hover,
  99. .picker__nav--next:hover {
  100. cursor: pointer;
  101. background-color: #f5f5f5;
  102. }
  103. .picker__nav--prev {
  104. left: 0;
  105. }
  106. .picker__nav--prev:before {
  107. content: '\f060';
  108. }
  109. .picker__nav--next {
  110. right: 0;
  111. }
  112. .picker__nav--next:before {
  113. content: '\f061';
  114. }
  115. .picker__nav--disabled,
  116. .picker__nav--disabled:hover,
  117. .picker__nav--disabled:before,
  118. .picker__nav--disabled:before:hover {
  119. cursor: default;
  120. background: none;
  121. border-right-color: #f5f5f5;
  122. border-left-color: #f5f5f5;
  123. }
  124. .picker__table {
  125. text-align: center;
  126. border-collapse: collapse;
  127. border-spacing: 0;
  128. table-layout: fixed;
  129. font-size: inherit;
  130. width: 100%;
  131. margin-bottom: 10px;
  132. }
  133. .picker__table td {
  134. margin: 0;
  135. padding: 0;
  136. }
  137. .picker__weekday {
  138. width: 14.285714286%;
  139. font-size: 12px;
  140. text-align: center;
  141. padding-bottom: 10px;
  142. color: #999999;
  143. font-weight: 400;
  144. }
  145. .picker__day {
  146. padding: 7px;
  147. }
  148. .picker__day--today {
  149. position: relative;
  150. background-color: #f5f5f5;
  151. }
  152. .picker__day--today:before {
  153. content: "";
  154. position: absolute;
  155. top: 2px;
  156. right: 2px;
  157. width: 0;
  158. height: 0;
  159. border-top: 6px solid #4EC6E8;
  160. border-left: 6px solid transparent;
  161. }
  162. .picker__day--outfocus {
  163. color: #ccc;
  164. }
  165. .picker__day--infocus:hover,
  166. .picker__day--outfocus:hover {
  167. cursor: pointer;
  168. color: #333333;
  169. background-color: #f5f5f5;
  170. }
  171. .picker__day--highlighted:before {
  172. border-top-color: #fff;
  173. }
  174. .picker__day--highlighted,
  175. .picker__day--selected {
  176. border-radius: 3px;
  177. }
  178. .picker__day--highlighted,
  179. .picker__day--highlighted:hover,
  180. .picker--focused .picker__day--highlighted {
  181. cursor: pointer;
  182. color: #fff;
  183. background-color: #4EC6E8;
  184. }
  185. .picker__day--selected,
  186. .picker__day--selected:hover,
  187. .picker--focused .picker__day--selected {
  188. background-color: #4EC6E8;
  189. color: #fff;
  190. }
  191. .picker__day--disabled,
  192. .picker__day--disabled:hover {
  193. background: #fafafa;
  194. color: #999999;
  195. cursor: default;
  196. }
  197. .picker__day--disabled:before {
  198. border-top-color: #999;
  199. }
  200. .picker__day--highlighted .picker__day--disabled,
  201. .picker__day--highlighted .picker__day--disabled:hover {
  202. background-color: #bbbbbb;
  203. }
  204. .picker__footer {
  205. text-align: center;
  206. }
  207. .picker__footer button {
  208. border: 0;
  209. background: #fff;
  210. padding: 7px 12px;
  211. border-radius: 3px;
  212. font-weight: 500;
  213. cursor: pointer;
  214. display: inline-block;
  215. }
  216. .picker__footer button:hover,
  217. .picker__footer button:focus {
  218. outline: 0;
  219. background-color: #f5f5f5;
  220. }
  221. .picker__footer button:before {
  222. height: 0;
  223. }
  224. .picker__button--today:before {
  225. content: '';
  226. margin-right: 5px;
  227. position: relative;
  228. display: inline-block;
  229. top: -1px;
  230. width: 0;
  231. border-top: 6px solid #2196F3;
  232. border-left: 6px solid transparent;
  233. }
  234. .picker__button--close:before {
  235. content: '\f00d';
  236. display: inline-block;
  237. position: relative;
  238. margin-right: 5px;
  239. top: 1px;
  240. font-family: FontAwesome;
  241. font-size: 14px;
  242. color: red;
  243. }
  244. .picker__button--clear:before {
  245. content: '';
  246. display: inline-block;
  247. position: relative;
  248. top: -3px;
  249. width: 8px;
  250. margin-right: 5px;
  251. border-top: 2px solid #F44336;
  252. }
  253. /****************************************************/
  254. /* Pick-a-date - Time picker */
  255. /****************************************************/
  256. .picker--time {
  257. min-width: 256px;
  258. max-width: 320px;
  259. }
  260. .picker--time .picker__box {
  261. padding: 0;
  262. }
  263. .picker__list {
  264. list-style: none;
  265. padding: 5px 0;
  266. margin: 0;
  267. background-color: #fff;
  268. max-height: 250px;
  269. overflow-y: auto;
  270. }
  271. .picker__list-item {
  272. position: relative;
  273. padding: 7px 12px;
  274. }
  275. .picker__list-item:hover,
  276. .picker__list-item:focus {
  277. cursor: pointer;
  278. background-color: #f5f5f5;
  279. z-index: 10;
  280. }
  281. .picker--time .picker__button--clear {
  282. display: block;
  283. width: 100%;
  284. margin: 0;
  285. padding: 7px 12px;
  286. background-color: #fcfcfc;
  287. margin-top: 1px;
  288. outline: 0;
  289. border: 0;
  290. border-top: 1px solid #eeeeee;
  291. text-align: center;
  292. margin-bottom: -5px;
  293. margin-top: 5px;
  294. }
  295. .picker--time .picker__button--clear:hover,
  296. .picker--time .picker__button--clear:focus {
  297. background-color: #f5f5f5;
  298. }
  299. .picker__list-item--highlighted {
  300. z-index: 10;
  301. }
  302. .picker__list-item--highlighted,
  303. .picker__list-item--highlighted:hover,
  304. .picker--focused .picker__list-item--highlighted {
  305. cursor: pointer;
  306. color: #fff;
  307. background-color: #4EC6E8;
  308. }
  309. .picker__list-item--selected,
  310. .picker__list-item--selected:hover,
  311. .picker--focused .picker__list-item--selected {
  312. background-color: #4EC6E8;
  313. color: #fff;
  314. z-index: 10;
  315. }
  316. .picker__list-item--disabled,
  317. .picker__list-item--disabled:hover,
  318. .picker--focused .picker__list-item--disabled {
  319. background-color: #fafafa;
  320. color: #999999;
  321. cursor: default;
  322. z-index: auto;
  323. }