dlegr250_material_design 0.5.80 → 0.5.81

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

@@ -2,70 +2,42 @@
 // SCSS variables accessible in every SCSS file imported after this one.
 //======================================================================
 
-// Dimensions - application
+// Dimensions - toolbars
 //----------------------------------------------------------------------
 
-$application-container-min-width: 300px;
-$body-background-color: #eee !default;
+$toolbar-height-device-small:   56px !default;
+$toolbar-height-device-medium:  64px !default;
+$toolbar-height-device-large:   72px !default;
+$toolbar-height-device-xlarge:  72px !default;
 
-// Dimensions - appbar
-//----------------------------------------------------------------------
-
-// DEPRECATE
-$appbar-height-small: 56px !default; // Small devices
-$appbar-height-medium: 64px !default; // Medium to large devices
-$appbar-height: $appbar-height-medium !default;
-
-// Use
-$appbar-height-device-small: 56px !default;
-$toolbar-height-device-small: 56px !default;
-
-$appbar-height-device-medium: 64px !default;
-$toolbar-height-device-medium: 56px !default;
-
-$appbar-height-device-large: 64px !default;
-$toolbar-height-device-large: 56px !default;
-
-$appbar-button-height: 48px !default;
-
-// Dimensions - toolbar
-//----------------------------------------------------------------------
-
-$toolbar-height: $appbar-height !default;
+$toolbar-button-height: 48px !default;
 
 // Dimensions - sidebars
 //----------------------------------------------------------------------
 
-$sidebar-width: 280px !default;
-
-// Dimensions - main
-//----------------------------------------------------------------------
-
-$main-top: $appbar-height;
-$main-left: $sidebar-width + 1; // Allows for 1px border
-
-// Dimensions - cards
-//----------------------------------------------------------------------
-
-$card-width-xsmall: 180px;
-$card-width-small: 220px;
-$card-width: 280px;
-$card-width-normal: $card-width; // For consistency
-$card-width-large: 360px;
-$card-width-xlarge: 420px;
+$sidebar-width: 250px !default;
 
 // Text fields
 //----------------------------------------------------------------------
 
-$text-fields: "input[type='email'], input[type='number'], input[type='search'], input[type='text'], input[type='tel'], input[type='url'], input[type='password'], textarea";
+$text-fields: "
+  input[type='email'],
+  input[type='number'],
+  input[type='search'],
+  input[type='text'],
+  input[type='tel'],
+  input[type='url'],
+  input[type='password'],
+  textarea
+";
 
 // Dimensions - lists
 //----------------------------------------------------------------------
 
-$list-one-line-height: 48px;
+$list-one-line-height:             48px;
 $list-one-line-with-avatar-height: 56px;
-$list-two-lines-height: 72px;
-$list-three-lines-height: 88px;
+$list-two-lines-height:            72px;
+$list-three-lines-height:          88px;
 
 // 72px is the specification, but minus 32px for 16px left/right padding.
 $list-item-icon-width: 40px;
@@ -73,17 +45,19 @@ $list-item-icon-width: 40px;
 // Dimensions - dialogs
 //----------------------------------------------------------------------
 
-$dialog-width-xsmall: 280px; // From Google Material Design spec, min size
-$dialog-width-small: 360px;
-$dialog-width-normal: 500px;
-$dialog-width-large: 760px;
+$dialog-header-height: $toolbar-height-device-large !default;
+
+$dialog-width-xsmall:  280px; // From Google Material Design spec, min size
+$dialog-width-small:   360px;
+$dialog-width-normal:  500px;
+$dialog-width-large:   760px;
 $dialog-width-xlarge: 1000px;
 
 // Dimensions - menus
 //----------------------------------------------------------------------
 
 $menu-max-height: 500px;
-$menu-width: 56px;
+$menu-width:       56px;
 $menu-width-factors: 1, 2, 3, 4, 5, 6, 7;
 
 // Dimensions - tabs
@@ -95,13 +69,12 @@ $tab-height: 50px;
 //----------------------------------------------------------------------
 
 $button-height-dense: 32px;
