ethosstyles 0.1.15 → 0.1.16

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

@@ -2,27 +2,35 @@
 // Tooltips
 //
 
-.rf-tooltip + .tooltip {
+.rf-tooltip {
   line-height: 1.1em;
 
+  .tooltip-inner {
+    padding: 4px 8px;
+    background-color: $prewhite;
+    color: $black;
+  }
+
+  &.left .tooltip-arrow { border-left-color: $prewhite; }
+  &.top .tooltip-arrow { border-top-color: $prewhite }
+  &.right .tooltip-arrow { border-right-color: $prewhite; }
+  &.bottom .tooltip-arrow { border-bottom-color: $prewhite; }
+}
+
+.rf-tooltip--small {
   &.left {
     width: 78px;
-    margin-left: -10px;
   }
 
   &.right {
     width: 78px;
-    margin-left: +10px;
-  }
-
-  .tooltip-inner {
-    padding: 4px 8px;
   }
 }
 
-.rf-tooltip--danger + .tooltip {
+.rf-tooltip--danger {
   .tooltip-inner {
     background-color: $red;
+    color: $white;
   }
 
   &.left .tooltip-arrow { border-left-color: $red; }
@@ -31,21 +39,10 @@
   &.bottom .tooltip-arrow { border-bottom-color: $red; }
 }
 
-.rf-tooltip--pending + .tooltip {
-  .tooltip-inner {
-    background-color: $lemon;
-    color: $charcoal;
-  }
-
-  &.left .tooltip-arrow { border-left-color: $lemon; }
-  &.top .tooltip-arrow { border-top-color: $lemon; }
-  &.right .tooltip-arrow { border-right-color: $lemon; }
-  &.bottom .tooltip-arrow { border-bottom-color: $lemon; }
-}
-
-.rf-tooltip--valid + .tooltip {
+.rf-tooltip--success {
   .tooltip-inner {
     background-color: $green;
+    color: $white;
   }
 
   &.left .tooltip-arrow { border-left-color: $green; }

data/app/assets/stylesheets/pages/_styleguide.scss

@@ -12,3 +12,9 @@
     color: $white;
   }
 }
+
+// Basic border
+
+.rf-border--dark {
+  border: 1px solid black;
+}

data/app/assets/stylesheets/utilities/_mixins.scss

@@ -23,36 +23,6 @@
 }
 
 
-// Round the corners of a table by a specified radius
-// NOTE: default is to use $border-radius. Depends
-//       on borders being present, and made by td's
-//       Also needs border-collapese: seperate
-//
-// (outer type or class) {
-//     Simple usage
-//     @include round-table-corners(<value>);
-//
-//     Detailed Usage
-//     @include round-table-corners(<value>);
-// }
-@mixin round-table-corners($radius: $border-radius) {
-  tr:first-of-type td:first-of-type {
-    border-top-left-radius: $border-radius;
-  }
-
-  tr:first-of-type td:last-of-type  {
-    border-top-right-radius: $border-radius;
-  }
-
-  tr:last-of-type td:first-of-type  {
-    border-bottom-left-radius: $border-radius;
-  }
-
-  tr:last-of-type td:last-of-type  {
-    border-bottom-right-radius: $border-radius;
-  }
-}
-
 // Simple truncation mixin to cut off text using an ellipsis after a certain
 // width.
 //
@@ -157,7 +127,7 @@
   &[aria-expanded='false']:after,
   &[aria-expanded='true']:after {
     color: inherit;
-    font-family: 'octicons';
+    font-family: $font-icon-f5;
     font-size: 14px;
     vertical-align: middle;
     height: $arrow-height;
@@ -173,10 +143,14 @@
   }
 
   &[aria-expanded='false']:after {
-    content: '\f05a'; // triangle right
+    content: "\f0da"; // triangle right
   }
 
   &[aria-expanded='true']:after {
-    content: '\f05b'; // triangle down
+    content: "\f0d7"; // triangle down
   }
 }
+
+@mixin border-status( $color ) {
+  border-left: 6px solid $color;
+}

data/app/assets/stylesheets/utilities/_utilities.scss

@@ -88,6 +88,16 @@
   color: $red !important;
 }
 
+//
+// DISABLED
+//
+
+.rf-u-disabled,
+%rf-u-disabled {
+  cursor: not-allowed;
+  opacity: .3;
+}
+
 
 //
 // SHOW/HIDE
@@ -172,4 +182,3 @@
 .rf-u-mb0 {
   margin-bottom: 0;
 }
