dlegr250_material_design 0.1.0

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

@@ -0,0 +1,164 @@
+//======================================================================
+// EXAMPLE:
+// <div class="menu-container">
+//   <i class="zmdi zmdi-more-vert button button-icon" role="menu-trigger" data-menu-id="menu-ID"></i>
+//   <div class="menu menu-width-3" data-position="bottom-right">
+//     <div class="menu-item">
+//       <div class="menu-item-icon">
+//         <i class="zmdi zmdi-star"></i>
+//       </div>
+//       <div class="menu-item-primary">
+//         Primary Text
+//       </div>
+//       <div class="menu-item-secondary">
+//         <%= link_to "", url, class: "zmdi zmdi-star" %>
+//       </div>
+//     </div>
+//   </div>
+// </div>
+//======================================================================
+
+// Menus - triggers
+//----------------------------------------------------------------------
+
+[role="menu-trigger"] {
+  cursor: pointer;
+}
+
+// Menus - base
+//----------------------------------------------------------------------
+
+.menu-container {
+  display: inline-block;
+  position: relative;
+}
+
+.menu {
+  background: color("white");
+  line-height: normal;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  text-align: left;
+  text-transform: none;
+  top: 0;
+  transform-origin: 100% 0;
+  visibility: hidden;
+  will-change: scale;
+  z-index: $menu-depth;
+  @include box-shadow(0 2px 5px 1px rgba(0, 0, 0, 0.26));
+  @include rounded-corners;
+  @include transition(all 0.10s ease);
+  @include transform(scale(0.5));
+  @include transparency(0);
+
+  &.visible {
+    visibility: visible;
+    @include transform(scale(1));
+    @include transparency(1);
+  }
+}
+
+// Add padding at top/bottom on large
+@media (min-width: $large-width) {
+  .menu {
+    padding: $spacing-small 0;
+  }
+}
+
+// Menus - menu item
+//----------------------------------------------------------------------
+
+.menu-item {
+  box-sizing: border-box;
+  color: color("text");
+  cursor: pointer;
+  display: table-row;
+  font-size: $font-size-normal;
+  @include no-touch-highlight;
+  @include transition(background-color 0.30s ease);
+
+  &:hover {
+    background-color: color("hover");
+  }
+}
+
+.menu-item:active {
+  .menu-item-icon,
+  .menu-item-primary,
+  .menu-item-secondary {
+    background-color: darken(color("hover"), 5%);
+  }
+}
+
+// Menus - menu item - shared
+//----------------------------------------------------------------------
+
+.menu-item-icon,
+.menu-item-primary,
+.menu-item-secondary {
+  box-sizing: border-box;
+  display: table-cell;
+  height: 48px;
+  min-height: 48px;
+  margin: 0;
+  padding: $spacing-normal 0;
+  vertical-align: middle;
+  @include transition(background-color 0.30s ease);
+}
+
+// Make large menus slightly smaller
+@media (min-width: $large-width) {
+  .menu-item-icon,
+  .menu-item-primary,
+  .menu-item-secondary {
+    height: 36px;
+    min-height: 36px;
+    padding-bottom: $spacing-xsmall;
+    padding-top: $spacing-xsmall;
+  }
+}
+
+
+// Menus - menu item - icon
+//----------------------------------------------------------------------
+
+.menu-item-icon {
+  color: color("hint");
+  font-size: $font-size-icon;
+  padding: 0;
+  padding-left: $spacing-normal;
+  width: 72px - $spacing-normal * 2;
+}
+
+// Menus - menu item - primary
+//----------------------------------------------------------------------
+
+.menu-item-primary {
+  padding-left: $spacing-normal;
+  padding-right: $spacing-normal;
+  min-width: $menu-width;
+}
+
+// Menus - menu item - secondary
+//----------------------------------------------------------------------
+
+.menu-item-secondary {
+  color: color("hint");
+  padding-right: $spacing-normal;
+  text-align: right;
+
+  .icon {
+    font-size: $font-size-icon;
+  }
+}
+
+// Menus - sizes
+//----------------------------------------------------------------------
+
+@each $factor in $menu-width-factors {
+  .menu-width-#{$factor} .menu-item-primary {
+    min-width: $menu-width * $factor;
+  }
+}

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

@@ -0,0 +1,27 @@
+// Overlay - base
+//----------------------------------------------------------------------
+
+#overlay {
+  background-color: rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+  height: 100%;
+  // display: none;
+  left: 0;
+  opacity: 1;
+  overflow-y: scroll;
+  position: fixed;
+  top: 0;
+  visibility: hidden;
+  width: 100%;
+  z-index: $overlay-depth;
+  @include no-touch-highlight;
+  @include transparency(0.5);
+  @include transition(all 0.10s ease);
+
+  &.visible {
+    // display: block;
+    visibility: visible;
+    @include transparency(1.0);
+    @include transition(all 0.30s ease);
+  }
+}

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

