dlegr250_material_design 0.4.99 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b46b31edc1a06de38b178ebd551dcb3118763dbc
-  data.tar.gz: 5281398173ca0f7a1ff84c8b9e8b1689bcec1ee2
+  metadata.gz: 2d448000d754a1e8381a80caa58ea2e81c302663
+  data.tar.gz: cfdbc7aad373d31dc11e102ac1e579d7c0be04aa
 SHA512:
-  metadata.gz: 9b4f6226b8b6ca3cd1b8dee28fadc93a12279a88ec80dadb19eff9dc2548be90bd97884187b5040389a21d641a358d2d01caed413b6fe29f47a313cb7c3e61be
-  data.tar.gz: 823c863c4aae92bd3dfc08e81937bb3c63854e9fbeb6090bd2332fb10f6359c77b9d2cec3182d9183fcbf566a487472b15fbc890f53016bc354d9c6517a0fa0a
+  metadata.gz: 816afb896e3a84a8b945e3b01bedddc0a6e75401dccf6b5e99295dd8e497ddd6c107a065c974cc9169def63329994809ded5d2bac0a0eb6de1b9c4a6da8bd84f
+  data.tar.gz: 08427a82cfe79ac6eebbc40113217f5499a82d9f67073d842db9895eea8a72d0034b1984b957b5cf3baf58b0b84ee1954376600ba385cfc3393cdc6cfc96c2af

data/lib/dlegr250_material_design/version.rb

@@ -1,3 +1,3 @@
 module Dlegr250MaterialDesign
-  VERSION = "0.4.99"
+  VERSION = "0.5.0"
 end

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

@@ -4,16 +4,20 @@
 //======================================================================
 
 // Typography
-//----------------------------------------------------------------------
-
 // Note: Material Design Iconic Font is hosted locally
+//----------------------------------------------------------------------
 
-// @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
 @import url("https://fonts.googleapis.com/css?family=Roboto:400,600,700");
 
 // HTML/body
 //----------------------------------------------------------------------
 
