dlegr250_material_design 0.1.15 → 0.1.16

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

@@ -31,7 +31,7 @@
   font-weight: normal;
 
   &.helper-text-bottom {
-    display: inline-block;
+    display: block;
     line-height: 1.4;
     overflow: hidden;
     padding-top: $spacing-xsmall;
@@ -43,3 +43,18 @@
     color: color("red") !important;
   }
 }
+
+// Error msgs
+//----------------------------------------------------------------------
+
+.error-messages {
+  color: color("red");
+  display: block;
+  font-size: $font-size-small;
+  font-weight: normal;
+  line-height: 1.4;
+  overflow: hidden;
+  padding-top: $spacing-xsmall;
+  position: relative;
+  vertical-align: middle;
+}

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

@@ -15,3 +15,31 @@ label.top {
   display: block;
   padding-bottom: $spacing-xsmall;
 }
+
+// Labels - marking as required; can be applied to any element, not
+// just label elements.
+//----------------------------------------------------------------------
+
+.required:before {
+  color: color("red");
+  content: "* ";
+}
+
+// .field {
+//   label.responsive-label {
+//     display: block;
+//     margin-top: $spacing-xsmall;
+//     padding-bottom: $spacing-xsmall;
+//   }
+// }
+//
+// @media (min-width: $medium-width) {
+//   .field {
+//     label.responsive-label {
+//       display: inline-block;
+//       margin-right: $spacing-normal;
+//       text-align: right;
+//       width: 160px;
+//     }
+//   }
+// }

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

