dlegr250_material_design 0.5.88 → 0.5.89

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5758fbd8b0111d7a6a46507488e244fda03963ee
-  data.tar.gz: 20569743001d21368b9c7eac18a6f67552a499d6
+  metadata.gz: d1a2b5a0df2fb1f4cbc948735610c2c8645e0f6f
+  data.tar.gz: 1227882c5a9995ef29b319918886bfa0542d9f85
 SHA512:
-  metadata.gz: 17b879ef63c73d17262b4eb168d4462be112dbea910b8cdf1feee66cd1f4fe03fb2ac9f8a82d5d850b2036ed69ce32bcaf935ce7c09be6a2b7194e0fea9650db
-  data.tar.gz: 36cf4a95784887c6826b55ca852973684bfa72341c5d9c6283599be9c1428cf06152aee08236128e85035c98e8fc66c31cf75ad165434d728abfece3d96dc3de
+  metadata.gz: 15e7f5d419d828ac58729e12a1999db920e46ff694274e1424fe07f33b26356a5894aacc1841e1b780635006b2e67ed33bf583fd49a719bc47f2b5fdf9d08943
+  data.tar.gz: 53f89c15fa2ed012b45f86826007fa285e5dd83321f5b92f9db7ac3040a7d56c6ce8e2228563fd3f68308a23bb674bede4c2ff0a59542ce20d69894136c4afc0

data/lib/dlegr250_material_design/version.rb

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

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

@@ -52,22 +52,20 @@ 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 scroll
+    element.find(".dialog-scrollable").on "scroll", (e) ->
+      $scrollContainer = $(this)
+      $header = element.find(".dialog-toolbar")
+      if $scrollContainer.scrollTop()
+        $header.addClass("scroll-shadow-active")
+      else
+        $header.removeClass("scroll-shadow-active")
 
     false
 
   @closeDialog: (element) ->
     $element = $(element)
     hideButNotDestroy = ($element.attr("data-permanent") == "true")
-    console.log "Hide: #{hideButNotDestroy}"
     $element.removeClass("visible")
     window.setTimeout =>
       if hideButNotDestroy

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

@@ -36,11 +36,13 @@
 // Flexbox
 //----------------------------------------------------------------------
 
+.flex-0 { flex: 0 !important; }
 .flex-1 { flex: 1 !important; }
 .flex-2 { flex: 2 !important; }
 .flex-3 { flex: 3 !important; }
 .flex-4 { flex: 4 !important; }
 
+.flex-container        { @include flex-parent(); }
 .flex-parent           { @include flex-parent(); }
 .flex-parent-align-top { @include flex-parent-align-top(); }
 

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

@@ -157,75 +157,24 @@ $default-rounded-corners-radius: 2px; // As per Material Design spec
   justify-content: center;
 }
 
-@mixin flex-align-left() { justify-content: flex-start; }
-@mixin flex-align-center() { justify-content: center; }
-@mixin flex-align-right() { justify-content: flex-end; }
+@mixin flex-align-left() { justify-content: flex-start !important; }
+@mixin flex-align-center() { justify-content: center !important; }
+@mixin flex-align-right() { justify-content: flex-end !important; }
 
-@mixin flex-vertical-align-top() { align-items: flex-start; }
-@mixin flex-vertical-align-center() { align-items: center; }
-@mixin flex-vertical-align-bottom() { align-items: flex-end; }
+@mixin flex-vertical-align-top() { align-items: flex-start !important; }
+@mixin flex-vertical-align-center() { align-items: center !important; }
+@mixin flex-vertical-align-bottom() { align-items: flex-end !important; }
 
 @mixin flex-parent-align-top() {
   @include flex-parent();
   @include flex-vertical-align-top();
 }
 
