ethosstyles 0.1.2 → 0.1.3

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

@@ -0,0 +1,21 @@
+//
+// SECTIONS
+//
+
+.rf-section {
+  padding-bottom: 20px;
+  padding-top: 20px;
+
+  &:first-of-type {
+    padding-top: 0;
+  }
+}
+
+.rf-section__headline {
+  margin-bottom: 10px;
+}
+
+.rf-section__headline + .rf-section__description {
+  margin-top: -4px;
+  margin-bottom: 10px;
+}

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

@@ -0,0 +1,59 @@
+//
+// SLIDER (not BEM because of jqueryUI)
+//
+
+.ui-slider {
+  border: $input-border-default;
+  border-radius: 20px;
+  width: 100%;
+}
+
+.ui-slider .ui-widget-header {
+  background: $blue-bright;
+}
+
+.ui-slider .ui-slider-handle {
+  @include input_handle($transition: false);
+}
+
+// Range
+$range-number-width: 24px;
+
+.rf-range__container {
+  // padding to make room for max and min display values
+  padding-left: 22px;
+  padding-right: 22px;
+}
+
+.rf-range {
+  position: relative;
+}
+
+.rf-range__val {
+  color: $slate;
+  font-size: 10px;
+  font-weight: 300;
+  height: 14px;
+  position: absolute;
+  text-align: center;
+  top: -4px;
+  width: $range-number-width;
+}
+
+.rf-range__val--current {
+  font-weight: 800;
+  top: -16px;
+  width: 100%;
+}
+
+.rf-range__val--min {
+  left: -$range-number-width;
+  padding-right: 4px;
+  text-align: right;
+}
+
+.rf-range__val--max {
+  padding-left: 4px;
+  right: -$range-number-width;
+  text-align: left;
+}

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

@@ -0,0 +1,104 @@
+//
+// Tables
+//
+
+//
+// Structure
+//
+//<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>
+//  </tr>
+//  <tbody class="rf-table__body">
+//    <tr class="rf-table__row">
+//      <td class="rf-table__td"> Cell #1</td>
+//      <td class="rf-table__td"> Cell #2</td>
+//    </tr>
+//  </tbody>
+//</table>
+//
+// Best Practices
+//
+// Set column widths in the header
+//
+
+.rf-table {
+  width: 100%;
+  border-collapse: separate;  // Necessary to round corners
+  table-layout: fixed;
+}
+
+.rf-table__th,
+.rf-table__td {
+  padding-left: $list-padding/2;
+  padding-right: $list-padding/2;
+
+  &:last-of-type {
+    padding-right: $list-padding;
+  }
+
+  &:first-of-type {
+    padding-left: $list-padding;
+  }
+}
+
+.rf-table__row--header {
+  vertical-align: bottom;
+}
+
+.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: $border-default;
+  font-size: 13px;
+  padding: $list-padding;
+  vertical-align: middle;
+}
+
+.rf-table__th {
+  @extend %h5;
+  padding: 0px $list-padding 5px;
+}
+
+.rf-table__td--strong {
+  color: $charcoal;
+  font-weight: bold;
+}
+
+
+// Draws table borders
+tr:first-of-type > .rf-table__td {
+  border-top: $border-default;
+}
+
+.rf-table__row > td:first-of-type {
+  border-left: $border-default;
+}
+
+.rf-table__row > td:last-of-type {
+  border-right: $border-default;
+}
+
+// Rounds corners of the table body
+.rf-table__body {
+  @include round-table-corners();
+}

data/app/assets/stylesheets/components/{well.scss → _well.scss}

@@ -19,3 +19,12 @@
 .rf-well__list {
   margin: 20px;
 }
+
+.rf-well--noborder {
+  border-width: 0;
+}
+
+.rf-well--tabpane {
+  @extend .rf-well;
+  border-radius: 0 0 $border-radius $border-radius;
+}

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

@@ -36,3 +36,10 @@ $powder: #f8fbff;
 $border-radius: 3px;
 $list-padding: 14px;
 $border-default: solid 1px $mercury;
+$opacity-default: .3;
+$input-border-default: solid 1px $stormy;
+
+// Forms
+
+$input-padding-v: 8px;
+$input-padding-h: 12px;

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

