dlegr250_material_design 0.4.07 → 0.4.08

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: af518e19470b26de229aee4bbf021f948c73c11f
-  data.tar.gz: 52616cc30c2fa43affc747a911b4afba72ea70b2
+  metadata.gz: 77a53cdd7c61fd215abf661d43d452a0f6bbec55
+  data.tar.gz: aa6219a34c2db7c35078d67eca8653674e8df9f5
 SHA512:
-  metadata.gz: 2828a35a96c7b8c573604d1dac9d4246d618c150941677d92b30902e1d16fd21126198c44a889feef8d6187cf91ad5af6fd353aca33298ee45c6d6c3f655dd2f
-  data.tar.gz: ab73f83e661b480216fba19092f59f5d97ac9bd9420bec73df4ee5a8be063182a04061e220fea513926fea92d21e7ac2f8a75e78c60edce65f471b261835e63c
+  metadata.gz: b5e1376bf336e1a4be36c38c792b62386152f11d421a51a86fa6acb73616467ecbe77c67d928491b967285d59077c8573b52e27220f27c209be387539e50ac26
+  data.tar.gz: 3d75ca94dcae9d48f97e23ddca9e9dbbee50af81117400845dc965fc333d12fca3d89afe78f56eb6557c16e45935f16c0e03b8cc946b1e8bf0a2b5215894a23b

data/lib/dlegr250_material_design/version.rb

@@ -1,3 +1,3 @@
 module Dlegr250MaterialDesign
-  VERSION = "0.4.07"
+  VERSION = "0.4.08"
 end

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

@@ -243,3 +243,40 @@ $default-rounded-corners-radius: 3px;
   white-space: normal;
   word-wrap: break-word;
 }
+
+// Shared lists styles
+//----------------------------------------------------------------------
+
+@mixin list-item() {
+  font-size: $font-size-normal;
+  min-height: 48px;
+  @include flex-parent-row();
+  @include no-touch-highlight-color();
+  @include transition(background-color 0.30s ease);
+}
+
+@mixin list-item-icon() {
+  color: color("icon");
+  padding-left: $spacing-normal;
+  text-align: left;
+  width: 30px;
+}
+
+@mixin list-item-primary() {
+  color: color("text");
+  flex: 1;
+  padding-left: $spacing-normal;
+  padding-right: $spacing-normal;
+}
+
+@mixin list-item-primary-subtext() {
+  color: color("helper");
+  font-size: $font-size-small;
+  padding-top: $spacing-xsmall;
+}
+
+@mixin list-item-secondary() {
+  color: color("icon");
+  margin-right: $spacing-normal;
+  text-align: right;
+}

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

@@ -12,7 +12,6 @@
   min-width: 18px;
   padding: $spacing-small;
   text-align: center;
-  text-transform: uppercase;
   @include rounded-corners;
 }
 

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