-

data/app/views/blurbs.php

@@ -0,0 +1,31 @@
+<section class="rf-section">
+
+  <div class="rf-blurb rf-blurb--success rf-u-mb">
+    <p>This is a <strong>SUCCESS</strong> blurb</p>
+  </div>
+
+  <div class="rf-blurb rf-blurb--error rf-u-mb">
+    <p>This is an <strong>ERROR</strong> blurb</p>
+  </div>
+
+  <div class="rf-blurb rf-blurb--warning rf-u-mb">
+    <p>This is a <strong>WARNING</strong> blurb</p>
+  </div>
+
+  <div class="rf-blurb rf-blurb--info rf-u-mb">
+    <p>This is an <strong>INFO</strong> blurb</p>
+  </div>
+
+  <div class="rf-blurb rf-blurb--plain rf-blurb--highlight rf-u-mb">
+    <p>This is a <strong>PLAIN HIGHLIGHTED</strong> blurb</p>
+  </div>
+
+  <div class="rf-blurb rf-blurb--condensed rf-blurb--info rf-u-mb">
+    <p>This is a <strong>CONDENSED</strong> info blurb</p>
+  </div>
+
+  <div class="rf-blurb rf-blurb--error rf-blurb--large rf-u-mb">
+    <p>This is a <strong>LARGE</strong> error blurb</p>
+  </div>
+
+</section>

data/app/views/forms.php

@@ -0,0 +1,68 @@
+<section class="rf-section">
+  <form class="rf-form" action="">
+    <h2>Form Title</h2>
+    <div class="rf-form-group">
+      <label class="rf-label">Label for first input</label>
+      <input class="rf-form-control" type="text" name="first_data" placeholder="placeholder text">
+    </div>
+
+    <label class="rf-label">Label for select</label>
+    <div class="rf-form-group">
+      <select class="rf-form-control" placeholder="placeholder text">
+        <option>Option 1</option>
+        <option>Option 2</option>
+        <option>Option 3</option>
+      </select>
+    </div>
+
+    <div class="rf-form-group">
+      <label class="rf-label rf-label--required">Label for a required input</label>
+      <input class="rf-form-control" type="text" name="first_data" placeholder="required text input">
+    </div>
+
+    <div class="rf-form-group rf-u-disabled">
+      <label class="rf-label">Disabled input</label>
+      <input class="rf-form-control" type="text" name="first_data" placeholder="required text input">
+    </div>
+
+    <input class="rf-btn rf-btn--primary" type="submit" value="Submit">
+
+  </form>
+</section>
+
+<section class="rf-section">
+  <form class="rf-form" action="">
+    <h2>Condensed Form Title</h2>
+    <div class="rf-form-group rf-form-group--condensed">
+      <label class="rf-label">First text box</label>
+      <input class="rf-form-control" type="text" name="first_data" placeholder="Default Text">
+    </div>
+
+    <div class="rf-form-group rf-form-group--condensed">
+      <label class="rf-label">Second text box</label>
+      <input class="rf-form-control" type="text" name="second_data" placeholder="Default Text">
+    </div>
+
+    <input class="rf-btn rf-btn--primary rf-btn" type="submit" value="Submit">
+
+  </form>
+</section>
+
+<section class="rf-section">
+  <h2 class="rf-section__headline">Title for an inline select form</h2>
+
+  <label class="rf-label">Second text box</label>
+  <div class="rf-form-group rf-form-group--inline">
+    <select class="rf-form-control" placeholder="placeholder text">
+      <option>Option 1</option>
+      <option>Option 2</option>
+      <option>Option 3</option>
+    </select>
+    <input class="rf-btn rf-btn--primary" type="submit" value="Submit">
+  </div>
+
+  <div class="rf-form-group rf-form-group--inline">
+    <input class="rf-form-control" type="text" name="first_data" placeholder="placeholder text">
+    <input class="rf-btn rf-btn--secondary" type="submit" value="Submit">
+  </div>
+</section>

data/app/views/grid.php

