ethosstyles 0.1.15 → 0.1.16

data/app/assets/stylesheets/components/_grid.scss

@@ -1,3 +1,18 @@
+//
+// GRID
+//
+
+//
+// Structure
+//
+// <div class="rf-row">
+//   <div class="rf-col--[width]">1st Column</div>
+//   ...
+//   <div class="rf-col--[width]">Last Column</div>
+// </div>
+//
+
+
 //
 // ROWS
 //
@@ -77,7 +92,20 @@
 // ACTIONS COLUMN
 //
 
-// Two action buttons
+//
+// Structure
+//
+// <div class="rf-row rf-col">
+//   <div class="rf-col--[width]">Body</div>
+//   <div class="rf-col--[width] rf-col--actions">
+//     <input class="rf-btn rf-btn--primary" type="delete" value="Delete">
+//     <input class="rf-btn rf-btn--secondary" type="submit" value="Submit">
+//   </div>
+// </div>
+//
+
+// TWO OR MORE ACTION BUTTONS
+
 .rf-col--actions {
   align-items: center;
   display: flex;
@@ -91,12 +119,17 @@
     width: 48%;
 
     &:first-child {
-      margin-right: 4%;
+      margin-right: 0;
     }
   }
+
+  .rf-btn:first-child {
+    margin-right: 0;
+  }
 }
 
-// Single action button
+// SINGLE ACTION BUTTON
+
 .rf-col--action {
   .rf-btn {
     padding-left: 0;

data/app/assets/stylesheets/components/_highlights.scss

@@ -0,0 +1,17 @@
+//
+// HIGHLIGHTS
+//
+
+//
+// Structure
+//
+// <div class="rf-highlight--[type]">Body</div>
+//
+
+.rf-highlight--ready {
+  @include border-status( $blue-bright );
+}
+
+.rf-highlight--none {
+  @include border-status( $mercury );
+}

data/app/assets/stylesheets/components/_icons.scss

@@ -35,6 +35,7 @@
   color: $green;
   font-family: $font-icon-f5;
 }
+
 // 6 dots, 2 across
 
 .rf-icon--grip:after {

data/app/assets/stylesheets/components/_list-groups.scss

@@ -21,6 +21,10 @@ $list-padding-condensed: 10px;
   list-style-type: none;
   margin: 0;
   padding: 0;
+
+  .rf-well {
+    margin-top: 10px;
+  }
 }
 
 // PARTIAL
@@ -119,6 +123,22 @@ $list-padding-condensed: 10px;
 // TABLE
 // Creates a list group with columns and table-like properties
 
+// Format
+
+// <ul class="rf-list-group rf-list-group--table">
+//   <li class="rf-list-item--tr">
+//     <h5 class="rf-list-item__th">First Column</h5>
+//     ...
+//     <h5 class="rf-list-item__th">Last Column</h5>
+//   </li>
+//   <li class="rf-list-item--tr">
+//     <div class="rf-list-item__td">First Column</div>
+//     ...
+//     <div class="rf-list-item__td">First Column</div>
+//   </li>
+//   ...
+// </ul>
+
 .rf-list-group--table {
   @extend .rf-table;
   display: table;
@@ -166,6 +186,17 @@ $list-padding-condensed: 10px;
   }
 }
 
+// Extra styles for table partial.
+// Needed due to tables use of display attribute
+.rf-list-group--table.rf-list-group--partial.collapse {
+
+  display: none;
+
+  &[aria-expanded='true'] {
+    display: table;
+  }
+}
+
 
 //
 // LIST GROUP ITEM
