material_components_web-sass 0.3.0 → 0.4.0

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

@@ -39,6 +39,7 @@
   font-weight: 500;
   line-height: 36px; // Override line-height so text aligns centered
   text-align: center;
+  text-decoration: none;
   text-transform: uppercase;
   vertical-align: middle;
   box-sizing: border-box;

data/vendor/assets/stylesheets/@material/card/mdc-card.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/elevation/mixins";
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
 
-/* postcss-bem-linter: define card */
+// postcss-bem-linter: define card
 .mdc-card {
   @include mdc-elevation(2);
 
@@ -31,12 +31,12 @@
   &__primary {
     padding: 16px;
 
-    /* Add extra space before large title. */
+    // Add extra space before large title.
     .mdc-card__title--large {
       padding-top: 8px;
     }
 
-    /* Add extra padding if this is the last block. */
+    // Add extra padding if this is the last block.
     &:last-child {
       padding-bottom: 24px;
     }
@@ -53,13 +53,13 @@
       @include mdc-theme-prop(color, text-primary-on-dark);
     }
 
-    /* Remove top padding if immediately preceded by a primary block. */
+    // Remove top padding if immediately preceded by a primary block.
     .mdc-card__primary + & {
       margin-top: -8px;
       padding-top: 0;
     }
 
-    /* Add extra padding if this is the last block. */
+    // Add extra padding if this is the last block.
     &:last-child {
       padding-bottom: 24px;
     }
@@ -70,12 +70,12 @@
     padding: 8px;
     box-sizing: border-box;
 
-    /* Adjust text color for dark theme. */
+    // Adjust text color for dark theme.
     @include mdc-theme-dark(".mdc-card") {
       @include mdc-theme-prop(color, text-primary-on-dark);
     }
 
-    /* Tweak button paddings and margins when they're used as actions */
+    // Tweak button paddings and margins when they're used as actions
     .mdc-card__action {
       margin: 0 8px 0 0;
     }
@@ -84,7 +84,7 @@
       margin-right: 0;
     }
 
-    /* Vertical actions (one per line) */
+    // Vertical actions (one per line)
     &--vertical {
       flex-flow: column;
       align-items: flex-start;
@@ -127,12 +127,12 @@
     @include mdc-typography(body2);
     @include mdc-theme-prop(color, text-primary-on-background);
 
-    /* Adjust text color for dark theme. */
+    // Adjust text color for dark theme.
     @include mdc-theme-dark(".mdc-card") {
       @include mdc-theme-prop(color, text-primary-on-dark);
     }
 
-    margin: -.063rem 0; /* -1sp 0 */
+    margin: -.063rem 0; // -1sp 0
   }
 
   &__title--large {
@@ -145,12 +145,12 @@
     @include mdc-typography(body1);
     @include mdc-theme-prop(color, text-primary-on-background);
 
-    /* Adjust text color for dark theme. */
+    // Adjust text color for dark theme.
     @include mdc-theme-dark(".mdc-card") {
       @include mdc-theme-prop(color, text-primary-on-dark);
     }
 
-    margin: -.063rem 0; /* -1sp 0 */
+    margin: -.063rem 0; // -1sp 0
   }
 
   &__horizontal-block {
@@ -170,10 +170,11 @@
       margin-left: 16px;
     }
 
-    &:last-child .mdc-card__media-item {
+    // postcss-bem-linter: ignore
+    .mdc-card__media-item--3x {
       margin-bottom: 16px;
     }
   }
 }
 
-/* postcss-bem-linter: end */
+// postcss-bem-linter: end

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

@@ -20,7 +20,9 @@ $mdc-checkbox-border-color-dark: white !default;
 $mdc-checkbox-disabled-color: rgba(black, .26) !default;
 $mdc-checkbox-disabled-color-dark: rgba(white, .3) !default;
 
+$mdc-checkbox-touch-area: 40px;
 $mdc-checkbox-size: 18px;
