calendar.css 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. .ui-calendar {
  2. position: relative;
  3. display: inline-block;
  4. }
  5. .ui-calendar .ui-calendar-button {
  6. height: 100%;
  7. border-top-left-radius: 0px;
  8. border-bottom-left-radius: 0px;
  9. width: 2em;
  10. border-left: 0 none;
  11. }
  12. .ui-calendar .ui-calendar-button:enabled:hover,
  13. .ui-calendar .ui-calendar-button:focus {
  14. border-left: 0 none;
  15. }
  16. .ui-calendar .ui-datepicker {
  17. min-width: 100%;
  18. }
  19. /* Fluid */
  20. .ui-fluid .ui-calendar {
  21. width: 100%;
  22. }
  23. .ui-fluid .ui-calendar-button {
  24. width: 2em;
  25. }
  26. .ui-fluid .ui-datepicker-buttonbar button {
  27. width: auto;
  28. }
  29. .ui-fluid .ui-calendar.ui-calendar-w-btn .ui-inputtext {
  30. width: calc(100% - 2em);
  31. }
  32. /* Datepicker */
  33. .ui-datepicker {
  34. width: auto;
  35. padding: .2em;
  36. position: absolute;
  37. }
  38. .ui-datepicker.ui-datepicker-inline {
  39. display: inline-block;
  40. position: static;
  41. }
  42. .ui-datepicker .ui-datepicker-group {
  43. border-left-width: 0;
  44. border-right-width: 0;
  45. border-top-width: 0;
  46. border-bottom-width: 0;
  47. }
  48. /* Header */
  49. .ui-datepicker .ui-datepicker-header {
  50. position: relative;
  51. padding: .5em 0;
  52. }
  53. .ui-datepicker .ui-datepicker-prev,
  54. .ui-datepicker .ui-datepicker-next {
  55. position: absolute;
  56. top: .5em;
  57. width: 1.8em;
  58. height: 1.8em;
  59. }
  60. .ui-datepicker .ui-datepicker-prev {
  61. left: .125em;
  62. }
  63. .ui-datepicker .ui-datepicker-next {
  64. right: .125em;
  65. }
  66. .ui-datepicker .ui-datepicker-prev span,
  67. .ui-datepicker .ui-datepicker-next span {
  68. display: block;
  69. position: absolute;
  70. left: 50%;
  71. top: 50%;
  72. margin-top: -.5em;
  73. margin-left: -.5em;
  74. }
  75. .ui-datepicker .ui-datepicker-title {
  76. margin: 0 2.3em;
  77. line-height: 1.8em;
  78. text-align: center;
  79. }
  80. .ui-datepicker .ui-datepicker-title select {
  81. font-size: 1em;
  82. margin: .125em 0;
  83. vertical-align: middle;
  84. }
  85. .ui-datepicker select.ui-datepicker-month {
  86. margin-right: .25em;
  87. }
  88. .ui-datepicker span.ui-datepicker-year {
  89. margin-left: .25em;
  90. }
  91. /* Multiple Month DatePicker */
  92. .ui-datepicker-multiple-month .ui-datepicker-group {
  93. display: table-cell;
  94. border-left-width: 0;
  95. border-top-width: 0;
  96. border-bottom-width: 0;
  97. border-right-width: 1px;
  98. }
  99. /* DatePicker Table */
  100. .ui-datepicker table {
  101. width: 100%;
  102. font-size: .9em;
  103. border-collapse: collapse;
  104. margin: 0 0 .4em;
  105. }
  106. .ui-datepicker th {
  107. padding: .5em;
  108. text-align: center;
  109. font-weight: bold;
  110. border: 0;
  111. }
  112. .ui-datepicker td {
  113. border: 0;
  114. padding: 0;
  115. }
  116. .ui-datepicker td > span,
  117. .ui-datepicker td > a {
  118. display: block;
  119. padding: .5em;
  120. text-decoration: none;
  121. border: 0 none;
  122. text-align: center;
  123. }
  124. .ui-datepicker .ui-datepicker-buttonbar {
  125. border-left: 0 none;
  126. border-right: 0 none;
  127. border-bottom: 0 none;
  128. padding: .5em;
  129. }
  130. .ui-datepicker .ui-datepicker-buttonbar > .ui-g > div:last-child {
  131. text-align: right;
  132. }
  133. .ui-datepicker .ui-datepicker-buttonbar > .ui-g > div {
  134. padding: 0;
  135. }
  136. .ui-calendar.ui-calendar-w-btn input {
  137. -moz-border-radius-topright: 0px;
  138. -webkit-border-top-right-radius: 0px;
  139. -khtml-border-top-right-radius: 0px;
  140. border-top-right-radius: 0px;
  141. -moz-border-radius-bottomright: 0px;
  142. -webkit-border-bottom-right-radius: 0px;
  143. -khtml-border-bottom-right-radius: 0px;
  144. border-bottom-right-radius: 0px;
  145. }
  146. /* Month Picker */
  147. .ui-monthpicker .ui-monthpicker-month {
  148. width: 33.3%;
  149. display: inline-block;
  150. text-align: center;
  151. padding: .5em;
  152. cursor: pointer;
  153. }
  154. .ui-datepicker-monthpicker select.ui-datepicker-year {
  155. width: auto;
  156. }
  157. /* Time Picker */
  158. .ui-timepicker {
  159. text-align: center;
  160. padding: .5em 0;
  161. }
  162. .ui-timepicker > div {
  163. display: inline-block;
  164. margin-left: .5em;
  165. min-width: 1.5em;
  166. }
  167. .ui-timepicker > .ui-minute-picker,
  168. .ui-timepicker > .ui-second-picker {
  169. margin-left: 0;
  170. }
  171. .ui-timepicker > .ui-separator {
  172. margin-left: 0px;
  173. min-width: .75em;
  174. }
  175. .ui-timepicker > .ui-separator a {
  176. visibility: hidden;
  177. }
  178. .ui-timepicker > div a {
  179. display: block;
  180. opacity: 0.7;
  181. filter:Alpha(Opacity=70);
  182. cursor: pointer;
  183. }
  184. .ui-timepicker > div a:last-child {
  185. margin-top: .3em;
  186. }
  187. .ui-timepicker > div a:hover {
  188. display: block;
  189. opacity: 1;
  190. filter:Alpha(Opacity=100);
  191. }
  192. input[type=text]::-ms-clear {
  193. display: none;
  194. }
  195. /* Touch UI */
  196. .ui-datepicker-touch-ui,
  197. .ui-calendar .ui-datepicker-touch-ui {
  198. position: fixed;
  199. top: 50%;
  200. left: 50%;
  201. min-width: 80vw;
  202. }
  203. .ui-datepicker-touch-ui.ui-datepicker th {
  204. padding: 2em 0;
  205. }
  206. .ui-datepicker-touch-ui.ui-datepicker td {
  207. padding: 0;
  208. }
  209. .ui-datepicker-touch-ui.ui-datepicker td > span,
  210. .ui-datepicker-touch-ui.ui-datepicker td > a {
  211. padding: 2em 0;
  212. }
  213. .ui-datepicker-touch-ui .ui-timepicker {
  214. padding: 1em 0;
  215. }
  216. .ui-datepicker-touch-ui .ui-timepicker > div a {
  217. font-size: 2em;
  218. }
  219. .ui-datepicker-mask {
  220. position: fixed;
  221. width: 100%;
  222. height: 100%;
  223. }
  224. @media screen and (max-width: 40em) {
  225. .ui-datepicker-multiple-month {
  226. width: 17em;
  227. overflow: auto;
  228. }
  229. .ui-datepicker-touch-ui.ui-datepicker th {
  230. padding: 1em 0;
  231. }
  232. .ui-datepicker-touch-ui.ui-datepicker td span,
  233. .ui-datepicker-touch-ui.ui-datepicker td a {
  234. padding: 1em 0;
  235. }
  236. }