@angular/material 2.0.0-alpha.9-3 → 2.0.0-beta.11

package/typings/tooltip/tooltip.d.ts

@@ -0,0 +1,177 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { AnimationEvent } from '@angular/animations';
+import { AriaDescriber } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { OriginConnectionPosition, Overlay, OverlayConnectionPosition, OverlayRef, RepositionScrollStrategy, ScrollStrategy } from '@angular/cdk/overlay';
+import { Platform } from '@angular/cdk/platform';
+import { ScrollDispatcher } from '@angular/cdk/scrolling';
+import { ChangeDetectorRef, ElementRef, InjectionToken, NgZone, OnDestroy, Renderer2, ViewContainerRef } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+export declare type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after';
+/** Time in ms to delay before changing the tooltip visibility to hidden */
+export declare const TOUCHEND_HIDE_DELAY = 1500;
+/** Time in ms to throttle repositioning after scroll events. */
+export declare const SCROLL_THROTTLE_MS = 20;
+/** CSS class that will be attached to the overlay panel. */
+export declare const TOOLTIP_PANEL_CLASS = "mat-tooltip-panel";
+/** Creates an error to be thrown if the user supplied an invalid tooltip position. */
+export declare function getMdTooltipInvalidPositionError(position: string): Error;
+/** Injection token that determines the scroll handling while a tooltip is visible. */
+export declare const MD_TOOLTIP_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
+/** @docs-private */
+export declare function MD_TOOLTIP_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => RepositionScrollStrategy;
+/** @docs-private */
+export declare const MD_TOOLTIP_SCROLL_STRATEGY_PROVIDER: {
+    provide: InjectionToken<() => ScrollStrategy>;
+    deps: typeof Overlay[];
+    useFactory: (overlay: Overlay) => () => RepositionScrollStrategy;
+};
+/**
+ * Directive that attaches a material design tooltip to the host element. Animates the showing and
+ * hiding of a tooltip provided position (defaults to below the element).
+ *
+ * https://material.google.com/components/tooltips.html
+ */
+export declare class MdTooltip implements OnDestroy {
+    private _overlay;
+    private _elementRef;
+    private _scrollDispatcher;
+    private _viewContainerRef;
+    private _ngZone;
+    private _platform;
+    private _ariaDescriber;
+    private _scrollStrategy;
+    private _dir;
+    _overlayRef: OverlayRef | null;
+    _tooltipInstance: TooltipComponent | null;
+    private _position;
+    private _disabled;
+    private _tooltipClass;
+    /** Allows the user to define the position of the tooltip relative to the parent element */
+    position: TooltipPosition;
+    /** Disables the display of the tooltip. */
+    disabled: boolean;
+    /** @deprecated */
+    _positionDeprecated: TooltipPosition;
+    /** The default delay in ms before showing the tooltip after show is called */
+    showDelay: number;
+    /** The default delay in ms before hiding the tooltip after hide is called */
+    hideDelay: number;
+    private _message;
+    /** The message to be displayed in the tooltip */
+    message: string;
+    /** Classes to be passed to the tooltip. Supports the same syntax as `ngClass`. */
+    tooltipClass: string | string[] | Set<string> | {
+        [key: string]: any;
+    };
+    /** @deprecated */
+    _deprecatedMessage: string;
+    _matMessage: string;
+    _matPosition: TooltipPosition;
+    _matDisabled: boolean;
+    _matHideDelay: number;
+    _matShowDelay: number;
+    _matClass: string | Set<string> | string[] | {
+        [key: string]: any;
+    };
+    private _enterListener;
+    private _leaveListener;
+    constructor(renderer: Renderer2, _overlay: Overlay, _elementRef: ElementRef, _scrollDispatcher: ScrollDispatcher, _viewContainerRef: ViewContainerRef, _ngZone: NgZone, _platform: Platform, _ariaDescriber: AriaDescriber, _scrollStrategy: any, _dir: Directionality);
+    /**
+     * Dispose the tooltip when destroyed.
+     */
+    ngOnDestroy(): void;
+    /** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
+    show(delay?: number): void;
+    /** Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input */
+    hide(delay?: number): void;
+    /** Shows/hides the tooltip */
+    toggle(): void;
+    /** Returns true if the tooltip is currently visible to the user */
+    _isTooltipVisible(): boolean;
+    /** Handles the keydown events on the host element. */
+    _handleKeydown(e: KeyboardEvent): void;
+    /** Create the tooltip to display */
+    private _createTooltip();
+    /** Create the overlay config and position strategy */
+    private _createOverlay();
+    /** Disposes the current tooltip and the overlay it is attached to */
+    private _disposeTooltip();
+    /** Returns the origin position based on the user's position preference */
+    _getOrigin(): OriginConnectionPosition;
+    /** Returns the overlay position based on the user's preference */
+    _getOverlayPosition(): OverlayConnectionPosition;
+    /** Updates the tooltip message and repositions the overlay according to the new message length */
+    private _updateTooltipMessage();
+    /** Updates the tooltip class */
+    private _setTooltipClass(tooltipClass);
+}
+export declare type TooltipVisibility = 'initial' | 'visible' | 'hidden';
+/**
+ * Internal component that wraps the tooltip's content.
+ * @docs-private
+ */
+export declare class TooltipComponent {
+    private _dir;
+    private _changeDetectorRef;
+    /** Message to display in the tooltip */
+    message: string;
+    /** Classes to be added to the tooltip. Supports the same syntax as `ngClass`. */
+    tooltipClass: string | string[] | Set<string> | {
+        [key: string]: any;
+    };
+    /** The timeout ID of any current timer set to show the tooltip */
+    _showTimeoutId: number;
+    /** The timeout ID of any current timer set to hide the tooltip */
+    _hideTimeoutId: number;
+    /** Property watched by the animation framework to show or hide the tooltip */
+    _visibility: TooltipVisibility;
+    /** Whether interactions on the page should close the tooltip */
+    private _closeOnInteraction;
+    /** The transform origin used in the animation for showing and hiding the tooltip */
+    _transformOrigin: string;
+    /** Subject for notifying that the tooltip has been hidden from the view */
+    private _onHide;
+    constructor(_dir: Directionality, _changeDetectorRef: ChangeDetectorRef);
+    /**
+     * Shows the tooltip with an animation originating from the provided origin
+     * @param position Position of the tooltip.
+     * @param delay Amount of milliseconds to the delay showing the tooltip.
+     */
+    show(position: TooltipPosition, delay: number): void;
+    /**
+     * Begins the animation to hide the tooltip after the provided delay in ms.
+     * @param delay Amount of milliseconds to delay showing the tooltip.
+     */
+    hide(delay: number): void;
+    /**
+     * Returns an observable that notifies when the tooltip has been hidden from view
+     */
+    afterHidden(): Observable<void>;
+    /**
+     * Whether the tooltip is being displayed
+     */
+    isVisible(): boolean;
+    /** Sets the tooltip transform origin according to the tooltip position */
+    _setTransformOrigin(value: TooltipPosition): void;
+    _animationStart(): void;
+    _animationDone(event: AnimationEvent): void;
+    /**
+     * Interactions on the HTML body should close the tooltip immediately as defined in the
+     * material design spec.
+     * https://material.google.com/components/tooltips.html#tooltips-interaction
+     */
+    _handleBodyInteraction(): void;
+    /**
+     * Marks that the tooltip needs to be checked in the next change detection run.
+     * Mainly used for rendering the initial text before positioning a tooltip, which
+     * can be problematic in components with OnPush change detection.
+     */
+    _markForCheck(): void;
+}

