dlegr250_material_design 0.5.80 → 0.5.81

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: afce2656b4ecbf1a27a3282f5ca3e312a91fac91
-  data.tar.gz: 1c62eb61ecd9a0130a5d53b84a54f6acbd617278
+  metadata.gz: 26f5b35e2dc6b0665f38071ae29967031cc96803
+  data.tar.gz: 498fad64ee97b8c8a06899802a12ce8755426f34
 SHA512:
-  metadata.gz: 7cfb27951459a35cf3f51665a5551df05d2d8b98d234e03a9a1519e2d678ca801e76908e5aeb36bd82eae9078f771d1d14d791dbaf7ba5083100e4bb6086ce6d
-  data.tar.gz: a7a688d6aa9627c291863a923833ca6fd1c8601c34cba8c92ae963706ce651df79faa0980aa8af8cff7c745b03596fdc3fb4cef2b1e2079226e84fad4b6b1a55
+  metadata.gz: 8b4493b89c6ccb47d0e5c99c8b9361a67beb4324476daaadc1aa41c1a5e09aa50a8760d1a2ef438c902762e522b73e540881c94353a4d60c7c8e88d7992647e4
+  data.tar.gz: 9db54602f4c22a19527098ae95124af2b37a4ce0a042288fbaf97c22432702fb671120879b071f4cc1c34178d2c8def9a88b099d3ac621018d6f24ea84e44310

data/lib/dlegr250_material_design/version.rb

@@ -1,3 +1,3 @@
 module Dlegr250MaterialDesign
-  VERSION = "0.5.80"
+  VERSION = "0.5.81"
 end

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

@@ -32,13 +32,6 @@ body {
   font-size: $font-size-normal;
   font-weight: normal;
   line-height: 1.2;
-
-  // Elements animated via transform instead of display will
-  // still be rendered on the page and cause horizontal scroll.
-  // This stops that scrolling on smaller devices.
-  // &.has-right-sidebar {
-  //   overflow-x: hidden;
-  // }
 }
 
 // Bold
@@ -56,17 +49,6 @@ p {
   margin: $spacing-normal 0;
 }
 
-// HRs used as spacers with lines
-//----------------------------------------------------------------------
-
-hr {
-  border: none;
-  border-bottom: 1px solid color("divider");
-  height: 1px;
-  margin: $spacing-xsmall 0;
-  padding: 0;
-}
-
 // Links
 //----------------------------------------------------------------------
 
@@ -75,16 +57,7 @@ a {
   text-decoration: none;
 }
 
-a.link {
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
 // Images
 //----------------------------------------------------------------------
 
-// img {
-//   width: 100%;
-//   height: auto;
-// }
+// NOOP

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

@@ -12,13 +12,6 @@
   .color-#{$color-name} { color: #{$hex-value} !important; }
 }
 
-// Scroll shadow
-//----------------------------------------------------------------------
-
-.scroll-shadow {
-  @include box-shadow(0 2px 5px rgba(0, 0, 0, 0.30));
-}
-
 // Simple dot divider
 //----------------------------------------------------------------------
 
@@ -30,17 +23,17 @@
 // Alignments
 //----------------------------------------------------------------------
 
-.align-left { text-align: left; }
+.align-left   { text-align:   left; }
 .align-center { text-align: center; }
-.align-right { text-align: right; }
+.align-right  { text-align:  right; }
 
-.float-left { float: left; }
+.float-left  { float:  left; }
 .float-right { float: right; }
 
 // Expand entire width and take element padding into consideration.
 .full-width { @include full-width; }
 
-// Flex sizes for rows with items of different widths
+// Flexbox
 //----------------------------------------------------------------------
 
 .flex-1 { flex: 1 !important; }
@@ -48,8 +41,16 @@
 .flex-3 { flex: 3 !important; }
 .flex-4 { flex: 4 !important; }
 
