material_components_web-sass 0.3.0 → 0.4.0

data/vendor/assets/stylesheets/@material/layout-grid/mdc-layout-grid.scss

@@ -0,0 +1,61 @@
+// Copyright 2017 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";
+@import "./mixins";
+
+// postcss-bem-linter: define layout-grid
+.mdc-layout-grid {
+  @include mdc-layout-grid($mdc-layout-grid-default-margin, $mdc-layout-grid-default-gutter);
+}
+
+.mdc-layout-grid__cell {
+  @include mdc-layout-grid-cell($mdc-layout-grid-default-gutter);
+
+  @each $size in map-keys($mdc-layout-grid-columns) {
+    @include mdc-layout-grid-media-query_($size) {
+      @for $span from 1 through map-get($mdc-layout-grid-columns, desktop) {
+        // Span classes.
+        // stylelint-disable max-nesting-depth
+        @at-root .mdc-layout-grid__cell--span-#{$span},
+          .mdc-layout-grid__cell--span-#{$span}-#{$size}.mdc-layout-grid__cell--span-#{$span}-#{$size} {
+          @include mdc-layout-grid-cell-span_($size, $span, $mdc-layout-grid-default-gutter);
+        }
+        // stylelint-enable max-nesting-depth
+      }
+    }
+  }
+
+  // Order override classes.
+  @for $i from 1 through map-get($mdc-layout-grid-columns, desktop) {
+    &--order-#{$i} {
+      @include mdc-layout-grid-cell-order($i);
+    }
+  }
+
+  // Alignment classes.
+  &--align-top {
+    @include mdc-layout-grid-cell-align(top);
+  }
+
+  &--align-middle {
+    @include mdc-layout-grid-cell-align(middle);
+  }
+
+  &--align-bottom {
+    @include mdc-layout-grid-cell-align(bottom);
+  }
+}
+
+// postcss-bem-linter: end

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

@@ -1,18 +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.
- */
+// 
+// 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/ripple/mixins";
@@ -31,7 +31,7 @@ $mdc-radio-transition-duration: 120ms;
   @return mdc-animation-exit($name, $mdc-radio-transition-duration);
 }
 
-/* postcss-bem-linter: define radio */
+// postcss-bem-linter: define radio
 .mdc-radio {
   display: inline-block;
   position: relative;
@@ -185,7 +185,7 @@ fieldset:disabled .mdc-radio__native-control,
   }
 }
 
-/* postcss-bem-linter: end */
+// postcss-bem-linter: end
 
 .mdc-radio.mdc-ripple-upgraded {
   @include mdc-ripple-base;

data/vendor/assets/stylesheets/@material/ripple/_keyframes.scss

@@ -16,16 +16,16 @@
 
 /** MDC Ripple keyframes are split into their own file so that _mixins.scss can rely on them. */
 
-@import "./variables";
+@import "@material/animation/variables";
 
 @keyframes mdc-ripple-fg-radius-in {
   from {
-    transform: scale(0);
-    animation-timing-function: $mdc-ripple-easing-fn;
+    transform: translate(var(--mdc-ripple-fg-translate-start)) scale(1);
+    animation-timing-function: $mdc-animation-fast-out-slow-in-timing-function;
   }
 
   to {
-    transform: scale(1.5);
+    transform: translate(var(--mdc-ripple-fg-translate-end)) scale(var(--mdc-ripple-fg-scale));
   }
 }
 
@@ -56,6 +56,6 @@
   }
 
   to {
-    transform: scale(1.01);
+    transform: scale(var(--mdc-ripple-fg-scale));
   }
 }

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

@@ -1,22 +1,21 @@
-/**
- * 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.
- */
-
+//
+// 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";
 @import "@material/theme/variables";
 @import "./keyframes";
