dlegr250_material_design 0.5.69 → 0.5.70

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5b376788f2d6be7ac3bb61cddc2cf55f39444f80
-  data.tar.gz: 80e7db0a4ed487802d5b488a6cc3a0ab41eda84c
+  metadata.gz: 0cb246589cf9c3eb3003dff6fea6c26eb64d84c9
+  data.tar.gz: dea273ed62a3f6ac06fcec564973675a2e2b0b7e
 SHA512:
-  metadata.gz: 56f975df3539ef0e9a84f669d1fdae3de70d6230acc2af92f35147dc097aa97a7dd6de43e63224b6f6095313ec8293d0542cb1d16024dc746d6c8b3667faa01d
-  data.tar.gz: 10a281e8a6fddd3523430516ff44a94f385be888713bde91d0a3e9d6ca6a9e5a46487bd988691c60c1279d1081cd7d0184ecdecb5ece8ea8ef926fcd318b2a0a
+  metadata.gz: a3e9fdc7a5d9547e84089dac54364d6582494703fec9cbcb0a610e3f7a94bf2d9013c51d9b3cae184b2acc06e73dfa59c40dbbd863d04b88da780e520aca7379
+  data.tar.gz: 70ffd3c27997a60071a50181b133a05a48fdb1c39f084cfe267970b852d1b46005f30be11df0b739bbd97177c10c741b6571dafd3ec681730cf85a4e7cd43e41

data/lib/dlegr250_material_design/version.rb

@@ -1,3 +1,3 @@
 module Dlegr250MaterialDesign
-  VERSION = "0.5.69"
+  VERSION = "0.5.70"
 end

data/vendor/assets/javascripts/components/{html_editor.coffee → DEPRECATED_html_editor.coffee}

@@ -1,4 +1,4 @@
-class App.MD.HtmlEditor
+class App.MD.DEPRECATED.HtmlEditor
   constructor: (element, options = {}) ->
     @$element = $(element)
     @format = options["format"] || "simple"

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

@@ -16,6 +16,7 @@
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
+  outline: none;
 }
 
 html,

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

@@ -54,6 +54,8 @@
 // Constrained to max size to center content
 //----------------------------------------------------------------------
 
+.constrained,
+.constrained-xsmall,
 .constrained-small,
 .constrained-medium,
 .constrained-large,
@@ -62,10 +64,11 @@
   @include full-width();
 }
 
-.constrained-small { max-width: $width-small; }
-.constrained-medium { max-width: $width-medium; }
-.constrained-large { max-width: $width-large; }
-.constrained-xlarge { max-width: $width-xlarge; }
+.constrained-xsmall { max-width: $device-xsmall; }
+.constrained-small { max-width: $device-small; }
+.constrained-medium { max-width: $device-medium; }
+.constrained-large { max-width: $device-large; }
+.constrained-xlarge { max-width: $device-xlarge; }
 
 // Padding
 //----------------------------------------------------------------------
@@ -133,6 +136,7 @@
 .unbold { font-weight: normal !important; }
 .italic { font-style: italic; }
 .uppercase { text-transform: uppercase; }
+.capitalize { text-transform: capitalize; }
 .lowercase { text-transform: lowercase; }
 
 // Rounded corners
@@ -201,10 +205,11 @@
 // Widths
 //----------------------------------------------------------------------
 
-.width-small { width: $width-small; }
-.width-medium { width: $width-medium; }
-.width-large { width: $width-large; }
-.width-xlarge { width: $width-xlarge; }
+.width-xsmall { width: $device-xsmall; }
+.width-small { width: $device-small; }
+.width-medium { width: $device-medium; }
+.width-large { width: $device-large; }
+.width-xlarge { width: $device-xlarge; }
 
 // Media query classes for various device sizes
 //----------------------------------------------------------------------
@@ -220,7 +225,7 @@
   display: none;
 }
 
-@media (min-width: $width-medium) {
+@media (min-width: $device-medium) {
   .small-only {
     display: none;
   }
@@ -231,7 +236,7 @@
   }
 }
 
