socketioMEANseed/www/bower_components/angular-material/angular-material.scss
www/bower_components/angular-material/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// The default item height is also specified in the JavaScript.
1294$md-autocomplete-item-height: 48px !default;
1295$md-autocomplete-clear-size: 30px !default;
1296$md-autocomplete-input-offset: 20px !default;
1297
1298md-autocomplete {
1299 border-radius: 2px;
1300 display: block;
1301 height: 40px;
1302 position: relative;
1303 overflow: visible;
1304 min-width: 190px;
1305 &[disabled] {
1306 input {
1307 cursor: default;
1308 }
1309 }
1310 &[md-floating-label] {
1311 border-radius: 0;
1312 background: transparent;
1313 height: auto;
1314
1315 md-input-container {
1316 padding-bottom: 0;
1317 }
1318 md-autocomplete-wrap {
1319 height: auto;
1320 }
1321
1322 .md-show-clear-button {
1323
1324 button {
1325 display: block;
1326 position: absolute;
1327 right: 0;
1328 top: $md-autocomplete-input-offset;
1329 width: $md-autocomplete-clear-size;
1330 height: $md-autocomplete-clear-size;
1331 }
1332
1333 input {
1334 // Add padding to the end of the input to avoid overlapping with the clear button.
1335 @include rtl-prop(padding-right, padding-left, $md-autocomplete-clear-size, 0);
1336 }
1337 }
1338
1339 }
1340 md-autocomplete-wrap {
1341
1342 // Layout [layout='row']
1343 display: flex;
1344 flex-direction: row;
1345 box-sizing: border-box;
1346
1347 position: relative;
1348 overflow: visible;
1349 height: 40px;
1350 &.md-menu-showing {
1351 z-index: $z-index-backdrop + 1;
1352 }
1353
1354 md-input-container, input {
1355 // Layout [flex]
1356 flex: 1 1 0%;
1357 box-sizing: border-box;
1358 min-width : 0;
1359 }
1360
1361 md-progress-linear {
1362 position: absolute;
1363 bottom: -2px;
1364 left: 0;
1365 // When `md-inline` is present, we adjust the offset to go over the `ng-message` space
1366 &.md-inline {
1367 bottom: 40px;
1368 right: 2px;
1369 left: 2px;
1370 width: auto;
1371 }
1372 .md-mode-indeterminate {
1373 position: absolute;
1374 top: 0;
1375 left: 0;
1376 width: 100%;
1377 height: 3px;
1378 transition: none;
1379
1380 .md-container {
1381 transition: none;
1382 height: 3px;
1383 }
1384 &.ng-enter {
1385 transition: opacity 0.15s linear;
1386 &.ng-enter-active {
1387 opacity: 1;
1388 }
1389 }
1390 &.ng-leave {
1391 transition: opacity 0.15s linear;
1392 &.ng-leave-active {
1393 opacity: 0;
1394 }
1395 }
1396 }
1397 }
1398 }
1399 input:not(.md-input) {
1400 @include md-flat-input();
1401 width: 100%;
1402 padding: 0 15px;
1403 line-height: 40px;
1404 height: 40px;
1405 }
1406 .md-show-clear-button button {
1407 position: relative;
1408 line-height: 20px;
1409 text-align: center;
1410 width: $md-autocomplete-clear-size;
1411 height: $md-autocomplete-clear-size;
1412 cursor: pointer;
1413 border: none;
1414 border-radius: 50%;
1415 padding: 0;
1416 font-size: 12px;
1417 background: transparent;
1418 margin: auto 5px;
1419 &:after {
1420 content: '';
1421 position: absolute;
1422 top: -6px;
1423 right: -6px;
1424 bottom: -6px;
1425 left: -6px;
1426 border-radius: 50%;
1427 transform: scale(0);
1428 opacity: 0;
1429 transition: $swift-ease-out;
1430 }
1431 &:focus {
1432 outline: none;
1433
1434 &:after {
1435 transform: scale(1);
1436 opacity: 1;
1437 }
1438 }
1439 md-icon {
1440 position: absolute;
1441 top: 50%;
1442 left: 50%;
1443 transform: translate3d(-50%, -50%, 0) scale(0.9);
1444 path {
1445 stroke-width: 0;
1446 }
1447 }
1448 &.ng-enter {
1449 transform: scale(0);
1450 transition: transform 0.15s ease-out;
1451 &.ng-enter-active {
1452 transform: scale(1);
1453 }
1454 }
1455 &.ng-leave {
1456 transition: transform 0.15s ease-out;
1457 &.ng-leave-active {
1458 transform: scale(0);
1459 }
1460 }
1461 }
1462 // IE Only
1463 @media screen and (-ms-high-contrast: active) {
1464 $border-color: #fff;
1465
1466 input {
1467 border: 1px solid $border-color;
1468 }
1469 li:focus {
1470 color: #fff;
1471 }
1472 }
1473}
1474
1475.md-virtual-repeat-container.md-autocomplete-suggestions-container {
1476 position: absolute;
1477 box-shadow: 0 2px 5px rgba(black, 0.25);
1478 z-index: $z-index-tooltip;
1479
1480 // Expand the virtualRepeatContainer as much as the max-height from the JavaScript allows.
1481 // This is necessary for the virtualRepeatContainer to be able to grow back.
1482 height: 100%;
1483}
1484
1485.md-virtual-repeat-container.md-not-found {
1486 height: $md-autocomplete-item-height;
1487}
1488
1489.md-autocomplete-suggestions {
1490 margin: 0;
1491 list-style: none;
1492 padding: 0;
1493
1494 li {
1495 font-size: 14px;
1496 overflow: hidden;
1497 padding: 0 15px;
1498 line-height: $md-autocomplete-item-height;
1499 height: $md-autocomplete-item-height;
1500 transition: background 0.15s linear;
1501 margin: 0;
1502 white-space: nowrap;
1503 text-overflow: ellipsis;
1504
1505 &:focus {
1506 outline: none;
1507 }
1508
1509 &:not(.md-not-found-wrapper) {
1510 cursor: pointer;
1511 }
1512 }
1513}
1514
1515// IE Only
1516@media screen and (-ms-high-contrast: active) {
1517 md-autocomplete,
1518 .md-autocomplete-suggestions {
1519 border: 1px solid #fff;
1520 }
1521}
1522
1523// !!Important - Theme-based Background-color can be configured in backdrop-theme.scss
1524// - Animate background-color opacity only for `.md-opaque` styles
1525
1526md-backdrop {
1527 transition: opacity 450ms;
1528
1529 position: absolute;
1530 top:0;
1531 bottom:0;
1532 left: 0;
1533 right: 0;
1534
1535 z-index: $z-index-backdrop;
1536
1537 &.md-menu-backdrop {
1538 position: fixed !important;
1539 z-index: $z-index-menu - 1;
1540 }
1541 &.md-select-backdrop {
1542 z-index: $z-index-dialog + 1;
1543 transition-duration: 0;
1544 }
1545 &.md-dialog-backdrop {
1546 z-index: $z-index-dialog - 1;
1547 }
1548 &.md-bottom-sheet-backdrop {
1549 z-index: $z-index-bottom-sheet - 1;
1550 }
1551 &.md-sidenav-backdrop {
1552 z-index: $z-index-sidenav - 1;
1553 }
1554
1555
1556 &.md-click-catcher {
1557 position: absolute;
1558 }
1559
1560 &.md-opaque {
1561
1562 opacity: .48;
1563
1564 &.ng-enter {
1565 opacity: 0;
1566 }
1567 &.ng-enter.md-opaque.ng-enter-active {
1568 opacity: .48;
1569 }
1570 &.ng-leave {
1571 opacity: .48;
1572 transition: opacity 400ms;
1573 }
1574 &.ng-leave.md-opaque.ng-leave-active {
1575 opacity: 0;
1576 }
1577 }
1578
1579}
1580
1581
1582$bottom-sheet-horizontal-padding: 2 * $baseline-grid !default;
1583$bottom-sheet-vertical-padding: 1 * $baseline-grid !default;
1584$bottom-sheet-icon-after-margin: 4 * $baseline-grid !default;
1585$bottom-sheet-list-item-height: 6 * $baseline-grid !default;
1586$bottom-sheet-hidden-bottom-padding: 80px !default;
1587$bottom-sheet-header-height: 7 * $baseline-grid !default;
1588$bottom-sheet-grid-font-weight: 400 !default;
1589
1590md-bottom-sheet {
1591 position: absolute;
1592 left: 0;
1593 right: 0;
1594 bottom: 0;
1595 padding: $bottom-sheet-vertical-padding $bottom-sheet-horizontal-padding $bottom-sheet-vertical-padding + $bottom-sheet-hidden-bottom-padding $bottom-sheet-horizontal-padding;
1596 z-index: $z-index-bottom-sheet;
1597
1598 border-top-width: 1px;
1599 border-top-style: solid;
1600
1601 transform: translate3d(0, $bottom-sheet-hidden-bottom-padding, 0);
1602 transition: $swift-ease-out;
1603 transition-property: transform;
1604
1605 &.md-has-header {
1606 padding-top: 0;
1607 }
1608
1609 &.ng-enter {
1610 opacity: 0;
1611 transform: translate3d(0, 100%, 0);
1612 }
1613
1614 &.ng-enter-active {
1615 opacity: 1;
1616 display: block;
1617 transform: translate3d(0, $bottom-sheet-hidden-bottom-padding, 0) !important;
1618 }
1619
1620
1621 &.ng-leave-active {
1622 transform: translate3d(0, 100%, 0) !important;
1623 transition: $swift-ease-in;
1624 }
1625
1626 .md-subheader {
1627 background-color: transparent;
1628 font-family: $font-family;
1629 line-height: $bottom-sheet-header-height;
1630 padding: 0;
1631 white-space: nowrap;
1632 }
1633
1634 md-inline-icon {
1635 display: inline-block;
1636 height: 24px;
1637 width: 24px;
1638 fill: #444;
1639 }
1640
1641 md-list-item {
1642 display: flex;
1643 outline: none;
1644
1645 &:hover {
1646 cursor: pointer;
1647 }
1648 }
1649
1650 &.md-list {
1651 md-list-item {
1652 padding: 0;
1653 align-items: center;
1654 height: $bottom-sheet-list-item-height;
1655
1656 }
1657 }
1658
1659
1660
1661 &.md-grid {
1662 padding-left: 3 * $baseline-grid;
1663 padding-right: 3 * $baseline-grid;
1664 padding-top: 0;
1665
1666 md-list {
1667 display: flex;
1668 flex-direction: row;
1669 flex-wrap: wrap;
1670 transition: all 0.5s;
1671 align-items: center;
1672 }
1673
1674 md-list-item {
1675 flex-direction: column;
1676 align-items: center;
1677 transition: all 0.5s;
1678
1679 height: 12 * $baseline-grid;
1680
1681 margin-top: $baseline-grid;
1682 margin-bottom: $baseline-grid;
1683
1684 /* Mixin for how many grid items to show per row */
1685 @mixin grid-items-per-row($num, $alignEdges: false) {
1686 $width: 100% / $num;
1687 flex: 1 1 $width;
1688 max-width: $width;
1689
1690 @if $alignEdges {
1691 &:nth-of-type(#{$num}n + 1) {
1692 align-items: flex-start;
1693 }
1694 &:nth-of-type(#{$num}n) {
1695 align-items: flex-end;
1696 }
1697 }
1698 }
1699
1700 @media (max-width: $layout-breakpoint-sm) {
1701 @include grid-items-per-row(3, true);
1702 }
1703
1704 @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
1705 @include grid-items-per-row(4);
1706 }
1707
1708 @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
1709 @include grid-items-per-row(6);
1710 }
1711
1712 @media (min-width: $layout-breakpoint-lg) {
1713 @include grid-items-per-row(7);
1714 }
1715
1716 // Override of the IE11 fix from @mixin ie11-min-height-flexbug, line 109 mixins.scss
1717 &::before {
1718 display: none;
1719 }
1720
1721 .md-list-item-content {
1722 display: flex;
1723 flex-direction: column;
1724 align-items: center;
1725 width: 6 * $baseline-grid;
1726 padding-bottom: 2 * $baseline-grid;
1727 }
1728
1729 .md-grid-item-content {
1730 border: 1px solid transparent;
1731 display: flex;
1732 flex-direction: column;
1733 align-items: center;
1734 width: 10 * $baseline-grid;
1735 }
1736
1737 .md-grid-text {
1738 font-weight: $bottom-sheet-grid-font-weight;
1739 line-height: 2 * $baseline-grid;
1740 font-size: 2 * $baseline-grid - 3;
1741 margin: 0;
1742 white-space: nowrap;
1743 width: 8 * $baseline-grid;
1744 text-align: center;
1745 text-transform: none;
1746 padding-top: 1 * $baseline-grid;
1747 }
1748 }
1749 }
1750}
1751
1752// IE only
1753@media screen and (-ms-high-contrast: active) {
1754 md-bottom-sheet {
1755 border: 1px solid #fff;
1756 }
1757}
1758
1759// Material Design Button
1760// https://material.google.com/components/buttons.html
1761
1762$button-border-radius: 2px !default;
1763$button-fab-border-radius: 50% !default;
1764$button-icon-border-radius: $button-fab-border-radius !default;
1765
1766$button-font-size: $body-font-size-base !default;
1767$button-font-size-dense: $body-font-size-base * 13/14 !default;
1768
1769$button-line-height: rem(3.60) !default;
1770$button-line-height-dense: rem(3.20) !default;
1771$button-margin: rem(0.600) rem(0.800) !default;
1772$button-min-width: rem(8.800) !default;
1773$button-padding: 0 $button-left-right-padding !default;
1774
1775
1776// Fab buttons
1777$button-fab-line-height: rem(5.600) !default;
1778$button-fab-mini-width: rem(4.00) !default;
1779$button-fab-mini-height: rem(4.00) !default;
1780$button-fab-mini-line-height: rem(4.00) !default;
1781
1782$button-fab-toast-offset: $button-fab-height * 0.75 !default;
1783
1784$icon-button-height: rem(4.000) !default;
1785$icon-button-width: rem(4.000) !default;
1786$icon-button-margin: rem(0.600) !default;
1787
1788// Fix issue causing buttons in Firefox to be 2px bigger than they should
1789button.md-button::-moz-focus-inner {
1790 border: 0;
1791}
1792
1793.md-button {
1794 display: inline-block;
1795 position: relative; // Required for absolute canvas child elements.
1796 cursor: pointer;
1797
1798 /** Alignment adjustments */
1799 @include dense(min-height, $button-line-height, $button-line-height-dense);
1800 min-width: $button-min-width;
1801 @include dense(line-height, $button-line-height, $button-line-height-dense);
1802
1803 vertical-align: middle;
1804 align-items: center;
1805 text-align: center;
1806
1807 border-radius: $button-border-radius;
1808 box-sizing: border-box;
1809
1810 /* Reset default button appearance */
1811 user-select: none;
1812 outline: none;
1813 border: 0;
1814
1815 /** Custom styling for button */
1816 padding: $button-padding;
1817 margin: $button-margin;
1818
1819 background: transparent;
1820 color: currentColor;
1821 white-space: nowrap;
1822
1823 /* Uppercase text content */
1824 text-transform: uppercase;
1825 font-weight: 500;
1826 @include dense(font-size, $button-font-size, $button-font-size-dense);
1827 font-style: inherit;
1828 font-variant: inherit;
1829 font-family: inherit;
1830 text-decoration: none;
1831
1832 // Ink Ripple should not create any overflow.
1833 overflow: hidden;
1834
1835 transition: box-shadow $swift-ease-out-duration $swift-ease-out-timing-function,
1836 background-color $swift-ease-out-duration $swift-ease-out-timing-function;
1837
1838 &:focus {
1839 outline: none;
1840 }
1841
1842 &:hover, &:focus {
1843 text-decoration: none;
1844 }
1845
1846 // By default $ngAnimate looks for transition durations on the element, when using ng-hide, ng-if, ng-show.
1847 // The .md-button has a transition duration applied, which means, that $ngAnimate delays the hide process.
1848 // To avoid this, we need to reset the transition, when $ngAnimate looks for the duration.
1849 &.ng-hide, &.ng-leave {
1850 transition: none;
1851 }
1852
1853 &.md-cornered {
1854 border-radius: 0;
1855 }
1856
1857 &.md-icon {
1858 padding: 0;
1859 background: none;
1860 }
1861
1862 &.md-raised {
1863 &:not([disabled]) {
1864 @include md-shadow-bottom-z-1();
1865 }
1866 }
1867
1868 &.md-icon-button {
1869 margin: 0 $icon-button-margin;
1870 height: $icon-button-height;
1871 min-width: 0;
1872 line-height: $icon-size;
1873 padding: $baseline-grid;
1874 width: $icon-button-width;
1875 border-radius: $button-icon-border-radius;
1876 .md-ripple-container {
1877 border-radius: $button-icon-border-radius;
1878 background-clip: padding-box;
1879 overflow: hidden;
1880 // The following hack causes Safari/Chrome to respect overflow hidden for ripples
1881 -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
1882 }
1883 }
1884
1885 &.md-fab {
1886
1887 // Include the top/left/bottom/right fab positions
1888 @include fab-all-positions();
1889
1890 z-index: $z-index-fab;
1891
1892 line-height: $button-fab-line-height;
1893
1894 min-width: 0;
1895 width: $button-fab-width;
1896 height: $button-fab-height;
1897 vertical-align: middle;
1898
1899 @include md-shadow-bottom-z-1();
1900 border-radius: $button-fab-border-radius;
1901 background-clip: padding-box;
1902 overflow: hidden;
1903
1904 transition: $swift-ease-in;
1905 transition-property: background-color, box-shadow, transform;
1906 .md-ripple-container {
1907 border-radius: $button-fab-border-radius;
1908 background-clip: padding-box;
1909 overflow: hidden;
1910 // The following hack causes Safari/Chrome to respect overflow hidden for ripples
1911 -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
1912 }
1913
1914 &.md-mini {
1915 line-height: $button-fab-mini-line-height;
1916 width: $button-fab-mini-width;
1917 height: $button-fab-mini-height;
1918 }
1919
1920 &.ng-hide, &.ng-leave {
1921 transition: none;
1922 }
1923 }
1924
1925 &:not([disabled]) {
1926 &.md-raised,
1927 &.md-fab {
1928 &.md-focused {
1929 @include md-shadow-bottom-z-1();
1930 }
1931 &:active {
1932 @include md-shadow-bottom-z-2();
1933 }
1934 }
1935 }
1936
1937 .md-ripple-container {
1938 border-radius: $button-border-radius;
1939 background-clip: padding-box;
1940 overflow: hidden;
1941 // The following hack causes Safari/Chrome to respect overflow hidden for ripples
1942 -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
1943 }
1944}
1945
1946// Using `display:block;` is required for correct vertical alignment
1947// because '.md-button' uses `display:inline-block;`.
1948.md-button.md-icon-button,
1949button.md-button.md-fab {
1950 md-icon {
1951 display: block;
1952 }
1953}
1954
1955.md-toast-open-top {
1956 .md-button.md-fab-top-left,
1957 .md-button.md-fab-top-right {
1958 transition: $swift-ease-out;
1959 transform: translate3d(0, $button-fab-toast-offset, 0);
1960 &:not([disabled]) {
1961 &.md-focused,
1962 &:hover {
1963 transform: translate3d(0, $button-fab-toast-offset - 1, 0);
1964 }
1965 }
1966 }
1967}
1968
1969.md-toast-open-bottom {
1970 .md-button.md-fab-bottom-left,
1971 .md-button.md-fab-bottom-right {
1972 transition: $swift-ease-out;
1973 transform: translate3d(0, -$button-fab-toast-offset, 0);
1974 &:not([disabled]) {
1975 &.md-focused,
1976 &:hover {
1977 transform: translate3d(0, -$button-fab-toast-offset - 1, 0);
1978 }
1979 }
1980 }
1981}
1982
1983.md-button-group {
1984 display: flex;
1985 flex: 1;
1986 width: 100%;
1987
1988 & > .md-button {
1989 flex: 1;
1990
1991 display: block;
1992
1993 overflow: hidden;
1994
1995 width: 0;
1996
1997 border-width: 1px 0px 1px 1px;
1998 border-radius: 0;
1999
2000 text-align: center;
2001 text-overflow: ellipsis;
2002 white-space: nowrap;
2003
2004 &:first-child {
2005 border-radius: 2px 0px 0px 2px;
2006 }
2007 &:last-child {
2008 border-right-width: 1px;
2009 border-radius: 0px 2px 2px 0px;
2010 }
2011 }
2012}
2013// IE only
2014@media screen and (-ms-high-contrast: active) {
2015 .md-button.md-raised,
2016 .md-button.md-fab {
2017 border: 1px solid #fff;
2018 }
2019}
2020
2021$card-padding: 16px !default;
2022$card-box-shadow: $whiteframe-shadow-1dp !default;
2023
2024md-card {
2025 box-sizing: border-box;
2026 display: flex;
2027 flex-direction: column;
2028 margin: $baseline-grid;
2029
2030 box-shadow: $card-box-shadow;
2031
2032 md-card-header {
2033 padding: $card-padding;
2034 display: flex;
2035 flex-direction: row;
2036
2037 &:first-child {
2038 md-card-avatar {
2039 @include rtl-prop(margin-right, margin-left, 12px, auto);
2040 }
2041 }
2042
2043 &:last-child {
2044 md-card-avatar {
2045 @include rtl-prop(margin-left, margin-right, 12px, auto);
2046 }
2047 }
2048
2049 md-card-avatar {
2050 width: 40px;
2051 height: 40px;
2052
2053 .md-user-avatar,
2054 md-icon{
2055 border-radius: 50%;
2056 }
2057
2058 md-icon {
2059 padding: 8px;
2060 > svg {
2061 // Safari workaround for any SVG with padded parent
2062 height: inherit;
2063 width: inherit;
2064 }
2065 }
2066
2067 & + md-card-header-text {
2068 max-height: 40px;
2069
2070 .md-title {
2071 font-size: 14px;
2072 }
2073 }
2074 }
2075
2076 md-card-header-text {
2077 display: flex;
2078 flex: 1;
2079 flex-direction: column;
2080
2081 .md-subhead {
2082 font-size: 14px;
2083 }
2084 }
2085 }
2086
2087 > img,
2088 > md-card-header img,
2089 md-card-title-media img {
2090 box-sizing: border-box;
2091 display: flex;
2092 flex: 0 0 auto;
2093 width: 100%;
2094 height: auto;
2095 }
2096
2097 md-card-title {
2098 padding: 3 * $card-padding / 2 $card-padding $card-padding;
2099 display: flex;
2100 flex: 1 1 auto;
2101 flex-direction: row;
2102
2103 & + md-card-content {
2104 padding-top: 0;
2105 }
2106
2107 md-card-title-text {
2108 flex: 1;
2109 flex-direction: column;
2110 display: flex;
2111
2112 .md-subhead {
2113 padding-top: 0;
2114 font-size: 14px;
2115 }
2116
2117 &:only-child {
2118 .md-subhead {
2119 padding-top: 3 * $card-padding / 4;
2120 }
2121 }
2122 }
2123
2124 md-card-title-media {
2125 margin-top: - $card-padding / 2;
2126
2127 .md-media-sm {
2128 height: 80px;
2129 width: 80px;
2130 }
2131 .md-media-md {
2132 height: 112px;
2133 width: 112px;
2134 }
2135 .md-media-lg {
2136 height: 152px;
2137 width: 152px;
2138 }
2139 }
2140 }
2141
2142 md-card-content {
2143 display: block;
2144 padding: $card-padding;
2145
2146 & > p {
2147 &:first-child {
2148 margin-top: 0;
2149 }
2150
2151 &:last-child {
2152 margin-bottom: 0;
2153 }
2154 }
2155
2156 .md-media-xl {
2157 height: 240px;
2158 width: 240px;
2159 }
2160 }
2161
2162 .md-actions, md-card-actions {
2163 margin: $baseline-grid;
2164
2165 &.layout-column {
2166 .md-button {
2167 &:not(.md-icon-button) {
2168 margin: $baseline-grid / 4 0;
2169
2170 &:first-of-type {
2171 margin-top: 0;
2172 }
2173
2174 &:last-of-type {
2175 margin-bottom: 0;
2176 }
2177 }
2178
2179 &.md-icon-button {
2180 margin-top: 3 * $baseline-grid / 4;
2181 margin-bottom: 3 * $baseline-grid / 4;
2182 }
2183 }
2184 }
2185
2186 md-card-icon-actions {
2187 flex: 1;
2188 justify-content: flex-start;
2189 display: flex;
2190 flex-direction: row;
2191 }
2192
2193 &:not(.layout-column) .md-button {
2194 &:not(.md-icon-button) {
2195 margin: 0 $baseline-grid * .5;
2196
2197 &:first-of-type {
2198 @include rtl-prop(margin-left, margin-right, 0, auto);
2199 }
2200
2201 &:last-of-type {
2202 @include rtl-prop(margin-right, margin-left, 0, auto);
2203 }
2204 }
2205
2206 &.md-icon-button {
2207 margin-left: 3 * $baseline-grid / 4;
2208 margin-right: 3 * $baseline-grid / 4;
2209
2210 &:first-of-type {
2211 @include rtl-prop(margin-left, margin-right, 3 * $baseline-grid / 2, auto);
2212 }
2213
2214 &:last-of-type {
2215 @include rtl-prop(margin-right, margin-left, 3 * $baseline-grid / 2, auto);
2216 }
2217 }
2218
2219 & + md-card-icon-actions {
2220 flex: 1;
2221 justify-content: flex-end;
2222 display: flex;
2223 flex-direction: row;
2224 }
2225 }
2226 }
2227
2228 md-card-footer {
2229 margin-top: auto;
2230 padding: $card-padding;
2231 }
2232}
2233
2234@media screen and (-ms-high-contrast: active) {
2235 md-card {
2236 border: 1px solid #fff;
2237 }
2238}
2239
2240.md-image-no-fill {
2241 > img {
2242 width: auto;
2243 height: auto;
2244 }
2245}
2246
2247
2248//$checkbox-width: 20px !default;
2249//$checkbox-height: $checkbox-width !default;
2250//$checkbox-border-radius: 2px !default;
2251//$checkbox-border-width: 2px !default;
2252//
2253// ^^ defined in variables.scss
2254//
2255$checkbox-margin: 16px !default;
2256$checkbox-text-margin: 10px !default;
2257$checkbox-top: 12px !default;
2258
2259.md-inline-form {
2260 md-checkbox {
2261 margin: 19px 0 18px;
2262 }
2263}
2264
2265md-checkbox {
2266 box-sizing: border-box;
2267 display: inline-block;
2268 margin-bottom: $checkbox-margin;
2269 white-space: nowrap;
2270 cursor: pointer;
2271 outline: none;
2272 user-select: none;
2273 position: relative;
2274 min-width: $checkbox-width;
2275 min-height: $checkbox-width;
2276 @include rtl(margin-left, 0, $checkbox-margin);
2277 @include rtl(margin-right, $checkbox-margin, 0);
2278
2279 &:last-of-type {
2280 margin-left: 0;
2281 margin-right: 0;
2282 }
2283
2284 &.md-focused:not([disabled]) {
2285 .md-container:before {
2286 left: -8px;
2287 top: -8px;
2288 right: -8px;
2289 bottom: -8px;
2290 }
2291
2292 &:not(.md-checked) {
2293 .md-container:before {
2294 background-color: rgba(0, 0, 0, 0.12);
2295 }
2296 }
2297 }
2298
2299 &.md-align-top-left > div.md-container {
2300 top: $checkbox-top;
2301 }
2302
2303 @include checkbox-container;
2304
2305 .md-label {
2306 box-sizing: border-box;
2307 position: relative;
2308 display: inline-block;
2309 vertical-align: middle;
2310 white-space: normal;
2311 user-select: text;
2312
2313 @include rtl(margin-left, $checkbox-text-margin + $checkbox-width, 0);
2314 @include rtl(margin-right, 0, $checkbox-text-margin + $checkbox-width);
2315
2316 }
2317}
2318
2319$chip-font-size: rem(1.6) !default;
2320$chip-height: rem(3.2) !default;
2321$chip-padding: 0 rem(1.2) 0 rem(1.2) !default;
2322$chip-input-padding: 0 !default;
2323$chip-remove-padding-right: rem(2.2) !default;
2324$chip-remove-line-height: rem(2.2) !default;
2325$chip-margin: rem(0.8) rem(0.8) 0 0 !default;
2326$chip-wrap-padding: 0 0 rem(0.8) rem(0.3) !default;
2327$chip-delete-icon-size: rem(1.8) !default;
2328$contact-chip-padding: 0 rem(2.5) 0 0 !default;
2329$contact-chip-suggestion-image-height: rem(4.0) !default;
2330$contact-chip-suggestion-margin: rem(0.8) !default;
2331$contact-chip-name-width: rem(12) !default;
2332
2333.md-contact-chips {
2334 .md-chips {
2335 md-chip {
2336 @include rtl(padding, $contact-chip-padding, rtl-value($contact-chip-padding));
2337 .md-contact-avatar {
2338 @include rtl(float, left, right);
2339 img {
2340 height: $chip-height;
2341 border-radius: $chip-height / 2;
2342 }
2343 }
2344 .md-contact-name {
2345 display: inline-block;
2346 height: $chip-height;
2347 @include rtl-prop(margin-left, margin-right, rem(0.8), auto);
2348 }
2349 }
2350 }
2351}
2352.md-contact-suggestion {
2353 height: ($contact-chip-suggestion-margin * 2) + $contact-chip-suggestion-image-height;
2354 img {
2355 height: $contact-chip-suggestion-image-height;
2356 border-radius: $contact-chip-suggestion-image-height / 2;
2357 margin-top: $contact-chip-suggestion-margin;
2358 }
2359 .md-contact-name {
2360 @include rtl-prop(margin-left, margin-right, $contact-chip-suggestion-margin, auto);
2361 width: $contact-chip-name-width;
2362 }
2363 .md-contact-name, .md-contact-email {
2364 display: inline-block;
2365 overflow: hidden;
2366 text-overflow: ellipsis;
2367 }
2368}
2369.md-contact-chips-suggestions li {
2370 height: 100%;
2371}
2372.md-chips {
2373 @include pie-clearfix();
2374
2375 display: block;
2376 font-family: $font-family;
2377 font-size: $chip-font-size;
2378 @include rtl(padding, $chip-wrap-padding, rtl-value($chip-wrap-padding));
2379 vertical-align: middle;
2380
2381 &.md-readonly .md-chip-input-container {
2382 min-height: $chip-height;
2383 }
2384
2385 &:not(.md-readonly) {
2386 cursor: text;
2387 }
2388
2389 &.md-removable {
2390
2391 md-chip {
2392 @include rtl-prop(padding-right, padding-left, $chip-remove-padding-right, 0);
2393
2394 .md-chip-content {
2395 @include rtl-prop(padding-right, padding-left, rem(0.4), 0);
2396 }
2397 }
2398
2399 }
2400
2401 md-chip {
2402 cursor: default;
2403 border-radius: $chip-height / 2;
2404 display: block;
2405 height: $chip-height;
2406 line-height: $chip-height;
2407 @include rtl(margin, $chip-margin, rtl-value($chip-margin));
2408 padding: $chip-padding;
2409 @include rtl(float, left, right);
2410 box-sizing: border-box;
2411 max-width: 100%;
2412 position: relative;
2413
2414 .md-chip-content {
2415 display: block;
2416 @include rtl(float, left, right);
2417 white-space: nowrap;
2418 max-width: 100%;
2419 overflow: hidden;
2420 text-overflow: ellipsis;
2421 &:focus {
2422 outline: none;
2423 }
2424 }
2425 &._md-chip-content-edit-is-enabled {
2426 -webkit-user-select: none; /* webkit (safari, chrome) browsers */
2427 -moz-user-select: none; /* mozilla browsers */
2428 -khtml-user-select: none; /* webkit (konqueror) browsers */
2429 -ms-user-select: none; /* IE10+ */
2430 }
2431 .md-chip-remove-container {
2432 position: absolute;
2433 @include rtl-prop(right, left, 0, auto);
2434 line-height: $chip-remove-line-height;
2435 }
2436 .md-chip-remove {
2437 text-align: center;
2438 width: $chip-height;
2439 height: $chip-height;
2440 min-width: 0;
2441 padding: 0;
2442 background: transparent;
2443 border: none;
2444 box-shadow: none;
2445 margin: 0;
2446 position: relative;
2447 md-icon {
2448 height: $chip-delete-icon-size;
2449 width: $chip-delete-icon-size;
2450 position: absolute;
2451 top: 50%;
2452 left: 50%;
2453 transform: translate3d(-50%, -50%, 0);
2454 }
2455 }
2456 }
2457 .md-chip-input-container {
2458 display: block;
2459 line-height: $chip-height;
2460 @include rtl(margin, $chip-margin, rtl-value($chip-margin));
2461 padding: $chip-input-padding;
2462 @include rtl(float, left, right);
2463 input {
2464 &:not([type]),&[type="email"],&[type="number"],&[type="tel"],&[type="url"],&[type="text"] {
2465 border: 0;
2466 height: $chip-height;
2467 line-height: $chip-height;
2468 padding: 0;
2469 &:focus {
2470 outline: none;
2471 }
2472 }
2473 }
2474 md-autocomplete, md-autocomplete-wrap {
2475 background: transparent;
2476 height: $chip-height;
2477 }
2478 md-autocomplete {
2479 md-autocomplete-wrap {
2480 box-shadow: none;
2481 }
2482 input {
2483 position: relative;
2484 }
2485 }
2486 input {
2487 border:0;
2488 height: $chip-height;
2489 line-height: $chip-height;
2490 padding: 0;
2491 &:focus {
2492 outline:none;
2493 }
2494 }
2495 md-autocomplete, md-autocomplete-wrap {
2496 height: $chip-height;
2497 }
2498 md-autocomplete {
2499 box-shadow: none;
2500 input {
2501 position: relative;
2502 }
2503 }
2504 &:not(:first-child) {
2505 @include rtl(margin, $chip-margin, rtl-value($chip-margin));
2506 }
2507 input {
2508 background:transparent;
2509 border-width: 0;
2510 }
2511 }
2512 md-autocomplete {
2513 button {
2514 display: none;
2515 }
2516 }
2517}
2518// IE only
2519@media screen and (-ms-high-contrast: active) {
2520 .md-chip-input-container,
2521 md-chip {
2522 border: 1px solid #fff;
2523 }
2524 .md-chip-input-container md-autocomplete {
2525 border: none;
2526 }
2527}
2528
2529
2530md-content {
2531
2532 display: block;
2533 position: relative;
2534 overflow: auto;
2535 -webkit-overflow-scrolling: touch;
2536
2537 &[md-scroll-y] {
2538 overflow-y: auto;
2539 overflow-x: hidden;
2540 }
2541 &[md-scroll-x] {
2542 overflow-x: auto;
2543 overflow-y: hidden;
2544 }
2545 &[md-scroll-xy] {
2546 }
2547
2548 @media print {
2549 overflow: visible !important;
2550 }
2551}
2552
2553
2554
2555/** Styles for mdCalendar. */
2556$md-calendar-cell-size: 44px !default;
2557$md-calendar-header-height: 40px !default;
2558$md-calendar-cell-emphasis-size: 40px !default;
2559$md-calendar-side-padding: 16px !default;
2560$md-calendar-weeks-to-show: 7 !default;
2561
2562$md-calendar-month-label-padding: 8px !default;
2563$md-calendar-month-label-font-size: 14px !default;
2564
2565$md-calendar-scroll-cue-shadow-radius: 6px !default;
2566
2567$md-calendar-width: (7 * $md-calendar-cell-size) + (2 * $md-calendar-side-padding) !default;
2568$md-calendar-height:
2569 ($md-calendar-weeks-to-show * $md-calendar-cell-size) + $md-calendar-header-height !default;
2570
2571// Styles for date cells, including day-of-the-week header cells.
2572@mixin md-calendar-cell($height: $md-calendar-cell-size) {
2573 height: $height;
2574 width: $md-calendar-cell-size;
2575 text-align: center;
2576
2577 // Remove all padding and borders so we can completely
2578 // control the size of the table cells.
2579 padding: 0;
2580 border: none;
2581
2582 // Prevent issues if somebody is applying box-sizing: border-box; eveywhere.
2583 box-sizing: content-box;
2584
2585 // The left / right padding is applied to the cells instead of the wrapper
2586 // because we want the header background and the month dividing border to
2587 // extend the entire width of the calendar.
2588 &:first-child {
2589 @include rtl-prop(padding-left, padding-right, $md-calendar-side-padding, 0);
2590 }
2591
2592 &:last-child {
2593 @include rtl-prop(padding-right, padding-left, $md-calendar-side-padding, 0);
2594 }
2595}
2596
2597// Styles for tables used in mdCalendar (the day-of-the-week header and the table of dates itself).
2598@mixin md-calendar-table() {
2599 // Fixed table layout makes IE faster.
2600 // https://msdn.microsoft.com/en-us/library/ms533020(VS.85).aspx
2601 table-layout: fixed;
2602 border-spacing: 0;
2603 border-collapse: collapse;
2604}
2605
2606md-calendar {
2607 font-size: 13px;
2608 user-select: none;
2609}
2610
2611// Wrap the scroll with overflow: hidden in order to hide the scrollbar.
2612// The inner .md-calendar-scroll-container will using a padding-right to push the
2613// scrollbar into the hidden area (done with javascript).
2614.md-calendar-scroll-mask {
2615 display: inline-block;
2616 overflow: hidden;
2617 height: $md-calendar-weeks-to-show * $md-calendar-cell-size;
2618
2619 // The actual scrolling element.
2620 .md-virtual-repeat-scroller {
2621 // These two properties are needed to get touch momentum to work.
2622 // See https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements
2623 overflow-y: scroll;
2624 -webkit-overflow-scrolling: touch;
2625
2626 &::-webkit-scrollbar {
2627 display: none;
2628 }
2629 }
2630
2631 // Offsetter is the element that is translateY'ed into view of the user and contains the
2632 // calendar content.
2633 .md-virtual-repeat-offsetter {
2634 width: 100%;
2635 }
2636}
2637
2638// Contains the scrolling element (this is the md-virtual-repeat-container).
2639.md-calendar-scroll-container {
2640 // Add an inset shadow to help cue users that the calendar is scrollable. Use a negative x
2641 // offset to push the vertical edge shadow off to the right so that it's cut off by the edge
2642 // of the calendar container.
2643 box-shadow: inset -3px 3px $md-calendar-scroll-cue-shadow-radius rgba(black, 0.2);
2644
2645 display: inline-block;
2646 height: $md-calendar-weeks-to-show * $md-calendar-cell-size;
2647
2648 // Add the shadow radius to the width so that the shadow os pushed off to the side and cut off.
2649 width: $md-calendar-width + $md-calendar-scroll-cue-shadow-radius;
2650}
2651
2652// A single date cell in the calendar table.
2653.md-calendar-date {
2654 @include md-calendar-cell();
2655
2656 &.md-calendar-date-disabled {
2657 cursor: default;
2658 }
2659}
2660
2661// Circle element inside of every date cell used to indicate selection or focus.
2662.md-calendar-date-selection-indicator {
2663 transition: background-color, color $swift-ease-out-duration $swift-ease-out-timing-function;
2664
2665 border-radius: 50%;
2666 display: inline-block;
2667
2668 width: $md-calendar-cell-emphasis-size;
2669 height: $md-calendar-cell-emphasis-size;
2670 line-height: $md-calendar-cell-emphasis-size;
2671
2672 .md-calendar-date:not(.md-disabled) & {
2673 cursor: pointer;
2674 }
2675}
2676
2677// The label above each month (containing the month name and the year, e.g. "Jun 2014").
2678.md-calendar-month-label {
2679 height: $md-calendar-cell-size;
2680 font-size: $md-calendar-month-label-font-size;
2681 font-weight: 500; // Roboto Medium
2682 @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));
2683
2684 md-calendar-month &:not(.md-calendar-month-label-disabled) {
2685 cursor: pointer;
2686 }
2687
2688 md-icon {
2689 @include rtl(transform, rotate(180deg), none);
2690 }
2691
2692 span {
2693 vertical-align: middle;
2694 }
2695}
2696
2697// Table containing the day-of-the-week header.
2698.md-calendar-day-header {
2699 @include md-calendar-table();
2700
2701 th {
2702 @include md-calendar-cell($md-calendar-header-height);
2703 font-weight: normal;
2704 }
2705}
2706
2707// Primary table containing all date cells. Each month is a tbody in this table.
2708.md-calendar {
2709 @include md-calendar-table();
2710
2711 // Divider between months.
2712 tr:last-child td {
2713 border-bottom-width: 1px;
2714 border-bottom-style: solid;
2715 }
2716
2717 // The divider between months doesn't actually change the height of the tbody in which the
2718 // border appear; it changes the height of the following tbody. The causes the first-child to be
2719 // 1px shorter than the other months. We fix this by adding an invisible border-top.
2720 &:first-child {
2721 border-top: 1px solid transparent;
2722 }
2723
2724 // Explicitly set vertical-align to avoid conflicting with popular CSS resets. When
2725 // vertical-align:baseline is set, month headers are misaligned. Also reset the box-sizing,
2726 // in case the user set it to border-box.
2727 // http://meyerweb.com/eric/tools/css/reset/
2728 tbody, td, tr {
2729 vertical-align: middle;
2730 box-sizing: content-box;
2731 }
2732}
2733
2734/** Styles for mdDatepicker. */
2735$md-datepicker-button-gap: 12px !default; // Space between the text input and the calendar-icon button.
2736$md-datepicker-border-bottom-gap: 5px !default; // Space between input and the grey underline.
2737$md-date-arrow-size: 5px !default; // Size of the triangle on the right side of the input.
2738$md-datepicker-open-animation-duration: 0.2s !default;
2739$md-datepicker-triangle-button-width: 36px !default;
2740$md-datepicker-input-mask-height: 40px !default;
2741$md-datepicker-button-padding: 8px !default;
2742
2743
2744md-datepicker {
2745 // Don't let linebreaks happen between the open icon-button and the input.
2746 white-space: nowrap;
2747 overflow: hidden;
2748 vertical-align: middle;
2749}
2750
2751.md-inline-form {
2752 md-datepicker {
2753 margin-top: 12px;
2754 }
2755}
2756
2757// The calendar icon button used to open the calendar pane.
2758.md-datepicker-button {
2759 display: inline-block;
2760 box-sizing: border-box;
2761 background: none;
2762 vertical-align: middle;
2763 position: relative;
2764
2765 // Captures any of the click events. This is necessary, because the button has a SVG
2766 // icon which doesn't propagate the focus event, causing inconsistent behaviour.
2767 &:before {
2768 top: 0;
2769 left: 0;
2770 bottom: 0;
2771 right: 0;
2772 position: absolute;
2773 content: '';
2774 speak: none;
2775 }
2776}
2777
2778// The input into which the user can type the date.
2779.md-datepicker-input {
2780 @include md-flat-input();
2781 min-width: 120px;
2782 max-width: $md-calendar-width - $md-datepicker-button-gap;
2783 padding: 0 0 $md-datepicker-border-bottom-gap;
2784}
2785
2786// If the datepicker is inside of a md-input-container
2787._md-datepicker-floating-label {
2788 > md-datepicker {
2789 // Prevents the ripple on the triangle from being clipped.
2790 overflow: visible;
2791
2792 .md-datepicker-input-container {
2793 border: none;
2794 }
2795
2796 .md-datepicker-button {
2797 // Prevents the button from wrapping around, as well as it pushing
2798 // down the error messages more than they should be.
2799 @include rtl(float, left, right);
2800 margin-top: $button-left-right-padding * -2;
2801 top: $button-left-right-padding * 2 - $md-datepicker-border-bottom-gap / 2;
2802 }
2803 }
2804
2805 .md-input {
2806 float: none;
2807 }
2808
2809 &._md-datepicker-has-calendar-icon {
2810 > label:not(.md-no-float):not(.md-container-ignore) {
2811 $width-offset: $md-datepicker-triangle-button-width * 2 + $md-datepicker-button-gap;
2812 $offset: $md-datepicker-triangle-button-width / 2;
2813 @include rtl(right, $offset, auto);
2814 @include rtl(left, auto, $offset);
2815 width: calc(100% - #{$width-offset});
2816 }
2817
2818 .md-input-message-animation {
2819 $margin: $md-datepicker-triangle-button-width + $md-datepicker-button-padding * 2 + $md-datepicker-button-gap;
2820 @include rtl-prop(margin-left, margin-right, $margin, auto);
2821 }
2822 }
2823}
2824
2825._md-datepicker-has-triangle-icon {
2826 // Leave room for the down-triangle button to "overflow" it's parent without modifying scrollLeft.
2827 // This prevents the element from shifting right when opening via the triangle button.
2828 @include rtl-prop(padding-right, padding-left, $md-datepicker-triangle-button-width / 2, 0);
2829 @include rtl-prop(margin-right, margin-left, -$md-datepicker-triangle-button-width / 2, auto);
2830}
2831
2832// Container for the datepicker input.
2833.md-datepicker-input-container {
2834 // Position relative in order to absolutely position the down-triangle button within.
2835 position: relative;
2836
2837 border-bottom-width: 1px;
2838 border-bottom-style: solid;
2839
2840 display: inline-block;
2841 width: auto;
2842
2843 .md-icon-button + & {
2844 @include rtl-prop(margin-left, margin-right, $md-datepicker-button-gap, auto);
2845 }
2846
2847 &.md-datepicker-focused {
2848 border-bottom-width: 2px;
2849 }
2850}
2851
2852.md-datepicker-is-showing .md-scroll-mask {
2853 z-index: $z-index-calendar-pane - 1;
2854}
2855
2856// Floating pane that contains the calendar at the bottom of the input.
2857.md-datepicker-calendar-pane {
2858 // On most browsers the `scale(0)` below prevents this element from
2859 // overflowing it's parent, however IE and Edge seem to disregard it.
2860 // The `left: -100%` pulls the element back in order to ensure that
2861 // it doesn't cause an overflow.
2862 position: absolute;
2863 top: 0;
2864 left: -100%;
2865 z-index: $z-index-calendar-pane;
2866 border-width: 1px;
2867 border-style: solid;
2868 background: transparent;
2869
2870 transform: scale(0);
2871 transform-origin: 0 0;
2872 transition: transform $md-datepicker-open-animation-duration $swift-ease-out-timing-function;
2873
2874 &.md-pane-open {
2875 transform: scale(1);
2876 }
2877}
2878
2879// Portion of the floating panel that sits, invisibly, on top of the input.
2880.md-datepicker-input-mask {
2881 height: $md-datepicker-input-mask-height;
2882 width: $md-calendar-width;
2883 position: relative;
2884 overflow: hidden;
2885
2886 background: transparent;
2887 pointer-events: none;
2888 cursor: text;
2889}
2890
2891// The calendar portion of the floating pane (vs. the input mask).
2892.md-datepicker-calendar {
2893 opacity: 0;
2894 // Use a modified timing function (from swift-ease-out) so that the opacity part of the
2895 // animation doesn't come in as quickly so that the floating pane doesn't ever seem to
2896 // cover up the trigger input.
2897 transition: opacity $md-datepicker-open-animation-duration cubic-bezier(0.5, 0, 0.25, 1);
2898
2899 .md-pane-open & {
2900 opacity: 1;
2901 }
2902
2903 md-calendar:focus {
2904 outline: none;
2905 }
2906}
2907
2908// Down triangle/arrow indicating that the datepicker can be opened.
2909// We can do this entirely with CSS without needing to load an icon.
2910// See https://css-tricks.com/snippets/css/css-triangle/
2911.md-datepicker-expand-triangle {
2912 // Center the triangle inside of the button so that the
2913 // ink ripple origin looks correct.
2914 position: absolute;
2915 top: 50%;
2916 left: 50%;
2917 transform: translate(-50%, -50%);
2918
2919 width: 0;
2920 height: 0;
2921 border-left: $md-date-arrow-size solid transparent;
2922 border-right: $md-date-arrow-size solid transparent;
2923 border-top: $md-date-arrow-size solid;
2924}
2925
2926// Button containing the down "disclosure" triangle/arrow.
2927.md-datepicker-triangle-button {
2928 position: absolute;
2929 @include rtl-prop(right, left, 0, auto);
2930 bottom: -$md-date-arrow-size / 2;
2931
2932 // TODO(jelbourn): This position isn't great on all platforms.
2933 @include rtl(transform, translateX(45%), translateX(-45%));
2934}
2935
2936// Need crazy specificity to override .md-button.md-icon-button.
2937// Only apply this high specificity to the property we need to override.
2938.md-datepicker-triangle-button.md-button.md-icon-button {
2939 height: $md-datepicker-triangle-button-width;
2940 width: $md-datepicker-triangle-button-width;
2941 position: absolute;
2942 padding: $md-datepicker-button-padding;
2943}
2944
2945// Disabled state for all elements of the picker.
2946md-datepicker[disabled] {
2947 .md-datepicker-input-container {
2948 border-bottom-color: transparent;
2949 }
2950
2951 .md-datepicker-triangle-button {
2952 display: none;
2953 }
2954}
2955
2956// Open state for all of the elements of the picker.
2957.md-datepicker-open {
2958 overflow: hidden;
2959
2960 .md-datepicker-input-container,
2961 input.md-input {
2962 border-bottom-color: transparent;
2963 }
2964
2965 .md-datepicker-triangle-button,
2966 &.md-input-has-value > label,
2967 &.md-input-has-placeholder > label {
2968 display: none;
2969 }
2970}
2971
2972// When the position of the floating calendar pane is adjusted to remain inside
2973// of the viewport, hide the inputput mask, as the text input will no longer be
2974// directly underneath it.
2975.md-datepicker-pos-adjusted .md-datepicker-input-mask {
2976 display: none;
2977}
2978
2979// Animate the calendar inside of the floating calendar pane such that it appears to "scroll" into
2980// view while the pane is opening. This is done as a cue to users that the calendar is scrollable.
2981.md-datepicker-calendar-pane {
2982 .md-calendar {
2983 transform: translateY(-85px);
2984 transition: transform 0.65s $swift-ease-out-timing-function;
2985 transition-delay: 0.125s;
2986 }
2987
2988 &.md-pane-open .md-calendar {
2989 transform: translateY(0);
2990 }
2991}
2992
2993$dialog-padding: $baseline-grid * 3 !default;
2994
2995.md-dialog-is-showing {
2996 max-height: 100%;
2997}
2998
2999.md-dialog-container {
3000 display: flex;
3001 justify-content: center;
3002 align-items: center;
3003 position: absolute;
3004 top: 0;
3005 left: 0;
3006 width: 100%;
3007 height: 100%;
3008 z-index: $z-index-dialog;
3009 overflow: hidden;
3010}
3011
3012md-dialog {
3013
3014 &.md-transition-in {
3015 opacity: 1;
3016 transition: $swift-ease-out;
3017 transform: translate(0,0) scale(1.0);
3018 }
3019 &.md-transition-out {
3020 opacity: 0;
3021 transition: $swift-ease-out;
3022 transform: translate(0,100%) scale(0.2);
3023 }
3024
3025 opacity: 0;
3026 min-width: 240px;
3027 max-width: 80%;
3028 max-height: 80%;
3029 position: relative;
3030 overflow: auto; // stop content from leaking out of dialog parent and fix IE
3031
3032 box-shadow: $whiteframe-shadow-13dp;
3033
3034 display: flex;
3035 flex-direction: column;
3036
3037 &> form {
3038 display: flex;
3039 flex-direction: column;
3040 overflow: auto;
3041 }
3042
3043 .md-dialog-content {
3044 padding: $dialog-padding;
3045 }
3046
3047 md-dialog-content {
3048 order: 1;
3049 flex-direction: column;
3050 overflow: auto;
3051 -webkit-overflow-scrolling: touch;
3052
3053 &:not([layout=row]) > *:first-child:not(.md-subheader) {
3054 margin-top: 0;
3055 }
3056
3057 &:focus {
3058 outline: none;
3059 }
3060
3061 .md-subheader {
3062 margin: 0;
3063 }
3064
3065 .md-dialog-content-body {
3066 width:100%;
3067 }
3068
3069 .md-prompt-input-container {
3070 width: 100%;
3071 box-sizing: border-box;
3072 }
3073 }
3074
3075 .md-actions, md-dialog-actions {
3076 display: flex;
3077 order: 2;
3078 box-sizing: border-box;
3079 align-items: center;
3080 justify-content: flex-end;
3081 margin-bottom: 0;
3082 @include rtl(padding-right, $baseline-grid, $baseline-grid * 2);
3083 @include rtl(padding-left, $baseline-grid * 2, $baseline-grid);
3084 min-height: $baseline-grid * 6.5;
3085 overflow: hidden;
3086
3087 .md-button {
3088 margin-bottom: $baseline-grid;
3089 @include rtl(margin-left, $baseline-grid, 0);
3090 @include rtl(margin-right, 0, $baseline-grid);
3091 margin-top: $baseline-grid;
3092 }
3093 }
3094 &.md-content-overflow {
3095 .md-actions, md-dialog-actions {
3096 border-top-width: 1px;
3097 border-top-style: solid;
3098 }
3099 }
3100
3101}
3102
3103@media screen and (-ms-high-contrast: active) {
3104 md-dialog {
3105 border: 1px solid #fff;
3106 }
3107}
3108
3109@media (max-width: $layout-breakpoint-sm - 1) {
3110 md-dialog.md-dialog-fullscreen {
3111 min-height: 100%;
3112 min-width: 100%;
3113 border-radius: 0;
3114 }
3115}
3116
3117md-divider {
3118 display: block;
3119 border-top-width: 1px;
3120 border-top-style: solid;
3121 margin: 0;
3122
3123 &[md-inset] {
3124 @include rtl-prop(margin-left, margin-right, $baseline-grid * 10, auto);
3125 }
3126}
3127
3128.layout-row,
3129.layout-xs-row, .layout-gt-xs-row,
3130.layout-sm-row, .layout-gt-sm-row,
3131.layout-md-row, .layout-gt-md-row,
3132.layout-lg-row, .layout-gt-lg-row,
3133.layout-xl-row {
3134 & > md-divider {
3135 border-top-width: 0;
3136 border-right-width: 1px;
3137 border-right-style: solid;
3138 }
3139}
3140
3141md-fab-speed-dial {
3142 position: relative;
3143 display: flex;
3144 align-items: center;
3145
3146 // Include the top/left/bottom/right fab positions and set the z-index for absolute positioning
3147 @include fab-all-positions();
3148 z-index: $z-index-fab;
3149
3150 // Allow users to enable/disable hovering over the entire speed dial (i.e. the empty space where
3151 // items will eventually appear)
3152 &:not(.md-hover-full) {
3153 // Turn off pointer events when closed
3154 pointer-events: none;
3155
3156 md-fab-trigger, .md-fab-action-item {
3157 // Always make the trigger and action items always have pointer events (the tooltip looks
3158 // for the first parent with pointer-events, so we must set this for tooltips to work)
3159 pointer-events: auto;
3160 }
3161
3162 &.md-is-open {
3163 // Turn on pointer events when open
3164 pointer-events: auto;
3165 }
3166 }
3167
3168 ._md-css-variables {
3169 z-index: $z-index-fab;
3170 }
3171
3172 &.md-is-open {
3173 .md-fab-action-item {
3174 align-items: center;
3175 }
3176 }
3177
3178 md-fab-actions {
3179 display: flex;
3180
3181 // Set the height so that the z-index in the JS animation works
3182 height: auto;
3183
3184 .md-fab-action-item {
3185 transition: $swift-ease-in;
3186 }
3187 }
3188
3189 &.md-down {
3190 flex-direction: column;
3191
3192 md-fab-trigger {
3193 order: 1;
3194 }
3195
3196 md-fab-actions {
3197 flex-direction: column;
3198 order: 2;
3199 }
3200 }
3201
3202 &.md-up {
3203 flex-direction: column;
3204
3205 md-fab-trigger {
3206 order: 2;
3207 }
3208
3209 md-fab-actions {
3210 flex-direction: column-reverse;
3211 order: 1;
3212 }
3213 }
3214
3215 &.md-left {
3216 flex-direction: row;
3217
3218 md-fab-trigger {
3219 order: 2;
3220 }
3221
3222 md-fab-actions {
3223 flex-direction: row-reverse;
3224 order: 1;
3225
3226 .md-fab-action-item {
3227 transition: $swift-ease-in;
3228 }
3229 }
3230 }
3231
3232 &.md-right {
3233 flex-direction: row;
3234
3235 md-fab-trigger {
3236 order: 1;
3237 }
3238
3239 md-fab-actions {
3240 flex-direction: row;
3241 order: 2;
3242
3243 .md-fab-action-item {
3244 transition: $swift-ease-in;
3245 }
3246 }
3247 }
3248
3249 /*
3250 * Hide some graphics glitches if switching animation types
3251 */
3252 &.md-fling-remove, &.md-scale-remove {
3253 .md-fab-action-item > * {
3254 visibility: hidden;
3255 }
3256 }
3257
3258 /*
3259 * Handle the animations
3260 */
3261 &.md-fling {
3262 .md-fab-action-item {
3263 opacity: 1;
3264 }
3265 }
3266
3267 // For the initial animation, set the duration to be instant
3268 &.md-fling.md-animations-waiting {
3269 .md-fab-action-item {
3270 opacity: 0;
3271 transition-duration: 0s;
3272 }
3273 }
3274
3275 &.md-scale {
3276 .md-fab-action-item {
3277 transform: scale(0);
3278 transition: $swift-ease-in;
3279
3280 // Make the scale animation a bit faster since we are delaying each item
3281 transition-duration: $swift-ease-in-duration / 2.1;
3282 }
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
3493md-icon {
3494 margin: auto;
3495 background-repeat: no-repeat no-repeat;
3496 display: inline-block;
3497 vertical-align: middle;
3498 fill: currentColor;
3499 height: $icon-size;
3500 width: $icon-size;
3501
3502 // The icons should not shrink on smaller viewports.
3503 min-height: $icon-size;
3504 min-width: $icon-size;
3505
3506 svg {
3507 pointer-events: none;
3508 display: block;
3509 }
3510
3511 &[md-font-icon] {
3512 line-height: $icon-size;
3513 width: auto;
3514 }
3515}
3516
3517//
3518//@font-face {
3519// font-family:"material";
3520// src:url("/dist/material-font/material.eot");
3521// font-weight:normal;
3522// font-style:normal;
3523//}
3524//
3525//@font-face {
3526// font-family:"material";
3527// src:url("/dist/material-font/material.eot");
3528// src:url("/dist/material-font/material.eot?#iefix") format("embedded-opentype"),
3529// url("/dist/material-font/material.woff") format("woff"),
3530// url("/dist/material-font/material.ttf") format("truetype"),
3531// url("/dist/material-font/material.svg?#material") format("svg");
3532// font-weight:normal;
3533// font-style:normal;
3534//}
3535//
3536///* Bootstrap Overrides */
3537//[class^="icon-"]:before,
3538//[class*=" icon-"]:before {
3539// font-family:"material";
3540// display:inline-block;
3541// vertical-align:middle;
3542// line-height:1;
3543// font-weight:normal;
3544// font-style:normal;
3545// speak:none;
3546// text-decoration:inherit;
3547// text-transform:none;
3548// text-rendering:optimizeLegibility;
3549// -webkit-font-smoothing:antialiased;
3550// -moz-osx-font-smoothing:grayscale;
3551//}
3552
3553$input-container-padding: 2px !default;
3554
3555$input-label-default-offset: 24px !default;
3556$input-label-default-scale: 1.0 !default;
3557$input-label-float-offset: 6px !default;
3558$input-label-float-scale: 0.75 !default;
3559$input-label-float-width: $input-container-padding + 16px !default;
3560
3561$input-placeholder-offset: $input-label-default-offset !default;
3562
3563$input-border-width-default: 1px !default;
3564$input-border-width-focused: 2px !default;
3565$input-line-height: 26px !default;
3566$input-padding-top: 2px !default;
3567
3568$input-error-font-size: 12px !default;
3569$input-error-height: 24px !default;
3570$input-error-line-height: $input-error-font-size + 2px !default;
3571$error-padding-top: ($input-error-height - $input-error-line-height) / 2 !default;
3572
3573$icon-offset: 36px !default;
3574
3575$icon-top-offset: ($icon-offset - $input-padding-top - $input-border-width-focused) / 4 !default;
3576
3577$icon-float-focused-top: -8px !default;
3578
3579$input-resize-handle-height: 10px !default;
3580
3581md-input-container {
3582 @include pie-clearfix();
3583 display: inline-block;
3584 position: relative;
3585 padding: $input-container-padding;
3586 margin: 18px 0;
3587 vertical-align: middle;
3588
3589 &.md-block {
3590 display: block;
3591 }
3592
3593 // Setup a spacer that is always there as a placeholder for any messages so we don't change
3594 // height with only 1 message
3595 .md-errors-spacer {
3596 @include rtl(float, right, left);
3597 min-height: $input-error-height;
3598
3599 // Ensure the element always takes up space, even if empty
3600 min-width: 1px;
3601 }
3602
3603 > md-icon {
3604 position: absolute;
3605 top: $icon-top-offset;
3606 @include rtl(left, 2px, auto);
3607 @include rtl(right, auto, 2px);
3608 }
3609
3610 textarea,
3611 input[type="text"],
3612 input[type="password"],
3613 input[type="datetime"],
3614 input[type="datetime-local"],
3615 input[type="date"],
3616 input[type="month"],
3617 input[type="time"],
3618 input[type="week"],
3619 input[type="number"],
3620 input[type="email"],
3621 input[type="url"],
3622 input[type="search"],
3623 input[type="tel"],
3624 input[type="color"] {
3625 /* remove default appearance from all input/textarea */
3626 -moz-appearance: none;
3627 -webkit-appearance: none;
3628 }
3629 input[type="date"],
3630 input[type="datetime-local"],
3631 input[type="month"],
3632 input[type="time"],
3633 input[type="week"] {
3634 min-height: $input-line-height;
3635 }
3636 textarea {
3637 resize: none;
3638 overflow: hidden;
3639
3640 &.md-input {
3641 min-height: $input-line-height;
3642 -ms-flex-preferred-size: auto; //IE fix
3643 }
3644
3645 // The height usually gets set to 1 line by `.md-input`.
3646 &[md-no-autogrow] {
3647 height: auto;
3648 overflow: auto;
3649 }
3650 }
3651
3652 label:not(.md-container-ignore) {
3653 position: absolute;
3654 bottom: 100%;
3655 @include rtl(left, 0, auto);
3656 @include rtl(right, auto, 0);
3657
3658 &.md-required:after {
3659 content: ' *';
3660 font-size: 13px;
3661 vertical-align: top;
3662 }
3663 }
3664
3665 label:not(.md-no-float):not(.md-container-ignore),
3666 .md-placeholder {
3667 overflow: hidden;
3668 text-overflow: ellipsis;
3669 white-space: nowrap;
3670 width: 100%;
3671 order: 1;
3672 pointer-events: none;
3673 -webkit-font-smoothing: antialiased;
3674 @include rtl(padding-left, $input-container-padding + 1px, 0);
3675 @include rtl(padding-right, 0, $input-container-padding + 1px);
3676 z-index: 1;
3677 transform: translate3d(0, $input-label-default-offset + 4, 0) scale($input-label-default-scale);
3678 transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
3679
3680 // The max-width is necessary, because in some browsers, using this together with
3681 // a calc might cause it to overflow the parent. See #7403
3682 max-width: 100%;
3683
3684 @include rtl(transform-origin, left top, right top);
3685 }
3686 .md-placeholder {
3687 position: absolute;
3688 top: 0;
3689 opacity: 0;
3690 transition-property: opacity, transform;
3691 transform: translate3d(0, $input-placeholder-offset + $baseline-grid * 0.75, 0);
3692 }
3693 &.md-input-focused .md-placeholder {
3694 opacity: 1;
3695 transform: translate3d(0, $input-placeholder-offset, 0);
3696 }
3697 // Placeholder should immediately disappear when the user starts typing
3698 &.md-input-has-value .md-placeholder {
3699 transition: none;
3700 opacity: 0;
3701 }
3702
3703 &:not( .md-input-has-value ) input:not( :focus ),
3704 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-ampm-field,
3705 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-day-field,
3706 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-hour-field,
3707 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-millisecond-field,
3708 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-minute-field,
3709 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-month-field,
3710 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-second-field,
3711 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-week-field,
3712 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-year-field,
3713 &:not( .md-input-has-value ) input:not( :focus )::-webkit-datetime-edit-text {
3714 color: transparent;
3715 }
3716
3717 /*
3718 * The .md-input class is added to the input/textarea
3719 */
3720 .md-input {
3721 order: 2;
3722 display: block;
3723 margin-top: 0;
3724
3725 background: none;
3726 padding-top: $input-padding-top;
3727 padding-bottom: $input-border-width-focused - $input-border-width-default;
3728 padding-left: 2px;
3729 padding-right: 2px;
3730 border-width: 0 0 $input-border-width-default 0;
3731 line-height: $input-line-height;
3732 height: $input-line-height + ($input-padding-top * 2);
3733 -ms-flex-preferred-size: $input-line-height; //IE fix
3734 border-radius: 0;
3735 border-style: solid; // Firefox fix
3736
3737 // Fix number inputs in Firefox to be full-width
3738 width: 100%;
3739 box-sizing: border-box;
3740
3741 // Hacky fix to force vertical alignment between `input` and `textarea`
3742 // Input and textarea do not align by default:
3743 // http://jsbin.com/buqomevage/1/edit?html,css,js,output
3744 @include rtl(float, left, right);
3745
3746 &:focus {
3747 outline: none;
3748 }
3749 &:invalid {
3750 outline: none;
3751 box-shadow: none;
3752 }
3753
3754 &.md-no-flex {
3755 flex: none !important;
3756 }
3757 }
3758
3759 .md-char-counter {
3760 @include rtl(text-align, right, left);
3761 @include rtl(padding-right, $input-container-padding, 0);
3762 @include rtl(padding-left, 0, $input-container-padding);
3763 }
3764
3765 //
3766 // ngMessage base styles - animations moved to input.js
3767 //
3768 .md-input-messages-animation {
3769 position: relative;
3770 order: 4;
3771 overflow: hidden;
3772 @include rtl(clear, left, right);
3773
3774 &.ng-enter {
3775 // Upon entering the DOM, messages should be hidden
3776 .md-input-message-animation {
3777 opacity: 0;
3778 margin-top: -100px;
3779 }
3780 }
3781 }
3782
3783 .md-input-message-animation, .md-char-counter {
3784 font-size: $input-error-font-size;
3785 line-height: $input-error-line-height;
3786 overflow: hidden;
3787
3788 transition: $swift-ease-in;
3789
3790 // Default state for messages is to be visible
3791 opacity: 1;
3792 margin-top: 0;
3793
3794 // Add some top padding which is equal to half the difference between the expected height
3795 // and the actual height
3796 padding-top: $error-padding-top;
3797
3798 &:not(.md-char-counter) {
3799 // Add some padding so that the messages don't touch the character counter
3800 @include rtl(padding-right, rem(0.5), 0);
3801 @include rtl(padding-left, 0, rem(0.5));
3802 }
3803 }
3804
3805 &:not(.md-input-invalid) {
3806 .md-auto-hide {
3807 .md-input-message-animation {
3808 opacity: 0;
3809 margin-top: -100px;
3810 }
3811 }
3812 }
3813
3814 // Note: This is a workaround to fix an ng-enter flicker bug
3815 .md-input-message-animation {
3816 &:not(.ng-animate) {
3817 opacity: 0;
3818 margin-top: -100px;
3819 }
3820 }
3821
3822 .md-input-message-animation {
3823 &.ng-enter {
3824 opacity: 0;
3825 margin-top: -100px;
3826 }
3827 }
3828
3829 &.md-input-focused,
3830 &.md-input-has-placeholder,
3831 &.md-input-has-value {
3832 label:not(.md-no-float) {
3833 transform: translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale);
3834 transition: transform $swift-ease-out-timing-function $swift-ease-out-duration,
3835 width $swift-ease-out-timing-function $swift-ease-out-duration;
3836 }
3837 }
3838
3839 // If we have an existing value; don't animate the transform as it happens on page load and
3840 // causes erratic/unnecessary animation
3841 &.md-input-has-value {
3842 label {
3843 transition: none;
3844 }
3845 }
3846
3847 // Use wide border in error state or in focused state
3848 &.md-input-focused .md-input,
3849 .md-input.ng-invalid.ng-dirty,
3850 &.md-input-resized .md-input {
3851 padding-bottom: 0; // Increase border width by 1px, decrease padding by 1
3852 border-width: 0 0 $input-border-width-focused 0;
3853 }
3854
3855 .md-input {
3856 &[disabled],
3857 [disabled] & {
3858 // The negative border width offsets the dotted "border" so
3859 // it's placed in the same place as the solid one before it.
3860 background-position: bottom $input-border-width-default * -1 left 0;
3861 // This background-size is coordinated with a linear-gradient set in input-theme.scss
3862 // to create a dotted line under the input.
3863 background-size: 4px 1px;
3864 background-repeat: repeat-x;
3865 }
3866 }
3867
3868 &.md-icon-float {
3869
3870 transition: margin-top $swift-ease-out-duration $swift-ease-out-timing-function;
3871
3872 > label {
3873 pointer-events: none;
3874 position: absolute;
3875 }
3876
3877 > md-icon {
3878 top: $icon-top-offset;
3879 @include rtl(left, 2px, auto);
3880 @include rtl(right, auto, 2px);
3881 }
3882
3883 }
3884
3885 &.md-icon-left,
3886 &.md-icon-right {
3887 > label {
3888 &:not(.md-no-float):not(.md-container-ignore),
3889 .md-placeholder {
3890 width: calc(100% - #{$icon-offset} - #{$input-label-float-width});
3891 }
3892 }
3893 }
3894
3895 // icon offset should have higher priority as normal label
3896 &.md-icon-left {
3897 @include rtl(padding-left, $icon-offset, 0);
3898 @include rtl(padding-right, 0, $icon-offset);
3899 > label {
3900 @include rtl(left, $icon-offset, auto);
3901 @include rtl(right, auto, $icon-offset);
3902 }
3903 }
3904
3905 &.md-icon-right {
3906 @include rtl(padding-left, 0, $icon-offset);
3907 @include rtl(padding-right, $icon-offset, 0);
3908
3909 > md-icon:last-of-type {
3910 margin: 0;
3911
3912 @include rtl(right, 2px, auto);
3913 @include rtl(left, auto, 2px);
3914 }
3915 }
3916
3917 &.md-icon-left.md-icon-right {
3918 padding-left: $icon-offset;
3919 padding-right: $icon-offset;
3920
3921 > label {
3922 &:not(.md-no-float):not(.md-container-ignore),
3923 .md-placeholder {
3924 width: calc(100% - (#{$icon-offset} * 2));
3925 }
3926 }
3927 }
3928}
3929
3930.md-resize-wrapper {
3931 @include pie-clearfix();
3932 position: relative;
3933}
3934
3935.md-resize-handle {
3936 position: absolute;
3937 bottom: $input-resize-handle-height / -2;
3938 left: 0;
3939 height: $input-resize-handle-height;
3940 background: transparent;
3941 width: 100%;
3942 cursor: ns-resize;
3943}
3944
3945@media screen and (-ms-high-contrast: active) {
3946 md-input-container.md-default-theme > md-icon {
3947 fill: #fff;
3948 }
3949}
3950
3951$dense-baseline-grid: $baseline-grid / 2 !default;
3952
3953$list-h3-margin: 0 0 0px 0 !default;
3954$list-h4-margin: 3px 0 1px 0 !default;
3955$list-h4-font-weight: 400 !default;
3956$list-header-line-height: 1.2em !default;
3957$list-p-margin: 0 0 0 0 !default;
3958$list-p-line-height: 1.6em !default;
3959
3960$list-padding-top: $baseline-grid !default;
3961$list-padding-right: 0px !default;
3962$list-padding-left: 0px !default;
3963$list-padding-bottom: $baseline-grid !default;
3964
3965$item-padding-top: 0px !default;
3966$item-padding-right: 0px !default;
3967$item-padding-left: 0px !default;
3968$item-padding-bottom: 0px !default;
3969$list-item-padding-vertical: 0px !default;
3970$list-item-padding-horizontal: $baseline-grid * 2 !default;
3971$list-item-primary-width: $baseline-grid * 7 !default;
3972$list-item-primary-avatar-width: $baseline-grid * 5 !default;
3973$list-item-primary-icon-width: $baseline-grid * 3 !default;
3974$list-item-secondary-left-margin: $baseline-grid * 2 !default;
3975$list-item-secondary-button-width: $baseline-grid * 6 !default;
3976$list-item-inset-divider-offset: 9 * $baseline-grid !default;
3977$list-item-height: 6 * $baseline-grid !default;
3978$list-item-two-line-height: 9 * $baseline-grid !default;
3979$list-item-three-line-height: 11 * $baseline-grid !default;
3980
3981$list-item-dense-height: 12 * $dense-baseline-grid !default;
3982$list-item-dense-two-line-height: 15 * $dense-baseline-grid !default;
3983$list-item-dense-three-line-height: 19 * $dense-baseline-grid !default;
3984$list-item-dense-primary-icon-width: $dense-baseline-grid * 5 !default;
3985$list-item-dense-primary-avatar-width: $dense-baseline-grid * 9 !default;
3986$list-item-dense-header-font-size: round($subhead-font-size-base * 0.8) !default;
3987$list-item-dense-font-size: round($body-font-size-base * 0.85) !default;
3988$list-item-dense-line-height: 1.05 !default;
3989
3990md-list {
3991 display: block;
3992 padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;
3993
3994 .md-subheader {
3995 font-size: $body-font-size-base;
3996 font-weight: 500;
3997 letter-spacing: 0.010em;
3998 line-height: $list-header-line-height;
3999 }
4000
4001 &.md-dense {
4002 md-list-item {
4003 &,
4004 .md-list-item-inner {
4005 min-height: $list-item-dense-height;
4006 @include ie11-min-height-flexbug($list-item-dense-height);
4007
4008
4009 // Layout for controls in primary or secondary divs, or auto-infered first child
4010
4011 md-icon:first-child {
4012 width: $list-item-dense-primary-icon-width;
4013 height: $list-item-dense-primary-icon-width;
4014 }
4015
4016 > md-icon:first-child:not(.md-avatar-icon) {
4017 @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-icon-width, auto);
4018 }
4019 .md-avatar, .md-avatar-icon {
4020 @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-dense-primary-avatar-width, auto);
4021 }
4022 .md-avatar {
4023 flex: none;
4024 width: $list-item-dense-primary-avatar-width;
4025 height: $list-item-dense-primary-avatar-width;
4026 }
4027 }
4028
4029 &.md-2-line,
4030 &.md-3-line {
4031 &, & > .md-no-style {
4032 .md-list-item-text {
4033 &.md-offset {
4034 @include rtl-prop(margin-left, margin-right, $list-item-primary-width, auto);
4035 }
4036
4037 h3,
4038 h4,
4039 p {
4040 line-height: $list-item-dense-line-height;
4041 font-size: $list-item-dense-font-size;
4042 }
4043
4044 h3 {
4045 font-size: $list-item-dense-header-font-size;
4046 }
4047 }
4048 }
4049 }
4050
4051 &.md-2-line {
4052 &, & > .md-no-style {
4053 min-height: $list-item-dense-two-line-height;
4054 @include ie11-min-height-flexbug($list-item-dense-two-line-height);
4055
4056 > .md-avatar, .md-avatar-icon {
4057 margin-top: $baseline-grid * 1.5;
4058 }
4059 }
4060 }
4061
4062 &.md-3-line {
4063 &, & > .md-no-style {
4064
4065 min-height: $list-item-dense-three-line-height;
4066 @include ie11-min-height-flexbug($list-item-dense-three-line-height);
4067
4068 > md-icon:first-child,
4069 > .md-avatar {
4070 margin-top: $baseline-grid * 2;
4071 }
4072 }
4073 }
4074 }
4075 }
4076}
4077
4078md-list-item {
4079 // Ensure nested dividers are properly positioned
4080 position: relative;
4081
4082 &.md-proxy-focus.md-focused .md-no-style {
4083 transition: background-color 0.15s linear;
4084 }
4085
4086 &._md-button-wrap {
4087 position: relative;
4088
4089 > div.md-button:first-child {
4090 // Layout - Vertically align the item content.
4091 display: flex;
4092 align-items: center;
4093 justify-content: flex-start;
4094
4095 padding: 0 16px;
4096 margin: 0;
4097
4098 font-weight: 400;
4099 @include rtl(text-align, left, right);
4100 border: medium none;
4101
4102 // The button executor should fill the whole list item.
4103 > .md-button:first-child {
4104 position: absolute;
4105 top: 0;
4106 left: 0;
4107 height: 100%;
4108
4109 margin: 0;
4110 padding: 0;
4111 }
4112
4113 .md-list-item-inner {
4114 // The list item content should fill the complete width.
4115 width: 100%;
4116 min-height: inherit;
4117 }
4118
4119 }
4120
4121 }
4122
4123 &.md-no-proxy,
4124 .md-no-style {
4125 position: relative;
4126 padding: $list-item-padding-vertical $list-item-padding-horizontal;
4127
4128 // Layout [flex='auto']
4129 flex: 1 1 auto;
4130
4131 &.md-button {
4132 font-size: inherit;
4133 height: inherit;
4134 @include rtl(text-align, left, right);
4135 text-transform: none;
4136 width: 100%;
4137 white-space: normal;
4138 flex-direction: inherit;
4139 align-items: inherit;
4140 border-radius: 0;
4141 margin: 0;
4142
4143 & > .md-ripple-container {
4144 border-radius: 0;
4145 }
4146 }
4147 &:focus {
4148 outline: none
4149 }
4150 }
4151 &.md-clickable:hover {
4152 cursor: pointer;
4153 }
4154
4155 md-divider {
4156 position: absolute;
4157 bottom: 0;
4158 @include rtl-prop(left, right, 0, auto);
4159 width: 100%;
4160 &[md-inset] {
4161 @include rtl-prop(left, right, $list-item-inset-divider-offset, auto);
4162 width: calc(100% - #{$list-item-inset-divider-offset});
4163 margin: 0 !important;
4164 }
4165 }
4166
4167 &,
4168 .md-list-item-inner {
4169
4170 // Layout [flex layout-align='start center']
4171 display: flex;
4172 justify-content: flex-start;
4173 align-items: center;
4174
4175 min-height: $list-item-height;
4176 @include ie11-min-height-flexbug($list-item-height);
4177
4178 height: auto;
4179
4180 // Layout for controls in primary or secondary divs, or auto-infered first child
4181 & > div.md-primary > md-icon:not(.md-avatar-icon),
4182 & > div.md-secondary > md-icon:not(.md-avatar-icon),
4183 & > md-icon:first-child:not(.md-avatar-icon),
4184 > md-icon.md-secondary:not(.md-avatar-icon) {
4185 width: $list-item-primary-icon-width;
4186 margin-top: 16px;
4187 margin-bottom: 12px;
4188 box-sizing: content-box;
4189 }
4190 & > div.md-primary > md-checkbox,
4191 & > div.md-secondary > md-checkbox,
4192 & > md-checkbox,
4193 md-checkbox.md-secondary {
4194 align-self: center;
4195 .md-label {
4196 display: none;
4197 }
4198 }
4199
4200 & > md-icon:first-child:not(.md-avatar-icon) {
4201 @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-icon-width, auto);
4202 }
4203
4204 & .md-avatar, .md-avatar-icon {
4205 margin-top: $baseline-grid;
4206 margin-bottom: $baseline-grid;
4207 @include rtl-prop(margin-right, margin-left, $list-item-primary-width - $list-item-primary-avatar-width, auto);
4208 border-radius: 50%;
4209 box-sizing: content-box;
4210 }
4211 & .md-avatar {
4212 flex: none;
4213 width: $list-item-primary-avatar-width;
4214 height: $list-item-primary-avatar-width;
4215 }
4216 & .md-avatar-icon {
4217 padding: 8px;
4218
4219 // Set the width/height to the same as the icon to fix issue on iOS Safari where the
4220 // height: 100% was causing it to be larger than it's parent
4221 svg {
4222 width: $icon-size;
4223 height: $icon-size;
4224 }
4225 }
4226
4227 & > md-checkbox {
4228 width: 3 * $baseline-grid;
4229 @include rtl(margin-left, 3px, 29px);
4230 @include rtl(margin-right, 29px, 3px);
4231 margin-top: 16px;
4232 }
4233
4234 .md-secondary-container {
4235 display: flex;
4236 align-items: center;
4237
4238 // Per W3C: https://www.w3.org/TR/css-flexbox/#flex-common
4239 // By default, flex items won’t shrink below their minimum content size.
4240 // Safari doesn't follow that specification due to a bug and expects the developer to
4241 // explicitly disable flex shrinking.
4242 flex-shrink: 0;
4243
4244 // Using margin auto to move them to the end of the list item is more elegant, because it has
4245 // a lower priority than a flex filler and isn't introducing any overflow issues.
4246 // The margin on the top is important to align multiple secondary items vertically.
4247 margin: auto;
4248
4249 @include rtl(margin-right, 0, auto);
4250 @include rtl(margin-left, auto, 0);
4251
4252 .md-button, .md-icon-button {
4253 &:last-of-type {
4254 // Reset 6px margin for the button.
4255 @include rtl-prop(margin-right, margin-left, 0, auto);
4256 }
4257 }
4258
4259 md-checkbox {
4260 margin-top: 0;
4261 margin-bottom: 0;
4262
4263 &:last-child {
4264 width: 3 * $baseline-grid;
4265 @include rtl-prop(margin-right, margin-left, 0, auto);
4266 }
4267 }
4268
4269 md-switch {
4270 margin-top: 0;
4271 margin-bottom: 0;
4272
4273 @include rtl-prop(margin-right, margin-left, -6px, auto);
4274 }
4275 }
4276
4277 & > p, & > .md-list-item-inner > p {
4278 flex: 1 1 auto;
4279 margin: 0;
4280 }
4281 }
4282
4283 &.md-2-line,
4284 &.md-3-line {
4285 &, & > .md-no-style {
4286 align-items: flex-start;
4287 justify-content: center;
4288
4289 &.md-long-text {
4290 margin-top: $baseline-grid;
4291 margin-bottom: $baseline-grid;
4292 }
4293
4294 .md-list-item-text {
4295 flex: 1 1 auto;
4296 margin: auto;
4297 text-overflow: ellipsis;
4298 overflow: hidden;
4299
4300 &.md-offset {
4301 @include rtl-prop(margin-left, margin-right, $list-item-primary-width, auto);
4302 }
4303
4304 h3 {
4305 font-size: $subhead-font-size-base;
4306 font-weight: 400;
4307 letter-spacing: 0.010em;
4308 margin: $list-h3-margin;
4309 line-height: $list-header-line-height;
4310 overflow: hidden;
4311 white-space: nowrap;
4312 text-overflow: ellipsis;
4313 }
4314 h4 {
4315 font-size: $body-font-size-base;
4316 letter-spacing: 0.010em;
4317 margin: $list-h4-margin;
4318 font-weight: $list-h4-font-weight;
4319 line-height: $list-header-line-height;
4320 overflow: hidden;
4321 white-space: nowrap;
4322 text-overflow: ellipsis;
4323 }
4324 p {
4325 font-size: $body-font-size-base;
4326 font-weight: 500;
4327 letter-spacing: 0.010em;
4328 margin: $list-p-margin;
4329 line-height: $list-p-line-height;
4330 }
4331 }
4332 }
4333 }
4334
4335 &.md-2-line {
4336 &, & > .md-no-style {
4337 height: auto;
4338
4339 min-height: $list-item-two-line-height;
4340 @include ie11-min-height-flexbug($list-item-two-line-height);
4341
4342 > .md-avatar, .md-avatar-icon {
4343 margin-top: $baseline-grid * 1.5;
4344 }
4345
4346 > md-icon:first-child {
4347 align-self: flex-start;
4348 }
4349
4350 .md-list-item-text {
4351 flex: 1 1 auto;
4352 }
4353 }
4354 }
4355
4356 &.md-3-line {
4357 &, & > .md-no-style {
4358 height: auto;
4359
4360 min-height: $list-item-three-line-height;
4361 @include ie11-min-height-flexbug($list-item-three-line-height);
4362
4363 > md-icon:first-child,
4364 > .md-avatar {
4365 margin-top: $baseline-grid * 2;
4366 }
4367 }
4368 }
4369}
4370
4371$menu-border-radius: 2px !default;
4372$max-visible-items: 6 !default;
4373$menu-item-height: 6 * $baseline-grid !default;
4374$dense-menu-item-height: 4 * $baseline-grid !default;
4375$max-menu-height: 2 * $baseline-grid + $max-visible-items * $menu-item-height !default;
4376$max-dense-menu-height: 2 * $baseline-grid + $max-visible-items * $dense-menu-item-height !default;
4377
4378.md-open-menu-container {
4379 position: fixed;
4380 left: 0;
4381 top: 0;
4382 z-index: $z-index-menu;
4383 opacity: 0;
4384 border-radius: $menu-border-radius;
4385
4386 md-menu-divider {
4387 margin-top: $baseline-grid / 2;
4388 margin-bottom: $baseline-grid / 2;
4389 height: 1px;
4390 min-height: 1px;
4391 max-height: 1px;
4392 width: 100%;
4393 }
4394
4395 md-menu-content > * {
4396 opacity: 0;
4397 }
4398
4399 // Don't let the user click something until it's animated
4400 &:not(.md-clickable) {
4401 pointer-events: none;
4402 }
4403
4404 // enter: menu scales in, then list fade in.
4405 &.md-active {
4406 opacity: 1;
4407 transition: $swift-ease-out;
4408 transition-duration: 200ms;
4409 > md-menu-content > * {
4410 opacity: 1;
4411 transition: $swift-ease-in;
4412 transition-duration: 200ms;
4413 transition-delay: 100ms;
4414 }
4415 }
4416 // leave: the container fades out
4417 &.md-leave {
4418 opacity: 0;
4419 transition: $swift-ease-in;
4420 transition-duration: 250ms;
4421 }
4422}
4423
4424md-menu-content {
4425 display: flex;
4426 flex-direction: column;
4427 padding: $baseline-grid 0;
4428 max-height: $max-menu-height;
4429 overflow-y: auto;
4430 &.md-dense {
4431 max-height: $max-dense-menu-height;
4432 md-menu-item {
4433 height: $dense-menu-item-height;
4434 min-height: 0px;
4435 }
4436 }
4437}
4438
4439md-menu-item {
4440 display: flex;
4441 flex-direction: row;
4442 min-height: $menu-item-height;
4443 height: $menu-item-height;
4444 align-content: center;
4445 justify-content: flex-start;
4446
4447 > * {
4448 width: 100%;
4449 margin: auto 0;
4450 padding-left: 2*$baseline-grid;
4451 padding-right: 2*$baseline-grid;
4452 }
4453
4454 /*
4455 * We cannot use flex on <button> elements due to a bug in Firefox, so we also can't use it on
4456 * <a> elements. Add some top padding to fix alignment since buttons automatically align their
4457 * text vertically.
4458 */
4459 > a.md-button {
4460 padding-top: 5px;
4461 }
4462
4463 > .md-button {
4464 // Firefox-specific reset styling to fix alignment issues (see #8464)
4465 &::-moz-focus-inner {
4466 padding: 0;
4467 border: 0
4468 }
4469
4470 @include rtl(text-align, left, right);
4471
4472 display: inline-block;
4473 border-radius: 0;
4474 margin: auto 0;
4475 font-size: (2*$baseline-grid) - 1;
4476 text-transform: none;
4477 font-weight: 400;
4478 height: 100%;
4479 padding-left: 2*$baseline-grid;
4480 padding-right: 2*$baseline-grid;
4481 width:100%;
4482 md-icon {
4483 @include rtl(margin, auto 2*$baseline-grid auto 0, auto 0 auto 2*$baseline-grid);
4484 }
4485 p {
4486 display:inline-block;
4487 margin: auto;
4488 }
4489 span {
4490 margin-top: auto;
4491 margin-bottom: auto;
4492 }
4493 .md-ripple-container {
4494 border-radius: inherit;
4495 }
4496 }
4497}
4498
4499md-toolbar {
4500 .md-menu {
4501 height: auto;
4502 margin: auto;
4503 padding: 0;
4504 }
4505}
4506
4507@media (max-width: $layout-breakpoint-sm - 1) {
4508 md-menu-content {
4509 min-width: 112px;
4510 }
4511 @for $i from 3 through 7 {
4512 md-menu-content[width="#{$i}"] {
4513 min-width: $i * 56px;
4514 }
4515 }
4516}
4517
4518@media (min-width: $layout-breakpoint-sm) {
4519 md-menu-content {
4520 min-width: 96px;
4521 }
4522 @for $i from 3 through 7 {
4523 md-menu-content[width="#{$i}"] {
4524 min-width: $i * 64px;
4525 }
4526 }
4527}
4528
4529
4530md-toolbar {
4531 &.md-menu-toolbar {
4532 h2.md-toolbar-tools {
4533 line-height: 1rem;
4534 height: auto;
4535 padding: 3.5 * $baseline-grid;
4536 padding-bottom: 1.5 * $baseline-grid;
4537 }
4538 }
4539
4540 // Used to allow hovering from one menu to the
4541 // next when inside of a toolbar.
4542 &.md-has-open-menu {
4543 position: relative;
4544 z-index: $z-index-menu;
4545 }
4546}
4547
4548md-menu-bar {
4549 padding: 0 2.5 * $baseline-grid;
4550 display: block;
4551 position: relative;
4552 z-index: 2;
4553 .md-menu {
4554 display: inline-block;
4555 padding: 0;
4556 position: relative;
4557 }
4558 button {
4559 font-size: rem(1.4);
4560 padding: 0 1.25 * $baseline-grid;
4561 margin: 0;
4562 border: 0;
4563 background-color: transparent;
4564 height: 5 * $baseline-grid;
4565 }
4566
4567 md-backdrop.md-menu-backdrop {
4568 z-index: -2;
4569 }
4570}
4571
4572md-menu-content.md-menu-bar-menu.md-dense {
4573 max-height: none;
4574 padding: 2 * $baseline-grid 0;
4575 md-menu-item.md-indent {
4576 position: relative;
4577 > md-icon {
4578 position: absolute;
4579 padding: 0;
4580 width: 24px;
4581 top: 0.75 * $baseline-grid;
4582 @include rtl-prop(left, right, 3 * $baseline-grid, auto);
4583 }
4584 > .md-button, .md-menu > .md-button {
4585 @include rtl(padding, 0 4 * $baseline-grid 0 8 * $baseline-grid, 0 8 * $baseline-grid 0 4 * $baseline-grid);
4586 }
4587 }
4588 .md-button {
4589 min-height: 0;
4590 height: 4 * $baseline-grid;
4591 span {
4592 @include rtl(float, left, right);
4593 }
4594 span.md-alt-text {
4595 @include rtl(float, right, left);
4596 margin: 0 $baseline-grid;
4597 }
4598 }
4599 md-menu-divider {
4600 margin: $baseline-grid 0;
4601 }
4602
4603 md-menu-item > .md-button, .md-menu > .md-button {
4604 @include rtl(text-align, left, right);
4605 }
4606
4607 .md-menu {
4608 padding: 0;
4609 > .md-button {
4610 position: relative;
4611 margin: 0;
4612 width: 100%;
4613 text-transform: none;
4614 font-weight: normal;
4615 border-radius: 0px;
4616 @include rtl-prop(padding-left, padding-right, 2 * $baseline-grid, 0);
4617 &:after {
4618 display: block;
4619 content: '\25BC';
4620 position: absolute;
4621 top: 0px;
4622 speak: none;
4623 @include rtl(transform, rotate(270deg) scaleY(0.45) scaleX(0.9), rotate(90deg) scaleY(0.45) scaleX(0.9));
4624 @include rtl-prop(right, left, 3.5 * $baseline-grid, auto);
4625 }
4626 }
4627 }
4628}
4629
4630/** Matches "md-tabs md-tabs-wrapper" style. */
4631$md-nav-bar-height: 48px;
4632
4633.md-nav-bar {
4634 border-style: solid;
4635 border-width: 0 0 1px;
4636 height: $md-nav-bar-height;
4637 position: relative;
4638}
4639
4640._md-nav-bar-list {
4641 outline: none;
4642 list-style: none;
4643 margin: 0;
4644 padding: 0;
4645
4646 // Layout [layout='row']
4647 box-sizing: border-box;
4648 display: flex;
4649 flex-direction: row;
4650}
4651
4652.md-nav-item:first-of-type {
4653 margin-left: 8px;
4654}
4655
4656// override button styles to look more like tabs
4657.md-button._md-nav-button {
4658 line-height: 24px;
4659 margin: 0 4px;
4660 padding: 12px 16px;
4661 transition: background-color 0.35s $swift-ease-in-out-timing-function;
4662
4663 &:focus {
4664 outline: none;
4665 }
4666
4667 &:hover {
4668 background-color: inherit;
4669 }
4670}
4671
4672md-nav-ink-bar {
4673 $duration: $swift-ease-in-out-duration * 0.5;
4674 $multiplier: 0.5;
4675 bottom: 0;
4676 height: 2px;
4677 left: auto;
4678 position: absolute;
4679 right: auto;
4680 background-color: black;
4681
4682 &._md-left {
4683 transition: left ($duration * $multiplier) $swift-ease-in-out-timing-function,
4684 right $duration $swift-ease-in-out-timing-function;
4685 }
4686 &._md-right {
4687 transition: left $duration $swift-ease-in-out-timing-function,
4688 right ($duration * $multiplier) $swift-ease-in-out-timing-function;
4689 }
4690
4691 // By default $ngAnimate looks for transition durations on the element, when using ng-hide, ng-if, ng-show.
4692 // The ink bar has a transition duration applied, which means, that $ngAnimate delays the hide process.
4693 // To avoid this, we need to reset the transition, when $ngAnimate looks for the duration.
4694 &.ng-animate {
4695 transition: none;
4696 }
4697
4698}
4699
4700md-nav-extra-content {
4701 min-height: 48px;
4702 padding-right: 12px;
4703}
4704
4705$progress-circular-indeterminate-duration: 1568.63ms !default;
4706
4707@keyframes indeterminate-rotate {
4708 0% { transform: rotate(0deg); }
4709 100% { transform: rotate(360deg); }
4710}
4711
4712// Used to avoid unnecessary layout
4713md-progress-circular {
4714 position: relative;
4715 display: block;
4716
4717 &._md-progress-circular-disabled {
4718 visibility: hidden;
4719 }
4720
4721 &.md-mode-indeterminate svg {
4722 animation: indeterminate-rotate $progress-circular-indeterminate-duration linear infinite;
4723 }
4724
4725 svg {
4726 position: absolute;
4727 overflow: visible;
4728 top: 0;
4729 left: 0;
4730 }
4731}
4732
4733$progress-linear-bar-height: 5px !default;
4734
4735md-progress-linear {
4736 display: block;
4737 position: relative;
4738 width: 100%;
4739 height: $progress-linear-bar-height;
4740
4741 padding-top: 0 !important;
4742 margin-bottom: 0 !important;
4743
4744 &._md-progress-linear-disabled {
4745 visibility: hidden;
4746 }
4747
4748 .md-container {
4749 display:block;
4750 position: relative;
4751 overflow: hidden;
4752
4753 width:100%;
4754 height: $progress-linear-bar-height;
4755
4756 transform: translate(0, 0) scale(1, 1);
4757
4758 .md-bar {
4759 position: absolute;
4760
4761 left: 0;
4762 top: 0;
4763 bottom: 0;
4764
4765 width: 100%;
4766 height: $progress-linear-bar-height;
4767 }
4768
4769 .md-dashed:before {
4770 content: "";
4771 display: none;
4772 position: absolute;
4773
4774 margin-top: 0;
4775 height: $progress-linear-bar-height;
4776 width: 100%;
4777
4778 background-color: transparent;
4779 background-size: 10px 10px !important;
4780 background-position: 0px -23px;
4781 }
4782
4783 .md-bar1, .md-bar2 {
4784
4785 // Just set the transition information here.
4786 // Note: the actual transform values are calculated in JS
4787
4788 transition: transform 0.2s linear;
4789 }
4790
4791 // ************************************************************
4792 // Animations for modes: Determinate, InDeterminate, and Query
4793 // ************************************************************
4794
4795 &.md-mode-query {
4796 .md-bar1 {
4797 display: none;
4798 }
4799 .md-bar2 {
4800 transition: all 0.2s linear;
4801 animation: query .8s infinite cubic-bezier(0.390, 0.575, 0.565, 1.000);
4802 }
4803 }
4804
4805 &.md-mode-determinate {
4806 .md-bar1 {
4807 display: none;
4808 }
4809 }
4810
4811 &.md-mode-indeterminate {
4812 .md-bar1 {
4813 animation: md-progress-linear-indeterminate-scale-1 4s infinite,
4814 md-progress-linear-indeterminate-1 4s infinite;
4815 }
4816 .md-bar2 {
4817 animation: md-progress-linear-indeterminate-scale-2 4s infinite,
4818 md-progress-linear-indeterminate-2 4s infinite;
4819 }
4820 }
4821
4822 &.ng-hide
4823 ._md-progress-linear-disabled & {
4824 animation: none;
4825
4826 .md-bar1 {
4827 animation-name: none;
4828 }
4829 .md-bar2 {
4830 animation-name: none;
4831 }
4832 }
4833 }
4834
4835 // Special animations for the `buffer` mode
4836
4837 .md-container.md-mode-buffer {
4838 background-color: transparent !important;
4839
4840 transition: all 0.2s linear;
4841
4842 .md-dashed:before {
4843 display: block;
4844 animation: buffer 3s infinite linear;
4845 }
4846 }
4847}
4848
4849@keyframes query {
4850 0% {
4851 opacity: 1;
4852 transform: translateX(35%) scale(.3, 1);
4853 }
4854 100% {
4855 opacity: 0;
4856 transform: translateX(-50%) scale(0, 1);
4857 }
4858}
4859@keyframes buffer {
4860 0% {
4861 opacity: 1;
4862 background-position: 0px -23px;
4863 }
4864 50% {
4865 opacity: 0;
4866 }
4867 100% {
4868 opacity: 1;
4869 background-position: -200px -23px;
4870 }
4871}
4872@keyframes md-progress-linear-indeterminate-scale-1 {
4873 0% {
4874 transform: scaleX(0.1);
4875 animation-timing-function: linear;
4876 }
4877 36.6% {
4878 transform: scaleX(0.1);
4879 animation-timing-function: cubic-bezier(0.334731432, 0.124819821, 0.785843996, 1);
4880 }
4881 69.15% {
4882 transform: scaleX(0.83);
4883 animation-timing-function: cubic-bezier(0.225732004, 0, 0.233648906, 1.3709798);
4884 }
4885 100% {
4886 transform: scaleX(0.1);
4887 }
4888}
4889@keyframes md-progress-linear-indeterminate-1 {
4890 0% {
4891 left: -378.6 * 100% / 360;
4892 animation-timing-function: linear;
4893 }
4894 20% {
4895 left: -378.6 * 100% / 360;
4896 animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495818703);
4897 }
4898 69.15% {
4899 left: 77.4 * 100% / 360;
4900 animation-timing-function: cubic-bezier(0.302435, 0.38135197, 0.55, 0.956352125);
4901 }
4902 100% {
4903 left: 343.6 * 100% / 360;
4904 }
4905}
4906@keyframes md-progress-linear-indeterminate-scale-2 {
4907 0% {
4908 transform: scaleX(0.1);
4909 animation-timing-function: cubic-bezier(0.205028172, 0.057050836, 0.57660995, 0.453970841);
4910 }
4911 19.15% {
4912 transform: scaleX(0.57);
4913 animation-timing-function: cubic-bezier(0.152312994, 0.196431957, 0.648373778, 1.00431535);
4914 }
4915 44.15% {
4916 transform: scaleX(0.91);
4917 animation-timing-function: cubic-bezier(0.25775882, -0.003163357, 0.211761916, 1.38178961);
4918 }
4919 100% {
4920 transform: scaleX(0.1);
4921 }
4922}
4923@keyframes md-progress-linear-indeterminate-2 {
4924 0% {
4925 left: -197.6 * 100% / 360;
4926 animation-timing-function: cubic-bezier(0.15, 0, 0.5150584, 0.409684966);
4927 }
4928 25% {
4929 left: -62.1 * 100% / 360;
4930 animation-timing-function: cubic-bezier(0.3103299, 0.284057684, 0.8, 0.733718979);
4931 }
4932 48.35% {
4933 left: 106.2 * 100% / 360;
4934 animation-timing-function: cubic-bezier(0.4, 0.627034903, 0.6, 0.902025796);
4935 }
4936 100% {
4937 left: 422.6 * 100% / 360;
4938 }
4939}
4940
4941
4942
4943$radio-width: 20px !default;
4944$radio-height: $radio-width !default;
4945$radio-text-margin: 10px !default;
4946$radio-top-left: 12px !default;
4947$radio-margin: 16px !default;
4948
4949@mixin md-radio-button-disabled {
4950 cursor: default;
4951
4952 .md-container {
4953 cursor: default;
4954 }
4955}
4956
4957md-radio-button {
4958 box-sizing: border-box;
4959 display: block;
4960 margin-bottom: $radio-margin;
4961 white-space: nowrap;
4962 cursor: pointer;
4963 position: relative;
4964
4965 // When the radio-button is disabled.
4966 &[disabled] {
4967 @include md-radio-button-disabled();
4968 }
4969
4970 .md-container {
4971 position: absolute;
4972 top: 50%;
4973 transform: translateY(-50%);
4974 box-sizing: border-box;
4975 display: inline-block;
4976 width: $radio-width;
4977 height: $radio-width;
4978 cursor: pointer;
4979 @include rtl(left, 0, auto);
4980 @include rtl(right, auto, 0);
4981
4982 .md-ripple-container {
4983 position: absolute;
4984 display: block;
4985 width: auto;
4986 height: auto;
4987 left: -15px;
4988 top: -15px;
4989 right: -15px;
4990 bottom: -15px;
4991 }
4992
4993 &:before {
4994 box-sizing: border-box;
4995 background-color: transparent;
4996 border-radius: 50%;
4997 content: '';
4998 position: absolute;
4999 display: block;
5000 height: auto;
5001 left: 0;
5002 top: 0;
5003 right: 0;
5004 bottom: 0;
5005 transition: all 0.5s;
5006 width: auto;
5007 }
5008 }
5009
5010 &.md-align-top-left > div.md-container {
5011 top: $radio-top-left;
5012 }
5013
5014 .md-off {
5015 box-sizing: border-box;
5016 position: absolute;
5017 top: 0;
5018 left: 0;
5019 width: $radio-width;
5020 height: $radio-width;
5021 border-style: solid;
5022 border-width: 2px;
5023 border-radius: 50%;
5024 transition: border-color ease 0.28s;
5025 }
5026
5027 .md-on {
5028 box-sizing: border-box;
5029 position: absolute;
5030 top: 0;
5031 left: 0;
5032 width: $radio-width;
5033 height: $radio-width;
5034 border-radius: 50%;
5035 transition: transform ease 0.28s;
5036 transform: scale(0);
5037 }
5038
5039 &.md-checked .md-on {
5040 transform: scale(0.50);
5041 }
5042
5043 .md-label {
5044 box-sizing: border-box;
5045 position: relative;
5046 display: inline-block;
5047
5048 @include rtl(margin-left, $radio-text-margin + $radio-width, 0);
5049 @include rtl(margin-right, 0, $radio-text-margin + $radio-width);
5050
5051 vertical-align: middle;
5052 white-space: normal;
5053 pointer-events: none;
5054 width: auto;
5055 }
5056}
5057
5058md-radio-group {
5059 /** Layout adjustments for the radio group. */
5060 &.layout-column,
5061 &.layout-xs-column, &.layout-gt-xs-column,
5062 &.layout-sm-column, &.layout-gt-sm-column,
5063 &.layout-md-column, &.layout-gt-md-column,
5064 &.layout-lg-column, &.layout-gt-lg-column,
5065 &.layout-xl-column {
5066 md-radio-button {
5067 margin-bottom: $radio-margin;
5068 }
5069 }
5070
5071 &.layout-row,
5072 &.layout-xs-row, &.layout-gt-xs-row,
5073 &.layout-sm-row, &.layout-gt-sm-row,
5074 &.layout-md-row, &.layout-gt-md-row,
5075 &.layout-lg-row, &.layout-gt-lg-row,
5076 &.layout-xl-row {
5077 md-radio-button {
5078 margin-top: 0;
5079 margin-bottom: 0;
5080 @include rtl(margin-left, 0, $radio-margin);
5081 @include rtl(margin-right, $radio-margin, 0);
5082
5083 &:last-of-type {
5084 margin-left: 0;
5085 margin-right: 0;
5086 }
5087 }
5088 }
5089
5090 &:focus {
5091 outline: none;
5092 }
5093
5094 &.md-focused {
5095 .md-checked .md-container:before {
5096 left: -8px;
5097 top: -8px;
5098 right: -8px;
5099 bottom: -8px;
5100 }
5101 }
5102
5103 &[disabled] md-radio-button {
5104 @include md-radio-button-disabled();
5105 }
5106}
5107
5108.md-inline-form {
5109 md-radio-group {
5110 margin: 18px 0 19px;
5111 md-radio-button {
5112 display: inline-block;
5113 height: 30px;
5114 padding: 2px;
5115 box-sizing: border-box;
5116 margin-top: 0;
5117 margin-bottom: 0;
5118 }
5119 }
5120}
5121
5122@media screen and (-ms-high-contrast: active) {
5123 md-radio-button.md-default-theme .md-on {
5124 background-color: #fff;
5125 }
5126}
5127
5128$select-checkbox-border-radius: 2px !default;
5129$select-checkbox-border-width: 2px !default;
5130$select-checkbox-width: rem(1.4) !default;
5131$select-option-height: 48px !default;
5132$select-option-padding: 16px !default;
5133$select-container-padding: 16px !default;
5134$select-container-transition-duration: 350ms !default;
5135
5136$select-max-visible-options: 5 !default;
5137
5138// Fixes the animations with the floating label when select is inside an input container
5139md-input-container {
5140 &:not([md-no-float]) {
5141 .md-select-placeholder span:first-child {
5142 transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
5143 @include rtl(transform-origin, left top, right top);
5144 }
5145 }
5146 &.md-input-focused {
5147 &:not([md-no-float]) {
5148 .md-select-placeholder span:first-child {
5149 transform: translateY(-22px) translateX(-2px) scale(0.75);
5150 }
5151 }
5152 }
5153}
5154
5155.md-select-menu-container {
5156 position: fixed;
5157 left: 0;
5158 top: 0;
5159 z-index: $z-index-select;
5160 opacity: 0;
5161 display: none;
5162
5163 // Fix 1px alignment issue to line up with text inputs (and spec)
5164 transform: translateY(-1px);
5165
5166 // Don't let the user select a new choice while it's animating
5167 &:not(.md-clickable) {
5168 pointer-events: none;
5169 }
5170
5171 md-progress-circular {
5172 display: table;
5173 margin: 3*$baseline-grid auto !important;
5174 }
5175
5176
5177 // enter: md-select scales in, then options fade in.
5178 &.md-active {
5179 display: block;
5180 opacity: 1;
5181 md-select-menu {
5182 transition: $swift-ease-out;
5183 transition-duration: 150ms;
5184 > * {
5185 opacity: 1;
5186 transition: $swift-ease-in;
5187 transition-duration: 150ms;
5188 transition-delay: 100ms;
5189 }
5190 }
5191 }
5192
5193 // leave: the container fades out
5194 &.md-leave {
5195 opacity: 0;
5196 transition: $swift-ease-in;
5197 transition-duration: 250ms;
5198 }
5199}
5200
5201md-input-container > md-select {
5202 margin: 0;
5203 order: 2;
5204}
5205
5206
5207// Show the asterisk on the placeholder if the element is required
5208//
5209// NOTE: When the input has a value and uses a floating label, the floating label will show the
5210// asterisk denoting that it is required
5211md-input-container:not(.md-input-has-value) {
5212 md-select[required]:not(.md-no-asterisk), md-select.ng-required:not(.md-no-asterisk) {
5213 .md-select-value span:first-child:after {
5214 content: ' *';
5215 font-size: 13px;
5216 vertical-align: top;
5217 }
5218 }
5219}
5220
5221md-input-container.md-input-invalid {
5222 md-select {
5223 .md-select-value {
5224 border-bottom-style: solid;
5225 padding-bottom: 1px;
5226 }
5227 }
5228}
5229
5230md-select {
5231 display: flex;
5232 margin: 2.5*$baseline-grid 0 3*$baseline-grid + 2 0;
5233
5234 &[required], &.ng-required {
5235 &.ng-invalid:not(.md-no-asterisk) {
5236 .md-select-value span:first-child:after {
5237 content: ' *';
5238 font-size: 13px;
5239 vertical-align: top;
5240 }
5241 }
5242 }
5243
5244 &[disabled] .md-select-value {
5245 background-position: 0 bottom;
5246 // This background-size is coordinated with a linear-gradient set in select-theme.scss
5247 // to create a dotted line under the input.
5248 background-size: 4px 1px;
5249 background-repeat: repeat-x;
5250 margin-bottom: -1px; // Shift downward so dotted line is positioned the same as other bottom borders
5251 }
5252
5253 &:focus {
5254 outline: none;
5255 }
5256 &[disabled]:hover {
5257 cursor: default;
5258 }
5259 &:not([disabled]) {
5260 &:hover {
5261 cursor: pointer
5262 }
5263 &.ng-invalid.ng-touched {
5264 .md-select-value {
5265 border-bottom-style: solid;
5266 padding-bottom: 1px;
5267 }
5268 }
5269 &:focus {
5270 .md-select-value {
5271 border-bottom-width: 2px;
5272 border-bottom-style: solid;
5273 padding-bottom: 0;
5274 }
5275 &.ng-invalid.ng-touched {
5276 .md-select-value {
5277 padding-bottom: 0;
5278 }
5279 }
5280 }
5281 }
5282}
5283
5284// Fix value by 1px to align with standard text inputs (and spec)
5285md-input-container.md-input-has-value .md-select-value {
5286 > span:not(.md-select-icon) {
5287 transform: translate3d(0, 1px, 0);
5288 }
5289}
5290
5291.md-select-value {
5292 display: flex;
5293 align-items: center;
5294 padding: 2px 2px 1px;
5295 border-bottom-width: 1px;
5296 border-bottom-style: solid;
5297 background-color: rgba(0,0,0,0);
5298 position: relative;
5299 box-sizing: content-box;
5300 min-width: 8 * $baseline-grid;
5301 min-height: 26px;
5302 flex-grow: 1;
5303
5304
5305 > span:not(.md-select-icon) {
5306 max-width: 100%;
5307 flex: 1 1 auto;
5308 text-overflow: ellipsis;
5309 white-space: nowrap;
5310 overflow: hidden;
5311
5312 .md-text {
5313 display: inline;
5314 }
5315 }
5316
5317 .md-select-icon {
5318 display: block;
5319 align-items: flex-end;
5320 text-align: end;
5321 width: 3 * $baseline-grid;
5322 margin: 0 .5 * $baseline-grid;
5323 transform: translate3d(0, -2px, 0);
5324 font-size: 1.2rem;
5325 }
5326
5327 .md-select-icon:after {
5328 display: block;
5329 content: '\25BC';
5330 position: relative;
5331 top: 2px;
5332 speak: none;
5333 font-size: 13px;
5334 transform: scaleY(0.5) scaleX(1);
5335 }
5336
5337 &.md-select-placeholder {
5338 display: flex;
5339 order: 1;
5340 pointer-events: none;
5341 -webkit-font-smoothing: antialiased;
5342 padding-left: 2px;
5343 z-index: 1;
5344 }
5345}
5346
5347md-select-menu {
5348 display: flex;
5349 flex-direction: column;
5350 &.md-reverse {
5351 flex-direction: column-reverse;
5352 }
5353
5354 &:not(.md-overflow) {
5355 md-content {
5356 padding-top: $baseline-grid;
5357 padding-bottom: $baseline-grid;
5358 }
5359 }
5360
5361 box-shadow: $whiteframe-shadow-1dp;
5362 max-height: ($select-option-height * $select-max-visible-options) + 2 * $baseline-grid;
5363 min-height: $select-option-height;
5364 overflow-y: hidden;
5365
5366 @include rtl(transform-origin, left top, right top);
5367
5368 transform: scale(1.0);
5369
5370 md-content {
5371 min-width: 136px;
5372 min-height: $select-option-height;
5373 max-height: ($select-option-height * $select-max-visible-options) + 2 * $baseline-grid;
5374 overflow-y: auto;
5375 }
5376 > * {
5377 opacity: 0;
5378 }
5379}
5380
5381md-option {
5382 cursor: pointer;
5383 position: relative;
5384 display: flex;
5385 align-items: center;
5386 width: auto;
5387 transition: background 0.15s linear;
5388
5389 &[disabled] {
5390 cursor: default;
5391 }
5392
5393 &:focus {
5394 outline: none;
5395 }
5396
5397 .md-text {
5398 @include not-selectable();
5399 width: auto;
5400 white-space: nowrap;
5401 overflow: hidden;
5402 text-overflow: ellipsis;
5403 }
5404 padding: 0 $select-option-padding 0 $select-option-padding;
5405 height: $select-option-height;
5406}
5407
5408md-optgroup {
5409 display: block;
5410 label {
5411 display: block;
5412 font-size: rem(1.4);
5413 text-transform: uppercase;
5414 padding: $baseline-grid * 2;
5415 font-weight: 500;
5416 }
5417 md-option {
5418 padding-left: $select-option-padding * 2;
5419 padding-right: $select-option-padding * 2;
5420 }
5421}
5422
5423@media screen and (-ms-high-contrast: active) {
5424 .md-select-backdrop {
5425 background-color: transparent;
5426 }
5427 md-select-menu {
5428 border: 1px solid #fff;
5429 }
5430}
5431
5432md-select-menu[multiple] {
5433 md-option.md-checkbox-enabled {
5434 @include rtl(padding-left, $select-option-padding * 2.5, $select-option-padding);
5435 @include rtl(padding-right, $select-option-padding, $select-option-padding * 2.5);
5436
5437 @include checkbox-container('[selected]');
5438
5439 .md-container {
5440 @include rtl(margin-left, $select-option-padding * (2 / 3), auto);
5441 @include rtl(margin-right, auto, $select-option-padding * (2 / 3));
5442 }
5443 }
5444}
5445
5446$sidenav-mobile-width: 320px !default;
5447$sidenav-desktop-width: 400px !default;
5448$sidenav-min-space: 56px !default;
5449
5450md-sidenav {
5451 box-sizing: border-box;
5452 position: absolute;
5453 flex-direction: column;
5454 z-index: $z-index-sidenav;
5455
5456 width: $sidenav-mobile-width;
5457 max-width: $sidenav-mobile-width;
5458 bottom: 0;
5459 overflow: auto;
5460 -webkit-overflow-scrolling: touch;
5461
5462 ul {
5463 list-style: none;
5464 }
5465
5466 // Animation Comment Syntax: [mdLockedOpen]|[mdClosed]
5467 // mdLockedOpen states: unlocked, locked, any
5468 // mdClosed states: open, closed, any
5469 // Default state: unlocked|open
5470
5471 // unlocked|closed
5472 &.md-closed {
5473 display: none;
5474 }
5475
5476 // any|open <=> any|closed
5477 &.md-closed-add,
5478 &.md-closed-remove {
5479 display: flex;
5480 transition: 0.2s ease-in all;
5481 }
5482
5483 // any|open <=> any|closed (animating)
5484 &.md-closed-add.md-closed-add-active,
5485 &.md-closed-remove.md-closed-remove-active {
5486 transition: $swift-ease-out;
5487 }
5488
5489 // unlocked|any <=> locked|any
5490 &.md-locked-open-add,
5491 &.md-locked-open-remove {
5492 position: static;
5493 display: flex;
5494 transform: translate3d(0, 0, 0);
5495 }
5496
5497 // locked|any
5498 &.md-locked-open,
5499 &.md-locked-open.md-closed,
5500 &.md-locked-open.md-closed.md-sidenav-left,
5501 &.md-locked-open.md-closed.md-sidenav-right {
5502 position: static;
5503 display: flex;
5504 transform: translate3d(0, 0, 0);
5505 }
5506
5507 // locked|closed => unlock|closed
5508 &.md-locked-open-remove.md-closed {
5509 position: static;
5510 display: flex;
5511 transform: translate3d(0, 0, 0);
5512 }
5513
5514 // unlocked|closed => locked|closed
5515 &.md-closed.md-locked-open-add {
5516 position: static;
5517 display: flex;
5518 transform: translate3d(0%, 0, 0);
5519 }
5520
5521 // unlocked|closed => locked|closed (pre-animation)
5522 &.md-closed.md-locked-open-add:not(.md-locked-open-add-active) {
5523 transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
5524 min-width $swift-ease-in-duration $swift-ease-in-timing-function;
5525 width: 0 !important;
5526 min-width: 0 !important;
5527 }
5528
5529 // unlocked|closed => locked|closed (animating)
5530 &.md-closed.md-locked-open-add-active {
5531 transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
5532 min-width $swift-ease-in-duration $swift-ease-in-timing-function;
5533 }
5534
5535 // locked|any => unlocked|any (animating)
5536 &.md-locked-open-remove-active {
5537 transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
5538 min-width $swift-ease-in-duration $swift-ease-in-timing-function;
5539 width: 0 !important;
5540 min-width: 0 !important;
5541 }
5542
5543 @extend .md-sidenav-left;
5544}
5545.md-sidenav-backdrop.md-locked-open {
5546 display: none;
5547}
5548
5549.md-sidenav-left {
5550 left: 0;
5551 top: 0;
5552 transform: translate3d(0%, 0, 0);
5553 &.md-closed {
5554 transform: translate3d(-100%, 0, 0);
5555 }
5556}
5557
5558.md-sidenav-right {
5559 left: 100%;
5560 top: 0;
5561 transform: translate(-100%, 0);
5562 &.md-closed {
5563 transform: translate(0%, 0);
5564 }
5565}
5566
5567@media (min-width: $layout-breakpoint-xs) {
5568 md-sidenav {
5569 max-width: $sidenav-desktop-width;
5570 }
5571}
5572
5573@media (max-width: $sidenav-desktop-width + $sidenav-min-space) {
5574 md-sidenav {
5575 width: calc(100% - #{$sidenav-min-space});
5576 min-width: calc(100% - #{$sidenav-min-space});
5577 max-width: calc(100% - #{$sidenav-min-space});
5578 }
5579}
5580
5581// IE Only
5582@media screen and (-ms-high-contrast: active) {
5583 .md-sidenav-left {
5584 border-right: 1px solid #fff;
5585 }
5586 .md-sidenav-right {
5587 border-left: 1px solid #fff;
5588 }
5589}
5590
5591$slider-background-color: rgb(200, 200, 200) !default;
5592$slider-size: 48px !default;
5593$slider-min-size: 128px !default;
5594
5595$slider-track-height: 2px !default;
5596$slider-thumb-width: 20px !default;
5597$slider-thumb-height: $slider-thumb-width !default;
5598
5599$slider-thumb-default-scale: 0.7 !default;
5600$slider-thumb-hover-scale: 0.8 !default;
5601$slider-thumb-focus-scale: 1 !default;
5602$slider-thumb-disabled-scale: 0.5 !default;
5603$slider-thumb-disabled-border: 4px !default;
5604$slider-thumb-focus-duration: .7s !default;
5605
5606$slider-focus-thumb-width: 34px !default;
5607$slider-focus-thumb-height: $slider-focus-thumb-width !default;
5608$slider-focus-ring-border-width: 3px !default;
5609
5610$slider-arrow-height: 16px !default;
5611$slider-arrow-width: 28px !default;
5612
5613$slider-sign-height: 28px !default;
5614$slider-sign-width: 28px !default;
5615$slider-sign-top: ($slider-size / 2) - ($slider-thumb-default-scale * $slider-thumb-height / 2) - ($slider-sign-height) - ($slider-arrow-height) + 10px !default;
5616
5617@keyframes sliderFocusThumb {
5618 0% {
5619 transform: scale($slider-thumb-default-scale);
5620 }
5621 30% {
5622 transform: scale($slider-thumb-focus-scale);
5623 }
5624 100% {
5625 transform: scale($slider-thumb-default-scale);
5626 }
5627}
5628
5629@keyframes sliderDiscreteFocusThumb {
5630 0% {
5631 transform: scale($slider-thumb-default-scale);
5632 }
5633 50% {
5634 transform: scale($slider-thumb-hover-scale);
5635 }
5636 100% {
5637 transform: scale(0);
5638 }
5639}
5640
5641@keyframes sliderDiscreteFocusRing {
5642 0% {
5643 transform: scale(0.7);
5644 opacity: 0;
5645 }
5646 50% {
5647 transform: scale(1);
5648 opacity: 1;
5649 }
5650 100% {
5651 transform: scale(0);
5652 }
5653}
5654
5655@mixin slider-thumb-position($width: $slider-thumb-width, $height: $slider-thumb-height) {
5656 position: absolute;
5657 @include rtl-prop(left, right, (-$width / 2), auto);
5658 top: ($slider-size / 2) - ($height / 2);
5659 width: $width;
5660 height: $height;
5661 border-radius: max($width, $height);
5662}
5663
5664md-slider {
5665 height: $slider-size;
5666 min-width: $slider-min-size;
5667 position: relative;
5668 margin-left: 4px;
5669 margin-right: 4px;
5670 padding: 0;
5671 display: block;
5672 flex-direction: row;
5673
5674 *, *:after {
5675 box-sizing: border-box;
5676 }
5677
5678 .md-slider-wrapper {
5679 outline: none;
5680 width: 100%;
5681 height: 100%;
5682 }
5683
5684 .md-slider-content {
5685 position: relative;
5686 }
5687
5688 /**
5689 * Track
5690 */
5691 .md-track-container {
5692 width: 100%;
5693 position: absolute;
5694 top: ($slider-size / 2) - ($slider-track-height) / 2;
5695 height: $slider-track-height;
5696 }
5697 .md-track {
5698 position: absolute;
5699 left: 0;
5700 right: 0;
5701 height: 100%;
5702 }
5703 .md-track-fill {
5704 transition: all .4s cubic-bezier(.25,.8,.25,1);
5705 transition-property: width, height;
5706 }
5707 .md-track-ticks {
5708 position: absolute;
5709 left: 0;
5710 right: 0;
5711 height: 100%;
5712 }
5713 .md-track-ticks canvas {
5714 // Restrict the width and the height of the canvas so that ticks are rendered correctly
5715 // when parent elements are resized. Else, the position of the ticks might
5716 // be incorrect as we only update the canvas width attribute on window resize.
5717 width: 100%;
5718 height: 100%;
5719 }
5720
5721 /**
5722 * Slider thumb
5723 */
5724 .md-thumb-container {
5725 position: absolute;
5726 @include rtl-prop(left, right, 0, auto);
5727 top: 50%;
5728 transform: translate3d(-50%,-50%,0);
5729 transition: all .4s cubic-bezier(.25,.8,.25,1);
5730 transition-property: left, right, bottom;
5731 }
5732 .md-thumb {
5733 z-index: 1;
5734
5735 @include slider-thumb-position($slider-thumb-width, $slider-thumb-height);
5736
5737 // We render thumb in an :after selector to fix an obscure problem with the
5738 // thumb being clipped by the focus-ring and focus-thumb while running the focus
5739 // animation.
5740 &:after {
5741 content: '';
5742 position: absolute;
5743 width: $slider-thumb-width;
5744 height: $slider-thumb-height;
5745 border-radius: max($slider-thumb-width, $slider-thumb-height);
5746 border-width: 3px;
5747 border-style: solid;
5748 transition: inherit;
5749 }
5750
5751 transform: scale($slider-thumb-default-scale);
5752 transition: all .4s cubic-bezier(.25,.8,.25,1);
5753 }
5754
5755 /* The sign that's focused in discrete mode */
5756 .md-sign {
5757
5758 /* Center the children (slider-thumb-text) */
5759 display: flex;
5760 align-items: center;
5761 justify-content: center;
5762
5763 position: absolute;
5764 left: -($slider-sign-height / 2);
5765 top: $slider-sign-top;
5766 width: $slider-sign-width;
5767 height: $slider-sign-height;
5768 border-radius: max($slider-sign-height, $slider-sign-width);
5769
5770 transform: scale(0.4) translate3d(0,(-$slider-sign-top + 10) / 0.4,0);
5771 transition: all 0.3s $swift-ease-in-out-timing-function;
5772
5773 /* The arrow pointing down under the sign */
5774 &:after {
5775 position: absolute;
5776 content: '';
5777 @include rtl-prop(left, right, -($slider-sign-width / 2 - $slider-arrow-width / 2), auto);
5778 border-radius: $slider-arrow-height;
5779 top: 19px;
5780 border-left: $slider-arrow-width / 2 solid transparent;
5781 border-right: $slider-arrow-width / 2 solid transparent;
5782 border-top-width: $slider-arrow-height;
5783 border-top-style: solid;
5784
5785 opacity: 0;
5786 transform: translate3d(0,-8px,0);
5787 transition: all 0.2s $swift-ease-in-out-timing-function;
5788 }
5789
5790 .md-thumb-text {
5791 z-index: 1;
5792 font-size: 12px;
5793 font-weight: bold;
5794 }
5795 }
5796
5797 /**
5798 * The border/background that comes in when focused in non-discrete mode
5799 */
5800 .md-focus-ring {
5801 @include slider-thumb-position($slider-focus-thumb-width, $slider-focus-thumb-height);
5802 transform: scale(.7);
5803 opacity: 0;
5804 // using a custom duration to match the spec example video
5805 transition: all ($slider-thumb-focus-duration / 2) $swift-ease-in-out-timing-function;
5806 }
5807 .md-disabled-thumb {
5808 @include slider-thumb-position(
5809 $slider-thumb-width + $slider-thumb-disabled-border * 2,
5810 $slider-thumb-height + $slider-thumb-disabled-border * 2
5811 );
5812 transform: scale($slider-thumb-disabled-scale);
5813 border-width: $slider-thumb-disabled-border;
5814 border-style: solid;
5815 display: none;
5816 }
5817
5818 &.md-min {
5819 .md-sign {
5820 opacity: 0;
5821 }
5822 }
5823
5824 &:focus {
5825 outline: none;
5826 }
5827
5828 /* Don't animate left/right while panning */
5829 &.md-dragging {
5830 .md-thumb-container,
5831 .md-track-fill {
5832 transition: none;
5833 }
5834 }
5835
5836 &:not([md-discrete]) {
5837 /* Hide the sign and ticks in non-discrete mode */
5838 .md-track-ticks,
5839 .md-sign {
5840 display: none;
5841 }
5842
5843 &:not([disabled]) {
5844 .md-slider-wrapper {
5845 .md-thumb:hover {
5846 transform: scale($slider-thumb-hover-scale);
5847 }
5848
5849 &.md-focused {
5850 .md-focus-ring {
5851 transform: scale(1);
5852 opacity: 1;
5853 }
5854 .md-thumb {
5855 animation: sliderFocusThumb $slider-thumb-focus-duration $swift-ease-in-out-timing-function;
5856 }
5857 }
5858 }
5859
5860 &.md-active {
5861 .md-slider-wrapper {
5862 .md-thumb {
5863 transform: scale($slider-thumb-focus-scale);
5864 }
5865 }
5866 }
5867 }
5868 }
5869
5870 &[md-discrete] {
5871 &:not([disabled]) {
5872 .md-slider-wrapper {
5873 &.md-focused {
5874 .md-focus-ring {
5875 transform: scale(0);
5876 animation: sliderDiscreteFocusRing .5s $swift-ease-in-out-timing-function;
5877 }
5878 .md-thumb {
5879 animation: sliderDiscreteFocusThumb .5s $swift-ease-in-out-timing-function;
5880 }
5881 }
5882 }
5883 .md-slider-wrapper.md-focused,
5884 &.md-active {
5885 .md-thumb {
5886 transform: scale(0);
5887 }
5888 .md-sign,
5889 .md-sign:after {
5890 opacity: 1;
5891 transform: translate3d(0,0,0) scale(1.0);
5892 }
5893 }
5894 }
5895
5896 &[disabled][readonly] {
5897 .md-thumb {
5898 transform: scale(0);
5899 }
5900 .md-sign,
5901 .md-sign:after {
5902 opacity: 1;
5903 transform: translate3d(0,0,0) scale(1.0);
5904 }
5905 }
5906 }
5907
5908 &[disabled] {
5909 .md-track-fill {
5910 display: none;
5911 }
5912 .md-track-ticks {
5913 opacity: 0;
5914 }
5915 &:not([readonly]) .md-sign {
5916 opacity: 0;
5917 }
5918 .md-thumb {
5919 transform: scale($slider-thumb-disabled-scale);
5920 }
5921 .md-disabled-thumb {
5922 display: block;
5923 }
5924 }
5925
5926 &[md-vertical] {
5927 flex-direction: column;
5928 min-height: $slider-min-size;
5929 min-width: 0;
5930
5931 .md-slider-wrapper {
5932 flex: 1;
5933 padding-top: 12px;
5934 padding-bottom: 12px;
5935 width: $slider-size;
5936 align-self: center;
5937 display: flex;
5938 justify-content: center;
5939 }
5940
5941 .md-track-container {
5942 height: 100%;
5943 width: $slider-track-height;
5944 top: 0;
5945 left: calc(50% - (#{$slider-track-height} / 2));
5946 }
5947
5948 .md-thumb-container {
5949 top: auto;
5950 margin-bottom: ($slider-size / 2) - ($slider-track-height) / 2;
5951 left: calc(50% - 1px);
5952 bottom: 0;
5953
5954 .md-thumb:after {
5955 left: 1px;
5956 }
5957
5958 .md-focus-ring {
5959 left: -(($slider-focus-thumb-width / 2) - ($slider-track-height / 2));
5960 }
5961 }
5962
5963 .md-track-fill {
5964 bottom: 0;
5965 }
5966
5967 &[md-discrete] {
5968 .md-sign {
5969 $sign-top: -($slider-sign-top / 2) + 1;
5970
5971 left: -$slider-sign-height - 12;
5972 top: $sign-top;
5973
5974 transform: scale(0.4) translate3d((-$slider-sign-top + 10) / 0.4, 0 ,0);
5975
5976 /* The arrow pointing left next the sign */
5977 &:after {
5978 top: $sign-top;
5979 left: 19px;
5980 border-top: $slider-arrow-width / 2 solid transparent;
5981 border-right: 0;
5982 border-bottom: $slider-arrow-width / 2 solid transparent;
5983 border-left-width: $slider-arrow-height;
5984 border-left-style: solid;
5985
5986 opacity: 0;
5987 transform: translate3d(0,-8px,0);
5988 transition: all 0.2s ease-in-out;
5989 }
5990
5991 .md-thumb-text {
5992 z-index: 1;
5993 font-size: 12px;
5994 font-weight: bold;
5995 }
5996 }
5997
5998 &.md-active,
5999 .md-focused,
6000 &[disabled][readonly]{
6001 .md-sign:after {
6002 top: 0;
6003 }
6004 }
6005 }
6006
6007 &[disabled][readonly] {
6008 .md-thumb {
6009 transform: scale(0);
6010 }
6011 .md-sign,
6012 .md-sign:after {
6013 opacity: 1;
6014 transform: translate3d(0,0,0) scale(1.0);
6015 }
6016 }
6017 }
6018 &[md-invert] {
6019 &:not([md-vertical]) .md-track-fill {
6020 @include rtl(left, auto, 0);
6021 @include rtl(right, 0, auto);
6022 }
6023 &[md-vertical] {
6024 .md-track-fill {
6025 bottom: auto;
6026 top: 0;
6027 }
6028 }
6029 }
6030}
6031
6032md-slider-container {
6033 display: flex;
6034 align-items: center;
6035 flex-direction: row;
6036
6037 $items-width: 25px;
6038 $items-height: $items-width;
6039 $items-margin: 16px;
6040
6041 & > *:first-child,
6042 & > *:last-child {
6043 &:not(md-slider){
6044 min-width: $items-width;
6045 max-width: ($items-width * 2) - 8;
6046 height: $items-height;
6047 transition: $swift-ease-out;
6048 transition-property: color, max-width;
6049 }
6050 }
6051
6052 & > *:first-child:not(md-slider) {
6053 @include rtl-prop(margin-right, margin-left, $items-margin, auto);
6054 }
6055
6056 & > *:last-child:not(md-slider) {
6057 @include rtl-prop(margin-left, margin-right, $items-margin, auto);
6058 }
6059
6060 &[md-vertical] {
6061 flex-direction: column;
6062
6063 & > *:first-child:not(md-slider),
6064 & > *:last-child:not(md-slider) {
6065 margin-right: 0;
6066 margin-left: 0;
6067 text-align: center;
6068 }
6069 }
6070
6071 md-input-container {
6072 input[type="number"] {
6073 text-align: center;
6074 @include rtl-prop(padding-left, padding-right, 15px, 0); // size of arrows
6075 height: $items-height * 2;
6076 margin-top: -$items-height;
6077 }
6078 }
6079}
6080
6081@media screen and (-ms-high-contrast: active) {
6082 md-slider.md-default-theme .md-track {
6083 border-bottom: 1px solid #fff;
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// See height set globally, depended on by buttons
6344
6345$md-toast-content-padding: 3 * $baseline-grid - $button-left-right-padding !default;
6346$md-toast-button-left-margin: 3 * $baseline-grid - 2 * $button-left-right-padding !default;
6347$md-toast-text-padding: $button-left-right-padding !default;
6348
6349
6350.md-toast-text {
6351 padding: 0 $md-toast-text-padding;
6352}
6353
6354md-toast {
6355 position: absolute;
6356 z-index: $z-index-toast;
6357
6358 box-sizing: border-box;
6359 cursor: default;
6360 overflow: hidden;
6361
6362 // Add some padding to the outer toast container so that the wrapper's box shadow is visible
6363 padding: $toast-margin;
6364
6365 // Setup opacity transition on whole toast
6366 opacity: 1;
6367 transition: $swift-ease-out;
6368
6369 .md-toast-content {
6370 display: flex;
6371 direction: row;
6372 align-items: center;
6373
6374 max-height: 7 * $toast-height;
6375 max-width: 100%;
6376
6377 min-height: 48px;
6378 // Since we're vertically centering our text by using flexbox and having a min-height, we need to apply
6379 // a fix for an IE11 flexbug, otherwise the text won't be centered vertically.
6380 @include ie11-min-height-flexbug(48px);
6381
6382 padding: 0 $md-toast-content-padding;
6383
6384 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
6385 border-radius: 2px;
6386 font-size: 14px;
6387
6388 overflow: hidden;
6389
6390 // Setup for transform transitions on inner content
6391 transform: translate3d(0, 0, 0) rotateZ(0deg);
6392 transition: $swift-ease-out;
6393
6394 @include rtl(justify-content, flex-start, flex-end);
6395
6396 span {
6397 // Layout [flex]
6398 flex:1 1 0%;
6399 box-sizing:border-box;
6400 min-width :0;
6401 }
6402 }
6403
6404 &.md-capsule {
6405 border-radius: 24px;
6406
6407 .md-toast-content {
6408 border-radius: 24px;
6409 }
6410 }
6411
6412 &.ng-leave-active {
6413 .md-toast-content {
6414 transition: $swift-ease-in;
6415 }
6416 }
6417
6418 /* Transition differently when swiping */
6419 &.md-swipeleft,
6420 &.md-swiperight,
6421 &.md-swipeup,
6422 &.md-swipedown {
6423 .md-toast-content {
6424 transition: $swift-ease-out;
6425 }
6426 }
6427
6428 &.ng-enter {
6429 opacity: 0;
6430 .md-toast-content {
6431 transform: translate3d(0, 100%, 0);
6432 }
6433 &.md-top {
6434 .md-toast-content {
6435 transform: translate3d(0, -100%, 0);
6436 }
6437 }
6438 &.ng-enter-active {
6439 opacity: 1;
6440 .md-toast-content {
6441 transform: translate3d(0, 0, 0);
6442 }
6443 }
6444 }
6445 /*
6446 * When the toast doesn't take up the whole screen,
6447 * make it rotate when the user swipes it away
6448 */
6449 &.ng-leave.ng-leave-active {
6450 .md-toast-content {
6451 opacity: 0;
6452 transform: translate3d(0, 100%, 0);
6453 }
6454
6455 &.md-swipeup {
6456 .md-toast-content {
6457 transform: translate3d(0, -50%, 0);
6458 }
6459 }
6460 &.md-swipedown {
6461 .md-toast-content {
6462 transform: translate3d(0, 50%, 0);
6463 }
6464 }
6465 &.md-top {
6466 .md-toast-content {
6467 transform: translate3d(0, -100%, 0);
6468 }
6469 }
6470 }
6471
6472 .md-action {
6473 line-height: 19px;
6474 margin-left: 24px;
6475 margin-right: 0;
6476 cursor: pointer;
6477 text-transform: uppercase;
6478 float: right;
6479 }
6480
6481 .md-button {
6482 min-width: 0;
6483 @include rtl(margin-right, 0, $md-toast-button-left-margin);
6484 @include rtl(margin-left, $md-toast-button-left-margin, 0);
6485 }
6486}
6487
6488@media (max-width: $layout-breakpoint-sm - 1) {
6489 md-toast {
6490 left: 0;
6491 right: 0;
6492 width: 100%;
6493 max-width: 100%;
6494 min-width: 0;
6495 border-radius: 0;
6496 bottom: 0;
6497 padding: 0;
6498
6499 &.ng-leave.ng-leave-active {
6500 &.md-swipeup {
6501 .md-toast-content {
6502 transform: translate3d(0, -50%, 0);
6503 }
6504 }
6505 &.md-swipedown {
6506 .md-toast-content {
6507 transform: translate3d(0, 50%, 0);
6508 }
6509 }
6510 }
6511 }
6512}
6513
6514@media (min-width: $layout-breakpoint-sm) {
6515 md-toast {
6516 min-width: 288px + $toast-margin * 2;
6517 &.md-bottom {
6518 bottom: 0;
6519 }
6520 &.md-left {
6521 left: 0;
6522 }
6523 &.md-right {
6524 right: 0;
6525 }
6526 &.md-top {
6527 top: 0;
6528 }
6529
6530 // Support for RTL alignment
6531 &._md-start {
6532 @include rtl-prop(left, right, 0, auto);
6533 }
6534
6535 &._md-end {
6536 @include rtl-prop(right, left, 0, auto);
6537 }
6538
6539 /*
6540 * When the toast doesn't take up the whole screen,
6541 * make it rotate when the user swipes it away
6542 */
6543 &.ng-leave.ng-leave-active {
6544 &.md-swipeleft {
6545 .md-toast-content {
6546 transform: translate3d(-50%, 0, 0);
6547 }
6548 }
6549 &.md-swiperight {
6550 .md-toast-content {
6551 transform: translate3d(50%, 0, 0);
6552 }
6553 }
6554 }
6555 }
6556}
6557
6558@media (min-width: $layout-breakpoint-lg) {
6559 md-toast {
6560 .md-toast-content {
6561 max-width: $baseline-grid * 71;
6562 }
6563 }
6564}
6565
6566@media screen and (-ms-high-contrast: active) {
6567 md-toast {
6568 border: 1px solid #fff;
6569 }
6570}
6571
6572
6573// While animating, set the toast parent's overflow to hidden so scrollbars do not appear
6574.md-toast-animating {
6575 overflow: hidden !important;
6576}
6577
6578$tabs-paginator-width: $baseline-grid * 4 !default;
6579$tabs-tab-width: $baseline-grid * 12 !default;
6580$tabs-header-height: 48px !default;
6581
6582@keyframes md-tab-content-hide {
6583 0% { opacity: 1; }
6584 50% { opacity: 1; }
6585 100% { opacity: 0; }
6586}
6587
6588md-tab-data {
6589 position: absolute;
6590 top: 0;
6591 left: 0;
6592 right: 0;
6593 bottom: 0;
6594 z-index: -1;
6595 opacity: 0;
6596}
6597
6598md-tabs {
6599 display: block;
6600 margin: 0;
6601 border-radius: 2px;
6602 overflow: hidden;
6603 position: relative;
6604 flex-shrink: 0;
6605 &:not(.md-no-tab-content):not(.md-dynamic-height) {
6606 min-height: 200 + $tabs-header-height;
6607 }
6608 &[md-align-tabs="bottom"] {
6609 padding-bottom: $tabs-header-height;
6610 md-tabs-wrapper {
6611 position: absolute;
6612 bottom: 0;
6613 left: 0;
6614 right: 0;
6615 height: $tabs-header-height;
6616 z-index: 2;
6617 }
6618 md-tabs-content-wrapper {
6619 top: 0;
6620 bottom: $tabs-header-height;
6621 }
6622 }
6623 &.md-dynamic-height {
6624 md-tabs-content-wrapper {
6625 min-height: 0;
6626 position: relative;
6627 top: auto;
6628 left: auto;
6629 right: auto;
6630 bottom: auto;
6631 overflow: visible;
6632 }
6633 md-tab-content {
6634 &.md-active {
6635 position: relative;
6636 }
6637 }
6638 }
6639 &[md-border-bottom] {
6640 md-tabs-wrapper {
6641 border-width: 0 0 1px;
6642 border-style: solid;
6643 }
6644 &:not(.md-dynamic-height) {
6645 md-tabs-content-wrapper {
6646 top: $tabs-header-height + 1;
6647 }
6648 }
6649 }
6650}
6651
6652md-tabs-wrapper {
6653 display: block;
6654 position: relative;
6655 // transform is needed for iOS Safari to prevent content from disappearing on scroll
6656 transform: translate3d(0, 0, 0);
6657 md-prev-button, md-next-button {
6658 height: 100%;
6659 width: $tabs-paginator-width;
6660 position: absolute;
6661 top: 50%;
6662 transform: translateY(-50%);
6663 line-height: 1em;
6664 z-index: 2;
6665 cursor: pointer;
6666 font-size: 16px;
6667 background: transparent no-repeat center center;
6668 transition: $swift-ease-in-out;
6669 &:focus {
6670 outline: none;
6671 }
6672 &.md-disabled {
6673 opacity: 0.25;
6674 cursor: default;
6675 }
6676 &.ng-leave {
6677 transition: none;
6678 }
6679 md-icon {
6680 position: absolute;
6681 top: 50%;
6682 left: 50%;
6683 transform: translate3d(-50%, -50%, 0);
6684 }
6685 }
6686 md-prev-button {
6687 @include rtl-prop(left, right, 0, auto);
6688 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPiA8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiA8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8ZyBpZD0iSGVhZGVyIj4gPGc+IDxyZWN0IHg9Ii02MTgiIHk9Ii0xMjA4IiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+IDwvZz4gPC9nPiA8ZyBpZD0iTGFiZWwiPiA8L2c+IDxnIGlkPSJJY29uIj4gPGc+IDxwb2x5Z29uIHBvaW50cz0iMTUuNCw3LjQgMTQsNiA4LDEyIDE0LDE4IDE1LjQsMTYuNiAxMC44LDEyIAkJIiBzdHlsZT0iZmlsbDp3aGl0ZTsiLz4gPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+IDwvZz4gPC9nPiA8ZyBpZD0iR3JpZCIgZGlzcGxheT0ibm9uZSI+IDxnIGRpc3BsYXk9ImlubGluZSI+IDwvZz4gPC9nPiA8L3N2Zz4NCg==');
6689 }
6690 md-next-button {
6691 @include rtl-prop(right, left, 0, auto);
6692 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPiA8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiA8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8ZyBpZD0iSGVhZGVyIj4gPGc+IDxyZWN0IHg9Ii02MTgiIHk9Ii0xMzM2IiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+IDwvZz4gPC9nPiA8ZyBpZD0iTGFiZWwiPiA8L2c+IDxnIGlkPSJJY29uIj4gPGc+IDxwb2x5Z29uIHBvaW50cz0iMTAsNiA4LjYsNy40IDEzLjIsMTIgOC42LDE2LjYgMTAsMTggMTYsMTIgCQkiIHN0eWxlPSJmaWxsOndoaXRlOyIvPiA8cmVjdCBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4gPC9nPiA8L2c+IDxnIGlkPSJHcmlkIiBkaXNwbGF5PSJub25lIj4gPGcgZGlzcGxheT0iaW5saW5lIj4gPC9nPiA8L2c+IDwvc3ZnPg0K');
6693 md-icon {
6694 transform: translate3d(-50%, -50%, 0) rotate(180deg);
6695 }
6696 }
6697 &.md-stretch-tabs {
6698 md-pagination-wrapper {
6699 width: 100%;
6700 flex-direction: row;
6701 md-tab-item {
6702 flex-grow: 1;
6703 }
6704 }
6705 }
6706}
6707
6708md-tabs-canvas {
6709 @include pie-clearfix;
6710 position: relative;
6711 overflow: hidden;
6712 display: block;
6713 height: $tabs-header-height;
6714 .md-dummy-wrapper {
6715 position: absolute;
6716 top: 0;
6717 @include rtl-prop(left, right, 0, auto);
6718 }
6719 &.md-paginated {
6720 margin: 0 $tabs-paginator-width;
6721 }
6722 &.md-center-tabs {
6723 display: flex;
6724 flex-direction: column;
6725 text-align: center;
6726 .md-tab {
6727 float: none;
6728 display: inline-block;
6729 }
6730 }
6731}
6732
6733md-pagination-wrapper {
6734 @include pie-clearfix;
6735 height: $tabs-header-height;
6736 display: flex;
6737 transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
6738 position: absolute;
6739 @include rtl-prop(left, right, 0, auto);
6740 transform: translate3d(0, 0, 0);
6741 &.md-center-tabs {
6742 position: relative;
6743 justify-content: center;
6744 }
6745}
6746
6747md-tabs-content-wrapper {
6748 display: block;
6749 position: absolute;
6750 top: $tabs-header-height;
6751 left: 0;
6752 right: 0;
6753 bottom: 0;
6754 overflow: hidden;
6755}
6756
6757md-tab-content {
6758 display: flex;
6759 position: absolute;
6760 top: 0;
6761 left: 0;
6762 right: 0;
6763 bottom: 0;
6764 transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
6765 overflow: auto;
6766 // transform is needed for iOS Safari to prevent content from disappearing on scroll
6767 transform: translate3d(0, 0, 0);
6768 &.md-no-scroll {
6769 bottom: auto;
6770 overflow: hidden;
6771 }
6772 &.ng-leave, &.md-no-transition {
6773 transition: none;
6774 }
6775 &.md-left:not(.md-active) {
6776 @include rtl(transform, translateX(-100%), translateX(+100%));
6777 animation: 2 * $swift-ease-in-out-duration md-tab-content-hide;
6778 opacity: 0;
6779 * {
6780 transition: visibility 0s linear;
6781 transition-delay: $swift-ease-in-out-duration;
6782 visibility: hidden;
6783 }
6784 }
6785 &.md-right:not(.md-active) {
6786 @include rtl(transform, translateX(100%), translateX(-100%));
6787 animation: 2 * $swift-ease-in-out-duration md-tab-content-hide;
6788 opacity: 0;
6789 * {
6790 transition: visibility 0s linear;
6791 transition-delay: $swift-ease-in-out-duration;
6792 visibility: hidden;
6793 }
6794 }
6795 > div {
6796 flex: 1 0 100%;
6797 min-width: 0;
6798 &.ng-leave {
6799 animation: 2 * $swift-ease-in-out-duration md-tab-content-hide;
6800 }
6801 }
6802}
6803
6804md-ink-bar {
6805 $duration: $swift-ease-in-out-duration * 0.5;
6806 $multiplier: 0.5;
6807 position: absolute;
6808 left: auto;
6809 right: auto;
6810 bottom: 0;
6811 height: 2px;
6812 &.md-left {
6813 transition: left ($duration * $multiplier) $swift-ease-in-out-timing-function,
6814 right $duration $swift-ease-in-out-timing-function;
6815 }
6816 &.md-right {
6817 transition: left $duration $swift-ease-in-out-timing-function,
6818 right ($duration * $multiplier) $swift-ease-in-out-timing-function;
6819 }
6820}
6821
6822md-tab {
6823 position: absolute;
6824 z-index: -1;
6825 left: -9999px;
6826}
6827
6828.md-tab {
6829 font-size: 14px;
6830 text-align: center;
6831 line-height: $tabs-header-height - 24;
6832 padding: 12px 24px;
6833 transition: background-color 0.35s $swift-ease-in-out-timing-function;
6834 cursor: pointer;
6835 white-space: nowrap;
6836 position: relative;
6837 text-transform: uppercase;
6838 @include rtl(float, left, right);
6839 font-weight: 500;
6840 box-sizing: border-box;
6841 overflow: hidden;
6842 text-overflow: ellipsis;
6843 &.md-focused {
6844 box-shadow: none;
6845 outline: none;
6846 }
6847 &.md-active {
6848 cursor: default;
6849 }
6850 &.md-disabled {
6851 pointer-events: none;
6852 touch-action: pan-y;
6853 user-select: none;
6854 -webkit-user-drag: none;
6855 opacity: 0.5;
6856 cursor: default;
6857 }
6858 &.ng-leave {
6859 transition: none;
6860 }
6861}
6862
6863md-toolbar + md-tabs {
6864 border-top-left-radius: 0;
6865 border-top-right-radius: 0;
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}