dlegr250_material_design 0.5.86 → 0.5.88

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8f61245f50d7c305bb408e852642f7ae737bb988
-  data.tar.gz: 5250381d0b35e321c3282cefb6bdd7b7342144b6
+  metadata.gz: 5758fbd8b0111d7a6a46507488e244fda03963ee
+  data.tar.gz: 20569743001d21368b9c7eac18a6f67552a499d6
 SHA512:
-  metadata.gz: d7c4b49fa732f85052b33337649e21906bed6a61b84d6814ed60c499ebc476a451098edc1328c8b7fa6c6e9d0968237396826fa32c47466c81d6dd390ffbdaa5
-  data.tar.gz: 0f459098cd978ece6917758fc70f34a6bd581fea688e86eab52f79ab6a1fbb611a320357e5704c9df2e180010aa23ecd919f2f853c14e4ca108ba1369a624022
+  metadata.gz: 17b879ef63c73d17262b4eb168d4462be112dbea910b8cdf1feee66cd1f4fe03fb2ac9f8a82d5d850b2036ed69ce32bcaf935ce7c09be6a2b7194e0fea9650db
+  data.tar.gz: 36cf4a95784887c6826b55ca852973684bfa72341c5d9c6283599be9c1428cf06152aee08236128e85035c98e8fc66c31cf75ad165434d728abfece3d96dc3de

data/lib/dlegr250_material_design/version.rb

@@ -1,3 +1,3 @@
 module Dlegr250MaterialDesign
-  VERSION = "0.5.86"
+  VERSION = "0.5.88"
 end

data/vendor/assets/javascripts/components/dialog.coffee

@@ -52,15 +52,15 @@ class App.MD.Dialog
     element.addClass("visible")
     element.find("input[autofocus]").focus()
 
-    # Add shadow on dialog appbar when scrolling contents
-    $(".dialog-scrollable, .dialog-scrollable-no-actions").on "scroll", (e) ->
-      $this = $(this)
-      $dialogAppbar = $this.parents(".dialog").find(".dialog-appbar")
-
-      if $this.scrollTop()
-        $dialogAppbar.addClass("scroll-shadow")
-      else
-        $dialogAppbar.removeClass("scroll-shadow")
+    # # Add shadow on dialog appbar when scrolling contents
+    # $(".dialog-scrollable, .dialog-scrollable-no-actions").on "scroll", (e) ->
+    #   $this = $(this)
+    #   $dialogAppbar = $this.parents(".dialog").find(".dialog-appbar")
+    #
+    #   if $this.scrollTop()
+    #     $dialogAppbar.addClass("scroll-shadow")
+    #   else
+    #     $dialogAppbar.removeClass("scroll-shadow")
 
     false
 

data/vendor/assets/stylesheets/base/variables/colors.scss

@@ -1,8 +1,9 @@
 // Defaults to override
 //----------------------------------------------------------------------
 
-$body-background-color: #fafafa !default;
+$body-background-color: #ececec !default;
 $color-primary: #2196f3 !default;
+$color-primary: #4285f4 !default;
 $color-secondary: #db4437 !default;
 
 // SCSS maps of all colors

data/vendor/assets/stylesheets/base/variables/dimensions.scss

@@ -6,9 +6,9 @@
 //----------------------------------------------------------------------
 
 $toolbar-height-device-small:   56px !default;
-$toolbar-height-device-medium:  64px !default;
-$toolbar-height-device-large:   72px !default;
-$toolbar-height-device-xlarge:  72px !default;
+$toolbar-height-device-medium:  56px !default;
+$toolbar-height-device-large:   64px !default;
+$toolbar-height-device-xlarge:  64px !default;
 
 $toolbar-button-height: 48px !default;
 
@@ -20,16 +20,7 @@ $sidebar-width: 250px !default;
 // Text fields
 //----------------------------------------------------------------------
 
-$text-fields: "
-  input[type='email'],
-  input[type='number'],
-  input[type='search'],
-  input[type='text'],
-  input[type='tel'],
-  input[type='url'],
-  input[type='password'],
-  textarea
-";
+$text-fields: "input[type='email'], input[type='number'], input[type='search'], input[type='text'], input[type='tel'], input[type='url'], input[type='password'], textarea";
 
 // Dimensions - lists
 //----------------------------------------------------------------------