package/typings/version.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { Version } from '@angular/core';
+/** Current version of Angular Material. */
+export declare const VERSION: Version;

package/button/README.md

@@ -1,115 +0,0 @@
-# md-button
-
-`md-button` is an HTML `<button>` or `<a>` tag enhanced with styling and animation to match the
-[Material Design button spec](https://www.google.com/design/spec/components/buttons.html).
-
-Users should employ a button element (`<button>`) when clicking triggers some action in the current
-view *without navigating*. An anchor element (`<a>`) should be used when clicking *navigates*
-the user to another URL. Depending on which element is used, the component will either be an
-instance of `MdButton` or `MdAnchor`. Visually, the two are identical.
-
-
-### Button types
-
-There are five types of buttons:
- 1. Flat buttons - `md-button`
-    * Rectangular button
-    * Defaults to white background
-    * No box shadow
- 2. Raised buttons - `md-raised-button`
-    * Rectangular button
-    * Defaults to white background
-    * Box shadow applied
- 3. Icon buttons - `md-icon-button`
-    * Circular button
-    * Transparent background
-    * 40 by 40 px
- 4. Floating Action Buttons (FABs) - `md-fab`
-    * Circular button
-    * Defaults background to "accent" palette defined in theme
-    * Box shadow applied
-    * 56 by 56 px
- 5. Mini Floating Action Buttons (Mini FABs) - `md-mini-fab`
-    * Circular button
-    * Defaults background to "accent" palette defined in theme
-    * Box shadow applied
-    * 40 by 40 px
-
-Each is an attribute directive that you can add to a `button` or `a` tag.  You can provide custom content to the button by inserting it
-between the tags, as you would with a normal button.
-
-Example:
-
- ```html
-<button md-button>FLAT</button>
-<button md-raised-button>RAISED</button>
-<button md-icon-button>
-    <md-icon class="md-24">favorite</md-icon>
-</button>
-<button md-fab>
-    <md-icon class="md-24">add</md-icon>
-</button>
-<button md-mini-fab>
-    <md-icon class="md-24">add</md-icon>
-</button>
- ```
-
-Output:
-
-<img src="https://material.angularjs.org/material2_assets/buttons/basic-buttons.png">
-
-### Theming
-
-All button types can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the `color` attribute.
-Simply pass in the palette name.
-
-In flat buttons, the palette chosen will affect the text color, while in other buttons, it affects the background.
-
-Example:
-
- ```html
-<button md-raised-button color="primary">PRIMARY</button>
-<button md-raised-button color="accent">ACCENT</button>
-<button md-raised-button color="warn">WARN</button>
- ```
-
-Output:
-
-<img src="https://material.angularjs.org/material2_assets/buttons/colored-buttons.png">
-
-### Disabling
-
-You can disable any button type through the native `disabled` property.  You can add it directly, or bind it to a property on your
-component class by adding `[disabled]="isDisabled"` given that the `isDisabled`
-property exists.
-
-```html
-<button md-button disabled>OFF</button>
-<button md-raised-button [disabled]="isDisabled">OFF</button>
-<button md-mini-fab [disabled]="isDisabled"><md-icon>check</md-icon></button>
-```
-
-Output:
-
-<img src="https://material.angularjs.org/material2_assets/buttons/disabled-buttons.png">
-
-### Accessibility
-
- * In high contrast mode, a strong border is added to the button to make it easier to see.
- * Button focus events originating from the keyboard will retain focus styles, while button focus events from the mouse will not.
- * As `md-button` is added to an existing `button` or `a` tag, it enjoys all the accessibility natively built into these elements.
-
-
-### Upcoming work
-
-We will also be adding ink ripples to buttons in an upcoming milestone.
-
-### API Summary
-
-Properties:
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `color` | `"primary"|"accent"|"warn"` | The color palette of the button
-| `disabled` | boolean | Whether or not the button is disabled
-| `disableRipple` | boolean | Whether the ripple effect when the button is clicked should be disabled

package/button/_button-base.scss

@@ -1,116 +0,0 @@
-@import '../core/style/variables';
-@import '../core/style/elevation';
-@import '../core/style/button-common';
-
-
-// Applies a focus style to an md-button element.
-@mixin md-button-focus {
-  &::after {
-    // The button spec calls for focus on raised buttons (and FABs) to be indicated with a
-    // black, 12% opacity shade over the normal color (for both light and dark themes).
-    // We do this by placing an :after pseudo-element with the appropriate shade over the button.
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    content: '';
-    background-color: rgba(black, 0.12);
-    border-radius: inherit;
-    pointer-events: none;
-  }
-}
-
-// Flat and raised button standards
-$md-button-padding: 0 16px !default;
-$md-button-min-width: 88px !default;
-$md-button-margin: 0 !default;
-$md-button-line-height: 36px !default;
-$md-button-border-radius: 3px !default;
-
-// Icon Button standards
-$md-icon-button-size: 40px !default;
-$md-icon-button-border-radius: 50% !default;
-$md-icon-button-line-height: 24px !default;
-
-// Fab standards
-$md-fab-border-radius: 50% !default;
-$md-fab-size: 56px !default;
-$md-fab-padding: 16px !default;
-
-$md-mini-fab-size: 40px !default;
-$md-mini-fab-padding: 8px !default;
-
-// Applies base styles to all button types.
-%md-button-base {
-  box-sizing: border-box;
-  position: relative;
-
-  // Reset browser <button> styles.
-  @include md-button-reset();
-
-  // Make anchors render like buttons.
-  display: inline-block;
-  white-space: nowrap;
-  text-decoration: none;
-  vertical-align: baseline;
-
-  // Typography.
-  font-size: $md-body-font-size-base;
-  font-family: $md-font-family;
-  font-weight: 500;
-  color: currentColor;
-  text-align: center;
-
-  // Sizing.
-  margin: $md-button-margin;
-  min-width: $md-button-min-width;
-  line-height: $md-button-line-height;
-  padding: $md-button-padding;
-  border-radius: $md-button-border-radius;
-
-  &[disabled] {
-    cursor: default;
-  }
-
-  &.md-button-focus {
-    @include md-button-focus();
-  }
-}
-
-// Applies styles to buttons with backgrounds: raised, fab, and mini-fab
-%md-raised-button {
-  @extend %md-button-base;
-
-  @include md-elevation(2);
-
-  // Force hardware acceleration.
-  transform: translate3d(0, 0, 0);
-
-  // Animation.
-  transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
-              md-elevation-transition-property-value();
-
-  &:active {
-    @include md-elevation(8);
-  }
-
-  &[disabled] {
-    box-shadow: none;
-  }
-}
-
-// Applies styles to fab and mini-fab button types only
-@mixin md-fab($size, $padding) {
-  @extend %md-raised-button;
-
-  min-width: 0;
-  border-radius: $md-fab-border-radius;
-  width: $size;
-  height: $size;
-  padding: 0;
-
-  i, md-icon {
-    padding: $padding 0;
-  }
-}

package/button/_button-theme.scss

@@ -1,85 +0,0 @@
-@import '../core/theming/theming';
-
-
-// Applies a focus style to an md-button element for each of the supported palettes.
-@mixin _md-button-focus-color($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-
-  &.md-primary::after {
-    background-color: md-color($primary, 0.12);
-  }
-
-  &.md-accent::after {
-    background-color: md-color($accent, 0.12);
-  }
-
-  &.md-warn::after {
-    background-color: md-color($warn, 0.12);
-  }
-}
-
-// Applies a property to an md-button element for each of the supported palettes.
-@mixin _md-button-theme-color($theme, $property, $color: 'default') {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
-  &.md-primary {
-    #{$property}: md-color($primary, $color);
-  }
-  &.md-accent {
-    #{$property}: md-color($accent, $color);
-  }
-  &.md-warn {
-    #{$property}: md-color($warn, $color);
-  }
-
-  &.md-primary, &.md-accent, &.md-warn, &[disabled] {
-    &[disabled] {
-      $palette: if($property == 'color', $foreground, $background);
-      #{$property}: md-color($palette, disabled-button);
-    }
-  }
-}
-
-@mixin md-button-theme($theme) {
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
-  [md-button], [md-icon-button], [md-raised-button], [md-fab], [md-mini-fab] {
-    &.md-button-focus {
-      @include _md-button-focus-color($theme);
-    }
-  }
-
-  [md-button], [md-icon-button] {
-    @include _md-button-theme-color($theme, 'color');
-    background: transparent;
-
-    // Only flat buttons and icon buttons (not raised or fabs) have a hover style.
-    // Use the same visual treatment for hover as for focus.
-    &:hover {
-      @include _md-button-focus-color($theme);
-    }
-  }
-
-  [md-raised-button], [md-fab], [md-mini-fab] {
-    @include _md-button-theme-color($theme, 'color', default-contrast);
-    @include _md-button-theme-color($theme, 'background-color');
-    background-color: md-color($background, background);
-  }
-
-  [md-fab], [md-mini-fab] {
-    background-color: md-color($accent);
-    color: md-color($accent, default-contrast);
-  }
-}
-
-

package/button/button.css

@@ -1,101 +0,0 @@
-[md-raised-button], [md-fab], [md-mini-fab], [md-button], [md-icon-button] {
-  box-sizing: border-box;
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  border: none;
-  display: inline-block;
-  white-space: nowrap;
-  text-decoration: none;
-  vertical-align: baseline;
-  font-size: 14px;
-  font-family: Roboto, "Helvetica Neue", sans-serif;
-  font-weight: 500;
-  color: currentColor;
-  text-align: center;
-  margin: 0;
-  min-width: 88px;
-  line-height: 36px;
-  padding: 0 16px;
-  border-radius: 3px; }
-  [disabled][md-raised-button], [disabled][md-fab], [disabled][md-mini-fab], [disabled][md-button], [disabled][md-icon-button] {
-    cursor: default; }
-  .md-button-focus[md-raised-button]::after, .md-button-focus[md-fab]::after, .md-button-focus[md-mini-fab]::after, .md-button-focus[md-button]::after, .md-button-focus[md-icon-button]::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    content: '';
-    background-color: rgba(0, 0, 0, 0.12);
-    border-radius: inherit;
-    pointer-events: none; }
-
-[md-raised-button], [md-fab], [md-mini-fab] {
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  transform: translate3d(0, 0, 0);
-  transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1); }
-  [md-raised-button]:active, [md-fab]:active, [md-mini-fab]:active {
-    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
-  [disabled][md-raised-button], [disabled][md-fab], [disabled][md-mini-fab] {
-    box-shadow: none; }
-
-[md-button]:hover::after, [md-icon-button]:hover::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  content: '';
-  background-color: rgba(0, 0, 0, 0.12);
-  border-radius: inherit;
-  pointer-events: none; }
-
-[md-button][disabled]:hover.md-primary, [md-button][disabled]:hover.md-accent, [md-button][disabled]:hover.md-warn, [md-button][disabled]:hover::after, [md-icon-button][disabled]:hover.md-primary, [md-icon-button][disabled]:hover.md-accent, [md-icon-button][disabled]:hover.md-warn, [md-icon-button][disabled]:hover::after {
-  background-color: transparent; }
-
-[md-fab] {
-  min-width: 0;
-  border-radius: 50%;
-  width: 56px;
-  height: 56px;
-  padding: 0; }
-  [md-fab] i, [md-fab] md-icon {
-    padding: 16px 0; }
-
-[md-mini-fab] {
-  min-width: 0;
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  padding: 0; }
-  [md-mini-fab] i, [md-mini-fab] md-icon {
-    padding: 8px 0; }
-
-[md-icon-button] {
-  min-width: 0;
-  padding: 0;
-  width: 40px;
-  height: 40px;
-  line-height: 24px;
-  border-radius: 50%; }
-  [md-icon-button] .md-button-wrapper > * {
-    vertical-align: middle; }
-
-.md-button-ripple {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0; }
-
-.md-button-ripple-round {
-  border-radius: 50%;
-  z-index: 1; }
-
-@media screen and (-ms-high-contrast: active) {
-  .md-raised-button, .md-fab, .md-mini-fab {
-    border: 1px solid #fff; } }
-
-/*# sourceMappingURL=button.css.map */

package/button/button.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"button/button.css","sources":["button/button.scss","button/_button-base.scss","core/style/_variables.scss","core/typography/_typography.scss","core/style/_elevation.scss","core/style/_button-common.scss"],"sourcesContent":["// TODO(jelbourn): Measure perf benefits for translate3d and will-change.\n// TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser.\n\n@import 'button-base';\n\n// TODO(kara): Replace attribute selectors with class selectors when possible\n[md-button], [md-icon-button] {\n  @extend %md-button-base;\n\n  // Only flat buttons and icon buttons (not raised or fabs) have a hover style.\n  &:hover {\n    // Use the same visual treatment for hover as for focus.\n    @include md-button-focus();\n  }\n\n  &[disabled]:hover {\n    &.md-primary, &.md-accent, &.md-warn, &::after {\n      background-color: transparent;\n    }\n  }\n}\n\n[md-raised-button] {\n  @extend %md-raised-button;\n}\n\n[md-fab] {\n  @include md-fab($md-fab-size, $md-fab-padding);\n}\n\n[md-mini-fab] {\n  @include md-fab($md-mini-fab-size, $md-mini-fab-padding);\n}\n\n[md-icon-button] {\n  min-width: 0;\n  padding: 0;\n\n  width: $md-icon-button-size;\n  height: $md-icon-button-size;\n\n  line-height: $md-icon-button-line-height;\n  border-radius: $md-icon-button-border-radius;\n\n  .md-button-wrapper > * {\n    vertical-align: middle;\n  }\n}\n\n// The ripple container should match the bounds of the entire button.\n.md-button-ripple {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n\n// For round buttons, the ripple container should clip child ripples to a circle.\n.md-button-ripple-round {\n  border-radius: 50%;\n  // z-index needed to make clipping to border-radius work correctly.\n  // http://stackoverflow.com/questions/20001515/chrome-bug-border-radius-not-clipping-contents-when-combined-with-css-transiti\n  z-index: 1;\n}\n\n// Applies a clearer border for high-contrast mode (a11y)\n@media screen and (-ms-high-contrast: active) {\n  .md-raised-button, .md-fab, .md-mini-fab {\n    border: 1px solid #fff;\n  }\n}\n","@import '../core/style/variables';\n@import '../core/style/elevation';\n@import '../core/style/button-common';\n\n\n// Applies a focus style to an md-button element.\n@mixin md-button-focus {\n  &::after {\n    // The button spec calls for focus on raised buttons (and FABs) to be indicated with a\n    // black, 12% opacity shade over the normal color (for both light and dark themes).\n    // We do this by placing an :after pseudo-element with the appropriate shade over the button.\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    content: '';\n    background-color: rgba(black, 0.12);\n    border-radius: inherit;\n    pointer-events: none;\n  }\n}\n\n// Flat and raised button standards\n$md-button-padding: 0 16px !default;\n$md-button-min-width: 88px !default;\n$md-button-margin: 0 !default;\n$md-button-line-height: 36px !default;\n$md-button-border-radius: 3px !default;\n\n// Icon Button standards\n$md-icon-button-size: 40px !default;\n$md-icon-button-border-radius: 50% !default;\n$md-icon-button-line-height: 24px !default;\n\n// Fab standards\n$md-fab-border-radius: 50% !default;\n$md-fab-size: 56px !default;\n$md-fab-padding: 16px !default;\n\n$md-mini-fab-size: 40px !default;\n$md-mini-fab-padding: 8px !default;\n\n// Applies base styles to all button types.\n%md-button-base {\n  box-sizing: border-box;\n  position: relative;\n\n  // Reset browser <button> styles.\n  @include md-button-reset();\n\n  // Make anchors render like buttons.\n  display: inline-block;\n  white-space: nowrap;\n  text-decoration: none;\n  vertical-align: baseline;\n\n  // Typography.\n  font-size: $md-body-font-size-base;\n  font-family: $md-font-family;\n  font-weight: 500;\n  color: currentColor;\n  text-align: center;\n\n  // Sizing.\n  margin: $md-button-margin;\n  min-width: $md-button-min-width;\n  line-height: $md-button-line-height;\n  padding: $md-button-padding;\n  border-radius: $md-button-border-radius;\n\n  &[disabled] {\n    cursor: default;\n  }\n\n  &.md-button-focus {\n    @include md-button-focus();\n  }\n}\n\n// Applies styles to buttons with backgrounds: raised, fab, and mini-fab\n%md-raised-button {\n  @extend %md-button-base;\n\n  @include md-elevation(2);\n\n  // Force hardware acceleration.\n  transform: translate3d(0, 0, 0);\n\n  // Animation.\n  transition: background $swift-ease-out-duration $swift-ease-out-timing-function,\n              md-elevation-transition-property-value();\n\n  &:active {\n    @include md-elevation(8);\n  }\n\n  &[disabled] {\n    box-shadow: none;\n  }\n}\n\n// Applies styles to fab and mini-fab button types only\n@mixin md-fab($size, $padding) {\n  @extend %md-raised-button;\n\n  min-width: 0;\n  border-radius: $md-fab-border-radius;\n  width: $size;\n  height: $size;\n  padding: 0;\n\n  i, md-icon {\n    padding: $padding 0;\n  }\n}\n","@import '../typography/typography';\n\n\n// Typography\n$md-body-font-size-base: rem(1.4) !default;\n$md-font-family: Roboto, 'Helvetica Neue', sans-serif !default;\n\n// Media queries\n$md-xsmall: 'max-width: 600px';\n\n// TODO: Revisit all z-indices before beta\n// z-index master list\n\n$z-index-fab: 20 !default;\n$z-index-drawer: 100 !default;\n\n// Overlay z indices.\n$md-z-index-overlay: 1000;\n$md-z-index-overlay-container: 1;\n$md-z-index-overlay-backdrop: 1;\n\n\n// Global constants\n$pi: 3.14159265;\n\n// Padding between input toggles and their labels\n$md-toggle-padding: 8px !default;\n// Width and height of input toggles\n$md-toggle-size: 20px !default;\n\n// Easing Curves\n// TODO(jelbourn): all of these need to be revisited\n\n// The default animation curves used by material design.\n$md-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\n$md-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$md-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\n\n$swift-ease-out-duration: 400ms !default;\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\n\n$swift-ease-in-duration: 300ms !default;\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\n\n$swift-ease-in-out-duration: 500ms !default;\n$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\n\n$swift-linear-duration: 80ms !default;\n$swift-linear-timing-function: linear !default;\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\n","// Implement the rem unit with SCSS so we don't have to actually set a font-size on\n// the user's body element.\n@function rem($multiplier) {\n  $font-size: 10px;\n  @return $multiplier * $font-size;\n}\n","@import 'variables';\n\n\n// A collection of mixins and CSS classes that can be used to apply elevation to a material\n// element.\n// See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html\n// Examples:\n//\n//\n// .md-foo {\n//   @include $md-elevation(2);\n//\n//   &:active {\n//     @include $md-elevation(8);\n//   }\n// }\n//\n// <div id=\"external-card\" class=\"md-elevation-z2\"><p>Some content</p></div>\n//\n// For an explanation of the design behind how elevation is implemented, see the design doc at\n// https://goo.gl/Kq0k9Z.\n\n// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation\n// level is created using a set of 3 shadow values, one for umbra (the shadow representing the\n// space completely obscured by an object relative to its light source), one for penumbra (the\n// space partially obscured by an object), and one for ambient (the space which contains the object\n// itself). For a further explanation of these terms and their meanings, see\n// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.\n\n$_umbra-color: rgba(black, 0.2);\n$_penumbra-color: rgba(black, 0.14);\n$_ambient-color: rgba(black, 0.12);\n\n// Maps for the different shadow sets and their values within each z-space. These values were\n// created by taking a few reference shadow sets created by Google's Designers and interpolating\n// all of the values between them.\n\n$_umbra-elevation-map: (\n  0: '0px 0px 0px 0px #{$_umbra-color}',\n  1: '0px 2px 1px -1px #{$_umbra-color}',\n  2: '0px 3px 1px -2px #{$_umbra-color}',\n  3: '0px 3px 3px -2px #{$_umbra-color}',\n  4: '0px 2px 4px -1px #{$_umbra-color}',\n  5: '0px 3px 5px -1px #{$_umbra-color}',\n  6: '0px 3px 5px -1px #{$_umbra-color}',\n  7: '0px 4px 5px -2px #{$_umbra-color}',\n  8: '0px 5px 5px -3px #{$_umbra-color}',\n  9: '0px 5px 6px -3px #{$_umbra-color}',\n  10: '0px 6px 6px -3px #{$_umbra-color}',\n  11: '0px 6px 7px -4px #{$_umbra-color}',\n  12: '0px 7px 8px -4px #{$_umbra-color}',\n  13: '0px 7px 8px -4px #{$_umbra-color}',\n  14: '0px 7px 9px -4px #{$_umbra-color}',\n  15: '0px 8px 9px -5px #{$_umbra-color}',\n  16: '0px 8px 10px -5px #{$_umbra-color}',\n  17: '0px 8px 11px -5px #{$_umbra-color}',\n  18: '0px 9px 11px -5px #{$_umbra-color}',\n  19: '0px 9px 12px -6px #{$_umbra-color}',\n  20: '0px 10px 13px -6px #{$_umbra-color}',\n  21: '0px 10px 13px -6px #{$_umbra-color}',\n  22: '0px 10px 14px -6px #{$_umbra-color}',\n  23: '0px 11px 14px -7px #{$_umbra-color}',\n  24: '0px 11px 15px -7px #{$_umbra-color}'\n);\n\n$_penumbra-elevation-map: (\n  0: '0px 0px 0px 0px #{$_penumbra-color}',\n  1: '0px 1px 1px 0px #{$_penumbra-color}',\n  2: '0px 2px 2px 0px #{$_penumbra-color}',\n  3: '0px 3px 4px 0px #{$_penumbra-color}',\n  4: '0px 4px 5px 0px #{$_penumbra-color}',\n  5: '0px 5px 8px 0px #{$_penumbra-color}',\n  6: '0px 6px 10px 0px #{$_penumbra-color}',\n  7: '0px 7px 10px 1px #{$_penumbra-color}',\n  8: '0px 8px 10px 1px #{$_penumbra-color}',\n  9: '0px 9px 12px 1px #{$_penumbra-color}',\n  10: '0px 10px 14px 1px #{$_penumbra-color}',\n  11: '0px 11px 15px 1px #{$_penumbra-color}',\n  12: '0px 12px 17px 2px #{$_penumbra-color}',\n  13: '0px 13px 19px 2px #{$_penumbra-color}',\n  14: '0px 14px 21px 2px #{$_penumbra-color}',\n  15: '0px 15px 22px 2px #{$_penumbra-color}',\n  16: '0px 16px 24px 2px #{$_penumbra-color}',\n  17: '0px 17px 26px 2px #{$_penumbra-color}',\n  18: '0px 18px 28px 2px #{$_penumbra-color}',\n  19: '0px 19px 29px 2px #{$_penumbra-color}',\n  20: '0px 20px 31px 3px #{$_penumbra-color}',\n  21: '0px 21px 33px 3px #{$_penumbra-color}',\n  22: '0px 22px 35px 3px #{$_penumbra-color}',\n  23: '0px 23px 36px 3px #{$_penumbra-color}',\n  24: '0px 24px 38px 3px #{$_penumbra-color}'\n);\n\n$_ambient-elevation-map: (\n  0: '0px 0px 0px 0px #{$_ambient-color}',\n  1: '0px 1px 3px 0px #{$_ambient-color}',\n  2: '0px 1px 5px 0px #{$_ambient-color}',\n  3: '0px 1px 8px 0px #{$_ambient-color}',\n  4: '0px 1px 10px 0px #{$_ambient-color}',\n  5: '0px 1px 14px 0px #{$_ambient-color}',\n  6: '0px 1px 18px 0px #{$_ambient-color}',\n  7: '0px 2px 16px 1px #{$_ambient-color}',\n  8: '0px 3px 14px 2px #{$_ambient-color}',\n  9: '0px 3px 16px 2px #{$_ambient-color}',\n  10: '0px 4px 18px 3px #{$_ambient-color}',\n  11: '0px 4px 20px 3px #{$_ambient-color}',\n  12: '0px 5px 22px 4px #{$_ambient-color}',\n  13: '0px 5px 24px 4px #{$_ambient-color}',\n  14: '0px 5px 26px 4px #{$_ambient-color}',\n  15: '0px 6px 28px 5px #{$_ambient-color}',\n  16: '0px 6px 30px 5px #{$_ambient-color}',\n  17: '0px 6px 32px 5px #{$_ambient-color}',\n  18: '0px 7px 34px 6px #{$_ambient-color}',\n  19: '0px 7px 36px 6px #{$_ambient-color}',\n  20: '0px 8px 38px 7px #{$_ambient-color}',\n  21: '0px 8px 40px 7px #{$_ambient-color}',\n  22: '0px 8px 42px 7px #{$_ambient-color}',\n  23: '0px 9px 44px 8px #{$_ambient-color}',\n  24: '0px 9px 46px 8px #{$_ambient-color}'\n);\n\n\n// The css property used for elevation. In most cases this should not be changed. It is exposed\n// as a variable for abstraction / easy use when needing to reference the property directly, for\n// example in a will-change rule.\n$md-elevation-property: box-shadow !default;\n\n// The default duration value for elevation transitions.\n$md-elevation-transition-duration: 280ms !default;\n\n// The default easing value for elevation transitions.\n$md-elevation-transition-timing-function: $md-fast-out-slow-in-timing-function;\n\n// Applies the correct css rules to an element to give it the elevation specified by $zValue.\n// The $zValue must be between 0 and 24.\n@mixin md-elevation($zValue) {\n  @if type-of($zValue) != number or not unitless($zValue) {\n    @error '$zValue must be a unitless number';\n  }\n  @if $zValue < 0 or $zValue > 24 {\n    @error '$zValue must be between 0 and 24';\n  }\n\n  #{$md-elevation-property}: #{map-get($_umbra-elevation-map, $zValue)},\n                             #{map-get($_penumbra-elevation-map, $zValue)},\n                             #{map-get($_ambient-elevation-map, $zValue)};\n}\n\n// Returns a string that can be used as the value for a transition property for elevation.\n// Calling this function directly is useful in situations where a component needs to transition\n// more than one property.\n//\n// .foo {\n//   transition: md-elevation-transition-property-value(), opacity 100ms ease;\n//   will-change: $md-elevation-property, opacity;\n// }\n@function md-elevation-transition-property-value(\n    $duration: $md-elevation-transition-duration,\n    $easing: $md-elevation-transition-timing-function) {\n  @return #{$md-elevation-property} #{$duration} #{$easing};\n}\n\n// Applies the correct css rules needed to have an element transition between elevations.\n// This mixin should be applied to elements whose elevation values will change depending on their\n// context (e.g. when active or disabled).\n//\n// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can\n// be used in the same way by clients.\n@mixin md-elevation-transition(\n    $duration: $md-elevation-transition-duration,\n    $easing: $md-elevation-transition-timing-function) {\n  transition: md-elevation-transition-property-value($duration, $easing);\n  will-change: $md-elevation-property;\n}\n","// Mixin overriding default button styles like the gray background, the border, and the outline.\n@mixin md-button-reset {\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  border: none;\n}\n"],"mappings":"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","names":[],"sourceRoot":"/source/"}