material_components_web-sass 0.4.0 → 0.5.0

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

@@ -42,12 +42,14 @@
   text-decoration: none;
   text-transform: uppercase;
   vertical-align: middle;
+  user-select: none;
   box-sizing: border-box;
   -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(black, .18);
 
   @include mdc-theme-dark {
     @include mdc-theme-prop(color, text-primary-on-dark);
+
     -webkit-tap-highlight-color: rgba(white, .18);
   }
 

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

@@ -1,12 +1,12 @@
-// 
+//
 // 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.
@@ -54,6 +54,7 @@
 .mdc-checkbox {
   display: inline-block;
   position: relative;
+  box-sizing: content-box;
   width: $mdc-checkbox-size;
   height: $mdc-checkbox-size;
   padding: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
@@ -234,6 +235,19 @@ fieldset:disabled .mdc-checkbox__native-control,
   }
 }
 
+.mdc-checkbox--upgraded {
+  .mdc-checkbox__background,
+  .mdc-checkbox__checkmark,
+  .mdc-checkbox__checkmark__path,
+  .mdc-checkbox__mixedmark {
+    // Due to the myriad of selector combos used to properly style a CSS-only checkbox, all of
+    // which have varying selector precedence and make use of transitions, it is cleaner and more
+    // efficient here to simply use !important, since the mdc-checkbox--anim-* classes will take
+    // over from here.
+    transition: none !important;
+  }
+}
+
 .mdc-checkbox--anim {
   $_mdc-checkbox-indeterminate-change-duration: 500ms;
 

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

@@ -67,6 +67,7 @@
     width: calc(100% - 56px);
     max-width: 280px;
     height: 100%;
+    transform: translateX(-107%);
     transform: translateX(calc(-100% - 20px));
     will-change: transform;
     box-sizing: border-box;
@@ -74,6 +75,7 @@
     touch-action: none;
 
     @include mdc-rtl(".mdc-temporary-drawer") {
+      transform: translateX(107%);
       transform: translateX(calc(100% + 20px));
     }
 
@@ -96,6 +98,7 @@
 
   &__footer {
     @include mdc-elevation(2);
+
     flex-shrink: 0;
   }
 

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

@@ -30,9 +30,9 @@
   }
 
   #{$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;
