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