-@import "./variables";
 
 @function mdc-ripple-default-config_() {
   @return (
@@ -50,7 +49,7 @@
   $opacity: map-get($config, opacity);
   $theme-style: map-get($config, theme-style);
 
-  /* stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after */
+  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
   @if ($theme-style) {
     $theme-value: map-get($mdc-theme-property-values, $theme-style);
     $css-var: var(--mdc-theme-#{$theme-style}, $theme-value);
@@ -66,7 +65,7 @@
   } @else {
     background-color: rgba($base-color, $opacity);
   }
-  /* stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after */
+  // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
 }
 
 @mixin mdc-ripple-bg-base_($config) {
@@ -79,7 +78,7 @@
   left: calc(50% - #{$radius});
   width: $radius * 2;
   height: $radius * 2;
-  transform: scale(1);
+  transform: scale(var(--mdc-ripple-fg-scale));
   transition: opacity 200ms linear;
   border-radius: 50%;
   opacity: 0;
@@ -90,7 +89,7 @@
   $config: map-merge(mdc-ripple-default-config_(), $config);
   $pseudo: map-get($config, pseudo);
 
-  /* stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after */
+  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
   @if ($pseudo) {
     &#{$pseudo} {
       @include mdc-ripple-bg-base_($config);
@@ -100,7 +99,7 @@
   } @else {
     @include mdc-ripple-bg-base_($config);
   }
-  /* stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after */
+  // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
 
   &.mdc-ripple-upgraded--background-active#{$pseudo} {
     opacity: .99999;
@@ -130,6 +129,8 @@
   @include mdc-ripple-color_($config);
 
   position: absolute;
+  top: 0;
+  left: 0;
   width: var(--mdc-ripple-fg-size);
   height: var(--mdc-ripple-fg-size);
   transform: scale(0);
@@ -143,7 +144,7 @@
   $config: map-merge(mdc-ripple-default-config_(), $config);
   $pseudo: map-get($config, pseudo);
 
-  /* stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after */
+  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
   @if ($pseudo) {
     &#{$pseudo} {
       @include mdc-ripple-fg-base_($config);
@@ -153,27 +154,25 @@
   } @else {
     @include mdc-ripple-fg-base_($config);
   }
-  /* stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after */
+  // stylelint-enable at-rule-empty-line-before, block-closing-brace-newline-after
 
   &:not(.mdc-ripple-upgraded--unbounded)#{$pseudo} {
-    top: calc(var(--mdc-ripple-top) - var(--mdc-ripple-fg-size) / 2);
-    left: calc(var(--mdc-ripple-left) - var(--mdc-ripple-fg-size) / 2);
     transform-origin: center center;
   }
 
   &.mdc-ripple-upgraded--unbounded#{$pseudo} {
     top: var(--mdc-ripple-top);
     left: var(--mdc-ripple-left);
-    transform-origin: var(--mdc-ripple-xfo-x) var(--mdc-ripple-xfo-y);
+    transform-origin: center center;
   }
 
   &.mdc-ripple-upgraded--foreground-bounded-active-fill#{$pseudo} {
     animation-fill-mode: forwards;
-    animation: 800ms mdc-ripple-fg-radius-in, 400ms mdc-ripple-fg-opacity-out;
+    animation: 300ms mdc-ripple-fg-radius-in, 400ms mdc-ripple-fg-opacity-out;
   }
 
   &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-activation#{$pseudo} {
-    transform: scale(1);
+    transform: scale(var(--mdc-ripple-fg-scale));
     transition:
       opacity 110ms linear,
       transform var(--mdc-ripple-fg-unbounded-transform-duration) linear 80ms;
@@ -183,6 +182,6 @@
   &.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded--foreground-unbounded-deactivation#{$pseudo} {
     animation:
       mdc-ripple-fg-unbounded-opacity-deactivate var(--mdc-ripple-fg-unbounded-opacity-duration) linear,
-      mdc-ripple-fg-unbounded-transform-deactivate var(--mdc-ripple-fg-unbounded-transform-duration) $mdc-ripple-easing-fn;
+      mdc-ripple-fg-unbounded-transform-deactivate var(--mdc-ripple-fg-unbounded-transform-duration) $mdc-animation-fast-out-slow-in-timing-function;
   }
 }

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

@@ -1,24 +1,24 @@
-/**
- * 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.
- */
+//
+// 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/theme/mixins";
 @import "./mixins";
 
-/* postcss-bem-linter: define ripple-surface */
+// postcss-bem-linter: define ripple-surface
 
 .mdc-ripple-surface {
   position: relative;
@@ -77,4 +77,4 @@
   }
 }
 
-/* postcss-bem-linter: end */
+// postcss-bem-linter: end

data/vendor/assets/stylesheets/@material/switch/_mixins.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.
+// 
+
+@function mdc-switch-transition($property, $timing-function, $duration: $mdc-switch-transition-duration) {
+  @return $property $duration $timing-function;
+}

data/vendor/assets/stylesheets/@material/switch/_variables.scss

@@ -0,0 +1,33 @@
+// 
+// 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.
+// 
+
+$mdc-switch-track-width: 34px;
+$mdc-switch-track-height: 14px;
+$mdc-switch-knob-diameter: 20px;
+$mdc-switch-focus-ring-diameter: 48px;
+$mdc-switch-knob-active-margin: $mdc-switch-track-width - $mdc-switch-knob-diameter;
+
+$mdc-switch-unchecked-track-color: #000;
+$mdc-switch-unchecked-knob-color: #fafafa;
+$mdc-switch-unchecked-focus-ring-color: #9e9e9e;
+$mdc-switch-unchecked-knob-color-dark: #bdbdbd;
+$mdc-switch-unchecked-track-color-dark: #fff;
+$mdc-switch-unchecked-focus-ring-color-dark: #f1f1f1;
+$mdc-switch-disabled-knob-color: #bdbdbd;
+$mdc-switch-disabled-knob-color-dark: #424242;
+
+$mdc-switch-transition-duration: 175ms;
+$mdc-switch-transition-curve: cubic-bezier(.4, 0, .2, 1);

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

