dlegr250_material_design 0.6.1 → 0.6.02

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 032fe5ab072bb366295967db9d836380a349afc3
-  data.tar.gz: 9cbe6acf461bd2fd0257fe315713d01aa0577762
+  metadata.gz: c99e9f5bb3c79b0be92a785c78fcc08ee26f8850
+  data.tar.gz: 3150383b811e59ddac9d17383b7c2cf6ca65898b
 SHA512:
-  metadata.gz: 769ea2cb048819665dc3c692e0d6d179a133f2fd14486a7a1ebabeeba1510bff92a623ad72d9ffe05efc2f57541b869eb69bf27bffdd86ffdb8bf39510239ab2
-  data.tar.gz: a864a2615c00b1c74eeec87128f48680d0a9f4d0cbf6d8e8d77abf5ef489f7eb72db90eeefbee174ca8a41cc305f3196c16f41cd25876cce0ce4361c2d0b8014
+  metadata.gz: 625240403ad3d66168c71ea8904bd73aac260d958b64e89e0fc31d9654443b14bc79f984c57a080ee4f21124d095349d86459fa13356f9757bc46ed6574e240e
+  data.tar.gz: 7017bc2805b621975c617076dfddad210276c24980c4ca297958e4cb997c549a84c0f8be8baf94275c6dfe8be77a5a4815bce1f96f2308fce260c45f17dfff33

data/lib/dlegr250_material_design/version.rb

@@ -1,3 +1,3 @@
 module Dlegr250MaterialDesign
-  VERSION = "0.6.1"
+  VERSION = "0.6.02"
 end

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

@@ -20,6 +20,12 @@
   text-align: center;
 }
 
+.line-divider {
+  color: color("divider");
+  margin: 0 4px;
+  text-align: center;
+}
+
 // Alignments
 //----------------------------------------------------------------------
 

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

@@ -1,11 +1,11 @@
 // Defaults to override
 //----------------------------------------------------------------------
 
-$body-background-color: #ebebeb !default;
+$body-background-color: #ebeef0 !default;
 $color-primary: #2196f3 !default;
 $color-primary: #4285f4 !default;
 $color-secondary: #db4437 !default;
-$color-hover: #f1f3f7 !default;
+$color-hover: #ebebec !default;
 $color-hover-blue: #f0f7fe !default;
 
 // SCSS maps of all colors

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

@@ -21,6 +21,8 @@ $toolbar-height-device-xlarge:  64px !default;
 
 $toolbar-button-height: 48px !default;
 
+$second-toolbar-height: 48px;
+
 // Dimensions - sidebars
 //----------------------------------------------------------------------
 

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

@@ -22,7 +22,6 @@
 
 .blank-state {
   margin: inherit;
-  margin-top: 64px;
   max-width: 100%;
   padding: 16px;
   @include flex-parent();
@@ -31,7 +30,7 @@
 }
 
 .blank-state-icon {
-  background-color: color("grey-200");
+    background-color: darken($body-background-color, 7%);
   padding: 16px;
   width: 140px;
   height: 140px;
@@ -67,5 +66,6 @@
 }
 
 .blank-state-actions {
-  margin: $spacing-normal 0;
+  padding: $spacing-normal 0;
+  margin: 0;
 }

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

@@ -98,7 +98,7 @@ $default-button-rounded-corners: 4px;
 // Buttons - icon buttons
 //----------------------------------------------------------------------
 
-$button-icon-height: 40px;
+$button-icon-height: 48px;
 
 // Basic icon without any coloring
 .button-icon {
@@ -273,9 +273,11 @@ $button-icon-height: 40px;
   width: $button-fab-height;
   @include elevation(12);
   @include box-shadow(0 3px 7px 0 rgba(0, 0, 0, 0.4));
+  @include material-icons();
   @include rounded-corners(250px);
   @include text-shadow(0 -1px 0 color("helper"));
   @include flex-parent();
+  @include flex-vertical-align-center();
   display: inline-flex;
 }
 

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

@@ -34,6 +34,7 @@
   @include list-item();
   @include rounded-top-corners();
   border-bottom: 1px solid color("divider");