-.flex-parent-row { @include flex-parent-row(); }
-.flex-parent-row-align-top { @include flex-parent-row-align-top(); }
+.flex-parent           { @include flex-parent(); }
+.flex-parent-align-top { @include flex-parent-align-top(); }
+
+.flex-align-left   { @include flex-align-left(); }
+.flex-align-center { @include flex-align-center(); }
+.flex-align-right  { @include flex-align-right(); }
+
+.flex-vertical-align-top    { @include flex-vertical-align-top(); }
+.flex-vertical-align-center { @include flex-vertical-align-center(); }
+.flex-vertical-align-bottom { @include flex-vertical-align-bottom(); }
 
 // Constrained to max size to center content
 //----------------------------------------------------------------------
@@ -65,61 +66,60 @@
 }
 
 .constrained-xsmall { max-width: $device-xsmall; }
-.constrained-small { max-width: $device-small; }
+.constrained-small  { max-width: $device-small; }
 .constrained-medium { max-width: $device-medium; }
-.constrained-large { max-width: $device-large; }
+.constrained-large  { max-width: $device-large; }
 .constrained-xlarge { max-width: $device-xlarge; }
 
 // Padding
 //----------------------------------------------------------------------
 
 .padding-xsmall { padding: $spacing-xsmall; }
-.padding-small { padding: $spacing-small; }
+.padding-small  { padding: $spacing-small; }
 .padding-normal { padding: $spacing-normal; }
-.padding-large { padding: $spacing-large; }
+.padding-large  { padding: $spacing-large; }
 .padding-xlarge { padding: $spacing-xlarge; }
 
 .padding-top-xsmall { padding-bottom: $spacing-xsmall; }
-.padding-top-small { padding-bottom: $spacing-small; }
+.padding-top-small  { padding-bottom: $spacing-small; }
 .padding-top-normal { padding-bottom: $spacing-normal; }
-.padding-top-large { padding-bottom: $spacing-large; }
+.padding-top-large  { padding-bottom: $spacing-large; }
 .padding-top-xlarge { padding-bottom: $spacing-xlarge; }
 
 .padding-right-xsmall { padding-bottom: $spacing-xsmall; }
-.padding-right-small { padding-bottom: $spacing-small; }
+.padding-right-small  { padding-bottom: $spacing-small; }
 .padding-right-normal { padding-bottom: $spacing-normal; }
-.padding-right-large { padding-bottom: $spacing-large; }
+.padding-right-large  { padding-bottom: $spacing-large; }
 .padding-right-xlarge { padding-bottom: $spacing-xlarge; }
 
 .padding-bottom-xsmall { padding-bottom: $spacing-xsmall; }
-.padding-bottom-small { padding-bottom: $spacing-small; }
+.padding-bottom-small  { padding-bottom: $spacing-small; }
 .padding-bottom-normal { padding-bottom: $spacing-normal; }
-.padding-bottom-large { padding-bottom: $spacing-large; }
+.padding-bottom-large  { padding-bottom: $spacing-large; }
 .padding-bottom-xlarge { padding-bottom: $spacing-xlarge; }
 
 .padding-left-xsmall { padding-bottom: $spacing-xsmall; }
-.padding-left-small { padding-bottom: $spacing-small; }
+.padding-left-small  { padding-bottom: $spacing-small; }
 .padding-left-normal { padding-bottom: $spacing-normal; }
-.padding-left-large { padding-bottom: $spacing-large; }
+.padding-left-large  { padding-bottom: $spacing-large; }
 .padding-left-xlarge { padding-bottom: $spacing-xlarge; }
 
-.no-padding-top { padding-top: 0 !important; }
-.no-padding-right { padding-right: 0 !important; }
+.no-padding-top    { padding-top: 0 !important; }
+.no-padding-right  { padding-right: 0 !important; }
 .no-padding-bottom { padding-bottom: 0 !important; }