@@ -0,0 +1,194 @@
+// 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";
+@import "./mixins";
+@import "./variables";
+
+// postcss-bem-linter: define switch
+.mdc-switch {
+  display: inline-block;
+  position: relative;
+
+  &__native-control {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $mdc-switch-track-width;
+    height: $mdc-switch-track-height;
+    cursor: pointer;
+    opacity: 0;
+    z-index: 2;
+  }
+
+  &__background {
+    display: block;
+    position: relative;
+    width: $mdc-switch-track-width;
+    height: $mdc-switch-track-height;
+    border-radius: 7px;
+    outline: none;
+    background-color: transparent;
+    cursor: pointer;
+    user-select: none;
+
+    @include mdc-theme-dark(".mdc-checkbox") {
+      background-color: transparent;
+    }
+
+    &::before {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transition:
+        mdc-checkbox-transition(opacity, $mdc-switch-transition-curve),
+        mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+      border-radius: 7px;
+      background-color: $mdc-switch-unchecked-track-color;
+      content: "";
+      opacity: .38;
+
+      @include mdc-theme-dark(".mdc-checkbox") {
+        background-color: $mdc-switch-unchecked-track-color-dark;
+        opacity: .3;
+      }
+
+    }
+
+    // postcss-bem-linter: ignore
+    .mdc-switch__knob {
+      display: block;
+      position: absolute;
+      top: -3px;
+      left: 0;
+      width: $mdc-switch-knob-diameter;
+      height: $mdc-switch-knob-diameter;
+      transform: translateX(0);
+      transition:
+        mdc-checkbox-transition(transform, $mdc-switch-transition-curve),
+        mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+      border-radius: $mdc-switch-knob-diameter / 2;
+      background-color: $mdc-switch-unchecked-knob-color;
+
+      @include mdc-theme-dark(".mdc-checkbox") {
+        background-color: $mdc-switch-unchecked-knob-color-dark;
+      }
+
+      @include mdc-elevation(2);
+
+      z-index: 1;
+
+      // postcss-bem-linter: ignore
+      &::before {
+        position: absolute;
+        top: -14px;
+        left: -14px;
+        width: $mdc-switch-focus-ring-diameter;
+        height: $mdc-switch-focus-ring-diameter;
+        transform: scale(0);
+        transition:
+          mdc-checkbox-transition(transform, $mdc-switch-transition-curve),
+          mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+        border-radius: $mdc-switch-focus-ring-diameter / 2;
+        background-color: transparent;
+        content: "";
+        opacity: .2;
+      }
+    }
+  }
+}
+
+.mdc-switch__native-control:focus ~ .mdc-switch__background {
+
+  .mdc-switch__knob {
+    &::before {
+      position: absolute;
+      width: $mdc-switch-focus-ring-diameter;
+      height: $mdc-switch-focus-ring-diameter;
+      transform: scale(1);
+      transition:
+        mdc-checkbox-transition(transform, $mdc-switch-transition-curve),
+        mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+      border-radius: $mdc-switch-focus-ring-diameter / 2;
+      background-color: $mdc-switch-unchecked-focus-ring-color;
+
+      @include mdc-theme-dark(".mdc-checkbox") {
+        background-color: $mdc-switch-unchecked-focus-ring-color-dark;
+        opacity: .14;
+      }
+
+    }
+  }
+}
+
+.mdc-switch__native-control:checked ~ .mdc-switch__background {
+
+  &::before {
+    @include mdc-theme-prop(background-color, primary);
+    opacity: .5;
+  }
+
+  .mdc-switch__knob {
+    transform: translateX($mdc-switch-track-width - $mdc-switch-knob-diameter);
+    transition:
+      mdc-checkbox-transition(transform, $mdc-switch-transition-curve),
+      mdc-checkbox-transition(background-color, $mdc-switch-transition-curve);
+
+    @include mdc-theme-prop(background-color, primary);
+
+    &::before {
+      @include mdc-theme-prop(background-color, primary);
+
+      @include mdc-theme-dark(".mdc-checkbox") {
+        @include mdc-theme-prop(background-color, primary);
+      }
+
+      opacity: .15;
+    }
+  }
+}
+
+// postcss-bem-linter: end
+
+.mdc-switch__native-control:disabled {
+  cursor: initial;
+}
+
+.mdc-switch__native-control:disabled ~ .mdc-switch__background {
+
+  &::before {
+    background-color: $mdc-switch-unchecked-track-color;
+    opacity: .12;
+
+    @include mdc-theme-dark(".mdc-checkbox") {
+      background-color: $mdc-switch-unchecked-track-color-dark;
+      opacity: .1;
+    }
+  }
+
+  .mdc-switch__knob {
+    background-color: $mdc-switch-disabled-knob-color;
+
+    @include mdc-theme-dark(".mdc-checkbox") {
+      background-color: $mdc-switch-disabled-knob-color-dark;
+    }
+  }
+}