dlegr250_material_design 0.4.96 → 0.4.97

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 90e19d7c101c2bc4770ee87d35e0eaf23144bcf6
-  data.tar.gz: 44092d70398352bf025d222a98517ee5a325f881
+  metadata.gz: bcdca658dccf44773413068ee7da685cb6dcdf59
+  data.tar.gz: 5d7e5bafa2a404fd016d6bec38698f2dc7693793
 SHA512:
-  metadata.gz: 5394002f7e4c887065c6d91f4aa6cf3b4e451df4c2d1b64ecfbed3d003913dc9907403d79cdcc5aa18e58c3b6830b1d845df814d18393d39423aba984f89783e
-  data.tar.gz: af575a5501459ab882fee6fe6b9e842f73a2fd3fc61b67ede1868c1e932e6c419b9f6aa654947833f21878074a325aafc7c1cf7411099182ec2cbed20d2598cb
+  metadata.gz: 8023eea056ae44e03dd75663c57c6d4f5d247eaec31655ca5e279d7ada3ac680e4150b7052a5dca2cc2f78de697e4798625bac671a2c0102357be4e8912dbe20
+  data.tar.gz: 1910d4f64413704b27a9b404deb58043e92294ee5a0c452462f9dd3da1661177bd8f19b6941f6dbf0fe1b87027a304c99b6fd4f71d07ff7a0fe19529350bf79b

data/lib/dlegr250_material_design/version.rb

@@ -1,3 +1,3 @@
 module Dlegr250MaterialDesign
-  VERSION = "0.4.96"
+  VERSION = "0.4.97"
 end

data/vendor/assets/javascripts/extensions/jquery.js.coffee

@@ -31,7 +31,7 @@ jQuery.extend jQuery.fn,
 #----------------------------------------------------------------------
 
 jQuery.extend jQuery.fn,
-  replaceWithSpinner: (options) ->
+  replaceWithSpinner: (options = {}) ->
     color = options["color"] || "primary"
     size = options["size"] || "normal"
 

data/vendor/assets/stylesheets/base/mixins.scss

@@ -274,7 +274,16 @@ $default-rounded-corners-radius: 3px;
   font-size: $font-size-normal;
   padding-left: $spacing-normal;
   padding-right: $spacing-normal;
