material_components_web-sass 0.1.1

data/vendor/assets/stylesheets/@material/drawer/_mixins.scss

@@ -0,0 +1,145 @@
+/**
+ * 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/theme/mixins";
+@import "@material/typography/mixins";
+
+/* All variables are local, so disable pattern checking. */
+/* stylelint-disable scss/dollar-variable-pattern */
+
+@mixin mdc-drawer-toolbar-spacer_() {
+  &__toolbar-spacer {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    flex-shrink: 0;
+    align-items: flex-center;
+    height: 56px;
+    padding: 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, .12);
+    box-sizing: border-box;
+
+    @include mdc-theme-dark(quote(#{&})) {
+      border-bottom: 1px solid rgba(255, 255, 255, .12);
+    }
+
+    /* TODO(sgomes): replace with global breakpoints when we have them */
+    @media (min-width: 600px) {
+      height: 64px;
+    }
+  }
+}
+
+@mixin mdc-drawer-header_() {
+  /* Use aspect ratio trick to maintain 16:9 aspect ratio on the header */
+  &__header {
+    position: relative;
+  }
+
+  &__header::before {
+    display: block;
+    padding-top: 9 / 16 * 100%;
+    content: "";
+  }
+
+  &__header-content {
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    align-items: flex-end;
+    padding: 16px;
+    box-sizing: border-box;
+  }
+}
+
+@mixin mdc-drawer-list_() {
+  .mdc-list-group,
+  .mdc-list {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .mdc-list-item {
+    position: relative;
+    padding: 0 16px;
+    outline: none;
+    color: inherit;
+    text-decoration: none;
+
+    @include mdc-typography(body2);
+  }
+
+  .mdc-list-item__start-detail {
+    color: rgba(0, 0, 0, .54);
+
+    @include mdc-theme-dark(#{&}) {
+      color: rgba(255, 255, 255, .54);
+    }
+  }
+
+  /* stylelint-disable selector-no-qualifying-type */
+  &--selected.mdc-list-item,
+  &--selected.mdc-list-item .mdc-list-item__start-detail {
+    @include mdc-theme-prop(color, primary);
+  }
+  /* stylelint-enable selector-no-qualifying-type */
+
+  /* TODO(sgomes): Revisit when we have interactive lists. */
+  .mdc-list-item::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transition: mdc-animation-exit(opacity, 120ms);
+    border-radius: inherit;
+    background: currentColor;
+    content: "";
+    opacity: 0;
+  }
+
+  .mdc-list-item:focus::before {
+    transition: mdc-animation-enter(opacity, 180ms);
+    opacity: .12;
+  }
+
+  .mdc-list-item:active::before {
+    /*
+      Slightly darker value for visual distinction.
+      This allows a full base that has distinct modes.
+      Progressive enhancement with ripples will provide complete button spec alignment.
+    */
+    transition: mdc-animation-enter(opacity, 180ms);
+    opacity: .18;
+  }
+
+  .mdc-list-item:active:focus::before {
+    transition-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
+  }
+}
+
+@mixin mdc-drawer-base_() {
+  @include mdc-drawer-toolbar-spacer_;
+  @include mdc-drawer-header_;
+  @include mdc-drawer-list_;
+}
+
+/* stylelint-enable scss/dollar-variable-pattern */

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

