dlegr250_material_design 0.1.0

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

@@ -0,0 +1,13 @@
+//======================================================================
+// Modifying base HTML element instead of class, but putting as a
+// component because it is used like one.
+//======================================================================
+
+// Code - base
+//----------------------------------------------------------------------
+
+code {
+  background-color: #eee;
+  line-height: 1.5;
+  padding: $spacing-xsmall;
+}

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

@@ -0,0 +1,57 @@
+// Dialogs - base
+//----------------------------------------------------------------------
+
+.dialog {
+  background: color("white");
+  cursor: default;
+  margin: auto;
+  max-width: 90%;
+  pointer-events: none;
+  position: absolute;
+  visibility: hidden;
+  width: $card-width;
+  will-change: scale, transparency;
+  z-index: $dialog-depth;
+  @include box-shadow(0 12px 15px 0 rgba(0,0,0,0.24));
+  @include rounded-corners;
+  @include transition(all 0.10s ease);
+  @include transform(scale(1.15));
+  @include transparency(0);
+
+  &.visible {
+    pointer-events: auto;
+    visibility: visible;
+    @include transform(scale(1.0));
+    @include transparency(1);
+    @include transition(all 0.30s ease);
+  }
+}
+
+// Dialogs - header
+//----------------------------------------------------------------------
+
+.dialog header {
+  padding: $spacing-large;
+  padding-bottom: 20px;
+
+  .dialog-title {
+    font-size: $font-size-large;
+    font-weight: bold;
+  }
+}
+
+// Dialogs - content
+//----------------------------------------------------------------------
+
+.dialog-content {
+  padding: $spacing-large;
+  padding-top: 0;
+}
+
+// Dialogs - actions
+//----------------------------------------------------------------------
+
+.dialog-actions {
+  padding: $spacing-normal;
+  padding-top: 0;
+}

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

@@ -0,0 +1,35 @@
+// Dividers - base
+//----------------------------------------------------------------------
+
+hr {
+  height: 1px;
+  margin: $spacing-small 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;
+  }
+
+  &.spacer-xsmall {
+    margin: $spacing-xsmall 0;
+  }
+
+  &.spacer-small {
+    margin: $spacing-small 0;
+  }
+
+  &.spacer-large {
+    margin: $spacing-large 0;
+  }
+
+  &.spacer-xlarge {
+    margin: $spacing-xlarge 0;
+  }
+}

data/vendor/assets/stylesheets/components/forms/error_messages.scss

@@ -0,0 +1,27 @@
+// Error messages - base
+//----------------------------------------------------------------------
+
+.error-messages {
+  color: color("red");
+  display: inline-block;
+  font-size: $font-size-small;
+  font-weight: normal;
+  line-height: 1.4;
+  overflow: hidden;
+  padding-top: $spacing-xsmall;
+  position: relative;
+  vertical-align: middle;
+}
+
+// Wrapper for inputs with errors
+//----------------------------------------------------------------------
+
+.field-with-errors {
+  label {
+    color: color("red");
+  }
+
+  input {
+    border-color: color("red");
+  }
+}

data/vendor/assets/stylesheets/components/forms/fields.scss

@@ -0,0 +1,56 @@
+// Fields header
+//----------------------------------------------------------------------
+
+.fields-header {
+  font-size: $font-size-large;
+  font-weight: bold;
+  margin-bottom: $spacing-normal;
+
+  &.with-line {
+    border-bottom: 1px solid color("divider");
+    padding-bottom: $spacing-small;
+  }
+}
+// Fields - base
+//----------------------------------------------------------------------
+
+.field {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  max-width: 100%;
+  padding: $spacing-small 0;
+  position: relative;
+  width: 100%;
+}
+
+.field-bordered-top {
+  border-top: 1px solid color("divider");
+  margin-top: $spacing-small;
+}
+
+.field-bordered-bottom {
+  border-bottom: 1px solid color("divider");
+  margin-bottom: $spacing-small;
+}
+
+
+.field-first {
+  padding-top: 0;
+}
+
+.field-last {
+  padding-bottom: 0;
+}
+
+// Actions
+//----------------------------------------------------------------------
+
+.actions {
+  padding-top: $spacing-normal;
+}
+
+.actions-bordered {
+  border-top: 1px solid color("divider");
+  margin-top: $spacing-normal;
+}