-$button-height: 40px;
+$button-height:       40px;
 $button-height-large: 56px;
 
 $button-icon-height: $button-height;
 
-$button-fab-height: 56px;
-
+$button-fab-height:     56px;
 $button-fab-min-height: 40px;
 
 // Dimensions - inputs (text-fields, etc...)
@@ -113,9 +86,9 @@ $input-height: 40px;
 //----------------------------------------------------------------------
 
 $font-size-xsmall: 10px;
-$font-size-small: 12px;
+$font-size-small:  12px;
 $font-size-normal: 14px;
-$font-size-large: 20px;
+$font-size-large:  20px;
 $font-size-xlarge: 34px;
 
 $font-size-10: 10px;
@@ -133,48 +106,40 @@ $font-size-icon: 24px;
 // Spacing
 //----------------------------------------------------------------------
 
-$spacing-xsmall: 4px;
-$spacing-small: 8px;
+$spacing-xsmall:  4px;
+$spacing-small:   8px;
 $spacing-normal: 16px;
-$spacing-large: 24px;
+$spacing-large:  24px;
 $spacing-xlarge: 32px;
 
 // Elevation (z-index)
 // See: https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-elevation-android
 //----------------------------------------------------------------------
 
-$elevation-1: 1;   // Switch
-$elevation-2: 2;   // Card, button
-$elevation-3: 3;   // Refresh indicator,
-$elevation-4: 4;   // Appbar
-$elevation-6: 6;   // FAB (resting), snackbar
-$elevation-8: 8;   // Bottom nav, menu, raised button
-$elevation-9: 9;   // Submenu
-$elevation-12: 12; // FAB (pressed)
-$elevation-14: 14; // Overlay
-$elevation-16: 16; // Sidebar, modal bottom sheet
-$elevation-24: 24; // Dialog, pickers
-$elevation-26: 26; // Popups on top of dialogs
-
-// DEPRECATED: USE ELEVATION VARIABLES
-$layout-depth: 10;
-$menu-depth: 20;
-$overlay-depth: 30;
-$sidebar-depth: 40;
-$dialog-depth: 50;
+// $elevation-1: 1;   // Switch
+// $elevation-2: 2;   // Card, button
+// $elevation-3: 3;   // Refresh indicator,
+// $elevation-4: 4;   // Appbar
+// $elevation-6: 6;   // FAB (resting), snackbar
+// $elevation-8: 8;   // Bottom nav, menu, raised button
+// $elevation-9: 9;   // Submenu
+// $elevation-12: 12; // FAB (pressed)
+// $elevation-14: 14; // Overlay
+// $elevation-16: 16; // Sidebar, modal bottom sheet
+// $elevation-24: 24; // Dialog, pickers
+// $elevation-26: 26; // Popups on top of dialogs
+
+@for $z-value from 0 through 24 {
+  .elevation-#{$z-value} {
+    @include elevation($z-value);
+  }
+}
 
 // Device breakpoints
 //----------------------------------------------------------------------
 
-$device-xsmall: 320px;
-$device-small: 400px;
-$device-medium: 760px;
-$device-large: 1000px;
-$device-xlarge: 1200px;
-
-// DEPRECATED: USE DEVICE VARIABLES
-$width-xsmall: $device-xsmall;
-$width-small: $device-small;
-$width-medium: $device-medium;
-$width-large: $device-large;
-$width-xlarge: $device-xlarge;
+$device-xsmall:  320px;  // Small phone
+$device-small:   400px;  // Larger phone
+$device-medium:  760px;  // Tablet
+$device-large:  1000px; // Desktop
+$device-xlarge: 1200px; // Large desktop

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

@@ -19,7 +19,8 @@
 .blank-state-container {
   height: 100%;
   width: 100%;
-  @include flex-center();
+  @include flex-parent();
+  @include flex-vertical-align-center();
 }
 
 // Blank state - base

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

@@ -11,9 +11,9 @@
   top: 0;
   width: 100%;
   will-change: scale, opacity;
-  z-index: $overlay-depth;
-  @include flex-center();
-  // @include no-touch-highlight();
+  z-index: $elevation-overlay;
+  @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);
@@ -26,7 +26,7 @@
   }
 }
 
