source: trip-planner-front/node_modules/angular-material/modules/closure/datepicker/datepicker.css@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 8.0 KB
Line 
1/*!
2 * AngularJS Material Design
3 * https://github.com/angular/material
4 * @license MIT
5 * v1.2.3
6 */
7/** Styles for mdCalendar. */
8md-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. */
116md-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
267md-datepicker[disabled] .md-datepicker-input-container {
268 border-bottom-color: transparent; }
269
270md-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); }
Note: See TracBrowser for help on using the repository browser.