-.no-padding-left { padding-left: 0 !important; }
+.no-padding-left   { padding-left: 0 !important; }
 
 // Margins
 //----------------------------------------------------------------------
 
 .margin-xsmall { margin: $spacing-xsmall 0; }
-.margin-small { margin: $spacing-small 0; }
+.margin-small  { margin: $spacing-small 0; }
 .margin-normal { margin: $spacing-normal 0; }
-.margin-large { margin: $spacing-large 0; }
+.margin-large  { margin: $spacing-large 0; }
 .margin-xlarge { margin: $spacing-xlarge 0; }
 
 // If lists or other elements need extra room at bottom
 // or else the FAB overlaps them.
-.allow-room-for-fab-at-bottom,
 .fab-at-bottom {
   margin-bottom: $button-fab-height * 2;
 }
@@ -132,21 +132,22 @@
 // Decorate text
 //----------------------------------------------------------------------
 
-.bold { font-weight: 700; }
+.bold   { font-weight: 700; }
 .unbold { font-weight: normal !important; }
 .italic { font-style: italic; }
-.uppercase { text-transform: uppercase; }
+
+.uppercase  { text-transform: uppercase; }
 .capitalize { text-transform: capitalize; }
-.lowercase { text-transform: lowercase; }
+.lowercase  { text-transform: lowercase; }
 
 // Rounded corners
 //----------------------------------------------------------------------
 
-.rounded-corners { @include rounded-corners; }
-.rounded-top-corners { @include rounded-top-corners; }
-.rounded-right-corners { @include rounded-right-corners; }
+.rounded-corners        { @include rounded-corners; }
+.rounded-top-corners    { @include rounded-top-corners; }
+.rounded-right-corners  { @include rounded-right-corners; }
 .rounded-bottom-corners { @include rounded-bottom-corners; }
-.rounded-left-corners { @include rounded-left-corners; }
+.rounded-left-corners   { @include rounded-left-corners; }
 
 // Visibility
 //----------------------------------------------------------------------
@@ -161,35 +162,35 @@
 //----------------------------------------------------------------------
 
 .font-size-xsmall { font-size: $font-size-xsmall !important; }
-.font-size-small { font-size: $font-size-small !important; }
+.font-size-small  { font-size: $font-size-small !important; }
 .font-size-normal { font-size: $font-size-normal !important; }
-.font-size-16 { font-size: 16px !important; }
-.font-size-large { font-size: $font-size-large !important; }
+.font-size-16     { font-size: 16px !important; }
+.font-size-large  { font-size: $font-size-large !important; }
 .font-size-xlarge { font-size: $font-size-xlarge !important; }
 
 // Truncating text
 //----------------------------------------------------------------------
 
-.truncate-text { @include truncate-text(); }
+.truncate-text   { @include truncate-text(); }
 .force-text-wrap { @include force-text-wrap(); }
 
 // Borders
 //----------------------------------------------------------------------
 
 .border-bottom { border-bottom: 1px solid color("divider") !important; }
-.border-left { border-left: 1px solid color("divider") !important; }
-.border-right { border-right: 1px solid color("divider") !important; }
-.border-top { border-top: 1px solid color("divider") !important; }
+.border-left   { border-left: 1px solid color("divider") !important; }
+.border-right  { border-right: 1px solid color("divider") !important; }
+.border-top    { border-top: 1px solid color("divider") !important; }
 
 .no-border-bottom { border-bottom: 0 !important; }
-.no-border-left { border-left: 0 !important; }
-.no-border-right { border-right: 0 !important; }
-.no-border-top { border-top: 0 !important; }
+.no-border-left   { border-left: 0 !important; }
+.no-border-right  { border-right: 0 !important; }
+.no-border-top    { border-top: 0 !important; }
 
 // Rotation
 //----------------------------------------------------------------------
 
-.rotate-90 { @include transform(rotate(90deg)); }
+.rotate-90  { @include transform(rotate(90deg)); }
 .rotate-180 { @include transform(rotate(180deg)); }
 .rotate-270 { @include transform(rotate(270deg)); }
 
