dlegr250_material_design 0.5.80 → 0.5.81

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

@@ -0,0 +1,16 @@
+//======================================================================
+// By default covers entire screen. Assumes top/left dimensions will be
+// set per-application in their own stylesheets.
+//======================================================================
+
+.main {
+  background-color: #ececec;
+  bottom: 0;
+  left: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}

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

@@ -0,0 +1,31 @@
+//======================================================================
+// Only used on sidebars since dialogs have their own container.
+//======================================================================
+
+#overlay {
+  background-color: rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  pointer-events: none;
+  top: 0;
+  width: 100%;
+  will-change: opacity;
+  @include elevation(14);
+  @include flex-parent();
+  @include no-touch-highlight;
+  @include transparency(0);
+  @include transition(opacity 0.3s cubic-bezier(0, 0, 0.3, 1));
+
+  &.is-active {
+    pointer-events: auto;
+    @include transparency(1);
+  }
+
+  // DEPRECATE
+  &[data-state="active"] {
+    pointer-events: auto;
+    @include transparency(1);
+  }
+}

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

@@ -0,0 +1,17 @@
+// Sidebar - base
+//----------------------------------------------------------------------
+
+.sidebar {
+  background-color: color("white");
+  bottom: 0;
+  left: 0;
+  max-width: 98%;
+  overflow-y: auto;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: $sidebar-width;
+  will-change: transform;
+  @include elevation(16);
+  @include transition(transform 0.2s cubic-bezier(0, 0, 0.3, 1));
+}

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