-@media (min-width: $width-large) {
+@media (min-width: $device-large) {
   .small-only,
   .small-and-medium-only,
   .medium-only {
@@ -251,7 +256,8 @@
 // there.
 //----------------------------------------------------------------------
 
-@media (min-width: $width-small) {}
-@media (min-width: $width-medium) {}
-@media (min-width: $width-large) {}
-@media (min-width: $width-xlarge) {}
+@media (min-width: $device-xsmall) {}
+@media (min-width: $device-small) {}
+@media (min-width: $device-medium) {}
+@media (min-width: $device-large) {}
+@media (min-width: $device-xlarge) {}

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

@@ -317,3 +317,10 @@ $default-rounded-corners-radius: 3px;
 @mixin font-smoothing() {
   -webkit-font-smoothing: antialiased;
 }
+
+// DRY borders
+//----------------------------------------------------------------------
+
+@mixin border($color: #aaa) {
+  @include box-shadow(0 0 1px $color);
+}

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

@@ -6,6 +6,7 @@
 //----------------------------------------------------------------------
 
 $application-container-min-width: 300px;
+$body-background-color: #eee !default;
 
 // Dimensions - appbar
 //----------------------------------------------------------------------
@@ -16,6 +17,11 @@ $appbar-height: $appbar-height-medium !default;
 
 $appbar-button-height: 48px !default;
 
+// Dimensions - toolbar
+//----------------------------------------------------------------------
+
+$toolbar-height: $appbar-height !default;
+
 // Dimensions - sidebars
 //----------------------------------------------------------------------
 
@@ -85,6 +91,8 @@ $button-icon-height: $button-height;
 
 $button-fab-height: 56px;
 
+$button-fab-min-height: 40px;
+
 // Dimensions - inputs (text-fields, etc...)
 //----------------------------------------------------------------------
 
@@ -124,16 +132,17 @@ $spacing-xlarge: 32px;
 // See: https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 //----------------------------------------------------------------------
 
-$elevation-1: 1;
-$elevation-2: 2;
-$elevation-3: 3;
-$elevation-4: 4;
-$elevation-6: 6;
-$elevation-8: 8;
-$elevation-9: 9;
-$elevation-12: 12;
-$elevation-16: 16;
-$elevation-24: 24;
+$elevation-1: 1;   // Switch
+$elevation-2: 2;   // Card, button
+$elevation-3: 3;   // Refresh indicator,
+$elevation-4: 4;   // Appbar
+$elevation-6: 6;   // FAB (resting), snackbar
+$elevation-8: 8;   // Bottom nav, menu, raised button
+$elevation-9: 9;   // Submenu
+$elevation-12: 12; // FAB (pressed)
+$elevation-16: 16; // Sidebar, modal bottom sheet
+$elevation-24: 24; // Dialog, pickers
+$elevation-26: 26; // Popups on top of dialogs
 
 // DEPRECATED: USE ELEVATION VARIABLES
 $layout-depth: 10;
@@ -145,12 +154,14 @@ $dialog-depth: 50;
 // Device breakpoints
 //----------------------------------------------------------------------
 
+$device-xsmall: 320px;
 $device-small: 400px;
 $device-medium: 760px;
 $device-large: 1000px;
 $device-xlarge: 1200px;
 
 // DEPRECATED: USE DEVICE VARIABLES
+$width-xsmall: $device-xsmall;
 $width-small: $device-small;
 $width-medium: $device-medium;
 $width-large: $device-large;

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

@@ -19,7 +19,7 @@
 .card {
   background-color: color("white");
   border: 1px solid color("divider");
-  width: $card-width;
+  width: auto;
   @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.2));
   @include rounded-corners;
 }

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

@@ -188,7 +188,8 @@
 .dialog-scrollable,
 .dialog-scrollable-no-actions {
   max-height: calc(100vh - #{$appbar-height}); // For dialog-header
-  overflow: scroll;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 @media (min-width: $width-small) {
@@ -216,13 +217,25 @@
 
 .dialog-full-height {
   height: 100% !important;
+
+  .dialog-scrollable-no-actions {
+    height: calc(100vh - 64px);
+  }
+}
+
+@media (min-width: $width-medium) {
+  .dialog-full-height {
+    .dialog-scrollable-no-actions {
+      height: calc(90vh - 64px);
+    }
+  }
 }
 
 // Dialogs - simple
 //----------------------------------------------------------------------
 
 .dialog-simple {
-  .dialog-appbar {
+  .dialog-header {
     border-bottom: none;
   }
 
@@ -232,5 +245,6 @@
 
   .dialog-actions {
     border-top: 0;
+    text-align: right;
   }
 }

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

@@ -66,6 +66,13 @@ ol {
   }
 }
 
+// Lists - shadows
+//----------------------------------------------------------------------
+
+.list-shadowed {
+  @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.2));
+}
+
 // Lists - modifiers
 //----------------------------------------------------------------------
 
@@ -101,8 +108,7 @@ ol {
 }
 
 .list-bordered {
-  border: 1px solid color("divider");
-  @include rounded-corners();
+  @include box-shadow(0 0 1px color("divider"));
 }
 
 // Dividers between items
@@ -110,31 +116,6 @@ ol {
   border-bottom: 1px solid color("divider");
 }
 
-// Hoverable
-// .list-hoverable {
-//   .list-item {
-//     &:hover { background-color: color("hover"); }
-//     &:active { background-color: darken(color("hover"), 3%); }
-//   }
-//
-//   .button-icon {
-//     &:hover { background-color: darken(color("hover"), 7%); }
-//     &:active { background-color: darken(color("hover"), 12%); }
-//   }
-// }
-//
-// .list-hoverable-blue {
-//   .list-item {
-//     &:hover { background-color: color("hover-blue"); }
-//     &:active { background-color: darken(color("hover-blue"), 3%); }
-//   }
-//
-//   .button-icon {
-//     &:hover { background-color: darken(color("hover-blue"), 7%); }
-//     &:active { background-color: darken(color("hover-blue"), 12%); }
-//   }
-// }
-
 // Hoverable
 .list-hoverable {
   .list-item {
@@ -203,7 +184,7 @@ ol {
 
 .component-list {
   background-color: color("white");
-  border: 1px solid color("divider");
+  @include box-shadow(0 0 1px color("divider"));
   @include rounded-corners();
 
   .list-item {

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

@@ -8,30 +8,66 @@
 }
 
 .tab {
-  @include flex-parent-row-align-center();
   border-bottom: 2px solid transparent;
   color: color("helper");
   cursor: pointer;
+  font-weight: bold;
+
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex: 1 1 auto;
-  font-size: $font-size-small;
-  font-weight: 600;
-  height: 100%;
-  max-width: 150px;
-  padding: 0 $spacing-normal;
   position: relative;
+  height: 100%;
+  @include font-smoothing();
+
+  max-width: 264px;
+  min-height: 48px;
+  min-width: 72px;
+  padding-left: 12px;
+  padding-right: 12px;
   text-align: center;
   text-transform: uppercase;
   vertical-align: middle;
-  @include transition(all 0.30s ease);
+  @include transition(border-color 0.30s ease, background-color 0.30s ease);
 }
 
-@media (min-width: $width-medium) {
-  .tab {
-    font-size: $font-size-normal;
+@each $color-name, $color in $colors {
+  .tabs-#{$color-name} {
+    .tab {
+      &:hover { border-color: lighten($color, 30%); }
+      &:active { background-color: lighten($color, 40%); }
+    }
   }
 }
 
+// .tab {
+//   @include flex-parent-row-align-center();
+//   border-bottom: 2px solid transparent;
+//   color: color("helper");
+//   cursor: pointer;
+//   display: inline-flex;
+//   flex: 1 1 auto;
+//   font-size: $font-size-small;
+//   font-weight: 600;
+//   height: 100%;
+//   max-width: 150px;
+//   overflow-x: auto;
+//   overflow-y: hidden;
+//   padding: 0 $spacing-normal;
+//   position: relative;
+//   text-align: center;
+//   text-transform: uppercase;
+//   vertical-align: middle;
+//   @include transition(all 0.30s ease);
+// }
+//
+// @media (min-width: $width-medium) {
+//   .tab {
+//     font-size: $font-size-normal;
+//   }
+// }
+
 .tab-primary {
   align-items: center;
   // display: flex;
@@ -40,10 +76,22 @@
   justify-content: center;
 }
 
-.tabs-fixed .tab {
-  max-width: none;
+.tab-primary-subtext {
+  font-size: $font-size-small;
+  text-transform: none;
+}
+
+.tabs-fixed {
+  width: 100%;
+
+  .tab {
+    flex: 1;
+    flex-basis: 0;
+    flex-grow: 1;
+  }
 }
 
+
 @each $color-name, $color in $colors {
   .tabs-#{$color-name} {
     .tab {
@@ -76,3 +124,8 @@
   cursor: default;
   pointer-events: none;
 }
+
+.tab-disabled {
+  color: color("disabled");
+  pointer-events: none;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dlegr250_material_design
 version: !ruby/object:Gem::Version
-  version: 0.5.69
+  version: 0.5.70
 platform: ruby
 authors:
 - Daniel LeGrand
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-04-28 00:00:00.000000000 Z
+date: 2017-08-02 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
@@ -37,13 +37,13 @@ files:
 - lib/dlegr250_material_design.rb
 - lib/dlegr250_material_design/version.rb
 - vendor/assets/javascripts/base/init.coffee
+- vendor/assets/javascripts/components/DEPRECATED_html_editor.coffee
 - vendor/assets/javascripts/components/combobox.coffee
 - vendor/assets/javascripts/components/datepicker.coffee
 - vendor/assets/javascripts/components/dialog.coffee
 - vendor/assets/javascripts/components/expansion_panels.coffee
 - vendor/assets/javascripts/components/form_submit_buttons.coffee
 - vendor/assets/javascripts/components/forms.coffee
-- vendor/assets/javascripts/components/html_editor.coffee
 - vendor/assets/javascripts/components/input_masks.coffee
 - vendor/assets/javascripts/components/layout.coffee
 - vendor/assets/javascripts/components/menus.coffee
@@ -143,7 +143,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.5.1
+rubygems_version: 2.6.12
 signing_key: 
 specification_version: 4
 summary: Customized implementation of Google Material Design User Interface.