material_components_web-sass 0.12.1 → 0.13.0

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

@@ -0,0 +1,41 @@
+//
+// 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";
+
+/**
+ * Applies styles to the different types of icons that can exist in toolbars.
+ * Both .mdc-toolbar__icon and .mdc-toolbar__icon--menu share all styles except for
+ * horizontal padding.
+ */
+@mixin mdc-shared-icon-style($padding-type: null) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  // stylelint-disable at-rule-empty-line-before, block-closing-brace-newline-after
+  @if $padding-type == menu {
+    padding: $mdc-toobar-element-vertical-padding;
+  } @else {
+    padding: $mdc-toobar-element-vertical-padding 8px;
+  }
+  // stylelint enable
+
+  border: none;
+  background-color: inherit;
+  color: inherit;
+  text-decoration: none;
+}

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

@@ -0,0 +1,26 @@
+//
+// 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-toolbar-row-height: 64px;
+$mdc-toolbar-mobile-row-height: 56px;
+$mdc-toolbar-mobile-landscape-row-height: 48px;
+$mdc-toolbar-padding: 20px 28px;
+$mdc-toobar-element-vertical-padding: 16px;
+
+$mdc-toolbar-ratio-to-extend-flexible: 4 !default;
+
+$mdc-toolbar-mobile-landscape-width-breakpoint: 959px;
+$mdc-toolbar-mobile-breakpoint: 599px;

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

@@ -18,15 +18,8 @@
 @import "@material/rtl/mixins";
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
-
-$mdc-toolbar-row-height: 64px;
-$mdc-toolbar-mobile-row-height: 56px;
-$mdc-toolbar-padding: 20px 28px;
-$mdc-toolbar-mobile-padding: 16px;
-
-$mdc-toolbar-ratio-to-extend-flexible: 4 !default;
-
-$mdc-toolbar-mobile-breakpoint: 599px;
+@import "./mixins";
+@import "./variables";
 
 // postcss-bem-linter: define toolbar
 .mdc-toolbar {
@@ -43,16 +36,21 @@ $mdc-toolbar-mobile-breakpoint: 599px;
   &__row {
     display: flex;
     position: relative;
+    align-items: center;
     width: 100%;
     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-landscape-width-breakpoint)
+      and (orientation: landscape) {
+      min-height: $mdc-toolbar-mobile-landscape-row-height;
+    }
+
     // TODO: refactor this out when #23 is implemented
     @media (max-width: $mdc-toolbar-mobile-breakpoint) {
       min-height: $mdc-toolbar-mobile-row-height;
-      padding: $mdc-toolbar-mobile-padding;
     }
   }
 
@@ -62,6 +60,7 @@ $mdc-toolbar-mobile-breakpoint: 599px;
     align-items: flex-start;
     justify-content: center;
     min-width: 0;
+    height: 100%;
     z-index: 1;
 
     &--align-start {
@@ -78,13 +77,26 @@ $mdc-toolbar-mobile-breakpoint: 599px;
   &__title {
     @include mdc-typography(title);
 
+    align-self: center;
     margin: 0;
+    margin-left: 16px;
+    padding: $mdc-toobar-element-vertical-padding 0;
     line-height: 1.5rem;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     z-index: 1;
   }
+
+  &__icon {
+    @include mdc-shared-icon-style;
+    @include mdc-theme-prop(color, text-primary-on-primary);
+  }
+
+  &__icon--menu {
+    @include mdc-shared-icon-style(menu);
+    @include mdc-theme-prop(color, text-primary-on-primary);
+  }
 }
 
 .mdc-toolbar--fixed {
@@ -124,15 +136,9 @@ $mdc-toolbar-mobile-breakpoint: 599px;
     .mdc-toolbar__title {
       @include mdc-typography(display1);
 
-      transform: translateY($mdc-toolbar-row-height * ($mdc-toolbar-ratio-to-extend-flexible - 1));
-      transform: translateY(calc(#{$mdc-toolbar-row-height} * (var(--mdc-toolbar-ratio-to-extend-flexible, #{$mdc-toolbar-ratio-to-extend-flexible}) - 1)));
+      align-self: flex-end;
       font-weight: #{map-get($mdc-typography-font-weight-values, normal)};
       line-height: 1.5rem;
-
-      @media (max-width: $mdc-toolbar-mobile-breakpoint) {
-        transform: translateY($mdc-toolbar-mobile-row-height * ($mdc-toolbar-ratio-to-extend-flexible - 1));
-        transform: translateY(calc(#{$mdc-toolbar-mobile-row-height} * (var(--mdc-toolbar-ratio-to-extend-flexible, #{$mdc-toolbar-ratio-to-extend-flexible}) - 1)));
-      }
     }
 
     .mdc-toolbar__row:first-child::after {
@@ -182,7 +188,7 @@ $mdc-toolbar-mobile-breakpoint: 599px;
 .mdc-toolbar-fixed-adjust {
   margin-top: $mdc-toolbar-row-height;
 
-  @media (max-width: 599px) {
+  @media (max-width: $mdc-toolbar-mobile-breakpoint) {
     margin-top: $mdc-toolbar-mobile-row-height;
   }
 }

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

@@ -32,6 +32,7 @@
 @import "@material/radio/mdc-radio";
 @import "@material/ripple/mdc-ripple";
 @import "@material/select/mdc-select";
+@import "@material/slider/mdc-slider";
 @import "@material/snackbar/mdc-snackbar";
 @import "@material/switch/mdc-switch";
 @import "@material/tabs/mdc-tabs";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: material_components_web-sass
 version: !ruby/object:Gem::Version
-  version: 0.12.1
+  version: 0.13.0
 platform: ruby
 authors:
 - Dmitriy Tarasov
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-06-02 00:00:00.000000000 Z
+date: 2017-06-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
@@ -164,6 +164,8 @@ files:
 - vendor/assets/stylesheets/@material/ripple/mdc-ripple.scss
 - vendor/assets/stylesheets/@material/rtl/_mixins.scss
 - vendor/assets/stylesheets/@material/select/mdc-select.scss
+- vendor/assets/stylesheets/@material/slider/_variables.scss
+- vendor/assets/stylesheets/@material/slider/mdc-slider.scss
 - vendor/assets/stylesheets/@material/snackbar/_variables.scss
 - vendor/assets/stylesheets/@material/snackbar/mdc-snackbar.scss
 - vendor/assets/stylesheets/@material/switch/_mixins.scss
@@ -179,6 +181,8 @@ 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/_mixins.scss
+- vendor/assets/stylesheets/@material/toolbar/_variables.scss
 - vendor/assets/stylesheets/@material/toolbar/mdc-toolbar.scss
 - vendor/assets/stylesheets/@material/typography/_mixins.scss
 - vendor/assets/stylesheets/@material/typography/_variables.scss