material_design_lite-sass 1.0.6.3 → 1.1.0

data/vendor/assets/stylesheets/material/_layout.scss

@@ -28,9 +28,13 @@
 .mdl-navigation__link {
   color: $layout-text-color;
   text-decoration: none;
-  font-weight: 500;
-  font-size: $layout-nav-link-font-size;
   margin: 0;
+  @include typo-body-1(true);
+
+  // Align icons inside link with text
+  & .material-icons {
+    vertical-align: middle;
+  }
 }
 
 // Main layout class.
@@ -213,6 +217,14 @@
       .mdl-layout--fixed-drawer > & {
         display: none;
       }
+
+      .mdl-layout--no-desktop-drawer-button & {
+        display: none;
+      }
+    }
+
+    .mdl-layout--no-drawer-button & {
+      display: none;
     }
   }
 
@@ -323,6 +335,10 @@
       &.is-casting-shadow {
         @include shadow-2dp();
       }
+
+      &.mdl-layout__header--waterfall-hide-top {
+        justify-content: flex-end;
+      }
     }
 
     .mdl-layout__header-row {
@@ -337,9 +353,23 @@
       margin: 0;
       padding: 0 $layout-header-desktop-indent 0 $layout-header-desktop-baseline;
 
+      .mdl-layout--no-drawer-button & {
+        padding-left: $layout-header-desktop-indent;
+      }
+
+      @media screen and (min-width: $layout-screen-size-threshold + 1px) {
+        .mdl-layout--no-desktop-drawer-button & {
+          padding-left: $layout-header-desktop-indent;
+        }
+      }
+
       @media screen and (max-width: $layout-screen-size-threshold) {
         height: $layout-header-mobile-row-height;
         padding: 0 $layout-header-mobile-indent 0 $layout-header-mobile-baseline;
+
+        .mdl-layout--no-drawer-button & {
+          padding-left: $layout-header-mobile-indent;
+        }
       }
 
       & > * {
@@ -372,7 +402,8 @@
           line-height: $layout-header-mobile-row-height;
           padding: 0 $layout-header-mobile-indent;
         }
-      }    }
+      }
+    }
 
   // Obfuscator.
   .mdl-layout__obfuscator {
@@ -391,6 +422,18 @@
       background-color: rgba(0, 0, 0, 0.5);
       visibility: visible;
     }
+
+    @supports (pointer-events: auto) {
+      background-color: rgba(0, 0, 0, 0.5);
+      opacity: 0;
+      transition-property: opacity;
+      visibility: visible;
+      pointer-events: none;
+      &.is-visible {
+        pointer-events: auto;
+        opacity: 1;
+      }
+    }
   }
 
 
@@ -399,6 +442,7 @@
     // Fix IE10 bug.
     -ms-flex: 0 1 auto;
 
+    position: relative;
     display: inline-block;
     overflow-y: auto;
     overflow-x: hidden;
@@ -443,11 +487,31 @@
       display: none;
     }
 
