dlegr250_material_design 0.5.96 → 0.5.97

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 78b731a6c73f95ac68444a56dae745590439e0d5
-  data.tar.gz: ed4feda764c3bb5ab708ab7fb2b0d52726e0d798
+  metadata.gz: 4c98f54467a103bae41c7fa4a4c64f2c291b0132
+  data.tar.gz: 88fbdf6c547117dd38f69157411bbb176a783fe1
 SHA512:
-  metadata.gz: f12ae1d4724dd7ed3cf3c3d6095f5284b89454b29e1fb2a940533110eaa92057852a908d9a0641cef31fb150ac5bb4a6bd2933b18385ba2dc8af13e7a43c6f21
-  data.tar.gz: debc6219fbdc2d8b551df12bafb278b03cd86f45da0c354577b4f3dcd0e9a3d69a1393d392fd352b63bc2c6ce7308f506e3276e2dc9ceeb005c6940373a778d1
+  metadata.gz: 6de3515eb771a10829fcd0873849d179ba93fafbcafea60255650ff7c889fd9476ed573a46c030a2f7048d4694291be65344d9c59d5b90478d17b7c65c9d74a8
+  data.tar.gz: 2febfbbc1e57d40c52cae8c898fdaed2d4f8af87b8826001b0ca26d1a76bef034417a2a480cde000741e5ab714d0ccbfc711e3c1f7321b88583f18e16085eb94

data/lib/dlegr250_material_design/version.rb

@@ -1,3 +1,3 @@
 module Dlegr250MaterialDesign
-  VERSION = "0.5.96"
+  VERSION = "0.5.97"
 end

data/temp.scss

@@ -0,0 +1,51 @@
+.test-list {
+  background-color: color("white");
+  border: 1px solid color("divider");
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  flex: 1 1 auto;
+}
+
+.test-list-item {
+  border-bottom: 1px solid color("divider");
+  min-height: 48px;
+  padding-left: 8px;
+  padding-right: 8px;
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  // @include flex-parent();
+  // @include flex-align-left();
+}
+
+.test-list-item-icon {
+  box-flex: 0;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  max-height: 48px;
+  height: 48px;
+  justify-content: center;
+  text-align: center;
+  width: 48px;
+}
+
+.test-list-item-primary {
+  color: color("text");
+  padding: 8px 8px;
+  line-height: 16px;
+  box-flex: 1;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.test-list-item-primary-subtext {
+  font-size: $font-size-small;
+  color: color("helper");
+  padding-top: 4px;
+}

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

@@ -159,6 +159,8 @@ $default-rounded-corners-radius: 2px; // As per Material Design spec
   display: -webkit-flex;
   flex-direction: row;
   justify-content: center;
+
+  position: relative;
 }
 
 @mixin flex-align-left() { justify-content: flex-start !important; }
@@ -230,31 +232,59 @@ $default-rounded-corners-radius: 2px; // As per Material Design spec
 // Shared lists styles
 //----------------------------------------------------------------------
 
+@mixin list() {
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  flex: 1 1 auto;
+}
+
 @mixin list-item() {
   color: color("text");
   font-size: $font-size-normal;
   min-height: $list-one-line-height;
   padding-left: $spacing-small;
   padding-right: $spacing-small;
+  position: relative;
+  width: 100%;
   @include flex-parent();
-  @include flex-align-left();
+  // @include flex-parent();
+  // @include flex-align-left();
   @include no-touch-highlight-color();
   @include transition(background-color 0.30s ease);
 }
 
+$list-item-icon-width: 48px;
+
 @mixin list-item-icon() {
+  @include flex-parent();
+  align-self: stretch;
+  box-flex: 0;
   color: color("icon");
-  max-width: 44px; // 56px
-  padding-left: 0; // $spacing-small
+  flex-shrink: 0;
+  height: $list-item-icon-width;
+  max-height: $list-item-icon-width;
   text-align: center;
-  width: 44px; // 56px
+  width: $list-item-icon-width;
+
+  // max-width: 44px; // 56px
+  // padding-left: 0; // $spacing-small
+  // text-align: center;
+  // width: 44px; // 56px
 }
 
 @mixin list-item-primary() {
-  color: color("text");
-  flex: 1; // Fill space
-  font-size: $font-size-normal;
-  padding: $spacing-normal $spacing-small;
+  color: red !important;
+  padding: 8px;
+  line-height: 16px;
+  box-flex: 1;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  align-items: center;
+  // color: color("text");
+  // flex: 1; // Fill space
+  // font-size: $font-size-normal;
+  // padding: $spacing-normal $spacing-small;
 }
 
 @mixin list-item-primary-supertext() {
@@ -262,8 +292,8 @@ $default-rounded-corners-radius: 2px; // As per Material Design spec
   font-size: $font-size-small;
   font-weight: normal;
   padding-bottom: $spacing-xsmall;
-  @include flex-parent();
-  @include flex-align-left();
+  // @include flex-parent();
+  // @include flex-align-left();
 }
 
 @mixin list-item-primary-subtext() {

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

@@ -19,7 +19,7 @@ ol {
 //----------------------------------------------------------------------
 
 .list {
-
+  @include list();
 }
 
 .list-item {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dlegr250_material_design
 version: !ruby/object:Gem::Version
-  version: 0.5.96
+  version: 0.5.97
 platform: ruby
 authors:
 - Daniel LeGrand
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-11-07 00:00:00.000000000 Z
+date: 2017-11-08 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
@@ -36,6 +36,7 @@ files:
 - dlegr250_material_design.gemspec
 - lib/dlegr250_material_design.rb
 - lib/dlegr250_material_design/version.rb
+- temp.scss
 - vendor/assets/javascripts/base/init.coffee
 - vendor/assets/javascripts/components/combobox.coffee
 - vendor/assets/javascripts/components/datepicker.coffee