-  @include truncate-text();
+  // @include truncate-text();
+}
+
+@mixin list-item-primary-supertext() {
+  color: color("helper");
+  font-size: $font-size-small;
+  font-weight: normal;
+  padding-bottom: $spacing-xsmall;
+  @include flex-parent-row();
+  // @include truncate-text();
 }
 
 @mixin list-item-primary-subtext() {
@@ -282,7 +291,8 @@ $default-rounded-corners-radius: 3px;
   font-size: $font-size-small;
   font-weight: normal;
   padding-top: $spacing-xsmall;
-  @include truncate-text();
+  @include flex-parent-row();
+  // @include truncate-text();
 }
 
 @mixin list-item-secondary() {

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

@@ -78,6 +78,14 @@ $font-size-normal: 14px;
 $font-size-large: 20px;
 $font-size-xlarge: 34px;
 
+$font-size-10: 10px;
+$font-size-12: 12px;
+$font-size-14: 14px;
+$font-size-16: 16px;
+$font-size-20: 20px;
+$font-size-24: 24px;
+$font-size-34: 34px;
+
 $font-size-text-field: 16px;
 
 $font-size-icon: 24px;
@@ -103,10 +111,15 @@ $dialog-depth: 50;
 // Device breakpoints
 //----------------------------------------------------------------------
 
-$small-width: 400px;
-$medium-width: 760px;
-$large-width: 1000px;
-$xlarge-width: 1200px;
+$size-small: 400px;
+$size-medium: 760px;
+$size-large: 1000px;
+$size-xlarge: 1200px;
+
+$small-width: $size-small;
+$medium-width: $size-medium;
+$large-width: $size-large;
+$xlarge-width: $size-xlarge;
 
 // Convenience variables
 //----------------------------------------------------------------------
@@ -117,6 +130,15 @@ $xlarge-width: 1200px;
 // See: http://www.google.com/design/spec/style/color.html
 //----------------------------------------------------------------------
 
+$color-primary: #2196f3 !default;
+$color-secondary: #db4437 !default;
+
+// Hover color for lists, menus, etc...
+$color-hover: #f3f3f3 !default;
+
+$color-table-hover: #eee;
+$color-table-selected: #f5f5f5;
+
 $colors: (
   "red"           : #db4437,
   "light-red"     : #ffebee,
@@ -151,11 +173,14 @@ $colors: (
   "icon"          : #737373,
   "offwhite"      : rgba(255, 255, 255, 0.6),
   "helper"        : rgba(0, 0, 0, 0.54),
-  "text"          : rgb(51, 51, 51),
+  "placeholder"   : rgba(0, 0, 0, 0.38),
+  "text"          : rgba(0, 0, 0, 0.87), // rgb(51, 51, 51),
   "divider"       : rgba(0, 0, 0, 0.12),
-  "hover"         : #f3f3f3,
-  "light-hover"   : lighten(#f3f3f3, 2%),
-  "snackbar"      : #323232
+  "hover"         : $color-hover,
+  "light-hover"   : lighten($hover-color, 2%),
+  "snackbar"      : #323232,
+  "primary"       : $color-primary,
+  "secondary"     : $color-secondary,
 );
 
 // Easier way to reference $colors map
@@ -170,11 +195,11 @@ $colors: (
 $body-background-color: #fafafa !default;
 
 // appbar and any colored component
-$primary-color: color("blue") !default;
-$secondary-color: color("red") !default;
+// $primary-color: color("blue") !default;
+// $secondary-color: color("red") !default;
 
 // Hover color for lists, menus, etc...
-$hover-color: color("hover") !default;
+// $hover-color: color("hover") !default;
 
 // Appbar only
 $appbar-text-color: color("white") !default;
@@ -186,9 +211,9 @@ $appbar-button-color: color("helper") !default;
 // in the $colors global so you can do color("primary") instead of #fff.
 //----------------------------------------------------------------------
 
-$app-config: (
-  "primary": $primary-color,
-  "secondary": $secondary-color,
-  "hover": $hover-color
-);
-$colors: map-merge(($colors), ($app-config));
+// $app-config: (
+//   "primary": $primary-color,
+//   "secondary": $secondary-color,
+//   "hover": $hover-color
+// );
+// $colors: map-merge(($colors), ($app-config));

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

@@ -0,0 +1,8 @@
+.bordered {
+  border: 1px solid color("divider");
+}
+
+.bordered-rounded {
+  border: 1px solid color("divider");
+  @include rounded-corners();
+}

data/vendor/assets/stylesheets/components/forms/labels.scss

@@ -26,7 +26,7 @@ label.top {
 
 .optional:after {
   color: color("helper");
-  content: "(Optional)";
+  content: " (Optional)";
   font-size: $font-size-small;
   font-style: italic;
   font-weight: normal;

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

@@ -1,9 +1,10 @@
 //======================================================================
+// See: https://material.io/guidelines/components/lists.html#lists-actions
 // EXAMPLE:
 // <div class="list list-bordered list-divided list-hoverable rounded-corners">
 //   <div class="list-item" id="list-item-ID">
 //     <div class="list-item-icon">
-//       <i class="zmdi zmdi-star"></i>
+//       <em class="material-icons">icon_name</em>
 //     </div>
 //     <div class="list-item-primary">
 //       Primary text
@@ -31,274 +32,376 @@ ol {
   }
 }
 
-// Lists - subheader
-//----------------------------------------------------------------------
-
-.list-subheader {
-  color: color("helper");
-  height: 48px;
-  padding: 0 $spacing-normal;
-  @include flex-parent-row();
-}
-
-// Lists - header
-//----------------------------------------------------------------------
-
-.list-header {
-  background-color: #f2f2f2;
-  @include list-item();
-}
-
-.list-header-icon {
-  @include list-item-icon();
-}
-
-.list-header-primary,
-.list-header-secondary {
-  box-sizing: border-box;
-}
-
-.list-header-primary {
-  font-weight: bold;
-  @include list-item-primary();
-}
-
-.list-header-primary-supertext {
-  @include list-item-primary-subtext();
-  padding-top: 0;
-  padding-bottom: $spacing-xsmall;
-}
-
-.list-header-primary-subtext {
-  @include list-item-primary-subtext();
-}
-
-.list-header-secondary {
-  @include list-item-secondary();
-}
-
-.list-header-secondary-actions {
-  @include list-item-secondary-actions();
-}
-
-@media(hover: hover) {
-  .list-header .button-icon:hover {
-    background-color: darken(color("hover"), 10%);
-  }
-}
-
-.list-header .button-icon:active {
-  background-color: darken(color("hover"), 20%);
-}
-
 // Lists - base
 //----------------------------------------------------------------------
 
 .list {
-  background-color: color("white");
-}
 
-.list-bordered {
-  border: 1px solid color("divider");
 }
 
-.list-divided {
-  .list-header,
-  .list-item {
-    border-bottom: 1px solid color("divider");
-  }
-}
-
-// Don't have double lines on last item for bordered and divided
-.list-bordered .list-item:last-child {
-  border-bottom: none;
-}
-
-// Lists - list item
-//----------------------------------------------------------------------
-
 .list-item {
-  @include list-item();
+  @include flex-parent-row-align-top();
 }
 
-// Lists - list item icon
-//----------------------------------------------------------------------
-
 .list-item-icon {
-  @include list-item-icon();
-}
-
-.list-item-icon-circle {
-  background-color: color("divider");
-  font-size: 16px;
-  height: 30px;
-  line-height: 30px;
-  text-align: center;
+  padding: $spacing-normal;
+  padding-left: 0;
+  text-align: left;
   width: 30px;
-  @include rounded-corners(50%);
 }
 
-// Lists - list item primary
-//----------------------------------------------------------------------
+.list-item-icon-primary-action {
 
-.list-item-primary {
-  @include list-item-primary();
 }
 
-.list-item-primary-subtext {
-  @include list-item-primary-subtext();
-}
-
-// Force list-item to wrap text
-.list.force-text-wrap .list-item-primary {
-  @include force-text-wrap();
+.list-item-primary {
+  font-size: $font-size-normal;
+  padding: $spacing-normal;
 }
 
-.list.truncate-overflow-text .list-item-primary {
-  @include truncate-text();
+.list-item-primary-subtext {
+  font-size: $font-size-small;
 }
 
-// Lists - list item secondary
-//----------------------------------------------------------------------
-
 .list-item-secondary {
-  @include list-item-secondary();
-}
-
-.list-item-secondary-actions {
-  @include list-item-secondary-actions();
-}
-
-.list-item-misc {
-  color: color("helper");
-  font-size: $font-size-small;
-  align-self: flex-start;
   padding: $spacing-normal;
+  padding-left: 0;
   text-align: right;
 }
 
-// Lists - hoverable
-//----------------------------------------------------------------------
-
-@media(hover: hover) {
-  .list-hoverable .list-item:hover {
-    background-color: color("hover");
-  }
-}
-
-.list-hoverable {
-  .list-item {
-    @include no-touch-highlight-color(); // Remove blue background on touch
-
-    &:active {
-      background-color: darken(color("hover"), 5%);
-    }
-
-    // Slightly darker than list-item:hover
-    .button-icon {
-      &:hover {
-        background-color: darken(color("hover"), 5%);
-      }
-
-      &:active {
-        background-color: darken(color("hover"), 15%);
-      }
-    }
-  }
-}
-
-.list-no-hover .list-item {
-  &:hover,
-  &:active {
-    background-color: transparent !important;
-  }
-}
-
-// Links in list items
-//----------------------------------------------------------------------
-
-.list-item-primary-link {
-  color: color("text");
-  font-weight: bold;
-
-  &:hover {
-    color: color("primary");
-  }
-}
-
-.list-item-primary-subtext-link {
-  color: color("text");
-
-  &:hover {
-    color: color("primary");
-  }
+.list-item-secondary-actions {
+  padding: $spacing-small;
+  padding-left: 0;
+  text-align: right;
 }
 
-// Nested list items
+// Lists - modifiers
 //----------------------------------------------------------------------
 
-.list-item-nested-1 {
-  padding-left: $spacing-normal;
-}
-
-.list-item-nested-2 {
-  padding-left: $spacing-normal * 2;
+// Sizes
+.list-one-line .list-item,
+.list-item-one-line {
+  min-height: 48px;
 }
 
-.list-item-nested-3 {
-  padding-left: $spacing-normal * 3;
+.list-one-line-with-avatar .list-item,
+.list-item-one-line-with-avatar {
+  min-height: 56px;
 }
 
-.list-item-nested-4 {
-  padding-left: $spacing-normal * 4;
-}
-
-.list-item-nested-5 {
-  padding-left: $spacing-normal * 5;
+.list-two-lines .list-item,
+.list-item-two-lines {
+  min-height: 72px;
 }
 
-.list-item-nested-6 {
-  padding-left: $spacing-normal * 6;
+.list-three-lines .list-item,
+.list-item-three-lines {
+  min-height: 88px;
 }
 
-// Lists - DRYing up HTML classes
-//----------------------------------------------------------------------
-
-.list-standard {
-  @extend .list-bordered;
-  @extend .list-divided;
-  @extend .list-hoverable;
-  @extend .rounded-corners;
-  @extend .background-color-white;
-
-  .list-item {
-    min-height: 72px;
-  }
-
-  .list-item-primary {
-    @include truncate-text();
+// Dividers between items
+.list-divided {
+  .list-item:not(:last-child) {
+    border-bottom: 1px solid color("divider");
   }
 }
 
-// Lists - sizes
-// Put after .list-standard to overwrite any defaults
-//----------------------------------------------------------------------
+// Hoverable
+.list-hoverable {
 
-.list-header-dense {
-  min-height: 32px;
 }
 
-.list-one-lines .list-item,
-.list-item-one-lines {
-  min-height: 48px !important;
-}
 
-.list-two-lines .list-item,
-.list-item-two-lines {
-  min-height: 72px !important;
-}
-
-.list-three-lines .list-item,
-.list-item-three-lines {
-  min-height: 88px !important;
-}
+// // Lists - header
+// //----------------------------------------------------------------------
+//
+// .list-header {
+//   background-color: #f2f2f2;
+//   @include list-item();
+// }
+//
+// .list-header-icon {
+//   @include list-item-icon();
+// }
+//
+// .list-header-primary,
+// .list-header-secondary {
+//   box-sizing: border-box;
+// }
+//
+// .list-header-primary {
+//   font-weight: bold;
+//   @include list-item-primary();
+// }
+//
+// .list-header-primary-supertext {
+//   @include list-item-primary-subtext();
+//   padding-top: 0;
+//   padding-bottom: $spacing-xsmall;
+// }
+//
+// .list-header-primary-subtext {
+//   @include list-item-primary-subtext();
+// }
+//
+// .list-header-secondary {
+//   @include list-item-secondary();
+// }
+//
+// .list-header-secondary-actions {
+//   @include list-item-secondary-actions();
+// }
+//
+// @media(hover: hover) {
+//   .list-header .button-icon:hover {
+//     background-color: darken(color("hover"), 10%);
+//   }
+// }
+//
+// .list-header .button-icon:active {
+//   background-color: darken(color("hover"), 20%);
+// }
+//
+// // Lists - base
+// //----------------------------------------------------------------------
+//
+// .list {
+//   background-color: color("white");
+// }
+//
+// // Lists - list item
+// //----------------------------------------------------------------------
+//
+// .list-item {
+//   @include list-item();
+// }
+//
+// // Shared among list-item children
+// .list-item-icon,
+// .list-item-primary,
+// .list-item-secondary,
+// .list-item-secondary-actions {
+//   padding-bottom: $spacing-normal;
+//   padding-top: $spacing-normal;
+// }
+//
+// // Lists - list item icon
+// //----------------------------------------------------------------------
+//
+// .list-item-icon {
+//   @include list-item-icon();
+// }
+//
+// .list-item-icon-circle {
+//   background-color: color("divider");
+//   font-size: 16px;
+//   height: 30px;
+//   line-height: 30px;
+//   text-align: center;
+//   width: 30px;
+//   @include rounded-corners(50%);
+// }
+//
+// // Lists - list item primary
+// //----------------------------------------------------------------------
+//
+// .list-item-primary {
+//   @include list-item-primary();
+//   padding: $spacing-normal;
+// }
+//
+// .list-item-primary-supertext {
+//   @include list-item-primary-supertext();
+// }
+//
+// .list-item-primary-subtext {
+//   @include list-item-primary-subtext();
+// }
+//
+// .list-item-primary-subtext .link {
+//   color: color("text");
+//
+//   &:hover {
+//     text-decoration: underline;
+//   }
+// }
+//
+// // Force list-item to wrap text
+// .list.force-text-wrap .list-item-primary {
+//   @include force-text-wrap();
+// }
+//
+// .list.truncate-overflow-text .list-item-primary {
+//   @include truncate-text();
+// }
+//
+// // Lists - list item secondary
+// //----------------------------------------------------------------------
+//
+// .list-item-secondary {
+//   @include list-item-secondary();
+// }
+//
+// .list-item-secondary-actions {
+//   @include list-item-secondary-actions();
+// }
+//
+// .list-item-misc {
+//   color: color("helper");
+//   font-size: $font-size-small;
+//   align-self: flex-start;
+//   padding: $spacing-normal;
+//   text-align: right;
+// }
+//
+// // Lists - hoverable
+// //----------------------------------------------------------------------
+//
+// @media(hover: hover) {
+//   .list-hoverable .list-item:hover {
+//     background-color: color("hover");
+//   }
+// }
+//
+// .list-hoverable {
+//   .list-item {
+//     @include no-touch-highlight-color(); // Remove blue background on touch
+//
+//     &:active {
+//       background-color: darken(color("hover"), 5%);
+//     }
+//
+//     // Slightly darker than list-item:hover
+//     .button-icon {
+//       &:hover {
+//         background-color: darken(color("hover"), 5%);
+//       }
+//
+//       &:active {
+//         background-color: darken(color("hover"), 15%);
+//       }
+//     }
+//   }
+// }
+//
+// .list-no-hover .list-item {
+//   &:hover,
+//   &:active {
+//     background-color: transparent !important;
+//   }
+// }
+//
+// // Links in list items
+// //----------------------------------------------------------------------
+//
+// .list-item-primary-subtext-link {
+//   color: color("text");
+//
+//   &:hover {
+//     text-decoration: underline;
+//   }
+// }
+//
+// // Nested list items
+// //----------------------------------------------------------------------
+//
+// .list-item-nested-1 {
+//   padding-left: $spacing-normal;
+// }
+//
+// .list-item-nested-2 {
+//   padding-left: $spacing-normal * 2;
+// }
+//
+// .list-item-nested-3 {
+//   padding-left: $spacing-normal * 3;
+// }
+//
+// .list-item-nested-4 {
+//   padding-left: $spacing-normal * 4;
+// }
+//
+// .list-item-nested-5 {
+//   padding-left: $spacing-normal * 5;
+// }
+//
+// .list-item-nested-6 {
+//   padding-left: $spacing-normal * 6;
+// }
+//
+// // Lists - DRYing up HTML classes
+// //----------------------------------------------------------------------
+//
+// .list-standard {
+//   @extend .list-bordered;
+//   @extend .list-divided;
+//   @extend .list-hoverable;
+//   @extend .rounded-corners;
+//   @extend .background-color-white;
+//
+//   .list-item {
+//     min-height: 72px;
+//   }
+//
+//   .list-item-primary {
+//     @include truncate-text();
+//   }
+// }
+//
+// // Lists - sizes
+// // Put after .list-standard to overwrite any defaults
+// //----------------------------------------------------------------------
+//
+// .list-header-dense {
+//   min-height: 32px;
+// }
+//
+// .list-one-lines .list-item,
+// .list-item-one-lines {
+//   min-height: 48px !important;
+// }
+//
+// .list-two-lines .list-item,
+// .list-item-two-lines {
+//   min-height: 72px !important;
+// }
+//
+// .list-three-lines .list-item,
+// .list-item-three-lines {
+//   min-height: 88px !important;
+// }
+//
+// // Lists - modifiers
+// //----------------------------------------------------------------------
+//
+// .list-bordered {
+//   border: 1px solid color("divider");
+// }
+//
+// .list-divided {
+//   .list-header,
+//   .list-item {
+//     border-bottom: 1px solid color("divider");
+//   }
+// }
+//
+// // Don't have double lines on last item for bordered and divided
+// .list-bordered .list-item:last-child {
+//   border-bottom: none;
+// }
+//
+// .list-align-top .list-item {
+//   @include flex-parent-row-align-top();
+// }
+//
+// .list-truncate-text {
+//   .list-item > * {
+//     @include truncate-text();
+//   }
+// }
+//
+// .list-force-text-wrap {
+//   .list-item > * {
+//     @include force-text-wrap();
+//   }
+// }

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

@@ -1,4 +1,5 @@
 //======================================================================
+// See: https://material.io/guidelines/components/subheaders.html#subheaders-grid-subheaders
 // EXAMPLE:
 // <div class="subheader">Text...</div>
 //======================================================================
@@ -7,7 +8,5 @@
   color: color("helper");
   font-weight: bold;
   font-size: $font-size-normal;
-  line-height: 48px;
-  min-height: 48px;
-  padding: 0 $spacing-normal;
+  padding: $spacing-normal;
 }

data/vendor/assets/stylesheets/dlegr250_material_design.scss

@@ -25,6 +25,7 @@
 @import "components/badges";
 @import "components/tabs";
 @import "components/blank_states";
+@import "components/borders";
 @import "components/breadcrumbs";
 @import "components/circles";
 @import "components/menus";

data/vendor/assets/stylesheets/layouts/application/appbar.scss

@@ -92,6 +92,7 @@
   font-weight: 400;
   line-height: 1;
   margin: 0 $spacing-small;
+  max-width: auto;
   pointer-events: none;
   -webkit-font-smoothing: antialiased;
   // @include truncate-text(); // Make optional via class

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dlegr250_material_design
 version: !ruby/object:Gem::Version
-  version: 0.4.96
+  version: 0.4.97
 platform: ruby
 authors:
 - Daniel LeGrand
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-01-31 00:00:00.000000000 Z
+date: 2017-02-03 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
@@ -62,6 +62,7 @@ files:
 - vendor/assets/stylesheets/base/variables.scss
 - vendor/assets/stylesheets/components/badges.scss
 - vendor/assets/stylesheets/components/blank_states.scss
+- vendor/assets/stylesheets/components/borders.scss
 - vendor/assets/stylesheets/components/boxes.scss
 - vendor/assets/stylesheets/components/breadcrumbs.scss
 - vendor/assets/stylesheets/components/buttons.scss