-// Dialogs - base
+// Dialogs - base card
 //----------------------------------------------------------------------
 
 .dialog {
@@ -34,10 +34,10 @@
   cursor: default;
   max-height: 100%;
   max-width: 90%;
-  min-width: $dialog-width-xsmall;
+  min-width: 280px;
   overflow: hidden;
   width: $dialog-width-xsmall;
-  z-index: $dialog-depth;
+  @include elevation(24);
   @include rounded-corners();
 }
 
@@ -53,7 +53,7 @@
   @include rounded-corners(0);
 }
 
-@media (min-width: $width-small) {
+@media (min-width: $device-small) {
   .dialog,
   .dialog-full-screen,
   .dialog[data-fullscreen="true"] {
@@ -82,7 +82,7 @@
 .dialog-appbar {
   @include flex-parent-row();
   border-bottom: 1px solid color("divider");
-  height: $appbar-height;
+  height: $dialog-header-height;
   padding: 0 $spacing-small;
   position: relative;
   z-index: $dialog-depth + 1;
@@ -187,18 +187,18 @@
 
 .dialog-scrollable,
 .dialog-scrollable-no-actions {
-  max-height: calc(100vh - #{$appbar-height}); // For dialog-header
+  max-height: calc(100vh - #{$dialog-header-height}); // For dialog-header
   overflow-x: hidden;
   overflow-y: auto;
 }
 
 @media (min-width: $width-small) {
   .dialog-scrollable {
-    max-height: calc(90vh - #{$appbar-height * 2}); // For dialog-header and dialog-actions
+    max-height: calc(90vh - #{$dialog-header-height * 2}); // For dialog-header and dialog-actions
   }
 
   .dialog-scrollable-no-actions {
-    max-height: calc(90vh - #{$appbar-height}); // For dialog-header and dialog-actions
+    max-height: calc(90vh - #{$dialog-header-height}); // For dialog-header and dialog-actions
   }
 }
 
@@ -207,8 +207,8 @@
 
 .dialog-actions {
   border-top: 1px solid color("divider");
-  height: $appbar-height;
-  line-height: $appbar-height;
+  height: $dialog-header-height;
+  line-height: $dialog-header-height;
   padding: 0 $spacing-normal;
 }
 

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

@@ -1,59 +1,45 @@
 //======================================================================
 // EXAMPLE:
-// <hr class="divider large" />
-// <hr class="spacer large" />
+// <hr class="divider divider-normal" />
+// <hr class="spacer spacer-large" />
 //======================================================================
 
-hr {
-  height: 1px;
-  margin: ($spacing-normal / 2) 0;
-
-  // Has a line
-  &.divider {
-    border-color: color("divider");
-    margin: $spacing-normal 0;
-  }
-
-  // Does not have a line
-  &.spacer {
-    border: none;
-    margin: $spacing-normal 0;
-  }
-
-  &.xsmall { margin: ($spacing-xsmall / 2) 0; }
-  &.small { margin: ($spacing-small / 2) 0; }
-  &.normal { margin: ($spacing-normal / 2) 0; }
-  &.large { margin: ($spacing-large / 2) 0; }
-  &.xlarge { margin: ($spacing-xlarge / 2) 0; }
-
-  // No margins, totally flush against other containers
-  &.flush { margin: 0; }
+// Shared
+//----------------------------------------------------------------------
+
+// To use on other elements besides HR
+.divider,
+.spacer {
+  display: block;
 }
 
-// WHAT ARE THESE USED FOR???
-// Label dividers
+// Divider with line
 //----------------------------------------------------------------------
 
-// .label-divider {
-//   border-top: 1px solid #ccc;
-//   height: 0;
-//   margin: $spacing-large 0;
-//   position: relative;
-//   text-align: center;
-// }
-//
-// .label-divider-text {
-//   $label-divider-text-width: 30px;
-//
-//   background-color: #fff;
-//   color: #999;
-//   display: inline-block;
-//   height: $label-divider-text-width;
-//   line-height: $label-divider-text-width;
-//   padding: 0;
-//   position: relative;
-//   text-align: center;
-//   top: -16px;
-//   width: $label-divider-text-width;
-//   @include rounded-corners(50%);
-// }
+.divider {
+  border: none;
+  border-bottom: 1px solid color("divider");
+  height: 0;
+  margin: 0;
+}
+
+.divider-xsmall { margin: ($spacing-xsmall / 2) 0; }
+.divider-small { margin:  ($spacing-small / 2) 0; }
+.divider-normal { margin: ($spacing-normal / 2) 0; }
+.divider-large { margin:  ($spacing-large / 2) 0; }
+.divider-xlarge { margin: ($spacing-xlarge / 2) 0; }
+
+// Spacer without line
+//----------------------------------------------------------------------
+
+.spacer {
+  border: none;
+  height: 0;
+  margin: 0;
+}
+
+.spacer-xsmall { margin: ($spacing-xsmall / 2) 0; }
+.spacer-small { margin:  ($spacing-small / 2) 0; }
+.spacer-normal { margin: ($spacing-normal / 2) 0; }
+.spacer-large { margin:  ($spacing-large / 2) 0; }
+.spacer-xlarge { margin: ($spacing-xlarge / 2) 0; }

data/vendor/assets/stylesheets/components/layout/application_container.scss

@@ -0,0 +1,12 @@
+// Wrap entire application
+//----------------------------------------------------------------------
+
+#application-container {
+  bottom: 0;
+  position: absolute;
+  left: 0;
+  min-width: 300px;
+  overflow: hidden;
+  right: 0;
+  top: 0;
+}

data/vendor/assets/stylesheets/components/layout/grid.scss

@@ -0,0 +1,102 @@
+// Grid
+//----------------------------------------------------------------------
+
+$flex-grid-width: 100%;
+$flex-grid-gutter: 16px;
+$flex-grid-columns-count: 12;
+
+.grid {
+  display: block;
+  margin: auto;
+  padding: 0;
+  width: $flex-grid-width;
+}
+
+.grid-small-padded { padding: $flex-grid-gutter / 2; }
+
+@media (min-width: $device-medium) {
+  .grid-medium-padded { padding: $flex-grid-gutter / 2; }
+}
+
+@media (min-width: $device-large) {
+  .grid-large-padded { padding: $flex-grid-gutter / 2; }
+}
+
+// Container
+//----------------------------------------------------------------------
+
+.row-container {
+  display: block;
+  margin: auto;
+  padding: $flex-grid-gutter / 2;
+  width: $flex-grid-width;
+}
+
+// Rows
+//----------------------------------------------------------------------
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+// Generate classes
+//----------------------------------------------------------------------
+
+[class^="col-"] {
+  box-sizing: border-box;
+  flex-grow: 0;
+  flex-shrink: 0;
+  padding: $flex-grid-gutter / 2;
+}
+
+// Small devices
+@for $i from 1 through $flex-grid-columns-count {
+  $width: (100% / $flex-grid-columns-count * $i);
+  .col-small-#{$i} {
+    flex-basis: $width;
+    max-width: $width;
+  }
+}
+
+// Medium devices
+@media (min-width: $width-medium) {
+  @for $i from 1 through $flex-grid-columns-count {
+    $width: (100% / $flex-grid-columns-count * $i);
+    .col-med-#{$i},
+    .col-medium-#{$i} {
+      flex-basis: $width;
+      max-width: $width;
+    }
+  }
+}
+
+// Large devices
+@media (min-width: $width-large) {
+  @for $i from 1 through $flex-grid-columns-count {
+    $width: (100% / $flex-grid-columns-count * $i);
+    .col-large-#{$i},
+    .col-#{$i} {
+      flex-basis: $width;
+      max-width: $width;
+    }
+  }
+}
+
+// On small devices, remove extra padding
+//----------------------------------------------------------------------
+
+// .grid .row .col-small-12 {
+//   padding: 0;
+// }
+//
+// @media (min-width: $device-medium) {
+//   .grid-small-padded .row .col-small-12,
+//   .grid-medium-padded .row .col-small-12,
+//   .grid-large-padded .row .col-small-12 {
+//     padding: $flex-grid-gutter / 2;
+//   }
+// }