+$mdc-checkbox-ui-pct: percentage($mdc-checkbox-size / $mdc-checkbox-touch-area);
 $mdc-checkbox-mark-stroke-size: 2/15 * $mdc-checkbox-size;
 $mdc-checkbox-border-width: 2px;
 $mdc-checkbox-transition-duration: 90ms;

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

@@ -1,20 +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/functions";
+@import "@material/ripple/mixins";
 @import "@material/animation/mixins";
 @import "./variables";
 @import "./keyframes";
@@ -40,20 +41,22 @@
 }
 
 @mixin mdc-checkbox-outer-box {
-  border-radius: 2px;
-
   @include mdc-checkbox-cover-element;
 
+  top: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
+  left: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
+  border-radius: 2px;
   box-sizing: border-box;
   pointer-events: none;
 }
 
-/* postcss-bem-linter: define checkbox */
+// postcss-bem-linter: define checkbox
 .mdc-checkbox {
   display: inline-block;
   position: relative;
   width: $mdc-checkbox-size;
   height: $mdc-checkbox-size;
+  padding: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
   line-height: 0;
   white-space: nowrap;
   cursor: pointer;
@@ -65,6 +68,9 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    width: $mdc-checkbox-ui-pct;
+    height: $mdc-checkbox-ui-pct;
+    box-sizing: border-box;
     transition:
       mdc-checkbox-transition-exit(background-color),
       mdc-checkbox-transition-exit(border-color);
@@ -76,10 +82,12 @@
       border-color: $mdc-checkbox-border-color-dark;
     }
 
-    /** The frame's ::before element is used as a focus indicator for the checkbox */
+    // The frame's ::before element is used as a focus indicator for the checkbox
     &::before {
       @include mdc-checkbox-cover-element;
 
+      width: 100%;
+      height: 100%;
       transform: scale(0, 0);
       transition: mdc-checkbox-transition-exit(opacity), mdc-checkbox-transition-exit(transform);
       border-radius: 50%;
@@ -203,7 +211,7 @@ fieldset:disabled .mdc-checkbox__native-control,
 [aria-disabled="true"] .mdc-checkbox__native-control {
   cursor: default;
 
-  /* postcss-bem-linter: ignore */
+  // postcss-bem-linter: ignore
   ~ .mdc-checkbox__background {
     border-color: $mdc-checkbox-disabled-color;
 
@@ -217,11 +225,11 @@ fieldset:disabled .mdc-checkbox__native-control,
     ~ .mdc-checkbox__background {
       border-color: transparent;
       background-color: $mdc-checkbox-disabled-color;
-      /* stylelint-disable selector-max-compound-selectors, selector-max-specificity */
+      // stylelint-disable selector-max-compound-selectors, selector-max-specificity
       @include mdc-theme-dark(".mdc-checkbox") {
         background-color: $mdc-checkbox-disabled-color-dark;
       }
-      /* stylelint-enable selector-max-compound-selectors, selector-max-specificity */
+      // stylelint-enable selector-max-compound-selectors, selector-max-specificity
     }
   }
 }
@@ -306,5 +314,14 @@ fieldset:disabled .mdc-checkbox__native-control,
     }
   }
 }
+// postcss-bem-linter: end
 
-/* postcss-bem-linter: end */
+.mdc-checkbox.mdc-ripple-upgraded {
+  @include mdc-ripple-base;
+  @include mdc-ripple-bg((pseudo: "::before", theme-style: primary, opacity: .14));
+  @include mdc-ripple-fg((pseudo: "::after", theme-style: primary, opacity: .14));
+
+  .mdc-checkbox__background::before {
+    content: none;
+  }
+}

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

@@ -32,6 +32,7 @@
   pointer-events: none;
   box-sizing: border-box;
   contain: strict;
