calendar.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. .calendar {
  2. width: 280px;
  3. height: 330px;
  4. }
  5. .calendar-modal {
  6. display: none;
  7. position: absolute;
  8. background: #fdfdfd;
  9. border: 1px solid #e8e8e8;
  10. box-shadow: 1px 2px 3px #ddd
  11. }
  12. .calendar-inner {
  13. position: relative;
  14. z-index: 1;
  15. -webkit-perspective: 1000;
  16. -moz-perspective: 1000;
  17. -ms-perspective: 1000;
  18. perspective: 1000;
  19. -ms-transform: perspective(1000px);
  20. -moz-transform: perspective(1000px);
  21. -moz-transform-style: preserve-3d;
  22. -ms-transform-style: preserve-3d;
  23. }
  24. .calendar-views {
  25. transform-style: preserve-3d;
  26. }
  27. .calendar .view {
  28. backface-visibility: hidden;
  29. position: absolute;
  30. top: 0;
  31. left: 0;
  32. *overflow: hidden;
  33. -webkit-transition: .6s;
  34. transition: .6s;
  35. }
  36. .calendar-d .view-month,
  37. .calendar-m .view-date {
  38. transform: rotateY(180deg);
  39. visibility: hidden;
  40. z-index: 1;
  41. }
  42. .calendar-d .view-date,
  43. .calendar-m .view-month {
  44. transform: rotateY(0deg);
  45. visibility: visible;
  46. z-index: 2;
  47. }
  48. .calendar-ct,
  49. .calendar-hd,
  50. .calendar-views .week,
  51. .calendar-views .days {
  52. overflow: hidden;
  53. }
  54. .calendar-views {
  55. width: 100%;
  56. }
  57. .calendar .view,
  58. .calendar-display,
  59. .calendar-arrow .prev,
  60. .calendar .date-items li {
  61. float: left;
  62. }
  63. .calendar-arrow,
  64. .calendar-arrow .next {
  65. float: right;
  66. }
  67. .calendar-hd {
  68. /*padding: 10px 0;
  69. height: 30px;
  70. line-height: 30px;*/
  71. text-align: center;
  72. }
  73. .calendar-hd > a {
  74. text-decoration: none;
  75. }
  76. .calendar-display {
  77. font-size: 22px;
  78. text-indent: 10px;
  79. }
  80. .view-month .calendar-hd {
  81. padding: 10px;
  82. }
  83. .calendar-arrow,
  84. .calendar-display {
  85. color: #ddd;
  86. }
  87. .calendar li[disabled] {
  88. color: #bbb;
  89. }
  90. .calendar li.old[disabled],
  91. .calendar li.new-day[disabled] {
  92. color: #eee;
  93. }
  94. .calendar-display .m,
  95. .calendar-views .week,
  96. .calendar-views .days .old,
  97. .calendar-views .days .new-day,
  98. .calendar-display:hover,
  99. .calendar-arrow span:hover {
  100. color: #888;
  101. }
  102. .calendar-arrow span,
  103. .calendar-views .days li[data-calendar-day],
  104. .calendar-views .view-month li[data-calendar-month] {
  105. cursor: pointer;
  106. }
  107. .calendar li[disabled] {
  108. cursor: not-allowed;
  109. }
  110. .calendar-arrow {
  111. width: 50px;
  112. margin-right: 10px;
  113. }
  114. .calendar-arrow span {
  115. font: 500 20px sans-serif;
  116. }
  117. .calendar ol li {
  118. position: relative;
  119. float: left;
  120. text-align: center;
  121. /* border-radius: 50%;*/
  122. }
  123. .calendar .week li,
  124. .calendar .days li {
  125. width: 40px;
  126. height: 40px;
  127. line-height: 40px;
  128. }
  129. .calendar .month-items li {
  130. width: 70px;
  131. height: 70px;
  132. line-height: 70px;
  133. }
  134. .calendar .days li[data-calendar-day]:hover,
  135. .calendar .view-month li[data-calendar-month]:hover {
  136. background: #eee;
  137. }
  138. .calendar .calendar-views .now {
  139. color: #fff;
  140. background: #b9b1b0 !important;
  141. }
  142. .calendar .calendar-views .selected {
  143. color: #F44336;
  144. background: #bbb3b2 !important;
  145. }
  146. .calendar .calendar-views .dot {
  147. position: absolute;
  148. left: 50%;
  149. bottom: 4px;
  150. margin-left: -2px;
  151. width: 4px;
  152. height: 4px;
  153. background: #F44336;
  154. /*rder-radius: 50%;*/
  155. }
  156. .calendar-views .now .dot {
  157. background: #fff;
  158. }
  159. .calendar .date-items {
  160. width: 300%;
  161. margin-left: -100%;
  162. }
  163. .calendar-label {
  164. display: none;
  165. position: absolute;
  166. top: 50%;
  167. left: 50%;
  168. z-index: 200;
  169. padding: 5px 10px;
  170. line-height: 22px;
  171. color: #fff;
  172. background: #000;
  173. border-radius: 3px;
  174. opacity: .7;
  175. filter: alpha(opacity=70);
  176. }
  177. .calendar-label i {
  178. display: none;
  179. position: absolute;
  180. left: 50%;
  181. bottom: -12px;
  182. width: 0;
  183. height: 0;
  184. margin-left: -3px;
  185. border: 6px solid transparent;
  186. border-top-color: #000;
  187. }
  188. .calendar-arrow-left {
  189. width: 20px !important;
  190. float: left;
  191. margin-left: 35px;
  192. margin-right: 0px;
  193. }
  194. .calendar-arrow-right {
  195. width: 20px !important;
  196. float: right;
  197. margin-right: 35px !important;
  198. }
  199. .calendar-display-center {
  200. float: none !important;
  201. text-align: center;
  202. }