data/vendor/assets/stylesheets/components/badges.scss

@@ -8,13 +8,12 @@
 
 .badge {
   display: inline-block;
-  font-size: $font-size-normal;
   letter-spacing: 0.5px;
   min-width: 18px;
-  padding: $spacing-small;
+  padding: 2px 8px;
   text-align: center;
   vertical-align: middle;
-  @include rounded-corners;
+  @include rounded-corners(20px);
 }
 
 .badge-xsmall {

data/vendor/assets/stylesheets/components/buttons.scss

@@ -10,6 +10,8 @@
 // $buttons: "button, .button, input[type='submit'], input[type='reset'], input[type='button']";
 $buttons: ".button";
 
+$default-button-rounded-corners: 4px;
+
 // Buttons - base
 //----------------------------------------------------------------------
 
@@ -33,7 +35,7 @@ $buttons: ".button";
   @include flex-parent();
   display: inline-flex;
   @include no-touch-highlight;
-  @include rounded-corners;
+  @include rounded-corners($default-button-rounded-corners);
   @include transition(all 0.2s ease-in-out);
   flex: 0 1 auto; // Stop buttons from expanding
 
@@ -108,22 +110,22 @@ $buttons: ".button";
   @include rounded-corners(50%);
   @include transition(background-color 0.30s ease, color 0.30s ease);
 
-  &:active {
-    background-color: darken(color("hover"), 5%);
-  }
+  // &:active {
+  //   background-color: darken(color("hover"), 5%);
+  // }
 }
 
 // Devices with pointers
 @media (hover: hover) {
-  .button-icon {
-    &:hover {
-      background-color: color("hover");
-    }
-
-    &:active {
-      background-color: darken(color("hover"), 5%);
-    }
-  }
+  // .button-icon {
+  //   &:hover {
+  //     background-color: color("hover");
+  //   }
+  //
+  //   &:active {
+  //     background-color: darken(color("hover"), 5%);
+  //   }
+  // }
 }
 
 // Button icon - sizes
@@ -131,13 +133,11 @@ $buttons: ".button";
 
 .button-icon-small {
   height: $button-icon-height * 0.8;
-  // line-height: $button-icon-height * 0.8;
   width: $button-icon-height * 0.8;
 }
 
 .button-icon-large {
   height: $button-icon-height * 1.2;
-  // line-height: $button-icon-height * 1.2;
   width: $button-icon-height * 1.2;
 }
 
@@ -174,6 +174,7 @@ $buttons: ".button";
 @each $color-name, $color in $colors {
   .button-raised-#{$color-name} {
     background-color: $color;
+
     @if $color-name == "white" {
       color: color("black");
     } @else if $color-name == "offwhite" {
@@ -181,7 +182,9 @@ $buttons: ".button";
     } @else {
       color: color("white");
     }
+
     // @include box-shadow(0 1px 2px 0 rgba(0, 0, 0, 0.4));
+    @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.24));
 
     &:hover {
       background-color: lighten($color, 10%);
@@ -189,7 +192,7 @@ $buttons: ".button";
 
     &:active {
       background-color: darken($color, 5%);
-      @include box-shadow(0 3px 12px 0 rgba(0, 0, 0, 0.5));
+      @include box-shadow(0 3px 9px 0 rgba(0, 0, 0, 0.5));
     }
   }
 }
@@ -262,7 +265,7 @@ $buttons: ".button";
   position: fixed !important;
   right: $spacing-large;
   width: $button-fab-height;
-  z-index: $layout-depth + 1;
+  @include elevation(12);
   @include box-shadow(0 3px 7px 0 rgba(0, 0, 0, 0.4));
   @include rounded-corners(250px);
   @include text-shadow(0 -1px 0 color("helper"));
@@ -309,7 +312,7 @@ $buttons: ".button";
   height: $button-fab-height;
   position: fixed !important;
   right: $spacing-large;
-  z-index: $layout-depth + 1;
+  @include elevation(12);
 }
 
 // Buttons - disabled

data/vendor/assets/stylesheets/components/cards.scss