data/vendor/assets/stylesheets/components/forms/labels.scss

@@ -0,0 +1,17 @@
+// Labels - base
+//----------------------------------------------------------------------
+
+label {
+  color: color("helper");
+  cursor: pointer;
+  font-size: $font-size-normal;
+  font-weight: 600;
+}
+
+// Labels - top aligned
+//----------------------------------------------------------------------
+
+label.top {
+  display: block;
+  padding-bottom: $spacing-xsmall;
+}

data/vendor/assets/stylesheets/components/forms/radios.scss

@@ -0,0 +1,90 @@
+//======================================================================
+// EXAMPLE:
+// <div class="radio-group radio-blue">
+//   <div class="radio-group-item">
+//     <div class="radio-group-item-button">
+//       <%= f.radio_button :attribute, "value" %>
+//     </div>
+//     <div class="radio-group-item-label">
+//       <%= f.label :attribute_value, "Label display text" %>
+//     </div>
+//   </div>
+// </div>
+//======================================================================
+
+// Radios - base
+//----------------------------------------------------------------------
+
+.radio-group {
+  display: table;
+
+  input[type="radio"] {
+    border: 2px;
+    cursor: pointer;
+    width: $spacing-normal;
+    height: $spacing-normal;
+    position: relative;
+    top: 2px;
+
+    &:before {
+      background-color: color("white");
+      background-image: radial-gradient(circle, color("blue") 40%, color("white") 50%);
+      background-position: 50% 50%;
+      background-repeat: no-repeat;
+      background-size: 0;
+      border-radius: 50%;
+      border: 2px solid color("blue");
+      content: "";
+      display: inline-block;
+      height: $spacing-normal;
+      left: -2px;
+      position: absolute;
+      top: -2px;
+      width: $spacing-normal;
+      will-change: background-size;
+      z-index: 2;
+      @include transition(all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1));
+    }
+
+    &:checked:before {
+      background-size: 14px 14px;
+    }
+
+    &:after {
+      background: color("white");
+      border-radius: 50%;
+      content: "";
+      height: $spacing-normal;
+      position: absolute;
+      @include transition(all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1));
+      width: $spacing-normal;
+    }
+  }
+}
+
+.radio-group-item {
+  display: table-row;
+}
+
+.radio-group-item-button,
+.radio-group-item-label {
+  display: table-cell;
+  height: $input-height;
+  vertical-align: middle;
+}
+
+.radio-group-item-button {
+  padding: 0 $spacing-normal 0 $spacing-small;
+}
+
+// Radios - colored
+//----------------------------------------------------------------------
+
+@each $color-name, $color in $colors {
+  .radio-#{$color-name} {
+    input[type="radio"]:before {
+      background-image: radial-gradient(circle, $color 40%, color("white") 50%);
+      border: 2px solid $color;
+    }
+  }
+}

data/vendor/assets/stylesheets/components/forms/selects.scss

@@ -0,0 +1,15 @@
+// Selects - base
+//----------------------------------------------------------------------
+
+select {
+  border: 1px solid rgba(0, 0, 0, .12);
+  height: $input-height - 4;
+  min-height: $button-height;
+  outline: none;
+  @include rounded-corners;
+  @include transition(border-color 0.2s ease);
+
+  &:focus {
+    border-color: color("primary");
+  }
+}

data/vendor/assets/stylesheets/components/forms/text_fields.scss

