material_components_web-sass 0.1.1

data/vendor/assets/stylesheets/@material/elevation/mdc-elevation.scss

@@ -0,0 +1,27 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "./mixins";
+
+@for $z-value from 0 through 24 {
+  .mdc-elevation--z#{$z-value} {
+    @include mdc-elevation($z-value);
+  }
+}
+
+.mdc-elevation-transition {
+  @include mdc-elevation-transition;
+}

data/vendor/assets/stylesheets/@material/fab/mdc-fab.scss

@@ -0,0 +1,122 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "@material/animation/functions";
+@import "@material/animation/variables";
+@import "@material/elevation/mixins";
+@import "@material/theme/mixins";
+
+/* postcss-bem-linter: define fab */
+.mdc-fab {
+  display: inline-flex;
+  position: relative;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  padding: 0;
+  transition: box-shadow 280ms $mdc-animation-fast-out-slow-in-timing-function;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  fill: currentColor;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  @include mdc-theme-prop(background-color, accent);
+  @include mdc-theme-prop(color, text-primary-on-accent);
+  @include mdc-elevation(6);
+
+  &--mini {
+    width: 40px;
+    height: 40px;
+  }
+
+  &--plain {
+    background-color: white;
+
+    @include mdc-theme-prop(color, text-primary-on-light);
+  }
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: mdc-animation-exit(opacity, 120ms);
+    border-radius: inherit;
+    background: black;
+    content: "";
+    opacity: 0;
+  }
+
+  &:focus::before {
+    transition: mdc-animation-enter(opacity, 120ms);
+    opacity: .12;
+  }
+
+  &:active::before {
+    transition: mdc-animation-enter(opacity, 120ms);
+    opacity: .18;
+  }
+
+  &:active:focus::before {
+    transition-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
+  }
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+
+  &:active {
+    @include mdc-elevation(12);
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  /*
+    This allows for using SVGs within them to align properly in all browsers.
+    Can remove once: https://bugzilla.mozilla.org/show_bug.cgi?id=1294515 is resolved.
+  */
+
+  /* stylelint-disable selector-no-type */
+
+  /* postcss-bem-linter: ignore */
+  > svg {
+    width: 100%;
+  }
+
+  fieldset:disabled &,
+  &:disabled {
+    background-color: rgba(0, 0, 0, .12);
+    color: rgba(0, 0, 0, .26);
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+/* postcss-bem-linter: end */

data/vendor/assets/stylesheets/@material/fonts/material-icons.scss

@@ -0,0 +1,36 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(font-path('material-icons/MaterialIcons-Regular.eot')); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(font-path('material-icons/MaterialIcons-Regular.woff2')) format('woff2'),
+       url(font-path('material-icons/MaterialIcons-Regular.woff')) format('woff'),
+       url(font-path('material-icons/MaterialIcons-Regular.ttf')) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}

data/vendor/assets/stylesheets/@material/fonts/roboto.scss

@@ -0,0 +1,45 @@
+@font-face {
+  font-family: "Roboto";
+  src: local(Roboto Thin),
+       url(font-path('roboto/Roboto-Thin.woff2')) format("woff2"),
+       url(font-path('roboto/Roboto-Thin.woff')) format("woff"),
+       url(font-path('roboto/Roboto-Thin.ttf')) format("truetype");
+
+  font-weight: 100;
+}
+@font-face {
+  font-family: "Roboto";
+  src: local(Roboto Light),
+       url(font-path('roboto/Roboto-Light.woff2')) format("woff2"),
+       url(font-path('roboto/Roboto-Light.woff')) format("woff"),
+       url(font-path('roboto/Roboto-Light.ttf')) format("truetype");
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local(Roboto),
+       local(Roboto Regular),
+       url(font-path('roboto/Roboto-Regular.woff2')) format("woff2"),
+       url(font-path('roboto/Roboto-Regular.woff')) format("woff"),
+       url(font-path('roboto/Roboto-Regular.ttf')) format("truetype");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local(Roboto Medium),
+       url(font-path('roboto/Roboto-Medium.woff2')) format("woff2"),
+       url(font-path('roboto/Roboto-Medium.woff')) format("woff"),
+       url(font-path('roboto/Roboto-Medium.ttf')) format("truetype");
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: local(Roboto Bold),
+       url(font-path('roboto/Roboto-Bold.woff2')) format("woff2"),
+       url(font-path('roboto/Roboto-Bold.woff')) format("woff"),
+       url(font-path('roboto/Roboto-Bold.ttf')) format("truetype");
+  font-weight: 700;
+}

data/vendor/assets/stylesheets/@material/form-field/mdc-form-field.scss

@@ -0,0 +1,64 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "@material/rtl/mixins";
+@import "@material/theme/mixins";
+@import "@material/typography/mixins";
+
+$mdc-form-field-item-spacing: 4px;
+
+/* stylelint-disable selector-no-type */
+.mdc-form-field {
+  @include mdc-typography(body1);
+  @include mdc-theme-prop(color, text-primary-on-light);
+
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+
+  @include mdc-theme-dark {
+    @include mdc-theme-prop(color, text-primary-on-dark);
+  }
+
+  > label {
+    order: 0;
+    margin-right: auto;
+    margin-left: $mdc-form-field-item-spacing;
+  }
+
+  @include mdc-rtl {
+    > label {
+      margin-right: $mdc-form-field-item-spacing;
+      margin-left: auto;
+    }
+  }
+}
+
+.mdc-form-field--align-end {
+  > label {
+    order: -1;
+    margin-right: $mdc-form-field-item-spacing;
+    margin-left: auto;
+  }
+
+  @include mdc-rtl {
+    > label {
+      margin-right: auto;
+      margin-left: $mdc-form-field-item-spacing;
+    }
+  }
+}
+/* stylelint-enable selector-no-type */

data/vendor/assets/stylesheets/@material/icon-toggle/mdc-icon-toggle.scss

@@ -0,0 +1,133 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** postcss-bem-linter: define icon-toggle */
+
+@import "@material/animation/functions";
+@import "@material/ripple/mixins";
+@import "@material/theme/mixins";
+
+.mdc-icon-toggle {
+  @include mdc-theme-prop(color, text-secondary-on-light);
+
+  display: flex;
+  position: relative;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  padding: 12px;
+  outline: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  user-select: none;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: scale(0, 0);
+    transition: mdc-animation-exit(opacity, 80ms), mdc-animation-exit(transform, 80ms);
+    border-radius: 50%;
+    background-color: currentColor;
+    content: "";
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:focus::after {
+    transform: scale(1.3, 1.3);
+    transition: mdc-animation-enter(opacity, 80ms), mdc-animation-enter(transform, 80ms);
+    opacity: .12;
+  }
+
+  @include mdc-theme-dark {
+    @include mdc-theme-prop(color, text-primary-on-dark);
+
+    &:focus::after {
+      opacity: .3;
+    }
+  }
+}
+
+.mdc-icon-toggle--primary {
+  @include mdc-theme-prop(color, primary);
+}
+
+.mdc-icon-toggle--accent {
+  @include mdc-theme-prop(color, accent);
+}
+
+.mdc-icon-toggle--primary,
+.mdc-icon-toggle--accent {
+  &:focus::after {
+    opacity: .26;
+  }
+}
+
+.mdc-icon-toggle--disabled {
+  @include mdc-theme-prop(color, text-disabled-on-light);
+
+  pointer-events: none;
+
+  @include mdc-theme-dark(".mdc-icon-toggle", true) {
+    @include mdc-theme-prop(color, text-disabled-on-dark);
+  }
+}
+
+/** postcss-bem-linter: end */
+
+.mdc-icon-toggle.mdc-ripple-upgraded {
+  @include mdc-ripple-base;
+  // NOTE: The spec denotes specific opacity values to use for different styles of icon buttons,
+  // either "light", "dark", or "color". Because ripples are made up of two distinct elements,
+  // we need to use an opacity value such that when two elements of the same color and opacity are
+  // layered on top of one another, they create the opacity specified in the spec.
+  // This is done by using the painter's compositing algorithm:
+  //
+  // alpha[desired] = alpha[a] + alpha[b](1 - alpha[a]).
+  //
+  // Because both alpha values are the same this reduces to:
+  //
+  // alpha[desired] = alpha[a] + alpha[a](1 - alpha[a]).
+  //
+  // We simply solve this quadratic equation for the nonnegative root between [0, 1].
+  // E.g. for black 12% opacity:
+  // https://www.wolframalpha.com/input/?i=x+%2B+x(1+-+x)+%3D+.12,+x+%3C%3D+1,+x+%3E%3D+0
+  @include mdc-ripple-bg((pseudo: "::before", opacity: .062));
+  @include mdc-ripple-fg((pseudo: "::after", opacity: .062));
+
+  @include mdc-theme-dark(".mdc-icon-toggle", true) {
+    @include mdc-ripple-bg((pseudo: "::before", base-color: white, opacity: .16));
+    @include mdc-ripple-fg((pseudo: "::after", base-color: white, opacity: .16));
+  }
+
+  // For some reason, GPU layer promotion makes ripples look terrible on Chrome
+  will-change: initial;
+}
+
+.mdc-icon-toggle--primary.mdc-ripple-upgraded {
+  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
+  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
+}
+
+.mdc-icon-toggle--accent.mdc-ripple-upgraded {
+  @include mdc-ripple-bg((pseudo: "::before", theme-style: accent, opacity: .14));
+  @include mdc-ripple-fg((pseudo: "::after", theme-style: accent, opacity: .14));
+}

data/vendor/assets/stylesheets/@material/list/mdc-list.scss

@@ -0,0 +1,207 @@
+/**
+ * Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "@material/rtl/mixins";
+@import "@material/theme/mixins";
+@import "@material/typography/mixins";
+@import "@material/typography/variables";
+
+/**
+ * Sets the width and height of a detail element to the specified dimension.
+ */
+@mixin mdc-list-detail-size_($size) {
+  width: $size;
+  height: $size;
+}
+
+/**
+ * Sets the width and height of the start detail element, as well as calculates the margins for
+ * the start detail element such that the text is always offset by 72px, which is defined within
+ * the spec.
+ */
+@mixin mdc-list-start-detail-size_($size) {
+  /* stylelint-disable scss/dollar-variable-pattern */
+
+  $text-offset: 72px;
+  $side-padding: 16px;
+  $margin-value: $text-offset - $side-padding - $size;
+
+  @include mdc-list-detail-size_($size);
+  @include mdc-rtl-reflexive-box(margin, right, $margin-value, ".mdc-list-item");
+
+  /* stylelint-enable scss/dollar-variable-pattern */
+}
+
+/* postcss-bem-linter: define list */
+
+.mdc-list {
+  @include mdc-typography(subheading2);
+  @include mdc-theme-prop(color, text-primary-on-background);
+
+  @include mdc-theme-dark {
+    @include mdc-theme-prop(color, text-primary-on-dark);
+  }
+
+  margin: 0;
+  padding: 8px 16px 0;
+
+  /* According to the mocks and stickersheet, the line-height is adjusted to 24px for text content,
+   * same as for subheading1. */
+  line-height: map-get(map-get($mdc-typography-styles, subheading1), line-height);
+  list-style-type: none;
+}
+
+.mdc-list--dense {
+  padding-top: 4px;
+  font-size: .812rem;
+}
+
+/* postcss-bem-linter: end */
+
+/* postcss-bem-linter: define list-item */
+
+.mdc-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 48px;
+
+  &__start-detail {
+    @include mdc-list-start-detail-size_(24px);
+  }
+
+  &__end-detail {
+    @include mdc-list-detail-size_(24px);
+    @include mdc-rtl-reflexive-property(margin, auto, 16px, ".mdc-list-item");
+  }
+
+  &__text {
+    display: inline-flex;
+    flex-direction: column;
+
+    &__secondary {
+      @include mdc-typography(body1);
+      @include mdc-theme-prop(color, text-secondary-on-background);
+
+      @include mdc-theme-dark {
+        @include mdc-theme-prop(color, text-secondary-on-dark);
+      }
+
+      /* Match the font size to the primary text when dense */
+      /* stylelint-disable plugin/selector-bem-pattern */
+      .mdc-list--dense & {
+        font-size: inherit;
+      }
+      /* stylelint-enable plugin/selector-bem-pattern */
+    }
+  }
+
+  /* stylelint-disable plugin/selector-bem-pattern */
+  .mdc-list--dense & {
+    height: 40px;
+
+    &__start-detail {
+      @include mdc-list-start-detail-size_(20px);
+    }
+
+    &__end-detail {
+      @include mdc-list-detail-size_(20px);
+    }
+  }
+
+  .mdc-list--avatar-list & {
+    height: 56px;
+
+    &__start-detail {
+      @include mdc-list-start-detail-size_(40px);
+
+      border-radius: 50%;
+    }
+  }
+
+  .mdc-list--avatar-list.mdc-list--dense .mdc-list__item {
+    height: 48px;
+
+    &__start-detail {
+      @include mdc-list-start-detail-size_(36px);
+    }
+  }
+
+  .mdc-list--two-line & {
+    height: 72px;
+  }
+
+  .mdc-list--two-line.mdc-list--dense & {
+    height: 60px;
+  }
+  /* stylelint-enable plugin/selector-bem-pattern */
+}
+
+/* postcss-bem-linter: end */
+
+/* postcss-bem-linter: define list-divider */
+
+.mdc-list-divider {
+  height: 0;
+  margin: 0;
+  border: none;
+  border-bottom: 1px solid rgba(0, 0, 0, .12);
+
+  @include mdc-theme-dark(".mdc-list") {
+    border-bottom-color: rgba(255, 255, 255, .2);
+  }
+}
+
+.mdc-list-divider--inset {
+  $mdc-list-divider-inset-amt: /* text offset */ 72px - /* padding offset */ 16px;
+
+  @include mdc-rtl-reflexive-box(margin, left, $mdc-list-divider-inset-amt, ".mdc-list-group");
+
+  width: calc(100% - #{$mdc-list-divider-inset-amt});
+}
+
+/* postcss-bem-linter: end */
+
+/* postcss-bem-linter: define list-group */
+
+.mdc-list-group {
+  padding: 0 16px;
+
+  &__subheader {
+    $mdc-list-subheader-virtual-height: 3rem;
+    $mdc-list-subheader-leading: map-get(map-get($mdc-typography-styles, body2), line-height);
+    $mdc-list-subheader-margin:
+      ($mdc-list-subheader-virtual-height - $mdc-list-subheader-leading) / 2;
+
+    @include mdc-typography(body2);
+    @include mdc-theme-prop(color, text-primary-on-background);
+
+    @include mdc-theme-dark {
+      @include mdc-theme-prop(color, text-primary-on-dark);
+    }
+
+    margin: $mdc-list-subheader-margin 0;
+  }
+
+  /* Reset padding on mdc-list since it's already accounted for by the list group. */
+  /* stylelint-disable plugin/selector-bem-pattern */
+  .mdc-list {
+    padding: 0;
+  }
+  /* stylelint-enable plugin/selector-bem-pattern */
+}
+
+/* postcss-bem-linter: end */