+  z-index: 3;
 
   /* Shaded background */
   &::before {

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

@@ -0,0 +1,134 @@
+// 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.
+
+// Private mixins, meant for internal use.
+@mixin mdc-layout-grid-media-query_($size) {
+  @if $size == phone {
+    // Phone
+    @media (max-width: map-get($mdc-layout-grid-breakpoints, tablet) - 1px) {
+      @content;
+    }
+  }
+
+  @if $size == tablet {
+    // Tablet
+    @media (min-width: map-get($mdc-layout-grid-breakpoints, tablet)) and (max-width: map-get($mdc-layout-grid-breakpoints, desktop) - 1px) {
+      @content;
+    }
+  }
+
+  @if $size == desktop {
+    // Desktop
+    @media (min-width: map-get($mdc-layout-grid-breakpoints, desktop)) {
+      @content;
+    }
+  }
+}
+
+@mixin mdc-layout-grid-cell-span_($size, $span, $gutter) {
+  $percent: percentage($span / map-get($mdc-layout-grid-columns, $size));
+
+  @if $percent > 100% {
+    $percent: 100%;
+  }
+
+  width: calc(#{$percent} - #{$gutter});
+  width: calc(#{$percent} - var(--mdc-layout-grid-gutter, #{$gutter}));
+
+  @supports (display: grid) {
+    width: auto;
+    grid-column-end: span min($span, map-get($mdc-layout-grid-columns, $size));
+  }
+}
+
+@mixin mdc-layout-grid-cell-spans_($span, $gutter) {
+  @each $size in map-keys($mdc-layout-grid-columns) {
+    @include mdc-layout-grid-media-query_($size) {
+      @include mdc-layout-grid-cell-span_($size, $span, $gutter);
+    }
+  }
+}
+
+// Public mixins, meant for developer usage.
+@mixin mdc-layout-grid($margin, $gutter, $max-width: null) {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: stretch;
+  margin: 0 auto;
+  box-sizing: border-box;
+
+  padding: $margin - $gutter / 2;
+  padding: calc(var(--mdc-layout-grid-margin, #{$margin}) - var(--mdc-layout-grid-gutter, #{$gutter}) / 2);
+
+  @if $max-width {
+    max-width: $max-width;
+  }
+
+  @supports (display: grid) {
+    display: grid;
+    grid-gap: $gutter;
+    grid-gap: var(--mdc-layout-grid-gutter, $gutter);
+
+    padding: $margin;
+    padding: var(--mdc-layout-grid-margin, #{$margin});
+
+    @each $size in map-keys($mdc-layout-grid-columns) {
+      @include mdc-layout-grid-media-query_($size) {
+        grid-template-columns: repeat(map-get($mdc-layout-grid-columns, $size), minmax(0, 1fr));
+      }
+    }
+  }
+}
+
+@mixin mdc-layout-grid-cell($gutter, $span: 4) {
+  margin: $gutter / 2;
+  margin: calc(var(--mdc-layout-grid-gutter, #{$gutter}) / 2);
+  box-sizing: border-box;
+
+  @supports (display: grid) {
+    margin: 0;
+  }
+
+  @include mdc-layout-grid-cell-spans_($span, $gutter);
+}
+
+@mixin mdc-layout-grid-cell-order($order) {
+  order: $order;
+}
+
+@mixin mdc-layout-grid-cell-align($position) {
+  @if $position == "top" {
+    align-self: flex-start;
+
+    @supports (display: grid) {
+      align-self: start;
+    }
+  }
+
+  @if $position == "middle" {
+    align-self: center;
+  }
+
+  @if $position == "bottom" {
+    align-self: flex-end;
+
+    @supports (display: grid) {
+      align-self: end;
+    }
+  }
+
+  @if $position == "stretch" {
+    align-self: stretch;
+  }
+}

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

@@ -0,0 +1,29 @@
+// 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.
+
+$mdc-layout-grid-breakpoints: (
+  desktop: 840px,
+  tablet: 480px,
+  phone: 0px
+) !default;
+
+$mdc-layout-grid-columns: (
+  desktop: 12,
+  tablet: 8,
+  phone: 4
+) !default;
+
+$mdc-layout-grid-default-column-span: 4 !default;
+$mdc-layout-grid-default-margin: 16px !default;
+$mdc-layout-grid-default-gutter: 16px !default;