dlegr250_material_design 0.1.0

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

@@ -0,0 +1,28 @@
+//======================================================================
+// EXAMPLE:
+// <div class="badge badge-blue">10</div>
+//======================================================================
+
+// Badges - base
+//----------------------------------------------------------------------
+
+.badge {
+  display: inline-block;
+  font-size: $font-size-small;
+  padding: 2px 6px;
+  @include rounded-corners;
+}
+
+// Badges - colors
+//----------------------------------------------------------------------
+
+@each $color-name, $color in $colors {
+  .badge-#{$color-name} {
+    background-color: $color;
+    @if $color-name == "white" {
+      color: color("black");
+    } @else {
+      color: color("white");
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+//======================================================================
+// EXAMPLE:
+// <div class="blank-slate-container">
+//   <div class="blank-slate">
+//     <div class="blank-slate-icon">
+//       <span class="zmdi-hc-stack">
+//         <i class="zmdi zmdi-circle zmdi-hc-stack-2x"></i>
+//         <i class="zmdi zmdi-comments zmdi-hc-stack-1x zmdi-hc-inverse"></i>
+//       </span>
+//     </div>
+//     <div class="blank-slate-title">
+//       Title
+//     </div>
+//     <div class="blank-slate-subtitle">
+//       Subtitle
+//     </div>
+//   </div>
+// </div>
+//======================================================================
+
+// Blank slates - base
+//----------------------------------------------------------------------
+
+.blank-slate-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 80%;
+}
+
+.blank-slate {
+  color: color("hint");
+  margin: auto;
+  text-align: center;
+}
+
+// Blank slates - icon
+//----------------------------------------------------------------------
+
+.blank-slate-icon {
+  font-size: 72px;
+}
+
+// Blank slates - title
+//----------------------------------------------------------------------
+
+.blank-slate-title {
+  font-size: $font-size-large;
+  font-weight: bold;
+  padding: $spacing-normal 0;
+}
+
+// Blank slates - subtitle
+//----------------------------------------------------------------------
+
+.blank-slate-subtitle {
+  font-size: $font-size-normal;
+}

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

@@ -0,0 +1,34 @@
+//======================================================================
+// EXAMPLE:
+// <div class="box box-red rounded-corners constrained constrained-large">
+//   Text
+// </div>
+//======================================================================
+
+// Boxes - base
+//----------------------------------------------------------------------
+
+.box {
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  padding: $spacing-normal;
+}
+
+// Boxes - colored boxes
+//----------------------------------------------------------------------
+
+@each $color-name, $color in $colors {
+  .box-#{$color-name} {
+    background-color: $color;
+
+    @if $color-name == "hover" {
+      color: color("text");
+    } @else {
+      color: color("white");
+    }
+
+    &.box-bordered {
+      border-color: darken($color, 20%);
+    }
+  }
+}

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