@@ -0,0 +1,13 @@
+//
+// Animations
+//
+
+// Currently used for loading icon
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,196 @@
+// Generate `:hover` and `:focus` styles in one go.
+@mixin hocus {
+  &:hover,
+  &:focus,
+  &:active {
+    @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 untrunc($width: 100%) {
+  max-width: $width;
+  white-space: normal;
+  overflow: hidden;
+}
+
+@mixin word-wrap {
+  -ms-word-break: break-all;
+  overflow-wrap: break-word;
+}
+
+
+//
+// LOADING ICON
+//
+
+// Can specify background color and size
+
+@mixin rf-loader( $bg-color: $white, $size: 30px ) {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 10px;
+  text-indent: -9999em;
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+  background: $blue-bright;
+  background: -webkit-linear-gradient(left, $blue-bright 10%, rgba(0,87,255, 0) 42%);
+  background: linear-gradient(to right, $blue-bright 10%, rgba(0,87,255, 0) 42%);
+  position: relative;
+  animation: spin 1.4s infinite linear;
+  transform: translateZ(0);
+
+  &:before {
+    width: 50%;
+    height: 50%;
+    background: $blue-bright;
+    border-radius: 100% 0 0 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: '';
+  }
+
+  &:after {
+    background: $bg-color;
+    width: 75%;
+    height: 75%;
+    border-radius: 50%;
+    content: '';
+    margin: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+
+//
+// TRIGGER ARROW
+//
+
+// Can specify display (inline vs block) and arrow position
+
+@mixin trigger_arrow ( $display: block, $arrow-pos: $list-padding ) {
+  &[aria-expanded='false']:after,
+  &[aria-expanded='true']:after {
+    color: inherit;
+    font-family: 'octicons';
+    font-size: 14px;
+    vertical-align: middle;
+
+    @include hocus() {
+      color: inherit;
+    }
+
+    @if ($display==block) {
+      display: block;
+      position: absolute;
+      right: $arrow-pos;
+      top: $arrow-pos;
+    }
+
+    @if ($display==inline) {
+      display: inline-block;
+      position: relative;
+      margin-bottom: 2px;
+      margin-left: 2px;
+    }
+  }
+
+  &[aria-expanded='false']:after {
+    content: '\f05a'; // triangle right
+  }
+
+  &[aria-expanded='true']:after {
+    content: '\f05b'; // triangle down
+  }
+}
+
+//
+// INPUT HANDLE
+// Used for toggles and ranges
+//
+
+@mixin input_handle($transition: true) {
+  background-color: $white;
+  border: $input-border-default;
+  border-radius: 50%;
+  bottom: 1px;
+  content: "";
+  cursor: pointer;
+  height: 18px;
+  left: 1px;
+  position: absolute;
+  width: 18px;
+
+  @if $transition == 'true' {
+    transition: .4s;
+    -webkit-transition: .4s;
+  }
+}

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

@@ -0,0 +1,18 @@
+//
+//  Bootstrap hacks
+//  todo: remove after refactoring
+//
+
+@mixin remove_bootstrap_styles {
+  margin: 0;
+  padding: 0;
+}
+
+.rf-pre {
+  margin-bottom: 0;
+}
+
+// This is 1px different and I don't know why
+.rf-form-control {
+  padding-top: $input-padding-v - 1;
+}

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

@@ -0,0 +1,166 @@
+//
+// TEXT
+//
+
+.rf-u-textleft {
+  text-align: left;
+}
+
+.rf-u-textright {
+  text-align: right;
+}
+
+.rf-u-textcenter {
+  text-align: center!important;
+}
+
+.rf-u-unbold {
+  font-weight: normal !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;
+}
+
+
+//
+// POSITIONING
+//
+
+.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-clearfix {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+
+//
+// STATUSES
+//
+
+.rf-u-success {
+  color: $green !important;
+}
+
+.rf-u-fail {
+  color: $red !important;
+}
+
+
+//
+// SHOW/HIDE
+//
+
+.rf-hide {
+  display: none !important;
+}
+
+.rf-show {
+  display: block !important;
+}
+
+
+//
+// SPACING
+// based off of Bootstrap naming https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
+//
+
+// Padding
+// todo: remove duplicate format
+
+.rf-u-p-0,
+.rf-u-p0 {
+  padding: 0;
+}
+
+.rf-u-p {
+  padding: 10px;
+}
+
+.rf-u-p-l,
+.rf-u-pl {
+  padding-left: 10px;
+}
+
+.rf-u-p-r,
+.rf-u-pr {
+  padding-right: 10px;
+}
+
+.rf-u-pb {
+  padding-bottom: 10px;
+}
+
+.rf-u-p-y,
+.rf-u-py {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.rf-u-p-x,
+.rf-u-px {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+
+// Margin
+// todo: remove duplicate format
+
+.rf-u-m {
+  margin: 10px;
+}
+
+.rf-u-m-b,
+.rf-u-mb {
+  margin-bottom: 10px;
+}
+
+.rf-u-m-y,
+.rf-u-my {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+.rf-u-m-t,
+.rf-u-mt {
+  margin-top: 10px;
+}
+
+.rf-u-mb0 {
+  margin-bottom: 0;
+}
+

data/lib/ethosstyles/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ethosstyles
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Ethos
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-08-14 00:00:00.000000000 Z
+date: 2017-10-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -78,24 +78,31 @@ 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/components/_base.scss
+- app/assets/stylesheets/components/_blurbs.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/_icons.scss
+- app/assets/stylesheets/components/_links.scss
+- app/assets/stylesheets/components/_lists.scss
+- app/assets/stylesheets/components/_logs.scss
+- app/assets/stylesheets/components/_notices.scss
+- app/assets/stylesheets/components/_panels.scss
+- app/assets/stylesheets/components/_pills.scss
+- app/assets/stylesheets/components/_progress.scss
+- app/assets/stylesheets/components/_sections.scss
+- app/assets/stylesheets/components/_sliders.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
+- app/assets/stylesheets/utilities/_animations.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