classic.date.css 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. /* ==========================================================================
  2. $BASE-DATE-PICKER
  3. ========================================================================== */
  4. /**
  5. * The picker box.
  6. */
  7. .picker__box {
  8. padding: 0 1em;
  9. }
  10. /**
  11. * The header containing the month and year stuff.
  12. */
  13. .picker__header {
  14. text-align: center;
  15. position: relative;
  16. margin-top: .75em;
  17. }
  18. /**
  19. * The month and year labels.
  20. */
  21. .picker__month,
  22. .picker__year {
  23. font-weight: 500;
  24. display: inline-block;
  25. margin-left: .25em;
  26. margin-right: .25em;
  27. }
  28. .picker__year {
  29. color: #999;
  30. font-size: .8em;
  31. font-style: italic;
  32. }
  33. /**
  34. * The month and year selectors.
  35. */
  36. .picker__select--month,
  37. .picker__select--year {
  38. border: 1px solid #b7b7b7;
  39. height: 2em;
  40. padding: .5em;
  41. margin-left: .25em;
  42. margin-right: .25em;
  43. }
  44. @media (min-width: 24.5em) {
  45. .picker__select--month,
  46. .picker__select--year {
  47. margin-top: -0.5em;
  48. }
  49. }
  50. .picker__select--month {
  51. width: 35%;
  52. }
  53. .picker__select--year {
  54. width: 22.5%;
  55. }
  56. .picker__select--month:focus,
  57. .picker__select--year:focus {
  58. border-color: #0089ec;
  59. }
  60. /**
  61. * The month navigation buttons.
  62. */
  63. .picker__nav--prev,
  64. .picker__nav--next {
  65. position: absolute;
  66. padding: .5em 1.25em;
  67. width: 1em;
  68. height: 1em;
  69. box-sizing: content-box;
  70. top: -0.25em;
  71. }
  72. @media (min-width: 24.5em) {
  73. .picker__nav--prev,
  74. .picker__nav--next {
  75. top: -0.33em;
  76. }
  77. }
  78. .picker__nav--prev {
  79. left: -1em;
  80. padding-right: 1.25em;
  81. }
  82. @media (min-width: 24.5em) {
  83. .picker__nav--prev {
  84. padding-right: 1.5em;
  85. }
  86. }
  87. .picker__nav--next {
  88. right: -1em;
  89. padding-left: 1.25em;
  90. }
  91. @media (min-width: 24.5em) {
  92. .picker__nav--next {
  93. padding-left: 1.5em;
  94. }
  95. }
  96. .picker__nav--prev:before,
  97. .picker__nav--next:before {
  98. content: " ";
  99. border-top: .5em solid transparent;
  100. border-bottom: .5em solid transparent;
  101. border-right: 0.75em solid #000;
  102. width: 0;
  103. height: 0;
  104. display: block;
  105. margin: 0 auto;
  106. }
  107. .picker__nav--next:before {
  108. border-right: 0;
  109. border-left: 0.75em solid #000;
  110. }
  111. .picker__nav--prev:hover,
  112. .picker__nav--next:hover {
  113. cursor: pointer;
  114. color: #000;
  115. background: #b1dcfb;
  116. }
  117. .picker__nav--disabled,
  118. .picker__nav--disabled:hover,
  119. .picker__nav--disabled:before,
  120. .picker__nav--disabled:before:hover {
  121. cursor: default;
  122. background: none;
  123. border-right-color: #f5f5f5;
  124. border-left-color: #f5f5f5;
  125. }
  126. /**
  127. * The calendar table of dates
  128. */
  129. .picker__table {
  130. text-align: center;
  131. border-collapse: collapse;
  132. border-spacing: 0;
  133. table-layout: fixed;
  134. font-size: inherit;
  135. width: 100%;
  136. margin-top: .75em;
  137. margin-bottom: .5em;
  138. }
  139. @media (min-height: 33.875em) {
  140. .picker__table {
  141. margin-bottom: .75em;
  142. }
  143. }
  144. .picker__table td {
  145. margin: 0;
  146. padding: 0;
  147. }
  148. /**
  149. * The weekday labels
  150. */
  151. .picker__weekday {
  152. width: 14.285714286%;
  153. font-size: .75em;
  154. padding-bottom: .25em;
  155. color: #999;
  156. font-weight: 500;
  157. /* Increase the spacing a tad */
  158. }
  159. @media (min-height: 33.875em) {
  160. .picker__weekday {
  161. padding-bottom: .5em;
  162. }
  163. }
  164. /**
  165. * The days on the calendar
  166. */
  167. .picker__day {
  168. padding: .3125em 0;
  169. font-weight: 200;
  170. border: 1px solid transparent;
  171. }
  172. .picker__day--today {
  173. position: relative;
  174. }
  175. .picker__day--today:before {
  176. content: " ";
  177. position: absolute;
  178. top: 2px;
  179. right: 2px;
  180. width: 0;
  181. height: 0;
  182. border-top: 0.5em solid #0059bc;
  183. border-left: .5em solid transparent;
  184. }
  185. .picker__day--disabled:before {
  186. border-top-color: #aaa;
  187. }
  188. .picker__day--outfocus {
  189. color: #ddd;
  190. }
  191. .picker__day--infocus:hover,
  192. .picker__day--outfocus:hover {
  193. cursor: pointer;
  194. color: #000;
  195. background: #b1dcfb;
  196. }
  197. .picker__day--highlighted {
  198. border-color: #0089ec;
  199. }
  200. .picker__day--highlighted:hover,
  201. .picker--focused .picker__day--highlighted {
  202. cursor: pointer;
  203. color: #000;
  204. background: #b1dcfb;
  205. }
  206. .picker__day--selected,
  207. .picker__day--selected:hover,
  208. .picker--focused .picker__day--selected {
  209. background: #0089ec;
  210. color: #fff;
  211. }
  212. .picker__day--disabled,
  213. .picker__day--disabled:hover,
  214. .picker--focused .picker__day--disabled {
  215. background: #f5f5f5;
  216. border-color: #f5f5f5;
  217. color: #ddd;
  218. cursor: default;
  219. }
  220. .picker__day--highlighted.picker__day--disabled,
  221. .picker__day--highlighted.picker__day--disabled:hover {
  222. background: #bbb;
  223. }
  224. /**
  225. * The footer containing the "today", "clear", and "close" buttons.
  226. */
  227. .picker__footer {
  228. text-align: center;
  229. }
  230. .picker__button--today,
  231. .picker__button--clear,
  232. .picker__button--close {
  233. border: 1px solid #fff;
  234. background: #fff;
  235. font-size: .8em;
  236. padding: .66em 0;
  237. font-weight: bold;
  238. width: 33%;
  239. display: inline-block;
  240. vertical-align: bottom;
  241. }
  242. .picker__button--today:hover,
  243. .picker__button--clear:hover,
  244. .picker__button--close:hover {
  245. cursor: pointer;
  246. color: #000;
  247. background: #b1dcfb;
  248. border-bottom-color: #b1dcfb;
  249. }
  250. .picker__button--today:focus,
  251. .picker__button--clear:focus,
  252. .picker__button--close:focus {
  253. background: #b1dcfb;
  254. border-color: #0089ec;
  255. outline: none;
  256. }
  257. .picker__button--today:before,
  258. .picker__button--clear:before,
  259. .picker__button--close:before {
  260. position: relative;
  261. display: inline-block;
  262. height: 0;
  263. }
  264. .picker__button--today:before,
  265. .picker__button--clear:before {
  266. content: " ";
  267. margin-right: .45em;
  268. }
  269. .picker__button--today:before {
  270. top: -0.05em;
  271. width: 0;
  272. border-top: 0.66em solid #0059bc;
  273. border-left: .66em solid transparent;
  274. }
  275. .picker__button--clear:before {
  276. top: -0.25em;
  277. width: .66em;
  278. border-top: 3px solid #e20;
  279. }
  280. .picker__button--close:before {
  281. content: "\D7";
  282. top: -0.1em;
  283. vertical-align: top;
  284. font-size: 1.1em;
  285. margin-right: .35em;
  286. color: #777;
  287. }
  288. .picker__button--today[disabled],
  289. .picker__button--today[disabled]:hover {
  290. background: #f5f5f5;
  291. border-color: #f5f5f5;
  292. color: #ddd;
  293. cursor: default;
  294. }
  295. .picker__button--today[disabled]:before {
  296. border-top-color: #aaa;
  297. }
  298. /* ==========================================================================
  299. $CLASSIC-DATE-PICKER
  300. ========================================================================== */