commonroutesApp/www/lib/angular-material/modules/scss/angular-material.scss
www/lib/angular-material/modules/scss/angular-material.scssRaw
1// Function
2//-- Must be defined before variables
3@function rem($multiplier) {
4 $font-size: 10px;
5 @return $multiplier * $font-size;
6}
7
8// Typography
9// ------------------------------
10$font-family: Roboto, 'Helvetica Neue', sans-serif !default;
11$font-size: 10px !default;
12
13$display-4-font-size-base: rem(11.20) !default;
14$display-3-font-size-base: rem(5.600) !default;
15$display-2-font-size-base: rem(4.500) !default;
16$display-1-font-size-base: rem(3.400) !default;
17$headline-font-size-base: rem(2.400) !default;
18$title-font-size-base: rem(2.000) !default;
19$subhead-font-size-base: rem(1.600) !default;
20
21$body-font-size-base: rem(1.400) !default;
22$caption-font-size-base: rem(1.200) !default;
23
24// Layout
25// ------------------------------
26
27$baseline-grid: 8px !default;
28$layout-gutter-width: ($baseline-grid * 2) !default;
29
30$layout-breakpoint-xs: 600px !default;
31$layout-breakpoint-sm: 960px !default;
32$layout-breakpoint-md: 1280px !default;
33$layout-breakpoint-lg: 1920px !default;
34
35// Button
36$button-left-right-padding: rem(0.600) !default;
37
38// Icon
39$icon-size: rem(2.400) !default;
40
41// App bar variables
42$app-bar-height: 64px !default;
43
44$toast-height: $baseline-grid * 3 !default;
45$toast-margin: $baseline-grid * 1 !default;
46
47// Whiteframes
48
49$shadow-key-umbra-opacity: 0.2 !default;
50$shadow-key-penumbra-opacity: 0.14 !default;
51$shadow-ambient-shadow-opacity: 0.12 !default;
52
53// NOTE(shyndman): gulp-sass seems to be failing if I split the shadow defs across
54// multiple lines. Ugly. Sorry.
55$whiteframe-shadow-1dp: 0px 1px 3px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 1px 1px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 2px 1px -1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
56$whiteframe-shadow-2dp: 0px 1px 5px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 2px 2px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 1px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
57$whiteframe-shadow-3dp: 0px 1px 8px 0px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 3px 4px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 3px -2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
58$whiteframe-shadow-4dp: 0px 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 4px 5px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 10px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
59$whiteframe-shadow-5dp: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 5px 8px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 14px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
60$whiteframe-shadow-6dp: 0px 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 6px 10px 0px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 1px 18px 0px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
61$whiteframe-shadow-7dp: 0px 4px 5px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 7px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 2px 16px 1px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
62$whiteframe-shadow-8dp: 0px 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
63$whiteframe-shadow-9dp: 0px 5px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 9px 12px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 3px 16px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
64$whiteframe-shadow-10dp: 0px 6px 6px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 10px 14px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 4px 18px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
65$whiteframe-shadow-11dp: 0px 6px 7px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 11px 15px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 4px 20px 3px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
66$whiteframe-shadow-12dp: 0px 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 12px 17px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 22px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
67$whiteframe-shadow-13dp: 0px 7px 8px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 13px 19px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 24px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
68$whiteframe-shadow-14dp: 0px 7px 9px -4px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 14px 21px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 5px 26px 4px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
69$whiteframe-shadow-15dp: 0px 8px 9px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 15px 22px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 28px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
70$whiteframe-shadow-16dp: 0px 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
71$whiteframe-shadow-17dp: 0px 8px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 17px 26px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 6px 32px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
72$whiteframe-shadow-18dp: 0px 9px 11px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 18px 28px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 7px 34px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
73$whiteframe-shadow-19dp: 0px 9px 12px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 19px 29px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 7px 36px 6px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
74$whiteframe-shadow-20dp: 0px 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 20px 31px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 38px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
75$whiteframe-shadow-21dp: 0px 10px 13px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 21px 33px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 40px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
76$whiteframe-shadow-22dp: 0px 10px 14px -6px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 22px 35px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 8px 42px 7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
77$whiteframe-shadow-23dp: 0px 11px 14px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 23px 36px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 9px 44px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
78$whiteframe-shadow-24dp: 0px 11px 15px -7px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0px 24px 38px 3px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0px 9px 46px 8px rgba(0, 0, 0, $shadow-ambient-shadow-opacity) !default;
79
80// Z-indexes
81//--------------------------------------------
82
83$z-index-toast: 105 !default;
84$z-index-tooltip: 100 !default;
85$z-index-menu: 100 !default;
86$z-index-calendar-pane: 100 !default;
87$z-index-select: 90 !default;
88$z-index-dialog: 80 !default;
89$z-index-bottom-sheet: 70 !default;
90$z-index-scroll-mask: 50 !default;
91$z-index-scroll-mask-bar: 65 !default;
92$z-index-sidenav: 60 !default;
93$z-index-backdrop: 50 !default;
94$z-index-fab: 20 !default;
95$z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome
96
97// Easing Curves
98//--------------------------------------------
99
100$swift-ease-out-duration: 0.4s !default;
101$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
102$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
103
104$swift-ease-in-duration: 0.3s !default;
105$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
106$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
107
108$swift-ease-in-out-duration: 0.5s !default;
109$swift-ease-in-out-timing-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
110$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
111
112$swift-linear-duration: 0.08s !default;
113$swift-linear-timing-function: linear !default;
114$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
115
116$material-enter-duration: 0.3s;
117$material-enter-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
118$material-enter: all $material-enter-duration $material-enter-timing-function;
119
120$material-leave-duration: 0.3s;
121$material-leave-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
122$material-leave: all $material-leave-duration $material-leave-timing-function;
123
124// Fab Buttons (shared between buttons.scss and fab*.scss)
125// -------------------------------------------
126$button-fab-width: rem(5.600) !default;
127$button-fab-height: rem(5.600) !default;
128$button-fab-padding: rem(1.60) !default;
129
130
131// Shared Checkbox variables
132$checkbox-width: 20px !default;
133$checkbox-height: $checkbox-width !default;
134$checkbox-border-radius: 2px !default;
135$checkbox-border-width: 2px !default;
136
137@mixin margin-selectors($before:1em, $after:1em, $start:0px, $end:0px) {
138 -webkit-margin-before: $before;
139 -webkit-margin-after: $after;
140 -webkit-margin-start: $start;
141 -webkit-margin-end: $end;
142}
143
144@mixin not-selectable($value:none) {
145 -webkit-touch-callout: $value;
146 -webkit-user-select: $value;
147 -khtml-user-select: $value;
148 -moz-user-select: $value;
149 -ms-user-select: $value;
150 user-select: $value;
151}
152
153@mixin input-placeholder-color($color) {
154 $pseudos: '::-webkit-input-placeholder', ':-moz-placeholder', '::-moz-placeholder',
155 ':-ms-input-placeholder', '::-webkit-input-placeholder';
156
157 // It is important to export every pseudo within its own block, because otherwise the placeholder
158 // won't be set on the most browsers.
159 @each $pseudo in $pseudos {
160 &#{$pseudo} {
161 color: unquote($color);
162 }
163 }
164}
165
166@mixin pie-clearfix {
167 &:after {
168 content: '';
169 display: table;
170 clear: both;
171 }
172}
173
174@mixin md-shadow-bottom-z-1() {
175 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
176}
177
178@mixin md-shadow-bottom-z-2() {
179 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
180}
181
182// Mixin for a "flat" input that can be used for components that contain an input
183// (datepicker, autocomplete).
184@mixin md-flat-input() {
185 font-size: 14px;
186
187 box-sizing: border-box;
188 border: none;
189 box-shadow: none;
190 outline: none;
191 background: transparent;
192
193 // The "clear X" that IE adds to input[type="search"]
194 &::-ms-clear {
195 display: none;
196 }
197}
198
199// Typography mixins
200
201@mixin md-title() {
202 font-size: $title-font-size-base;
203 font-weight: 500;
204 letter-spacing: 0.005em;
205}
206
207@mixin md-body-1() {
208 font-size: $body-font-size-base;
209 font-weight: 400;
210 letter-spacing: 0.010em;
211 line-height: rem(2);
212}
213
214@mixin md-body-2() {
215 font-size: $body-font-size-base;
216 font-weight: 500;
217 letter-spacing: 0.010em;
218 line-height: rem(2.4);
219}
220
221@mixin md-subhead() {
222 font-size: $subhead-font-size-base;
223 font-weight: 400;
224 letter-spacing: 0.010em;
225 line-height: rem(2.4);
226}
227
228@function map-to-string($map) {
229 $map-str: '{';
230 $keys: map-keys($map);
231 $len: length($keys);
232 @for $i from 1 through $len {
233 $key: nth($keys, $i);
234 $value: map-get($map, $key);
235 $map-str: $map-str + '_' + $key + '_: _' + map-get($map, $key) + '_';
236 @if $i != $len {
237 $map-str: $map-str + ',';
238 }
239 }
240 @return $map-str + '}';
241}
242
243// This is a mixin, which fixes IE11's vertical alignment issue, when using `min-height`.
244// See https://connect.microsoft.com/IE/feedback/details/816293/
245@mixin ie11-min-height-flexbug($min-height) {
246 &::before {
247 content: '';
248 min-height: $min-height;
249 visibility: hidden;
250 display: inline-block;
251 }
252}
253
254// mixin definition ; sets LTR and RTL within the same style call
255// @see https://css-tricks.com/almanac/properties/d/direction/
256
257@mixin rtl($prop, $ltr-value, $rtl-value) {
258 #{$prop}: $ltr-value;
259 [dir=rtl] & {
260 #{$prop}: $rtl-value;
261 }
262}
263
264@mixin rtl-prop($ltr-prop, $rtl-prop, $value, $reset-value) {
265 #{$ltr-prop}: $value;
266 [dir=rtl] & {
267 #{$ltr-prop}: $reset-value;
268 #{$rtl-prop}: $value;
269 }
270}
271
272// To reverse padding (top left bottom right) -> (top right bottom left)
273@function rtl-value($list) {
274 @if length($list) == 4 {
275 @return nth($list, 1) nth($list, 4) nth($list, 3) nth($list, 2)
276 }
277 @if length($list) == 5 {
278 @return nth($list, 1) nth($list, 4) nth($list, 3) nth($list, 2) nth($list, 5)
279 }
280 @return $list;
281}
282
283// Position a FAB button.
284@mixin fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
285 &.md-fab-#{$spot} {
286 top: $top;
287 right: $right;
288 bottom: $bottom;
289 left: $left;
290 position: absolute;
291 }
292}
293
294@mixin fab-all-positions() {
295 @include fab-position(bottom-right, auto, ($button-fab-width - $button-fab-padding)/2, ($button-fab-height - $button-fab-padding)/2, auto);
296 @include fab-position(bottom-left, auto, auto, ($button-fab-height - $button-fab-padding)/2, ($button-fab-width - $button-fab-padding)/2);
297 @include fab-position(top-right, ($button-fab-height - $button-fab-padding)/2, ($button-fab-width - $button-fab-padding)/2, auto, auto);
298 @include fab-position(top-left, ($button-fab-height - $button-fab-padding)/2, auto, auto, ($button-fab-width - $button-fab-padding)/2);
299}
300
301// This mixin allows a user to use the md-checkbox css outside of the
302// md-checkbox directive.
303// See src/components/select/select.scss for an example.
304@mixin checkbox-container(
305 $checkedSelector: '.md-checked',
306 $width: $checkbox-width,
307 $height: $checkbox-height,
308 $border-width: $checkbox-border-width,
309 $border-radius: $checkbox-border-radius) {
310 .md-container {
311 position: absolute;
312 top: 50%;
313 transform: translateY(-50%);
314
315 box-sizing: border-box;
316 display: inline-block;
317
318 width: $width;
319 height: $height;
320 @include rtl(left, 0, auto);
321 @include rtl(right, auto, 0);
322
323 &:before {
324 box-sizing: border-box;
325 background-color: transparent;
326 border-radius: 50%;
327 content: '';
328 position: absolute;
329 display: block;
330 height: auto;
331 left: 0;
332 top: 0;
333 right: 0;
334 bottom: 0;
335 transition: all 0.5s;
336 width: auto;
337 }
338
339 &:after {
340 box-sizing: border-box;
341 content: '';
342 position: absolute;
343 top: -10px;
344 right: -10px;
345 bottom: -10px;
346 left: -10px;
347 }
348
349 .md-ripple-container {
350 position: absolute;
351 display: block;
352 width: auto;
353 height: auto;
354 left: -15px;
355 top: -15px;
356 right: -15px;
357 bottom: -15px;
358 }
359 }
360
361 // unchecked
362 .md-icon {
363 box-sizing: border-box;
364 transition: 240ms;
365 position: absolute;
366 top: 0;
367 left: 0;
368 width: $width;
369 height: $height;
370 border-width: $border-width;
371 border-style: solid;
372 border-radius: $border-radius;
373 }
374
375 &#{$checkedSelector} .md-icon {
376 border-color: transparent;
377
378 &:after {
379 box-sizing: border-box;
380 transform: rotate(45deg);
381 position: absolute;
382 left: $width / 3 - $border-width;
383 top: $width / 9 - $border-width;
384 display: table;
385 width: $width / 3;
386 height: $width * 2 / 3;
387 border-width: $border-width;
388 border-style: solid;
389 border-top: 0;
390 border-left: 0;
391 content: '';
392 }
393 }
394
395 // disabled
396 &[disabled] {
397 cursor: default;
398 }
399
400 &.md-indeterminate .md-icon {
401 &:after {
402 box-sizing: border-box;
403 position: absolute;
404 top: 50%;
405 left: 50%;
406 transform: translate(-50%, -50%);
407 display: table;
408 width: $width * 0.6;
409 height: $border-width;
410 border-width: $border-width;
411 border-style: solid;
412 border-top: 0;
413 border-left: 0;
414 content: '';
415 }
416 }
417}
418
419// Mixin to create a primary checkbox.
420// Used by the checkbox and select component.
421@mixin checkbox-primary($checkedSelector: '.md-checked') {
422 .md-ripple {
423 color: '{{primary-600}}';
424 }
425
426 &#{$checkedSelector} .md-ripple {
427 color: '{{background-600}}';
428 }
429
430 .md-ink-ripple {
431 color: '{{foreground-2}}';
432 }
433
434 &#{$checkedSelector} .md-ink-ripple {
435 color: '{{primary-color-0.87}}';
436 }
437
438 &:not(.md-checked) .md-icon {
439 border-color: '{{foreground-2}}';
440 }
441
442 &#{$checkedSelector} .md-icon {
443 background-color: '{{primary-color-0.87}}';
444 }
445
446 &#{$checkedSelector}.md-focused .md-container:before {
447 background-color: '{{primary-color-0.26}}';
448 }
449
450 &#{$checkedSelector} .md-icon:after {
451 border-color: '{{primary-contrast-0.87}}';
452 }
453
454 & .md-indeterminate[disabled] {
455 .md-container {
456 color: '{{foreground-3}}';
457 }
458 }
459}
460
461html, body {
462 height: 100%;
463 position: relative;
464}
465
466body {
467 margin: 0;
468 padding: 0;
469}
470
471[tabindex='-1']:focus {
472 outline: none;
473}
474.inset {
475 padding: 10px;
476}
477
478a.md-no-style,
479button.md-no-style {
480 font-weight: normal;
481 background-color: inherit;
482 text-align: left;
483 border: none;
484 padding: 0;
485 margin: 0;
486}
487
488select,
489button,
490textarea,
491input {
492 vertical-align: baseline;
493}
494
495// Fix Android 4.0 button bugs
496input[type="reset"],
497input[type="submit"],
498html input[type="button"],
499button {
500 cursor: pointer;
501 -webkit-appearance: button;
502
503 &[disabled] {
504 cursor: default;
505 }
506}
507
508textarea {
509 vertical-align: top;
510 overflow: auto;
511}
512
513input {
514 &[type="search"] {
515 -webkit-appearance: textfield;
516 box-sizing: content-box;
517 -webkit-box-sizing: content-box;
518
519 &::-webkit-search-decoration,
520 &::-webkit-search-cancel-button {
521 -webkit-appearance: none;
522 }
523 }
524 &:-webkit-autofill {
525 text-shadow: none;
526 }
527}
528
529.md-visually-hidden {
530 border: 0;
531 clip: rect(0 0 0 0);
532 height: 1px;
533 margin: -1px;
534 overflow: hidden;
535 padding: 0;
536 position: absolute;
537 text-transform: none;
538 width: 1px;
539}
540
541.md-shadow {
542 position: absolute;
543 top: 0;
544 left: 0;
545 bottom: 0;
546 right: 0;
547 border-radius: inherit;
548 pointer-events: none;
549}
550
551.md-shadow-bottom-z-1 {
552 @include md-shadow-bottom-z-1();
553}
554.md-shadow-bottom-z-2 {
555 @include md-shadow-bottom-z-2();
556}
557
558.md-shadow-animated.md-shadow {
559 transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
560}
561
562/*
563 * A container inside of a rippling element (eg a button),
564 * which contains all of the individual ripples
565 */
566.md-ripple-container {
567 pointer-events: none;
568 position: absolute;
569 overflow: hidden;
570 left: 0;
571 top: 0;
572 width: 100%;
573 height: 100%;
574 transition: all 0.55s $swift-ease-out-timing-function;
575}
576
577.md-ripple {
578 $sizeDuration: 0.45s * 2;
579 position: absolute;
580 transform: translate(-50%, -50%) scale(0);
581 transform-origin: 50% 50%;
582 opacity: 0;
583 border-radius: 50%;
584 &.md-ripple-placed {
585 transition: margin $sizeDuration $swift-ease-out-timing-function,
586 border $sizeDuration $swift-ease-out-timing-function,
587 width $sizeDuration $swift-ease-out-timing-function,
588 height $sizeDuration $swift-ease-out-timing-function,
589 opacity $sizeDuration $swift-ease-out-timing-function,
590 transform $sizeDuration $swift-ease-out-timing-function;
591 }
592 &.md-ripple-scaled {
593 transform: translate(-50%, -50%) scale(1);
594 }
595 &.md-ripple-active, &.md-ripple-full, &.md-ripple-visible {
596 opacity: 0.20;
597 }
598 &.md-ripple-remove {
599 animation: md-remove-ripple $sizeDuration $swift-ease-out-timing-function;
600 }
601}
602
603// Fix issue causing ripple disappear suddenly in Chrome version 51, opacity .15 is close to the opacity when a normal click mouseup
604@keyframes md-remove-ripple {
605 0% { opacity: .15; }
606 100% { opacity: 0; }
607}
608
609.md-padding {
610 padding: 8px;
611}
612
613.md-margin {
614 margin: 8px;
615}
616
617.md-scroll-mask {
618 position: absolute;
619 background-color: transparent;
620 top: 0;
621 right: 0;
622 bottom: 0;
623 left: 0;
624 z-index: $z-index-scroll-mask;
625
626 > .md-scroll-mask-bar {
627 display: block;
628 position: absolute;
629 background-color: #fafafa;
630 right: 0;
631 top: 0;
632 bottom: 0;
633 z-index: $z-index-scroll-mask-bar;
634 box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.3)
635 }
636}
637
638// For iOS allow disabling of momentum scrolling
639// @see issue #2640
640.md-no-momentum {
641 -webkit-overflow-scrolling: auto;
642}
643
644// Add a class to help reduce flicker
645// @see issue #7078 and #8649
646.md-no-flicker {
647 -webkit-filter: blur(0px);
648}
649
650@media (min-width: $layout-breakpoint-sm) {
651 .md-padding {
652 padding: 16px;
653 }
654}
655
656// Bi-directional support
657
658html, body {
659 &[dir=rtl], &[dir=ltr] {
660 unicode-bidi: embed
661 }
662}
663
664bdo[dir=rtl] {
665 direction: rtl;
666 unicode-bidi: bidi-override;
667}
668bdo[dir=ltr] {
669 direction: ltr;
670 unicode-bidi: bidi-override;
671}
672
673
674// Global page styles
675//
676// [2] Ensure the page always fills at least the entire height of the viewport.
677// [3] Prevent iOS text size adjust after orientation change, without disabling user zoom
678// [4] Fonts on OSX will look more consistent with other systems that do not
679// render text using sub-pixel anti-aliasing.
680
681html, body {
682 -webkit-tap-highlight-color: rgba(0,0,0,0);
683 -webkit-touch-callout: none;
684
685 min-height: 100%; // [2]
686
687 -webkit-text-size-adjust: 100%; // [3]
688 -ms-text-size-adjust: 100%; // [3]
689
690 -webkit-font-smoothing: antialiased; // [4]
691 -moz-osx-font-smoothing: grayscale; // [4]
692}
693
694md-select, md-card, md-list, md-toolbar,
695ul, ol, p, h1, h2, h3, h4, h5, h6 {
696 //text-rendering: optimizeLegibility;
697}
698
699/************
700 * Headings
701 ************/
702.md-display-4 {
703 font-size: $display-4-font-size-base;
704 font-weight: 300;
705 letter-spacing: -0.010em;
706 line-height: $display-4-font-size-base;
707}
708.md-display-3 {
709 font-size: $display-3-font-size-base;
710 font-weight: 400;
711 letter-spacing: -0.005em;
712 line-height: $display-3-font-size-base;
713}
714.md-display-2 {
715 font-size: $display-2-font-size-base;
716 font-weight: 400;
717 line-height: rem(6.4);
718}
719.md-display-1 {
720 font-size: $display-1-font-size-base;
721 font-weight: 400;
722 line-height: rem(4);
723}
724.md-headline {
725 font-size: $headline-font-size-base;
726 font-weight: 400;
727 line-height: rem(3.2);
728}
729.md-title {
730 @include md-title();
731}
732.md-subhead {
733 @include md-subhead();
734}
735/************
736 * Body Copy
737 ************/
738.md-body-1 {
739 @include md-body-1();
740}
741.md-body-2 {
742 @include md-body-2();
743}
744.md-caption {
745 font-size: $caption-font-size-base;
746 letter-spacing: 0.020em;
747}
748.md-button {
749 letter-spacing: 0.010em;
750}
751
752/************
753 * Defaults
754 ************/
755
756button,
757select,
758html,
759textarea,
760input {
761 font-family: $font-family;
762}
763
764select,
765button,
766textarea,
767input {
768 font-size: 100%;
769}
770
771/*
772*
773* Responsive attributes
774*
775* References:
776* 1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
777* 2) https://css-tricks.com/almanac/properties/f/flex/
778* 3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
779* 4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
780* 5) http://godban.com.ua/projects/flexgrid
781*
782*
783*/
784
785@mixin flex-order-for-name($sizes:null) {
786 @if $sizes == null {
787 $sizes : '';
788
789 .flex-order {
790 order : 0;
791 }
792 }
793
794 @for $i from -20 through 20 {
795 $order : '';
796 $suffix : '';
797
798 @each $s in $sizes {
799 @if $s != '' { $suffix : '#{$s}-#{$i}'; }
800 @else { $suffix : '#{$i}'; }
801
802 $order : '.flex-order-#{$suffix}';
803 }
804
805 #{$order} {
806 order: #{$i};
807 }
808 }
809}
810
811@mixin offset-for-name($sizes:null) {
812 @if $sizes == null { $sizes : ''; }
813
814 @for $i from 0 through 19 {
815 $offsets : '';
816 $suffix : '';
817
818 @each $s in $sizes {
819 @if $s != '' { $suffix : '#{$s}-#{$i * 5}'; }
820 @else { $suffix : '#{$i * 5}'; }
821
822 $offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix}';
823 }
824
825 #{$offsets} {
826 @if $i != 0 { @include rtl-prop(margin-left, margin-right, #{$i * 5 + '%'}, auto); }
827 @else { @include rtl-prop(margin-left, margin-right, 0, auto); }
828 }
829 }
830
831 @each $i in 33 {
832 $offsets : '';
833 $suffix : '';
834
835 @each $s in $sizes {
836 @if $s != '' { $suffix : '#{$s}-#{$i}'; }
837 @else { $suffix : '#{$i}'; }
838
839 $offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix} ';
840 }
841
842 #{$offsets} {
843 margin-left: calc(100% / 3);
844 }
845 }
846
847 @each $i in 66 {
848 $offsets : '';
849 $suffix : '';
850
851 @each $s in $sizes {
852 @if $s != '' { $suffix : '#{$s}-#{$i}'; }
853 @else { $suffix : '#{$i}'; }
854
855 $offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix} ';
856 }
857
858 #{$offsets} {
859 @include rtl-prop(margin-left, margin-right, calc(200% / 3), auto);
860 }
861 }
862}
863
864@mixin layout-for-name($name: null) {
865 @if $name == null { $name : ''; }
866 @if $name != '' { $name : '-#{$name}'; }
867
868 .layout#{$name}, .layout#{$name}-column, .layout#{$name}-row {
869 box-sizing: border-box;
870 display: -webkit-box;
871 display: -webkit-flex;
872 display: -moz-box;
873 display: -ms-flexbox;
874 display: flex;
875 }
876 .layout#{$name}-column { flex-direction: column; }
877 .layout#{$name}-row { flex-direction: row; }
878}
879
880@mixin flex-properties-for-name($name: null) {
881 $flexName: 'flex';
882 @if $name != null {
883 $flexName: 'flex-#{$name}';
884 $name : '-#{$name}';
885 } @else {
886 $name : '';
887 }
888
889 .#{$flexName} { flex: 1; box-sizing: border-box; } // === flex: 1 1 0%;
890
891 .#{$flexName}-grow { flex: 1 1 100%; box-sizing: border-box; }
892 .#{$flexName}-initial { flex: 0 1 auto; box-sizing: border-box; }
893 .#{$flexName}-auto { flex: 1 1 auto; box-sizing: border-box; }
894 .#{$flexName}-none { flex: 0 0 auto; box-sizing: border-box; }
895 .#{$flexName}-noshrink { flex: 1 0 auto; box-sizing: border-box; }
896 .#{$flexName}-nogrow { flex: 0 1 auto; box-sizing: border-box; }
897
898 // (1-20) * 5 = 0-100%
899 @for $i from 0 through 20 {
900 $value : #{$i * 5 + '%'};
901
902 .#{$flexName}-#{$i * 5} {
903 flex: 1 1 #{$value};
904 max-width: #{$value};
905 max-height: 100%;
906 box-sizing: border-box;
907 }
908
909 .layout-row > .#{$flexName}-#{$i * 5} {
910 flex: 1 1 #{$value};
911 max-width: #{$value};
912 max-height: 100%;
913 box-sizing: border-box;
914
915 // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
916 @if $i == 0 { min-width: 0; }
917 }
918
919 .layout-column > .#{$flexName}-#{$i * 5} {
920 flex: 1 1 #{$value};
921 max-width: 100%;
922 max-height: #{$value};
923 box-sizing: border-box;
924 }
925
926 .layout-row {
927 > .#{$flexName}-33 , > .#{$flexName}-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
928 > .#{$flexName}-66 , > .#{$flexName}-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
929 }
930
931 .layout-column {
932 > .#{$flexName}-33 , > .#{$flexName}-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
933 > .#{$flexName}-66 , > .#{$flexName}-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }
934 }
935
936 .layout#{$name}-row > .#{$flexName}-#{$i * 5} {
937 flex: 1 1 #{$value};
938 max-width: #{$value};
939 max-height: 100%;
940 box-sizing: border-box;
941
942 // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
943 @if $i == 0 { min-width: 0; }
944 }
945
946 .layout#{$name}-column > .#{$flexName}-#{$i * 5} {
947 flex: 1 1 #{$value};
948 max-width: 100%;
949 max-height: #{$value};
950 box-sizing: border-box;
951
952 // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
953 @if $i == 0 { min-height: 0; }
954 }
955
956 }
957
958 .layout#{$name}-row {
959 > .#{$flexName}-33 , > .#{$flexName}-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
960 > .#{$flexName}-66 , > .#{$flexName}-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
961
962 // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
963 > .flex { min-width: 0; }
964
965 }
966
967 .layout#{$name}-column {
968 > .#{$flexName}-33 , > .#{$flexName}-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
969 > .#{$flexName}-66 , > .#{$flexName}-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }
970
971 // Bug workaround for http://crbug.com/546034 - flex issues on Chrome 48
972 > .flex { min-height: 0; }
973 }
974
975}
976
977@mixin layout-align-for-name($suffix: null) {
978
979 // Alignment attributes for layout containers' children
980 // Arrange on the Main Axis
981 // center, start, end, space-between, space-around
982 // flex-start is the default for justify-content
983 // ------------------------------
984
985 $name: 'layout-align';
986 @if $suffix != null {
987 $name: 'layout-align-#{$suffix}';
988 }
989
990 .#{$name},
991 .#{$name}-start-stretch // defaults
992 {
993 justify-content : flex-start;
994 align-content : stretch;
995 align-items: stretch;
996 }
997
998 // Main Axis Center
999 .#{$name}-start,
1000 .#{$name}-start-start,
1001 .#{$name}-start-center,
1002 .#{$name}-start-end,
1003 .#{$name}-start-stretch
1004 {
1005 justify-content: flex-start;
1006 }
1007
1008 // Main Axis Center
1009 .#{$name}-center, //stretch
1010 .#{$name}-center-start,
1011 .#{$name}-center-center,
1012 .#{$name}-center-end,
1013 .#{$name}-center-stretch
1014 {
1015 justify-content: center;
1016 }
1017
1018 // Main Axis End
1019 .#{$name}-end, //stretch
1020 .#{$name}-end-start,
1021 .#{$name}-end-center,
1022 .#{$name}-end-end,
1023 .#{$name}-end-stretch
1024 {
1025 justify-content: flex-end;
1026 }
1027
1028 // Main Axis Space Around
1029 .#{$name}-space-around, //stretch
1030 .#{$name}-space-around-center,
1031 .#{$name}-space-around-start,
1032 .#{$name}-space-around-end,
1033 .#{$name}-space-around-stretch
1034 {
1035 justify-content: space-around;
1036 }
1037
1038 // Main Axis Space Between
1039 .#{$name}-space-between, //stretch
1040 .#{$name}-space-between-center,
1041 .#{$name}-space-between-start,
1042 .#{$name}-space-between-end,
1043 .#{$name}-space-between-stretch
1044 {
1045 justify-content: space-between;
1046 }
1047
1048
1049 // Arrange on the Cross Axis
1050 // center, start, end
1051 // stretch is the default for align-items
1052 // ------------------------------
1053
1054 // Cross Axis Start
1055 .#{$name}-start-start,
1056 .#{$name}-center-start,
1057 .#{$name}-end-start,
1058 .#{$name}-space-between-start,
1059 .#{$name}-space-around-start
1060 {
1061 align-items: flex-start;
1062 align-content: flex-start;
1063 }
1064
1065 // Cross Axis Center
1066 .#{$name}-start-center,
1067 .#{$name}-center-center,
1068 .#{$name}-end-center,
1069 .#{$name}-space-between-center,
1070 .#{$name}-space-around-center
1071 {
1072 align-items: center;
1073 align-content: center;
1074 max-width: 100%;
1075 }
1076
1077 // Cross Axis Center IE overflow fix
1078 .#{$name}-start-center > *,
1079 .#{$name}-center-center > *,
1080 .#{$name}-end-center > *,
1081 .#{$name}-space-between-center > *,
1082 .#{$name}-space-around-center > *
1083 {
1084 max-width: 100%;
1085 box-sizing: border-box;
1086 }
1087
1088 // Cross Axis End
1089 .#{$name}-start-end,
1090 .#{$name}-center-end,
1091 .#{$name}-end-end,
1092 .#{$name}-space-between-end,
1093 .#{$name}-space-around-end
1094 {
1095 align-items: flex-end;
1096 align-content: flex-end;
1097 }
1098
1099 // Cross Axis Start
1100 .#{$name}-start-stretch,
1101 .#{$name}-center-stretch,
1102 .#{$name}-end-stretch,
1103 .#{$name}-space-between-stretch,
1104 .#{$name}-space-around-stretch
1105 {
1106 align-items: stretch;
1107 align-content: stretch;
1108 }
1109}
1110
1111@mixin layout-padding-margin() {
1112
1113 // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
1114 .layout-padding-sm > *,
1115 .layout-padding > .flex-sm
1116 {
1117 padding: $layout-gutter-width / 4;
1118 }
1119
1120 .layout-padding,
1121 .layout-padding-gt-sm,
1122 .layout-padding-md,
1123
1124 // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
1125 .layout-padding > *,
1126 .layout-padding-gt-sm > *,
1127 .layout-padding-md > *,
1128
1129 .layout-padding > .flex,
1130 .layout-padding > .flex-gt-sm,
1131 .layout-padding > .flex-md
1132 {
1133 padding: $layout-gutter-width / 2;
1134 }
1135
1136 // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
1137 .layout-padding-gt-md > *,
1138 .layout-padding-lg > *,
1139 .layout-padding-gt-lg > *,
1140
1141 .layout-padding > .flex-gt-md,
1142 .layout-padding > .flex-lg,
1143 .layout-padding > .flex-lg,
1144 .layout-padding > .flex-gt-lg
1145 {
1146 padding: $layout-gutter-width / 1;
1147 }
1148
1149 // Margin enhancements
1150
1151 .layout-margin-sm > *,
1152 .layout-margin > .flex-sm
1153 {
1154 margin: $layout-gutter-width / 4;
1155 }
1156
1157 .layout-margin,
1158 .layout-margin-gt-sm,
1159 .layout-margin-md,
1160
1161 // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
1162 .layout-margin > *,
1163 .layout-margin-gt-sm > *,
1164 .layout-margin-md > *,
1165
1166 .layout-margin > .flex,
1167 .layout-margin > .flex-gt-sm,
1168 .layout-margin > .flex-md
1169 {
1170 margin: $layout-gutter-width / 2;
1171 }
1172
1173 // NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
1174 .layout-margin-gt-md > *,
1175 .layout-margin-lg > *,
1176 .layout-margin-gt-lg > *,
1177
1178 .layout-margin > .flex-gt-md,
1179 .layout-margin > .flex-lg,
1180 .layout-margin > .flex-gt-lg
1181 {
1182 margin: $layout-gutter-width / 1;
1183 }
1184
1185 .layout-wrap {
1186 flex-wrap: wrap;
1187 }
1188
1189 .layout-nowrap {
1190 flex-wrap: nowrap;
1191 }
1192
1193 .layout-fill {
1194 margin: 0;
1195 width: 100%;
1196 min-height: 100%;
1197 height: 100%;
1198 }
1199}
1200
1201@mixin layouts_for_breakpoint($name:null) {
1202 @include flex-order-for-name($name);
1203 @include offset-for-name($name);
1204 @include layout-align-for-name($name);
1205
1206 @include flex-properties-for-name($name);
1207 @include layout-for-name($name);
1208}
1209
1210$autocomplete-option-height: 48px !default;
1211
1212@keyframes md-autocomplete-list-out {
1213 0% {
1214 animation-timing-function: linear;
1215 }
1216 50% {
1217 opacity: 0;
1218 height: 40px;
1219 animation-timing-function: ease-in;
1220 }
1221 100% {
1222 height: 0;
1223 opacity: 0;
1224 }
1225}
1226
1227@keyframes md-autocomplete-list-in {
1228 0% {
1229 opacity: 0;
1230 height: 0;
1231 animation-timing-function: ease-out;
1232 }
1233 50% {
1234 opacity: 0;
1235 height: 40px;
1236 }
1237 100% {
1238 opacity: 1;
1239 height: 40px;
1240 }
1241}
1242
1243md-autocomplete {
1244 border-radius: 2px;
1245 display: block;
1246 height: 40px;
1247 position: relative;
1248 overflow: visible;
1249 min-width: 190px;
1250 &[disabled] {
1251 input {
1252 cursor: default;
1253 }
1254 }
1255 &[md-floating-label] {
1256 border-radius: 0;
1257 background: transparent;
1258 height: auto;
1259
1260 md-input-container {
1261 padding-bottom: 0px;
1262 }
1263 md-autocomplete-wrap {
1264 height: auto;
1265 }
1266 button {
1267 position: absolute;
1268 top: auto;
1269 bottom: 0;
1270 right: 0;
1271 width: 30px;
1272 height: 30px;
1273 }
1274 }
1275 md-autocomplete-wrap {
1276
1277 // Layout [layout='row']
1278 display: flex;
1279 flex-direction: row;
1280 box-sizing: border-box;
1281
1282 position: relative;
1283 overflow: visible;
1284 height: 40px;
1285 &.md-menu-showing {
1286 z-index: $z-index-backdrop + 1;
1287 }
1288
1289 md-input-container, input {
1290 // Layout [flex]
1291 flex:1 1 0%;
1292 box-sizing:border-box;
1293 min-width :0;
1294 }
1295
1296 md-progress-linear {
1297 position: absolute;
1298 bottom: -2px;
1299 left: 0;
1300 // When `md-inline` is present, we adjust the offset to go over the `ng-message` space
1301 &.md-inline {
1302 bottom: 40px;
1303 right: 2px;
1304 left: 2px;
1305 width: auto;
1306 }
1307 .md-mode-indeterminate {
1308 position: absolute;
1309 top: 0;
1310 left: 0;
1311 width: 100%;
1312 height: 3px;
1313 transition: none;
1314
1315 .md-container {
1316 transition: none;
1317 height: 3px;
1318 }
1319 &.ng-enter {
1320 transition: opacity 0.15s linear;
1321 &.ng-enter-active {
1322 opacity: 1;
1323 }
1324 }
1325 &.ng-leave {
1326 transition: opacity 0.15s linear;
1327 &.ng-leave-active {
1328 opacity: 0;
1329 }
1330 }
1331 }
1332 }
1333 }
1334 input:not(.md-input) {
1335 @include md-flat-input();
1336 width: 100%;
1337 padding: 0 15px;
1338 line-height: 40px;
1339 height: 40px;
1340 }
1341 button {
1342 position: relative;
1343 line-height: 20px;
1344 text-align: center;
1345 width: 30px;
1346 height: 30px;
1347 cursor: pointer;
1348 border: none;
1349 border-radius: 50%;
1350 padding: 0;
1351 font-size: 12px;
1352 background: transparent;
1353 margin: auto 5px;
1354 &:after {
1355 content: '';
1356 position: absolute;
1357 top: -6px;
1358 right: -6px;
1359 bottom: -6px;
1360 left: -6px;
1361 border-radius: 50%;
1362 transform: scale(0);
1363 opacity: 0;
1364 transition: $swift-ease-out;
1365 }
1366 &:focus {
1367 outline: none;
1368
1369 &:after {
1370 transform: scale(1);
1371 opacity: 1;
1372 }
1373 }
1374 md-icon {
1375 position: absolute;
1376 top: 50%;
1377 left: 50%;
1378 transform: translate3d(-50%, -50%, 0) scale(0.9);
1379 path {
1380 stroke-width: 0;
1381 }
1382 }
1383 &.ng-enter {
1384 transform: scale(0);
1385 transition: transform 0.15s ease-out;
1386 &.ng-enter-active {
1387 transform: scale(1);
1388 }
1389 }
1390 &.ng-leave {
1391 transition: transform 0.15s ease-out;
1392 &.ng-leave-active {
1393 transform: scale(0);
1394 }
1395 }
1396 }
1397 // IE Only
1398 @media screen and (-ms-high-contrast: active) {
1399 $border-color: #fff;
1400
1401 input {
1402 border: 1px solid $border-color;
1403 }
1404 li:focus {
1405 color: #fff;
1406 }
1407 }
1408}
1409
1410.md-virtual-repeat-container.md-autocomplete-suggestions-container {
1411 position: absolute;
1412 box-shadow: 0 2px 5px rgba(black, 0.25);
1413 height: 41px * 5.5;
1414 max-height: 41px * 5.5;
1415 z-index: $z-index-tooltip;
1416}
1417
1418.md-virtual-repeat-container.md-not-found {
1419 height: 48px;
1420}
1421
1422.md-autocomplete-suggestions {
1423 margin: 0;
1424 list-style: none;
1425 padding: 0;
1426 li {
1427 font-size: 14px;
1428 overflow: hidden;
1429 padding: 0 15px;
1430 line-height: $autocomplete-option-height;
1431 height: $autocomplete-option-height;
1432 transition: background 0.15s linear;
1433 margin: 0;
1434 white-space: nowrap;
1435 text-overflow: ellipsis;
1436
1437 &:focus {
1438 outline: none;
1439 }
1440
1441 &:not(.md-not-found-wrapper) {
1442 cursor: pointer;
1443 }
1444 }
1445}
1446
1447// IE Only
1448@media screen and (-ms-high-contrast: active) {
1449 md-autocomplete,
1450 .md-autocomplete-suggestions {
1451 border: 1px solid #fff;
1452 }
1453}
1454
1455// !!Important - Theme-based Background-color can be configured in backdrop-theme.scss
1456// - Animate background-color opacity only for `.md-opaque` styles
1457
1458md-backdrop {
1459 transition: opacity 450ms;
1460
1461 position: absolute;
1462 top:0;
1463 bottom:0;
1464 left: 0;
1465 right: 0;
1466
1467 z-index: $z-index-backdrop;
1468
1469 &.md-menu-backdrop {
1470 position: fixed !important;
1471 z-index: $z-index-menu - 1;
1472 }
1473 &.md-select-backdrop {
1474 z-index: $z-index-dialog + 1;
1475 transition-duration: 0;
1476 }
1477 &.md-dialog-backdrop {
1478 z-index: $z-index-dialog - 1;
1479 }
1480 &.md-bottom-sheet-backdrop {
1481 z-index: $z-index-bottom-sheet - 1;
1482 }
1483 &.md-sidenav-backdrop {
1484 z-index: $z-index-sidenav - 1;
1485 }
1486
1487
1488 &.md-click-catcher {
1489 position: absolute;
1490 }
1491
1492 &.md-opaque {
1493
1494 opacity: .48;
1495
1496 &.ng-enter {
1497 opacity: 0;
1498 }
1499 &.ng-enter.md-opaque.ng-enter-active {
1500 opacity: .48;
1501 }
1502 &.ng-leave {
1503 opacity: .48;
1504 transition: opacity 400ms;
1505 }
1506 &.ng-leave.md-opaque.ng-leave-active {
1507 opacity: 0;
1508 }
1509 }
1510
1511}
1512
1513
1514$bottom-sheet-horizontal-padding: 2 * $baseline-grid !default;
1515$bottom-sheet-vertical-padding: 1 * $baseline-grid !default;
1516$bottom-sheet-icon-after-margin: 4 * $baseline-grid !default;
1517$bottom-sheet-list-item-height: 6 * $baseline-grid !default;
1518$bottom-sheet-hidden-bottom-padding: 80px !default;
1519$bottom-sheet-header-height: 7 * $baseline-grid !default;
1520$bottom-sheet-grid-font-weight: 400 !default;
1521
1522md-bottom-sheet {
1523 position: absolute;
1524 left: 0;
1525 right: 0;
1526 bottom: 0;
1527 padding: $bottom-sheet-vertical-padding $bottom-sheet-horizontal-padding $bottom-sheet-vertical-padding + $bottom-sheet-hidden-bottom-padding $bottom-sheet-horizontal-padding;
1528 z-index: $z-index-bottom-sheet;
1529
1530 border-top-width: 1px;
1531 border-top-style: solid;
1532
1533 transform: translate3d(0, $bottom-sheet-hidden-bottom-padding, 0);
1534 transition: $swift-ease-out;
1535 transition-property: transform;
1536
1537 &.md-has-header {
1538 padding-top: 0;
1539 }
1540
1541 &.ng-enter {
1542 opacity: 0;
1543 transform: translate3d(0, 100%, 0);
1544 }
1545
1546 &.ng-enter-active {
1547 opacity: 1;
1548 display: block;
1549 transform: translate3d(0, $bottom-sheet-hidden-bottom-padding, 0) !important;
1550 }
1551
1552
1553 &.ng-leave-active {
1554 transform: translate3d(0, 100%, 0) !important;
1555 transition: $swift-ease-in;
1556 }
1557
1558 .md-subheader {
1559 background-color: transparent;
1560 font-family: $font-family;
1561 line-height: $bottom-sheet-header-height;
1562 padding: 0;
1563 white-space: nowrap;
1564 }
1565
1566 md-inline-icon {
1567 display: inline-block;
1568 height: 24px;
1569 width: 24px;
1570 fill: #444;
1571 }
1572
1573 md-list-item {
1574 display: flex;
1575 outline: none;
1576
1577 &:hover {
1578 cursor: pointer;
1579 }
1580 }
1581
1582 &.md-list {
1583 md-list-item {
1584 padding: 0;
1585 align-items: center;
1586 height: $bottom-sheet-list-item-height;
1587
1588 }
1589 }
1590
1591
1592
1593 &.md-grid {
1594 padding-left: 3 * $baseline-grid;
1595 padding-right: 3 * $baseline-grid;
1596 padding-top: 0;
1597
1598 md-list {
1599 display: flex;
1600 flex-direction: row;
1601 flex-wrap: wrap;
1602 transition: all 0.5s;
1603 align-items: center;
1604 }
1605
1606 md-list-item {
1607 flex-direction: column;
1608 align-items: center;
1609 transition: all 0.5s;
1610
1611 height: 12 * $baseline-grid;
1612
1613 margin-top: $baseline-grid;
1614 margin-bottom: $baseline-grid;
1615
1616 /* Mixin for how many grid items to show per row */
1617 @mixin grid-items-per-row($num, $alignEdges: false) {
1618 $width: 100% / $num;
1619 flex: 1 1 $width;
1620 max-width: $width;
1621
1622 @if $alignEdges {
1623 &:nth-of-type(#{$num}n + 1) {
1624 align-items: flex-start;
1625 }
1626 &:nth-of-type(#{$num}n) {
1627 align-items: flex-end;
1628 }
1629 }
1630 }
1631
1632 @media (max-width: $layout-breakpoint-sm) {
1633 @include grid-items-per-row(3, true);
1634 }
1635
1636 @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
1637 @include grid-items-per-row(4);
1638 }
1639
1640 @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
1641 @include grid-items-per-row(6);
1642 }
1643
1644 @media (min-width: $layout-breakpoint-lg) {
1645 @include grid-items-per-row(7);
1646 }
1647
1648 // Override of the IE11 fix from @mixin ie11-min-height-flexbug, line 109 mixins.scss
1649 &::before {
1650 display: none;
1651 }
1652
1653 .md-list-item-content {
1654 display: flex;
1655 flex-direction: column;
1656 align-items: center;
1657 width: 6 * $baseline-grid;
1658 padding-bottom: 2 * $baseline-grid;
1659 }
1660
1661 .md-grid-item-content {
1662 border: 1px solid transparent;
1663 display: flex;
1664 flex-direction: column;
1665 align-items: center;
1666 width: 10 * $baseline-grid;
1667 }
1668
1669 .md-grid-text {
1670 font-weight: $bottom-sheet-grid-font-weight;
1671 line-height: 2 * $baseline-grid;
1672 font-size: 2 * $baseline-grid - 3;
1673 margin: 0;
1674 white-space: nowrap;
1675 width: 8 * $baseline-grid;
1676 text-align: center;
1677 text-transform: none;
1678 padding-top: 1 * $baseline-grid;
1679 }
1680 }
1681 }
1682}
1683
1684// IE only
1685@media screen and (-ms-high-contrast: active) {
1686 md-bottom-sheet {
1687 border: 1px solid #fff;
1688 }
1689}
1690
1691$button-border-radius: 3px !default;
1692$button-fab-border-radius: 50% !default;
1693$button-icon-border-radius: $button-fab-border-radius !default;
1694
1695$button-line-height: rem(3.60) !default;
1696$button-margin: rem(0.600) rem(0.800) !default;
1697$button-min-width: rem(8.800) !default;
1698$button-padding: 0 $button-left-right-padding !default;
1699
1700
1701// Fab buttons
1702$button-fab-line-height: rem(5.600) !default;
1703$button-fab-mini-width: rem(4.00) !default;
1704$button-fab-mini-height: rem(4.00) !default;
1705$button-fab-mini-line-height: rem(4.00) !default;
1706
1707$button-fab-toast-offset: $button-fab-height * 0.75 !default;
1708
1709$icon-button-height: rem(4.000) !default;
1710$icon-button-width: rem(4.000) !default;
1711$icon-button-margin: rem(0.600) !default;
1712
1713// Fix issue causing buttons in Firefox to be 2px bigger than they should
1714button.md-button::-moz-focus-inner {
1715 border: 0;
1716}
1717
1718.md-button {
1719 display: inline-block;
1720 position: relative; // Required for absolute canvas child elements.
1721 cursor: pointer;
1722
1723 /** Alignment adjustments */
1724 min-height: $button-line-height;
1725 min-width: $button-min-width;
1726 line-height: $button-line-height;
1727
1728 vertical-align: middle;
1729 align-items: center;
1730 text-align: center;
1731
1732 border-radius: $button-border-radius;
1733 box-sizing: border-box;
1734
1735 /* Reset default button appearance */
1736 user-select: none;
1737 outline: none;
1738 border: 0;
1739
1740 /** Custom styling for button */
1741 padding: $button-padding;
1742 margin: $button-margin;
1743
1744 background: transparent;
1745 color: currentColor;
1746 white-space: nowrap;
1747
1748 /* Uppercase text content */
1749 text-transform: uppercase;
1750 font-weight: 500;
1751 font-size: $body-font-size-base;
1752 font-style: inherit;
1753 font-variant: inherit;
1754 font-family: inherit;
1755 text-decoration: none;
1756
1757 // Ink Ripple should not create any overflow.
1758 overflow: hidden;
1759
1760 transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function,
1761 background-color $swift-ease-out-duration $swift-ease-out-timing-function;
1762
1763 &:focus {
1764 outline: none;
1765 }
1766
1767 &:hover, &:focus {
1768 text-decoration: none;
1769 }
1770
1771 // By default $ngAnimate looks for transition durations on the element, when using ng-hide, ng-if, ng-show.
1772 // The .md-button has a transition duration applied, which means, that $ngAnimate delays the hide process.
1773 // To avoid this, we need to reset the transition, when $ngAnimate looks for the duration.
1774 &.ng-hide, &.ng-leave {
1775 transition: none;
1776 }
1777
1778 &.md-cornered {
1779 border-radius: 0;
1780 }
1781
1782 &.md-icon {
1783 padding: 0;
1784 background: none;
1785 }
1786
1787 &.md-raised {
1788 &:not([disabled]) {
1789 @include md-shadow-bottom-z-1();
1790 }
1791 }
1792
1793 &.md-icon-button {
1794 margin: 0 $icon-button-margin;
1795 height: $icon-button-height;
1796 min-width: 0;
1797 line-height: $icon-size;
1798 padding: $baseline-grid;
1799 width: $icon-button-width;
1800 border-radius: $button-icon-border-radius;
1801 .md-ripple-container {
1802 border-radius: $button-icon-border-radius;
1803 background-clip: padding-box;
1804 overflow: hidden;
1805 // The following hack causes Safari/Chrome to respect overflow hidden for ripples
1806 -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
1807 }
1808 }
1809
1810 &.md-fab {
1811
1812 // Include the top/left/bottom/right fab positions
1813 @include fab-all-positions();
1814
1815 z-index: $z-index-fab;
1816
1817 line-height: $button-fab-line-height;
1818
1819 min-width: 0;
1820 width: $button-fab-width;
1821 height: $button-fab-height;
1822 vertical-align: middle;
1823
1824 @include md-shadow-bottom-z-1();
1825 border-radius: $button-fab-border-radius;
1826 background-clip: padding-box;
1827 overflow: hidden;
1828
1829 transition: $swift-ease-in;
1830 transition-property: background-color, box-shadow, transform;
1831 .md-ripple-container {
1832 border-radius: $button-fab-border-radius;
1833 background-clip: padding-box;
1834 overflow: hidden;
1835 // The following hack causes Safari/Chrome to respect overflow hidden for ripples
1836 -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
1837 }
1838
1839 &.md-mini {
1840 line-height: $button-fab-mini-line-height;
1841 width: $button-fab-mini-width;
1842 height: $button-fab-mini-height;
1843 }
1844
1845 &.ng-hide, &.ng-leave {
1846 transition: none;
1847 }
1848 }
1849
1850 &:not([disabled]) {
1851 &.md-raised,
1852 &.md-fab {
1853 &.md-focused {
1854 @include md-shadow-bottom-z-1();
1855 }
1856 &:active {
1857 @include md-shadow-bottom-z-2();
1858 }
1859 }
1860 }
1861
1862 .md-ripple-container {
1863 border-radius: $button-border-radius;
1864 background-clip: padding-box;
1865 overflow: hidden;
1866 // The following hack causes Safari/Chrome to respect overflow hidden for ripples
1867 -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
1868 }
1869}
1870
1871// Using `display:block;` is required for correct vertical alignment
1872// because '.md-button' uses `display:inline-block;`.
1873.md-button.md-icon-button,
1874button.md-button.md-fab {
1875 md-icon {
1876 display: block;
1877 }
1878}
1879
1880.md-toast-open-top {
1881 .md-button.md-fab-top-left,
1882 .md-button.md-fab-top-right {
1883 transition: $swift-ease-out;
1884 transform: translate3d(0, $button-fab-toast-offset, 0);
1885 &:not([disabled]) {
1886 &.md-focused,
1887 &:hover {
1888 transform: translate3d(0, $button-fab-toast-offset - 1, 0);
1889 }
1890 }
1891 }
1892}
1893
1894.md-toast-open-bottom {
1895 .md-button.md-fab-bottom-left,
1896 .md-button.md-fab-bottom-right {
1897 transition: $swift-ease-out;
1898 transform: translate3d(0, -$button-fab-toast-offset, 0);
1899 &:not([disabled]) {
1900 &.md-focused,
1901 &:hover {
1902 transform: translate3d(0, -$button-fab-toast-offset - 1, 0);
1903 }
1904 }
1905 }
1906}
1907
1908.md-button-group {
1909 display: flex;
1910 flex: 1;
1911 width: 100%;
1912
1913 & > .md-button {
1914 flex: 1;
1915
1916 display: block;
1917
1918 overflow: hidden;
1919
1920 width: 0;
1921
1922 border-width: 1px 0px 1px 1px;
1923 border-radius: 0;
1924
1925 text-align: center;
1926 text-overflow: ellipsis;
1927 white-space: nowrap;
1928
1929 &:first-child {
1930 border-radius: 2px 0px 0px 2px;
1931 }
1932 &:last-child {
1933 border-right-width: 1px;
1934 border-radius: 0px 2px 2px 0px;
1935 }
1936 }
1937}
1938// IE only
1939@media screen and (-ms-high-contrast: active) {
1940 .md-button.md-raised,
1941 .md-button.md-fab {
1942 border: 1px solid #fff;
1943 }
1944}
1945
1946$card-padding: 16px !default;
1947$card-box-shadow: $whiteframe-shadow-1dp !default;
1948
1949md-card {
1950 box-sizing: border-box;
1951 display: flex;
1952 flex-direction: column;
1953 margin: $baseline-grid;
1954
1955 box-shadow: $card-box-shadow;
1956
1957 md-card-header {
1958 padding: $card-padding;
1959 display: flex;
1960 flex-direction: row;
1961
1962 &:first-child {
1963 md-card-avatar {
1964 @include rtl-prop(margin-right, margin-left, 12px, auto);
1965 }
1966 }
1967
1968 &:last-child {
1969 md-card-avatar {
1970 @include rtl-prop(margin-left, margin-right, 12px, auto);
1971 }
1972 }
1973
1974 md-card-avatar {
1975 width: 40px;
1976 height: 40px;
1977
1978 .md-user-avatar,
1979 md-icon{
1980 border-radius: 50%;
1981 }
1982
1983 md-icon {
1984 padding: 8px;
1985 }
1986
1987 & + md-card-header-text {
1988 max-height: 40px;
1989
1990 .md-title {
1991 font-size: 14px;
1992 }
1993 }
1994 }
1995
1996 md-card-header-text {
1997 display: flex;
1998 flex: 1;
1999 flex-direction: column;
2000
2001 .md-subhead {
2002 font-size: 14px;
2003 }
2004 }
2005 }
2006
2007 > img,
2008 > md-card-header img,
2009 md-card-title-media img {
2010 box-sizing: border-box;
2011 display: flex;
2012 flex: 0 0 auto;
2013 width: 100%;
2014 height: auto;
2015 }
2016
2017 md-card-title {
2018 padding: 3 * $card-padding / 2 $card-padding $card-padding;
2019 display: flex;
2020 flex: 1 1 auto;
2021 flex-direction: row;
2022
2023 & + md-card-content {
2024 padding-top: 0;
2025 }
2026
2027 md-card-title-text {
2028 flex: 1;
2029 flex-direction: column;
2030 display: flex;
2031
2032 .md-subhead {
2033 padding-top: 0;
2034 font-size: 14px;
2035 }
2036
2037 &:only-child {
2038 .md-subhead {
2039 padding-top: 3 * $card-padding / 4;
2040 }
2041 }
2042 }
2043
2044 md-card-title-media {
2045 margin-top: - $card-padding / 2;
2046
2047 .md-media-sm {
2048 height: 80px;
2049 width: 80px;
2050 }
2051 .md-media-md {
2052 height: 112px;
2053 width: 112px;
2054 }
2055 .md-media-lg {
2056 height: 152px;
2057 width: 152px;
2058 }
2059 }
2060 }
2061
2062 md-card-content {
2063 display: block;
2064 padding: $card-padding;
2065
2066 & > p {
2067 &:first-child {
2068 margin-top: 0;
2069 }
2070
2071 &:last-child {
2072 margin-bottom: 0;
2073 }
2074 }
2075
2076 .md-media-xl {
2077 height: 240px;
2078 width: 240px;
2079 }
2080 }
2081
2082 .md-actions, md-card-actions {
2083 margin: $baseline-grid;
2084
2085 &.layout-column {
2086 .md-button {
2087 &:not(.md-icon-button) {
2088 margin: $baseline-grid / 4 0;
2089
2090 &:first-of-type {
2091 margin-top: 0;
2092 }
2093
2094 &:last-of-type {
2095 margin-bottom: 0;
2096 }
2097 }
2098
2099 &.md-icon-button {
2100 margin-top: 3 * $baseline-grid / 4;
2101 margin-bottom: 3 * $baseline-grid / 4;
2102 }
2103 }
2104 }
2105
2106 md-card-icon-actions {
2107 flex: 1;
2108 justify-content: flex-start;
2109 display: flex;
2110 flex-direction: row;
2111 }
2112
2113 &:not(.layout-column) .md-button {
2114 &:not(.md-icon-button) {
2115 margin: 0 $baseline-grid * .5;
2116
2117 &:first-of-type {
2118 @include rtl-prop(margin-left, margin-right, 0, auto);
2119 }
2120
2121 &:last-of-type {
2122 @include rtl-prop(margin-right, margin-left, 0, auto);
2123 }
2124 }
2125
2126 &.md-icon-button {
2127 margin-left: 3 * $baseline-grid / 4;
2128 margin-right: 3 * $baseline-grid / 4;
2129
2130 &:first-of-type {
2131 @include rtl-prop(margin-left, margin-right, 3 * $baseline-grid / 2, auto);
2132 }
2133
2134 &:last-of-type {
2135 @include rtl-prop(margin-right, margin-left, 3 * $baseline-grid / 2, auto);
2136 }
2137 }
2138
2139 & + md-card-icon-actions {
2140 flex: 1;
2141 justify-content: flex-end;
2142 display: flex;
2143 flex-direction: row;
2144 }
2145 }
2146 }
2147
2148 md-card-footer {
2149 margin-top: auto;
2150 padding: $card-padding;
2151 }
2152}
2153
2154@media screen and (-ms-high-contrast: active) {
2155 md-card {
2156 border: 1px solid #fff;
2157 }
2158}
2159
2160.md-image-no-fill {
2161 > img {
2162 width: auto;
2163 height: auto;
2164 }
2165}
2166
2167
2168//$checkbox-width: 20px !default;
2169//$checkbox-height: $checkbox-width !default;
2170//$checkbox-border-radius: 2px !default;
2171//$checkbox-border-width: 2px !default;
2172//
2173// ^^ defined in variables.scss
2174//
2175$checkbox-margin: 16px !default;
2176$checkbox-text-margin: 10px !default;
2177$checkbox-top: 12px !default;
2178
2179.md-inline-form {
2180 md-checkbox {
2181 margin: 19px 0 18px;
2182 }
2183}
2184
2185md-checkbox {
2186 box-sizing: border-box;
2187 display: inline-block;
2188 margin-bottom: $checkbox-margin;
2189 white-space: nowrap;
2190 cursor: pointer;
2191 outline: none;
2192 user-select: none;
2193 position: relative;
2194 min-width: $checkbox-width;
2195 min-height: $checkbox-width;
2196 @include rtl(margin-left, 0, $checkbox-margin);
2197 @include rtl(margin-right, $checkbox-margin, 0);
2198
2199 &:last-of-type {
2200 margin-left: 0;
2201 margin-right: 0;
2202 }
2203
2204 &.md-focused:not([disabled]) {
2205 .md-container:before {
2206 left: -8px;
2207 top: -8px;
2208 right: -8px;
2209 bottom: -8px;
2210 }
2211
2212 &:not(.md-checked) {
2213 .md-container:before {
2214 background-color: rgba(0, 0, 0, 0.12);
2215 }
2216 }
2217 }
2218
2219 &.md-align-top-left > div.md-container {
2220 top: $checkbox-top;
2221 }
2222
2223 @include checkbox-container;
2224
2225 .md-label {
2226 box-sizing: border-box;
2227 position: relative;
2228 display: inline-block;
2229 vertical-align: middle;
2230 white-space: normal;
2231 user-select: text;
2232
2233 @include rtl(margin-left, $checkbox-text-margin + $checkbox-width, 0);
2234 @include rtl(margin-right, 0, $checkbox-text-margin + $checkbox-width);
2235
2236 }
2237}
2238
2239$chip-font-size: rem(1.6) !default;
2240$chip-height: rem(3.2) !default;
2241$chip-padding: 0 rem(1.2) 0 rem(1.2) !default;
2242$chip-input-padding: 0 !default;
2243$chip-remove-padding-right: rem(2.2) !default;
2244$chip-remove-line-height: rem(2.2) !default;
2245$chip-margin: rem(0.8) rem(0.8) 0 0 !default;
2246$chip-wrap-padding: 0 0 rem(0.8) rem(0.3) !default;
2247$chip-delete-icon-size: rem(1.8) !default;
2248$contact-chip-padding: 0 rem(2.5) 0 0 !default;
2249$contact-chip-suggestion-image-height: rem(4.0) !default;
2250$contact-chip-suggestion-margin: rem(0.8) !default;
2251$contact-chip-name-width: rem(12) !default;
2252
2253.md-contact-chips {
2254 .md-chips {
2255 md-chip {
2256 @include rtl(padding, $contact-chip-padding, rtl-value($contact-chip-padding));
2257 .md-contact-avatar {
2258 @include rtl(float, left, right);
2259 img {
2260 height: $chip-height;
2261 border-radius: $chip-height / 2;
2262 }
2263 }
2264 .md-contact-name {
2265 display: inline-block;
2266 height: $chip-height;
2267 @include rtl-prop(margin-left, margin-right, rem(0.8), auto);
2268 }
2269 }
2270 }
2271}
2272.md-contact-suggestion {
2273 height: ($contact-chip-suggestion-margin * 2) + $contact-chip-suggestion-image-height;
2274 img {
2275 height: $contact-chip-suggestion-image-height;
2276 border-radius: $contact-chip-suggestion-image-height / 2;
2277 margin-top: $contact-chip-suggestion-margin;
2278 }
2279 .md-contact-name {
2280 @include rtl-prop(margin-left, margin-right, $contact-chip-suggestion-margin, auto);
2281 width: $contact-chip-name-width;
2282 }
2283 .md-contact-name, .md-contact-email {
2284 display: inline-block;
2285 overflow: hidden;
2286 text-overflow: ellipsis;
2287 }
2288}
2289.md-contact-chips-suggestions li {
2290 height: 100%;
2291}
2292.md-chips {
2293 @include pie-clearfix();
2294
2295 display: block;
2296 font-family: $font-family;
2297 font-size: $chip-font-size;
2298 @include rtl(padding, $chip-wrap-padding, rtl-value($chip-wrap-padding));
2299 vertical-align: middle;
2300
2301 &.md-readonly .md-chip-input-container {
2302 min-height: $chip-height;
2303 }
2304
2305 &:not(.md-readonly) {
2306 cursor: text;
2307 }
2308
2309 &.md-removable {
2310
2311 md-chip {
2312 @include rtl-prop(padding-right, padding-left, $chip-remove-padding-right, 0);
2313
2314 .md-chip-content {
2315 @include rtl-prop(padding-right, padding-left, rem(0.4), 0);
2316 }
2317 }
2318
2319 }
2320
2321 md-chip {
2322 cursor: default;
2323 border-radius: $chip-height / 2;
2324 display: block;
2325 height: $chip-height;
2326 line-height: $chip-height;
2327 @include rtl(margin, $chip-margin, rtl-value($chip-margin));
2328 padding: $chip-padding;
2329 @include rtl(float, left, right);
2330 box-sizing: border-box;
2331 max-width: 100%;
2332 position: relative;
2333
2334 .md-chip-content {
2335 display: block;
2336 @include rtl(float, left, right);
2337 white-space: nowrap;
2338 max-width: 100%;
2339 overflow: hidden;
2340 text-overflow: ellipsis;
2341 &:focus {
2342 outline: none;
2343 }
2344 }
2345 &._md-chip-content-edit-is-enabled {
2346 -webkit-user-select: none; /* webkit (safari, chrome) browsers */
2347 -moz-user-select: none; /* mozilla browsers */
2348 -khtml-user-select: none; /* webkit (konqueror) browsers */
2349 -ms-user-select: none; /* IE10+ */
2350 }
2351 .md-chip-remove-container {
2352 position: absolute;
2353 @include rtl-prop(right, left, 0, auto);
2354 line-height: $chip-remove-line-height;
2355 }
2356 .md-chip-remove {
2357 text-align: center;
2358 width: $chip-height;
2359 height: $chip-height;
2360 min-width: 0;
2361 padding: 0;
2362 background: transparent;
2363 border: none;
2364 box-shadow: none;
2365 margin: 0;
2366 position: relative;
2367 md-icon {
2368 height: $chip-delete-icon-size;
2369 width: $chip-delete-icon-size;
2370 position: absolute;
2371 top: 50%;
2372 left: 50%;
2373 transform: translate3d(-50%, -50%, 0);
2374 }
2375 }
2376 }
2377 .md-chip-input-container {
2378 display: block;
2379 line-height: $chip-height;
2380 @include rtl(margin, $chip-margin, rtl-value($chip-margin));
2381 padding: $chip-input-padding;
2382 @include rtl(float, left, right);
2383 input {
2384 &:not([type]),&[type="email"],&[type="number"],&[type="tel"],&[type="url"],&[type="text"] {
2385 border: 0;
2386 height: $chip-height;
2387 line-height: $chip-height;
2388 padding: 0;
2389 &:focus {
2390 outline: none;
2391 }
2392 }
2393 }
2394 md-autocomplete, md-autocomplete-wrap {
2395 background: transparent;
2396 height: $chip-height;
2397 }
2398 md-autocomplete {
2399 md-autocomplete-wrap {
2400 box-shadow: none;
2401 }
2402 input {
2403 position: relative;
2404 }
2405 }
2406 input {
2407 border:0;
2408 height: $chip-height;
2409 line-height: $chip-height;
2410 padding: 0;
2411 &:focus {
2412 outline:none;
2413 }
2414 }
2415 md-autocomplete, md-autocomplete-wrap {
2416 height: $chip-height;
2417 }
2418 md-autocomplete {
2419 box-shadow: none;
2420 input {
2421 position: relative;
2422 }
2423 }
2424 &:not(:first-child) {
2425 @include rtl(margin, $chip-margin, rtl-value($chip-margin));
2426 }
2427 input {
2428 background:transparent;
2429 border-width: 0;
2430 }
2431 }
2432 md-autocomplete {
2433 button {
2434 display: none;
2435 }
2436 }
2437}
2438// IE only
2439@media screen and (-ms-high-contrast: active) {
2440 .md-chip-input-container,
2441 md-chip {
2442 border: 1px solid #fff;
2443 }
2444 .md-chip-input-container md-autocomplete {
2445 border: none;
2446 }
2447}
2448
2449
2450md-content {
2451
2452 display: block;
2453 position: relative;
2454 overflow: auto;
2455 -webkit-overflow-scrolling: touch;
2456
2457 &[md-scroll-y] {
2458 overflow-y: auto;
2459 overflow-x: hidden;
2460 }
2461 &[md-scroll-x] {
2462 overflow-x: auto;
2463 overflow-y: hidden;
2464 }
2465 &[md-scroll-xy] {
2466 }
2467
2468 @media print {
2469 overflow: visible !important;
2470 }
2471}
2472
2473
2474
2475/** Styles for mdCalendar. */
2476$md-calendar-cell-size: 44px !default;
2477$md-calendar-header-height: 40px !default;
2478$md-calendar-cell-emphasis-size: 40px !default;
2479$md-calendar-side-padding: 16px !default;
2480$md-calendar-weeks-to-show: 7 !default;
2481
2482$md-calendar-month-label-padding: 8px !default;
2483$md-calendar-month-label-font-size: 14px !default;
2484
2485$md-calendar-scroll-cue-shadow-radius: 6px !default;
2486
2487$md-calendar-width: (7 * $md-calendar-cell-size) + (2 * $md-calendar-side-padding) !default;
2488$md-calendar-height:
2489 ($md-calendar-weeks-to-show * $md-calendar-cell-size) + $md-calendar-header-height !default;
2490
2491// Styles for date cells, including day-of-the-week header cells.
2492@mixin md-calendar-cell($height: $md-calendar-cell-size) {
2493 height: $height;
2494 width: $md-calendar-cell-size;
2495 text-align: center;
2496
2497 // Remove all padding and borders so we can completely
2498 // control the size of the table cells.
2499 padding: 0;
2500 border: none;
2501
2502 // Prevent issues if somebody is applying box-sizing: border-box; eveywhere.
2503 box-sizing: content-box;
2504
2505 // The left / right padding is applied to the cells instead of the wrapper
2506 // because we want the header background and the month dividing border to
2507 // extend the entire width of the calendar.
2508 &:first-child {
2509 @include rtl-prop(padding-left, padding-right, $md-calendar-side-padding, 0);
2510 }
2511
2512 &:last-child {
2513 @include rtl-prop(padding-right, padding-left, $md-calendar-side-padding, 0);
2514 }
2515}
2516
2517// Styles for tables used in mdCalendar (the day-of-the-week header and the table of dates itself).
2518@mixin md-calendar-table() {
2519 // Fixed table layout makes IE faster.
2520 // https://msdn.microsoft.com/en-us/library/ms533020(VS.85).aspx
2521 table-layout: fixed;
2522 border-spacing: 0;
2523 border-collapse: collapse;
2524}
2525
2526md-calendar {
2527 font-size: 13px;
2528 user-select: none;
2529}
2530
2531// Wrap the scroll with overflow: hidden in order to hide the scrollbar.
2532// The inner .md-calendar-scroll-container will using a padding-right to push the
2533// scrollbar into the hidden area (done with javascript).
2534.md-calendar-scroll-mask {
2535 display: inline-block;
2536 overflow: hidden;
2537 height: $md-calendar-weeks-to-show * $md-calendar-cell-size;
2538
2539 // The actual scrolling element.
2540 .md-virtual-repeat-scroller {
2541 // These two properties are needed to get touch momentum to work.
2542 // See https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements
2543 overflow-y: scroll;
2544 -webkit-overflow-scrolling: touch;
2545
2546 &::-webkit-scrollbar {
2547 display: none;
2548 }
2549 }
2550
2551 // Offsetter is the element that is translateY'ed into view of the user and contains the
2552 // calendar content.
2553 .md-virtual-repeat-offsetter {
2554 width: 100%;
2555 }
2556}
2557
2558// Contains the scrolling element (this is the md-virtual-repeat-container).
2559.md-calendar-scroll-container {
2560 // Add an inset shadow to help cue users that the calendar is scrollable. Use a negative x
2561 // offset to push the vertical edge shadow off to the right so that it's cut off by the edge
2562 // of the calendar container.
2563 box-shadow: inset -3px 3px $md-calendar-scroll-cue-shadow-radius rgba(black, 0.2);
2564
2565 display: inline-block;
2566 height: $md-calendar-weeks-to-show * $md-calendar-cell-size;
2567
2568 // Add the shadow radius to the width so that the shadow os pushed off to the side and cut off.
2569 width: $md-calendar-width + $md-calendar-scroll-cue-shadow-radius;
2570}
2571
2572// A single date cell in the calendar table.
2573.md-calendar-date {
2574 @include md-calendar-cell();
2575
2576 &.md-calendar-date-disabled {
2577 cursor: default;
2578 }
2579}
2580
2581// Circle element inside of every date cell used to indicate selection or focus.
2582.md-calendar-date-selection-indicator {
2583 transition: background-color, color $swift-ease-out-duration $swift-ease-out-timing-function;
2584
2585 border-radius: 50%;
2586 display: inline-block;
2587
2588 width: $md-calendar-cell-emphasis-size;
2589 height: $md-calendar-cell-emphasis-size;
2590 line-height: $md-calendar-cell-emphasis-size;
2591
2592 .md-calendar-date:not(.md-disabled) & {
2593 cursor: pointer;
2594 }
2595}
2596
2597// The label above each month (containing the month name and the year, e.g. "Jun 2014").
2598.md-calendar-month-label {
2599 height: $md-calendar-cell-size;
2600 font-size: $md-calendar-month-label-font-size;
2601 font-weight: 500; // Roboto Medium
2602 @include rtl(padding, 0 0 0 $md-calendar-side-padding + $md-calendar-month-label-padding, rtl-value( 0 0 0 $md-calendar-side-padding + $md-calendar-month-label-padding));
2603
2604 md-calendar-month &:not(.md-calendar-month-label-disabled) {
2605 cursor: pointer;
2606 }
2607
2608 md-icon {
2609 @include rtl(transform, rotate(180deg), none);
2610 }
2611
2612 span {
2613 vertical-align: middle;
2614 }
2615}
2616
2617// Table containing the day-of-the-week header.
2618.md-calendar-day-header {
2619 @include md-calendar-table();
2620
2621 th {
2622 @include md-calendar-cell($md-calendar-header-height);
2623 font-weight: normal;
2624 }
2625}
2626
2627// Primary table containing all date cells. Each month is a tbody in this table.
2628.md-calendar {
2629 @include md-calendar-table();
2630
2631 // Divider between months.
2632 tr:last-child td {
2633 border-bottom-width: 1px;
2634 border-bottom-style: solid;
2635 }
2636
2637 // The divider between months doesn't actually change the height of the tbody in which the
2638 // border appear; it changes the height of the following tbody. The causes the first-child to be
2639 // 1px shorter than the other months. We fix this by adding an invisible border-top.
2640 &:first-child {
2641 border-top: 1px solid transparent;
2642 }
2643
2644 // Explicitly set vertical-align to avoid conflicting with popular CSS resets. When
2645 // vertical-align:baseline is set, month headers are misaligned. Also reset the box-sizing,
2646 // in case the user set it to border-box.
2647 // http://meyerweb.com/eric/tools/css/reset/
2648 tbody, td, tr {
2649 vertical-align: middle;
2650 box-sizing: content-box;
2651 }
2652}
2653
2654/** Styles for mdDatepicker. */
2655$md-datepicker-button-gap: 12px !default; // Space between the text input and the calendar-icon button.
2656$md-datepicker-border-bottom-gap: 5px !default; // Space between input and the grey underline.
2657$md-date-arrow-size: 5px !default; // Size of the triangle on the right side of the input.
2658$md-datepicker-open-animation-duration: 0.2s !default;
2659$md-datepicker-triangle-button-width: 36px !default;
2660$md-datepicker-input-mask-height: 40px !default;
2661$md-datepicker-button-padding: 8px !default;
2662
2663
2664md-datepicker {
2665 // Don't let linebreaks happen between the open icon-button and the input.
2666 white-space: nowrap;
2667 overflow: hidden;
2668
2669 // Leave room for the down-triangle button to "overflow" it's parent without modifying scrollLeft.
2670 // This prevents the element from shifting right when opening via the triangle button.
2671 @include rtl-prop(padding-right, padding-left, $md-datepicker-triangle-button-width / 2, 0);
2672 @include rtl-prop(margin-right, margin-left, -$md-datepicker-triangle-button-width / 2, auto);
2673
2674 vertical-align: middle;
2675}
2676
2677.md-inline-form {
2678 md-datepicker {
2679 margin-top: 12px;
2680 }
2681}
2682
2683// The calendar icon button used to open the calendar pane.
2684.md-datepicker-button {
2685 display: inline-block;
2686 box-sizing: border-box;
2687 background: none;
2688 vertical-align: middle;
2689 position: relative;
2690
2691 // Captures any of the click events. This is necessary, because the button has a SVG
2692 // icon which doesn't propagate the focus event, causing inconsistent behaviour.
2693 &:before {
2694 top: 0;
2695 left: 0;
2696 bottom: 0;
2697 right: 0;
2698 position: absolute;
2699 content: '';
2700 speak: none;
2701 }
2702}
2703
2704// The input into which the user can type the date.
2705.md-datepicker-input {
2706 @include md-flat-input();
2707 min-width: 120px;
2708 max-width: $md-calendar-width - $md-datepicker-button-gap;
2709 padding: 0 0 $md-datepicker-border-bottom-gap;
2710}
2711
2712// If the datepicker is inside of a md-input-container
2713._md-datepicker-floating-label {
2714 > md-datepicker {
2715 // Prevents the ripple on the triangle from being clipped.
2716 overflow: visible;
2717
2718 .md-datepicker-input-container {
2719 border: none;
2720 }
2721
2722 .md-datepicker-button {
2723 // Prevents the button from wrapping around.
2724 @include rtl(float, left, right);
2725 margin-top: -$md-datepicker-border-bottom-gap / 2;
2726 }
2727 }
2728
2729 &._md-datepicker-has-calendar-icon {
2730 > label:not(.md-no-float):not(.md-container-ignore) {
2731 $width-offset: $md-datepicker-triangle-button-width * 2 + $md-datepicker-button-gap;
2732 $offset: $md-datepicker-triangle-button-width / 2;
2733 @include rtl(right, $offset, auto);
2734 @include rtl(left, auto, $offset);
2735 width: calc(100% - #{$width-offset});
2736 }
2737
2738 .md-input-message-animation {
2739 $margin: $md-datepicker-triangle-button-width + $md-datepicker-button-padding * 2 + $md-datepicker-button-gap;
2740 @include rtl-prop(margin-left, margin-right, $margin, auto);
2741 }
2742 }
2743}
2744
2745
2746// Container for the datepicker input.
2747.md-datepicker-input-container {
2748 // Position relative in order to absolutely position the down-triangle button within.
2749 position: relative;
2750
2751 border-bottom-width: 1px;
2752 border-bottom-style: solid;
2753
2754 display: inline-block;
2755 width: auto;
2756
2757 .md-icon-button + & {
2758 @include rtl-prop(margin-left, margin-right, $md-datepicker-button-gap, auto);
2759 }
2760
2761 &.md-datepicker-focused {
2762 border-bottom-width: 2px;
2763 }
2764}
2765
2766.md-datepicker-is-showing .md-scroll-mask {
2767 z-index: $z-index-calendar-pane - 1;
2768}
2769
2770// Floating pane that contains the calendar at the bottom of the input.
2771.md-datepicker-calendar-pane {
2772 // On most browsers the `scale(0)` below prevents this element from
2773 // overflowing it's parent, however IE and Edge seem to disregard it.
2774 // The `left: -100%` pulls the element back in order to ensure that
2775 // it doesn't cause an overflow.
2776 position: absolute;
2777 top: 0;
2778 left: -100%;
2779 z-index: $z-index-calendar-pane;
2780 border-width: 1px;
2781 border-style: solid;
2782 background: transparent;
2783
2784 transform: scale(0);
2785 transform-origin: 0 0;
2786 transition: transform $md-datepicker-open-animation-duration $swift-ease-out-timing-function;
2787
2788 &.md-pane-open {
2789 transform: scale(1);
2790 }
2791}
2792
2793// Portion of the floating panel that sits, invisibly, on top of the input.
2794.md-datepicker-input-mask {
2795 height: $md-datepicker-input-mask-height;
2796 width: $md-calendar-width;
2797 position: relative;
2798 overflow: hidden;
2799
2800 background: transparent;
2801 pointer-events: none;
2802 cursor: text;
2803}
2804
2805// The calendar portion of the floating pane (vs. the input mask).
2806.md-datepicker-calendar {
2807 opacity: 0;
2808 // Use a modified timing function (from swift-ease-out) so that the opacity part of the
2809 // animation doesn't come in as quickly so that the floating pane doesn't ever seem to
2810 // cover up the trigger input.
2811 transition: opacity $md-datepicker-open-animation-duration cubic-bezier(0.5, 0, 0.25, 1);
2812
2813 .md-pane-open & {
2814 opacity: 1;
2815 }
2816
2817 md-calendar:focus {
2818 outline: none;
2819 }
2820}
2821
2822// Down triangle/arrow indicating that the datepicker can be opened.
2823// We can do this entirely with CSS without needing to load an icon.
2824// See https://css-tricks.com/snippets/css/css-triangle/
2825.md-datepicker-expand-triangle {
2826 // Center the triangle inside of the button so that the
2827 // ink ripple origin looks correct.
2828 position: absolute;
2829 top: 50%;
2830 left: 50%;
2831 transform: translate(-50%, -50%);
2832
2833 width: 0;
2834 height: 0;
2835 border-left: $md-date-arrow-size solid transparent;
2836 border-right: $md-date-arrow-size solid transparent;
2837 border-top: $md-date-arrow-size solid;
2838}
2839
2840// Button containing the down "disclosure" triangle/arrow.
2841.md-datepicker-triangle-button {
2842 position: absolute;
2843 @include rtl-prop(right, left, 0, auto);
2844 top: $md-date-arrow-size;
2845
2846 // TODO(jelbourn): This position isn't great on all platforms.
2847 @include rtl(transform, translateY(-25%) translateX(45%), translateY(-25%) translateX(-45%));
2848}
2849
2850// Need crazy specificity to override .md-button.md-icon-button.
2851// Only apply this high specifiy to the property we need to override.
2852.md-datepicker-triangle-button.md-button.md-icon-button {
2853 height: $md-datepicker-triangle-button-width;
2854 width: $md-datepicker-triangle-button-width;
2855 position: absolute;
2856 padding: $md-datepicker-button-padding;
2857}
2858
2859// Disabled state for all elements of the picker.
2860md-datepicker[disabled] {
2861 .md-datepicker-input-container {
2862 border-bottom-color: transparent;
2863 }
2864
2865 .md-datepicker-triangle-button {
2866 display: none;
2867 }
2868}
2869
2870// Open state for all of the elements of the picker.
2871.md-datepicker-open {
2872 overflow: hidden;
2873
2874 .md-datepicker-input-container,
2875 input.md-input {
2876 border-bottom-color: transparent;
2877 }
2878
2879 .md-datepicker-triangle-button,
2880 &.md-input-has-value > label,
2881 &.md-input-has-placeholder > label {
2882 display: none;
2883 }
2884}
2885
2886// When the position of the floating calendar pane is adjusted to remain inside
2887// of the viewport, hide the inputput mask, as the text input will no longer be
2888// directly underneath it.
2889.md-datepicker-pos-adjusted .md-datepicker-input-mask {
2890 display: none;
2891}
2892
2893// Animate the calendar inside of the floating calendar pane such that it appears to "scroll" into
2894// view while the pane is opening. This is done as a cue to users that the calendar is scrollable.
2895.md-datepicker-calendar-pane {
2896 .md-calendar {
2897 transform: translateY(-85px);
2898 transition: transform 0.65s $swift-ease-out-timing-function;
2899 transition-delay: 0.125s;
2900 }
2901
2902 &.md-pane-open .md-calendar {
2903 transform: translateY(0);
2904 }
2905}
2906
2907$dialog-padding: $baseline-grid * 3 !default;
2908
2909.md-dialog-is-showing {
2910 max-height: 100%;
2911}
2912
2913.md-dialog-container {
2914 display: flex;
2915 justify-content: center;
2916 align-items: center;
2917 position: absolute;
2918 top: 0;
2919 left: 0;
2920 width: 100%;
2921 height: 100%;
2922 z-index: $z-index-dialog;
2923 overflow: hidden;
2924}
2925
2926md-dialog {
2927
2928 &.md-transition-in {
2929 opacity: 1;
2930 transition: $swift-ease-out;
2931 transform: translate(0,0) scale(1.0);
2932 }
2933 &.md-transition-out {
2934 opacity: 0;
2935 transition: $swift-ease-out;
2936 transform: translate(0,100%) scale(0.2);
2937 }
2938
2939 opacity: 0;
2940 min-width: 240px;
2941 max-width: 80%;
2942 max-height: 80%;
2943 position: relative;
2944 overflow: auto; // stop content from leaking out of dialog parent and fix IE
2945
2946 box-shadow: $whiteframe-shadow-13dp;
2947
2948 display: flex;
2949 flex-direction: column;
2950
2951 &> form {
2952 display: flex;
2953 flex-direction: column;
2954 overflow: auto;
2955 }
2956
2957 .md-dialog-content {
2958 padding: $dialog-padding;
2959 }
2960
2961 md-dialog-content {
2962 order: 1;
2963 flex-direction: column;
2964 overflow: auto;
2965 -webkit-overflow-scrolling: touch;
2966
2967 &:not([layout=row]) > *:first-child:not(.md-subheader) {
2968 margin-top: 0;
2969 }
2970
2971 &:focus {
2972 outline: none;
2973 }
2974
2975 .md-subheader {
2976 margin: 0;
2977 }
2978
2979 .md-dialog-content-body {
2980 width:100%;
2981 }
2982
2983 .md-prompt-input-container {
2984 width: 100%;
2985 box-sizing: border-box;
2986 }
2987 }
2988
2989 .md-actions, md-dialog-actions {
2990 display: flex;
2991 order: 2;
2992 box-sizing: border-box;
2993 align-items: center;
2994 justify-content: flex-end;
2995 margin-bottom: 0;
2996 @include rtl(padding-right, $baseline-grid, $baseline-grid * 2);
2997 @include rtl(padding-left, $baseline-grid * 2, $baseline-grid);
2998 min-height: $baseline-grid * 6.5;
2999 overflow: hidden;
3000
3001 .md-button {
3002 margin-bottom: $baseline-grid;
3003 @include rtl(margin-left, $baseline-grid, 0);
3004 @include rtl(margin-right, 0, $baseline-grid);
3005 margin-top: $baseline-grid;
3006 }
3007 }
3008 &.md-content-overflow {
3009 .md-actions, md-dialog-actions {
3010 border-top-width: 1px;
3011 border-top-style: solid;
3012 }
3013 }
3014
3015}
3016
3017@media screen and (-ms-high-contrast: active) {
3018 md-dialog {
3019 border: 1px solid #fff;
3020 }
3021}
3022
3023@media (max-width: $layout-breakpoint-sm - 1) {
3024 md-dialog.md-dialog-fullscreen {
3025 min-height: 100%;
3026 min-width: 100%;
3027 border-radius: 0;
3028 }
3029}
3030
3031md-divider {
3032 display: block;
3033 border-top-width: 1px;
3034 border-top-style: solid;
3035 margin: 0;
3036
3037 &[md-inset] {
3038 @include rtl-prop(margin-left, margin-right, $baseline-grid * 10, auto);
3039 }
3040}
3041
3042.layout-row,
3043.layout-xs-row, .layout-gt-xs-row,
3044.layout-sm-row, .layout-gt-sm-row,
3045.layout-md-row, .layout-gt-md-row,
3046.layout-lg-row, .layout-gt-lg-row,
3047.layout-xl-row {
3048 & > md-divider {
3049 border-top-width: 0;
3050 border-right-width: 1px;
3051 border-right-style: solid;
3052 }
3053}
3054
3055md-fab-speed-dial {
3056 position: relative;
3057 display: flex;
3058 align-items: center;
3059
3060 // Include the top/left/bottom/right fab positions and set the z-index for absolute positioning
3061 @include fab-all-positions();
3062 z-index: $z-index-fab;
3063
3064 // Allow users to enable/disable hovering over the entire speed dial (i.e. the empty space where
3065 // items will eventually appear)
3066 &:not(.md-hover-full) {
3067 // Turn off pointer events when closed
3068 pointer-events: none;
3069
3070 md-fab-trigger, .md-fab-action-item {
3071 // Always make the trigger and action items always have pointer events (the tooltip looks
3072 // for the first parent with pointer-events, so we must set this for tooltips to work)
3073 pointer-events: auto;
3074 }
3075
3076 &.md-is-open {
3077 // Turn on pointer events when open
3078 pointer-events: auto;
3079 }
3080 }
3081
3082 ._md-css-variables {
3083 z-index: $z-index-fab;
3084 }
3085
3086 &.md-is-open {
3087 .md-fab-action-item {
3088 align-items: center;
3089 }
3090 }
3091
3092 md-fab-actions {
3093 display: flex;
3094
3095 // Set the height so that the z-index in the JS animation works
3096 height: auto;
3097
3098 .md-fab-action-item {
3099 transition: $swift-ease-in;
3100 }
3101 }
3102
3103 &.md-down {
3104 flex-direction: column;
3105
3106 md-fab-trigger {
3107 order: 1;
3108 }
3109
3110 md-fab-actions {
3111 flex-direction: column;
3112 order: 2;
3113 }
3114 }
3115
3116 &.md-up {
3117 flex-direction: column;
3118
3119 md-fab-trigger {
3120 order: 2;
3121 }
3122
3123 md-fab-actions {
3124 flex-direction: column-reverse;
3125 order: 1;
3126 }
3127 }
3128
3129 &.md-left {
3130 flex-direction: row;
3131
3132 md-fab-trigger {
3133 order: 2;
3134 }
3135
3136 md-fab-actions {
3137 flex-direction: row-reverse;
3138 order: 1;
3139
3140 .md-fab-action-item {
3141 transition: $swift-ease-in;
3142 }
3143 }
3144 }
3145
3146 &.md-right {
3147 flex-direction: row;
3148
3149 md-fab-trigger {
3150 order: 1;
3151 }
3152
3153 md-fab-actions {
3154 flex-direction: row;
3155 order: 2;
3156
3157 .md-fab-action-item {
3158 transition: $swift-ease-in;
3159 }
3160 }
3161 }
3162
3163 /*
3164 * Hide some graphics glitches if switching animation types
3165 */
3166 &.md-fling-remove, &.md-scale-remove {
3167 .md-fab-action-item > * {
3168 visibility: hidden;
3169 }
3170 }
3171
3172 /*
3173 * Handle the animations
3174 */
3175 &.md-fling {
3176 .md-fab-action-item {
3177 opacity: 1;
3178 }
3179 }
3180
3181 // For the initial animation, set the duration to be instant
3182 &.md-fling.md-animations-waiting {
3183 .md-fab-action-item {
3184 opacity: 0;
3185 transition-duration: 0s;
3186 }
3187 }
3188
3189 &.md-scale {
3190 .md-fab-action-item {
3191 transform: scale(0);
3192 transition: $swift-ease-in;
3193
3194 // Make the scale animation a bit faster since we are delaying each item
3195 transition-duration: $swift-ease-in-duration / 2.1;
3196 }
3197 }
3198}
3199
3200$button-fab-width: rem(5.600) !default;
3201$icon-button-margin: rem(0.600) !default;
3202
3203md-fab-toolbar {
3204 $icon-delay: 200ms;
3205
3206 // Include the top/left/bottom/right fab positions
3207 @include fab-all-positions();
3208
3209 display: block;
3210
3211 /*
3212 * Closed styling
3213 */
3214 .md-fab-toolbar-wrapper {
3215 display: block;
3216 position: relative;
3217 overflow: hidden;
3218
3219 // Account for the size of the trigger plus its margin/shadow
3220 height: $button-fab-width + ($icon-button-margin * 2);
3221 }
3222
3223 md-fab-trigger {
3224 position: absolute;
3225 z-index: $z-index-fab;
3226
3227 button {
3228 overflow: visible !important;
3229 }
3230
3231 .md-fab-toolbar-background {
3232 display: block;
3233 position: absolute;
3234 z-index: $z-index-fab + 1;
3235
3236 opacity: 1;
3237 transition: $swift-ease-in;
3238 }
3239
3240 md-icon {
3241 position: relative;
3242 z-index: $z-index-fab + 2;
3243
3244 opacity: 1;
3245
3246 // Hide the icon very quickly
3247 transition: all $icon-delay ease-in;
3248 }
3249 }
3250
3251 &.md-left {
3252 md-fab-trigger {
3253 @include rtl-prop(right, left, 0, auto);
3254 }
3255
3256 .md-toolbar-tools {
3257 flex-direction: row-reverse;
3258
3259 > .md-button:first-child {
3260 @include rtl-prop(margin-right, margin-left, 0.6rem, auto)
3261 }
3262
3263 > .md-button:first-child {
3264 @include rtl-prop(margin-left, margin-right, -0.8rem, auto);
3265 }
3266
3267
3268 > .md-button:last-child {
3269 @include rtl-prop(margin-right, margin-left, 8px, auto);
3270 }
3271
3272 }
3273 }
3274
3275 &.md-right {
3276 md-fab-trigger {
3277 @include rtl-prop(left, right, 0, auto);
3278 }
3279
3280 .md-toolbar-tools {
3281 flex-direction: row;
3282 }
3283 }
3284
3285 md-toolbar {
3286 background-color: transparent !important;
3287 pointer-events: none;
3288 z-index: $z-index-fab + 3;
3289
3290 .md-toolbar-tools {
3291 // Fix some spacing issues with the icons and the trigger
3292 padding: 0 20px;
3293 margin-top: 3px;
3294 }
3295
3296 .md-fab-action-item {
3297 opacity: 0;
3298 transform: scale(0);
3299 transition: $swift-ease-in;
3300
3301 // Cut the action item's animation time in half since we delay it in the JS
3302 transition-duration: $swift-ease-in-duration / 2;
3303 }
3304 }
3305
3306 /*
3307 * Hover styling
3308 */
3309 &.md-is-open {
3310 md-fab-trigger > button {
3311 box-shadow: none;
3312
3313 md-icon {
3314 opacity: 0;
3315 }
3316 }
3317
3318 .md-fab-action-item {
3319 opacity: 1;
3320 transform: scale(1);
3321 }
3322 }
3323}
3324
3325md-grid-list {
3326 box-sizing: border-box;
3327 display: block;
3328 position: relative;
3329
3330 md-grid-tile,
3331 md-grid-tile > figure,
3332 md-grid-tile-header,
3333 md-grid-tile-footer {
3334 box-sizing: border-box;
3335 }
3336
3337 md-grid-tile {
3338 display: block;
3339 position: absolute;
3340
3341 figure {
3342 display: flex;
3343 align-items: center;
3344 justify-content: center;
3345 height: 100%;
3346 position: absolute;
3347 top: 0;
3348 right: 0;
3349 bottom: 0;
3350 left: 0;
3351 padding: 0;
3352 margin: 0;
3353 }
3354
3355 // Headers & footers
3356 md-grid-tile-header,
3357 md-grid-tile-footer {
3358 display: flex;
3359 flex-direction: row;
3360 align-items: center;
3361 height: 48px;
3362 color: #fff;
3363 background: rgba(0, 0, 0, 0.18);
3364 overflow: hidden;
3365
3366 // Positioning
3367 position: absolute;
3368 left: 0;
3369 right: 0;
3370
3371 h3,
3372 h4 {
3373 font-weight: 400;
3374 margin: 0 0 0 16px;
3375 }
3376
3377 h3 {
3378 font-size: 14px;
3379 }
3380
3381 h4 {
3382 font-size: 12px;
3383 }
3384 }
3385
3386 md-grid-tile-header {
3387 top: 0;
3388 }
3389
3390 md-grid-tile-footer {
3391 bottom: 0;
3392 }
3393 }
3394
3395}
3396
3397@media screen and (-ms-high-contrast: active) {
3398 md-grid-tile {
3399 border: 1px solid #fff;
3400 }
3401 md-grid-tile-footer {
3402 border-top: 1px solid #fff;
3403 }
3404}
3405
3406
3407md-icon {
3408 margin: auto;
3409 background-repeat: no-repeat no-repeat;
3410 display: inline-block;
3411 vertical-align: middle;
3412 fill: currentColor;
3413 height: $icon-size;
3414 width: $icon-size;
3415
3416 // The icons should not shrink on smaller viewports.
3417 min-height: $icon-size;
3418 min-width: $icon-size;
3419
3420 svg {
3421 pointer-events: none;
3422 display: block;
3423 }
3424
3425 &[md-font-icon] {
3426 line-height: $icon-size;
3427 width: auto;
3428 }
3429}
3430
3431//
3432//@font-face {
3433// font-family:"material";
3434// src:url("/dist/material-font/material.eot");
3435// font-weight:normal;
3436// font-style:normal;
3437//}
3438//
3439//@font-face {
3440// font-family:"material";
3441// src:url("/dist/material-font/material.eot");
3442// src:url("/dist/material-font/material.eot?#iefix") format("embedded-opentype"),
3443// url("/dist/material-font/material.woff") format("woff"),
3444// url("/dist/material-font/material.ttf") format("truetype"),
3445// url("/dist/material-font/material.svg?#material") format("svg");
3446// font-weight:normal;
3447// font-style:normal;
3448//}
3449//
3450///* Bootstrap Overrides */
3451//[class^="icon-"]:before,
3452//[class*=" icon-"]:before {
3453// font-family:"material";
3454// display:inline-block;
3455// vertical-align:middle;
3456// line-height:1;
3457// font-weight:normal;
3458// font-style:normal;
3459// speak:none;
3460// text-decoration:inherit;
3461// text-transform:none;
3462// text-rendering:optimizeLegibility;
3463// -webkit-font-smoothing:antialiased;
3464// -moz-osx-font-smoothing:grayscale;
3465//}
3466
3467$input-container-padding: 2px !default;
3468
3469$input-label-default-offset: 24px !default;
3470$input-label-default-scale: 1.0 !default;
3471$input-label-float-offset: 6px !default;
3472$input-label-float-scale: 0.75 !default;
3473$input-label-float-width: $input-container-padding + 16px !default;
3474
3475$input-placeholder-offset: $input-label-default-offset !default;
3476
3477$input-border-width-default: 1px !default;
3478$input-border-width-focused: 2px !default;
3479$input-line-height: 26px !default;
3480$input-padding-top: 2px !default;
3481
3482$input-error-font-size: 12px !default;
3483$input-error-height: 24px !default;
3484$input-error-line-height: $input-error-font-size + 2px !default;
3485$error-padding-top: ($input-error-height - $input-error-line-height) / 2 !default;
3486
3487$icon-offset: 36px !default;
3488
3489$icon-top-offset: ($icon-offset - $input-padding-top - $input-border-width-focused) / 4 !default;
3490
3491$icon-float-focused-top: -8px !default;
3492
3493$input-resize-handle-height: 10px !default;
3494
3495md-input-container {
3496 @include pie-clearfix();
3497 display: inline-block;
3498 position: relative;
3499 padding: $input-container-padding;
3500 margin: 18px 0;
3501 vertical-align: middle;
3502
3503 &.md-block {
3504 display: block;
3505 }
3506
3507 // Setup a spacer that is always there as a placeholder for any messages so we don't change
3508 // height with only 1 message
3509 .md-errors-spacer {
3510 @include rtl(float, right, left);
3511 min-height: $input-error-height;
3512
3513 // Ensure the element always takes up space, even if empty
3514 min-width: 1px;
3515 }
3516
3517 > md-icon {
3518 position: absolute;
3519 top: $icon-top-offset;
3520 @include rtl(left, 2px, auto);
3521 @include rtl(right, auto, 2px);
3522 }
3523
3524 textarea,
3525 input[type="text"],
3526 input[type="password"],
3527 input[type="datetime"],
3528 input[type="datetime-local"],
3529 input[type="date"],
3530 input[type="month"],
3531 input[type="time"],
3532 input[type="week"],
3533 input[type="number"],
3534 input[type="email"],
3535 input[type="url"],
3536 input[type="search"],
3537 input[type="tel"],
3538 input[type="color"] {
3539 /* remove default appearance from all input/textarea */
3540 -moz-appearance: none;
3541 -webkit-appearance: none;
3542 }
3543 input[type="date"],
3544 input[type="datetime-local"],
3545 input[type="month"],
3546 input[type="time"],
3547 input[type="week"] {
3548 min-height: $input-line-height;
3549 }
3550 textarea {
3551 resize: none;
3552 overflow: hidden;
3553
3554 &.md-input {
3555 min-height: $input-line-height;
3556 -ms-flex-preferred-size: auto; //IE fix
3557 }
3558
3559 // The height usually gets set to 1 line by `.md-input`.
3560 &[md-no-autogrow] {
3561 height: auto;
3562 overflow: auto;
3563 }
3564 }
3565
3566 label:not(.md-container-ignore) {
3567 position: absolute;
3568 bottom: 100%;
3569 @include rtl(left, 0, auto);
3570 @include rtl(right, auto, 0);
3571
3572 &.md-required:after {
3573 content: ' *';
3574 font-size: 13px;
3575 vertical-align: top;
3576 }
3577 }
3578
3579 label:not(.md-no-float):not(.md-container-ignore),
3580 .md-placeholder {
3581 overflow: hidden;
3582 text-overflow: ellipsis;
3583 white-space: nowrap;
3584 width: 100%;
3585 order: 1;
3586 pointer-events: none;
3587 -webkit-font-smoothing: antialiased;
3588 @include rtl(padding-left, $input-container-padding + 1px, 0);
3589 @include rtl(padding-right, 0, $input-container-padding + 1px);
3590 z-index: 1;
3591 transform: translate3d(0, $input-label-default-offset + 4, 0) scale($input-label-default-scale);
3592 transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
3593
3594 // The max-width is necessary, because in some browsers, using this together with
3595 // a calc might cause it to overflow the parent. See #7403
3596 max-width: 100%;
3597
3598 @include rtl(transform-origin, left top, right top);
3599 }
3600 .md-placeholder {
3601 position: absolute;
3602 top: 0;
3603 opacity: 0;
3604 transition-property: opacity, transform;
3605 transform: translate3d(0, $input-placeholder-offset + $baseline-grid * 0.75, 0);
3606 }
3607 &.md-input-focused .md-placeholder {
3608 opacity: 1;
3609 transform: translate3d(0, $input-placeholder-offset, 0);
3610 }
3611 // Placeholder should immediately disappear when the user starts typing
3612 &.md-input-has-value .md-placeholder {
3613 transition: none;
3614 opacity: 0;
3615 }
3616
3617 &:not( .md-input-has-value ) input:not( :focus ),
3618 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-ampm-field,
3619 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-day-field,
3620 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-hour-field,
3621 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-millisecond-field,
3622 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-minute-field,
3623 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-month-field,
3624 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-second-field,
3625 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-week-field,
3626 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-year-field,
3627 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-text {
3628 color: transparent;
3629 }
3630
3631 /*
3632 * The .md-input class is added to the input/textarea
3633 */
3634 .md-input {
3635 order: 2;
3636 display: block;
3637 margin-top: 0;
3638
3639 background: none;
3640 padding-top: $input-padding-top;
3641 padding-bottom: $input-border-width-focused - $input-border-width-default;
3642 padding-left: 2px;
3643 padding-right: 2px;
3644 border-width: 0 0 $input-border-width-default 0;
3645 line-height: $input-line-height;
3646 height: $input-line-height + ($input-padding-top * 2);
3647 -ms-flex-preferred-size: $input-line-height; //IE fix
3648 border-radius: 0;
3649 border-style: solid; // Firefox fix
3650
3651 // Fix number inputs in Firefox to be full-width
3652 width: 100%;
3653 box-sizing: border-box;
3654
3655 // Hacky fix to force vertical alignment between `input` and `textarea`
3656 // Input and textarea do not align by default:
3657 // http://jsbin.com/buqomevage/1/edit?html,css,js,output
3658 @include rtl(float, left, right);
3659
3660 &:focus {
3661 outline: none;
3662 }
3663 &:invalid {
3664 outline: none;
3665 box-shadow: none;
3666 }
3667
3668 &.md-no-flex {
3669 flex: none !important;
3670 }
3671 }
3672
3673 .md-char-counter {
3674 @include rtl(text-align, right, left);
3675 @include rtl(padding-right, $input-container-padding, 0);
3676 @include rtl(padding-left, 0, $input-container-padding);
3677 }
3678
3679 //
3680 // ngMessage base styles - animations moved to input.js
3681 //
3682 .md-input-messages-animation {
3683 position: relative;
3684 order: 4;
3685 overflow: hidden;
3686 @include rtl(clear, left, right);
3687
3688 &.ng-enter {
3689 // Upon entering the DOM, messages should be hidden
3690 .md-input-message-animation {
3691 opacity: 0;
3692 margin-top: -100px;
3693 }
3694 }
3695 }
3696
3697 .md-input-message-animation, .md-char-counter {
3698 font-size: $input-error-font-size;
3699 line-height: $input-error-line-height;
3700 overflow: hidden;
3701
3702 transition: $swift-ease-in;
3703
3704 // Default state for messages is to be visible
3705 opacity: 1;
3706 margin-top: 0;
3707
3708 // Add some top padding which is equal to half the difference between the expected height
3709 // and the actual height
3710 padding-top: $error-padding-top;
3711
3712 &:not(.md-char-counter) {
3713 // Add some padding so that the messages don't touch the character counter
3714 @include rtl(padding-right, rem(0.5), 0);
3715 @include rtl(padding-left, 0, rem(0.5));
3716 }
3717 }
3718
3719 &:not(.md-input-invalid) {
3720 .md-auto-hide {
3721 .md-input-message-animation {
3722 opacity: 0;
3723 margin-top: -100px;
3724 }
3725 }
3726 }
3727
3728 // Note: This is a workaround to fix an ng-enter flicker bug
3729 .md-input-message-animation {
3730 &:not(.ng-animate) {
3731 opacity: 0;
3732 margin-top: -100px;
3733 }
3734 }
3735
3736 .md-input-message-animation {
3737 &.ng-enter {
3738 opacity: 0;
3739 margin-top: -100px;
3740 }
3741 }
3742
3743 &.md-input-focused,
3744 &.md-input-has-placeholder,
3745 &.md-input-has-value {
3746 label:not(.md-no-float) {
3747 transform: translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale);
3748 transition: transform $swift-ease-out-timing-function $swift-ease-out-duration,
3749 width $swift-ease-out-timing-function $swift-ease-out-duration;
3750 }
3751 }
3752
3753 // If we have an existing value; don't animate the transform as it happens on page load and
3754 // causes erratic/unnecessary animation
3755 &.md-input-has-value {
3756 label {
3757 transition: none;
3758 }
3759 }
3760
3761 // Use wide border in error state or in focused state
3762 &.md-input-focused .md-input,
3763 .md-input.ng-invalid.ng-dirty,
3764 &.md-input-resized .md-input {
3765 padding-bottom: 0; // Increase border width by 1px, decrease padding by 1
3766 border-width: 0 0 $input-border-width-focused 0;
3767 }
3768
3769 .md-input {
3770 &[disabled],
3771 [disabled] & {
3772 // The negative border width offsets the dotted "border" so
3773 // it's placed in the same place as the solid one before it.
3774 background-position: bottom $input-border-width-default * -1 left 0;
3775 // This background-size is coordinated with a linear-gradient set in input-theme.scss
3776 // to create a dotted line under the input.
3777 background-size: 4px 1px;
3778 background-repeat: repeat-x;
3779 }
3780 }
3781
3782 &.md-icon-float {
3783
3784 transition: margin-top $swift-ease-out-duration $swift-ease-out-timing-function;
3785
3786 > label {
3787 pointer-events: none;
3788 position: absolute;
3789 }
3790
3791 > md-icon {
3792 top: $icon-top-offset;
3793 @include rtl(left, 2px, auto);
3794 @include rtl(right, auto, 2px);
3795 }
3796
3797 }
3798
3799 &.md-icon-left,
3800 &.md-icon-right {
3801 > label {
3802 &:not(.md-no-float):not(.md-container-ignore),
3803 .md-placeholder {
3804 width: calc(100% - #{$icon-offset} - #{$input-label-float-width});
3805 }
3806 }
3807 }
3808
3809 // icon offset should have higher priority as normal label
3810 &.md-icon-left {
3811 @include rtl(padding-left, $icon-offset, 0);
3812 @include rtl(padding-right, 0, $icon-offset);
3813 > label {
3814 @include rtl(left, $icon-offset, auto);
3815 @include rtl(right, auto, $icon-offset);
3816 }
3817 }
3818
3819 &.md-icon-right {
3820 @include rtl(padding-left, 0, $icon-offset);
3821 @include rtl(padding-right, $icon-offset, 0);
3822
3823 > md-icon:last-of-type {
3824 margin: 0;
3825
3826 @include rtl(right, 2px, auto);
3827 @include rtl(left, auto, 2px);
3828 }
3829 }
3830
3831 &.md-icon-left.md-icon-right {
3832 padding-left: $icon-offset;
3833 padding-right: $icon-offset;
3834
3835 > label {
3836 &:not(.md-no-float):not(.md-container-ignore),
3837 .md-placeholder {
3838 width: calc(100% - (#{$icon-offset} * 2));
3839 }
3840 }
3841 }
3842}
3843
3844.md-resize-wrapper {
3845 @include pie-clearfix();
3846 position: relative;
3847}
3848
3849.md-resize-handle {
3850 position: absolute;
3851 bottom: $input-resize-handle-height / -2;
3852 left: 0;
3853 height: $input-resize-handle-height;
3854 background: transparent;
3855 width: 100%;
3856 cursor: ns-resize;
3857}
3858
3859@media screen and (-ms-high-contrast: active) {
3860 md-input-container.md-default-theme > md-icon {
3861 fill: #fff;
3862 }
3863}
3864
3865$dense-baseline-grid: $baseline-grid / 2 !default;
3866
3867$list-h3-margin: 0 0 0px 0 !default;
3868$list-h4-margin: 3px 0 1px 0 !default;
3869$list-h4-font-weight: 400 !default;
3870$list-header-line-height: 1.2em !default;
3871$list-p-margin: 0 0 0 0 !default;
3872$list-p-line-height: 1.6em !default;
3873
3874$list-padding-top: $baseline-grid !default;
3875$list-padding-right: 0px !default;
3876$list-padding-left: 0px !default;
3877$list-padding-bottom: $baseline-grid !default;
3878
3879$item-padding-top: 0px !default;
3880$item-padding-right: 0px !default;
3881$item-padding-left: 0px !default;
3882$item-padding-bottom: 0px !default;
3883$list-item-padding-vertical: 0px !default;
3884$list-item-padding-horizontal: $baseline-grid * 2 !default;
3885$list-item-primary-width: $baseline-grid * 7 !default;
3886$list-item-primary-avatar-width: $baseline-grid * 5 !default;
3887$list-item-primary-icon-width: $baseline-grid * 3 !default;
3888$list-item-secondary-left-margin: $baseline-grid * 2 !default;
3889$list-item-secondary-button-width: $baseline-grid * 6 !default;
3890$list-item-inset-divider-offset: 9 * $baseline-grid !default;
3891$list-item-height: 6 * $baseline-grid !default;
3892$list-item-two-line-height: 9 * $baseline-grid !default;
3893$list-item-three-line-height: 11 * $baseline-grid !default;
3894
3895$list-item-dense-height: 12 * $dense-baseline-grid !default;
3896$list-item-dense-two-line-height: 15 * $dense-baseline-grid !default;
3897$list-item-dense-three-line-height: 19 * $dense-baseline-grid !default;
3898$list-item-dense-primary-icon-width: $dense-baseline-grid * 5 !default;
3899$list-item-dense-primary-avatar-width: $dense-baseline-grid * 9 !default;
3900$list-item-dense-header-font-size: round($subhead-font-size-base * 0.8) !default;
3901$list-item-dense-font-size: round($body-font-size-base * 0.85) !default;
3902$list-item-dense-line-height: 1.05 !default;
3903
3904md-list {
3905 display: block;
3906 padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;
3907
3908 .md-subheader {
3909 font-size: $body-font-size-base;
3910 font-weight: 500;
3911 letter-spacing: 0.010em;
3912 line-height: $list-header-line-height;
3913 }
3914
3915 &.md-dense {
3916 md-list-item {
3917 &,
3918 .md-list-item-inner {
3919 min-height: $list-item-dense-height;
3920 @include ie11-min-height-flexbug($list-item-dense-height);
3921
3922
3923 // Layout for controls in primary or secondary divs, or auto-infered first child
3924
3925 md-icon:first-child {
3926 width: $list-item-dense-primary-icon-width;
3927 height: $list-item-dense-primary-icon-width;
3928 }
3929
3930 > md-icon:first-child:not(.md-avatar-icon) {
3931 @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-icon-width, auto);
3932 }
3933 .md-avatar, .md-avatar-icon {
3934 @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-avatar-width, auto);
3935 }
3936 .md-avatar {
3937 flex: none;
3938 width: $list-item-dense-primary-avatar-width;
3939 height: $list-item-dense-primary-avatar-width;
3940 }
3941 }
3942
3943 &.md-2-line,
3944 &.md-3-line {
3945 &, & > .md-no-style {
3946 .md-list-item-text {
3947 &.md-offset {
3948 @include rtl-prop(margin-left, margin-right, $list-item-primary-width, auto);
3949 }
3950
3951 h3,
3952 h4,
3953 p {
3954 line-height: $list-item-dense-line-height;
3955 font-size: $list-item-dense-font-size;
3956 }
3957
3958 h3 {
3959 font-size: $list-item-dense-header-font-size;
3960 }
3961 }
3962 }
3963 }
3964
3965 &.md-2-line {
3966 &, & > .md-no-style {
3967 min-height: $list-item-dense-two-line-height;
3968 @include ie11-min-height-flexbug($list-item-dense-two-line-height);
3969
3970 > .md-avatar, .md-avatar-icon {
3971 margin-top: $baseline-grid * 1.5;
3972 }
3973 }
3974 }
3975
3976 &.md-3-line {
3977 &, & > .md-no-style {
3978
3979 min-height: $list-item-dense-three-line-height;
3980 @include ie11-min-height-flexbug($list-item-dense-three-line-height);
3981
3982 > md-icon:first-child,
3983 > .md-avatar {
3984 margin-top: $baseline-grid * 2;
3985 }
3986 }
3987 }
3988 }
3989 }
3990}
3991
3992md-list-item {
3993 // Ensure nested dividers are properly positioned
3994 position: relative;
3995
3996 &.md-proxy-focus.md-focused .md-no-style {
3997 transition: background-color 0.15s linear;
3998 }
3999
4000 &._md-button-wrap {
4001 position: relative;
4002
4003 > div.md-button:first-child {
4004 // Layout - Vertically align the item content.
4005 display: flex;
4006 align-items: center;
4007 justify-content: flex-start;
4008
4009 padding: 0 16px;
4010 margin: 0;
4011
4012 font-weight: 400;
4013 @include rtl(text-align, left, right);
4014 border: medium none;
4015
4016 // The button executor should fill the whole list item.
4017 > .md-button:first-child {
4018 position: absolute;
4019 top: 0;
4020 left: 0;
4021 height: 100%;
4022
4023 margin: 0;
4024 padding: 0;
4025 }
4026
4027 .md-list-item-inner {
4028 // The list item content should fill the complete width.
4029 width: 100%;
4030 min-height: inherit;
4031 }
4032
4033 }
4034
4035 }
4036
4037 &.md-no-proxy,
4038 .md-no-style {
4039 position: relative;
4040 padding: $list-item-padding-vertical $list-item-padding-horizontal;
4041
4042 // Layout [flex='auto']
4043 flex: 1 1 auto;
4044
4045 &.md-button {
4046 font-size: inherit;
4047 height: inherit;
4048 @include rtl(text-align, left, right);
4049 text-transform: none;
4050 width: 100%;
4051 white-space: normal;
4052 flex-direction: inherit;
4053 align-items: inherit;
4054 border-radius: 0;
4055 margin: 0;
4056
4057 & > .md-ripple-container {
4058 border-radius: 0;
4059 }
4060 }
4061 &:focus {
4062 outline: none
4063 }
4064 }
4065 &.md-clickable:hover {
4066 cursor: pointer;
4067 }
4068
4069 md-divider {
4070 position: absolute;
4071 bottom: 0;
4072 @include rtl-prop(left, right, 0, auto);
4073 width: 100%;
4074 &[md-inset] {
4075 @include rtl-prop(left, right, $list-item-inset-divider-offset, auto);
4076 width: calc(100% - #{$list-item-inset-divider-offset});
4077 margin: 0 !important;
4078 }
4079 }
4080
4081 &,
4082 .md-list-item-inner {
4083
4084 // Layout [flex layout-align='start center']
4085 display: flex;
4086 justify-content: flex-start;
4087 align-items: center;
4088
4089 min-height: $list-item-height;
4090 @include ie11-min-height-flexbug($list-item-height);
4091
4092 height: auto;
4093
4094 // Layout for controls in primary or secondary divs, or auto-infered first child
4095 & > div.md-primary > md-icon:not(.md-avatar-icon),
4096 & > div.md-secondary > md-icon:not(.md-avatar-icon),
4097 & > md-icon:first-child:not(.md-avatar-icon),
4098 > md-icon.md-secondary:not(.md-avatar-icon) {
4099 width: $list-item-primary-icon-width;
4100 margin-top: 16px;
4101 margin-bottom: 12px;
4102 box-sizing: content-box;
4103 }
4104 & > div.md-primary > md-checkbox,
4105 & > div.md-secondary > md-checkbox,
4106 & > md-checkbox,
4107 md-checkbox.md-secondary {
4108 align-self: center;
4109 .md-label {
4110 display: none;
4111 }
4112 }
4113
4114 & > md-icon:first-child:not(.md-avatar-icon) {
4115 @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-icon-width, auto);
4116 }
4117
4118 & .md-avatar, .md-avatar-icon {
4119 margin-top: $baseline-grid;
4120 margin-bottom: $baseline-grid;
4121 @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-avatar-width, auto);
4122 border-radius: 50%;
4123 box-sizing: content-box;
4124 }
4125 & .md-avatar {
4126 flex: none;
4127 width: $list-item-primary-avatar-width;
4128 height: $list-item-primary-avatar-width;
4129 }
4130 & .md-avatar-icon {
4131 padding: 8px;
4132
4133 // Set the width/height to the same as the icon to fix issue on iOS Safari where the
4134 // height: 100% was causing it to be larger than it's parent
4135 svg {
4136 width: $icon-size;
4137 height: $icon-size;
4138 }
4139 }
4140
4141 & > md-checkbox {
4142 width: 3 * $baseline-grid;
4143 @include rtl(margin-left, 3px, 29px);
4144 @include rtl(margin-right, 29px, 3px);
4145 margin-top: 16px;
4146 }
4147
4148 .md-secondary-container {
4149 display: flex;
4150 align-items: center;
4151
4152 // Per W3C: https://www.w3.org/TR/css-flexbox/#flex-common
4153 // By default, flex items won’t shrink below their minimum content size.
4154 // Safari doesn't follow that specification due to a bug and expects the developer to
4155 // explicitly disable flex shrinking.
4156 flex-shrink: 0;
4157
4158 // Using margin auto to move them to the end of the list item is more elegant, because it has
4159 // a lower priority than a flex filler and isn't introducing any overflow issues.
4160 // The margin on the top is important to align multiple secondary items vertically.
4161 margin: auto;
4162
4163 @include rtl(margin-right, 0, auto);
4164 @include rtl(margin-left, auto, 0);
4165
4166 .md-button, .md-icon-button {
4167 &:last-of-type {
4168 // Reset 6px margin for the button.
4169 @include rtl-prop(margin-right, margin-left, 0, auto);
4170 }
4171 }
4172
4173 md-checkbox {
4174 margin-top: 0;
4175 margin-bottom: 0;
4176
4177 &:last-child {
4178 width: 3 * $baseline-grid;
4179 @include rtl-prop(margin-right, margin-left, 0, auto);
4180 }
4181 }
4182
4183 md-switch {
4184 margin-top: 0;
4185 margin-bottom: 0;
4186
4187 @include rtl-prop(margin-right, margin-left, -6px, auto);
4188 }
4189 }
4190
4191 & > p, & > .md-list-item-inner > p {
4192 flex: 1 1 auto;
4193 margin: 0;
4194 }
4195 }
4196
4197 &.md-2-line,
4198 &.md-3-line {
4199 &, & > .md-no-style {
4200 align-items: flex-start;
4201 justify-content: center;
4202
4203 &.md-long-text {
4204 margin-top: $baseline-grid;
4205 margin-bottom: $baseline-grid;
4206 }
4207
4208 .md-list-item-text {
4209 flex: 1 1 auto;
4210 margin: auto;
4211 text-overflow: ellipsis;
4212 overflow: hidden;
4213
4214 &.md-offset {
4215 @include rtl-prop(margin-left, margin-right, $list-item-primary-width, auto);
4216 }
4217
4218 h3 {
4219 font-size: $subhead-font-size-base;
4220 font-weight: 400;
4221 letter-spacing: 0.010em;
4222 margin: $list-h3-margin;
4223 line-height: $list-header-line-height;
4224 overflow: hidden;
4225 white-space: nowrap;
4226 text-overflow: ellipsis;
4227 }
4228 h4 {
4229 font-size: $body-font-size-base;
4230 letter-spacing: 0.010em;
4231 margin: $list-h4-margin;
4232 font-weight: $list-h4-font-weight;
4233 line-height: $list-header-line-height;
4234 overflow: hidden;
4235 white-space: nowrap;
4236 text-overflow: ellipsis;
4237 }
4238 p {
4239 font-size: $body-font-size-base;
4240 font-weight: 500;
4241 letter-spacing: 0.010em;
4242 margin: $list-p-margin;
4243 line-height: $list-p-line-height;
4244 }
4245 }
4246 }
4247 }
4248
4249 &.md-2-line {
4250 &, & > .md-no-style {
4251 height: auto;
4252
4253 min-height: $list-item-two-line-height;
4254 @include ie11-min-height-flexbug($list-item-two-line-height);
4255
4256 > .md-avatar, .md-avatar-icon {
4257 margin-top: $baseline-grid * 1.5;
4258 }
4259
4260 > md-icon:first-child {
4261 align-self: flex-start;
4262 }
4263
4264 .md-list-item-text {
4265 flex: 1 1 auto;
4266 }
4267 }
4268 }
4269
4270 &.md-3-line {
4271 &, & > .md-no-style {
4272 height: auto;
4273
4274 min-height: $list-item-three-line-height;
4275 @include ie11-min-height-flexbug($list-item-three-line-height);
4276
4277 > md-icon:first-child,
4278 > .md-avatar {
4279 margin-top: $baseline-grid * 2;
4280 }
4281 }
4282 }
4283}
4284
4285$menu-border-radius: 2px !default;
4286$max-visible-items: 6 !default;
4287$menu-item-height: 6 * $baseline-grid !default;
4288$dense-menu-item-height: 4 * $baseline-grid !default;
4289$max-menu-height: 2 * $baseline-grid + $max-visible-items * $menu-item-height !default;
4290$max-dense-menu-height: 2 * $baseline-grid + $max-visible-items * $dense-menu-item-height !default;
4291
4292.md-open-menu-container {
4293 position: fixed;
4294 left: 0;
4295 top: 0;
4296 z-index: $z-index-menu;
4297 opacity: 0;
4298 border-radius: $menu-border-radius;
4299
4300 md-menu-divider {
4301 margin-top: $baseline-grid / 2;
4302 margin-bottom: $baseline-grid / 2;
4303 height: 1px;
4304 min-height: 1px;
4305 max-height: 1px;
4306 width: 100%;
4307 }
4308
4309 md-menu-content > * {
4310 opacity: 0;
4311 }
4312
4313 // Don't let the user click something until it's animated
4314 &:not(.md-clickable) {
4315 pointer-events: none;
4316 }
4317
4318 // enter: menu scales in, then list fade in.
4319 &.md-active {
4320 opacity: 1;
4321 transition: $swift-ease-out;
4322 transition-duration: 200ms;
4323 > md-menu-content > * {
4324 opacity: 1;
4325 transition: $swift-ease-in;
4326 transition-duration: 200ms;
4327 transition-delay: 100ms;
4328 }
4329 }
4330 // leave: the container fades out
4331 &.md-leave {
4332 opacity: 0;
4333 transition: $swift-ease-in;
4334 transition-duration: 250ms;
4335 }
4336}
4337
4338md-menu-content {
4339 display: flex;
4340 flex-direction: column;
4341 padding: $baseline-grid 0;
4342 max-height: $max-menu-height;
4343 overflow-y: auto;
4344 &.md-dense {
4345 max-height: $max-dense-menu-height;
4346 md-menu-item {
4347 height: $dense-menu-item-height;
4348 min-height: 0px;
4349 }
4350 }
4351}
4352
4353md-menu-item {
4354 display: flex;
4355 flex-direction: row;
4356 min-height: $menu-item-height;
4357 height: $menu-item-height;
4358 align-content: center;
4359 justify-content: flex-start;
4360
4361 > * {
4362 width: 100%;
4363 margin: auto 0;
4364 padding-left: 2*$baseline-grid;
4365 padding-right: 2*$baseline-grid;
4366 }
4367
4368 /*
4369 * We cannot use flex on <button> elements due to a bug in Firefox, so we also can't use it on
4370 * <a> elements. Add some top padding to fix alignment since buttons automatically align their
4371 * text vertically.
4372 */
4373 > a.md-button {
4374 padding-top: 5px;
4375 }
4376
4377 > .md-button {
4378 // Firefox-specific reset styling to fix alignment issues (see #8464)
4379 &::-moz-focus-inner {
4380 padding: 0;
4381 border: 0
4382 }
4383
4384 @include rtl(text-align, left, right);
4385
4386 display: inline-block;
4387 border-radius: 0;
4388 margin: auto 0;
4389 font-size: (2*$baseline-grid) - 1;
4390 text-transform: none;
4391 font-weight: 400;
4392 height: 100%;
4393 padding-left: 2*$baseline-grid;
4394 padding-right: 2*$baseline-grid;
4395 width:100%;
4396 md-icon {
4397 @include rtl(margin, auto 2*$baseline-grid auto 0, auto 0 auto 2*$baseline-grid);
4398 }
4399 p {
4400 display:inline-block;
4401 margin: auto;
4402 }
4403 span {
4404 margin-top: auto;
4405 margin-bottom: auto;
4406 }
4407 .md-ripple-container {
4408 border-radius: inherit;
4409 }
4410 }
4411}
4412
4413md-toolbar {
4414 .md-menu {
4415 height: auto;
4416 margin: auto;
4417 padding: 0;
4418 }
4419}
4420
4421@media (max-width: $layout-breakpoint-sm - 1) {
4422 md-menu-content {
4423 min-width: 112px;
4424 }
4425 @for $i from 3 through 7 {
4426 md-menu-content[width="#{$i}"] {
4427 min-width: $i * 56px;
4428 }
4429 }
4430}
4431
4432@media (min-width: $layout-breakpoint-sm) {
4433 md-menu-content {
4434 min-width: 96px;
4435 }
4436 @for $i from 3 through 7 {
4437 md-menu-content[width="#{$i}"] {
4438 min-width: $i * 64px;
4439 }
4440 }
4441}
4442
4443
4444md-toolbar {
4445 &.md-menu-toolbar {
4446 h2.md-toolbar-tools {
4447 line-height: 1rem;
4448 height: auto;
4449 padding: 3.5 * $baseline-grid;
4450 padding-bottom: 1.5 * $baseline-grid;
4451 }
4452 }
4453
4454 // Used to allow hovering from one menu to the
4455 // next when inside of a toolbar.
4456 &.md-has-open-menu {
4457 position: relative;
4458 z-index: $z-index-menu;
4459 }
4460}
4461
4462md-menu-bar {
4463 padding: 0 2.5 * $baseline-grid;
4464 display: block;
4465 position: relative;
4466 z-index: 2;
4467 .md-menu {
4468 display: inline-block;
4469 padding: 0;
4470 position: relative;
4471 }
4472 button {
4473 font-size: rem(1.4);
4474 padding: 0 1.25 * $baseline-grid;
4475 margin: 0;
4476 border: 0;
4477 background-color: transparent;
4478 height: 5 * $baseline-grid;
4479 }
4480
4481 md-backdrop.md-menu-backdrop {
4482 z-index: -2;
4483 }
4484}
4485
4486md-menu-content.md-menu-bar-menu.md-dense {
4487 max-height: none;
4488 padding: 2 * $baseline-grid 0;
4489 md-menu-item.md-indent {
4490 position: relative;
4491 > md-icon {
4492 position: absolute;
4493 padding: 0;
4494 width: 24px;
4495 top: 0.75 * $baseline-grid;
4496 @include rtl-prop(left, right, 3 * $baseline-grid, auto);
4497 }
4498 > .md-button, .md-menu > .md-button {
4499 @include rtl(padding, 0 4 * $baseline-grid 0 8 * $baseline-grid, 0 8 * $baseline-grid 0 4 * $baseline-grid);
4500 }
4501 }
4502 .md-button {
4503 min-height: 0;
4504 height: 4 * $baseline-grid;
4505 display: flex;
4506 span {
4507 flex-grow: 1;
4508 }
4509 span.md-alt-text {
4510 flex-grow: 0;
4511 align-self: flex-end;
4512 margin: 0 $baseline-grid;
4513 }
4514 }
4515 md-menu-divider {
4516 margin: $baseline-grid 0;
4517 }
4518
4519 md-menu-item > .md-button, .md-menu > .md-button {
4520 @include rtl(text-align, left, right);
4521 }
4522
4523 .md-menu {
4524 padding: 0;
4525 > .md-button {
4526 position: relative;
4527 margin: 0;
4528 width: 100%;
4529 text-transform: none;
4530 font-weight: normal;
4531 border-radius: 0px;
4532 @include rtl-prop(padding-left, padding-right, 2 * $baseline-grid, 0);
4533 &:after {
4534 display: block;
4535 content: '\25BC';
4536 position: absolute;
4537 top: 0px;
4538 speak: none;
4539 @include rtl(transform, rotate(270deg) scaleY(0.45) scaleX(0.9), rotate(90deg) scaleY(0.45) scaleX(0.9));
4540 @include rtl-prop(right, left, 3.5 * $baseline-grid, auto);
4541 }
4542 }
4543 }
4544}
4545
4546/** Matches "md-tabs md-tabs-wrapper" style. */
4547$md-nav-bar-height: 48px;
4548
4549.md-nav-bar {
4550 border-style: solid;
4551 border-width: 0 0 1px;
4552 height: $md-nav-bar-height;
4553 position: relative;
4554}
4555
4556._md-nav-bar-list {
4557 outline: none;
4558 list-style: none;
4559 margin: 0;
4560 padding: 0;
4561
4562 // Layout [layout='row']
4563 box-sizing: border-box;
4564 display: flex;
4565 flex-direction: row;
4566}
4567
4568.md-nav-item:first-of-type {
4569 margin-left: 8px;
4570}
4571
4572// override button styles to look more like tabs
4573.md-button._md-nav-button {
4574 line-height: 24px;
4575 margin: 0 4px;
4576 padding: 12px 16px;
4577 transition: background-color 0.35s $swift-ease-in-out-timing-function;
4578
4579 &:focus {
4580 outline: none;
4581 }
4582
4583 &:hover {
4584 background-color: inherit;
4585 }
4586}
4587
4588md-nav-ink-bar {
4589 $duration: $swift-ease-in-out-duration * 0.5;
4590 $multiplier: 0.5;
4591 bottom: 0;
4592 height: 2px;
4593 left: auto;
4594 position: absolute;
4595 right: auto;
4596 background-color: black;
4597
4598 &._md-left {
4599 transition: left ($duration * $multiplier) $swift-ease-in-out-timing-function,
4600 right $duration $swift-ease-in-out-timing-function;
4601 }
4602 &._md-right {
4603 transition: left $duration $swift-ease-in-out-timing-function,
4604 right ($duration * $multiplier) $swift-ease-in-out-timing-function;
4605 }
4606}
4607
4608md-nav-extra-content {
4609 min-height: 48px;
4610 padding-right: 12px;
4611}
4612
4613.md-panel-outer-wrapper {
4614 height: 100%;
4615 left: 0;
4616 position: absolute;
4617 top: 0;
4618 width: 100%;
4619}
4620
4621._md-panel-hidden {
4622 display: none;
4623}
4624
4625._md-panel-fullscreen {
4626 border-radius: 0;
4627 left: 0;
4628 min-height: 100%;
4629 min-width: 100%;
4630 position: fixed;
4631 top: 0;
4632}
4633
4634// Only used when no animations are present.
4635._md-panel-shown .md-panel {
4636 opacity: 1;
4637 transition: none;
4638}
4639
4640.md-panel {
4641 opacity: 0;
4642 position: fixed;
4643
4644 &._md-panel-shown {
4645 // Only used when custom animations are present.
4646 // Overridden by the default animations.
4647 opacity: 1;
4648 transition: none;
4649 }
4650
4651 &._md-panel-animate-enter {
4652 opacity: 1;
4653 transition: $material-enter;
4654 }
4655
4656 &._md-panel-animate-leave {
4657 opacity: 1;
4658 transition: $material-leave;
4659 }
4660
4661 &._md-panel-animate-scale-out,
4662 &._md-panel-animate-fade-out {
4663 opacity: 0;
4664 }
4665
4666 &._md-panel-backdrop {
4667 height: 100%;
4668 position: absolute;
4669 width: 100%;
4670 }
4671
4672 &._md-opaque-enter {
4673 opacity: .48;
4674 transition: opacity $material-enter-duration $material-enter-timing-function;
4675 }
4676
4677 &._md-opaque-leave {
4678 transition: opacity $material-leave-duration $material-leave-timing-function;
4679 }
4680}
4681
4682$progress-circular-indeterminate-duration: 2.9s !default;
4683
4684@keyframes indeterminate-rotate {
4685 0% { transform: rotate(0deg); }
4686 100% { transform: rotate(360deg); }
4687}
4688
4689// Used to avoid unnecessary layout
4690md-progress-circular {
4691 position: relative;
4692 display: block;
4693
4694 &._md-progress-circular-disabled {
4695 visibility: hidden;
4696 }
4697
4698 &.md-mode-indeterminate svg {
4699 animation: indeterminate-rotate $progress-circular-indeterminate-duration linear infinite;
4700 }
4701
4702 svg {
4703 position: absolute;
4704 overflow: visible;
4705 top: 0;
4706 left: 0;
4707 }
4708}
4709
4710$progress-linear-bar-height: 5px !default;
4711
4712md-progress-linear {
4713 display: block;
4714 position: relative;
4715 width: 100%;
4716 height: $progress-linear-bar-height;
4717
4718 padding-top: 0 !important;
4719 margin-bottom: 0 !important;
4720
4721 &._md-progress-linear-disabled {
4722 visibility: hidden;
4723 }
4724
4725 .md-container {
4726 display:block;
4727 position: relative;
4728 overflow: hidden;
4729
4730 width:100%;
4731 height: $progress-linear-bar-height;
4732
4733 transform: translate(0, 0) scale(1, 1);
4734
4735 .md-bar {
4736 position: absolute;
4737
4738 left: 0;
4739 top: 0;
4740 bottom: 0;
4741
4742 width: 100%;
4743 height: $progress-linear-bar-height;
4744 }
4745
4746 .md-dashed:before {
4747 content: "";
4748 display: none;
4749 position: absolute;
4750
4751 margin-top: 0;
4752 height: $progress-linear-bar-height;
4753 width: 100%;
4754
4755 background-color: transparent;
4756 background-size: 10px 10px !important;
4757 background-position: 0px -23px;
4758 }
4759
4760 .md-bar1, .md-bar2 {
4761
4762 // Just set the transition information here.
4763 // Note: the actual transform values are calculated in JS
4764
4765 transition: transform 0.2s linear;
4766 }
4767
4768 // ************************************************************
4769 // Animations for modes: Determinate, InDeterminate, and Query
4770 // ************************************************************
4771
4772 &.md-mode-query {
4773 .md-bar1 {
4774 display: none;
4775 }
4776 .md-bar2 {
4777 transition: all 0.2s linear;
4778 animation: query .8s infinite cubic-bezier(0.390, 0.575, 0.565, 1.000);
4779 }
4780 }
4781
4782 &.md-mode-determinate {
4783 .md-bar1 {
4784 display: none;
4785 }
4786 }
4787
4788 &.md-mode-indeterminate {
4789 .md-bar1 {
4790 animation: md-progress-linear-indeterminate-scale-1 4s infinite,
4791 md-progress-linear-indeterminate-1 4s infinite;
4792 }
4793 .md-bar2 {
4794 animation: md-progress-linear-indeterminate-scale-2 4s infinite,
4795 md-progress-linear-indeterminate-2 4s infinite;
4796 }
4797 }
4798
4799 &.ng-hide
4800 ._md-progress-linear-disabled & {
4801 animation: none;
4802
4803 .md-bar1 {
4804 animation-name: none;
4805 }
4806 .md-bar2 {
4807 animation-name: none;
4808 }
4809 }
4810 }
4811
4812 // Special animations for the `buffer` mode
4813
4814 .md-container.md-mode-buffer {
4815 background-color: transparent !important;
4816
4817 transition: all 0.2s linear;
4818
4819 .md-dashed:before {
4820 display: block;
4821 animation: buffer 3s infinite linear;
4822 }
4823 }
4824}
4825
4826@keyframes query {
4827 0% {
4828 opacity: 1;
4829 transform: translateX(35%) scale(.3, 1);
4830 }
4831 100% {
4832 opacity: 0;
4833 transform: translateX(-50%) scale(0, 1);
4834 }
4835}
4836@keyframes buffer {
4837 0% {
4838 opacity: 1;
4839 background-position: 0px -23px;
4840 }
4841 50% {
4842 opacity: 0;
4843 }
4844 100% {
4845 opacity: 1;
4846 background-position: -200px -23px;
4847 }
4848}
4849@keyframes md-progress-linear-indeterminate-scale-1 {
4850 0% {
4851 transform: scaleX(0.1);
4852 animation-timing-function: linear;
4853 }
4854 36.6% {
4855 transform: scaleX(0.1);
4856 animation-timing-function: cubic-bezier(0.334731432, 0.124819821, 0.785843996, 1);
4857 }
4858 69.15% {
4859 transform: scaleX(0.83);
4860 animation-timing-function: cubic-bezier(0.225732004, 0, 0.233648906, 1.3709798);
4861 }
4862 100% {
4863 transform: scaleX(0.1);
4864 }
4865}
4866@keyframes md-progress-linear-indeterminate-1 {
4867 0% {
4868 left: -378.6 * 100% / 360;
4869 animation-timing-function: linear;
4870 }
4871 20% {
4872 left: -378.6 * 100% / 360;
4873 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495818703);
4874 }
4875 69.15% {
4876 left: 77.4 * 100% / 360;
4877 animation-timing-function: cubic-bezier(0.302435, 0.38135197, 0.55, 0.956352125);
4878 }
4879 100% {
4880 left: 343.6 * 100% / 360;
4881 }
4882}
4883@keyframes md-progress-linear-indeterminate-scale-2 {
4884 0% {
4885 transform: scaleX(0.1);
4886 animation-timing-function: cubic-bezier(0.205028172, 0.057050836, 0.57660995, 0.453970841);
4887 }
4888 19.15% {
4889 transform: scaleX(0.57);
4890 animation-timing-function: cubic-bezier(0.152312994, 0.196431957, 0.648373778, 1.00431535);
4891 }
4892 44.15% {
4893 transform: scaleX(0.91);
4894 animation-timing-function: cubic-bezier(0.25775882, -0.003163357, 0.211761916, 1.38178961);
4895 }
4896 100% {
4897 transform: scaleX(0.1);
4898 }
4899}
4900@keyframes md-progress-linear-indeterminate-2 {
4901 0% {
4902 left: -197.6 * 100% / 360;
4903 animation-timing-function: cubic-bezier(0.15, 0, 0.5150584, 0.409684966);
4904 }
4905 25% {
4906 left: -62.1 * 100% / 360;
4907 animation-timing-function: cubic-bezier(0.3103299, 0.284057684, 0.8, 0.733718979);
4908 }
4909 48.35% {
4910 left: 106.2 * 100% / 360;
4911 animation-timing-function: cubic-bezier(0.4, 0.627034903, 0.6, 0.902025796);
4912 }
4913 100% {
4914 left: 422.6 * 100% / 360;
4915 }
4916}
4917
4918
4919
4920$radio-width: 20px !default;
4921$radio-height: $radio-width !default;
4922$radio-text-margin: 10px !default;
4923$radio-top-left: 12px !default;
4924$radio-margin: 16px !default;
4925
4926@mixin md-radio-button-disabled {
4927 cursor: default;
4928
4929 .md-container {
4930 cursor: default;
4931 }
4932}
4933
4934md-radio-button {
4935 box-sizing: border-box;
4936 display: block;
4937 margin-bottom: $radio-margin;
4938 white-space: nowrap;
4939 cursor: pointer;
4940 position: relative;
4941
4942 // When the radio-button is disabled.
4943 &[disabled] {
4944 @include md-radio-button-disabled();
4945 }
4946
4947 .md-container {
4948 position: absolute;
4949 top: 50%;
4950 transform: translateY(-50%);
4951 box-sizing: border-box;
4952 display: inline-block;
4953 width: $radio-width;
4954 height: $radio-width;
4955 cursor: pointer;
4956 @include rtl(left, 0, auto);
4957 @include rtl(right, auto, 0);
4958
4959 .md-ripple-container {
4960 position: absolute;
4961 display: block;
4962 width: auto;
4963 height: auto;
4964 left: -15px;
4965 top: -15px;
4966 right: -15px;
4967 bottom: -15px;
4968 }
4969
4970 &:before {
4971 box-sizing: border-box;
4972 background-color: transparent;
4973 border-radius: 50%;
4974 content: '';
4975 position: absolute;
4976 display: block;
4977 height: auto;
4978 left: 0;
4979 top: 0;
4980 right: 0;
4981 bottom: 0;
4982 transition: all 0.5s;
4983 width: auto;
4984 }
4985 }
4986
4987 &.md-align-top-left > div.md-container {
4988 top: $radio-top-left;
4989 }
4990
4991 .md-off {
4992 box-sizing: border-box;
4993 position: absolute;
4994 top: 0;
4995 left: 0;
4996 width: $radio-width;
4997 height: $radio-width;
4998 border-style: solid;
4999 border-width: 2px;
5000 border-radius: 50%;
5001 transition: border-color ease 0.28s;
5002 }
5003
5004 .md-on {
5005 box-sizing: border-box;
5006 position: absolute;
5007 top: 0;
5008 left: 0;
5009 width: $radio-width;
5010 height: $radio-width;
5011 border-radius: 50%;
5012 transition: transform ease 0.28s;
5013 transform: scale(0);
5014 }
5015
5016 &.md-checked .md-on {
5017 transform: scale(0.50);
5018 }
5019
5020 .md-label {
5021 box-sizing: border-box;
5022 position: relative;
5023 display: inline-block;
5024
5025 @include rtl(margin-left, $radio-text-margin + $radio-width, 0);
5026 @include rtl(margin-right, 0, $radio-text-margin + $radio-width);
5027
5028 vertical-align: middle;
5029 white-space: normal;
5030 pointer-events: none;
5031 width: auto;
5032 }
5033}
5034
5035md-radio-group {
5036 /** Layout adjustments for the radio group. */
5037 &.layout-column,
5038 &.layout-xs-column, &.layout-gt-xs-column,
5039 &.layout-sm-column, &.layout-gt-sm-column,
5040 &.layout-md-column, &.layout-gt-md-column,
5041 &.layout-lg-column, &.layout-gt-lg-column,
5042 &.layout-xl-column {
5043 md-radio-button {
5044 margin-bottom: $radio-margin;
5045 }
5046 }
5047
5048 &.layout-row,
5049 &.layout-xs-row, &.layout-gt-xs-row,
5050 &.layout-sm-row, &.layout-gt-sm-row,
5051 &.layout-md-row, &.layout-gt-md-row,
5052 &.layout-lg-row, &.layout-gt-lg-row,
5053 &.layout-xl-row {
5054 md-radio-button {
5055 margin-top: 0;
5056 margin-bottom: 0;
5057 @include rtl(margin-left, 0, $radio-margin);
5058 @include rtl(margin-right, $radio-margin, 0);
5059
5060 &:last-of-type {
5061 margin-left: 0;
5062 margin-right: 0;
5063 }
5064 }
5065 }
5066
5067 &:focus {
5068 outline: none;
5069 }
5070
5071 &.md-focused {
5072 .md-checked .md-container:before {
5073 left: -8px;
5074 top: -8px;
5075 right: -8px;
5076 bottom: -8px;
5077 }
5078 }
5079
5080 &[disabled] md-radio-button {
5081 @include md-radio-button-disabled();
5082 }
5083}
5084
5085.md-inline-form {
5086 md-radio-group {
5087 margin: 18px 0 19px;
5088 md-radio-button {
5089 display: inline-block;
5090 height: 30px;
5091 padding: 2px;
5092 box-sizing: border-box;
5093 margin-top: 0;
5094 margin-bottom: 0;
5095 }
5096 }
5097}
5098
5099@media screen and (-ms-high-contrast: active) {
5100 md-radio-button.md-default-theme .md-on {
5101 background-color: #fff;
5102 }
5103}
5104
5105$select-checkbox-border-radius: 2px !default;
5106$select-checkbox-border-width: 2px !default;
5107$select-checkbox-width: rem(1.4) !default;
5108$select-option-height: 48px !default;
5109$select-option-padding: 16px !default;
5110$select-container-padding: 16px !default;
5111$select-container-transition-duration: 350ms !default;
5112
5113$select-max-visible-options: 5 !default;
5114
5115// Fixes the animations with the floating label when select is inside an input container
5116md-input-container {
5117 &:not([md-no-float]) {
5118 .md-select-placeholder span:first-child {
5119 transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
5120 @include rtl(transform-origin, left top, right top);
5121 }
5122 }
5123 &.md-input-focused {
5124 &:not([md-no-float]) {
5125 .md-select-placeholder span:first-child {
5126 transform: translateY(-22px) translateX(-2px) scale(0.75);
5127 }
5128 }
5129 }
5130}
5131
5132.md-select-menu-container {
5133 position: fixed;
5134 left: 0;
5135 top: 0;
5136 z-index: $z-index-select;
5137 opacity: 0;
5138 display: none;
5139
5140 // Fix 1px alignment issue to line up with text inputs (and spec)
5141 transform: translateY(-1px);
5142
5143 // Don't let the user select a new choice while it's animating
5144 &:not(.md-clickable) {
5145 pointer-events: none;
5146 }
5147
5148 md-progress-circular {
5149 display: table;
5150 margin: 3*$baseline-grid auto !important;
5151 }
5152
5153
5154 // enter: md-select scales in, then options fade in.
5155 &.md-active {
5156 display: block;
5157 opacity: 1;
5158 md-select-menu {
5159 transition: $swift-ease-out;
5160 transition-duration: 150ms;
5161 > * {
5162 opacity: 1;
5163 transition: $swift-ease-in;
5164 transition-duration: 150ms;
5165 transition-delay: 100ms;
5166 }
5167 }
5168 }
5169
5170 // leave: the container fades out
5171 &.md-leave {
5172 opacity: 0;
5173 transition: $swift-ease-in;
5174 transition-duration: 250ms;
5175 }
5176}
5177
5178md-input-container > md-select {
5179 margin: 0;
5180 order: 2;
5181}
5182
5183
5184// Show the asterisk on the placeholder if the element is required
5185//
5186// NOTE: When the input has a value and uses a floating label, the floating label will show the
5187// asterisk denoting that it is required
5188md-input-container:not(.md-input-has-value) {
5189 md-select[required]:not(.md-no-asterisk), md-select.ng-required:not(.md-no-asterisk) {
5190 .md-select-value span:first-child:after {
5191 content: ' *';
5192 font-size: 13px;
5193 vertical-align: top;
5194 }
5195 }
5196}
5197
5198md-input-container.md-input-invalid {
5199 md-select {
5200 .md-select-value {
5201 border-bottom-style: solid;
5202 padding-bottom: 1px;
5203 }
5204 }
5205}
5206
5207md-select {
5208 display: flex;
5209 margin: 2.5*$baseline-grid 0 3*$baseline-grid + 2 0;
5210
5211 &[required], &.ng-required {
5212 &.ng-invalid:not(.md-no-asterisk) {
5213 .md-select-value span:first-child:after {
5214 content: ' *';
5215 font-size: 13px;
5216 vertical-align: top;
5217 }
5218 }
5219 }
5220
5221 &[disabled] .md-select-value {
5222 background-position: 0 bottom;
5223 // This background-size is coordinated with a linear-gradient set in select-theme.scss
5224 // to create a dotted line under the input.
5225 background-size: 4px 1px;
5226 background-repeat: repeat-x;
5227 margin-bottom: -1px; // Shift downward so dotted line is positioned the same as other bottom borders
5228 }
5229
5230 &:focus {
5231 outline: none;
5232 }
5233 &[disabled]:hover {
5234 cursor: default;
5235 }
5236 &:not([disabled]) {
5237 &:hover {
5238 cursor: pointer
5239 }
5240 &.ng-invalid.ng-touched {
5241 .md-select-value {
5242 border-bottom-style: solid;
5243 padding-bottom: 1px;
5244 }
5245 }
5246 &:focus {
5247 .md-select-value {
5248 border-bottom-width: 2px;
5249 border-bottom-style: solid;
5250 padding-bottom: 0;
5251 }
5252 &.ng-invalid.ng-touched {
5253 .md-select-value {
5254 padding-bottom: 0;
5255 }
5256 }
5257 }
5258 }
5259}
5260
5261// Fix value by 1px to align with standard text inputs (and spec)
5262md-input-container.md-input-has-value .md-select-value {
5263 > span:not(.md-select-icon) {
5264 transform: translate3d(0, 1px, 0);
5265 }
5266}
5267
5268.md-select-value {
5269 display: flex;
5270 align-items: center;
5271 padding: 2px 2px 1px;
5272 border-bottom-width: 1px;
5273 border-bottom-style: solid;
5274 background-color: rgba(0,0,0,0);
5275 position: relative;
5276 box-sizing: content-box;
5277 min-width: 8 * $baseline-grid;
5278 min-height: 26px;
5279 flex-grow: 1;
5280
5281
5282 > span:not(.md-select-icon) {
5283 max-width: 100%;
5284 flex: 1 1 auto;
5285 text-overflow: ellipsis;
5286 white-space: nowrap;
5287 overflow: hidden;
5288
5289 .md-text {
5290 display: inline;
5291 }
5292 }
5293
5294 .md-select-icon {
5295 display: block;
5296 align-items: flex-end;
5297 text-align: end;
5298 width: 3 * $baseline-grid;
5299 margin: 0 .5 * $baseline-grid;
5300 transform: translate3d(0, -2px, 0);
5301 font-size: 1.2rem;
5302 }
5303
5304 .md-select-icon:after {
5305 display: block;
5306 content: '\25BC';
5307 position: relative;
5308 top: 2px;
5309 speak: none;
5310 font-size: 13px;
5311 transform: scaleY(0.5) scaleX(1);
5312 }
5313
5314 &.md-select-placeholder {
5315 display: flex;
5316 order: 1;
5317 pointer-events: none;
5318 -webkit-font-smoothing: antialiased;
5319 padding-left: 2px;
5320 z-index: 1;
5321 }
5322}
5323
5324md-select-menu {
5325 display: flex;
5326 flex-direction: column;
5327 &.md-reverse {
5328 flex-direction: column-reverse;
5329 }
5330
5331 &:not(.md-overflow) {
5332 md-content {
5333 padding-top: $baseline-grid;
5334 padding-bottom: $baseline-grid;
5335 }
5336 }
5337
5338 box-shadow: $whiteframe-shadow-1dp;
5339 max-height: ($select-option-height * $select-max-visible-options) + 2 * $baseline-grid;
5340 min-height: $select-option-height;
5341 overflow-y: hidden;
5342
5343 @include rtl(transform-origin, left top, right top);
5344
5345 transform: scale(1.0);
5346
5347 md-content {
5348 min-width: 136px;
5349 min-height: $select-option-height;
5350 max-height: ($select-option-height * $select-max-visible-options) + 2 * $baseline-grid;
5351 overflow-y: auto;
5352 }
5353 > * {
5354 opacity: 0;
5355 }
5356}
5357
5358md-option {
5359 cursor: pointer;
5360 position: relative;
5361 display: flex;
5362 align-items: center;
5363 width: auto;
5364 transition: background 0.15s linear;
5365
5366 &[disabled] {
5367 cursor: default;
5368 }
5369
5370 &:focus {
5371 outline: none;
5372 }
5373
5374 .md-text {
5375 @include not-selectable();
5376 width: auto;
5377 white-space: nowrap;
5378 overflow: hidden;
5379 text-overflow: ellipsis;
5380 }
5381 padding: 0 $select-option-padding 0 $select-option-padding;
5382 height: $select-option-height;
5383}
5384
5385md-optgroup {
5386 display: block;
5387 label {
5388 display: block;
5389 font-size: rem(1.4);
5390 text-transform: uppercase;
5391 padding: $baseline-grid * 2;
5392 font-weight: 500;
5393 }
5394 md-option {
5395 padding-left: $select-option-padding * 2;
5396 padding-right: $select-option-padding * 2;
5397 }
5398}
5399
5400@media screen and (-ms-high-contrast: active) {
5401 .md-select-backdrop {
5402 background-color: transparent;
5403 }
5404 md-select-menu {
5405 border: 1px solid #fff;
5406 }
5407}
5408
5409md-select-menu[multiple] {
5410 md-option.md-checkbox-enabled {
5411 @include rtl(padding-left, $select-option-padding * 2.5, $select-option-padding);
5412 @include rtl(padding-right, $select-option-padding, $select-option-padding * 2.5);
5413
5414 @include checkbox-container('[selected]');
5415
5416 .md-container {
5417 @include rtl(margin-left, $select-option-padding * (2 / 3), auto);
5418 @include rtl(margin-right, auto, $select-option-padding * (2 / 3));
5419 }
5420 }
5421}
5422
5423$sidenav-mobile-width: 320px !default;
5424$sidenav-desktop-width: 400px !default;
5425$sidenav-min-space: 56px !default;
5426
5427md-sidenav {
5428 box-sizing: border-box;
5429 position: absolute;
5430 flex-direction: column;
5431 z-index: $z-index-sidenav;
5432
5433 width: $sidenav-mobile-width;
5434 max-width: $sidenav-mobile-width;
5435 bottom: 0;
5436 overflow: auto;
5437 -webkit-overflow-scrolling: touch;
5438
5439 ul {
5440 list-style: none;
5441 }
5442
5443 &.md-closed {
5444 display: none;
5445 }
5446 &.md-closed-add,
5447 &.md-closed-remove {
5448 display: flex;
5449 transition: 0.2s ease-in all;
5450 }
5451
5452 &.md-closed-add.md-closed-add-active,
5453 &.md-closed-remove.md-closed-remove-active {
5454 transition: $swift-ease-out;
5455 }
5456
5457 &.md-locked-open-add,
5458 &.md-locked-open-remove {
5459 position: static;
5460 display: flex;
5461 transform: translate3d(0, 0, 0);
5462 }
5463
5464 &.md-locked-open,
5465 &.md-locked-open.md-closed,
5466 &.md-locked-open.md-closed.md-sidenav-left,
5467 &.md-locked-open.md-closed.md-sidenav-right,
5468 &.md-locked-open-remove.md-closed {
5469 position: static;
5470 display: flex;
5471 transform: translate3d(0, 0, 0);
5472 }
5473 &.md-locked-open-remove-active {
5474 transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
5475 min-width $swift-ease-in-duration $swift-ease-in-timing-function;
5476 width: 0 !important;
5477 min-width: 0 !important;
5478 }
5479
5480 &.md-closed.md-locked-open-add {
5481 width: 0 !important;
5482 min-width: 0 !important;
5483 transform: translate3d(0%, 0, 0);
5484 }
5485
5486 &.md-closed.md-locked-open-add-active {
5487 transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
5488 min-width $swift-ease-in-duration $swift-ease-in-timing-function;
5489 width: $sidenav-mobile-width;
5490 min-width: $sidenav-mobile-width;
5491 transform: translate3d(0%, 0, 0);
5492 }
5493
5494 @extend .md-sidenav-left;
5495}
5496.md-sidenav-backdrop.md-locked-open {
5497 display: none;
5498}
5499
5500.md-sidenav-left {
5501 left: 0;
5502 top: 0;
5503 transform: translate3d(0%, 0, 0);
5504 &.md-closed {
5505 transform: translate3d(-100%, 0, 0);
5506 }
5507}
5508
5509.md-sidenav-right {
5510 left: 100%;
5511 top: 0;
5512 transform: translate(-100%, 0);
5513 &.md-closed {
5514 transform: translate(0%, 0);
5515 }
5516}
5517
5518@media (min-width: $layout-breakpoint-xs) {
5519 md-sidenav {
5520 max-width: $sidenav-desktop-width;
5521 }
5522}
5523
5524@media (max-width: $sidenav-desktop-width + $sidenav-min-space) {
5525 md-sidenav {
5526 width: calc(100% - #{$sidenav-min-space});
5527 min-width: calc(100% - #{$sidenav-min-space});
5528 max-width: calc(100% - #{$sidenav-min-space});
5529 }
5530}
5531
5532// IE Only
5533@media screen and (-ms-high-contrast: active) {
5534 .md-sidenav-left {
5535 border-right: 1px solid #fff;
5536 }
5537 .md-sidenav-right {
5538 border-left: 1px solid #fff;
5539 }
5540}
5541
5542$slider-background-color: rgb(200, 200, 200) !default;
5543$slider-size: 48px !default;
5544$slider-min-size: 128px !default;
5545
5546$slider-track-height: 2px !default;
5547$slider-thumb-width: 20px !default;
5548$slider-thumb-height: $slider-thumb-width !default;
5549
5550$slider-thumb-default-scale: 0.7 !default;
5551$slider-thumb-hover-scale: 0.8 !default;
5552$slider-thumb-focus-scale: 1 !default;
5553$slider-thumb-disabled-scale: 0.5 !default;
5554$slider-thumb-disabled-border: 4px !default;
5555$slider-thumb-focus-duration: .7s !default;
5556
5557$slider-focus-thumb-width: 34px !default;
5558$slider-focus-thumb-height: $slider-focus-thumb-width !default;
5559$slider-focus-ring-border-width: 3px !default;
5560
5561$slider-arrow-height: 16px !default;
5562$slider-arrow-width: 28px !default;
5563
5564$slider-sign-height: 28px !default;
5565$slider-sign-width: 28px !default;
5566$slider-sign-top: ($slider-size / 2) - ($slider-thumb-default-scale * $slider-thumb-height / 2) - ($slider-sign-height) - ($slider-arrow-height) + 10px !default;
5567
5568@keyframes sliderFocusThumb {
5569 0% {
5570 transform: scale($slider-thumb-default-scale);
5571 }
5572 30% {
5573 transform: scale($slider-thumb-focus-scale);
5574 }
5575 100% {
5576 transform: scale($slider-thumb-default-scale);
5577 }
5578}
5579
5580@keyframes sliderDiscreteFocusThumb {
5581 0% {
5582 transform: scale($slider-thumb-default-scale);
5583 }
5584 50% {
5585 transform: scale($slider-thumb-hover-scale);
5586 }
5587 100% {
5588 transform: scale(0);
5589 }
5590}
5591
5592@keyframes sliderDiscreteFocusRing {
5593 0% {
5594 transform: scale(0.7);
5595 opacity: 0;
5596 }
5597 50% {
5598 transform: scale(1);
5599 opacity: 1;
5600 }
5601 100% {
5602 transform: scale(0);
5603 }
5604}
5605
5606@mixin slider-thumb-position($width: $slider-thumb-width, $height: $slider-thumb-height) {
5607 position: absolute;
5608 @include rtl-prop(left, right, (-$width / 2), auto);
5609 top: ($slider-size / 2) - ($height / 2);
5610 width: $width;
5611 height: $height;
5612 border-radius: max($width, $height);
5613}
5614
5615md-slider {
5616 height: $slider-size;
5617 min-width: $slider-min-size;
5618 position: relative;
5619 margin-left: 4px;
5620 margin-right: 4px;
5621 padding: 0;
5622 display: block;
5623 flex-direction: row;
5624
5625 *, *:after {
5626 box-sizing: border-box;
5627 }
5628
5629 .md-slider-wrapper {
5630 outline: none;
5631 width: 100%;
5632 height: 100%;
5633 }
5634
5635 .md-slider-content {
5636 position: relative;
5637 }
5638
5639 /**
5640 * Track
5641 */
5642 .md-track-container {
5643 width: 100%;
5644 position: absolute;
5645 top: ($slider-size / 2) - ($slider-track-height) / 2;
5646 height: $slider-track-height;
5647 }
5648 .md-track {
5649 position: absolute;
5650 left: 0;
5651 right: 0;
5652 height: 100%;
5653 }
5654 .md-track-fill {
5655 transition: all .4s cubic-bezier(.25,.8,.25,1);
5656 transition-property: width, height;
5657 }
5658 .md-track-ticks {
5659 position: absolute;
5660 left: 0;
5661 right: 0;
5662 height: 100%;
5663 }
5664 .md-track-ticks canvas {
5665 // Restrict the width and the height of the canvas so that ticks are rendered correctly
5666 // when parent elements are resized. Else, the position of the ticks might
5667 // be incorrect as we only update the canvas width attribute on window resize.
5668 width: 100%;
5669 height: 100%;
5670 }
5671
5672 /**
5673 * Slider thumb
5674 */
5675 .md-thumb-container {
5676 position: absolute;
5677 @include rtl-prop(left, right, 0, auto);
5678 top: 50%;
5679 transform: translate3d(-50%,-50%,0);
5680 transition: all .4s cubic-bezier(.25,.8,.25,1);
5681 transition-property: left, right, bottom;
5682 }
5683 .md-thumb {
5684 z-index: 1;
5685
5686 @include slider-thumb-position($slider-thumb-width, $slider-thumb-height);
5687
5688 // We render thumb in an :after selector to fix an obscure problem with the
5689 // thumb being clipped by the focus-ring and focus-thumb while running the focus
5690 // animation.
5691 &:after {
5692 content: '';
5693 position: absolute;
5694 width: $slider-thumb-width;
5695 height: $slider-thumb-height;
5696 border-radius: max($slider-thumb-width, $slider-thumb-height);
5697 border-width: 3px;
5698 border-style: solid;
5699 transition: inherit;
5700 }
5701
5702 transform: scale($slider-thumb-default-scale);
5703 transition: all .4s cubic-bezier(.25,.8,.25,1);
5704 }
5705
5706 /* The sign that's focused in discrete mode */
5707 .md-sign {
5708
5709 /* Center the children (slider-thumb-text) */
5710 display: flex;
5711 align-items: center;
5712 justify-content: center;
5713
5714 position: absolute;
5715 left: -($slider-sign-height / 2);
5716 top: $slider-sign-top;
5717 width: $slider-sign-width;
5718 height: $slider-sign-height;
5719 border-radius: max($slider-sign-height, $slider-sign-width);
5720
5721 transform: scale(0.4) translate3d(0,(-$slider-sign-top + 10) / 0.4,0);
5722 transition: all 0.3s $swift-ease-in-out-timing-function;
5723
5724 /* The arrow pointing down under the sign */
5725 &:after {
5726 position: absolute;
5727 content: '';
5728 @include rtl-prop(left, right, -($slider-sign-width / 2 - $slider-arrow-width / 2), auto);
5729 border-radius: $slider-arrow-height;
5730 top: 19px;
5731 border-left: $slider-arrow-width / 2 solid transparent;
5732 border-right: $slider-arrow-width / 2 solid transparent;
5733 border-top-width: $slider-arrow-height;
5734 border-top-style: solid;
5735
5736 opacity: 0;
5737 transform: translate3d(0,-8px,0);
5738 transition: all 0.2s $swift-ease-in-out-timing-function;
5739 }
5740
5741 .md-thumb-text {
5742 z-index: 1;
5743 font-size: 12px;
5744 font-weight: bold;
5745 }
5746 }
5747
5748 /**
5749 * The border/background that comes in when focused in non-discrete mode
5750 */
5751 .md-focus-ring {
5752 @include slider-thumb-position($slider-focus-thumb-width, $slider-focus-thumb-height);
5753 transform: scale(.7);
5754 opacity: 0;
5755 // using a custom duration to match the spec example video
5756 transition: all ($slider-thumb-focus-duration / 2) $swift-ease-in-out-timing-function;
5757 }
5758 .md-disabled-thumb {
5759 @include slider-thumb-position(
5760 $slider-thumb-width + $slider-thumb-disabled-border * 2,
5761 $slider-thumb-height + $slider-thumb-disabled-border * 2
5762 );
5763 transform: scale($slider-thumb-disabled-scale);
5764 border-width: $slider-thumb-disabled-border;
5765 border-style: solid;
5766 display: none;
5767 }
5768
5769 &.md-min {
5770 .md-sign {
5771 opacity: 0;
5772 }
5773 }
5774
5775 &:focus {
5776 outline: none;
5777 }
5778
5779 /* Don't animate left/right while panning */
5780 &.md-dragging {
5781 .md-thumb-container,
5782 .md-track-fill {
5783 transition: none;
5784 }
5785 }
5786
5787 &:not([md-discrete]) {
5788 /* Hide the sign and ticks in non-discrete mode */
5789 .md-track-ticks,
5790 .md-sign {
5791 display: none;
5792 }
5793
5794 &:not([disabled]) {
5795 .md-slider-wrapper {
5796 .md-thumb:hover {
5797 transform: scale($slider-thumb-hover-scale);
5798 }
5799
5800 &.md-focused {
5801 .md-focus-ring {
5802 transform: scale(1);
5803 opacity: 1;
5804 }
5805 .md-thumb {
5806 animation: sliderFocusThumb $slider-thumb-focus-duration $swift-ease-in-out-timing-function;
5807 }
5808 }
5809 }
5810
5811 &.md-active {
5812 .md-slider-wrapper {
5813 .md-thumb {
5814 transform: scale($slider-thumb-focus-scale);
5815 }
5816 }
5817 }
5818 }
5819 }
5820
5821 &[md-discrete] {
5822 &:not([disabled]) {
5823 .md-slider-wrapper {
5824 &.md-focused {
5825 .md-focus-ring {
5826 transform: scale(0);
5827 animation: sliderDiscreteFocusRing .5s $swift-ease-in-out-timing-function;
5828 }
5829 .md-thumb {
5830 animation: sliderDiscreteFocusThumb .5s $swift-ease-in-out-timing-function;
5831 }
5832 }
5833 }
5834 .md-slider-wrapper.md-focused,
5835 &.md-active {
5836 .md-thumb {
5837 transform: scale(0);
5838 }
5839 .md-sign,
5840 .md-sign:after {
5841 opacity: 1;
5842 transform: translate3d(0,0,0) scale(1.0);
5843 }
5844 }
5845 }
5846
5847 &[disabled][readonly] {
5848 .md-thumb {
5849 transform: scale(0);
5850 }
5851 .md-sign,
5852 .md-sign:after {
5853 opacity: 1;
5854 transform: translate3d(0,0,0) scale(1.0);
5855 }
5856 }
5857 }
5858
5859 &[disabled] {
5860 .md-track-fill {
5861 display: none;
5862 }
5863 .md-track-ticks {
5864 opacity: 0;
5865 }
5866 &:not([readonly]) .md-sign {
5867 opacity: 0;
5868 }
5869 .md-thumb {
5870 transform: scale($slider-thumb-disabled-scale);
5871 }
5872 .md-disabled-thumb {
5873 display: block;
5874 }
5875 }
5876
5877 &[md-vertical] {
5878 flex-direction: column;
5879 min-height: $slider-min-size;
5880 min-width: 0;
5881
5882 .md-slider-wrapper {
5883 flex: 1;
5884 padding-top: 12px;
5885 padding-bottom: 12px;
5886 width: $slider-size;
5887 align-self: center;
5888 display: flex;
5889 justify-content: center;
5890 }
5891
5892 .md-track-container {
5893 height: 100%;
5894 width: $slider-track-height;
5895 top: 0;
5896 left: calc(50% - (#{$slider-track-height} / 2));
5897 }
5898
5899 .md-thumb-container {
5900 top: auto;
5901 margin-bottom: ($slider-size / 2) - ($slider-track-height) / 2;
5902 left: calc(50% - 1px);
5903 bottom: 0;
5904
5905 .md-thumb:after {
5906 left: 1px;
5907 }
5908
5909 .md-focus-ring {
5910 left: -(($slider-focus-thumb-width / 2) - ($slider-track-height / 2));
5911 }
5912 }
5913
5914 .md-track-fill {
5915 bottom: 0;
5916 }
5917
5918 &[md-discrete] {
5919 .md-sign {
5920 $sign-top: -($slider-sign-top / 2) + 1;
5921
5922 left: -$slider-sign-height - 12;
5923 top: $sign-top;
5924
5925 transform: scale(0.4) translate3d((-$slider-sign-top + 10) / 0.4, 0 ,0);
5926
5927 /* The arrow pointing left next the sign */
5928 &:after {
5929 top: $sign-top;
5930 left: 19px;
5931 border-top: $slider-arrow-width / 2 solid transparent;
5932 border-right: 0;
5933 border-bottom: $slider-arrow-width / 2 solid transparent;
5934 border-left-width: $slider-arrow-height;
5935 border-left-style: solid;
5936
5937 opacity: 0;
5938 transform: translate3d(0,-8px,0);
5939 transition: all 0.2s ease-in-out;
5940 }
5941
5942 .md-thumb-text {
5943 z-index: 1;
5944 font-size: 12px;
5945 font-weight: bold;
5946 }
5947 }
5948
5949 &.md-active,
5950 .md-focused,
5951 &[disabled][readonly]{
5952 .md-sign:after {
5953 top: 0;
5954 }
5955 }
5956 }
5957
5958 &[disabled][readonly] {
5959 .md-thumb {
5960 transform: scale(0);
5961 }
5962 .md-sign,
5963 .md-sign:after {
5964 opacity: 1;
5965 transform: translate3d(0,0,0) scale(1.0);
5966 }
5967 }
5968 }
5969 &[md-invert] {
5970 &:not([md-vertical]) .md-track-fill {
5971 @include rtl(left, auto, 0);
5972 @include rtl(right, 0, auto);
5973 }
5974 &[md-vertical] {
5975 .md-track-fill {
5976 bottom: auto;
5977 top: 0;
5978 }
5979 }
5980 }
5981}
5982
5983md-slider-container {
5984 display: flex;
5985 align-items: center;
5986 flex-direction: row;
5987
5988 $items-width: 25px;
5989 $items-height: $items-width;
5990 $items-margin: 16px;
5991
5992 & > *:first-child,
5993 & > *:last-child {
5994 &:not(md-slider){
5995 min-width: $items-width;
5996 max-width: ($items-width * 2) - 8;
5997 height: $items-height;
5998 transition: $swift-ease-out;
5999 transition-property: color, max-width;
6000 }
6001 }
6002
6003 & > *:first-child:not(md-slider) {
6004 @include rtl-prop(margin-right, margin-left, $items-margin, auto);
6005 }
6006
6007 & > *:last-child:not(md-slider) {
6008 @include rtl-prop(margin-left, margin-right, $items-margin, auto);
6009 }
6010
6011 &[md-vertical] {
6012 flex-direction: column;
6013
6014 & > *:first-child:not(md-slider),
6015 & > *:last-child:not(md-slider) {
6016 margin-right: 0;
6017 margin-left: 0;
6018 text-align: center;
6019 }
6020 }
6021
6022 md-input-container {
6023 input[type="number"] {
6024 text-align: center;
6025 @include rtl-prop(padding-left, padding-right, 15px, 0); // size of arrows
6026 height: $items-height * 2;
6027 margin-top: -$items-height;
6028 }
6029 }
6030}
6031
6032@media screen and (-ms-high-contrast: active) {
6033 md-slider.md-default-theme .md-track {
6034 border-bottom: 1px solid #fff;
6035 }
6036}
6037
6038
6039.md-sticky-clone {
6040 z-index: 2;
6041 top: 0;
6042 left: 0;
6043 right: 0;
6044 position: absolute !important;
6045
6046 transform: translate3d(-9999px,-9999px,0);
6047
6048 &[sticky-state="active"] {
6049 transform: translate3d(0, 0, 0);
6050 &:not(.md-sticky-no-effect) .md-subheader-inner {
6051 animation: subheaderStickyHoverIn 0.3s ease-out both;
6052 }
6053 }
6054}
6055
6056$subheader-line-height: 1em !default;
6057$subheader-font-size: rem(1.4) !default;
6058$subheader-padding: ($baseline-grid * 2) !default;
6059$subheader-font-weight: 500 !default;
6060$subheader-margin: 0 0 0 0 !default;
6061$subheader-sticky-shadow: 0px 2px 4px 0 rgba(0,0,0,0.16) !default;
6062
6063@keyframes subheaderStickyHoverIn {
6064 0% {
6065 box-shadow: 0 0 0 0 transparent;
6066 }
6067 100% {
6068 box-shadow: $subheader-sticky-shadow;
6069 }
6070}
6071@keyframes subheaderStickyHoverOut {
6072 0% {
6073 box-shadow: $subheader-sticky-shadow;
6074 }
6075 100% {
6076 box-shadow: 0 0 0 0 transparent;
6077 }
6078}
6079
6080.md-subheader-wrapper {
6081
6082 &:not(.md-sticky-no-effect) {
6083 .md-subheader {
6084 margin: 0;
6085 }
6086
6087 transition: 0.2s ease-out margin;
6088
6089 &.md-sticky-clone {
6090 z-index: 2;
6091 }
6092
6093 &[sticky-state="active"] {
6094 margin-top: -2px;
6095 }
6096
6097 &:not(.md-sticky-clone)[sticky-prev-state="active"] .md-subheader-inner:after {
6098 animation: subheaderStickyHoverOut 0.3s ease-out both;
6099 }
6100 }
6101
6102}
6103
6104.md-subheader {
6105 display: block;
6106 font-size: $subheader-font-size;
6107 font-weight: $subheader-font-weight;
6108 line-height: $subheader-line-height;
6109 margin: $subheader-margin;
6110 position: relative;
6111
6112 .md-subheader-inner {
6113 display: block;
6114 padding: $subheader-padding;
6115 }
6116
6117 .md-subheader-content {
6118 display: block;
6119 z-index: 1;
6120 position: relative;
6121 }
6122}
6123
6124$switch-width: 36px !default;
6125$switch-height: $baseline-grid * 3 !default;
6126$switch-bar-height: 14px !default;
6127$switch-thumb-size: 20px !default;
6128$switch-margin: 16px !default;
6129
6130.md-inline-form {
6131 md-switch {
6132 margin-top: 18px;
6133 margin-bottom: 19px;
6134 }
6135}
6136
6137md-switch {
6138 margin: $switch-margin 0;
6139 white-space: nowrap;
6140 cursor: pointer;
6141 outline: none;
6142 user-select: none;
6143 height: 30px;
6144 line-height: 28px;
6145 align-items: center;
6146 display: flex;
6147
6148 @include rtl(margin-left, inherit, $switch-margin);
6149 @include rtl(margin-right, $switch-margin, inherit);
6150
6151 &:last-of-type {
6152 @include rtl(margin-left, inherit, 0);
6153 @include rtl(margin-right, 0, inherit);
6154 }
6155
6156 &[disabled] {
6157 cursor: default;
6158
6159 .md-container {
6160 cursor: default;
6161 }
6162 }
6163
6164 .md-container {
6165 cursor: grab;
6166 width: $switch-width;
6167 height: $switch-height;
6168 position: relative;
6169 user-select: none;
6170 @include rtl-prop(margin-right, margin-left, 8px, auto);
6171 float: left;
6172 }
6173
6174 // If the user moves his mouse off the switch, stil display grabbing cursor
6175 &:not([disabled]) {
6176 .md-dragging,
6177 &.md-dragging .md-container {
6178 cursor: grabbing;
6179 }
6180 }
6181
6182 &.md-focused:not([disabled]) {
6183 .md-thumb:before {
6184 left: -8px;
6185 top: -8px;
6186 right: -8px;
6187 bottom: -8px;
6188 }
6189
6190 &:not(.md-checked) {
6191 .md-thumb:before {
6192 background-color: rgba(0, 0, 0, 0.12);
6193 }
6194 }
6195 }
6196
6197 .md-label {
6198 border-color: transparent;
6199 border-width: 0;
6200 float: left;
6201 }
6202
6203 .md-bar {
6204 left: 1px;
6205 width: $switch-width - 2px;
6206 top: $switch-height / 2 - $switch-bar-height / 2;
6207 height: $switch-bar-height;
6208 border-radius: 8px;
6209 position: absolute;
6210 }
6211
6212 .md-thumb-container {
6213 top: $switch-height / 2 - $switch-thumb-size / 2;
6214 left: 0;
6215 width: $switch-width - $switch-thumb-size;
6216 position: absolute;
6217 transform: translate3d(0,0,0);
6218 z-index: 1;
6219 }
6220 &.md-checked .md-thumb-container {
6221 transform: translate3d(100%,0,0);
6222 }
6223
6224 .md-thumb {
6225 position: absolute;
6226 margin: 0;
6227 left: 0;
6228 top: 0;
6229 outline: none;
6230 height: $switch-thumb-size;
6231 width: $switch-thumb-size;
6232 border-radius: 50%;
6233 box-shadow: $whiteframe-shadow-1dp;
6234
6235 &:before {
6236 background-color: transparent;
6237 border-radius: 50%;
6238 content: '';
6239 position: absolute;
6240 display: block;
6241 height: auto;
6242 left: 0;
6243 top: 0;
6244 right: 0;
6245 bottom: 0;
6246 transition: all 0.5s;
6247 width: auto;
6248 }
6249
6250 .md-ripple-container {
6251 position: absolute;
6252 display: block;
6253 width: auto;
6254 height: auto;
6255 left: -$switch-thumb-size;
6256 top: -$switch-thumb-size;
6257 right: -$switch-thumb-size;
6258 bottom: -$switch-thumb-size;
6259 }
6260 }
6261
6262 &:not(.md-dragging) {
6263 .md-bar,
6264 .md-thumb-container,
6265 .md-thumb {
6266 transition: $swift-linear;
6267 transition-property: transform, background-color;
6268 }
6269 .md-bar,
6270 .md-thumb {
6271 transition-delay: 0.05s;
6272 }
6273 }
6274
6275}
6276
6277@media screen and (-ms-high-contrast: active) {
6278 md-switch.md-default-theme .md-bar {
6279 background-color: #666;
6280 }
6281 md-switch.md-default-theme.md-checked .md-bar {
6282 background-color: #9E9E9E;
6283 }
6284 md-switch.md-default-theme .md-thumb {
6285 background-color: #fff;
6286 }
6287}
6288
6289$tabs-paginator-width: $baseline-grid * 4 !default;
6290$tabs-tab-width: $baseline-grid * 12 !default;
6291$tabs-header-height: 48px !default;
6292
6293@keyframes md-tab-content-hide {
6294 0% { opacity: 1; }
6295 50% { opacity: 1; }
6296 100% { opacity: 0; }
6297}
6298
6299md-tab-data {
6300 position: absolute;
6301 top: 0;
6302 left: 0;
6303 right: 0;
6304 bottom: 0;
6305 z-index: -1;
6306 opacity: 0;
6307}
6308
6309md-tabs {
6310 display: block;
6311 margin: 0;
6312 border-radius: 2px;
6313 overflow: hidden;
6314 position: relative;
6315 flex-shrink: 0;
6316 &:not(.md-no-tab-content):not(.md-dynamic-height) {
6317 min-height: 200 + $tabs-header-height;
6318 }
6319 &[md-align-tabs="bottom"] {
6320 padding-bottom: $tabs-header-height;
6321 md-tabs-wrapper {
6322 position: absolute;
6323 bottom: 0;
6324 left: 0;
6325 right: 0;
6326 height: $tabs-header-height;
6327 z-index: 2;
6328 }
6329 md-tabs-content-wrapper {
6330 top: 0;
6331 bottom: $tabs-header-height;
6332 }
6333 }
6334 &.md-dynamic-height {
6335 md-tabs-content-wrapper {
6336 min-height: 0;
6337 position: relative;
6338 top: auto;
6339 left: auto;
6340 right: auto;
6341 bottom: auto;
6342 overflow: visible;
6343 }
6344 md-tab-content {
6345 &.md-active {
6346 position: relative;
6347 }
6348 }
6349 }
6350 &[md-border-bottom] {
6351 md-tabs-wrapper {
6352 border-width: 0 0 1px;
6353 border-style: solid;
6354 }
6355 &:not(.md-dynamic-height) {
6356 md-tabs-content-wrapper {
6357 top: $tabs-header-height + 1;
6358 }
6359 }
6360 }
6361}
6362
6363md-tabs-wrapper {
6364 display: block;
6365 position: relative;
6366 // transform is needed for iOS Safari to prevent content from disappearing on scroll
6367 transform: translate3d(0, 0, 0);
6368 md-prev-button, md-next-button {
6369 height: 100%;
6370 width: $tabs-paginator-width;
6371 position: absolute;
6372 top: 50%;
6373 transform: translateY(-50%);
6374 line-height: 1em;
6375 z-index: 2;
6376 cursor: pointer;
6377 font-size: 16px;
6378 background: transparent no-repeat center center;
6379 transition: $swift-ease-in-out;
6380 &:focus {
6381 outline: none;
6382 }
6383 &.md-disabled {
6384 opacity: 0.25;
6385 cursor: default;
6386 }
6387 &.ng-leave {
6388 transition: none;
6389 }
6390 md-icon {
6391 position: absolute;
6392 top: 50%;
6393 left: 50%;
6394 transform: translate3d(-50%, -50%, 0);
6395 }
6396 }
6397 md-prev-button {
6398 @include rtl-prop(left, right, 0, auto);
6399 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPiA8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiA8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8ZyBpZD0iSGVhZGVyIj4gPGc+IDxyZWN0IHg9Ii02MTgiIHk9Ii0xMjA4IiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+IDwvZz4gPC9nPiA8ZyBpZD0iTGFiZWwiPiA8L2c+IDxnIGlkPSJJY29uIj4gPGc+IDxwb2x5Z29uIHBvaW50cz0iMTUuNCw3LjQgMTQsNiA4LDEyIDE0LDE4IDE1LjQsMTYuNiAxMC44LDEyIAkJIiBzdHlsZT0iZmlsbDp3aGl0ZTsiLz4gPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+IDwvZz4gPC9nPiA8ZyBpZD0iR3JpZCIgZGlzcGxheT0ibm9uZSI+IDxnIGRpc3BsYXk9ImlubGluZSI+IDwvZz4gPC9nPiA8L3N2Zz4NCg==');
6400 }
6401 md-next-button {
6402 @include rtl-prop(right, left, 0, auto);
6403 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPiA8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiA8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8ZyBpZD0iSGVhZGVyIj4gPGc+IDxyZWN0IHg9Ii02MTgiIHk9Ii0xMzM2IiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+IDwvZz4gPC9nPiA8ZyBpZD0iTGFiZWwiPiA8L2c+IDxnIGlkPSJJY29uIj4gPGc+IDxwb2x5Z29uIHBvaW50cz0iMTAsNiA4LjYsNy40IDEzLjIsMTIgOC42LDE2LjYgMTAsMTggMTYsMTIgCQkiIHN0eWxlPSJmaWxsOndoaXRlOyIvPiA8cmVjdCBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4gPC9nPiA8L2c+IDxnIGlkPSJHcmlkIiBkaXNwbGF5PSJub25lIj4gPGcgZGlzcGxheT0iaW5saW5lIj4gPC9nPiA8L2c+IDwvc3ZnPg0K');
6404 md-icon {
6405 transform: translate3d(-50%, -50%, 0) rotate(180deg);
6406 }
6407 }
6408 &.md-stretch-tabs {
6409 md-pagination-wrapper {
6410 width: 100%;
6411 display: flex;
6412 flex-direction: row;
6413 md-tab-item {
6414 flex-grow: 1;
6415 }
6416 }
6417 }
6418}
6419
6420md-tabs-canvas {
6421 @include pie-clearfix;
6422 position: relative;
6423 overflow: hidden;
6424 display: block;
6425 height: $tabs-header-height;
6426 .md-dummy-wrapper {
6427 position: absolute;
6428 top: 0;
6429 @include rtl-prop(left, right, 0, auto);
6430 }
6431 &.md-paginated {
6432 margin: 0 $tabs-paginator-width;
6433 }
6434 &.md-center-tabs {
6435 display: flex;
6436 flex-direction: column;
6437 text-align: center;
6438 .md-tab {
6439 float: none;
6440 display: inline-block;
6441 }
6442 }
6443}
6444
6445md-pagination-wrapper {
6446 @include pie-clearfix;
6447 height: $tabs-header-height;
6448 display: block;
6449 transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
6450 position: absolute;
6451 width: 999999px;
6452 @include rtl-prop(left, right, 0, auto);
6453 transform: translate3d(0, 0, 0);
6454 &.md-center-tabs {
6455 position: relative;
6456 width: auto;
6457 margin: 0 auto;
6458 }
6459}
6460
6461md-tabs-content-wrapper {
6462 display: block;
6463 position: absolute;
6464 top: $tabs-header-height;
6465 left: 0;
6466 right: 0;
6467 bottom: 0;
6468 overflow: hidden;
6469}
6470
6471md-tab-content {
6472 display: block;
6473 position: absolute;
6474 top: 0;
6475 left: 0;
6476 right: 0;
6477 bottom: 0;
6478 transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
6479 overflow: auto;
6480 // transform is needed for iOS Safari to prevent content from disappearing on scroll
6481 transform: translate3d(0, 0, 0);
6482 &.md-no-scroll {
6483 bottom: auto;
6484 overflow: hidden;
6485 }
6486 &.ng-leave, &.md-no-transition {
6487 transition: none;
6488 }
6489 &.md-left:not(.md-active) {
6490 @include rtl(transform, translateX(-100%), translateX(+100%));
6491 animation: 2 * $swift-ease-in-out-duration md-tab-content-hide;
6492 opacity: 0;
6493 * {
6494 transition: visibility 0s linear;
6495 transition-delay: $swift-ease-in-out-duration;
6496 visibility: hidden;
6497 }
6498 }
6499 &.md-right:not(.md-active) {
6500 @include rtl(transform, translateX(100%), translateX(-100%));
6501 animation: 2 * $swift-ease-in-out-duration md-tab-content-hide;
6502 opacity: 0;
6503 * {
6504 transition: visibility 0s linear;
6505 transition-delay: $swift-ease-in-out-duration;
6506 visibility: hidden;
6507 }
6508 }
6509 > div.ng-leave {
6510 animation: 2 * $swift-ease-in-out-duration md-tab-content-hide;
6511 }
6512}
6513
6514md-ink-bar {
6515 $duration: $swift-ease-in-out-duration * 0.5;
6516 $multiplier: 0.5;
6517 position: absolute;
6518 left: auto;
6519 right: auto;
6520 bottom: 0;
6521 height: 2px;
6522 &.md-left {
6523 transition: left ($duration * $multiplier) $swift-ease-in-out-timing-function,
6524 right $duration $swift-ease-in-out-timing-function;
6525 }
6526 &.md-right {
6527 transition: left $duration $swift-ease-in-out-timing-function,
6528 right ($duration * $multiplier) $swift-ease-in-out-timing-function;
6529 }
6530}
6531
6532md-tab {
6533 position: absolute;
6534 z-index: -1;
6535 left: -9999px;
6536}
6537
6538.md-tab {
6539 font-size: 14px;
6540 text-align: center;
6541 line-height: $tabs-header-height - 24;
6542 padding: 12px 24px;
6543 transition: background-color 0.35s $swift-ease-in-out-timing-function;
6544 cursor: pointer;
6545 white-space: nowrap;
6546 position: relative;
6547 text-transform: uppercase;
6548 @include rtl(float, left, right);
6549 font-weight: 500;
6550 box-sizing: border-box;
6551 overflow: hidden;
6552 text-overflow: ellipsis;
6553 &.md-focused {
6554 box-shadow: none;
6555 outline: none;
6556 }
6557 &.md-active {
6558 cursor: default;
6559 }
6560 &.md-disabled {
6561 pointer-events: none;
6562 touch-action: pan-y;
6563 user-select: none;
6564 -webkit-user-drag: none;
6565 opacity: 0.5;
6566 cursor: default;
6567 }
6568 &.ng-leave {
6569 transition: none;
6570 }
6571}
6572
6573md-toolbar + md-tabs {
6574 border-top-left-radius: 0;
6575 border-top-right-radius: 0;
6576}
6577
6578// See height set globally, depended on by buttons
6579
6580$md-toast-content-padding: 3 * $baseline-grid - $button-left-right-padding !default;
6581$md-toast-button-left-margin: 3 * $baseline-grid - 2 * $button-left-right-padding !default;
6582$md-toast-text-padding: $button-left-right-padding !default;
6583
6584
6585.md-toast-text {
6586 padding: 0 $md-toast-text-padding;
6587}
6588
6589md-toast {
6590 position: absolute;
6591 z-index: $z-index-toast;
6592
6593 box-sizing: border-box;
6594 cursor: default;
6595 overflow: hidden;
6596
6597 // Add some padding to the outer toast container so that the wrapper's box shadow is visible
6598 padding: $toast-margin;
6599
6600 // Setup opacity transition on whole toast
6601 opacity: 1;
6602 transition: $swift-ease-out;
6603
6604 .md-toast-content {
6605 display: flex;
6606 direction: row;
6607 align-items: center;
6608
6609 max-height: 7 * $toast-height;
6610 max-width: 100%;
6611
6612 min-height: 48px;
6613 // Since we're vertically centering our text by using flexbox and having a min-height, we need to apply
6614 // a fix for an IE11 flexbug, otherwise the text won't be centered vertically.
6615 @include ie11-min-height-flexbug(48px);
6616
6617 padding: 0 $md-toast-content-padding;
6618
6619 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
6620 border-radius: 2px;
6621 font-size: 14px;
6622
6623 overflow: hidden;
6624
6625 // Setup for transform transitions on inner content
6626 transform: translate3d(0, 0, 0) rotateZ(0deg);
6627 transition: $swift-ease-out;
6628
6629 @include rtl(justify-content, flex-start, flex-end);
6630
6631 span {
6632 // Layout [flex]
6633 flex:1 1 0%;
6634 box-sizing:border-box;
6635 min-width :0;
6636 }
6637 }
6638
6639 &.md-capsule {
6640 border-radius: 24px;
6641
6642 .md-toast-content {
6643 border-radius: 24px;
6644 }
6645 }
6646
6647 &.ng-leave-active {
6648 .md-toast-content {
6649 transition: $swift-ease-in;
6650 }
6651 }
6652
6653 /* Transition differently when swiping */
6654 &.md-swipeleft,
6655 &.md-swiperight,
6656 &.md-swipeup,
6657 &.md-swipedown {
6658 .md-toast-content {
6659 transition: $swift-ease-out;
6660 }
6661 }
6662
6663 &.ng-enter {
6664 opacity: 0;
6665 .md-toast-content {
6666 transform: translate3d(0, 100%, 0);
6667 }
6668 &.md-top {
6669 .md-toast-content {
6670 transform: translate3d(0, -100%, 0);
6671 }
6672 }
6673 &.ng-enter-active {
6674 opacity: 1;
6675 .md-toast-content {
6676 transform: translate3d(0, 0, 0);
6677 }
6678 }
6679 }
6680 /*
6681 * When the toast doesn't take up the whole screen,
6682 * make it rotate when the user swipes it away
6683 */
6684 &.ng-leave.ng-leave-active {
6685 .md-toast-content {
6686 opacity: 0;
6687 transform: translate3d(0, 100%, 0);
6688 }
6689
6690 &.md-swipeup {
6691 .md-toast-content {
6692 transform: translate3d(0, -50%, 0);
6693 }
6694 }
6695 &.md-swipedown {
6696 .md-toast-content {
6697 transform: translate3d(0, 50%, 0);
6698 }
6699 }
6700 &.md-top {
6701 .md-toast-content {
6702 transform: translate3d(0, -100%, 0);
6703 }
6704 }
6705 }
6706
6707 .md-action {
6708 line-height: 19px;
6709 margin-left: 24px;
6710 margin-right: 0;
6711 cursor: pointer;
6712 text-transform: uppercase;
6713 float: right;
6714 }
6715
6716 .md-button {
6717 min-width: 0;
6718 @include rtl(margin-right, 0, $md-toast-button-left-margin);
6719 @include rtl(margin-left, $md-toast-button-left-margin, 0);
6720 }
6721}
6722
6723@media (max-width: $layout-breakpoint-sm - 1) {
6724 md-toast {
6725 left: 0;
6726 right: 0;
6727 width: 100%;
6728 max-width: 100%;
6729 min-width: 0;
6730 border-radius: 0;
6731 bottom: 0;
6732 padding: 0;
6733
6734 &.ng-leave.ng-leave-active {
6735 &.md-swipeup {
6736 .md-toast-content {
6737 transform: translate3d(0, -50%, 0);
6738 }
6739 }
6740 &.md-swipedown {
6741 .md-toast-content {
6742 transform: translate3d(0, 50%, 0);
6743 }
6744 }
6745 }
6746 }
6747}
6748
6749@media (min-width: $layout-breakpoint-sm) {
6750 md-toast {
6751 min-width: 288px + $toast-margin * 2;
6752 &.md-bottom {
6753 bottom: 0;
6754 }
6755 &.md-left {
6756 left: 0;
6757 }
6758 &.md-right {
6759 right: 0;
6760 }
6761 &.md-top {
6762 top: 0;
6763 }
6764
6765 // Support for RTL alignment
6766 &._md-start {
6767 @include rtl-prop(left, right, 0, auto);
6768 }
6769
6770 &._md-end {
6771 @include rtl-prop(right, left, 0, auto);
6772 }
6773
6774 /*
6775 * When the toast doesn't take up the whole screen,
6776 * make it rotate when the user swipes it away
6777 */
6778 &.ng-leave.ng-leave-active {
6779 &.md-swipeleft {
6780 .md-toast-content {
6781 transform: translate3d(-50%, 0, 0);
6782 }
6783 }
6784 &.md-swiperight {
6785 .md-toast-content {
6786 transform: translate3d(50%, 0, 0);
6787 }
6788 }
6789 }
6790 }
6791}
6792
6793@media (min-width: $layout-breakpoint-lg) {
6794 md-toast {
6795 .md-toast-content {
6796 max-width: $baseline-grid * 71;
6797 }
6798 }
6799}
6800
6801@media screen and (-ms-high-contrast: active) {
6802 md-toast {
6803 border: 1px solid #fff;
6804 }
6805}
6806
6807
6808// While animating, set the toast parent's overflow to hidden so scrollbars do not appear
6809.md-toast-animating {
6810 overflow: hidden !important;
6811}
6812
6813// Standard/Desktop Heights
6814$md-toolbar-height: $baseline-grid * 8 !default;
6815$md-toolbar-medium-tall-height: 88px !default;
6816$md-toolbar-tall-height: 128px !default;
6817
6818// Mobile device heights
6819$md-toolbar-height-mobile-portrait: 56px !default;
6820$md-toolbar-height-mobile-landscape: 48px !default;
6821
6822$md-toolbar-indent-margin: 64px !default;
6823$md-toolbar-padding: 16px !default;
6824
6825$icon-button-margin-offset: rem(-0.800) !default;
6826
6827md-toolbar {
6828 box-sizing: border-box;
6829 display: flex;
6830 flex-direction: column;
6831
6832 position: relative;
6833 z-index: 2;
6834
6835 font-size: rem(2.0);
6836 min-height: $md-toolbar-height;
6837 width: 100%;
6838
6839 &._md-toolbar-transitions {
6840 transition-duration: $swift-ease-in-out-duration;
6841 transition-timing-function: $swift-ease-in-out-timing-function;
6842 transition-property: background-color, fill, color;
6843 }
6844
6845 &.md-whiteframe-z1-add, &.md-whiteframe-z1-remove {
6846 transition: box-shadow $swift-ease-in-out-duration linear;
6847 }
6848
6849 md-toolbar-filler {
6850 width: 9 * $baseline-grid;
6851 }
6852
6853 *,
6854 *:before,
6855 *:after {
6856 box-sizing: border-box;
6857 }
6858
6859 // By default $ngAnimate looks for transition durations on the element, when using ng-hide, ng-if, ng-show.
6860 // The toolbar has a transition duration applied, which means, that $ngAnimate delays the hide process.
6861 // To avoid this, we need to reset the transition, when $ngAnimate looks for the duration.
6862 &.ng-animate {
6863 transition: none;
6864 }
6865
6866 &.md-tall {
6867 height: $md-toolbar-tall-height;
6868 min-height: $md-toolbar-tall-height;
6869 max-height: $md-toolbar-tall-height;
6870 }
6871
6872 &.md-medium-tall {
6873 height: $md-toolbar-medium-tall-height;
6874 min-height: $md-toolbar-medium-tall-height;
6875 max-height: $md-toolbar-medium-tall-height;
6876
6877 .md-toolbar-tools {
6878 height: 48px;
6879 min-height: 48px;
6880 max-height: 48px;
6881 }
6882 }
6883
6884 > .md-indent {
6885 @include rtl-prop(margin-left, margin-right, $md-toolbar-indent-margin, auto);
6886 }
6887
6888 ~ md-content {
6889 > md-list {
6890 padding: 0;
6891
6892 md-list-item:last-child {
6893 md-divider {
6894 display: none;
6895 }
6896 }
6897 }
6898 }
6899}
6900
6901.md-toolbar-tools {
6902 font-size: $title-font-size-base;
6903 letter-spacing: 0.005em;
6904 box-sizing: border-box;
6905 font-weight: 400;
6906 display: flex;
6907 align-items: center;
6908 flex-direction: row;
6909
6910 width: 100%;
6911 height: $md-toolbar-height;
6912 max-height: $md-toolbar-height;
6913 padding: 0 $md-toolbar-padding;
6914 margin: 0;
6915
6916 h1, h2, h3 {
6917 font-size: inherit;
6918 font-weight: inherit;
6919 margin: inherit;
6920 }
6921
6922 a {
6923 color: inherit;
6924 text-decoration: none;
6925 }
6926 .fill-height {
6927 display: flex;
6928 align-items: center;
6929 }
6930 .md-button {
6931 margin-top: 0;
6932 margin-bottom: 0;
6933
6934 &, &.md-icon-button md-icon {
6935 transition-duration: $swift-ease-in-out-duration;
6936 transition-timing-function: $swift-ease-in-out-timing-function;
6937 transition-property: background-color, fill, color;
6938
6939 // Normally .md-button is already resetting the transition, when $ngAnimate looks for the duration,
6940 // but in this case, the selector has a higher specificity than the `reset selector`, which means, that
6941 // we need to reset the transition our self.
6942 &.ng-animate {
6943 transition: none;
6944 }
6945 }
6946 }
6947 &> .md-button:first-child {
6948 @include rtl-prop(margin-left, margin-right, $icon-button-margin-offset, auto);
6949 }
6950 &> .md-button:last-child {
6951 @include rtl-prop(margin-right, margin-left, $icon-button-margin-offset, auto);
6952 }
6953
6954 &> md-menu:last-child {
6955 @include rtl-prop(margin-right, margin-left, $icon-button-margin-offset, auto);
6956 & > .md-button {
6957 @include rtl-prop(margin-right, margin-left, 0, auto);
6958 }
6959 }
6960
6961 @media screen and (-ms-high-contrast: active) {
6962 border-bottom: 1px solid #fff;
6963 }
6964}
6965
6966// Handle mobile portrait
6967@media (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: portrait) {
6968 md-toolbar {
6969 min-height: $md-toolbar-height-mobile-portrait;
6970 }
6971
6972 .md-toolbar-tools {
6973 height: $md-toolbar-height-mobile-portrait;
6974 max-height: $md-toolbar-height-mobile-portrait;
6975 }
6976}
6977
6978// Handle mobile landscape
6979@media (min-width: 0) and (max-width: $layout-breakpoint-sm - 1) and (orientation: landscape) {
6980 md-toolbar {
6981 min-height: $md-toolbar-height-mobile-landscape;
6982 }
6983
6984 .md-toolbar-tools {
6985 height: $md-toolbar-height-mobile-landscape;
6986 max-height: $md-toolbar-height-mobile-landscape;
6987 }
6988}
6989
6990
6991$tooltip-fontsize-lg: rem(1) !default;
6992$tooltip-fontsize-sm: rem(1.4) !default;
6993$tooltip-height-lg: rem(2.2) !default;
6994$tooltip-height-sm: rem(3.2) !default;
6995$tooltip-top-margin-lg: rem(1.4) !default;
6996$tooltip-top-margin-sm: rem(2.4) !default;
6997$tooltip-lr-padding-lg: rem(0.8) !default;
6998$tooltip-lr-padding-sm: rem(1.6) !default;
6999$tooltip-max-width: rem(3.20) !default;
7000
7001md-tooltip {
7002 position: absolute;
7003 z-index: $z-index-tooltip;
7004 overflow: hidden;
7005 pointer-events: none;
7006 border-radius: 4px;
7007
7008 font-weight: 500;
7009 font-size: $tooltip-fontsize-sm;
7010 @media (min-width: $layout-breakpoint-sm) {
7011 font-size: $tooltip-fontsize-lg;
7012 }
7013
7014 .md-content {
7015 position: relative;
7016 white-space: nowrap;
7017 overflow: hidden;
7018 text-overflow: ellipsis;
7019 transform-origin: center top;
7020 transform: scale(0);
7021 opacity: 0;
7022 height: $tooltip-height-sm;
7023 line-height: $tooltip-height-sm;
7024 padding-left: $tooltip-lr-padding-sm;
7025 padding-right: $tooltip-lr-padding-sm;
7026 @media (min-width: $layout-breakpoint-sm) {
7027 height: $tooltip-height-lg;
7028 line-height: $tooltip-height-lg;
7029 padding-left: $tooltip-lr-padding-lg;
7030 padding-right: $tooltip-lr-padding-lg;
7031 }
7032 &.md-show-add {
7033 transition: $swift-ease-out;
7034 transition-duration: .2s;
7035 transform: scale(0);
7036 opacity: 0;
7037 }
7038 &.md-show, &.md-show-add-active {
7039 transform: scale(1);
7040 opacity: 0.9;
7041 transform-origin: center top;
7042 }
7043 &.md-show-remove {
7044 transition: $swift-ease-out;
7045 transition-duration: .2s;
7046 &.md-show-remove-active {
7047 transform: scale(0);
7048 opacity: 0;
7049 }
7050 }
7051 }
7052
7053 &.md-hide {
7054 transition: $swift-ease-in;
7055 }
7056
7057 &.md-show {
7058 transition: $swift-ease-out;
7059 pointer-events: auto;
7060 }
7061}
7062
7063$virtual-repeat-scrollbar-width: 16px !default;
7064
7065.md-virtual-repeat-container {
7066 box-sizing: border-box;
7067 display: block;
7068 margin: 0;
7069 overflow: hidden;
7070 padding: 0;
7071 position: relative;
7072
7073 .md-virtual-repeat-scroller {
7074 bottom: 0;
7075 box-sizing: border-box;
7076 left: 0;
7077 margin: 0;
7078 overflow-x: hidden;
7079 padding: 0;
7080 position: absolute;
7081 right: 0;
7082 top: 0;
7083 -webkit-overflow-scrolling: touch;
7084 }
7085
7086 .md-virtual-repeat-sizer {
7087 box-sizing: border-box;
7088 height: 1px;
7089 display: block;
7090 margin: 0;
7091 padding: 0;
7092 width: 1px;
7093 }
7094
7095 .md-virtual-repeat-offsetter {
7096 box-sizing: border-box;
7097 left: 0;
7098 margin: 0;
7099 padding: 0;
7100 position: absolute;
7101 right: 0;
7102 top: 0;
7103 }
7104}
7105
7106.md-virtual-repeat-container.md-orient-horizontal {
7107 .md-virtual-repeat-scroller {
7108 overflow-x: auto;
7109 overflow-y: hidden;
7110 }
7111
7112 .md-virtual-repeat-offsetter {
7113 // Leave room for the scroll bar.
7114 // TODO: Will probably need to perform measurements at runtime.
7115 bottom: $virtual-repeat-scrollbar-width;
7116 @include rtl-prop(right, left, auto, auto);
7117 white-space: nowrap;
7118 }
7119}
7120
7121.md-whiteframe-1dp, .md-whiteframe-z1 {
7122 box-shadow: $whiteframe-shadow-1dp;
7123}
7124.md-whiteframe-2dp {
7125 box-shadow: $whiteframe-shadow-2dp;
7126}
7127.md-whiteframe-3dp {
7128 box-shadow: $whiteframe-shadow-3dp;
7129}
7130.md-whiteframe-4dp, .md-whiteframe-z2{
7131 box-shadow: $whiteframe-shadow-4dp;
7132}
7133.md-whiteframe-5dp {
7134 box-shadow: $whiteframe-shadow-5dp;
7135}
7136.md-whiteframe-6dp {
7137 box-shadow: $whiteframe-shadow-6dp;
7138}
7139.md-whiteframe-7dp, .md-whiteframe-z3 {
7140 box-shadow: $whiteframe-shadow-7dp;
7141}
7142.md-whiteframe-8dp {
7143 box-shadow: $whiteframe-shadow-8dp;
7144}
7145.md-whiteframe-9dp {
7146 box-shadow: $whiteframe-shadow-9dp;
7147}
7148.md-whiteframe-10dp, .md-whiteframe-z4 {
7149 box-shadow: $whiteframe-shadow-10dp;
7150}
7151.md-whiteframe-11dp {
7152 box-shadow: $whiteframe-shadow-11dp;
7153}
7154.md-whiteframe-12dp {
7155 box-shadow: $whiteframe-shadow-12dp;
7156}
7157.md-whiteframe-13dp, .md-whiteframe-z5{
7158 box-shadow: $whiteframe-shadow-13dp;
7159}
7160.md-whiteframe-14dp {
7161 box-shadow: $whiteframe-shadow-14dp;
7162}
7163.md-whiteframe-15dp {
7164 box-shadow: $whiteframe-shadow-15dp;
7165}
7166.md-whiteframe-16dp {
7167 box-shadow: $whiteframe-shadow-16dp;
7168}
7169.md-whiteframe-17dp {
7170 box-shadow: $whiteframe-shadow-17dp;
7171}
7172.md-whiteframe-18dp {
7173 box-shadow: $whiteframe-shadow-18dp;
7174}
7175.md-whiteframe-19dp {
7176 box-shadow: $whiteframe-shadow-19dp;
7177}
7178.md-whiteframe-20dp {
7179 box-shadow: $whiteframe-shadow-20dp;
7180}
7181.md-whiteframe-21dp {
7182 box-shadow: $whiteframe-shadow-21dp;
7183}
7184.md-whiteframe-22dp {
7185 box-shadow: $whiteframe-shadow-22dp;
7186}
7187.md-whiteframe-23dp {
7188 box-shadow: $whiteframe-shadow-23dp;
7189}
7190.md-whiteframe-24dp {
7191 box-shadow: $whiteframe-shadow-24dp;
7192}
7193
7194@media screen and (-ms-high-contrast: active) {
7195 md-whiteframe {
7196 border: 1px solid #fff;
7197 }
7198}
7199
7200@media print {
7201 md-whiteframe, [md-whiteframe] {
7202 background-color: #ffffff;
7203 }
7204}
7205
7206/*
7207* Since Layout API uses ng-cloak to hide the dom elements while layouts are adjusted
7208*
7209*/
7210[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
7211 display: none !important;
7212}
7213
7214/*
7215*
7216* Responsive attributes
7217*
7218* References:
7219* 1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
7220* 2) https://css-tricks.com/almanac/properties/f/flex/
7221* 3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
7222* 4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
7223* 5) http://godban.com.ua/projects/flexgrid
7224*
7225*
7226*/
7227
7228@-moz-document url-prefix() {
7229 .layout-fill {
7230 margin: 0;
7231 width: 100%;
7232 min-height: 100%;
7233 height: 100%;
7234 }
7235}
7236
7237
7238/*
7239 * Apply Mixins to create Layout/Flexbox styles
7240 *
7241 */
7242
7243
7244@include layouts_for_breakpoint();
7245@include layout-padding-margin();
7246
7247
7248
7249/**
7250 * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
7251 * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
7252 * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`
7253 *
7254 * hide means hide everywhere
7255 * Sizes:
7256 * $layout-breakpoint-xs: 600px !default;
7257 * $layout-breakpoint-sm: 960px !default;
7258 * $layout-breakpoint-md: 1280px !default;
7259 * $layout-breakpoint-lg: 1920px !default;
7260 */
7261
7262
7263@media (max-width: $layout-breakpoint-xs - 1) {
7264 // Xtra-SMALL SCREEN
7265 .hide-xs, .hide {
7266 &:not(.show-xs):not(.show) {
7267 display: none;
7268 }
7269 }
7270 @include layouts_for_breakpoint(xs);
7271}
7272
7273@media (min-width: $layout-breakpoint-xs) {
7274 // BIGGER THAN Xtra-SMALL SCREEN
7275 @include layouts_for_breakpoint(gt-xs);
7276
7277}
7278
7279@media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
7280 .hide, .hide-gt-xs {
7281 &:not(.show-gt-xs):not(.show-sm):not(.show) {
7282 display: none;
7283 }
7284 }
7285 .hide-sm:not(.show-gt-xs):not(.show-sm):not(.show) {
7286 display: none;
7287 }
7288
7289 @include layouts_for_breakpoint(sm);
7290}
7291
7292@media (min-width: $layout-breakpoint-sm) {
7293 // BIGGER THAN SMALL SCREEN
7294 @include layouts_for_breakpoint(gt-sm);
7295
7296}
7297
7298@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
7299 // MEDIUM SCREEN
7300 .hide, .hide-gt-xs, .hide-gt-sm {
7301 &:not(.show-gt-xs):not(.show-gt-sm):not(.show-md):not(.show) {
7302 display: none;
7303 }
7304 }
7305 .hide-md:not(.show-md):not(.show-gt-sm):not(.show-gt-xs):not(.show) {
7306 display: none;
7307 }
7308 @include layouts_for_breakpoint(md);
7309}
7310
7311@media (min-width: $layout-breakpoint-md) {
7312 // BIGGER THAN MEDIUM SCREEN
7313 @include layouts_for_breakpoint(gt-md);
7314}
7315
7316@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
7317 // LARGE SCREEN
7318 .hide,.hide-gt-xs, .hide-gt-sm, .hide-gt-md {
7319 &:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
7320 display: none;
7321 }
7322 }
7323 .hide-lg:not(.show-lg):not(.show-gt-md):not(.show-gt-sm):not(.show-gt-xs):not(.show) {
7324 display: none;
7325 }
7326
7327 @include layouts_for_breakpoint(lg);
7328}
7329
7330@media (min-width: $layout-breakpoint-lg) {
7331 @include layouts_for_breakpoint(gt-lg);
7332 @include layouts_for_breakpoint(xl);
7333
7334 // BIGGER THAN LARGE SCREEN
7335 .hide, .hide-gt-xs, .hide-gt-sm, .hide-gt-md, .hide-gt-lg {
7336 &:not(.show-gt-xs):not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show-xl):not(.show) {
7337 display: none;
7338 }
7339 }
7340 .hide-xl:not(.show-xl):not(.show-gt-lg):not(.show-gt-md):not(.show-gt-sm):not(.show-gt-xs):not(.show) {
7341 display: none;
7342 }
7343
7344}
7345
7346// General printing Rules
7347@media print {
7348
7349 .hide-print:not(.show-print):not(.show) {
7350 display: none !important;
7351 }
7352}