+  padding: $spacing-small;
 }
 
 .card-header-no-border {
@@ -47,7 +48,7 @@
 .card-header-primary {
   @include list-item-primary();
   font-size: $font-size-normal + 2px;
-  font-weight: normal;
+  font-weight: 600;
   @include font-smoothing();
 }
 

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

@@ -15,17 +15,20 @@
   @include flex-parent();
   @include flex-vertical-align-center();
   @include transform(scale(1.15));
-  @include transition(all 0.10s cubic-bezier(0, 0, 0.3, 1));
   @include transparency(0);
 
   &.visible {
     pointer-events: auto;
     @include transform(scale(1.0));
-    @include transition(all 0.10s cubic-bezier(0, 0, 0.3, 1));
     @include transparency(1.0);
   }
 }
 
+.dialog-container,
+.dialog-container.visible {
+  @include transition(all 0.15s cubic-bezier(0, 0, 0.3, 1));
+}
+
 // Dialogs - base card
 //----------------------------------------------------------------------
 
@@ -161,10 +164,9 @@
   border-bottom: 1px solid color("divider");
   font-size: $font-size-normal + 2px;
   font-weight: bold;
-  padding: $spacing-normal;
+  padding: $spacing-small $spacing-normal;
   @include flex-parent();
-  // @include flex-align-left();
-  // @include flex-vertical-align-top();
+  @include list-item();
   @include font-smoothing();
 }
 
@@ -173,8 +175,7 @@
 }
 
 .dialog-header-primary {
-  // @include flex-section();
-  // @include flex-align-left();
+  @include list-item-primary();
   flex: 1;
 }
 

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

