1 | /*!
|
---|
2 | * AngularJS Material Design
|
---|
3 | * https://github.com/angular/material
|
---|
4 | * @license MIT
|
---|
5 | * v1.2.3
|
---|
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 |
|
---|
15 | .md-calendar-scroll-mask {
|
---|
16 | display: inline-block;
|
---|
17 | overflow: hidden;
|
---|
18 | height: 308px; }
|
---|
19 | .md-calendar-scroll-mask .md-virtual-repeat-scroller {
|
---|
20 | overflow-y: scroll;
|
---|
21 | -webkit-overflow-scrolling: touch; }
|
---|
22 | .md-calendar-scroll-mask .md-virtual-repeat-scroller::-webkit-scrollbar {
|
---|
23 | display: none; }
|
---|
24 | .md-calendar-scroll-mask .md-virtual-repeat-offsetter {
|
---|
25 | width: 100%; }
|
---|
26 |
|
---|
27 | .md-calendar-scroll-container {
|
---|
28 | box-shadow: inset -3px 3px 6px rgba(0, 0, 0, 0.2);
|
---|
29 | display: inline-block;
|
---|
30 | height: 308px;
|
---|
31 | width: 346px; }
|
---|
32 |
|
---|
33 | .md-calendar-date {
|
---|
34 | height: 44px;
|
---|
35 | width: 44px;
|
---|
36 | text-align: center;
|
---|
37 | padding: 0;
|
---|
38 | border: none;
|
---|
39 | box-sizing: content-box; }
|
---|
40 | .md-calendar-date:first-child {
|
---|
41 | padding-left: 16px; }
|
---|
42 | [dir=rtl] .md-calendar-date:first-child {
|
---|
43 | padding-left: 0;
|
---|
44 | padding-right: 16px; }
|
---|
45 | .md-calendar-date:last-child {
|
---|
46 | padding-right: 16px; }
|
---|
47 | [dir=rtl] .md-calendar-date:last-child {
|
---|
48 | padding-right: 0;
|
---|
49 | padding-left: 16px; }
|
---|
50 | .md-calendar-date.md-calendar-date-disabled {
|
---|
51 | cursor: default; }
|
---|
52 |
|
---|
53 | .md-calendar-date-selection-indicator {
|
---|
54 | transition: background-color, color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
---|
55 | border-radius: 50%;
|
---|
56 | display: inline-block;
|
---|
57 | width: 40px;
|
---|
58 | height: 40px;
|
---|
59 | line-height: 40px; }
|
---|
60 | .md-calendar-date:not(.md-disabled) .md-calendar-date-selection-indicator {
|
---|
61 | cursor: pointer; }
|
---|
62 |
|
---|
63 | .md-calendar-month-label {
|
---|
64 | height: 44px;
|
---|
65 | font-size: 14px;
|
---|
66 | font-weight: 500;
|
---|
67 | padding: 0 0 0 24px; }
|
---|
68 | [dir=rtl] .md-calendar-month-label {
|
---|
69 | padding: 0 24px 0 0; }
|
---|
70 | .md-calendar-month-label.md-calendar-label-clickable {
|
---|
71 | cursor: pointer; }
|
---|
72 | .md-calendar-month-label md-icon {
|
---|
73 | transform: rotate(180deg); }
|
---|
74 | [dir=rtl] .md-calendar-month-label md-icon {
|
---|
75 | transform: none; }
|
---|
76 | .md-calendar-month-label span {
|
---|
77 | vertical-align: middle; }
|
---|
78 |
|
---|
79 | .md-calendar-day-header {
|
---|
80 | table-layout: fixed;
|
---|
81 | border-spacing: 0;
|
---|
82 | border-collapse: collapse; }
|
---|
83 | .md-calendar-day-header th {
|
---|
84 | height: 40px;
|
---|
85 | width: 44px;
|
---|
86 | text-align: center;
|
---|
87 | padding: 0;
|
---|
88 | border: none;
|
---|
89 | box-sizing: content-box;
|
---|
90 | font-weight: normal; }
|
---|
91 | .md-calendar-day-header th:first-child {
|
---|
92 | padding-left: 16px; }
|
---|
93 | [dir=rtl] .md-calendar-day-header th:first-child {
|
---|
94 | padding-left: 0;
|
---|
95 | padding-right: 16px; }
|
---|
96 | .md-calendar-day-header th:last-child {
|
---|
97 | padding-right: 16px; }
|
---|
98 | [dir=rtl] .md-calendar-day-header th:last-child {
|
---|
99 | padding-right: 0;
|
---|
100 | padding-left: 16px; }
|
---|
101 |
|
---|
102 | .md-calendar {
|
---|
103 | table-layout: fixed;
|
---|
104 | border-spacing: 0;
|
---|
105 | border-collapse: collapse; }
|
---|
106 | .md-calendar tr:last-child td {
|
---|
107 | border-bottom-width: 1px;
|
---|
108 | border-bottom-style: solid; }
|
---|
109 | .md-calendar:first-child {
|
---|
110 | border-top: 1px solid transparent; }
|
---|
111 | .md-calendar tbody, .md-calendar td, .md-calendar tr {
|
---|
112 | vertical-align: middle;
|
---|
113 | box-sizing: content-box; }
|
---|
114 |
|
---|
115 | /** Styles for mdDatepicker. */
|
---|
116 | md-datepicker {
|
---|
117 | white-space: nowrap;
|
---|
118 | overflow: hidden;
|
---|
119 | vertical-align: middle; }
|
---|
120 |
|
---|
121 | .md-inline-form md-datepicker {
|
---|
122 | margin-top: 12px; }
|
---|
123 |
|
---|
124 | .md-datepicker-button {
|
---|
125 | display: inline-block;
|
---|
126 | box-sizing: border-box;
|
---|
127 | background: none;
|
---|
128 | vertical-align: middle;
|
---|
129 | position: relative; }
|
---|
130 | .md-datepicker-button:before {
|
---|
131 | top: 0;
|
---|
132 | left: 0;
|
---|
133 | bottom: 0;
|
---|
134 | right: 0;
|
---|
135 | position: absolute;
|
---|
136 | content: '';
|
---|
137 | speak: none; }
|
---|
138 |
|
---|
139 | .md-datepicker-input {
|
---|
140 | font-size: 14px;
|
---|
141 | box-sizing: border-box;
|
---|
142 | border: none;
|
---|
143 | box-shadow: none;
|
---|
144 | outline: none;
|
---|
145 | background: transparent;
|
---|
146 | min-width: 120px;
|
---|
147 | max-width: 328px;
|
---|
148 | padding: 0 0 5px; }
|
---|
149 | .md-datepicker-input::-ms-clear {
|
---|
150 | display: none; }
|
---|
151 |
|
---|
152 | ._md-datepicker-floating-label > md-datepicker {
|
---|
153 | overflow: visible; }
|
---|
154 | ._md-datepicker-floating-label > md-datepicker .md-datepicker-input-container {
|
---|
155 | border: none; }
|
---|
156 | ._md-datepicker-floating-label > md-datepicker .md-datepicker-button {
|
---|
157 | float: left;
|
---|
158 | margin-top: -16px;
|
---|
159 | top: 13.5px; }
|
---|
160 | [dir=rtl] ._md-datepicker-floating-label > md-datepicker .md-datepicker-button {
|
---|
161 | float: right; }
|
---|
162 |
|
---|
163 | ._md-datepicker-floating-label .md-input {
|
---|
164 | float: none; }
|
---|
165 |
|
---|
166 | ._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) {
|
---|
167 | right: 18px;
|
---|
168 | left: auto;
|
---|
169 | width: calc(100% - 84px); }
|
---|
170 | [dir=rtl] ._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) {
|
---|
171 | right: auto; }
|
---|
172 | [dir=rtl] ._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) {
|
---|
173 | left: 18px; }
|
---|
174 |
|
---|
175 | ._md-datepicker-floating-label._md-datepicker-has-calendar-icon .md-input-message-animation {
|
---|
176 | margin-left: 64px; }
|
---|
177 | [dir=rtl] ._md-datepicker-floating-label._md-datepicker-has-calendar-icon .md-input-message-animation {
|
---|
178 | margin-left: auto;
|
---|
179 | margin-right: 64px; }
|
---|
180 |
|
---|
181 | ._md-datepicker-has-triangle-icon {
|
---|
182 | padding-right: 18px;
|
---|
183 | margin-right: -18px; }
|
---|
184 | [dir=rtl] ._md-datepicker-has-triangle-icon {
|
---|
185 | padding-right: 0;
|
---|
186 | padding-left: 18px; }
|
---|
187 | [dir=rtl] ._md-datepicker-has-triangle-icon {
|
---|
188 | margin-right: auto;
|
---|
189 | margin-left: -18px; }
|
---|
190 |
|
---|
191 | .md-datepicker-input-container {
|
---|
192 | position: relative;
|
---|
193 | border-bottom-width: 1px;
|
---|
194 | border-bottom-style: solid;
|
---|
195 | display: inline-block;
|
---|
196 | width: auto; }
|
---|
197 | .md-icon-button + .md-datepicker-input-container {
|
---|
198 | margin-left: 12px; }
|
---|
199 | [dir=rtl] .md-icon-button + .md-datepicker-input-container {
|
---|
200 | margin-left: auto;
|
---|
201 | margin-right: 12px; }
|
---|
202 | .md-datepicker-input-container.md-datepicker-focused {
|
---|
203 | border-bottom-width: 2px; }
|
---|
204 |
|
---|
205 | .md-datepicker-is-showing .md-scroll-mask {
|
---|
206 | z-index: 99; }
|
---|
207 |
|
---|
208 | .md-datepicker-calendar-pane {
|
---|
209 | position: absolute;
|
---|
210 | top: 0;
|
---|
211 | left: -100%;
|
---|
212 | z-index: 100;
|
---|
213 | border-width: 1px;
|
---|
214 | border-style: solid;
|
---|
215 | background: transparent;
|
---|
216 | transform: scale(0);
|
---|
217 | transform-origin: 0 0;
|
---|
218 | transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
|
---|
219 | .md-datepicker-calendar-pane.md-pane-open {
|
---|
220 | transform: scale(1); }
|
---|
221 |
|
---|
222 | .md-datepicker-input-mask {
|
---|
223 | height: 40px;
|
---|
224 | width: 340px;
|
---|
225 | position: relative;
|
---|
226 | overflow: hidden;
|
---|
227 | background: transparent;
|
---|
228 | pointer-events: none;
|
---|
229 | cursor: text; }
|
---|
230 |
|
---|
231 | .md-datepicker-calendar {
|
---|
232 | opacity: 0;
|
---|
233 | transition: opacity 0.2s cubic-bezier(0.5, 0, 0.25, 1); }
|
---|
234 | .md-pane-open .md-datepicker-calendar {
|
---|
235 | opacity: 1; }
|
---|
236 | .md-datepicker-calendar md-calendar:focus {
|
---|
237 | outline: none; }
|
---|
238 |
|
---|
239 | .md-datepicker-expand-triangle {
|
---|
240 | position: absolute;
|
---|
241 | top: 50%;
|
---|
242 | left: 50%;
|
---|
243 | transform: translate(-50%, -50%);
|
---|
244 | width: 0;
|
---|
245 | height: 0;
|
---|
246 | border-left: 5px solid transparent;
|
---|
247 | border-right: 5px solid transparent;
|
---|
248 | border-top: 5px solid; }
|
---|
249 |
|
---|
250 | .md-datepicker-triangle-button {
|
---|
251 | position: absolute;
|
---|
252 | right: 0;
|
---|
253 | bottom: -2.5px;
|
---|
254 | transform: translateX(45%); }
|
---|
255 | [dir=rtl] .md-datepicker-triangle-button {
|
---|
256 | right: auto;
|
---|
257 | left: 0; }
|
---|
258 | [dir=rtl] .md-datepicker-triangle-button {
|
---|
259 | transform: translateX(-45%); }
|
---|
260 |
|
---|
261 | .md-datepicker-triangle-button.md-button.md-icon-button {
|
---|
262 | height: 36px;
|
---|
263 | width: 36px;
|
---|
264 | position: absolute;
|
---|
265 | padding: 8px; }
|
---|
266 |
|
---|
267 | md-datepicker[disabled] .md-datepicker-input-container {
|
---|
268 | border-bottom-color: transparent; }
|
---|
269 |
|
---|
270 | md-datepicker[disabled] .md-datepicker-triangle-button {
|
---|
271 | display: none; }
|
---|
272 |
|
---|
273 | .md-datepicker-open {
|
---|
274 | overflow: hidden; }
|
---|
275 | .md-datepicker-open .md-datepicker-input-container,
|
---|
276 | .md-datepicker-open input.md-input {
|
---|
277 | border-bottom-color: transparent; }
|
---|
278 | .md-datepicker-open .md-datepicker-triangle-button,
|
---|
279 | .md-datepicker-open.md-input-has-value > label,
|
---|
280 | .md-datepicker-open.md-input-has-placeholder > label {
|
---|
281 | display: none; }
|
---|
282 |
|
---|
283 | .md-datepicker-pos-adjusted .md-datepicker-input-mask {
|
---|
284 | display: none; }
|
---|
285 |
|
---|
286 | .md-datepicker-calendar-pane .md-calendar {
|
---|
287 | transform: translateY(-85px);
|
---|
288 | transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
|
---|
289 | transition-delay: 0.125s; }
|
---|
290 |
|
---|
291 | .md-datepicker-calendar-pane.md-pane-open .md-calendar {
|
---|
292 | transform: translateY(0); }
|
---|