@@ -214,6 +245,7 @@ $list-padding-condensed: 10px;
 // ELEMENTS
 
 .rf-list-item__title {
+  @include truncate;
   line-height: 1em;
   position: relative;
   padding: 0;

data/app/assets/stylesheets/components/_lists.scss

@@ -1,8 +1,31 @@
+//
+// LIST GROUP
+//
+
+//   /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\
+//  //\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\
+//  \\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//
+//  //\\ \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/ //\\
+//  \\//                                                        \\//
+//   \/              THIS WILL BE DEPRECATED SOON!               \/
+//   /\                                                          /\
+//  //\\                                                        //\\
+//  \\//        Do NOT add any new uses for this file!          \\//
+//  //\\                                                        //\\
+//  \\//    _list-groups.scss is the new file for list groups.  \\//
+//   \/      If you find views using these old styles please     \/
+//   /\          change them over to _list-groups.scss.          /\
+//  //\\                                                        //\\
+//  \\// /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\  /\ \\//
+//  //\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\
+//  \\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//
+//   \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/  \/
+
+
 //
 // STRUCTURE
-// todo: move to documentation
 //
-//<ul class="rf-list-group">
+//<ul class="rf-list-group rf-list-group--[modifiers]">
 //  <li class="rf-list-group__item rf-list-group__item--[status]">
 //    <h3 class="rf-list-group__title">
 //      This is the title of the item with <a href="#" class="rf-list-group__titlelink">a link</a>
@@ -14,11 +37,6 @@
 //</ul>
 //
 
-
-//
-// LIST GROUP
-//
-
 .rf-list-group {
   clear: both;
   list-style-type: none;
@@ -42,6 +60,8 @@
   border-bottom-left-radius: $border-radius;
 }
 
+// LIST GROUP TITLES
+
 .rf-list-group__title {
   @include truncate;
   @extend %h3;
@@ -109,6 +129,7 @@
   opacity: $opacity-default;
 }
 
+
 //
 // LISTS GROUP W/ LINES
 //

data/app/assets/stylesheets/components/_logs.scss

@@ -1,3 +1,17 @@
+//
+// LOGS
+//
+
+//
+// Structure
+//
+// <div class="rf-logs js-project-logs">
+//   <pre class="rf-logs__pre">
+//     Body
+//   </pre>
+// </div>
+//
+
 .rf-logs {
   background-color: $white;
   border: 1px solid $mercury;
@@ -25,6 +39,7 @@
   overflow: scroll;
   padding: 15px;
   position: relative;
+  white-space: pre-line;
 }
 
 

data/app/assets/stylesheets/components/_notes.scss

@@ -0,0 +1,43 @@
+//
+// NOTES
+//
+
+//
+// Structure
+//
+// <span class="rf-note rf-note--[status]">Info</span>
+//
+// TODO: Add 2+ digit numbers support, check number centering within circle,
+//       center circle for larger elements.
+//
+
+.rf-note {
+  border-radius: 100%;
+  display: inline-block;
+  font-size: 10px;
+  height: 16px;
+  line-height: 16px;
+  margin-right: 4px;
+  text-align: center;
+  vertical-align: text-bottom;
+  width: 16px;
+}
+
+//
+// NOTE TYPES
+//
+
+.rf-note--error {
+  background-color: $red;
+  color: $white;
+}
+
+.rf-note--ongoing {
+  background-color: $blue-bright;
+  color: $white;
+}
+
+.rf-note--neutral {
+  background-color: $slate;
+  color: $white;
+}

data/app/assets/stylesheets/components/_notices.scss

@@ -2,6 +2,16 @@
 // NOTICES
 //
 
+//
+// Structure
+//
+// <div class="rf-notice rf-notice--[status]">
+//   <div>
+//     Body
+//   </div>
+// </div>
+//
+
 .rf-notice {
   height: auto;
   width: 100%;
@@ -12,4 +22,13 @@
 .rf-notice--error {
   background-color: $red;
   color: $white;
+
+  p {
+    color: $white;
+  }
+}
+
+.rf-notice--info {
+  background-color: $baby-blue;
+  border-bottom: 1px solid $periwinkle;
 }

data/app/assets/stylesheets/components/_panels.scss

@@ -2,9 +2,43 @@
 // PANELS
 //
 
+//
+// Structure
+//
+// <div class="rf-panel">
+//   <div class="rf-panel__heading">
+//     <h3>Header</h3>
+//   </div>
+//   <div class="rf-panel__body">
+//     <p>Body</p>
+//   </div>
+// </div>
+//
+
 .rf-panel {
-  margin-bottom: 20px;
+  margin-bottom: 0;
   background-color: white;
   border: $border-default;
   border-radius: 4px;
 }
+
+.rf-panel__body {
+  padding: $list-padding;
+
+  :last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+}
+
+.rf-panel__heading {
+  border-bottom: $border-default;
+  padding: $list-padding;
+  padding-top: $list-padding/2;
+  padding-bottom: $list-padding/2;
+
+  > * h3 {
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+}

data/app/assets/stylesheets/components/_tables.scss

@@ -1,11 +1,11 @@
 //
-// Tables
+// TABLES
 //
 
 //
 // Structure
 //
-//<table class="rf-table">
+// <table class="rf-table">
 //  <tr class="rf-table__row rf-table__row--header">
 //    <th class="rf-table__th">Product</th>
 //    <th class="rf-table__th">Name</th>
@@ -16,7 +16,7 @@
 //      <td class="rf-table__td"> Cell #2</td>
 //    </tr>
 //  </tbody>
-//</table>
+// </table>
 //
 // Best Practices
 //
@@ -25,7 +25,7 @@
 
 .rf-table {
   width: 100%;
-  border-collapse: separate;  // Necessary to round corners
+  border-collapse: collapse;
   table-layout: fixed;
 }
 
@@ -59,6 +59,24 @@
   text-align: right;
 }
 
+//
+// ROW TYPES
+//
+
+.rf-table__row--error {
+  border-left: 6px solid $red;
+}
+
+.rf-table__row--success {
+  border-left: 6px solid $green;
+}
+
+.rf-table__row--aligntop {
+  > td {
+    vertical-align: top;
+  }
+}
+
 
 // Padding and borders for table cells
 
@@ -75,7 +93,7 @@
 }
 
 .rf-table__th {
-  @extend %h5;
+  @extend h5;
   padding: 0px $list-padding 5px;
 }
 
@@ -84,21 +102,58 @@
   font-weight: bold;
 }
 