@@ -58,7 +58,7 @@
 }
 
 .card-header-secondary-actions {
-  @include list-item-secondary-actions();
+  @include list-item-secondary();
 }
 
 @media (min-width: $device-small) {

data/vendor/assets/stylesheets/components/dialogs.scss

@@ -11,7 +11,7 @@
   top: 0;
   width: 100%;
   will-change: scale, opacity;
-  z-index: $elevation-overlay;
+  @include elevation(24);
   @include flex-parent();
   @include flex-vertical-align-center();
   @include transform(scale(1.15));
@@ -85,18 +85,18 @@
   height: $dialog-header-height;
   padding: 0 $spacing-small;
   position: relative;
-  z-index: $dialog-depth + 1;
+  @include elevation(24);
 }
 
 .dialog-appbar-icon {
-  width: $appbar-button-height;
+  width: $toolbar-button-height;
 
   // To match up with .appbar-button
   .button-icon {
     font-size: $font-size-icon;
-    height: $appbar-button-height;
-    line-height: $appbar-button-height;
-    width: $appbar-button-height;
+    height: $toolbar-button-height;
+    line-height: $toolbar-button-height;
+    width: $toolbar-button-height;
   }
 }
 
@@ -121,7 +121,7 @@
 }
 
 .dialog-appbar-secondary-actions {
-  @include list-item-secondary-actions();
+  @include list-item-secondary();
   text-align: right;
   @include flex-parent();
 }
@@ -139,14 +139,14 @@
 .dialog-header-icon {
   padding-top: $spacing-normal;
   text-align: center;
-  width: $appbar-button-height;
+  width: $toolbar-button-height;
 
   // To match up with .appbar-button
   .button-icon {
     font-size: $font-size-icon;
-    height: $appbar-button-height;
-    line-height: $appbar-button-height;
-    width: $appbar-button-height;
+    height: $toolbar-button-height;
+    line-height: $toolbar-button-height;
+    width: $toolbar-button-height;
   }
 }
 
@@ -170,7 +170,7 @@
 }
 
 .dialog-header-secondary-actions {
-  @include list-item-secondary-actions();
+  @include list-item-secondary();
 }
 
 @media (min-width: $device-small) {

data/vendor/assets/stylesheets/components/layout/toolbar.scss

@@ -9,7 +9,6 @@
   position: absolute;
   right: 0;
   top: 0;
-  width: 100%;
   @include elevation(4);
   @include transition(box-shadow 0.2s ease);
   @include flex-parent();
@@ -21,6 +20,8 @@
 
 .toolbar-section {
   @include flex-parent();
+  display: inline-flex;
+  flex: 1;
 }
 
 // Toolbar - title
@@ -28,7 +29,8 @@
 
 .toolbar-title {
   flex: 1; // Fill up empty space
-  font-size: $font-size-normal;
+  font-size: $font-size-normal + 2px;
+  margin-left: $spacing-small;
   @include flex-align-left();
   @include font-smoothing();
   @include truncate-text();
@@ -48,6 +50,13 @@
   padding-top: $spacing-xsmall;
 }
 
+@media (min-width: $device-medium) {
+  .toolbar-title-supertext,
+  .toolbar-title-subtext {
+    font-size: $font-size-normal;
+  }
+}
+
 // Toolbar - button icon
 //----------------------------------------------------------------------
 
@@ -77,6 +86,14 @@
   }
 }
 
+// Special menu button
+@media (min-width: $device-large) {
+  .toolbar-button-icon[data-behavior="show-left-sidebar"] {
+    color: color("disabled");
+    pointer-events: none;
+  }
+}
+
 // Toolbar - medium device
 //----------------------------------------------------------------------
 
@@ -119,7 +136,7 @@
 .toolbar-divider {
   border: 0;
   display: inline-block;
-  height: 80%;
+  height: 60%;
   margin: 0 $spacing-xsmall;
   width: 0;
 }

data/vendor/assets/stylesheets/components/lists.scss

@@ -51,7 +51,7 @@ ol {
 }
 
 .list-item-secondary-actions {
-  @include list-item-secondary-actions();
+  @include list-item-secondary();
 }
 
 // Lists - links in text
@@ -240,5 +240,5 @@ ol {
 }
 
 .list-header-secondary-actions {
-  @include list-item-secondary-actions();
+  @include list-item-secondary();
 }