@@ -0,0 +1,129 @@
+// Toolbars - base
+//----------------------------------------------------------------------
+
+.toolbar {
+  border-bottom: 1px solid color("divider");
+  height: $toolbar-height-device-small;
+  left: 0;
+  padding: 0 $spacing-small;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+  @include elevation(4);
+  @include transition(box-shadow 0.2s ease);
+  @include flex-parent();
+}
+
+// Toolbar - section
+// Allow CSS classes to override default center
+//----------------------------------------------------------------------
+
+.toolbar-section {
+  @include flex-parent();
+}
+
+// Toolbar - title
+//----------------------------------------------------------------------
+
+.toolbar-title {
+  flex: 1; // Fill up empty space
+  font-size: $font-size-normal;
+  @include flex-align-left();
+  @include font-smoothing();
+  @include truncate-text();
+}
+
+.toolbar-title-supertext,
+.toolbar-title-subtext {
+  font-size: $font-size-small;
+  @include truncate-text();
+}
+
+.toolbar-title-supertext {
+  padding-bottom: $spacing-xsmall;
+}
+
+.toolbar-title-subtext {
+  padding-top: $spacing-xsmall;
+}
+
+// Toolbar - button icon
+//----------------------------------------------------------------------
+
+.toolbar-button-icon {
+  background-color: transparent;
+  border: none;
+  color: color("helper");
+  cursor: pointer;
+  height: 48px;
+  outline: none;
+  text-align: center;
+  width: 48px;
+  @include material-icons();
+  @include no-touch-highlight-color();
+  @include rounded-corners(50%);
+  @include transition(background-color 0.2s ease-in-out);
+  @include flex-parent();
+
+  &:active {
+    background-color: rgba(0, 0, 0, 0.20);
+  }
+}
+
+@media (hover: hover) {
+  .toolbar-button-icon:hover {
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+}
+
+// Toolbar - medium device
+//----------------------------------------------------------------------
+
+@media (min-width: $device-medium) {
+  .toolbar {
+    height: $toolbar-height-device-medium;
+  }
+
+  .toolbar-title {
+    font-size: $font-size-normal + 2px;
+  }
+}
+
+// Toolbar - large device
+//----------------------------------------------------------------------
+
+@media (min-width: $device-large) {
+  .toolbar {
+    height: $toolbar-height-device-large;
+  }
+
+  .toolbar-title {
+    font-size: $font-size-large;
+  }
+}
+
+// Toolbar - xlarge device
+//----------------------------------------------------------------------
+
+@media (min-width: $device-xlarge) {
+  .toolbar {
+    height: $toolbar-height-device-large;
+  }
+}
+
+// Toolbar - spacer/divider
+//----------------------------------------------------------------------
+
+.toolbar-spacer,
+.toolbar-divider {
+  border: 0;
+  display: inline-block;
+  height: 80%;
+  margin: 0 $spacing-xsmall;
+  width: 0;
+}
+
+.toolbar-divider {
+  border-left: 1px solid color("divider");
+}

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

@@ -0,0 +1,146 @@
+//======================================================================
+// EXAMPLE:
+// <div class="search" data-state="inactive">
+//   <div class="search-header">
+//     <button role="button" class="appbar-button-icon" data-behavior="close-search">arrow_back</button>
+//     <input type="search" value="..." class="search-header-field" />
+//     <button role="button" class="appbar-button-icon" data-behavior="clear-search">close</button>
+//   </div>
+//   <div class="search-results">...</div>
+// </div>
+//======================================================================
+
+// Search - small devices
+//----------------------------------------------------------------------
+
+.search {
+  background-color: rgba(0, 0, 0, 0.6);
+  height: 100%;
+  left: 0;
+  position: fixed;
+  pointer-events: none;
+  right: 0;
+  top: 0;
+  width: 100%;
+  will-change: opacity;
+  @include elevation(24);
+  @include transparency(0);
+}
+
+.search-header,
+.search-results {
+  @include transition(all 0.30s cubic-bezier(0, 0, 0.3, 1));
+}
+
+.search-header {
+  background-color: color("white");
+  border-bottom: 1px solid color("divider");
+  height: $toolbar-height-device-small;
+  padding-left: $spacing-small;
+  padding-right: $spacing-small;
+  position: relative;
+  width: 100%;
+  @include flex-parent-row();
+}
+
+.search-search-icon {
+  color: color("helper");
+  display: none;
+}
+
+.search-header-field {
+  background-color: transparent;
+  border: 0 !important;
+  color: rgba(0, 0, 0, 0.54) !important;
+  flex: 1;
+  width: 100%;
+  @include box-shadow(none !important);
+  @include rounded-corners(0 !important);
+}
+
+.search-results {
+  background-color: color("white");
+  border: 0;
+  color: color("text");
+  max-height: 80vh;
+  overflow: scroll;
+  z-index: $elevation-24;
+  @include transparency(0);
+}
+
+// Search - small devices - active
+//----------------------------------------------------------------------
+
+.search[data-state="active"] {
+  &,
+  .search-results {
+    pointer-events: auto;
+    @include transparency(1);
+  }
+
+  .search-results {
+    .list-item[data-state="selected"] { background-color: color("hover"); }
+  }
+}
+
+// Search - medium devices
+//----------------------------------------------------------------------
+
+@media (min-width: $device-medium) {
+  .search {
+    background-color: transparent;
+    max-width: 300px;
+    pointer-events: auto;
+    position: relative;
+    @include flex-parent-row();
+    @include transparency(1);
+  }
+
+  .search-header {
+    background-color: rgba(0, 0, 0, 0.08);
+    border: 1px solid transparent;
+    height: $appbar-button-height;
+    @include rounded-corners(4px);
+  }
+
+  .search-close-button,
+  .search-clear-button {
+    display: none;
+  }
+
+  .search-search-icon {
+    display: block;
+  }
+
+  .search-results {
+    border: 1px solid color("divider");
+    border-top: none;
+    border-bottom: none;
+    pointer-events: none;
+    position: absolute;
+    top: $appbar-height-device-medium - 8px;
+    width: 100%;
+    z-index: $elevation-24;
+    @include box-shadow(0 12px 15px 0 rgba(0,0,0,0.24));
+    @include rounded-bottom-corners(4px);
+  }
+
+  .search[data-state="active"] .search-header {
+    background-color: color("white");
+    border-color: color("divider");
+    @include rounded-top-corners(4px);
+  }
+
+  .search[data-state="active"] {
+    max-width: 600px;
+  }
+}
+
+// Search - large devices
+//----------------------------------------------------------------------
+
+@media (min-width: $device-large) {
+  // .search {
+  //   max-width: 300px;
+  // }
+}

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

@@ -1,64 +1,106 @@
-// //======================================================================
-// // Note: Uses DIVs styled as table instead of TABLE element because
-// // you cannot make a LINK a TABLE ROW, and it is easier to re-style
-// // DIVs if you want to make responsive tables.
-// // EXAMPLE:
-// //======================================================================
-//
-// .table {
-//   background-color: color("white");
-//   border: 1px solid color("divider");
-//   display: table;
-//   width: 100%;
-//
-//   a {
-//     color: color("text");
-//   }
-// }
-//
-// .thead {
-//   border-bottom: 2px solid color("hover");
-//   display: table-row;
-//   height: 56px;
-// }
-//
-// .th {
-//   border-bottom: 2px solid color("hover");
-//   color: lighten(color("text"), 10%);
-//   display: table-cell;
-//   font-size: $font-size-normal;
-//   font-weight: bold;
-//   padding: 0 $spacing-normal;
-//   text-transform: uppercase;
-//   vertical-align: middle;
-// }
-//
-// .tr {
-//   border-bottom: 1px solid color("hover");
-//   display: table-row;
-//   height: 48px;
-// }
-//
-// .td {
-//   border-bottom: 1px solid color("hover");
-//   display: table-cell;
-//   padding: 0 $spacing-normal;
-//   vertical-align: middle;
-// }
-//
-// .table-hoverable .tr {
-//   @include transition(background-color 0.2s);
-//
-//   &:hover {
-//     background-color: color("hover");
-//   }
-// }
-//
-// // Striped rows
-// //----------------------------------------------------------------------
-//
-// .table-striped-rows {
-//   tr:nth-child(even) {
-//     background-color: lighten(color("hover"), 3%);
-//   }
-// }
+//======================================================================
+// Emulate HTML tables with flexbox DIVs. Useful for responsive design.
+//======================================================================
+
+.table {
+  border: none;
+  color: color("text");
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.thead {
+  display: table-header-group;
+}
+
+.tbody {
+  display: table-row-group;
+}
+
+.tr {
+  background-color: color("white");
+  border-bottom: none;
+  width: 100%;
+  display: table-row;
+  @include no-touch-highlight-color();
+  @include transition(background-color 0.30s ease);
+}
+
+.th {
+  border-bottom: 1px solid color("divider");
+  color: rgba(0, 0, 0, 0.54);
+  display: table-cell;
+  font-size: $font-size-normal;
+  font-weight: bold;
+  padding: $spacing-normal;
+  vertical-align: middle;
+}
+
+.td {
+  border-bottom: none;
+  color: color("text");
+  display: table-cell;
+  min-width: 0px;
+  padding: $spacing-normal;
+  vertical-align: middle;
+  word-break: break-word;
+  width: auto;
+}
+
+.td-icon {
+  color: color("icon");
+  max-width: 48px;
+  text-align: center;
+  width: 48px;
+  vertical-align: top;
+}
+
+.td-secondary {
+  color: color("helper");
+}
+
+.td-secondary-actions {
+  padding: $spacing-small;
+  text-align: right;
+  width: 64px;
+}
+
+.td-supertext,
+.td-subtext {
+  color: color("helper");
+  font-size: $font-size-small;
+}
+
+.td-supertext {
+  padding-bottom: $spacing-xsmall;
+}
+
+.td-subtext {
+  padding-top: $spacing-xsmall;
+}
+
+// Flex table - modifications
+//----------------------------------------------------------------------
+
+.table-align-top .td { vertical-align: top; }
+
+.table-bordered {
+  @include box-shadow(0 0 1px #aaa);
+}
+
+.table-divided {
+  .tr .td { border-bottom: 1px solid color("divider"); }
+}
+
+.table-bordered.table-divided .tbody .tr:last-child .td {
+  border-bottom: none;
+}
+
+.table-hoverable .tbody .tr:active { background-color: darken(color("grey-200"), 3%); }
+.table-hoverable .tbody .tr .button-icon:active { background-color: darken(color("grey-200"), 12%); }
+
+@media (hover: hover) {
+  .table-hoverable .tbody .tr:hover { background-color: color("grey-200"); }
+  .table-hoverable .tbody .tr .button-icon:hover { background-color: darken(color("grey-200"), 7%); }
+}