@@ -0,0 +1,19 @@
+<table class="rf-table rf-border--dark">
+  <p>Grid divides up a blocks width into 12 equal units. Distribute those units to the inner content however you see fit.</p>
+  <tr class="rf-row">
+
+    <td class="rf-col--8 rf-u-p rf-border--dark"><code>rf-col--8</code></td>
+    <td class="rf-col--4 rf-u-p rf-border--dark"><code>rf-col--4</code></td>
+  </tr>
+
+  <tr class="rf-row">
+    <td class="rf-col--3 rf-border--dark rf-u-p rf-border--dark"><code>rf-col--3</code></td>
+    <td class="rf-col--9 rf-u-p rf-border--dark"><code>rf-col--9</code></td>
+  </tr>
+
+  <tr class="rf-row">
+    <td class="rf-col--5 rf-u-p rf-border--dark"><code>rf-col--5</code></td>
+    <td class="rf-col--3 rf-u-p rf-border--dark"><code>rf-col--3</code></td>
+    <td class="rf-col--4 rf-u-p rf-border--dark"><code>rf-col--4</code></td>
+  </tr>
+</table>

data/app/views/index.php

@@ -10,8 +10,13 @@
   <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   <script>
-    $(document).ready(function(){
-      $('[data-toggle="tooltip"]').tooltip(); 
+    $(document).on('inserted.bs.tooltip', function(e) {
+      var tooltip = $(e.target).data('bs.tooltip');
+      tooltip.$tip.addClass($(e.target).data('tooltip-custom-classes'));
+    });
+    $('body').tooltip({
+      selector: "[title]",
+      html: true
     });
   </script>
 
@@ -22,12 +27,21 @@
 <body>
 
 <div class="rf-container">
+  <h2>Table of Contents</h2>
   <ul>
     <li><a href="#avatars">Avatars</a></li>
     <li><a href="#icons">Icons</a></li>
     <li><a href="#modals">Modals</a></li>
     <li><a href="#buttons">Buttons</a></li>
+    <li><a href="#list-groups">List Groups</a></li>
     <li><a href="#tooltips">Tooltips</a></li>
+    <li><a href="#blurbs">Blurbs</a></li>
+    <li><a href="#notes">Notes</a></li>
+    <li><a href="#forms">Forms</a></li>
+    <li><a href="#tables">Tables</a></li>
+    <li><a href="#logs">Logs</a></li>
+    <li><a href="#notices">Notices</a></li>
+    <li><a href="#panels">Panels</a></li>
   </ul>
 
   <section class="rf-section">
@@ -60,6 +74,46 @@
     <?php include "tooltips.php" ?>
   </section>
 
+  <section class="rf-section">
+    <h2 id="blurbs">Blurbs</h2>
+    <?php include "blurbs.php" ?>
+  </section>
+
+  <section class="rf-section">
+    <h2 id="notes">Notes</h2>
+    <?php include "notes.php" ?>
+  </section>
+
+  <section class="rf-section">
+    <h2 id="forms">Forms</h2>
+    <?php include "forms.php" ?>
+  </section>
+
+  <section class="rf-section">
+    <h2 id="grid">Grid</h2>
+    <?php include "grid.php" ?>
+  </section>
+
+  <section class="rf-section">
+    <h2 id="tables">Tables</h2>
+    <?php include "tables.php" ?>
+  </section>
+
+  <section class="rf-section">
+    <h2 id="logs">Logs</h2>
+    <?php include "logs.php" ?>
+  </section>
+
+  <section class="rf-section">
+    <h2 id="notices">Notices</h2>
+    <?php include "notices.php" ?>
+  </section>
+
+  <section class="rf-section">
+    <h2 id="panels">Panels</h2>
+    <?php include "panels.php" ?>
+  </section>
+
 </div>
 
 </body>

data/app/views/list-groups.php

@@ -89,6 +89,14 @@
       <div class="rf-col--4">Are</div>
       <div class="rf-col--4">Here</div>
     </li>
+
+    <li class="rf-list-item rf-highlight--ready">
+      <h3 class="rf-list-item__title">Add <code>rf-highlight--ready</code> to highlight blocks of interest. Useful when lisitng out parameters</h3>
+    </li>
+
+    <li class="rf-list-item rf-highlight--none">
+      <h3 class="rf-list-item__title">Add <code>rf-highlight--none</code> to make highlighted items standout more when listed together</h3>
+    </li>
   </ul>
 </section>
 
@@ -98,11 +106,11 @@
   <ul class="rf-list-group rf-list-group--partial">
     <li class="rf-list-item">
       <h4 class="rf-list-item__title">
-        List Item with Title
+        List Item with Title and Status
       </h4>
     </li>
 
-    <li class="rf-list-item rf-list-item--danger">
+    <li class="rf-list-item  rf-list-item--danger">
       <h4 class="rf-list-item__title">
         List Item with Title and Status
       </h4>
@@ -124,7 +132,7 @@
       </h4>
     </li>
 
-    <li class="rf-list-item rf-list-item--danger">
+    <li class="rf-list-item  rf-list-item--danger">
       <h4 class="rf-list-item__title">
         List Item with Title and Status
       </h4>
@@ -152,7 +160,7 @@
   <h3>Borderless Partial</h3>
 
   <ul class="rf-list-group rf-list-group--partial rf-list-group--borderless">
-    <li class="rf-list-item">
+    <li class="rf-list-item rf-list-item--success">
       <h4 class="rf-list-item__title">
         List Item with Title
       </h4>
@@ -174,7 +182,7 @@
   </ul>
 
   <ul class="rf-list-group rf-list-group--partial rf-list-group--borderless collapse" id="borderlesspartial">
-    <li class="rf-list-item">
+    <li class="rf-list-item rf-list-item--success">
       <h4 class="rf-list-item__title">
         List Item with Title
       </h4>
@@ -190,10 +198,13 @@
 
 <section class="rf-section">
 
-  <h2>Table List Group</h2>
+  <h2>Table List Groups</h2>
+
+  <br>
 
+  <h3>Table</h3>
   <ul class="rf-list-group rf-list-group--table">
-    <li class="rf-list-item rf-list-item--tr rf-list-item--tr--header">
+    <li class="rf-list-item--tr rf-list-item--tr--header">
       <div class="rf-list-item__th rf-col--4">header 1</div>
       <div class="rf-list-item__th rf-col--4">header 2</div>
       <div class="rf-list-item__th rf-col--4">header 3</div>
@@ -209,6 +220,56 @@
       <div class="rf-list-item__td">col 3</div>
     </li>
   </ul>
+
+  <br>
+
+  <?php  /*
+   * Table row width is set  by css. The combination of headers, triggers, and status
+   * borders create a problem where the trigger would center according the the first column.
+   * Additionally the collapsed rows would base their width off the row width without the borders,
+   * creating an odd indent. By making everything it's own list-group the problem is avoided.
+   */ ?>
+  <h3>Table Partial</h3>
+  <ul class="rf-list-group rf-list-group--table">
+    <li class="rf-list-item--tr rf-list-item--tr--header">
+        <div class="rf-list-item__th rf-col--4">header 1</div>
+        <div class="rf-list-item__th rf-col--2">header 2</div>
+        <div class="rf-list-item__th rf-col--6">header 3</div>
+    </li>
+  </ul>
+  <ul class="rf-list-group rf-list-group--partial rf-list-group--table">
+    <li class="rf-list-item rf-list-item--tr rf-list-item--success">
+      <div class="rf-list-item__td rf-col--4">col 1</div>
+      <div class="rf-list-item__td rf-col--2">col 2</div>
+      <div class="rf-list-item__td rf-col--6">col 3</div>
+    </li>
+    <li class="rf-list-item rf-list-item--tr rf-list-item--danger">
+      <div class="rf-list-item__td rf-col--4">col 1</div>
+      <div class="rf-list-item__td rf-col--2">col 2</div>
+      <div class="rf-list-item__td rf-col--6">col 3</div>
+    </li>
+  </ul>
+  <ul class="rf-list-group rf-list-group--partial  rf-list-group--table collapse" id="partial-table">
+    <li class="rf-list-item rf-list-item--tr rf-list-item--success">
+      <div class="rf-list-item__td rf-col--4">col 1</div>
+      <div class="rf-list-item__td rf-col--2">col 2</div>
+      <div class="rf-list-item__td rf-col--6">col 3</div>
+    </li>
+    <li class="rf-list-item rf-list-item--tr rf-list-item--danger">
+      <div class="rf-list-item__td rf-col--4">col 1</div>
+      <div class="rf-list-item__td rf-col--2">col 2</div>
+      <div class="rf-list-item__td rf-col--6">col 3</div>
+    </li>
+  </ul>
+  <ul class="rf-list-group--partial">
+    <li class="rf-list-item--to-expand rf-u-textcenter"
+            data-target="#partial-table"
+            data-toggle="collapse"
+            aria-expanded="false"
+            aria-controls="partial">
+          <span class="rf-btn rf-btn--secondary">Click to see all</span>
+    </li>
+  </ul>
 </section>
 
 <hr/>
@@ -315,4 +376,4 @@
       </div>
     </li>
   </ul>
-</section>
+</section>