data/vendor/assets/stylesheets/components/menus.scss

@@ -27,7 +27,7 @@
   transform-origin: 100% 0;
   visibility: hidden;
   will-change: scale;
-  z-index: $menu-depth;
+  @include elevation(8);
   @include box-shadow(0 2px 5px 1px rgba(0, 0, 0, 0.26));
   @include rounded-corners;
   @include transition(all 0.10s ease);

data/vendor/assets/stylesheets/components/search.scss

@@ -92,6 +92,7 @@
     max-width: 300px;
     pointer-events: auto;
     position: relative;
+    @include elevation(6);
     @include flex-parent();
     @include transparency(1);
   }
@@ -99,7 +100,7 @@
   .search-header {
     background-color: rgba(0, 0, 0, 0.08);
     border: 1px solid transparent;
-    height: $appbar-button-height;
+    height: $toolbar-button-height;
     @include rounded-corners(4px);
   }
 
@@ -114,11 +115,11 @@
 
   .search-results {
     border: 1px solid color("divider");
-    border-top: none;
     border-bottom: none;
+    border-top: none;
     pointer-events: none;
     position: absolute;
-    top: $appbar-height-device-medium - 8px;
+    top: $toolbar-height-device-medium - 4px;
     width: 100%;
     @include elevation(24);
     @include box-shadow(0 12px 15px 0 rgba(0,0,0,0.24));
@@ -133,6 +134,7 @@
 
   .search[data-state="active"] {
     max-width: 600px;
+    @include elevation(24);
   }
 }
 
@@ -140,7 +142,11 @@
 //----------------------------------------------------------------------
 
 @media (min-width: $device-large) {
-  // .search {
-  //   max-width: 300px;
-  // }
+  .search-header {
+    height: $toolbar-button-height;
+  }
+
+  .search-results {
+    top: $toolbar-height-device-large - 8px;
+  }
 }

data/vendor/assets/stylesheets/components/snackbars.scss

@@ -20,7 +20,7 @@
   pointer-events: none;
   right: 0;
   will-change: transform;
-  z-index: $dialog-depth + 1;
+  @include elevation(24);
   @include transform(translateY(200%));
   @include transition(transform 0.10s cubic-bezier(0, 0, 0.3, 1));
 

data/vendor/assets/stylesheets/components/spinners.scss

@@ -2,7 +2,7 @@
 //----------------------------------------------------------------------
 
 .page-loader-container {
-  @include flex-center();
+  @include flex-parent();
 }
 
 // Variables
@@ -14,7 +14,7 @@ $spinner-height: 24px;
 //----------------------------------------------------------------------
 
 .spinner-container {
-  @include flex-center();
+  @include flex-parent();
 }
 
 // Spinners - base

data/vendor/assets/stylesheets/components/tabs.scss

@@ -14,7 +14,7 @@
   display: inline-flex;
   flex: none;
   font-size: $font-size-small;
-  font-weight: bold;
+  font-weight: 500;
   justify-content: center;
   height: 100%;
   letter-spacing: 0;
@@ -24,9 +24,9 @@
   padding: 0 12px;
   position: relative;
   text-align: center;
-  text-transform: uppercase;
+  // text-transform: uppercase;
   vertical-align: middle;
-  @include font-smoothing();
+  // @include font-smoothing();
   @include transition(color 0.30s ease, border-color 0.30s ease, background-color 0.30s ease);
 
   &:hover {

data/vendor/assets/stylesheets/dlegr250_material_design.scss

@@ -38,7 +38,6 @@
 @import "components/dividers";
 @import "components/boxes";
 @import "components/buttons";
-@import "components/cursors";
 @import "components/expansion_panels";
 @import "components/draggable";
 @import "components/subheaders";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dlegr250_material_design
 version: !ruby/object:Gem::Version
-  version: 0.5.86
+  version: 0.5.88
 platform: ruby
 authors:
 - Daniel LeGrand
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-08-22 00:00:00.000000000 Z
+date: 2017-09-05 00:00:00.000000000 Z
 dependencies: []
 description: 'WARNING: ALPHA CODE, NOT PRODUCTION READY. ACTIVELY UNDER DEVELOPMENT
   AS OF AUG 2016. Implement Google Material Design spec with modern browsers in mind