@@ -12,6 +12,9 @@
 //----------------------------------------------------------------------
 
 .segmented-control-container {
+  display: inline-block;
+  font-size: 0; // To remove extra spacing from inline-block
+
   // First element
   .segmented-control:first-child {
     margin-left: 0;
@@ -24,6 +27,7 @@
   // Last element
   .segmented-control:last-child {
     label {
+      border-right: 1px solid color("divider");
       @include rounded-right-corners;
     }
   }
@@ -34,9 +38,7 @@
 
 .segmented-control {
   display: inline-block;
-  float: left;
   height: $button-height;
-  margin-left: -1px;
 
   // Hide actual radio button
   input {
@@ -45,13 +47,21 @@
 
   label {
     border: 1px solid color("divider");
+    border-right: none;
     box-sizing: border-box;
     color: color("helper");
     display: inline-block;
     font-weight: normal;
     height: $button-height;
     line-height: $button-height;
-    padding: 0 $spacing-normal;
+    padding: 0 ($spacing-normal * 0.75);
+    @include transition(background-color 0.30s ease);
+  }
+
+  @media (min-width: $medium-width) {
+    label {
+      padding: 0 $spacing-normal;
+    }
   }
 
   // Default colors

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

@@ -0,0 +1,40 @@
+//======================================================================
+// EXAMPLE:
+//======================================================================
+
+// Gridlists - base
+//----------------------------------------------------------------------
+
+// Flex parent
+.gridlist {
+  @include flex-grid-list();
+}
+
+.gridlist-item {
+  box-sizing: border-box;
+  display: table-row;
+  font-size: $font-size-normal;
+  padding: $spacing-normal;
+  max-width: $card-width;
+}
+
+.gridlist-item-icon {
+  color: color("icon");
+  display: table-cell;
+  font-size: 40px;
+  text-align: left;
+  vertical-align: top;
+  width: 72px;
+}
+
+.gridlist-item-primary {
+  display: table-cell;
+  text-align: left;
+  vertical-align: top;
+
+  .gridlist-item-primary-subtext {
+    color: color("helper");
+    font-size: $font-size-normal;
+    padding-top: $spacing-xsmall;
+  }
+}

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

@@ -8,7 +8,7 @@
 //     <div class="list-item-primary">
 //       Primary text
 //       <div class="list-item-primary-subtext">
-//         Smaller text
+//         Subtext
 //       </div>
 //     </div>
 //     <div class="list-item-secondary">
@@ -31,212 +31,154 @@ ol {
   }
 }
 
-// Lists - base
+// Lists - subheader to breakup lists
 //----------------------------------------------------------------------
 
-.list {
-  background-color: color("white");
-  display: table;
-  table-layout: fixed;
-  text-align: left;
-  width: 100%;
+.list-subheader {
+  color: color("helper");
+  font-weight: 600;
+  height: $tab-height;
+  line-height: $tab-height;
+  padding-left: $spacing-normal;
 }
 
-// Lists - hoverable
+// Lists - header
 //----------------------------------------------------------------------
 
-// Hover over rows
-.list-hoverable {
-  .list-item:hover {
-    background-color: color("hover");
+.list-header {
+  background-color: #f2f2f2;
+  min-height: 48px;
+  @include flex-parent-row();
+
+  .list-header-title,
+  .list-header-secondary {
+    box-sizing: border-box;
+    padding: $spacing-small $spacing-normal;
   }
 
-  .list-item:active {
-    .list-item-icon,
-    .list-item-primary,
-    .list-item-secondary {
-      background-color: darken(color("hover"), 5%);
-    }
+  .list-header-title {
+    flex: 1;
+    font-size: $font-size-large;
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .list-header-secondary {
+    text-align: right;
   }
 }
 
-// Lists - bordered (only on specific device dimensions)
+// Lists - base
 //----------------------------------------------------------------------
 
-// On large and beyond, show borders and corners
-@media (min-width: $large-width) {
-  .list.list-bordered {
+.list {
+  background-color: color("white");
+
+  &.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;
-      }
+  &.divided {
+    .list-header,
+    .list-item {
+      border-bottom: 1px solid color("divider");
     }
 
-    // Round last element
     .list-item:last-child {
-      div:first-child {
-        @include rounded-bottom-left-corner;
-      }
-
-      div:last-child {
-        @include rounded-bottom-right-corner;
-      }
+      border-bottom: none;
     }
   }
 }
 
-// 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 flex-parent-row();
   @include transition(background-color 0.30s ease);
 }
 
-// Lists - list item - shared
+// Lists - list item children
 //----------------------------------------------------------------------
 
 .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;
-  }
+  padding-bottom: $spacing-small;
+  padding-top: $spacing-small;
 }
 
-// Lists - list item - icon
+// 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)
+  padding: $spacing-normal;
+  text-align: center;
+  width: 56px;
 }
 
-// Lists - list item - primary
+// Lists - list item primary
 //----------------------------------------------------------------------
 
 .list-item-primary {
+  flex: 1;
   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("helper");
-  padding-top: $spacing-xsmall;
-
-  a {
+  .list-item-primary-subtext {
     color: color("helper");
+    padding-top: $spacing-xsmall;
   }
 }
 
-// Lists - list item - secondary
+// Lists - list item secondary
 //----------------------------------------------------------------------
 
 .list-item-secondary {
-  text-align: right;
-  width: $spacing-normal * 2 + $button-icon-height;
+  padding-left: $spacing-normal;
   padding-right: $spacing-normal;
-
-  .icon {
-    font-size: $font-size-icon;
-  }
+  text-align: right;
 }
 
 // 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 {
+  &.dense {
+    .list-header {
+      min-height: 40px;
+
+      .list-header-title,
+      .list-header-secondary {
+        padding-bottom: $spacing-xsmall;
+        padding-top: $spacing-xsmall;
+      }
+    }
 
-.list-item-nested {
-  div:first-child {
-    padding-left: $spacing-normal * 2;
+    .list-item {
+      .list-item-icon,
+      .list-item-primary,
+      .list-item-secondary {
+        padding-bottom: $spacing-xsmall;
+        padding-top: $spacing-xsmall;
+      }
+    }
   }
 }
 
-// Lists - media queries
+// Lists - hoverable
 //----------------------------------------------------------------------
 
-@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;
-    }
+.list.hoverable .list-item {
+  &:hover,
+  :active {
+    background-color: color("hover");
   }
 }