-// // For a row of flex elements, such as the appbar.
-// @mixin flex-parent() {
-//   @include flex-parent();
-//   align-items: center;
-//   -ms-flex-align: center;
-//   -webkit-align-items: center;
-//   -webkit-box-align: center;
-//   flex-direction: row;
-//   flex-wrap: nowrap;
-//   justify-content: flex-start;
-// }
-//
-// @mixin flex-parent() {
-//   @include flex-parent();
-//   flex: 1 1 auto;
-//   justify-content: center;
-// }
-//
-// @mixin flex-parent-row-align-right() {
-//   @include flex-parent();
-//   flex: 1;
-//   justify-content: flex-end;
-// }
-//
-// @mixin flex-parent-row-align-top() {
-//   @include flex-parent();
-//   align-items: flex-start;
-//   -ms-flex-align: flex-start;
-//   -webkit-align-items: flex-start;
-//   -webkit-box-align: flex-start;
-// }
-
-// // Center elements vertically and horizontally
-// @mixin flex-center() {
-//   @include flex-parent();
-//   align-items: center;
-//   -ms-flex-align: center;
-//   -webkit-align-items: center;
-//   -webkit-box-align: center;
-//   flex-direction: column;
-//   flex-wrap: nowrap;
-//   justify-content: center;
-//   height: 100%;
-//   width: 100%;
-// }
-
-// Grid list
-// @mixin flex-grid-list() {
-//   @include flex-parent();
-//   align-items: flex-start;
-//   -ms-flex-align: flex-start;
-//   -webkit-align-items: flex-start;
-//   -webkit-box-align: flex-start;
-//   flex-direction: row;
-//   flex-wrap: wrap;
-// }
+@mixin flex-section() {
+  @include flex-parent();
+  display: inline-flex;
+  flex: 1;
+}
 
 // Boxes
 //----------------------------------------------------------------------
@@ -374,3 +323,40 @@ $default-rounded-corners-radius: 2px; // As per Material Design spec
   -moz-osx-font-smoothing: grayscale; // Firefox
   font-feature-settings: "liga"; // IE
 }
+
+// // Toolbars
+// //----------------------------------------------------------------------
+//
+// @mixin toolbar() {
+//   border-bottom: 1px solid color("divider");
+//   height: $toolbar-height-device-small;
+//   left: 0;
+//   padding: 0 $spacing-small;
+//   right: 0;
+//   @include elevation(4);
+//   @include transition(box-shadow 0.2s ease);
+//   @include flex-parent();
+//
+//   @media (min-width: $device-medium) {
+//     & {
+//       height: $toolbar-height-device-medium;
+//       padding: 0 $spacing-normal;
+//     }
+//   }
+//
+//   @media (min-width: $device-large) {
+//     & {
+//       height: $toolbar-height-device-large;
+//     }
+//   }
+//
+//   @media (min-width: $device-xlarge) {
+//     & {
+//       height: $toolbar-height-device-xlarge;
+//     }
+//   }
+// }
+//
+// @mixin toolbar-title() {
+//
+// }

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

@@ -17,26 +17,42 @@
 }
 
 .badge-xsmall {
-  font-size: $font-size-small;
-  height: 28px;
-  line-height: 28px;
-  min-width: $button-height * 0.6;
-  padding: 0 $spacing-xsmall;
+  font-size: $font-size-xsmall;
 }
 
 .badge-small {
   font-size: $font-size-small;
-  height: $button-height-dense !important;
-  line-height: $button-height-dense !important;
-  min-width: $button-height * 0.8;
-  padding: 0 $spacing-small;
+}
+
+.badge-normal {
+  font-size: $font-size-normal;
 }
 
 .badge-large {
-  height: $button-height-large !important;
-  line-height: $button-height-large !important;
+  font-size: $font-size-large;
 }
 
+// .badge-xsmall {
+//   font-size: $font-size-small;
+//   height: 28px;
+//   line-height: 28px;
+//   min-width: $button-height * 0.6;
+//   padding: 0 $spacing-xsmall;
+// }
+//
+// .badge-small {
+//   font-size: $font-size-small;
+//   height: $button-height-dense !important;
+//   line-height: $button-height-dense !important;
+//   min-width: $button-height * 0.8;
+//   padding: 0 $spacing-small;
+// }
+//
+// .badge-large {
+//   height: $button-height-large !important;
+//   line-height: $button-height-large !important;
+// }
+
 // Badges - colors
 //----------------------------------------------------------------------
 

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

