datepicker.css 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. /** Styles for mdCalendar. */
  8. md-calendar {
  9. font-size: 13px;
  10. -webkit-user-select: none;
  11. -moz-user-select: none;
  12. -ms-user-select: none;
  13. user-select: none; }
  14. .md-calendar-scroll-mask {
  15. display: inline-block;
  16. overflow: hidden;
  17. height: 308px; }
  18. .md-calendar-scroll-mask .md-virtual-repeat-scroller {
  19. overflow-y: scroll;
  20. -webkit-overflow-scrolling: touch; }
  21. .md-calendar-scroll-mask .md-virtual-repeat-scroller::-webkit-scrollbar {
  22. display: none; }
  23. .md-calendar-scroll-mask .md-virtual-repeat-offsetter {
  24. width: 100%; }
  25. .md-calendar-scroll-container {
  26. box-shadow: inset -3px 3px 6px rgba(0, 0, 0, 0.2);
  27. display: inline-block;
  28. height: 308px;
  29. width: 346px; }
  30. .md-calendar-date {
  31. height: 44px;
  32. width: 44px;
  33. text-align: center;
  34. padding: 0;
  35. border: none; }
  36. .md-calendar-date:first-child {
  37. padding-left: 16px; }
  38. .md-calendar-date:last-child {
  39. padding-right: 16px; }
  40. .md-calendar-date.md-calendar-date-disabled {
  41. cursor: default; }
  42. .md-calendar-date-selection-indicator {
  43. transition: background-color, color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  44. border-radius: 50%;
  45. display: inline-block;
  46. width: 40px;
  47. height: 40px;
  48. line-height: 40px; }
  49. .md-calendar-date:not(.md-disabled) .md-calendar-date-selection-indicator {
  50. cursor: pointer; }
  51. .md-calendar-month-label {
  52. height: 44px;
  53. font-size: 14px;
  54. font-weight: 500;
  55. padding: 0 0 0 24px; }
  56. .md-calendar-day-header {
  57. table-layout: fixed;
  58. border-spacing: 0;
  59. border-collapse: collapse; }
  60. .md-calendar-day-header th {
  61. height: 44px;
  62. width: 44px;
  63. text-align: center;
  64. padding: 0;
  65. border: none;
  66. font-weight: normal;
  67. height: 40px; }
  68. .md-calendar-day-header th:first-child {
  69. padding-left: 16px; }
  70. .md-calendar-day-header th:last-child {
  71. padding-right: 16px; }
  72. .md-calendar {
  73. table-layout: fixed;
  74. border-spacing: 0;
  75. border-collapse: collapse; }
  76. .md-calendar tr:last-child td {
  77. border-bottom-width: 1px;
  78. border-bottom-style: solid; }
  79. .md-calendar:first-child {
  80. border-top: 1px solid transparent; }
  81. /** Styles for mdDatepicker. */
  82. md-datepicker {
  83. white-space: nowrap; }
  84. .md-datepicker-button {
  85. display: inline-block;
  86. box-sizing: border-box;
  87. background: none; }
  88. .md-datepicker-input {
  89. font-size: 14px;
  90. box-sizing: border-box;
  91. border: none;
  92. box-shadow: none;
  93. outline: none;
  94. background: transparent;
  95. min-width: 120px;
  96. max-width: 328px; }
  97. .md-datepicker-input::-ms-clear {
  98. display: none; }
  99. .md-datepicker-input-container {
  100. position: relative;
  101. padding-bottom: 5px;
  102. border-bottom-width: 1px;
  103. border-bottom-style: solid;
  104. display: inline-block;
  105. width: auto;
  106. margin-left: 12px; }
  107. .md-datepicker-input-container.md-datepicker-focused {
  108. border-bottom-width: 2px; }
  109. .md-datepicker-calendar-pane {
  110. position: absolute;
  111. top: 0;
  112. left: 0;
  113. z-index: 99;
  114. border-width: 1px;
  115. border-style: solid;
  116. background: transparent;
  117. -webkit-transform: scale(0);
  118. transform: scale(0);
  119. -webkit-transform-origin: 0 0;
  120. transform-origin: 0 0;
  121. transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  122. transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
  123. .md-datepicker-calendar-pane.md-pane-open {
  124. -webkit-transform: scale(1);
  125. transform: scale(1); }
  126. .md-datepicker-input-mask {
  127. height: 40px;
  128. width: 340px;
  129. position: relative;
  130. background: transparent;
  131. pointer-events: none;
  132. cursor: text; }
  133. .md-datepicker-input-mask-opaque {
  134. position: absolute;
  135. right: 0;
  136. left: 120px;
  137. height: 100%; }
  138. .md-datepicker-calendar {
  139. opacity: 0;
  140. transition: opacity 0.2s cubic-bezier(0.5, 0, 0.25, 1); }
  141. .md-pane-open .md-datepicker-calendar {
  142. opacity: 1; }
  143. .md-datepicker-calendar md-calendar:focus {
  144. outline: none; }
  145. .md-datepicker-expand-triangle {
  146. position: absolute;
  147. top: 50%;
  148. left: 50%;
  149. -webkit-transform: translate(-50%, -50%);
  150. transform: translate(-50%, -50%);
  151. width: 0;
  152. height: 0;
  153. border-left: 5px solid transparent;
  154. border-right: 5px solid transparent;
  155. border-top: 5px solid; }
  156. .md-datepicker-triangle-button {
  157. position: absolute;
  158. right: 0;
  159. top: 0;
  160. -webkit-transform: translateY(-25%) translateX(45%);
  161. transform: translateY(-25%) translateX(45%); }
  162. .md-datepicker-triangle-button.md-button.md-icon-button {
  163. height: 100%;
  164. width: 36px;
  165. position: absolute; }
  166. md-datepicker[disabled] .md-datepicker-input-container {
  167. border-bottom-color: transparent; }
  168. md-datepicker[disabled] .md-datepicker-triangle-button {
  169. display: none; }
  170. .md-datepicker-open .md-datepicker-input-container {
  171. margin-left: -12px;
  172. border: none; }
  173. .md-datepicker-open .md-datepicker-input {
  174. margin-left: 24px;
  175. height: 40px; }
  176. .md-datepicker-open .md-datepicker-triangle-button {
  177. display: none; }
  178. .md-datepicker-pos-adjusted .md-datepicker-input-mask {
  179. display: none; }
  180. .md-datepicker-calendar-pane .md-calendar {
  181. -webkit-transform: translateY(-85px);
  182. transform: translateY(-85px);
  183. transition: -webkit-transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
  184. transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
  185. transition-delay: 0.125s; }
  186. .md-datepicker-calendar-pane.md-pane-open .md-calendar {
  187. -webkit-transform: translateY(0);
  188. transform: translateY(0); }