@@ -0,0 +1,18 @@
+/**
+ * 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 "./permanent/mdc-permanent-drawer";
+@import "./temporary/mdc-temporary-drawer";

data/vendor/assets/stylesheets/@material/drawer/permanent/mdc-permanent-drawer.scss

@@ -0,0 +1,54 @@
+/**
+ * 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 "../mixins";
+
+$mdc-permanent-drawer-width: 240px;
+
+.mdc-permanent-drawer {
+  @include mdc-drawer-base_;
+  @include mdc-theme-prop(background, background);
+  @include mdc-rtl-reflexive-box(border, right, 1px solid #e4e4e4);
+  @include mdc-rtl-reflexive-position(left, 0);
+
+  @include mdc-theme-dark {
+    background: #212121;
+
+    @include mdc-theme-prop(color, text-primary-on-dark);
+    @include mdc-rtl-reflexive-box(border, right, 1px solid rgba(white, .12));
+  }
+
+  display: inline-flex;
+  flex-direction: column;
+  width: $mdc-permanent-drawer-width;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  &--floating {
+    background: none;
+
+    @include mdc-rtl-reflexive-box(border, right, none);
+
+    @include mdc-theme-dark {
+      background: none;
+
+      @include mdc-rtl-reflexive-box(border, right, none);
+    }
+  }
+}

data/vendor/assets/stylesheets/@material/drawer/temporary/mdc-temporary-drawer.scss

@@ -0,0 +1,134 @@
+/**
+ * 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/elevation/mixins";
+@import "@material/rtl/mixins";
+@import "@material/theme/mixins";
+@import "../mixins";
+
+.mdc-temporary-drawer {
+  @include mdc-drawer-base_;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  box-sizing: border-box;
+  contain: strict;
+
+  /* Shaded background */
+  &::before {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .6);
+    content: "";
+    opacity: 0;
+    opacity: var(--mdc-temporary-drawer-opacity, 0);
+    will-change: opacity;
+    box-sizing: border-box;
+  }
+
+  &__drawer {
+    @include mdc-theme-prop(background, background);
+    @include mdc-elevation(16);
+    @include mdc-rtl-reflexive-position(left, 0);
+
+    @include mdc-theme-dark(".mdc-temporary-drawer") {
+      background: #303030;
+
+      @include mdc-theme-prop(color, text-primary-on-dark);
+    }
+
+    display: flex;
+    position: absolute;
+    flex-direction: column;
+    width: calc(100% - 56px);
+    max-width: 280px;
+    height: 100%;
+    transform: translateX(calc(-100% - 20px));
+    will-change: transform;
+    box-sizing: border-box;
+    overflow: hidden;
+    touch-action: none;
+
+    @include mdc-rtl(".mdc-temporary-drawer") {
+      transform: translateX(calc(100% + 20px));
+    }
+
+    /* TODO(sgomes): replace with global breakpoints when we have them */
+    @media (min-width: 600px) {
+      width: calc(100% - 64px);
+      max-width: 320px;
+    }
+  }
+
+  &__content {
+    flex-grow: 1;
+    margin: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    box-sizing: border-box;
+    -webkit-overflow-scrolling: touch;
+    touch-action: pan-y;
+  }
+
+  &__footer {
+    @include mdc-elevation(2);
+    flex-shrink: 0;
+  }
+
+  &--animating {
+    &::before {
+      transition: mdc-animation-enter(opacity, .3s);
+    }
+
+    &.mdc-temporary-drawer--open .mdc-temporary-drawer__drawer {
+      transition: mdc-animation-enter(transform, .33s);
+    }
+
+    .mdc-temporary-drawer__drawer {
+      transition: mdc-animation-enter(transform, .13s);
+    }
+  }
+
+  &--open {
+    pointer-events: auto;
+
+    &::before {
+      opacity: 1;
+      opacity: var(--mdc-temporary-drawer-opacity, 1);
+    }
+
+    .mdc-temporary-drawer__drawer {
+      transform: none;
+    }
+
+    // Specificity fix to ensure that mdc-drawer is not translated off-screen within an RTL context
+    @include mdc-rtl {
+      .mdc-temporary-drawer__drawer {
+        transform: none;
+      }
+    }
+  }
+}

data/vendor/assets/stylesheets/@material/elevation/_mixins.scss

@@ -0,0 +1,68 @@
+/**
+ * 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 "./variables";
+
+/**
+ * Applies the correct css rules to an element to give it the elevation specified by $z-value.
+ * The $z-value must be between 0 and 24.
+ */
+@mixin mdc-elevation($z-value) {
+  @if type-of($z-value) != number or not unitless($z-value) {
+    @error "$z-value must be a unitless number";
+  }
+
+  @if $z-value < 0 or $z-value > 24 {
+    @error "$z-value must be between 0 and 24";
+  }
+
+  #{$mdc-elevation-property}:
+    #{map-get($mdc-elevation-umbra-map, $z-value)} $mdc-elevation-umbra-color,
+    // #{map-get($mdc-elevation-penumbra-map, $z-value)} $mdc-elevation-penumbra-color,
+    #{map-get($mdc-elevation-ambient-map, $z-value)} $mdc-elevation-ambient-color;
+}
+
+/**
+ * Returns a string that can be used as the value for a `transition` property for elevation.
+ * Calling this function directly is useful in situations where a component needs to transition
+ * more than one property.
+ *
+ * ```scss
+ * .foo {
+ *   transition: mdc-elevation-transition-rule(), opacity 100ms ease;
+ *   will-change: $mdc-elevation-property, opacity;
+ * }
+ * ```
+ */
+@function mdc-elevation-transition-rule(
+  $duration: $mdc-elevation-transition-duration,
+  $easing: $mdc-elevation-transition-timing-function) {
+  @return #{$mdc-elevation-property} #{$duration} #{$easing};
+}
+
+/**
+ * Applies the correct css rules needed to have an element transition between elevations.
+ * This mixin should be applied to elements whose elevation values will change depending on their
+ * context (e.g. when active or disabled).
+ */
+// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
+// be used in the same way by clients.
+@mixin mdc-elevation-transition(
+  $duration: $mdc-elevation-transition-duration,
+  $easing: $mdc-elevation-transition-timing-function) {
+  transition: mdc-elevation-transition-rule($duration, $easing);
+  will-change: $mdc-elevation-property;
+}