+    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;
 }
 
 /**

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

@@ -67,7 +67,6 @@
   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);
 
@@ -79,7 +78,6 @@
     display: grid;
     grid-gap: $gutter;
     grid-gap: var(--mdc-layout-grid-gutter, $gutter);
-
     padding: $margin;
     padding: var(--mdc-layout-grid-margin, #{$margin});
 

data/vendor/assets/stylesheets/@material/menu/simple/mdc-simple-menu.scss

@@ -79,6 +79,7 @@ $mdc-simple-menu-item-fade-duration: .3s;
 
     .mdc-simple-menu--animating & {
       overflow-y: hidden;
+
       > * {
         transition-duration: $mdc-simple-menu-item-fade-duration;
         transition-property: opacity;

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

@@ -121,12 +121,16 @@
   pointer-events: none;
   // Imitate native disabled functionality
   user-select: none;
+}
 
-  @include mdc-theme-dark(".mdc-select", true) {
-    @include mdc-theme-prop(color, text-disabled-on-dark);
-    @include mdc-select-dd-arrow-svg-bg_(ffffff, .38);
+@each $sel in ("mdc-select--disabled", "mdc-select[disabled]") {
+  .#{$sel} {
+    @include mdc-theme-dark(".mdc-select", true) {
+      @include mdc-theme-prop(color, text-disabled-on-dark);
+      @include mdc-select-dd-arrow-svg-bg_(ffffff, .38);
 
-    border-bottom: 1px dotted rgba(white, .38);
+      border-bottom: 1px dotted rgba(white, .38);
+    }
   }
 }
 
@@ -244,7 +248,6 @@
     @include mdc-theme-dark {
       @include mdc-theme-prop(background-color, text-primary-on-dark);
     }
-
   }
   // stylelint-enable plugin/selector-bem-pattern
 }

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

@@ -70,7 +70,6 @@
         background-color: $mdc-switch-unchecked-track-color-dark;
         opacity: .3;
       }
-
     }
 
     // postcss-bem-linter: ignore
@@ -117,7 +116,6 @@
 }
 
 .mdc-switch__native-control:focus ~ .mdc-switch__background {
-
   .mdc-switch__knob {
     &::before {
       position: absolute;
@@ -134,15 +132,14 @@
         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;
   }
 
@@ -173,7 +170,6 @@
 }
 
 .mdc-switch__native-control:disabled ~ .mdc-switch__background {
-
   &::before {
     background-color: $mdc-switch-unchecked-track-color;
     opacity: .12;

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

@@ -257,7 +257,7 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
   @include mdc-theme-dark(".mdc-textfield", true) {
     // stylelint-disable plugin/selector-bem-pattern
     + .mdc-textfield-helptext {
-      @include mdc-theme-prop(colr, text-disabled-on-dark);
+      @include mdc-theme-prop(color, text-disabled-on-dark);
     }
     // stylelint-enable plugin/selector-bem-pattern
   }

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

@@ -0,0 +1,90 @@
+/**
+ * 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/rtl/mixins";
+@import "@material/theme/mixins";
+@import "@material/typography/mixins";
+
+$mdc-toolbar-height: 64px;
+$mdc-toolbar-mobile-height: 56px;
+$mdc-toolbar-padding: 24px 16px;
+$mdc-toolbar-mobile-padding: 16px;
+
+$mdc-toolbar-mobile-breakpoint: 599px;
+
+// postcss-bem-linter: define toolbar
+.mdc-toolbar {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: $mdc-toolbar-height;
+  padding: $mdc-toolbar-padding;
+  box-sizing: border-box;
+
+  @include mdc-theme-prop(background-color, primary);
+  @include mdc-theme-prop(color, text-primary-on-primary);
+
+  // TODO: refactor this out when #23 is implemented
+  @media (max-width: $mdc-toolbar-mobile-breakpoint) {
+    height: $mdc-toolbar-mobile-height;
+    padding: $mdc-toolbar-mobile-padding;
+  }
+
+  &__section {
+    display: inline-flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+
+    &--align-start {
+      justify-content: flex-start;
+      order: -1;
+    }
+
+    &--align-end {
+      justify-content: flex-end;
+      order: 1;
+    }
+
+    .mdc-toolbar__title {
+      @include mdc-typography(title);
+
+      margin: 0;
+    }
+  }
+}
+
+.mdc-toolbar--fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+
+  @include mdc-elevation(4);
+}
+
+// postcss-bem-linter: end
+
+.mdc-toolbar-fixed-adjust {
+  margin-top: $mdc-toolbar-height;
+
+  @media (max-width: 599px) {
+    margin-top: $mdc-toolbar-mobile-height;
+  }
+}

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

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-$mdc-typography-font-family: Roboto, sans-serif;
+$mdc-typography-font-family: Roboto, sans-serif !default;
 
 $mdc-typography-font-weight-values: (
   thin: 100,
@@ -22,7 +22,7 @@ $mdc-typography-font-weight-values: (
   medium: 500,
   bold: 700,
   black: 900
-);
+) !default;
 
 /* TODO(sgomes): Figure out what to do about desktop font sizes. */
 
@@ -106,4 +106,4 @@ $mdc-typography-styles: (
     letter-spacing: .08em,
     margin: -.5rem 0 1rem -.04em /* -8sp 0 16sp -.04em */
   )
-);
+) !default;

data/vendor/assets/stylesheets/_material-components-web.scss

@@ -33,6 +33,7 @@
 @import "@material/switch/mdc-switch";
 @import "@material/textfield/mdc-textfield";
 @import "@material/theme/mdc-theme";
+@import "@material/toolbar/mdc-toolbar";
 @import "@material/typography/mdc-typography";
 @import "@material/fonts/material-icons";
 @import "@material/fonts/roboto";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_components_web-sass
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-02-07 00:00:00.000000000 Z
+date: 2017-02-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
@@ -168,6 +168,7 @@ files:
 - vendor/assets/stylesheets/@material/theme/_mixins.scss
 - vendor/assets/stylesheets/@material/theme/_variables.scss
 - vendor/assets/stylesheets/@material/theme/mdc-theme.scss
+- vendor/assets/stylesheets/@material/toolbar/mdc-toolbar.scss
 - vendor/assets/stylesheets/@material/typography/_mixins.scss
 - vendor/assets/stylesheets/@material/typography/_variables.scss
 - vendor/assets/stylesheets/@material/typography/mdc-typography.scss