material_components_web-sass 0.10.0.1 → 0.11.0

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

@@ -17,6 +17,7 @@
 @import "@material/elevation/mixins";
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
+@import "@material/rtl/mixins";
 
 // postcss-bem-linter: define card
 .mdc-card {
@@ -78,10 +79,14 @@
     // Tweak button paddings and margins when they're used as actions
     .mdc-card__action {
       margin: 0 8px 0 0;
+
+      @include mdc-rtl {
+        margin: 0 0 0 8px;
+      }
     }
 
     .mdc-card__action:last-child {
-      margin-right: 0;
+      @include mdc-rtl-reflexive-box(margin, right, 0);
     }
 
     // Vertical actions (one per line)
@@ -158,8 +163,10 @@
     flex-direction: row;
     align-items: flex-start;
     justify-content: space-between;
-    padding: 0 16px 0 0;
     box-sizing: border-box;
+    padding: 0;
+
+    @include mdc-rtl-reflexive-property(padding, 0, 16px);
 
     // postcss-bem-linter: ignore
     .mdc-card__actions--vertical {
@@ -167,7 +174,7 @@
     }
 
     .mdc-card__media-item {
-      margin-left: 16px;
+      @include mdc-rtl-reflexive-box(margin, left, 16px);
     }
 
     // postcss-bem-linter: ignore

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

@@ -39,6 +39,7 @@ $mdc-simple-menu-item-fade-duration: .3s;
   overflow: hidden;
   box-sizing: border-box;
   will-change: transform, opacity;
+  z-index: 4;
 
   @include mdc-elevation(2);
 

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

@@ -0,0 +1,18 @@
+//
+// 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 "./tab/mdc-tab";
+@import "./tab-bar/mdc-tab-bar";

data/vendor/assets/stylesheets/@material/tabs/tab-bar/mdc-tab-bar.scss

@@ -0,0 +1,111 @@
+//
+// 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 "@material/animation/functions";
+@import "@material/theme/mixins";
+@import "@material/rtl/mixins";
+
+// postcss-bem-linter: define tab-bar
+.mdc-tab-bar {
+  display: table;
+  height: 48px;
+  margin: 0 auto;
+  position: relative;
+  text-transform: uppercase;
+
+  &__indicator {
+    height: 2px;
+    width: 100%;
+
+    @include mdc-theme-prop(background-color, text-primary-on-light);
+
+    @include mdc-theme-dark(".mdc-tab-bar") {
+      @include mdc-theme-prop(background-color, text-primary-on-dark);
+    }
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform-origin: left top;
+    transition: mdc-animation-enter(transform, 240ms);
+    will-change: transform;
+    visibility: hidden;
+  }
+
+  // postcss-bem-linter: ignore
+  .mdc-toolbar & {
+    .mdc-tab {
+      @include mdc-theme-prop(color, text-secondary-on-primary);
+
+      @include mdc-theme-dark(".mdc-tab-bar") {
+        @include mdc-theme-prop(color, text-secondary-on-dark);
+      }
+    }
+
+    .mdc-tab--active,
+    .mdc-tab:hover {
+      @include mdc-theme-prop(color, text-primary-on-primary);
+
+      @include mdc-theme-dark(".mdc-tab-bar") {
+        @include mdc-theme-prop(color, text-primary-on-dark);
+      }
+    }
+
+    // postcss-bem-linter: ignore
+    .mdc-tab-bar__indicator {
+      @include mdc-theme-prop(background-color, text-primary-on-primary);
+
+      @include mdc-theme-dark(".mdc-tab-bar") {
+        @include mdc-theme-prop(background-color, text-primary-on-dark);
+      }
+    }
+  }
+}
+
+.mdc-tab-bar--icons-with-text {
+  height: 72px;
+}
+
+.mdc-tab-bar--indicator-primary,
+.mdc-toolbar .mdc-tab-bar--indicator-primary {
+  .mdc-tab-bar__indicator {
+    @include mdc-theme-prop(background-color, primary);
+
+    @include mdc-theme-dark(".mdc-tab-bar") {
+      @include mdc-theme-prop(background-color, primary);
+    }
+  }
+
+  &.mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab::after {
+    @include mdc-theme-prop(background-color, primary);
+  }
+}
+
+.mdc-tab-bar--indicator-accent,
+.mdc-toolbar .mdc-tab-bar--indicator-accent {
+  .mdc-tab-bar__indicator {
+    @include mdc-theme-prop(background-color, accent);
+
+    @include mdc-theme-dark(".mdc-tab-bar") {
+      @include mdc-theme-prop(background-color, accent);
+    };
+  }
+
+  &.mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab::after {
+    @include mdc-theme-prop(background-color, accent);
+  }
+}
+// postcss-bem-linter: end

data/vendor/assets/stylesheets/@material/tabs/tab/mdc-tab.scss

@@ -0,0 +1,174 @@
+//
+// 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 "@material/animation/functions";
+@import "@material/typography/mixins";
+@import "@material/theme/mixins";
+@import "@material/ripple/mixins";
+@import "@material/rtl/mixins";
+
+$mdc-tab-with-text-height: 48px;
+$mdc-tab-with-icon-and-text-height: 72px;
+
+@mixin mdc-tabs-icon-tab-content {
+  display: block;
+  margin: 0 auto;
+}
+
+// postcss-bem-linter: define tab
+.mdc-tab {
+  @include mdc-typography(body2);
+
+  position: relative;
+  box-sizing: border-box;
+  display: table-cell;
+  text-align: center;
+  vertical-align: middle;
+  min-height: $mdc-tab-with-text-height;
+  min-width: 160px;
+  overflow: hidden;
+  padding: 0 24px;
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+
+  @include mdc-theme-prop(color, text-secondary-on-light);
+
+  &:hover {
+    @include mdc-theme-prop(color, text-primary-on-light);
+  }
+
+  &:focus {
+    @include mdc-theme-prop(outline-color, text-secondary-on-light);
+  }
+
+  @include mdc-theme-dark(".mdc-tab-bar") {
+    @include mdc-theme-prop(color, text-secondary-on-dark);
+
+    &:hover {
+      @include mdc-theme-prop(color, text-primary-on-dark);
+    }
+
+    &:focus {
+      @include mdc-theme-prop(outline-color, text-secondary-on-dark);
+    }
+  }
+
+  // TODO: Replace with breakpoint variable
+  @media screen and (max-width: 600px) {
+    min-width: 72px;
+    padding: 0 12px;
+  }
+
+  &__icon {
+    @include mdc-tabs-icon-tab-content;
+
+    width: 24px;
+    height: 24px;
+
+    // postcss-bem-linter: ignore
+    .mdc-tab-bar--icons-with-text & {
+      margin-top: 4px;
+    }
+  }
+
+  &__icon-text {
+    @include mdc-tabs-icon-tab-content;
+  }
+
+  // postcss-bem-linter: ignore
+  &__icon + &__icon-text {
+    padding-top: 6px;
+  }
+}
+
+.mdc-tab--active {
+  @include mdc-theme-prop(color, text-primary-on-light);
+
+  @include mdc-theme-dark(".mdc-tab-bar") {
+    @include mdc-theme-prop(color, text-primary-on-dark);
+  }
+
+  &::before {
+    bottom: 0;
+  }
+}
+
+.mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    left: 0;
+    top: $mdc-tab-with-text-height - 2px;
+    content: "";
+    width: calc(100% - 4px);
+    height: 2px;
+    display: none;
+    pointer-events: none;
+
+    @include mdc-theme-prop(background-color, text-primary-on-light);
+    @include mdc-theme-dark(".mdc-tab-bar", true) {
+      @include mdc-theme-prop(background-color, text-primary-on-dark);
+    }
+
+    .mdc-toolbar & {
+      @include mdc-theme-prop(background-color, text-primary-on-primary);
+    }
+  }
+
+  &--active,
+  &:active,
+  &:hover {
+    &::after {
+      display: block;
+    }
+  }
+
+  &:not(.mdc-tab--active):hover::after {
+    opacity: .38;
+  }
+
+  &--active,
+  &:not(.mdc-tab--active):active::after {
+    opacity: .87;
+  }
+}
+
+.mdc-tab-bar--icons-with-text:not(.mdc-tab-bar-upgraded) .mdc-tab::after {
+  top: $mdc-tab-with-icon-and-text-height - 2px;
+}
+
+.mdc-tab.mdc-ripple-upgraded {
+  @include mdc-ripple-base;
+  @include mdc-ripple-fg((pseudo: "::after"));
+  @include mdc-ripple-bg((pseudo: "::before"));
+  @include mdc-theme-dark(".mdc-tab-bar") {
+    @include mdc-ripple-bg((pseudo: "::before", base-color: map-get($mdc-theme-property-values, text-primary-on-dark), opacity: .16));
+    @include mdc-ripple-fg((pseudo: "::after", base-color: map-get($mdc-theme-property-values, text-primary-on-dark), opacity: .16));
+  }
+
+  .mdc-toolbar & {
+    @include mdc-ripple-bg((pseudo: "::before", base-color: map-get($mdc-theme-property-values, text-primary-on-primary), opacity: .16));
+    @include mdc-ripple-fg((pseudo: "::after", base-color: map-get($mdc-theme-property-values, text-primary-on-primary), opacity: .16));
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+// postcss-bem-linter: end

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

@@ -201,7 +201,8 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 
 .mdc-textfield--invalid {
   &:not(.mdc-textfield--focused) {
-    &::after {
+    &::after,
+    &.mdc-textfield--upgraded::after {
       background-color: $mdc-textfield-error-on-light;
     }
 
@@ -212,7 +213,8 @@ $mdc-textfield-disabled-border-on-dark: rgba(white, .3);
 
   @include mdc-theme-dark(".mdc-textfield", true) {
     &:not(.mdc-textfield--focused) {
-      &::after {
+      &::after,
+      &.mdc-textfield--upgraded::after {
         background-color: $mdc-textfield-error-on-dark;
       }
 

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

@@ -44,13 +44,14 @@ $mdc-toolbar-mobile-breakpoint: 599px;
     display: flex;
     position: relative;
     width: 100%;
-    height: $mdc-toolbar-row-height;
+    height: auto;
+    min-height: $mdc-toolbar-row-height;
     padding: $mdc-toolbar-padding;
     box-sizing: border-box;
 
     // TODO: refactor this out when #23 is implemented
     @media (max-width: $mdc-toolbar-mobile-breakpoint) {
-      height: $mdc-toolbar-mobile-row-height;
+      min-height: $mdc-toolbar-mobile-row-height;
       padding: $mdc-toolbar-mobile-padding;
     }
   }

data/vendor/assets/stylesheets/_material-components-web.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 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 "@material/animation/mdc-animation";
 @import "@material/button/mdc-button";
@@ -33,6 +33,7 @@
 @import "@material/select/mdc-select";
 @import "@material/snackbar/mdc-snackbar";
 @import "@material/switch/mdc-switch";
+@import "@material/tabs/mdc-tabs";
 @import "@material/textfield/mdc-textfield";
 @import "@material/theme/mdc-theme";
 @import "@material/toolbar/mdc-toolbar";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_components_web-sass
 version: !ruby/object:Gem::Version
-  version: 0.10.0.1
+  version: 0.11.0
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-05-10 00:00:00.000000000 Z
+date: 2017-05-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
@@ -167,6 +167,9 @@ files:
 - vendor/assets/stylesheets/@material/switch/_mixins.scss
 - vendor/assets/stylesheets/@material/switch/_variables.scss
 - vendor/assets/stylesheets/@material/switch/mdc-switch.scss
+- vendor/assets/stylesheets/@material/tabs/mdc-tabs.scss
+- vendor/assets/stylesheets/@material/tabs/tab-bar/mdc-tab-bar.scss
+- vendor/assets/stylesheets/@material/tabs/tab/mdc-tab.scss
 - vendor/assets/stylesheets/@material/textfield/mdc-textfield.scss
 - vendor/assets/stylesheets/@material/theme/_constants.scss
 - vendor/assets/stylesheets/@material/theme/_functions.scss