ethosstyles 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7b9eae5070ab2dd1d33c5a2e24c11638a571f3b8
-  data.tar.gz: 8899bd417a7e9bd64679e07f02ce42d01bff6831
+  metadata.gz: 97322bc835aeea512506b75f23efcfc19cb943d1
+  data.tar.gz: 5887e3d20d60084eaa45a528b7abe46fdc37b774
 SHA512:
-  metadata.gz: f3b759dc96cc77ed55b4d5554c39d822145141162b43213cfc81ce50aec8c12d12649f6046515c87609e5b9b0abd08c07a389a62c88f32ef03d96a78828268d7
-  data.tar.gz: f966f32fe03f697ab9b8daceaecb23d8e6f3740dedc63e10286f2f11ec15293f1e451e75d8e15faa0ab49e9c75494cc996cfa188c0d540af3f4e25ae56a49f80
+  metadata.gz: 1cf57ddc01dbc0f47cfde7736be8d96cc81c2e1b5e0dbca33c0aed8ca0ff00b2f58194b68663b8e44f811c59224740b8672d579b0e9e941a438a14fd4080edfa
+  data.tar.gz: 453ddda342a1e9447363520cc50f15d24eed774545b4549572253cc3d1ee199119ff7329c28029ccb5c18608af7642b3f6a59eb008ef16326a1da9f591e3eef6

data/README.md

@@ -4,14 +4,14 @@ These are Ethos's main styles.
 
 Note: These are foundational styles, and should be edited sparingly. You can still add styles to Moonbeam and OrCA in the `stylesheets` directories.
 
-## Edit Along with Moonbeam
-To develop this gem locally on Moonbeam:
+## To edit gem
+To develop this gem locally:
 
 1. Clone this repo to your computer.
 
-2. Replace Github path with file path in Gemfile:
+2. Replace gem name with gem file path in Gemfile:
 
-        # gem "ethosstyles", :git => "https://github.com/adobe-platform/ethosstyles.git"
+        # gem "ethosstyles"
         gem "ethosstyles", :path => "/usr/ethosstyles"
 
 3. Add directory to `docker-compose.yml` under volumes within web:
@@ -21,3 +21,12 @@ To develop this gem locally on Moonbeam:
           volumes:
             ...
             - ../../ethosstyles:/usr/ethosstyles