@@ -19,23 +19,26 @@ ol {
 //----------------------------------------------------------------------
 
 .list {
+  background-color: color("white");
   @include list();
 }
 
 .list-item {
   @include list-item();
+  min-height: 48px;
+  padding: 8px;
 }
 
 .list-item-icon {
   @include list-item-icon();
-}
-
-.list-item-icon-primary-action {
-
+  height: 40px;
+  max-height: 40px;
+  width: 40px;
 }
 
 .list-item-primary {
   @include list-item-primary();
+  line-height: normal;
 }
 
 .list-item-primary-supertext {
@@ -44,6 +47,17 @@ ol {
 
 .list-item-primary-subtext {
   @include list-item-primary-subtext();
+  color: color("helper");
+  font-size: $font-size-small;
+  @include flex-parent();
+  @include flex-align-left();
+}
+
+.list-item-action {
+  @include list-item-icon();
+  height: 40px;
+  max-height: 40px;
+  width: 40px;
 }
 
 .list-item-secondary {
@@ -54,6 +68,11 @@ ol {
   @include list-item-secondary();
 }
 
+.list-item-icon,
+.list-item-action {
+  align-self: auto;
+}
+
 // Lists - links in text
 //----------------------------------------------------------------------
 
@@ -76,37 +95,6 @@ ol {
 // Lists - modifiers
 //----------------------------------------------------------------------
 
-// Sizes
-// .list-one-line .list-item,
-// .list-item-one-line {
-//   min-height: $list-one-line-height;
-//
-//   .list-item-primary {
-//     padding-bottom: $spacing-small;
-//     padding-top: $spacing-small;
-//   }
-// }
-//
-// .list-one-line-with-avatar .list-item,
-// .list-item-one-line-with-avatar {
-//   min-height: $list-one-line-with-avatar-height;
-//
-//   .list-item-primary {
-//     padding-bottom: $spacing-small;
-//     padding-top: $spacing-small;
-//   }
-// }
-//
-// .list-two-lines .list-item,
-// .list-item-two-lines {
-//   min-height: $list-two-lines-height;
-// }
-//
-// .list-three-lines .list-item,
-// .list-item-three-lines {
-//   min-height: $list-three-lines-height;
-// }
-
 .list-bordered {
   @include box-shadow(0 0 1px #aaa);
 }
@@ -165,48 +153,44 @@ ol {
   }
 }
 
-// Aligned top instead of centered
-// .list-align-top {
-//   .list-item {
-//     @include flex-parent();
-//     @include flex-vertical-align-top();
-//   }
-//
-//   .list-item-icon {
-//     // padding-top: $spacing-normal;
-//   }
-//
-//   .list-item-secondary {
-//     padding-top: $spacing-normal;
-//   }
-//
-//   .list-item-secondary-actions {
-//     padding-top: $spacing-small;
-//   }
-// }
-
-// Components to save typing classes
-//----------------------------------------------------------------------
+.list-vertical-align-top .list-item-icon,
+.list-vertical-align-top .list-item-action {
+  padding-top: 12px;
+}
 
-// .component-list {
-//   background-color: color("white");
-//   @include box-shadow(0 0 1px color("divider"));
-//   @include rounded-corners();
-//
-//   .list-item {
-//     min-height: $list-two-lines-height;
-//
-//     &:not(:last-child) {
-//       border-bottom: 1px solid color("divider");
-//     }
-//   }
-// }
-
-// Sizes for component lists
-// .component-list.list-one-line .list-item { min-height: $list-one-line-height; }
-// .component-list.list-two-lines .list-item { min-height: $list-two-lines-height; }
-// .component-list.list-three-lines .list-item { min-height: $list-three-lines-height; }
+.list-vertical-align-top {
+  .list-item-icon,
+  .list-item-action {
+    align-self: stretch;
+  }
+}
 
+.list-one-line .list-item,
+.list-item-one-line {
+  min-height: 40px;
+  padding: 4px 8px;
+}
+
+.list-two-lines {
+  .list-item {
+    min-height: 56px;
+  }
+
+  .list-item-icon {
+    padding-top: 12px;
+    // min-height: 56px;
+  }
+}
+
+.list-dense {
+  .list-item-icon {
+    max-height: 32px;
+    height: 32px;
+  }
+  .list-item {
+    min-height: 40px;
+  }
+}
 
 // List headers
 //----------------------------------------------------------------------

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

@@ -27,7 +27,7 @@
   transform-origin: 100% 0;
   visibility: hidden;
   will-change: scale;
-  @include elevation(8);
+  @include elevation(6);
   @include box-shadow(0 2px 5px 1px rgba(0, 0, 0, 0.26));
   @include rounded-corners;
   @include transition(all 0.10s ease);
@@ -59,6 +59,7 @@
 
 .menu-item {
   @include list-item();
+  min-height: 48px;
 
   &:active {
     background-color: darken(color("hover"), 5%);

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

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

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

@@ -0,0 +1,22 @@
+.tag {
+  border: 1px solid transparent;
+  display: inline-block;
+  padding: 1px 4px;
+  @include rounded-corners();
+}
+
+@each $color-name, $color in $colors {
+  .tag-#{$color-name} {
+    background-color: $color;
+    @if ($color-name == "white") {
+      color: color("black");
+    } @else {
+      color: color("white");
+    }
+  }
+
+  .tag-outline-#{$color-name} {
+    border-color: $color;
+    color: $color;
+  }
+}

data/vendor/assets/stylesheets/dlegr250_material_design.scss

@@ -41,6 +41,7 @@
 @import "components/expansion_panels";
 @import "components/draggable";
 @import "components/subheaders";
+@import "components/tags";
 @import "components/forms/fields";
 @import "components/forms/labels";
 @import "components/forms/text_fields";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dlegr250_material_design
 version: !ruby/object:Gem::Version
-  version: 0.6.1
+  version: 0.6.02
 platform: ruby
 authors:
 - Daniel LeGrand
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-12-09 00:00:00.000000000 Z
+date: 2017-12-23 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
@@ -116,6 +116,7 @@ files:
 - vendor/assets/stylesheets/components/subheaders.scss
 - vendor/assets/stylesheets/components/tables.scss
 - vendor/assets/stylesheets/components/tabs.scss
+- vendor/assets/stylesheets/components/tags.scss
 - vendor/assets/stylesheets/components/toggle_panels.scss
 - vendor/assets/stylesheets/components/tooltips.scss
 - vendor/assets/stylesheets/dlegr250_material_design.scss