+//
+// CONDENSED TABLE
+//
+
+.rf-table--condensed {
+  margin: 6px 0;
+
+  .rf-table__td {
+    padding: 2px 10px;
+
+    .rf-preview {
+      min-height: 34px;
+    }
+  }
+
+  .rf-table__td select {
+    margin-top: 4px;
+    margin-bottom: 4px;
+  }
+
+  .rf-table__td label {
+    margin-bottom: 0;
+  }
+
+}
+
+// Rounds corners of the table body
+.rf-table__row:first-of-type .rf-table__td:first-of-type {
+  border-top-left-radius: $border-radius;
+}
+
+.rf-table__row:first-of-type .rf-table__td:last-of-type  {
+  border-top-right-radius: $border-radius;
+}
+
+.rf-table__row:last-of-type .rf-table__td:first-of-type  {
+  border-bottom-left-radius: $border-radius;
+}
+
+.rf-table__row:last-of-type .rf-table__td:last-of-type  {
+  border-bottom-right-radius: $border-radius;
+}
 
 // Draws table borders
-tr:first-of-type > .rf-table__td {
+.rf-table__row:first-of-type > .rf-table__td {
   border-top: $border-default;
 }
 
-.rf-table__row > td:first-of-type {
+.rf-table__row > .rf-table__td:first-of-type {
   border-left: $border-default;
 }
 
-.rf-table__row > td:last-of-type {
+.rf-table__row > .rf-table__td:last-of-type {
   border-right: $border-default;
 }
-
-// Rounds corners of the table body
-.rf-table__body {
-  @include round-table-corners();
-}