@@ -76,88 +76,85 @@
   .dialog-xlarge { width: $dialog-width-xlarge !important; }
 }
 
-// Dialogs - appbar
+// .dialog-toolbar
 //----------------------------------------------------------------------
 
-.dialog-appbar {
-  @include flex-parent();
+.dialog-toolbar {
   border-bottom: 1px solid color("divider");
-  height: $dialog-header-height;
+  height: $toolbar-height-device-small;
   padding: 0 $spacing-small;
-  position: relative;
-  @include elevation(24);
+  @include elevation(4);
+  @include flex-parent();
+  @include transition(box-shadow 0.2s ease);
 }
 
-.dialog-appbar-icon {
-  width: $toolbar-button-height;
+@media (min-width: $device-medium) {
+  .dialog-toolbar {
+    height: $toolbar-height-device-medium;
+  }
+}
 
-  // To match up with .appbar-button
-  .button-icon {
-    font-size: $font-size-icon;
-    height: $toolbar-button-height;
-    line-height: $toolbar-button-height;
-    width: $toolbar-button-height;
+@media (min-width: $device-large) {
+  .dialog-toolbar {
+    height: $toolbar-height-device-large;
   }
 }
 
-.dialog-appbar-title {
-  @include list-item-primary();
+@media (min-width: $device-xlarge) {
+  .dialog-toolbar {
+    height: $toolbar-height-device-xlarge;
+  }
+}
+
+// Line up buttons with content
+.dialog-toolbar .button {
+  margin-right: $spacing-small;
+}
+
+// .dialog-toolbar-title
+//----------------------------------------------------------------------
+
+.dialog-toolbar-title {
   color: color("icon");
   flex: 1;
   font-size: $font-size-normal + 2px;
   font-weight: 400;
-  padding-left: $spacing-small;
-  padding-right: $spacing-small;
+  margin-left: $spacing-small;
   @include font-smoothing();
   @include truncate-text();
 }
 
-.dialog-appbar-title-subtext {
-  @include list-item-primary-subtext();
-}
-
-.dialog-appbar-secondary {
-  @include list-item-secondary();
-}
+// .dialog-toolbar-actions
+//----------------------------------------------------------------------
 
-.dialog-appbar-secondary-actions {
-  @include list-item-secondary();
-  text-align: right;
-  @include flex-parent();
+.dialog-toolbar-actions {
+  @include flex-section();
+  @include flex-align-right();
+  flex: 0;
 }
 
-// Dialogs - header
+// .dialog-header
 //----------------------------------------------------------------------
 
 .dialog-header {
-  @include flex-parent();
-  @include flex-vertical-align-top();
   border-bottom: 1px solid color("divider");
-  padding: 0 $spacing-small;
+  font-size: $font-size-normal + 2px;
+  font-weight: bold;
+  padding: $spacing-normal;
+  @include flex-parent();
+  // @include flex-align-left();
+  // @include flex-vertical-align-top();
+  @include font-smoothing();
 }
 
 .dialog-header-icon {
-  padding-top: $spacing-normal;
-  text-align: center;
-  width: $toolbar-button-height;
-
-  // To match up with .appbar-button
-  .button-icon {
-    font-size: $font-size-icon;
-    height: $toolbar-button-height;
-    line-height: $toolbar-button-height;
-    width: $toolbar-button-height;
-  }
+  @include list-item-icon();
 }
 
 .dialog-header-primary {
-  @include font-smoothing();
-  @include list-item-primary();
+  // @include flex-section();
+  // @include flex-align-left();
   flex: 1;
-  font-size: $font-size-normal + 2px;
-  // font-weight: 400;
-  font-weight: bold;
-  padding: $spacing-normal;
 }
 
 .dialog-header-primary-subtext {
@@ -165,44 +162,59 @@
 }
 
 .dialog-header-secondary {
-  @include list-item-secondary();
-  padding-top: $spacing-normal;
-}
-
-.dialog-header-secondary-actions {
-  @include list-item-secondary();
-}
-
-@media (min-width: $device-small) {
-  .dialog-header-primary {
-    font-size: $font-size-large;
-  }
+  @include flex-section();
+  @include flex-align-right();
+  flex: 0;
 }
 
 // Dialogs - content
 //----------------------------------------------------------------------
 
-.dialog-content {
-  padding: $spacing-normal;
+.dialog-scrollable {
+  max-height: calc(100vh - #{$toolbar-height-device-small});
+  overflow-y: auto;
 }
 
-.dialog-scrollable,
-.dialog-scrollable-no-actions {
-  max-height: calc(100vh - #{$dialog-header-height}); // For dialog-header
-  overflow-x: hidden;
-  overflow-y: auto;
+@media (min-width: $device-medium) {
+  .dialog-scrollable {
+    max-height: calc(90vh - #{$toolbar-height-device-medium});
+  }
 }
 
-@media (min-width: $device-small) {
+@media (min-width: $device-large) {
   .dialog-scrollable {
-    max-height: calc(90vh - #{$dialog-header-height * 2}); // For dialog-header and dialog-actions
+    max-height: calc(90vh - #{$toolbar-height-device-large});
   }
+}
 
-  .dialog-scrollable-no-actions {
-    max-height: calc(90vh - #{$dialog-header-height}); // For dialog-header and dialog-actions
+@media (min-width: $device-xlarge) {
+  .dialog-scrollable {
+    max-height: calc(90vh - #{$toolbar-height-device-xlarge});
   }
 }
 
+.dialog-content {
+  // height: 1000px;
+}
+
+
+// .dialog-scrollable,
+// .dialog-scrollable-no-actions {
+//   max-height: calc(100vh - #{$dialog-header-height}); // For dialog-header
+//   overflow-x: hidden;
+//   overflow-y: auto;
+// }
+//
+// @media (min-width: $device-small) {
+//   .dialog-scrollable {
+//     max-height: calc(90vh - #{$dialog-header-height * 2}); // For dialog-header and dialog-actions
+//   }
+//
+//   .dialog-scrollable-no-actions {
+//     max-height: calc(90vh - #{$dialog-header-height}); // For dialog-header and dialog-actions
+//   }
+// }
+
 // Dialogs - actions
 //----------------------------------------------------------------------
 
@@ -216,22 +228,59 @@
 // Dialog - full height
 //----------------------------------------------------------------------
 
-.dialog-full-height {
-  height: 100% !important;
+.dialog-full-height .dialog-scrollable {
+  height: calc(100vh - #{$toolbar-height-device-small});
+}
 
-  .dialog-scrollable-no-actions {
-    height: calc(100vh - 64px);
+@media (min-width: $device-medium) {
+  .dialog-full-height .dialog-scrollable {
+    height: calc(90vh - #{$toolbar-height-device-medium});
   }
 }
 
+@media (min-width: $device-large) {
+  .dialog-full-height .dialog-scrollable {
+    height: calc(90vh - #{$toolbar-height-device-large});
+  }
+}
+
+// Dialog - full width
+//----------------------------------------------------------------------
+
+.dialog-full-width {
+  width: 100% !important;
+}
+
 @media (min-width: $device-medium) {
-  .dialog-full-height {
-    .dialog-scrollable-no-actions {
-      height: calc(90vh - 64px);
-    }
+  .dialog-full-width {
+    width: 90% !important;
   }
 }
 
+
+
+// .dialog-full-height {
+//
+//   // height: 100% !important;
+//
+//   .dialog-scrollable,
+//   .dialog-scrollable-no-actions {
+//     height: calc(100vh - 64px);
+//   }
+// }
+//
+// @media (min-width: $device-medium) {
+//   .dialog-full-height {
+//     .dialog-scrollable {
+//       height: calc(90vh - 128px);
+//     }
+//
+//     .dialog-scrollable-no-actions {
+//       height: calc(90vh - 64px);
+//     }
+//   }
+// }
+
 // Dialogs - simple
 //----------------------------------------------------------------------
 
@@ -249,3 +298,7 @@
     text-align: right;
   }
 }
+
+.dialog-simple-content {
+  padding: 0 $spacing-normal;
+}

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

@@ -11,6 +11,7 @@
 .divider,
 .spacer {
   display: block;
+  height: 1px;
 }
 
 // Divider with line
@@ -19,7 +20,6 @@
 .divider {
   border: none;
   border-bottom: 1px solid color("divider");
-  height: 0;
   margin: 0;
 }
 
@@ -34,7 +34,6 @@
 
 .spacer {
   border: none;
-  height: 0;
   margin: 0;
 }
 

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

@@ -4,27 +4,17 @@
 .toolbar {
   border-bottom: 1px solid color("divider");
   height: $toolbar-height-device-small;
-  left: 0;
+  // left: 0;
   padding: 0 $spacing-small;
-  position: absolute;
-  right: 0;
-  top: 0;
+  // position: absolute;
+  // right: 0;
+  // top: 0;
   @include elevation(4);
   @include transition(box-shadow 0.2s ease);
   @include flex-parent();
 }
 
-// Toolbar - section
-// Allow CSS classes to override default center
-//----------------------------------------------------------------------
-
-.toolbar-section {
-  @include flex-parent();
-  display: inline-flex;
-  flex: 1;
-}
-
-// Toolbar - title
+// .toolbar-title
 //----------------------------------------------------------------------
 
 .toolbar-title {
@@ -40,14 +30,7 @@
 .toolbar-title-subtext {
   font-size: $font-size-small;
   @include truncate-text();
-}
-
-.toolbar-title-supertext {
-  padding-bottom: $spacing-xsmall;
-}
-
-.toolbar-title-subtext {
-  padding-top: $spacing-xsmall;
+  @include transparency(0.8);
 }
 
 @media (min-width: $device-medium) {
@@ -57,7 +40,7 @@
   }
 }
 
-// Toolbar - button icon
+// .toolbar-button-icon
 //----------------------------------------------------------------------
 
 .toolbar-button-icon {
@@ -65,10 +48,10 @@
   border: none;
   color: color("helper");
   cursor: pointer;
-  height: 48px;
+  height: $toolbar-button-height;
   outline: none;
   text-align: center;
-  width: 48px;
+  width: $toolbar-button-height;
   @include material-icons();
   @include no-touch-highlight-color();
   @include rounded-corners(50%);
@@ -81,8 +64,14 @@
 }
 
 @media (hover: hover) {
-  .toolbar-button-icon:hover {
-    background-color: rgba(0, 0, 0, 0.12);
+  .toolbar-button-icon {
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.12);
+    }
+
+    &:active {
+      background-color: rgba(0, 0, 0, 0.20);
+    }
   }
 }
 
@@ -100,6 +89,7 @@
 @media (min-width: $device-medium) {
   .toolbar {
     height: $toolbar-height-device-medium;
+    padding: 0 $spacing-normal;
   }
 
   .toolbar-title {
@@ -125,10 +115,21 @@
 
 @media (min-width: $device-xlarge) {
   .toolbar {
-    height: $toolbar-height-device-large;
+    height: $toolbar-height-device-xlarge;
   }
 }
 
+// Toolbar - section
+// Allow CSS classes to override default center
+//----------------------------------------------------------------------
+
+.toolbar-section,
+.flex-section {
+  @include flex-parent();
+  display: inline-flex;
+  flex: 1;
+}
+
 // Toolbar - spacer/divider
 //----------------------------------------------------------------------
 

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

@@ -10,3 +10,8 @@
   font-size: $font-size-normal;
   padding: $spacing-normal;
 }
+
+.header {
+  font-size: $font-size-large;
+  font-weight: bold;
+}

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

@@ -60,7 +60,8 @@
   color: color("helper");
 }
 
-.td-secondary-actions {
+.td-secondary-actions,
+.td-actions {
   padding: $spacing-small;
   text-align: right;
   width: 64px;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dlegr250_material_design
 version: !ruby/object:Gem::Version
-  version: 0.5.88
+  version: 0.5.89
 platform: ruby
 authors:
 - Daniel LeGrand
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-09-05 00:00:00.000000000 Z
+date: 2017-09-09 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