@@ -0,0 +1,77 @@
+//======================================================================
+// See: https://github.com/joostLawerman/SnackbarLightjs
+//======================================================================
+
+// Snackbar - container
+//----------------------------------------------------------------------
+
+#snackbar-container {
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  width: 100%;
+  z-index: 99999;
+}
+
+// Snackbar - base
+//----------------------------------------------------------------------
+
+.snackbar {
+  background-color: color("snackbar");
+  box-sizing: border-box;
+  clear: both;
+  color: color("white");
+  cursor: pointer;
+  font-size: $font-size-normal;
+  min-width: 100%;
+  opacity: 0;
+  overflow: hidden;
+  @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));
+  @include transform(translateY(200%));
+  @include transition(transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s);
+  @include rounded-corners(0);
+
+  &.active {
+    height: auto;
+    margin-bottom: 0;
+    padding: 18px 24px;
+    @include transform(none);
+    @include transition(transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s);
+    @include transparency(1.0);
+
+    a {
+      color: color("green");
+      font-weight: bold;
+      line-height: 100%;
+      margin-left: 24px;
+      text-decoration: none;
+    }
+  }
+}
+
+// Snackbar - media queries for medium and beyond
+//----------------------------------------------------------------------
+
+@media (min-width: $medium-width) {
+  #snackbar-container {
+    left: 20px !important;
+    right: auto;
+    width: auto;
+  }
+
+  #snackbar-container .snackbar {
+    max-width: 568px;
+    min-width: 288px;
+
+    &.active {
+      margin-bottom: 20px;
+      padding: 14px 24px;
+    }
+  }
+
+  #snackbar-container [class="snackbar active"] {
+    @include rounded-corners(2px);
+    margin-bottom: 20px;
+  }
+}

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

@@ -0,0 +1,67 @@
+// Variables
+//----------------------------------------------------------------------
+
+$spinner-height: 24px;
+
+// Spinner container absolutely centers spinner
+//----------------------------------------------------------------------
+
+.spinner-container {
+  @include flex-center();
+}
+
+// Spinners - base
+//----------------------------------------------------------------------
+
+.spinner {
+  animation: rotate 0.8s infinite linear;
+  border-width: 4px;
+  border-style: solid;
+  border-color: color("divider");
+  border-right-color: transparent !important;
+  display: inline-block;
+  height: $spinner-height;
+  line-height: $spinner-height;
+  vertical-align: middle;
+  width: $spinner-height;
+  @include rounded-corners(50%);
+
+  &.spinner-xsmall {
+    height: $spinner-height * 0.5;
+    width: $spinner-height * 0.5;
+  }
+
+  &.spinner-small {
+    height: $spinner-height * 0.8;
+    width: $spinner-height * 0.8;
+  }
+
+  &.spinner-normal {
+    height: $spinner-height;
+    width: $spinner-height;
+  }
+
+  &.spinner-large {
+    height: $spinner-height * 1.5;
+    width: $spinner-height * 1.5;
+  }
+
+  &.spinner-xlarge {
+    height: $spinner-height * 2;
+    width: $spinner-height * 2;
+  }
+}
+
+// Spinners - colors
+//----------------------------------------------------------------------
+
+@each $color-name, $color in $colors {
+  .spinner-#{$color-name} {
+    border-color: $color;
+  }
+}
+
+@keyframes rotate {
+  0%    { transform: rotate(0deg); }
+  100%  { transform: rotate(360deg); }
+}

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

@@ -0,0 +1,62 @@
+// Tabs - base
+//----------------------------------------------------------------------
+
+.tabs {
+  display: table;
+  height: $tab-height;
+  table-layout: fixed;
+  width: 100%;
+}
+
+// Tabs - tab
+//----------------------------------------------------------------------
+
+.tab {
+  border-bottom: 2px solid transparent;
+  color: color("hint");
+  cursor: pointer;
+  display: table-cell;
+  font-size: $font-size-normal;
+  font-weight: 600;
+  height: $tab-height - 2px; // Account for 2px bottom border on tab
+  max-width: 264px;
+  min-width: 72px;
+  padding: 0 12px;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  vertical-align: middle;
+  @include transition(all 0.30s ease);
+
+  .icon {
+    color: color("hint");
+    font-size: $font-size-icon;
+  }
+
+  &:active {
+    background-color: color("hover");
+  }
+}
+
+// Tabs - colored
+//----------------------------------------------------------------------
+
+@each $color-name, $color in $colors {
+  .tabs-#{$color-name} {
+    .tab {
+      &:hover,
+      &:active {
+        border-color: lighten($color, 30%);
+      }
+
+      &.active {
+        border-color: $color;
+      }
+
+      &.active,
+      &.active .icon {
+        color: $color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+//======================================================================
+// EXAMPLE:
+// <div data-tooltip="Tooltip text" data-tooltip-position="left">
+//   Text
+// </div>
+//======================================================================
+
+// Tooltips - base
+//----------------------------------------------------------------------
+[data-tooltip] {
+  position: relative;
+
+  &:after {
+    background: color("snackbar");
+    color: color("white");
+    content: attr(data-tooltip);
+    font-size: $font-size-small;
+    left: 50%;
+    line-height: normal;
+    padding: $spacing-small;
+    position: absolute;
+    text-transform: none;
+    top: 100%;
+    visibility: hidden;
+    white-space: nowrap;
+    z-index: 2;
+    @include rounded-corners;
+    @include transform(translateX(-50%) translateY(10%));
+    @include transition(opacity 0.2s ease, transform 0.2s ease);
+    @include transparency(0);
+  }
+
+  &:hover {
+    &:after {
+      display: block;
+      visibility: visible;
+      @include transparency(1);
+    }
+  }
+}
+
+// Tooltips - position
+//----------------------------------------------------------------------
+
+[data-tooltip-position="top"] {
+  &:after {
+    left: 50%;
+    top: 0;
+    @include transform(translateX(-50%) translateY(-10%));
+  }
+}
+
+[data-tooltip-position="right"] {
+  &:after {
+    left: 100%;
+    top: 20%;
+    @include transform(translateX(10%));
+  }
+}
+
+[data-tooltip-position="bottom"] {
+  &:after {
+    left: 50%;
+    top: 100%;
+    @include transform(translateX(-50%) translateY(10%));
+  }
+}
+
+[data-tooltip-position="left"] {
+  &:after {
+    left: 0;
+    top: 25%;
+    @include transform(translateX(-110%));
+  }
+}