+
+4. You may need to rebuild moonbeam.
+
+        flotilla rebuild moonbeam
+
+
+## Process
+
+**Review any changes on Moonbeam and OrCA before pushing to [prod](https://rubygems.org/gems/ethosstyles).**

data/app/assets/stylesheets/_ethosstyles.scss

@@ -1 +1,20 @@
+@import 'settings/test';
 @import 'settings/variables';
+
+@import 'utilities/mixins';
+@import 'utilities/utilities';
+@import 'utilities/shame';
+
+@import 'components/base';
+@import 'components/buttons';
+@import 'components/checks';
+@import 'components/forms';
+@import 'components/grid';
+@import 'components/links';
+@import 'components/lists';
+@import 'components/logs';
+@import 'components/pills';
+@import 'components/progress';
+@import 'components/tables';
+@import 'components/timestamp';
+@import 'components/well';

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

@@ -0,0 +1,37 @@
+%h3 {
+  @include remove_bootstrap_styles();
+  color: $charcoal;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 18px;
+}
+
+.rf-h3 {
+  @extend %h3;
+}
+
+%h5 {
+  color: $slate;
+  font-family: acumin-pro, semibold, sans-serif;
+  font-size: 10px;
+  letter-spacing: 0.78px;
+  padding-top: 0px;
+  padding-bottom: 5px;
+  text-align: left;
+}
+
+%p {
+  color: $slate;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.rf-p--lead,
+%rf-p--lead {
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.rf-ul--lead {
+  @extend %rf-p--lead;
+}

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

@@ -0,0 +1,96 @@
+//
+// Buttons
+//
+
+.rf-btn,
+%rf-btn {
+  border: 1px solid transparent;
+  border-radius: $border-radius;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: bold;
+  height: 32px;
+  line-height: 30px;
+  padding: 0 15px;
+  text-align: center;
+  text-decoration: none;
+  touch-action: manipulation;
+  vertical-align: middle;
+  white-space: nowrap;
+  user-select: none;
+
+  @include hocus {
+    outline: none;
+  }
+}
+
+.rf-btn--primary,
+%rf-btn--primary {
+  background-color: $blue-bright;
+  border-color: $blue-bright;
+  color: $white;
+
+  @include hocus {
+    background-color: shade($blue-bright, 20%);
+    border-color: shade($blue-bright, 20%);
+  }
+
+  &:active {
+    background-color: shade($blue-bright, 40%);
+    border-color: shade($blue-bright, 40%);
+  }
+}
+
+.rf-btn--secondary,
+%rf-btn--secondary {
+  background-color: $white;
+  border-color: $cloudy;
+  color: $charcoal;
+
+  @include hocus {
+    background-color: shade($white, 4%);
+    border-color: shade($cloudy, 4%);
+    color: $charcoal;
+    text-decoration: none;
+  }
+
+  &:active {
+    background-color: shade($white, 12%);
+    border-color: shade($cloudy, 12%);
+  }
+}
+
+.rf-btn--small {
+  min-width: 100px;
+}
+
+.rf-btn--large,
+%rf-btn--large {
+  font-size: 18px;
+  height:  44px;
+  min-width: 90px;
+}
+
+.rf-btn--xs {
+  font-size: 11px;
+  height: 24px;
+  line-height: 14px;
+  padding: 0px 6px;  
+}
+
+
+// Side by side
+
+.rf-btn + .rf-btn {
+  margin-left: 4%;
+}
+
+
+// Disabled
+
+.rf-btn--disabled,
+.rf-btn[disabled] {
+  cursor: not-allowed;
+  opacity: .2;
+  pointer-events: none;
+}

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

@@ -0,0 +1,75 @@
+//  Checkbox HTML structure: 
+// <div class="rf-check">
+//   <label class="rf-check__container">
+//     <input class="rf-check__input" type="checkbox" name=“name” id=“id” value="true" checked="checked">
+//     <span class="rf-check__label">Checkbox Label</span>
+//   </label>
+// </div>
+
+//
+// Styled checkboxes
+//
+
+.rf-check {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 14px;
+  margin-bottom: 0;
+  min-height: auto;
+  padding-top: 0;
+  vertical-align: middle;
+}
+
+.rf-check__container {
+  cursor: pointer;
+  margin-bottom: 0;
+  margin-left: 22px;
+  padding-left: 0;
+  position: relative;   
+}
+
+.rf-check__input {
+  display: none;
+}
+
+.rf-check__label {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 14px;
+  text-indent: -22px;
+}
+
+.rf-check__label:before {
+  border: 1px solid $stormy;
+  border-radius: $border-radius;
+  color: $blue-bright;
+  display: inline-block;
+  font-family: FontAwesome;
+  font-size: 9px;
+  height: 14px;
+  line-height: 1.4em;
+  margin-right: 8px;
+  margin-top: -2px;
+  text-align: center;
+  text-indent: 0;
+  width: 14px;
+  vertical-align: middle;
+}
+
+.rf-check__input + .rf-check__label:before {
+  content: " "; // empty
+}
+
+.rf-check__input:checked + .rf-check__label:before {
+  content: "\f00c"; // check
+}
+
+
+//
+// Disabled (faded out)
+//
+
+.rf-check--disabled {
+  cursor: default;
+  opacity: .4;
+}

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

@@ -0,0 +1,4 @@
+.rf-form-group {
+  display: block;
+  margin-bottom: 6px;
+}

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

@@ -0,0 +1,58 @@
+.rf-row {
+  align-items: center;
+  display: flex;
+}
+
+.rf-col--1 {
+  width: 8.333333%;
+}
+
+.rf-col--2 {
+  width: 16.666667%;
+}
+
+.rf-col--3 {
+  width: 25%;
+}
+
+.rf-col--4 {
+  width: 33.333333%;
+}
+
+.rf-col--5 {
+  width: 41.666667%;
+}
+
+.rf-col--6 {
+  width: 50%;
+}
+
+.rf-col--7 {
+  width: 58.333333%;
+}
+
+.rf-col--8 {
+  width: 66.666667%;
+}
+
+.rf-col--9 {
+  width: 75%;
+}
+
+.rf-col--10 {
+  width: 83.333333%;
+}
+
+.rf-col--11 {
+  width: 91.666667%;
+}
+
+.rf-col--12 {
+  width: 100%;
+}
+
+.rf-col--actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}

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

@@ -0,0 +1,48 @@
+//
+// Links
+//
+
+.rf-infolink {
+  color: $slate;
+  cursor: pointer;
+  font-size: 12px;
+
+  &:after {
+    display: inline-block;
+    font-family: 'Glyphicons Halflings';
+    font-size: 9px;
+    margin-left: px;
+  }
+
+  &:hover {
+    color: $charcoal;
+  }
+}
+
+.rf-infolink + .rf-infolink {
+  margin-left: 14px;
+}
+
+.rf-infolink--external:after {
+  content: '\e164'; 
+}
+
+.rf-infolink--external:before {
+  content: 'Open '; 
+}
+
+.rf-infolink--trigger[aria-expanded='false']:before {
+  content: 'Expand';
+}
+
+.rf-infolink--trigger[aria-expanded='true']:before {
+  content: 'Hide';
+}
+
+.rf-infolink--trigger[aria-expanded='false']:after {
+  content: '\002b';
+}
+
+.rf-infolink--trigger[aria-expanded='true']:after {
+  content: '\2212';
+}

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

@@ -0,0 +1,95 @@
+//
+// STRUCTURE
+// todo: move to documentation
+//
+//<ul class="rf-list-group">
+//  <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>
+//    </h3>
+//    <div class="rf-list-group__info">
+//      This is some info about the item, like links and timestamp
+//    </div>
+//  </li>
+//</ul>
+//
+
+
+//
+// LIST ITEM
+//
+
+.rf-list-group {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.rf-list-group__item {
+  border: $border-default;
+  padding: $list-padding;
+  margin-top: -1px;
+}
+
+.rf-list-group__item:first-child {
+  border-top-left-radius: $border-radius;
+  border-top-right-radius: $border-radius;
+}
+.rf-list-group__item:last-child {
+  border-bottom-right-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+}
+
+.rf-list-group__title {
+  @include truncate;
+  @extend %h3;
+
+  color: $charcoal;
+  font-size: 14px;
+  line-height: 18px;
+  position: relative;
+}
+
+.rf-list-group__titlelink {
+  color: $charcoal;
+
+  @include hocus() {
+    color: $black;
+    text-decoration: none;
+  }
+}
+
+.rf-list-group__info {
+  color: $slate;
+  display: flex;
+  font-size: 13px;
+  overflow: hidden;
+}
+
+.rf-list-group__info--full {
+  width: 100%;
+}
+
+
+//
+// LIST ITEM - STATUSES
+//
+
+.rf-list-group__item--danger,
+.rf-list-group__item--failure,
+.rf-list-group__item--aborted {
+  border-left: 6px solid $red;
+}
+
+.rf-list-group__item--pending {
+  border-left: 6px solid $lemon;
+}
+
+.rf-list-group__item--started,
+.rf-list-group__item--ongoing {
+  border-left: 6px solid $blue-bright;
+}
+
+.rf-list-group__item--success {
+  border-left: 6px solid $green;
+}

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

@@ -0,0 +1,40 @@
+.rf-logs {
+  background-color: $white;
+  border: 1px solid $mercury;
+  max-height: 500px;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+}
+
+.rf-logs__btn {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  z-index: 4;
+  display: none;
+}
+
+.rf-logs__pre {
+  background-color: transparent;
+  border-radius: $border-radius;
+  border-width: 0;
+  max-height: 400px;
+  height: auto;
+  margin-bottom: 0;
+  overflow: scroll;
+  padding: 15px;
+  position: relative;
+}
+
+
+// This is for the JS
+
+.rf-logs--nomax {
+  max-height: none!important;
+
+  .rf-project-logs__pre {
+    height: 100%;
+    max-height: none!important;
+  }
+}

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

@@ -0,0 +1,41 @@
+//
+// Pills
+//
+
+.rf-pill {
+  border-radius: 20px;
+  border-style: solid;
+  border-width: 2px;
+  font-size: 10px;
+  font-weight: 600;
+  height: 18px;
+  line-height: 14px;
+  padding: 0 6px;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.rf-pill--neutral {
+  border-color: $blue-bright;
+  color: $blue-bright;
+}
+
+.rf-pill--neutral--secondary {
+  border-color: $periwinkle;
+  color: $periwinkle;
+}
+
+.rf-pill--fail {
+  border-color: $red;
+  color: $red;
+}
+
+.rf-pill--success {
+  border-color: $green;
+  color: $green;
+}
+
+.rf-pill--minor {
+  border-color: $stormy;
+  color: $stormy;
+}

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

@@ -0,0 +1,93 @@
+@mixin bg-stripes {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  -webkit-background-size: 40px 40px;
+  background-size: 40px 40px;
+}
+
+@keyframes rf-progress-bar-stripes {
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+//
+//  Progress bar
+//
+
+.rf-progress {
+  border: 1px solid $mercury;
+  border-radius: 14px;
+  height: 19px;
+  overflow: hidden;
+  position: relative;
+}
+
+.rf-progress__fill {
+  border-radius: 14px;
+  color: $white;
+  display: flex;
+  font-size: 12px;
+  float: left;
+  height: 100%;
+  justify-content: space-between;
+  line-height: 16px;
+  text-align: left;
+  padding: 0 10px;
+  width: 0;
+}
+
+.rf-progress__text {
+  letter-spacing: 1px;
+}
+
+.rf-progress__timestamp {
+  position: absolute;
+  right: 6px;
+}
+
+.rf-progress__fill--unstarted {
+  @include bg-stripes;
+  background-color: $stormy;
+  width: 100%;
+}
+
+.rf-progress__fill--triggered {
+  @include bg-stripes;
+  animation: rf-progress-bar-stripes 2s linear infinite;
+  background-color: $blue-bright;
+  width: 30%;
+}
+
+.rf-progress__fill--building {
+  @include bg-stripes;
+  animation: rf-progress-bar-stripes 2s linear infinite;
+  background-color: $blue-bright;
+  width: 60%;
+}
+
+.rf-progress__fill--finished,
+.rf-progress__fill--approved {
+  background-color: $green;
+  width: 100%;
+}
+
+.rf-progress__fill--failed {
+  background-color: $red;
+  width: 100%;
+}
+
+
+// White text for dark bgs
+
+.rf-progress__fill--finished,
+.rf-progress__fill--approved,
+.rf-progress__fill--failed {
+  .rf-progress__timestamp {
+    color: $white;
+  }
+}

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

@@ -0,0 +1,66 @@
+//
+// Tables
+//
+
+$table-border-default: solid 1px $mercury;
+$input-border-default: solid 1px $stormy;
+$table-td-padding: 14px;
+
+.rf-table {
+  width: 100%;
+  border-collapse: separate;  // Necessary to round corners
+  table-layout: fixed;
+}
+
+.rf-table__col--centered {
+  text-align: center;
+
+  .form-control {
+    text-align: center;
+  }
+}
+.rf-table__col--right { text-align: right; }
+
+
+// Padding and borders for table cells
+
+.rf-table__td,
+.rf-table__th {
+  @include word-wrap;
+}
+
+.rf-table__td {
+  border-bottom: $table-border-default;
+  font-size: 13px;
+  padding: $table-td-padding;
+  vertical-align: middle;
+}
+
+.rf-table__th {
+  @extend %h5;
+  padding: 0px $table-td-padding 5px;
+}
+
+.rf-table__td--strong {
+  color: $charcoal;
+  font-weight: bold;
+}
+
+
+// Draws table borders
+tr:first-of-type > .rf-table__td {
+  border-top: $table-border-default;
+}
+
+.rf-table__row > td:first-of-type {
+  border-left: $table-border-default;
+}
+
+.rf-table__row > td:last-of-type {
+  border-right: $table-border-default;
+}
+
+// Rounds corners of the table body
+.rf-table__body {
+  @include round-table-corners();
+}

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

@@ -0,0 +1,10 @@
+//
+// Timestamp
+//
+
+.rf-timestamp {
+  color: $slate;
+  font-size: 12px;
+  font-style: italic;
+  line-height: 14px;
+}

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

@@ -0,0 +1,21 @@
+//
+// WELLS
+//
+
+.rf-well {
+  border: 1px solid $mercury;
+  height: auto;
+  border-radius: $border-radius;
+  padding: $list-padding;
+}
+
+.rf-well__headline {
+  color: $charcoal;
+  font-size: 15px;
+  font-weight: bold;
+  margin: 4px 14px -10px 14px;
+}
+
+.rf-well__list {
+  margin: 20px;
+}

data/app/assets/stylesheets/settings/_variables.scss

@@ -34,3 +34,5 @@ $powder: #f8fbff;
 //
 
 $border-radius: 3px;
+$list-padding: 14px;
+$border-default: solid 1px $mercury;

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

@@ -0,0 +1,75 @@
+// Generate `:hover` and `:focus` styles in one go.
+@mixin hocus() {
+  &:hover,
+  &:focus {
+    @content;
+  }
+}
+
+// Hanldes placeholder text across browsers in one line
+//
+// usage, NOTE: input { is important otherwise
+// an errant space is generated before :
+//
+//   input { @include placeholder {
+//     font-style: italic;
+//   }}
+@mixin placeholder {
+  &::-webkit-input-placeholder {@content}
+  &::-moz-placeholder          {@content}
+  &:-moz-placeholder           {@content}
+  &:-ms-input-placeholder      {@content}
+}
+
+
+// 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.
+//
+// .simple-usage {
+//   @include truncate();
+// }
+//
+// .detailed-usage {
+//   @include truncate(<value>);
+// }
+@mixin truncate($width: 100%) {
+  max-width: $width;
+  white-space:nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin word-wrap {
+  -ms-word-break: break-all;
+  overflow-wrap: break-word;
+}

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

@@ -0,0 +1,9 @@
+//
+//  Bootstrap hacks
+//  todo: remove after refactoring
+//
+
+@mixin remove_bootstrap_styles {
+  margin: 0;
+  padding: 0;
+}

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

@@ -0,0 +1,74 @@
+.rf-u-textleft {
+  text-align: left;
+}
+
+.rf-u-textright {
+  text-align: right;
+}
+
+.rf-u-textcenter {
+  text-align: center;
+}
+
+.rf-u-pullleft {
+  float: left;
+}
+
+.rf-u-pullright {
+  float: right;
+}
+
+.rf-u-block {
+  display: block !important;
+}
+
+.rf-u-inline {
+  display: inline-block !important;
+}
+
+.rf-u-success {
+  color: $green !important;
+}
+
+.rf-u-fail {
+  color: $red !important;
+}
+
+.rf-u-caps {
+  text-transform: uppercase;
+}
+
+.rf-u-truncate {
+  @include truncate;
+}
+
+.rf-u-text-minor {
+  color: $stormy;
+  font-size: inherit;
+  font-style: italic;
+  font-weight: normal;
+}
+
+
+// 
+// Spacing
+// based off of Bootstrap naming https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
+//
+
+.rf-u-m-y {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+.rf-u-m-t {
+  margin-top: 10px;
+}
+
+.rf-u-p-x {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.rf-u-p-r {
+  padding-right: 10px;
+}

data/ethosstyles.gemspec

@@ -17,6 +17,7 @@ Gem::Specification.new do |s|
   s.files         = `git ls-files`.split("\n")
   s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
   s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+
   s.require_paths = ["lib"]
 
   s.add_dependency('sass', '~> 3.2')

data/lib/ethosstyles/version.rb

@@ -1,3 +1,3 @@
 module Ethosstyles
-  VERSION = "0.1.0"
+  VERSION = "0.1.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ethosstyles
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - Ethos
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-07-26 00:00:00.000000000 Z
+date: 2017-08-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -78,8 +78,24 @@ files:
 - README.md
 - Rakefile
 - app/assets/stylesheets/_ethosstyles.scss
+- app/assets/stylesheets/components/base.scss
+- app/assets/stylesheets/components/buttons.scss
+- app/assets/stylesheets/components/checks.scss
+- app/assets/stylesheets/components/forms.scss
+- app/assets/stylesheets/components/grid.scss
+- app/assets/stylesheets/components/links.scss
+- app/assets/stylesheets/components/lists.scss
+- app/assets/stylesheets/components/logs.scss
+- app/assets/stylesheets/components/pills.scss
+- app/assets/stylesheets/components/progress.scss
+- app/assets/stylesheets/components/tables.scss
+- app/assets/stylesheets/components/timestamp.scss
+- app/assets/stylesheets/components/well.scss
 - app/assets/stylesheets/settings/_test.scss
 - app/assets/stylesheets/settings/_variables.scss
+- app/assets/stylesheets/utilities/mixins.scss
+- app/assets/stylesheets/utilities/shame.scss
+- app/assets/stylesheets/utilities/utilities.scss
 - ethosstyles.gemspec
 - lib/ethosstyles.rb
 - lib/ethosstyles/engine.rb