@@ -202,13 +203,20 @@
   pointer-events: none;
 }
 
+// Cursors
+//----------------------------------------------------------------------
+
+.cursor-default  { cursor: default !important; }
+.cursor-disabled { cursor: not-allowed !important; }
+.cursor-drag     { cursor: move !important; }
+
 // Widths
 //----------------------------------------------------------------------
 
 .width-xsmall { width: $device-xsmall; }
-.width-small { width: $device-small; }
+.width-small  { width: $device-small; }
 .width-medium { width: $device-medium; }
-.width-large { width: $device-large; }
+.width-large  { width: $device-large; }
 .width-xlarge { width: $device-xlarge; }
 
 // Media query classes for various device sizes

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

@@ -6,7 +6,7 @@
 // Default values for mixins
 //----------------------------------------------------------------------
 
-$default-rounded-corners-radius: 3px;
+$default-rounded-corners-radius: 2px; // As per Material Design spec
 
 // Rounded corners
 //----------------------------------------------------------------------
@@ -127,87 +127,105 @@ $default-rounded-corners-radius: 3px;
 // Shadows
 //----------------------------------------------------------------------
 
-@mixin box-shadow($text...) {
-  @if length($text) == 0 {
-    $text: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.16);
+@mixin box-shadow($shadow...) {
+  @if length($shadow) == 0 {
+    $shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.16);
   }
 
-  box-shadow: $text;
-  -moz-box-shadow: $text;
-  -webkit-box-shadow: $text;
+  box-shadow: $shadow;
+  -moz-box-shadow: $shadow;
+  -webkit-box-shadow: $shadow;
 }
 