+    .mdl-layout--no-drawer-button & {
+      padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;
+      width: calc(100% -
+          #{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
+    }
+
+    @media screen and (min-width: $layout-screen-size-threshold + 1px) {
+      .mdl-layout--no-desktop-drawer-button & {
+        padding-left: $layout-header-desktop-indent - $layout-tab-desktop-padding;
+        width: calc(100% -
+            #{(($layout-header-desktop-indent - $layout-tab-desktop-padding) * 2)});
+      }
+    }
+
     @media screen and (max-width: $layout-screen-size-threshold) {
       width: calc(100% -
           #{($layout-header-mobile-baseline - $layout-tab-mobile-padding)});
       padding: 0 0 0
           ($layout-header-mobile-baseline - $layout-tab-mobile-padding);
+
+      .mdl-layout--no-drawer-button & {
+        width: calc(100% -
+            #{(($layout-header-mobile-indent - $layout-tab-mobile-padding) * 2)});
+        padding-left: $layout-header-mobile-indent - $layout-tab-mobile-padding;
+      }
     }
 
     .mdl-layout--fixed-tabs & {
@@ -488,6 +552,16 @@
     cursor: pointer;
     user-select: none;
 
+    .mdl-layout--no-desktop-drawer-button &,
+    .mdl-layout--no-drawer-button & {
+      width: $layout-header-desktop-indent - $layout-tab-desktop-padding;
+
+      & .material-icons {
+        position: relative;
+        left: ($layout-header-desktop-indent - $layout-tab-desktop-padding - 24px) / 2;
+      }
+    }
+
     @media screen and (max-width: $layout-screen-size-threshold) {
       display: none;
       width: $layout-header-mobile-baseline - $layout-tab-mobile-padding;

data/vendor/assets/stylesheets/material/_list.scss

@@ -0,0 +1,103 @@
+/**
+ * Copyright 2015 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";
+
+
+.mdl-list {
+  display: block;
+  padding: 8px 0 ;
+  list-style: none;
+}
+
+.mdl-list__item {
+  @include typo-body-1();
+  display: flex;
+  box-sizing: border-box;
+  height: 48px;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding : 16px 16px 20px 16px;
+  cursor: default;
+  & .mdl-list__item-primary-content {
+    order:0;
+    flex-grow: 2;
+    text-decoration: none;
+
+    & .material-icons {
+      font-size: 40px;
+      line-height: 0;
+      vertical-align: middle;
+      padding: 0 12px 0 0;
+    }
+  }
+
+  & .mdl-list__item-secondary-content {
+    display: flex;
+    flex-flow: column;
+    align-items: flex-end;
+    & .mdl-list__item-secondary-action label { display: inline; }
+    & .mdl-list__item-secondary-info {
+      @include typo-caption();
+      margin-bottom: 10px;
+      color: $list-supporting-text-text-color;
+    }
+    & .mdl-list__item-sub-header {
+      padding: 0 0 0 16px;
+    }
+  }
+}
+
+.mdl-list__item-avatar {
+  height: 56px;
+}
+
+.mdl-list__item--two-line {
+  height: 72px;
+
+  & .mdl-list__item-primary-content {
+    & .material-icons {
+      vertical-align: text-bottom;
+    }
+
+    & .mdl-list__item-sub-title {
+      @include typo-caption();
+      display: block;
+      padding : 0 0 0 56px;
+    }
+  }
+}
+
+.mdl-list__item--three-line {
+  height: 88px;
+
+  & .mdl-list__item-primary-content {
+    & .material-icons {
+      vertical-align: text-bottom;
+    }
+  }
+
+  & .mdl-list__item-text-body {
+    @include typo-caption();
+    color: $list-supporting-text-text-color;
+    display: block;
+    height: 24px;
+    padding: 0 0 0 56px;
+    overflow: hidden;
+  }
+}

data/vendor/assets/stylesheets/material/_mega_footer.scss

@@ -268,7 +268,7 @@
 
     & + .mdl-mega-footer--heading:after,
     & + .mdl-mega-footer__heading:after {
-      background-image: none;
+      content: '';
     }
   }
   .mdl-mega-footer--heading-checkbox:checked,

data/vendor/assets/stylesheets/material/_menu.scss

@@ -151,7 +151,11 @@
     border: 0;
   }
 
-  &[disabled] {
+  &--full-bleed-divider {
+    border-bottom: 1px solid $default-item-divider-color;
+  }
+
+  &[disabled], &[data-mdl-disabled] {
     color: $disabled-item-text-color;
     background-color: transparent;
     cursor: auto;

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

@@ -206,6 +206,21 @@
   }
 }
 
+@mixin typo-icon() {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  word-wrap: normal;
+  font-feature-settings: 'liga';
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
 /* Shadows */
 
 // Focus shadow mixin.
@@ -245,6 +260,12 @@
               0  8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
+@mixin shadow-24dp() {
+  box-shadow: 0  9px 46px  8px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
+              0 11px 15px -7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+              0 24px 38px  3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+}
+
 /* Animations */
 
 @mixin material-animation-fast-out-slow-in($duration:0.2s) {
@@ -266,3 +287,15 @@
   transition-duration: $duration;
   transition-timing-function: $animation-curve-default;
 }
+
+/* Dialog */
+
+@mixin dialog-width($units:5) {
+  @if(type_of($units) != 'number') {
+    @error "The unit given to dialog-width should be a number.";
+  }
+  // 56dp is the base unit width for Dialogs.
+  // With 5 units being the number of units for a mobile device.
+  // https://goo.gl/sK2O5o
+  width: $units * 56px;
+}

data/vendor/assets/stylesheets/material/_progress.scss

@@ -21,6 +21,7 @@
   position: relative;
   height: $bar-height;
   width: 500px;
+  max-width: 100%;
 }
 
 .mdl-progress > .bar {
@@ -51,6 +52,7 @@
 
 // Webkit only
 @supports (-webkit-appearance:none) {
+  .mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar,
   .mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
     background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
       linear-gradient(to right, $progress-main-color, $progress-main-color);
@@ -58,11 +60,13 @@
   }
 }
 
+.mdl-progress:not(.mdl-progress--indeterminate) > .auxbar,
 .mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
   background-image: linear-gradient(to right, $progress-fallback-buffer-color, $progress-fallback-buffer-color),
     linear-gradient(to right, $progress-main-color, $progress-main-color);
 }
 
+.mdl-progress.mdl-progress--indeterminate > .bar1,
 .mdl-progress.mdl-progress__indeterminate > .bar1 {
   background-color: $progress-main-color;
   animation-name: indeterminate1;
@@ -71,6 +75,7 @@
   animation-timing-function: linear;
 }
 
+.mdl-progress.mdl-progress--indeterminate > .bar3,
 .mdl-progress.mdl-progress__indeterminate > .bar3 {
   background-image: none;
   background-color: $progress-main-color;

data/vendor/assets/stylesheets/material/_radio.scss

@@ -76,6 +76,7 @@
     border: 2px solid $radio-color;
   }
 
+  fieldset[disabled] .mdl-radio,
   .mdl-radio.is-disabled & {
     border: 2px solid $radio-disabled-color;
     cursor: auto;
@@ -106,6 +107,7 @@
     transform: scale3d(1, 1, 1);
   }
 
+  fieldset[disabled] .mdl-radio &,
   .mdl-radio.is-disabled & {
     background: $radio-disabled-color;
     cursor: auto;
@@ -119,6 +121,7 @@
 .mdl-radio__label {
   cursor: pointer;
 
+  fieldset[disabled] .mdl-radio &,
   .mdl-radio.is-disabled & {
     color: $radio-disabled-color;
     cursor: auto;
@@ -145,10 +148,12 @@
     background: $radio-color;
   }
 
+  fieldset[disabled] .mdl-radio &,
   .mdl-radio.is-disabled & {
     cursor: auto;
   }
 
+  fieldset[disabled] .mdl-radio & .mdl-ripple,
   .mdl-radio.is-disabled & .mdl-ripple {
     background: transparent;
   }

data/vendor/assets/stylesheets/material/_shadow.scss

@@ -40,3 +40,7 @@
 .mdl-shadow--16dp {
   @include shadow-16dp();
 }
+
+.mdl-shadow--24dp {
+  @include shadow-24dp();
+}

data/vendor/assets/stylesheets/material/_snackbar.scss

@@ -0,0 +1,81 @@
+/**
+ * Copyright 2015 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";
+
+.mdl-snackbar {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  margin-right: -50%;
+  cursor: default;
+  background-color: $snackbar-background-color;
+  z-index: 10000;
+  display: flex;
+  font-family: $preferred_font;
+  will-change: transform;
+  transform: translate(0, 80px);
+  transition: transform 0.25s $animation-curve-fast-out-linear-in;
+  pointer-events: none;
+  @media(max-width: $snackbar-tablet-breakpoint - 1) {
+    width: 100%;
+    left: 0;
+    min-height: 48px;
+    max-height: 80px;
+  }
+  @media(min-width: $snackbar-tablet-breakpoint) {
+    min-width: 288px;
+    max-width: 568px;
+    border-radius: 2px;
+  }
+  &--active {
+    transform: translate(0, 0);
+    pointer-events: auto;
+    transition: transform 0.25s $animation-curve-linear-out-slow-in;
+  }
+
+  &__text {
+    padding: 14px 24px;
+    vertical-align: middle;
+    color: white;
+  }
+
+  &__action {
+    background: transparent;
+    border: none;
+    color: $snackbar-action-color;
+    text-transform: uppercase;
+    padding: 14px 24px;
+    @include typo-button();
+    overflow: hidden;
+    outline: none;
+    opacity: 0;
+    pointer-events: none;
+    cursor: pointer;
+    text-decoration: none;
+    text-align: center;
+    vertical-align: middle;
+
+    &::-moz-focus-inner {
+      border: 0;
+    }
+    &:not([aria-hidden]) {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}