@@ -0,0 +1,38 @@
+//======================================================================
+// Text-fields include any text-based input.
+//======================================================================
+
+// Variables
+//----------------------------------------------------------------------
+
+$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 - base
+//----------------------------------------------------------------------
+
+#{$text-fields} {
+  border: 1px solid rgba(0, 0, 0, .12);
+  box-sizing: border-box;
+  color: color("text");
+  font-size: $font-size-text-field;
+  padding: 0 $spacing-small;
+  min-height: $button-height;
+  outline: none;
+  vertical-align: middle;
+  @include box-shadow(none);
+  @include rounded-corners;
+  @include transition(border-color 0.2s ease);
+
+  &:focus {
+    border-color: color("primary");
+  }
+
+  &.large {
+    font-size: $font-size-large;
+    min-height: $button-height * 1.5;
+  }
+}
+
+textarea {
+  padding: $spacing-small;
+}

data/vendor/assets/stylesheets/components/forms/toggles.scss

@@ -0,0 +1,70 @@
+//======================================================================
+// EXAMPLE:
+// <%= f.label :attribute, "Toggle Display Text" %>
+// <div class="toggle toggle-blue">
+//   <%= f.check_box :attribute %>
+//   <label for="model_attribute"></label>
+// </div>
+//======================================================================
+
+// Toggles - base
+//----------------------------------------------------------------------
+
+.toggle {
+  display: inline-block;
+
+  // Hide the actual checkbox
+  input {
+    display: none;
+  }
+
+  // Toggle bar
+  label {
+    background-color: color("grey");
+    cursor: pointer;
+    display: block;
+    height: 14px;
+    margin: 0 8px;
+    position: relative;
+    top: 2px;
+    width: 34px;
+    @include rounded-corners(250px);
+    @include transition(all 0.15s ease);
+    @include no-touch-highlight();
+
+    // Round button on toggle
+    &:after {
+      background-color: color("white");
+      content: "";
+      display: block;
+      height: 20px;
+      left: -4px;
+      position: absolute;
+      top: -3px;
+      width: 20px;
+      @include box-shadow(0 1px 5px rgba(0, 0, 0, 0.5));
+      @include rounded-corners(250px);
+      @include transition(all 0.15s ease);
+    }
+  }
+
+  // Colored bar when active
+  input:checked ~ label:after {
+    left: 20px;
+  }
+}
+
+// Toggles - colored
+//----------------------------------------------------------------------
+
+@each $color-name, $color in $colors {
+  .toggle-#{$color-name} {
+    input:checked ~ label {
+      background-color: lighten($color, 25%);
+
+      &:after {
+        background-color: $color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,242 @@
+//======================================================================
+// EXAMPLE:
+// <div class="list list-bordered list-hoverable rounded-corners constrained constrained-large">
+//   <div class="list-item" id="list-item-ID">
+//     <div class="list-item-icon">
+//       <i class="zmdi zmdi-star"></i>
+//     </div>
+//     <div class="list-item-primary">
+//       Primary text
+//       <div class="list-item-primary-subtext">
+//         Smaller text
+//       </div>
+//     </div>
+//     <div class="list-item-secondary">
+//       <%= link_to "", url, class: "button button-icon zmdi zmdi-star" %>
+//     </div>
+//   </div>
+// </div>
+//======================================================================
+
+// UL and OL lists
+//----------------------------------------------------------------------
+
+ul,
+ol {
+  margin: $spacing-normal 0;
+  padding-left: $spacing-normal;
+
+  li {
+    padding: 2px 0;
+  }
+}
+
+// Lists - base
+//----------------------------------------------------------------------
+
+.list {
+  background-color: color("white");
+  display: table;
+  table-layout: fixed;
+  text-align: left;
+  width: 100%;
+}
+
+// Lists - hoverable
+//----------------------------------------------------------------------
+
+// Hover over rows
+.list-hoverable {
+  .list-item:hover {
+    background-color: color("hover");
+  }
+
+  .list-item:active {
+    .list-item-icon,
+    .list-item-primary,
+    .list-item-secondary {
+      background-color: darken(color("hover"), 5%);
+    }
+  }
+}
+
+// Lists - bordered (only on specific device dimensions)
+//----------------------------------------------------------------------
+
+// On large and beyond, show borders and corners
+@media (min-width: $large-width) {
+  .list.list-bordered {
+    border: 1px solid color("divider");
+  }
+
+  .list-rounded {
+    @include rounded-corners;
+
+    // Note that rounding the first and last elements assume
+    // that they are DIV elements.  Did not want to use a "*"
+    // wildcard as that is expensive for CSS.
+
+    // Round first element
+    .list-item:first-child {
+      div:first-child {
+        @include rounded-top-left-corner;
+      }
+
+      div:last-child {
+        @include rounded-top-right-corner;
+      }
+    }
+
+    // Round last element
+    .list-item:last-child {
+      div:first-child {
+        @include rounded-bottom-left-corner;
+      }
+
+      div:last-child {
+        @include rounded-bottom-right-corner;
+      }
+    }
+  }
+}
+
+// Lists - divided
+//----------------------------------------------------------------------
+
+.list-divided > .list-item > div {
+  border-bottom: 1px solid color("divider");
+}
+
+.list-item-border-top > div {
+  border-top: 1px solid color("divider");
+}
+
+.list-item-border-bottom > div {
+  border-bottom: 1px solid color("divider");
+}
+
+// Lists - list item
+//----------------------------------------------------------------------
+
+.list-item {
+  box-sizing: border-box;
+  color: color("text");
+  display: table-row;
+  font-size: $font-size-normal;
+  text-decoration: none;
+  @include transition(background-color 0.30s ease);
+}
+
+// Lists - list item - shared
+//----------------------------------------------------------------------
+
+.list-item-icon,
+.list-item-primary,
+.list-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);
+
+  &.align-top {
+    padding-top: $spacing-normal;
+    vertical-align: top;
+  }
+}
+
+// Lists - list item - icon
+//----------------------------------------------------------------------
+
+.list-item-icon {
+  color: color("icon");
+  font-size: $font-size-icon;
+  padding: 0;
+  padding-left: $spacing-normal;
+  width: 56px; // 72px(width) - 16px(padding-left)
+}
+
+// Lists - list item - primary
+//----------------------------------------------------------------------
+
+.list-item-primary {
+  overflow: hidden;
+  padding-left: $spacing-normal;
+  padding-right: $spacing-normal;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  a {
+    color: color("text");
+    font-weight: bold;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.list-item-primary-subtext {
+  color: color("hint");
+  padding-top: $spacing-xsmall;
+
+  a {
+    color: color("hint");
+  }
+}
+
+// Lists - list item - secondary
+//----------------------------------------------------------------------
+
+.list-item-secondary {
+  text-align: right;
+  width: $spacing-normal * 2 + $button-icon-height;
+  padding-right: $spacing-normal;
+
+  .icon {
+    font-size: $font-size-icon;
+  }
+}
+
+// Lists - sizes
+//----------------------------------------------------------------------
+
+.list-dense {
+  .list-item-icon,
+  .list-item-primary,
+  .list-item-secondary {
+    padding-bottom: $spacing-small;
+    padding-top: $spacing-small;
+  }
+}
+
+// Lists - nested (only 1 level down)
+//----------------------------------------------------------------------
+
+.list-item-nested {
+  div:first-child {
+    padding-left: $spacing-normal * 2;
+  }
+}
+
+// Lists - media queries
+//----------------------------------------------------------------------
+
+@media (min-width: $medium-width) {
+  .list-item-secondary {
+    &.one-icons {
+      width: $spacing-normal * 2 + $button-icon-height;
+    }
+
+    &.two-icons {
+      width: $spacing-normal * 2 + $button-icon-height * 2;
+    }
+
+    &.three-icons {
+      width: $spacing-normal * 2 + $button-icon-height * 3;
+    }
+  }
+}