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

package/card/card.scss

@@ -1,226 +0,0 @@
-@import '../core/style/variables';
-@import '../core/style/elevation';
-
-
-$md-card-default-padding: 24px !default;
-$md-card-mobile-padding: 24px 16px !default;
-$md-card-border-radius: 2px !default;
-$md-card-header-size: 40px !default;
-
-md-card {
-  @include md-elevation(1);
-  @include md-elevation-transition;
-  display: block;
-  position: relative;
-  padding: $md-card-default-padding;
-  border-radius: $md-card-border-radius;
-  font-family: $md-font-family;
-}
-
-md-card:hover {
-  @include md-elevation(2);
-}
-
-.md-card-flat {
-  box-shadow: none;
-}
-
-// base styles for each card section preset (md-card-content, etc)
-%md-card-section-base {
-  display: block;
-  margin-bottom: 16px;
-}
-
-md-card-title {
-  @extend %md-card-section-base;
-  font-size: 24px;
-  font-weight: 400;
-}
-
-md-card-subtitle {
-  @extend %md-card-section-base;
-  font-size: $md-body-font-size-base;
-}
-
-md-card-content {
-  @extend %md-card-section-base;
-  font-size: $md-body-font-size-base;
-}
-
-md-card-actions {
-  @extend %md-card-section-base;
-  margin-left: -16px;
-  margin-right: -16px;
-  padding: 8px 0;
-
-  &[align='end'] {
-    display: flex;
-    justify-content: flex-end;
-  }
-}
-
-[md-card-image] {
-  width: calc(100% + 48px);
-  margin: 0 -24px 16px -24px;
-}
-
-[md-card-xl-image] {
-  width: 240px;
-  height: 240px;
-  margin: -8px;
-}
-
-md-card-footer {
-  position: absolute;
-  width: 100%;
-  min-height: 5px;
-  bottom: 0;
-  left: 0;
-}
-
-md-card-actions {
-  [md-button], [md-raised-button] {
-    margin: 0 4px;
-  }
-}
-
-// HEADER STYLES
-
-md-card-header {
-  display: flex;
-  flex-direction: row;
-  height: $md-card-header-size;
-  margin: -8px 0 16px 0;
-}
-
-.md-card-header-text {
-  height: $md-card-header-size;
-  margin: 0 8px;
-}
-
-[md-card-avatar] {
-  height: $md-card-header-size;
-  width: $md-card-header-size;
-  border-radius: 50%;
-}
-
-md-card-header md-card-title {
-  font-size: $md-body-font-size-base;
-}
-
-// TITLE-GROUP STYLES
-
-// images grouped with title in title-group layout
-%md-card-title-img {
-  margin: -8px 0;
-}
-
-md-card-title-group {
-  display: flex;
-  justify-content: space-between;
-  margin: 0 -8px;
-}
-
-[md-card-sm-image] {
-  @extend %md-card-title-img;
-  width: 80px;
-  height: 80px;
-}
-
-[md-card-md-image] {
-  @extend %md-card-title-img;
-  width: 112px;
-  height: 112px;
-}
-
-[md-card-lg-image] {
-  @extend %md-card-title-img;
-  width: 152px;
-  height: 152px;
-}
-
-// MEDIA QUERIES
-
-@media ($md-xsmall) {
-  md-card {
-    padding: $md-card-mobile-padding;
-  }
-
-  [md-card-image] {
-    width: calc(100% + 32px);
-    margin: 16px -16px;
-  }
-
-  md-card-title-group {
-    margin: 0;
-  }
-
-  [md-card-xl-image] {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  md-card-header {
-    margin: -8px 0 0 0;
-  }
-
-}
-
-// FIRST/LAST CHILD ADJUSTMENTS
-
-// top els in md-card-content and md-card can't have their default margin-tops (e.g. <p> tags)
-// or they'll incorrectly add to card's top padding
-md-card > :first-child, md-card-content > :first-child {
-  margin-top: 0;
-}
-
-// last els in md-card-content and md-card can't have their default margin-bottoms (e.g. <p> tags)
-// or they'll incorrectly add to card's bottom padding
-md-card > :last-child, md-card-content > :last-child {
-  margin-bottom: 0;
-}
-
-// if main image is on top, need to place it flush against top
-// (by stripping card's default 24px padding)
-[md-card-image]:first-child {
-  margin-top: -24px;
-}
-
-// actions panel on bottom should be 8px from bottom of card
-// so must strip 16px from default card padding of 24px
-md-card > md-card-actions:last-child {
-  margin-bottom: -16px;
-  padding-bottom: 0;
-}
-
-// actions panel should always be 8px from sides,
-// so the first button in the actions panel can't add its own margins
-md-card-actions [md-button]:first-child,
-md-card-actions [md-raised-button]:first-child {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-// should be 12px space between titles and subtitles generally
-// default margin-bottom is 16px, so need to move lower title up 4px
-md-card-title:not(:first-child), md-card-subtitle:not(:first-child) {
-  margin-top: -4px;
-}
-
-// should be 8px space between titles and subtitles in header
-// default margin-bottom is 16px, so need to move subtitle in header up 4px
-md-card-header md-card-subtitle:not(:first-child) {
-  margin-top: -8px;
-}
-
-// xl image should always have 16px on top.
-// when it's the first el, it'll need to remove 8px from default card padding of 24px
-md-card > [md-card-xl-image]:first-child {
-  margin-top: -8px;
-}
-
-// xl image should always have 16px on bottom
-// when it's the last el, it'll need to remove 8px from default card padding of 24px
-md-card > [md-card-xl-image]:last-child {
-  margin-bottom: -8px;
-}

package/card/index.js

@@ -1,3 +0,0 @@
-export * from './card';
-
-//# sourceMappingURL=index.js.map

package/card/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC","file":"card/index.js","sourcesContent":["export * from './card';\n"],"sourceRoot":"/source/"}

package/checkbox/README.md

@@ -1,79 +0,0 @@
-# md-checkbox
-
-`md-checkbox` is a Material Design selection control that allows users to make a binary choice for
-a predetermined conditioned. It is modeled after the browser's native checkbox element, and behaves
-in the same way. Similar to the native checkbox element, it supports an indeterminate state for
-"mixed" checkboxes.
-
-A demo of the checkbox can be found at https://plnkr.co/edit/P7qce8lN9n2flS6kBhDy?p=preview.
-
-## Usage
-
-### Basic Usage
-
-`md-checkbox` can be used anywhere a normal checkbox would be used, and in the same way.
-
-```html
-<ul>
-  <li *ngFor="let todo of todos">
-    <md-checkbox [checked]="todo.completed"
-                 (change)="todo.completed = $event">
-      {{todo.name}}
-    </md-checkbox>
-  </li>
-</ul>
-```
-
-### Usage within Forms
-
-In addition to supporting native checkbox functionality, `md-checkbox` also supports `[(ngModel)]`
-for use within forms.
-
-```html
-<form (submit)="saveUser()">
-  <!-- Form fields... -->
-  <div>
-    <md-checkbox [(ngModel)]="user.agreesToTOS">
-      I have read and agree to the terms of service.
-    </md-checkbox>
-  </div>
-  <button type="submit" [disabled]="!user.agreesToTOS">Sign Up</button>
-</form>
-```
-
-### Indeterminate Checkboxes
-
-Indeterminate checkboxes are useful when a checkbox needs to be in a "mixed" state
-
-```html
-<md-checkbox [checked]="false"
-             [indeterminate]="isIndeterminate"
-             (change)="isIndeterminate = false">
-  Click the Button Below to Make Me Indeterminate.
-</md-checkbox>
-<button type="button" (click)="isIndeterminate = true">
-  Make Indeterminate
-</button>
-```
-
-### Alignment
-
-Note that checkboxes can be aligned to come at the "start" or the "end" of its corresponding label.
-
-```html
-<md-checkbox [checked]="true" align="end">
-  I come after my label.
-</md-checkbox>
-```
-
-Note that this alignment is preserved within RTL layouts.
-
-### Accessibility
-
-By default, `md-checkbox` provides all the accessibility attributes needed. It also supports
-keyboard navigation and toggling via the spacebar. However, you can provide an `aria-label` to the
-checkbox if you do not wish to have any label text.
-
-```html
-<md-checkbox [checked]="false" aria-label="My standalone checkbox"></md-checkbox>
-```

package/checkbox/_checkbox-theme.scss

@@ -1,69 +0,0 @@
-@import '../core/theming/theming';
-
-
-@mixin md-checkbox-theme($theme) {
-  $is-dark-theme: map-get($theme, is-dark);
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $background: map-get($theme, background);
-
-
-  // The color of the checkbox border.
-  $checkbox-border-color: if($is-dark-theme, rgba(white, 0.7), rgba(black, 0.54)) !default;
-
-  // The color of the checkbox's checkmark / mixedmark.
-  $checkbox-mark-color: md-color($background, background);
-
-  // The color that is used as the checkbox background when it is checked.
-  $checkbox-background-color: md-color($accent, 500);
-
-  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
-  // this does not work well with elements layered on top of one another. To get around this we
-  // blend the colors together based on the base color and the theme background.
-  $white-30pct-opacity-on-dark: #686868;
-  $black-26pct-opacity-on-light: #b0b0b0;
-  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
-
-  .md-checkbox-frame {
-    border-color: $checkbox-border-color;
-  }
-
-  .md-checkbox-checkmark {
-    fill: $checkbox-mark-color;
-  }
-
-  .md-checkbox-checkmark-path {
-    // !important is needed here because a stroke must be set as an attribute on the SVG in order
-    // for line animation to work properly.
-    stroke: $checkbox-mark-color !important;
-  }
-
-  .md-checkbox-mixedmark {
-    background-color: $checkbox-mark-color;
-  }
-
-  .md-checkbox-indeterminate, .md-checkbox-checked {
-    .md-checkbox-background {
-      background-color: $checkbox-background-color;
-    }
-  }
-
-  .md-checkbox-disabled {
-    &.md-checkbox-checked, &.md-checkbox-indeterminate {
-      .md-checkbox-background {
-        background-color: $disabled-color;
-      }
-    }
-
-    &:not(.md-checkbox-checked) {
-      .md-checkbox-frame {
-        border-color: $disabled-color;
-      }
-    }
-  }
-
-  // TODO(jelbourn): remove style for temporary ripple once the real ripple is applied.
-  .md-checkbox-focused .md-ink-ripple {
-    background-color: md-color($accent, 0.26);
-  }
-}

package/checkbox/checkbox.css

@@ -1,241 +0,0 @@
-@keyframes md-checkbox-fade-in-background {
-  0% {
-    opacity: 0; }
-  50% {
-    opacity: 1; } }
-
-@keyframes md-checkbox-fade-out-background {
-  0%, 50% {
-    opacity: 1; }
-  100% {
-    opacity: 0; } }
-
-@keyframes md-checkbox-unchecked-checked-checkmark-path {
-  0%, 50% {
-    stroke-dashoffset: 22.91026; }
-  50% {
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1); }
-  100% {
-    stroke-dashoffset: 0; } }
-
-@keyframes md-checkbox-unchecked-indeterminate-mixedmark {
-  0%, 68.2% {
-    transform: scaleX(0); }
-  68.2% {
-    animation-timing-function: cubic-bezier(0, 0, 0, 1); }
-  100% {
-    transform: scaleX(1); } }
-
-@keyframes md-checkbox-checked-unchecked-checkmark-path {
-  from {
-    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
-    stroke-dashoffset: 0; }
-  to {
-    stroke-dashoffset: -22.91026; } }
-
-@keyframes md-checkbox-checked-indeterminate-checkmark {
-  from {
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1);
-    opacity: 1;
-    transform: rotate(0deg); }
-  to {
-    opacity: 0;
-    transform: rotate(45deg); } }
-
-@keyframes md-checkbox-indeterminate-checked-checkmark {
-  from {
-    animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
-    opacity: 0;
-    transform: rotate(45deg); }
-  to {
-    opacity: 1;
-    transform: rotate(360deg); } }
-
-@keyframes md-checkbox-checked-indeterminate-mixedmark {
-  from {
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 0.1);
-    opacity: 0;
-    transform: rotate(-45deg); }
-  to {
-    opacity: 1;
-    transform: rotate(0deg); } }
-
-@keyframes md-checkbox-indeterminate-checked-mixedmark {
-  from {
-    animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
-    opacity: 1;
-    transform: rotate(0deg); }
-  to {
-    opacity: 0;
-    transform: rotate(315deg); } }
-
-@keyframes md-checkbox-indeterminate-unchecked-mixedmark {
-  0% {
-    animation-timing-function: linear;
-    opacity: 1;
-    transform: scaleX(1); }
-  32.8%, 100% {
-    opacity: 0;
-    transform: scaleX(0); } }
-
-.md-checkbox-frame, .md-checkbox-background, .md-checkbox-checkmark {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0; }
-
-.md-checkbox-checkmark, .md-checkbox-mixedmark {
-  width: calc(100% - 4px); }
-
-.md-checkbox-frame, .md-checkbox-background {
-  border-radius: 2px;
-  box-sizing: border-box;
-  pointer-events: none; }
-
-md-checkbox {
-  cursor: pointer; }
-
-.md-checkbox-layout {
-  cursor: inherit;
-  align-items: baseline;
-  display: inline-flex; }
-
-.md-checkbox-inner-container {
-  display: inline-block;
-  height: 20px;
-  line-height: 0;
-  margin: auto;
-  margin-right: 8px;
-  order: 0;
-  position: relative;
-  vertical-align: middle;
-  white-space: nowrap;
-  width: 20px; }
-  [dir='rtl'] .md-checkbox-inner-container {
-    margin-left: 8px;
-    margin-right: auto; }
-
-.md-checkbox-layout .md-checkbox-label {
-  line-height: 24px; }
-
-.md-checkbox-frame {
-  background-color: transparent;
-  border: 2px solid;
-  transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1);
-  will-change: border-color; }
-
-.md-checkbox-background {
-  align-items: center;
-  display: inline-flex;
-  justify-content: center;
-  transition: background-color 90ms cubic-bezier(0, 0, 0.2, 0.1), opacity 90ms cubic-bezier(0, 0, 0.2, 0.1);
-  will-change: background-color, opacity; }
-
-.md-checkbox-checkmark {
-  width: 100%; }
-
-.md-checkbox-checkmark-path {
-  stroke-dashoffset: 22.91026;
-  stroke-dasharray: 22.91026;
-  stroke-width: 2.66667px; }
-
-.md-checkbox-mixedmark {
-  height: 2px;
-  opacity: 0;
-  transform: scaleX(0) rotate(0deg); }
-
-.md-checkbox-align-end .md-checkbox-inner-container {
-  order: 1;
-  margin-left: 8px;
-  margin-right: auto; }
-  [dir='rtl'] .md-checkbox-align-end .md-checkbox-inner-container {
-    margin-left: auto;
-    margin-right: 8px; }
-
-.md-checkbox-checked .md-checkbox-checkmark {
-  opacity: 1; }
-
-.md-checkbox-checked .md-checkbox-checkmark-path {
-  stroke-dashoffset: 0; }
-
-.md-checkbox-checked .md-checkbox-mixedmark {
-  transform: scaleX(1) rotate(-45deg); }
-
-.md-checkbox-indeterminate .md-checkbox-checkmark {
-  opacity: 0;
-  transform: rotate(45deg); }
-
-.md-checkbox-indeterminate .md-checkbox-checkmark-path {
-  stroke-dashoffset: 0; }
-
-.md-checkbox-indeterminate .md-checkbox-mixedmark {
-  opacity: 1;
-  transform: scaleX(1) rotate(0deg); }
-
-.md-checkbox-unchecked .md-checkbox-background {
-  background-color: transparent; }
-
-.md-checkbox-disabled {
-  cursor: default; }
-
-.md-checkbox-anim-unchecked-checked .md-checkbox-background {
-  animation: 180ms linear 0ms md-checkbox-fade-in-background; }
-
-.md-checkbox-anim-unchecked-checked .md-checkbox-checkmark-path {
-  animation: 180ms linear 0ms md-checkbox-unchecked-checked-checkmark-path; }
-
-.md-checkbox-anim-unchecked-indeterminate .md-checkbox-background {
-  animation: 180ms linear 0ms md-checkbox-fade-in-background; }
-
-.md-checkbox-anim-unchecked-indeterminate .md-checkbox-mixedmark {
-  animation: 90ms linear 0ms md-checkbox-unchecked-indeterminate-mixedmark; }
-
-.md-checkbox-anim-checked-unchecked .md-checkbox-background {
-  animation: 180ms linear 0ms md-checkbox-fade-out-background; }
-
-.md-checkbox-anim-checked-unchecked .md-checkbox-checkmark-path {
-  animation: 90ms linear 0ms md-checkbox-checked-unchecked-checkmark-path; }
-
-.md-checkbox-anim-checked-indeterminate .md-checkbox-checkmark {
-  animation: 90ms linear 0ms md-checkbox-checked-indeterminate-checkmark; }
-
-.md-checkbox-anim-checked-indeterminate .md-checkbox-mixedmark {
-  animation: 90ms linear 0ms md-checkbox-checked-indeterminate-mixedmark; }
-
-.md-checkbox-anim-indeterminate-checked .md-checkbox-checkmark {
-  animation: 500ms linear 0ms md-checkbox-indeterminate-checked-checkmark; }
-
-.md-checkbox-anim-indeterminate-checked .md-checkbox-mixedmark {
-  animation: 500ms linear 0ms md-checkbox-indeterminate-checked-mixedmark; }
-
-.md-checkbox-anim-indeterminate-unchecked .md-checkbox-background {
-  animation: 180ms linear 0ms md-checkbox-fade-out-background; }
-
-.md-checkbox-anim-indeterminate-unchecked .md-checkbox-mixedmark {
-  animation: 300ms linear 0ms md-checkbox-indeterminate-unchecked-mixedmark; }
-
-.md-checkbox-input {
-  bottom: 0;
-  left: 50%; }
-
-.md-ink-ripple {
-  border-radius: 50%;
-  opacity: 0;
-  height: 48px;
-  left: 50%;
-  overflow: hidden;
-  pointer-events: none;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  transition: opacity ease 280ms, background-color ease 280ms;
-  width: 48px; }
-
-.md-checkbox-focused .md-ink-ripple {
-  opacity: 1; }
-
-.md-checkbox-disabled .md-ink-ripple {
-  background-color: #000; }
-
-/*# sourceMappingURL=checkbox.css.map */