data/vendor/assets/stylesheets/@material/elevation/_variables.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/variables";
+
+$mdc-elevation-umbra-color: rgba(black, .2);
+$mdc-elevation-penumbra-color: rgba(black, .14);
+$mdc-elevation-ambient-color: rgba(black, .12);
+
+$mdc-elevation-umbra-map: (
+  0: "0px 0px 0px 0px",
+  1: "0px 2px 1px -1px",
+  2: "0px 3px 1px -2px",
+  3: "0px 3px 3px -2px",
+  4: "0px 2px 4px -1px",
+  5: "0px 3px 5px -1px",
+  6: "0px 3px 5px -1px",
+  7: "0px 4px 5px -2px",
+  8: "0px 5px 5px -3px",
+  9: "0px 5px 6px -3px",
+  10: "0px 6px 6px -3px",
+  11: "0px 6px 7px -4px",
+  12: "0px 7px 8px -4px",
+  13: "0px 7px 8px -4px",
+  14: "0px 7px 9px -4px",
+  15: "0px 8px 9px -5px",
+  16: "0px 8px 10px -5px",
+  17: "0px 8px 11px -5px",
+  18: "0px 9px 11px -5px",
+  19: "0px 9px 12px -6px",
+  20: "0px 10px 13px -6px",
+  21: "0px 10px 13px -6px",
+  22: "0px 10px 14px -6px",
+  23: "0px 11px 14px -7px",
+  24: "0px 11px 15px -7px"
+);
+
+$mdc-elevation-penumbra-map: (
+  0: "0px 0px 0px 0px",
+  1: "0px 1px 1px 0px",
+  2: "0px 2px 2px 0px",
+  3: "0px 3px 4px 0px",
+  4: "0px 4px 5px 0px",
+  5: "0px 5px 8px 0px",
+  6: "0px 6px 10px 0px",
+  7: "0px 7px 10px 1px",
+  8: "0px 8px 10px 1px",
+  9: "0px 9px 12px 1px",
+  10: "0px 10px 14px 1px",
+  11: "0px 11px 15px 1px",
+  12: "0px 12px 17px 2px",
+  13: "0px 13px 19px 2px",
+  14: "0px 14px 21px 2px",
+  15: "0px 15px 22px 2px",
+  16: "0px 16px 24px 2px",
+  17: "0px 17px 26px 2px",
+  18: "0px 18px 28px 2px",
+  19: "0px 19px 29px 2px",
+  20: "0px 20px 31px 3px",
+  21: "0px 21px 33px 3px",
+  22: "0px 22px 35px 3px",
+  23: "0px 23px 36px 3px",
+  24: "0px 24px 38px 3px"
+);
+
+$mdc-elevation-ambient-map: (
+  0: "0px 0px 0px 0px",
+  1: "0px 1px 3px 0px",
+  2: "0px 1px 5px 0px",
+  3: "0px 1px 8px 0px",
+  4: "0px 1px 10px 0px",
+  5: "0px 1px 14px 0px",
+  6: "0px 1px 18px 0px",
+  7: "0px 2px 16px 1px",
+  8: "0px 3px 14px 2px",
+  9: "0px 3px 16px 2px",
+  10: "0px 4px 18px 3px",
+  11: "0px 4px 20px 3px",
+  12: "0px 5px 22px 4px",
+  13: "0px 5px 24px 4px",
+  14: "0px 5px 26px 4px",
+  15: "0px 6px 28px 5px",
+  16: "0px 6px 30px 5px",
+  17: "0px 6px 32px 5px",
+  18: "0px 7px 34px 6px",
+  19: "0px 7px 36px 6px",
+  20: "0px 8px 38px 7px",
+  21: "0px 8px 40px 7px",
+  22: "0px 8px 42px 7px",
+  23: "0px 9px 44px 8px",
+  24: "0px 9px 46px 8px"
+);
+
+/**
+ * The css property used for elevation. In most cases this should not be changed. It is exposed
+ * as a variable for abstraction / easy use when needing to reference the property directly, for
+ * example in a `will-change` rule.
+ */
+$mdc-elevation-property: box-shadow !default;
+
+/**
+ * The default duration value for elevation transitions.
+ */
+$mdc-elevation-transition-duration: 280ms !default;
+
+/**
+ * The default easing value for elevation transitions.
+ */
+$mdc-elevation-transition-timing-function: $mdc-animation-fast-out-slow-in-timing-function !default;