@@ -0,0 +1,225 @@
+//======================================================================
+// EXAMPLE:
+// <div class="button button-raised-{COLOR}">Text</div>
+// <div class="button button-flat-{COLOR}">Text</div>
+// <div class="button button-icon zmdi zmdi-star"></div>
+// <div class="button button-icon-{COLOR} zmdi zmdi-star"></div>
+//======================================================================
+
+// Variables
+//----------------------------------------------------------------------
+
+$buttons: "button, .button, input[type='submit'], input[type='reset'], input[type='button']";
+
+// Buttons - base
+//----------------------------------------------------------------------
+
+#{$buttons} {
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-size: $font-size-normal;
+  font-weight: 600;
+  height: $button-height;
+  line-height: $button-height;
+  letter-spacing: 0.5px;
+  min-width: 88px;
+  outline: none;
+  padding: 0 $spacing-normal;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  vertical-align: middle;
+  white-space: nowrap;
+  @include no-touch-highlight;
+  @include rounded-corners;
+  @include transition(all 0.2s ease-in-out);
+
+  &:hover {
+    text-decoration: none !important;
+  }
+
+  &.button-dense {
+    font-size: $font-size-small;
+    height: $button-height-dense !important;
+    line-height: $button-height-dense !important;
+  }
+
+  &.button-large {
+    height: $button-height-large !important;
+    line-height: $button-height-large !important;
+  }
+}
+
+// Buttons - icon buttons
+//----------------------------------------------------------------------
+
+// Basic icon without any coloring
+.button-icon {
+  border: none;
+  color: color("icon");
+  font-size: $font-size-icon;
+  font-weight: 400;
+  width: $button-icon-height;
+  height: $button-icon-height;
+  line-height: $button-icon-height;
+  min-width: $button-icon-height;
+  padding: 0;
+  @include rounded-corners(250px);
+
+  &:hover,
+  &.hover {
+    background-color: rgba(0, 0, 0, 0.1);
+    background-color: color("hover");
+  }
+
+  &:active,
+  &.active {
+    background-color: rgba(0, 0, 0, 0.18);
+    background-color: darken(color("hover"), 5%);
+  }
+}
+
+@each $color-name, $color in $colors {
+  .button-icon-#{$color-name} {
+    background-color: $color;
+    color: color("white");
+
+    &:hover,
+    &.hover {
+      background-color: lighten($color, 10%);
+    }
+
+    &:active,
+    &.active {
+      background: darken($color, 10%);
+      color: color("white");
+    }
+  }
+}
+
+// Buttons - raised colored
+//----------------------------------------------------------------------
+
+@each $color-name, $color in $colors {
+  .button-raised-#{$color-name} {
+    background-color: $color;
+    @if $color-name == "white" {
+      color: color("black");
+    } @else {
+      color: color("white");
+    }
+    @include box-shadow(0 1px 3px 0 rgba(0, 0, 0, 0.4));
+
+    &:hover,
+    &.hover {
+      background-color: lighten($color, 10%);
+    }
+
+    &:active,
+    &.active {
+      background: darken($color, 5%);
+      @include box-shadow(0 3px 12px 0 rgba(0, 0, 0, 0.5));
+    }
+  }
+}
+
+// Buttons - flat colored
+//----------------------------------------------------------------------
+
+@each $color-name, $color in $colors {
+  .button-flat-#{$color-name} {
+    background-color: transparent;
+    color: $color;
+
+    &:hover,
+    &.hover {
+      @if $color-name == "grey" {
+        background-color: rgba(0, 0, 0, 0.1);
+      } @else {
+        background-color: lighten($color, 40%);
+      }
+    }
+
+    &:active,
+    &.active {
+      @if $color-name == "grey" {
+        background-color: rgba(0, 0, 0, 0.18);
+      } @else {
+        background-color: lighten($color, 30%);
+      }
+    }
+  }
+}
+
+// Buttons - outline colored
+//----------------------------------------------------------------------
+
+@each $color-name, $color in $colors {
+  .button-outline-#{$color-name} {
+    background-color: transparent;
+    border-color: $color;
+    color: $color;
+
+    &:hover,
+    &.hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    &:active,
+    &.active {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+
+// Buttons - override text color
+//----------------------------------------------------------------------
+
+@each $color-name, $color in $colors {
+  .button.color-#{$color-name} {
+    color: $color;
+  }
+}
+
+// Buttons - Colored Floating Action Buttons (FAB)
+//----------------------------------------------------------------------
+
+@each $color-name, $color in $colors {
+  .fab-#{$color-name} {
+    background-color: $color;
+    @if $color-name == "white" {
+      color: color("black");
+    } @else {
+      color: color("white");
+    }
+
+    font-size: $font-size-icon;
+    height: $button-fab-height;
+    line-height: $button-fab-height;
+    min-width: 0;
+    padding: 0;
+    width: $button-fab-height;
+
+    @include box-shadow(0 3px 7px 0 rgba(0, 0, 0, 0.4));
+    @include rounded-corners(250px);
+    @include text-shadow(0 -1px 0 color("hint"));
+
+    &:hover,
+    &.hover {
+      background-color: lighten($color, 5%);
+      @include box-shadow(0 6px 12px 0 rgba(0, 0, 0, 0.5));
+    }
+
+    &:active,
+    &.active {
+      background: darken($color, 10%);
+    }
+
+    &.mini {
+      height: $button-fab-mini-height;
+      width: $button-fab-mini-height;
+    }
+  }
+}

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

@@ -0,0 +1,110 @@
+//======================================================================
+// EXAMPLE:
+// <div class="card">
+//   <header>
+//     <div class="card-title">Title</div>
+//     <div class="card-subtitle">Subtitle</div>
+//   </header>
+//   <div class="card-content">
+//     content...
+//   </div>
+//   <div class="card-actions">
+//
+//   </div>
+// </div>
+//======================================================================
+
+// Card - base
+//----------------------------------------------------------------------
+
+.card {
+  background-color: color("white");
+  border: 1px solid color("divider");
+  width: $card-width;
+  @include box-shadow(0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2));
+  @include rounded-corners;
+
+  &.xsmall {
+    width: $card-width * 0.33;
+  }
+
+  &.small {
+    width: $card-width * 0.5;
+  }
+
+  &.normal {
+    width: $card-width;
+  }
+
+  &.large {
+    width: $card-width * 2;
+  }
+
+  &.xlarge {
+    width: $card-width * 3;
+  }
+}
+
+// Card - header
+//----------------------------------------------------------------------
+
+.card header {
+  border-bottom: 1px solid color("divider");
+  padding: $spacing-normal;
+
+  &.no-border {
+    border-bottom: none;
+  }
+
+  .card-title {
+    font-size: $font-size-large;
+    font-weight: bold;
+  }
+
+  .card-subtitle {
+    color: color("hint");
+    padding-top: $spacing-small;
+  }
+}
+
+// Card - rich media
+//----------------------------------------------------------------------
+
+.card-rich-media {
+  img {
+    height: auto;
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+// Card - content
+//----------------------------------------------------------------------
+
+.card-content {
+  padding: $spacing-normal;
+}
+
+// Card - actions
+//----------------------------------------------------------------------
+
+.card-actions {
+  border-top: 1px solid color("divider");
+  padding: $spacing-normal;
+
+  &.no-border {
+    border-top: none;
+  }
+}
+
+// Card - image header
+// Using an image at top instead of header text
+//----------------------------------------------------------------------
+
+.card-image {
+  img {
+    max-width: 100%;
+    width: 100%;
+    @include rounded-top-corners;
+  }
+}