@@ -128,9 +128,7 @@ ol {
 //----------------------------------------------------------------------
 
 .list-item {
-  min-height: 48px;
-  @include flex-parent-row();
-  @include transition(background-color 0.30s ease);
+  @include list-item();
 }
 
 .list-item.one-lines {
@@ -149,10 +147,7 @@ ol {
 //----------------------------------------------------------------------
 
 .list-item-icon {
-  color: color("icon");
-  padding-left: $spacing-normal;
-  text-align: left;
-  width: 30px;
+  @include list-item-icon();
 }
 
 .list-item-icon-circle {
@@ -169,16 +164,11 @@ ol {
 //----------------------------------------------------------------------
 
 .list-item-primary {
-  color: color("text");
-  flex: 1;
-  padding-left: $spacing-normal;
-  padding-right: $spacing-normal;
+  @include list-item-primary();
 }
 
 .list-item-primary-subtext {
-  color: color("helper");
-  font-size: $font-size-small;
-  padding-top: $spacing-xsmall;
+  @include list-item-primary-subtext();
 }
 
 // Force list-item to wrap text
@@ -194,9 +184,7 @@ ol {
 //----------------------------------------------------------------------
 
 .list-item-secondary {
-  color: color("icon");
-  padding-right: $spacing-normal;
-  text-align: right;
+  @include list-item-secondary();
 }
 
 .list-item-misc {
@@ -218,35 +206,32 @@ ol {
 //----------------------------------------------------------------------
 
 @media(hover: hover) {
-  .list-hoverable {
-    .list-item:hover {
-      background-color: color("hover");
-    }
+  .list-hoverable .list-item:hover {
+    background-color: color("hover");
   }
 }
 
 .list-hoverable {
-  .list-item:active {
-    background-color: darken(color("hover"), 5%);
-  }
+  .list-item {
+    @include no-touch-highlight-color(); // Remove blue background on touch
 
-  // Slightly darker than list-item:hover
-  .button-icon {
-    &:hover {
+    &:active {
       background-color: darken(color("hover"), 5%);
     }
 
-    &:active {
-      background-color: darken(color("hover"), 15%);
+    // Slightly darker than list-item:hover
+    .button-icon {
+      &:hover {
+        background-color: darken(color("hover"), 5%);
+      }
+
+      &:active {
+        background-color: darken(color("hover"), 15%);
+      }
     }
   }
 }
 
-// Remove blue background on touch
-.list-hoverable .list-item {
-  @include no-touch-highlight-color();
-}
-
 // Links in list items
 //----------------------------------------------------------------------
 
@@ -304,4 +289,8 @@ ol {
   @extend .list-hoverable;
   @extend .rounded-corners;
   @extend .background-color-white;
+
+  .list-item-primary {
+    @include truncate-text();
+  }
 }

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

@@ -70,97 +70,39 @@
 // Menus - menu item
 //----------------------------------------------------------------------
 
-.menu-item {
-  font-size: $font-size-normal;
-  min-height: 48px;
-  @include flex-parent-row();
-  // box-sizing: border-box;
-  // color: color("text");
-  // cursor: pointer;
-  // display: table-row;
-  // font-size: $font-size-normal;
-  // @include no-touch-highlight;
-  @include transition(background-color 0.30s ease);
-
-  &:hover {
+@media(hover: hover) {
+  .menu-item:hover {
     background-color: color("hover");
   }
 }
 
 .menu-item {
-  &:hover {
-    background-color: color("hover");
-  }
+  @include list-item()
 
   &:active {
     background-color: darken(color("hover"), 5%);
   }
 }
 
-// Menus - menu item - shared
-//----------------------------------------------------------------------
-
-// .menu-item-icon,
-// .menu-item-primary,
-// .menu-item-secondary {
-//   box-sizing: border-box;
-//   display: table-cell;
-//   height: 48px;
-//   min-height: 48px;
-//   margin: 0;
-//   padding: $spacing-normal 0;
-//   vertical-align: middle;
-//   @include transition(background-color 0.30s ease);
-// }
-//
-// // Make large menus slightly smaller
-// @media (min-width: $large-width) {
-//   .menu-item-icon,
-//   .menu-item-primary,
-//   .menu-item-secondary {
-//     height: 36px;
-//     min-height: 36px;
-//     padding-bottom: $spacing-xsmall;
-//     padding-top: $spacing-xsmall;
-//   }
-// }
-
-
 // Menus - menu item - icon
 //----------------------------------------------------------------------
 
 .menu-item-icon {
-  color: color("icon");
-  padding-left: $spacing-normal;
-  text-align: center;
-  width: 32px;
-  // color: color("helper");
-  // font-size: $font-size-icon;
-  // padding: 0;
-  // padding-left: $spacing-normal;
-  // width: 72px - $spacing-normal * 2;
+  @include list-item-icon();
 }
 
 // Menus - menu item - primary
 //----------------------------------------------------------------------
 
 .menu-item-primary {
-  color: color("text");
-  flex: 1;
-  padding-left: $spacing-normal;
-  padding-right: $spacing-normal;
-  // padding-left: $spacing-normal;
-  // padding-right: $spacing-normal;
-  // min-width: $menu-width;
+  @include list-item-primary();
 }
 
 // Menus - menu item - secondary
 //----------------------------------------------------------------------
 
 .menu-item-secondary {
-  color: color("icon");
-  margin-right: $spacing-normal;
-  text-align: right;
+  @include list-item-secondary();
 }
 
 // Menus - sizes

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dlegr250_material_design
 version: !ruby/object:Gem::Version
-  version: 0.4.07
+  version: 0.4.08
 platform: ruby
 authors:
 - Daniel LeGrand
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-10-26 00:00:00.000000000 Z
+date: 2016-11-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