+* {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
 html,
 body {
   background-color: $body-background-color;
@@ -68,6 +72,10 @@ hr {
 a {
   color: color("blue");
   text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 // Images

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

@@ -3,6 +3,15 @@
 // Default element styles are defined in the base.scss file.
 //======================================================================
 
+// Generate color classes (from base/variables/colors.scss map)
+// Assume if you're specifying this you want it to override (hence !important)
+//----------------------------------------------------------------------
+
+@each $color-name, $hex-value in $colors {
+  .background-color-#{$color-name} { background-color: #{$hex-value} !important; }
+  .color-#{$color-name} { color: #{$hex-value} !important; }
+}
+
 // Alignments
 //----------------------------------------------------------------------
 
@@ -14,9 +23,7 @@
 .float-right { float: right; }
 
 // Expand entire width and take element padding into consideration.
-.full-width {
-  @include full-width;
-}
+.full-width { @include full-width; }
 
 // Flex sizes for rows with items of different widths
 //----------------------------------------------------------------------
@@ -27,6 +34,7 @@
 .flex-4 { flex: 4 !important; }
 
 .flex-parent-row { @include flex-parent-row(); }
+.flex-parent-row-align-top { @include flex-parent-row-align-top(); }
 
 // Constrained to max size to center content
 //----------------------------------------------------------------------
@@ -36,13 +44,13 @@
 .constrained-large,
 .constrained-xlarge {
   margin: auto;
-  @include full-width;
+  @include full-width();
 }
 
-.constrained-small { max-width: $small-width; }
-.constrained-medium { max-width: $medium-width; }
-.constrained-large { max-width: $large-width; }
-.constrained-xlarge { max-width: $xlarge-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; }
 
 // Padding
 //----------------------------------------------------------------------
@@ -93,60 +101,30 @@
 
 // If lists or other elements need extra room at bottom
 // or else the FAB overlaps them.
-.allow-room-for-fab-at-bottom {
+.allow-room-for-fab-at-bottom,
+.fab-at-bottom {
   margin-bottom: $button-fab-height * 2;
 }
 
 // Cursors
 //----------------------------------------------------------------------
 
-.cursor-default {
-  cursor: default !important;
-}
-
-.cursor-disabled {
-  cursor: not-allowed !important;
-}
-
-// Highlight (yellowish background)
-//----------------------------------------------------------------------
-
-.highlight {
-  background-color: color("highlight");
-}
+.cursor-default { cursor: default !important; }
+.cursor-disabled { cursor: not-allowed !important; }
 
 // Hover
 //----------------------------------------------------------------------
 
-.no-hover:hover {
-  background-color: transparent !important;
-}
+.no-hover:hover { background-color: transparent !important; }
 
 // Decorate text
 //----------------------------------------------------------------------
 
-.bold,
-.strong {
-  font-weight: 700;
-}
-
-// Used to override labels or other elements that use bold
-// but may not want to in all cases.
-.unbold {
-  font-weight: normal !important;
-}
-
-.italic {
-  font-style: italic;
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.lowercase {
-  text-transform: lowercase;
-}
+.bold { font-weight: 700; }
+.unbold { font-weight: normal !important; }
+.italic { font-style: italic; }
+.uppercase { text-transform: uppercase; }
+.lowercase { text-transform: lowercase; }
 
 // Rounded corners
 //----------------------------------------------------------------------
@@ -161,31 +139,10 @@
 //----------------------------------------------------------------------
 
 // Remove from DOM rendering completely
-.hidden {
-  display: none !important;
-}
+.hidden { display: none !important; }
 
 // Remain in DOM flow but make invisible
-.invisible {
-  visibility: hidden !important;
-}
-
-// Colored background or text
-//----------------------------------------------------------------------
-
-@each $color-name, $color in $colors {
-  .color-#{$color-name} {
-    color: $color !important; // Assume if you're specifying this you want it to override
-  }
-
-  .background-color-#{$color-name} {
-    background-color: $color !important;
-  }
-
-  .border-color-#{$color-name} {
-    border-color: $color !important;
-  }
-}
+.invisible { visibility: hidden !important; }
 
 // Font sizes
 //----------------------------------------------------------------------
@@ -196,23 +153,11 @@
 .font-size-large { font-size: $font-size-large !important; }
 .font-size-xlarge { font-size: $font-size-xlarge !important; }
 
-$font-sizes: 8, 10, 12, 14, 16, 18, 20, 22, 24;
-@each $size in $font-sizes {
-  .font-size-#{$size} {
-    font-size: #{$size}px !important;
-  }
-}
-
 // Truncating text
 //----------------------------------------------------------------------
 
-.truncate-text {
-  @include truncate-text();
-}
-
-.force-text-wrap {
-  @include force-text-wrap();
-}
+.truncate-text { @include truncate-text(); }
+.force-text-wrap { @include force-text-wrap(); }
 
 // Borders
 //----------------------------------------------------------------------
@@ -246,9 +191,10 @@ $font-sizes: 8, 10, 12, 14, 16, 18, 20, 22, 24;
 // Widths
 //----------------------------------------------------------------------
 
-.width-small { width: $small-width; }
-.width-medium { width: $medium-width; }
-.width-large { width: $large-width; }
+.width-small { width: $width-small; }
+.width-medium { width: $width-medium; }
+.width-large { width: $width-large; }
+.width-xlarge { width: $width-xlarge; }
 
 // Media query classes for various device sizes
 //----------------------------------------------------------------------
@@ -264,8 +210,10 @@ $font-sizes: 8, 10, 12, 14, 16, 18, 20, 22, 24;
   display: none;
 }
 
-@media (min-width: $medium-width) {
-  .small-only { display: none !important; }
+@media (min-width: $width-medium) {
+  .small-only {
+    display: none;
+  }
 
   .medium-only,
   .medium-and-large-only {
@@ -273,11 +221,11 @@ $font-sizes: 8, 10, 12, 14, 16, 18, 20, 22, 24;
   }
 }
 
-@media (min-width: $large-width) {
+@media (min-width: $width-large) {
   .small-only,
   .small-and-medium-only,
   .medium-only {
-    display: none !important;
+    display: none;
   }
 
   .medium-and-large-only,
@@ -293,11 +241,7 @@ $font-sizes: 8, 10, 12, 14, 16, 18, 20, 22, 24;
 // there.
 //----------------------------------------------------------------------
 
-// Larger than mobile
-@media (min-width: $small-width) {}
-
-// Larger than medium
-@media (min-width: $medium-width) {}
-
-// Larger than large
-@media (min-width: $large-width) {}
+@media (min-width: $width-small) {}
+@media (min-width: $width-medium) {}
+@media (min-width: $width-large) {}
+@media (min-width: $width-xlarge) {}

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

@@ -0,0 +1,335 @@
+// SCSS maps of all colors
+//----------------------------------------------------------------------
+
+$colors: (
+  // Material Design colors
+  'red': #f44336,
+  'red-50': #ffebee,
+  'red-100': #ffcdd2,
+  'red-200': #ef9a9a,
+  'red-300': #e57373,
+  'red-400': #ef5350,
+  'red-500': #f44336,
+  'red-600': #e53935,
+  'red-700': #d32f2f,
+  'red-800': #c62828,
+  'red-900': #b71c1c,
+  'red-a100': #ff8a80,
+  'red-a200': #ff5252,
+  'red-a400': #ff1744,
+  'red-a700': #d50000,
+
+  'pink': #e91e63,
+  'pink-50': #fce4ec,
+  'pink-100': #f8bbd0,
+  'pink-200': #f48fb1,
+  'pink-300': #f06292,
+  'pink-400': #ec407a,
+  'pink-500': #e91e63,
+  'pink-600': #d81b60,
+  'pink-700': #c2185b,
+  'pink-800': #ad1457,
+  'pink-900': #880e4f,
+  'pink-a100': #ff80ab,
+  'pink-a200': #ff4081,
+  'pink-a400': #f50057,
+  'pink-a700': #c51162,
+
+  'purple': #9c27b0,
+  'purple-50': #f3e5f5,
+  'purple-100': #e1bee7,
+  'purple-200': #ce93d8,
+  'purple-300': #ba68c8,
+  'purple-400': #ab47bc,
+  'purple-500': #9c27b0,
+  'purple-600': #8e24aa,
+  'purple-700': #7b1fa2,
+  'purple-800': #6a1b9a,
+  'purple-900': #4a148c,
+  'purple-a100': #ea80fc,
+  'purple-a200': #e040fb,
+  'purple-a400': #d500f9,
+  'purple-a700': #aa00ff,
+
+  'deep-purple': #673ab7,
+  'deep-purple-50': #ede7f6,
+  'deep-purple-100': #d1c4e9,
+  'deep-purple-200': #b39ddb,
+  'deep-purple-300': #9575cd,
+  'deep-purple-400': #7e57c2,
+  'deep-purple-500': #673ab7,
+  'deep-purple-600': #5e35b1,
+  'deep-purple-700': #512da8,
+  'deep-purple-800': #4527a0,
+  'deep-purple-900': #311b92,
+  'deep-purple-a100': #b388ff,
+  'deep-purple-a200': #7c4dff,
+  'deep-purple-a400': #651fff,
+  'deep-purple-a700': #6200ea,
+
+  'indigo': #3f51b5,
+  'indigo-50': #e8eaf6,
+  'indigo-100': #c5cae9,
+  'indigo-200': #9fa8da,
+  'indigo-300': #7986cb,
+  'indigo-400': #5c6bc0,
+  'indigo-500': #3f51b5,
+  'indigo-600': #3949ab,
+  'indigo-700': #303f9f,
+  'indigo-800': #283593,
+  'indigo-900': #1a237e,
+  'indigo-a100': #8c9eff,
+  'indigo-a200': #536dfe,
+  'indigo-a400': #3d5afe,
+  'indigo-a700': #304ffe,
+
+  'blue': #2196f3,
+  'blue-50': #e3f2fd,
+  'blue-100': #bbdefb,
+  'blue-200': #90caf9,
+  'blue-300': #64b5f6,
+  'blue-400': #42a5f5,
+  'blue-500': #2196f3,
+  'blue-600': #1e88e5,
+  'blue-700': #1976d2,
+  'blue-800': #1565c0,
+  'blue-900': #0d47a1,
+  'blue-a100': #82b1ff,
+  'blue-a200': #448aff,
+  'blue-a400': #2979ff,
+  'blue-a700': #2962ff,
+
+  'light-blue': #03a9f4,
+  'light-blue-50': #e1f5fe,
+  'light-blue-100': #b3e5fc,
+  'light-blue-200': #81d4fa,
+  'light-blue-300': #4fc3f7,
+  'light-blue-400': #29b6f6,
+  'light-blue-500': #03a9f4,
+  'light-blue-600': #039be5,
+  'light-blue-700': #0288d1,
+  'light-blue-800': #0277bd,
+  'light-blue-900': #01579b,
+  'light-blue-a100': #80d8ff,
+  'light-blue-a200': #40c4ff,
+  'light-blue-a400': #00b0ff,
+  'light-blue-a700': #0091ea,
+
+  'cyan': #00bcd4,
+  'cyan-50': #e0f7fa,
+  'cyan-100': #b2ebf2,
+  'cyan-200': #80deea,
+  'cyan-300': #4dd0e1,
+  'cyan-400': #26c6da,
+  'cyan-500': #00bcd4,
+  'cyan-600': #00acc1,
+  'cyan-700': #0097a7,
+  'cyan-800': #00838f,
+  'cyan-900': #006064,
+  'cyan-a100': #84ffff,
+  'cyan-a200': #18ffff,
+  'cyan-a400': #00e5ff,
+  'cyan-a700': #00b8d4,
+
+  'teal': #009688,
+  'teal-50': #e0f2f1,
+  'teal-100': #b2dfdb,
+  'teal-200': #80cbc4,
+  'teal-300': #4db6ac,
+  'teal-400': #26a69a,
+  'teal-500': #009688,
+  'teal-600': #00897b,
+  'teal-700': #00796b,
+  'teal-800': #00695c,
+  'teal-900': #004d40,
+  'teal-a100': #a7ffeb,
+  'teal-a200': #64ffda,
+  'teal-a400': #1de9b6,
+  'teal-a700': #00bfa5,
+
+  'green': #4caf50,
+  'green-50': #e8f5e9,
+  'green-100': #c8e6c9,
+  'green-200': #a5d6a7,
+  'green-300': #81c784,
+  'green-400': #66bb6a,
+  'green-500': #4caf50,
+  'green-600': #43a047,
+  'green-700': #388e3c,
+  'green-800': #2e7d32,
+  'green-900': #1b5e20,
+  'green-a100': #b9f6ca,
+  'green-a200': #69f0ae,
+  'green-a400': #00e676,
+  'green-a700': #00c853,
+
+  'light-green': #8bc34a,
+  'light-green-50': #f1f8e9,
+  'light-green-100': #dcedc8,
+  'light-green-200': #c5e1a5,
+  'light-green-300': #aed581,
+  'light-green-400': #9ccc65,
+  'light-green-500': #8bc34a,
+  'light-green-600': #7cb342,
+  'light-green-700': #689f38,
+  'light-green-800': #558b2f,
+  'light-green-900': #33691e,
+  'light-green-a100': #ccff90,
+  'light-green-a200': #b2ff59,
+  'light-green-a400': #76ff03,
+  'light-green-a700': #64dd17,
+
+  'lime': #cddc39,
+  'lime-50': #f9fbe7,
+  'lime-100': #f0f4c3,
+  'lime-200': #e6ee9c,
+  'lime-300': #dce775,
+  'lime-400': #d4e157,
+  'lime-500': #cddc39,
+  'lime-600': #c0ca33,
+  'lime-700': #afb42b,
+  'lime-800': #9e9d24,
+  'lime-900': #827717,
+  'lime-a100': #f4ff81,
+  'lime-a200': #eeff41,
+  'lime-a400': #c6ff00,
+  'lime-a700': #aeea00,
+
+  'yellow': #ffeb3b,
+  'yellow-50': #fffde7,
+  'yellow-100': #fff9c4,
+  'yellow-200': #fff59d,
+  'yellow-300': #fff176,
+  'yellow-400': #ffee58,
+  'yellow-500': #ffeb3b,
+  'yellow-600': #fdd835,
+  'yellow-700': #fbc02d,
+  'yellow-800': #f9a825,
+  'yellow-900': #f57f17,
+  'yellow-a100': #ffff8d,
+  'yellow-a200': #ffff00,
+  'yellow-a400': #ffea00,
+  'yellow-a700': #ffd600,
+
+  'amber': #ffc107,
+  'amber-50': #fff8e1,
+  'amber-100': #ffecb3,
+  'amber-200': #ffe082,
+  'amber-300': #ffd54f,
+  'amber-400': #ffca28,
+  'amber-500': #ffc107,
+  'amber-600': #ffb300,
+  'amber-700': #ffa000,
+  'amber-800': #ff8f00,
+  'amber-900': #ff6f00,
+  'amber-a100': #ffe57f,
+  'amber-a200': #ffd740,
+  'amber-a400': #ffc400,
+  'amber-a700': #ffab00,
+
+  'orange': #ff9800,
+  'orange-50': #fff3e0,
+  'orange-100': #ffe0b2,
+  'orange-200': #ffcc80,
+  'orange-300': #ffb74d,
+  'orange-400': #ffa726,
+  'orange-500': #ff9800,
+  'orange-600': #fb8c00,
+  'orange-700': #f57c00,
+  'orange-800': #ef6c00,
+  'orange-900': #e65100,
+  'orange-a100': #ffd180,
+  'orange-a200': #ffab40,
+  'orange-a400': #ff9100,
+  'orange-a700': #ff6d00,
+
+  'deep-orange': #ff5722,
+  'deep-orange-50': #fbe9e7,
+  'deep-orange-100': #ffccbc,
+  'deep-orange-200': #ffab91,
+  'deep-orange-300': #ff8a65,
+  'deep-orange-400': #ff7043,
+  'deep-orange-500': #ff5722,
+  'deep-orange-600': #f4511e,
+  'deep-orange-700': #e64a19,
+  'deep-orange-800': #d84315,
+  'deep-orange-900': #bf360c,
+  'deep-orange-a100': #ff9e80,
+  'deep-orange-a200': #ff6e40,
+  'deep-orange-a400': #ff3d00,
+  'deep-orange-a700': #dd2c00,
+
+  'brown': #795548,
+  'brown-50': #efebe9,
+  'brown-100': #d7ccc8,
+  'brown-200': #bcaaa4,
+  'brown-300': #a1887f,
+  'brown-400': #8d6e63,
+  'brown-500': #795548,
+  'brown-600': #6d4c41,
+  'brown-700': #5d4037,
+  'brown-800': #4e342e,
+  'brown-900': #3e2723,
+
+  'grey': #9e9e9e,
+  'grey-50': #fafafa,
+  'grey-100': #f5f5f5,
+  'grey-200': #eeeeee,
+  'grey-300': #e0e0e0,
+  'grey-400': #bdbdbd,
+  'grey-500': #9e9e9e,
+  'grey-600': #757575,
+  'grey-700': #616161,
+  'grey-800': #424242,
+  'grey-900': #212121,
+
+  'blue-grey': #607d8b,
+  'blue-grey-50': #eceff1,
+  'blue-grey-100': #cfd8dc,
+  'blue-grey-200': #b0bec5,
+  'blue-grey-300': #90a4ae,
+  'blue-grey-400': #78909c,
+  'blue-grey-500': #607d8b,
+  'blue-grey-600': #546e7a,
+  'blue-grey-700': #455a64,
+  'blue-grey-800': #37474f,
+  'blue-grey-900': #263238,
+  'blue-grey-1000': #11171a,
+
+  // Custom colors
+  "primary": $color-primary,
+  "secondary": $color-secondary,
+  "hover": $color-hover,
+  "icon": #737373,
+  "offwhite": rgba(255, 255, 255, 0.6),
+  "disabled": rgba(0, 0, 0, 0.26),
+  "text": rgba(0, 0, 0, 0.87),
+  "snackbar": #323232,
+  "divider": rgba(0, 0, 0, 0.12),
+  "table-hover": #eee,
+  "table-selected": #f5f5f5,
+  "highlight": #fef5d8,
+  "highlight-dark": #ffe79f,
+  "white": #fff,
+  "black": #000,
+);
+
+// Function to retrieve color
+//----------------------------------------------------------------------
+
+// Easier way to reference $colors map
+@function color($color-name) {
+  @return map-get($colors, $color-name);
+}
+
+// Defaults variables that applications can override
+//----------------------------------------------------------------------
+
+$body-background-color: #fafafa !default;
+$color-hover: #f3fefe !default;
+$color-primary: #2196f3 !default;
+$color-secondary: #db4437 !default;
+
+$appbar-title-color: color("white") !default;
+$appbar-subtitle-color: color("offwhite") !default;
+@appbar-button-color: color("icon") !default;

data/vendor/assets/stylesheets/base/{variables.scss → variables/dimensions.scss}

@@ -111,109 +111,12 @@ $dialog-depth: 50;
 // Device breakpoints
 //----------------------------------------------------------------------
 
-$size-small: 400px;
-$size-medium: 760px;
-$size-large: 1000px;
-$size-xlarge: 1200px;
+$width-small: 400px;
+$width-medium: 760px;
+$width-large: 1000px;
+$width-xlarge: 1200px;
 
 $small-width: $size-small;
 $medium-width: $size-medium;
 $large-width: $size-large;
 $xlarge-width: $size-xlarge;
-
-// Convenience variables
-//----------------------------------------------------------------------
-
-
-
-// Color variables
-// See: http://www.google.com/design/spec/style/color.html
-//----------------------------------------------------------------------
-
-$color-primary: #2196f3 !default;
-$color-secondary: #db4437 !default;
-
-// Hover color for lists, menus, etc...
-$color-hover: #f3f3f3 !default;
-
-$color-table-hover: #eee;
-$color-table-selected: #f5f5f5;
-
-$colors: (
-  "red"           : #db4437,
-  "light-red"     : #ffebee,
-  "blue"          : #2196f3,
-  "google-blue"   : #4285f4,
-  "dark-blue"     : darken(#2196f3, 10%),
-  "disabled"      : rgba(0, 0, 0, 0.26),
-  "grey"          : #9e9e9e,
-  "black"         : #000000,
-  "white"         : #ffffff,
-  "pink"          : #e91e63,
-  "purple"        : #9c27b0,
-  "deep-purple"   : #673ab7,
-  "light-purple"  : lighten(#673ab7, 47%),
-  "indigo"        : #3f51b5,
-  "light-blue"    : #03a9f4,
-  "github-light-blue" : #f2f8fa,
-  "cyan"          : #00bcd4,
-  "teal"          : #009688,
-  "green"         : #4caf50,
-  "light-green"   : #8bc34a,
-  "lime"          : #cddc39,
-  "yellow"        : #ffeb3b,
-  "highlight"     : #fef5d8,
-  "dark-highlight": #ffe79f,
-  "amber"         : #ffc107,
-  "orange"        : #ff9800,
-  "dark-orange"   : #ef6c00,
-  "deep-orange"   : #ff5722,
-  "brown"         : #795548,
-  "blue-grey"     : #607d8b,
-  "icon"          : #737373,
-  "offwhite"      : rgba(255, 255, 255, 0.6),
-  "helper"        : rgba(0, 0, 0, 0.54),
-  "placeholder"   : rgba(0, 0, 0, 0.38),
-  "text"          : rgba(0, 0, 0, 0.87), // rgb(51, 51, 51),
-  "divider"       : rgba(0, 0, 0, 0.12),
-  "hover"         : $color-hover,
-  "light-hover"   : lighten($color-hover, 2%),
-  "snackbar"      : #323232,
-  "primary"       : $color-primary,
-  "secondary"     : $color-secondary,
-);
-
-// Easier way to reference $colors map
-@function color($color-name) {
-  @return map-get($colors, $color-name);
-}
-
-// Defaults - Application colors (user can override)
-//----------------------------------------------------------------------
-
-// Body
-$body-background-color: #fafafa !default;
-
-// appbar and any colored component
-// $color-primary: color("blue") !default;
-// $secondary-color: color("red") !default;
-
-// Hover color for lists, menus, etc...
-// $hover-color: color("hover") !default;
-
-// Appbar only
-$appbar-text-color: color("white") !default;
-$appbar-subtitle-color: color("offwhite") !default;
-$appbar-button-color: color("helper") !default;
-
-// Merge defaults back into globals to use in colored components.
-// Having this here allows access to the color helpers already created
-// in the $colors global so you can do color("primary") instead of #fff.
-//----------------------------------------------------------------------
-
-// $app-config: (
-//   "primary": $color-primary,
-//   "secondary": $secondary-color,
-//   "hover": $hover-color
-// );
-// $colors: map-merge(($colors), ($app-config));

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

@@ -19,6 +19,11 @@
 // </div>
 //======================================================================
 
+$list-one-line-height: 48px;
+$list-one-line-with-avatar-height: 56px;
+$list-two-lines-height: 72px;
+$list-three-lines-height: 88px;
+
 // UL and OL lists
 //----------------------------------------------------------------------
 
@@ -40,12 +45,15 @@ ol {
 }
 
 .list-item {
-  @include flex-parent-row-align-top();
+  box-sizing: border-box;
+  color: color("text");
+  min-height: $list-one-line-height;
+  @include flex-parent-row();
 }
 
 .list-item-icon {
-  padding: $spacing-normal;
-  padding-left: 0;
+  color: color("icon");
+  padding-left: $spacing-normal;
   text-align: left;
   width: 30px;
 }
@@ -55,23 +63,25 @@ ol {
 }
 
 .list-item-primary {
+  flex: 1; // Fill space
   font-size: $font-size-normal;
   padding: $spacing-normal;
 }
 
 .list-item-primary-subtext {
+  color: color("helper");
   font-size: $font-size-small;
 }
 
 .list-item-secondary {
-  padding: $spacing-normal;
-  padding-left: 0;
+  color: color("helper");
+  padding-right: $spacing-normal;
   text-align: right;
 }
 
 .list-item-secondary-actions {
-  padding: $spacing-small;
-  padding-left: 0;
+  color: color("helper");
+  padding-right: $spacing-small;
   text-align: right;
 }
 
@@ -81,28 +91,28 @@ ol {
 // Sizes
 .list-one-line .list-item,
 .list-item-one-line {
-  min-height: 48px;
+  min-height: $list-one-line-height;
 }
 
 .list-one-line-with-avatar .list-item,
 .list-item-one-line-with-avatar {
-  min-height: 56px;
+  min-height: $list-one-line-with-avatar-height;
 }
 
 .list-two-lines .list-item,
 .list-item-two-lines {
-  min-height: 72px;
+  min-height: $list-two-lines-height;
 }
 
 .list-three-lines .list-item,
 .list-item-three-lines {
-  min-height: 88px;
+  min-height: $list-three-lines-height;
 }
 
 // Dividers between items
 .list-divided {
   .list-item:not(:last-child) {
-    border-bottom: 1px solid color("divider");
+    border-bottom: 1px solid $color-divider;
   }
 }
 
@@ -111,6 +121,19 @@ ol {
 
 }
 
+// Aligned top instead of centered
+.list-align-top {
+  .list-item {
+    @include flex-parent-row-align-top();
+  }
+
+  .list-item-icon,
+  .list-item-secondary,
+  .list-item-secondary-actions {
+    padding-top: $spacing-normal;
+  }
+}
+
 
 // // Lists - header
 // //----------------------------------------------------------------------
@@ -193,7 +216,7 @@ ol {
 // }
 //
 // .list-item-icon-circle {
-//   background-color: color("divider");
+//   background-color: $color-divider;
 //   font-size: 16px;
 //   height: 30px;
 //   line-height: 30px;
@@ -375,13 +398,13 @@ ol {
 // //----------------------------------------------------------------------
 //
 // .list-bordered {
-//   border: 1px solid color("divider");
+//   border: 1px solid $color-divider;
 // }
 //
 // .list-divided {
 //   .list-header,
 //   .list-item {
-//     border-bottom: 1px solid color("divider");
+//     border-bottom: 1px solid $color-divider;
 //   }
 // }
 //

data/vendor/assets/stylesheets/dlegr250_material_design.scss

@@ -5,7 +5,8 @@
 @import "fonts/google_material_design_icons";
 
 @import "base/normalize";
-@import "base/variables";
+@import "base/variables/dimensions";
+@import "base/variables/colors";
 @import "base/mixins";
 @import "base/base";
 @import "base/global_classes";

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dlegr250_material_design
 version: !ruby/object:Gem::Version
-  version: 0.4.99
+  version: 0.5.0
 platform: ruby
 authors:
 - Daniel LeGrand
@@ -59,7 +59,8 @@ files:
 - vendor/assets/stylesheets/base/global_classes.scss
 - vendor/assets/stylesheets/base/mixins.scss
 - vendor/assets/stylesheets/base/normalize.scss
-- vendor/assets/stylesheets/base/variables.scss
+- vendor/assets/stylesheets/base/variables/colors.scss
+- vendor/assets/stylesheets/base/variables/dimensions.scss
 - vendor/assets/stylesheets/components/badges.scss
 - vendor/assets/stylesheets/components/blank_states.scss
 - vendor/assets/stylesheets/components/borders.scss