-@mixin text-shadow($text) {
-  text-shadow: $text;
-  -moz-text-shadow: $text;
-  -webkit-text-shadow: $text;
+@mixin text-shadow($shadow) {
+  text-shadow: $shadow;
+  -moz-text-shadow: $shadow;
+  -webkit-text-shadow: $shadow;
 }
 
 // Flexbox
 //----------------------------------------------------------------------
 
+// Defaults to horizontal and vertical center.
+// Expects additional classes to override.
 @mixin flex-parent() {
+  align-items: center;
   display: flex;
   display: -ms-flexbox;
   display: -webkit-flex;
-}
-
-// For a row of flex elements, such as the appbar.
-@mixin flex-parent-row() {
-  @include flex-parent();
-  align-items: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
   flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-}
-
-@mixin flex-parent-row-align-center() {
-  @include flex-parent-row();
-  flex: 1 1 auto;
   justify-content: center;
 }
 
-@mixin flex-parent-row-align-right() {
-  @include flex-parent-row();
-  flex: 1;
-  justify-content: flex-end;
-}
+@mixin flex-align-left() { justify-content: flex-start; }
+@mixin flex-align-center() { justify-content: center; }
+@mixin flex-align-right() { justify-content: flex-end; }
 
-@mixin flex-parent-row-align-top() {
-  @include flex-parent-row();
-  align-items: flex-start;
-  -ms-flex-align: flex-start;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-}
+@mixin flex-vertical-align-top() { align-items: flex-start; }
+@mixin flex-vertical-align-center() { align-items: center; }
+@mixin flex-vertical-align-bottom() { align-items: flex-end; }
 
-// Center elements vertically and horizontally
-@mixin flex-center() {
+@mixin flex-parent-align-top() {
   @include flex-parent();
-  align-items: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-}
+  @include flex-vertical-align-top();
+}
+
+// // For a row of flex elements, such as the appbar.
+// @mixin flex-parent-row() {
+//   @include flex-parent();
+//   align-items: center;
+//   -ms-flex-align: center;
+//   -webkit-align-items: center;
+//   -webkit-box-align: center;
+//   flex-direction: row;
+//   flex-wrap: nowrap;
+//   justify-content: flex-start;
+// }
+//
+// @mixin flex-parent-row-align-center() {
+//   @include flex-parent-row();
+//   flex: 1 1 auto;
+//   justify-content: center;
+// }
+//
+// @mixin flex-parent-row-align-right() {
+//   @include flex-parent-row();
+//   flex: 1;
+//   justify-content: flex-end;
+// }
+//
+// @mixin flex-parent-row-align-top() {
+//   @include flex-parent-row();
+//   align-items: flex-start;
+//   -ms-flex-align: flex-start;
+//   -webkit-align-items: flex-start;
+//   -webkit-box-align: flex-start;
+// }
+
+// // Center elements vertically and horizontally
+// @mixin flex-center() {
+//   @include flex-parent();
+//   align-items: center;
+//   -ms-flex-align: center;
+//   -webkit-align-items: center;
+//   -webkit-box-align: center;
+//   flex-direction: column;
+//   flex-wrap: nowrap;
+//   justify-content: center;
+//   height: 100%;
+//   width: 100%;
+// }
 
 // Grid list
-@mixin flex-grid-list() {
-  @include flex-parent();
-  align-items: flex-start;
-  -ms-flex-align: flex-start;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
+// @mixin flex-grid-list() {
+//   @include flex-parent();
+//   align-items: flex-start;
+//   -ms-flex-align: flex-start;
+//   -webkit-align-items: flex-start;
+//   -webkit-box-align: flex-start;
+//   flex-direction: row;
+//   flex-wrap: wrap;
+// }
 
 // Boxes
 //----------------------------------------------------------------------
@@ -265,7 +283,8 @@ $default-rounded-corners-radius: 3px;
   min-height: $list-one-line-height;
   padding-left: $spacing-small;
   padding-right: $spacing-small;
-  @include flex-parent-row();
+  @include flex-parent();
+  @include flex-align-left();
   @include no-touch-highlight-color();
   @include transition(background-color 0.30s ease);
 }
@@ -290,7 +309,8 @@ $default-rounded-corners-radius: 3px;
   font-size: $font-size-small;
   font-weight: normal;
   padding-bottom: $spacing-xsmall;
-  @include flex-parent-row();
+  @include flex-parent();
+  @include flex-align-left();
 }
 
 @mixin list-item-primary-subtext() {
@@ -303,12 +323,6 @@ $default-rounded-corners-radius: 3px;
   color: color("helper");
   padding-left: $spacing-small;
   padding-right: $spacing-small;
-  // text-align: right;
-}
-
-@mixin list-item-secondary-actions() {
-  @include list-item-secondary();
-  padding-right: 0;
 }
 
 // Font smoothing
@@ -318,9 +332,45 @@ $default-rounded-corners-radius: 3px;
   -webkit-font-smoothing: antialiased;
 }
 
-// DRY borders
+// Specifically for small devices where the border would normally leave
+// a 1px line on the edges. Using box-shadow allows the border to be
+// hidden on the edges.
 //----------------------------------------------------------------------
 
-@mixin border($color: #aaa) {
+@mixin border($color: color("divider")) {
   @include box-shadow(0 0 1px $color);
 }
+
+// Elevation (z-index)
+//----------------------------------------------------------------------
+
+@mixin elevation($z-value) {
+  @if type-of($z-value) != number or not unitless($z-value) {
+    @error "$z-value must be a unitless number";
+  }
+
+  z-index: : $z-value;
+}
+
+// Material Icons
+//----------------------------------------------------------------------
+
+@mixin material-icons() {
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px; // Default icon size
+  display: inline-block;
+  // line-height: 1;
+  line-height: inherit;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  -webkit-font-smoothing: antialiased; // WebKit
+  text-rendering: optimizeLegibility; // Safari/Chrome
+  -moz-osx-font-smoothing: grayscale; // Firefox
+  font-feature-settings: "liga"; // IE
+}