ethosstyles 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: f93a29da7f695a2ad65f55ee9c4e3cdd9180bf54
-  data.tar.gz: e2c313062cd88dfe7a0a33d7486751127c5ce2d6
+SHA256:
+  metadata.gz: a0f4e2d43ab0a9c4a5caac96a0163627f002f0ddd934428c57e909c5a05509b8
+  data.tar.gz: 42accd98c144ac1df50232c1c7482bbfcee1534383dc491cdb5f9678b3e56f29
 SHA512:
-  metadata.gz: ae358ace682be21f4a11212139e4dacde9c087fb739d653c82b407dfdda0977d9ccbf63c8dec7623d8d8ef7aa44168830fda6b96fd2f10ddfdd3c17134d8f9f7
-  data.tar.gz: 38788a0b70659a9d2a5523ad29a4361984266838772f65267b970f9484300f75c83c5a59108cb77bd9e30d836cb2c2539e29ef85222bc109ee69a6bf0364ab57
+  metadata.gz: 0f020527884ea6b952db46677e887a3c29088b2601a8862f8ee9b72758c685d8d69a33a0df88c437ab89fa2ec607c3815e1219ce2d5ad5bb8bdd6853a2198356
+  data.tar.gz: c39396c4ca1b0641c71b7fa1860bdc9c9b7a1122961cbe31d57abee49720223214d6616ea618fc765b19d8fbb4386cf323a532f7871d40bea8f34a1c6e0ca5b1

data/app/assets/stylesheets/_ethosstyles.scss

@@ -25,3 +25,5 @@
 @import 'components/tables';
 @import 'components/timestamp';
 @import 'components/well';
+
+@import 'pages/styleguide';

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

@@ -2,18 +2,24 @@
 // Buttons
 //
 
+$btn-padding-y: 8px;
+$btn-padding-x: $btn-padding-y * 1.8;
+
 .rf-btn,
+.rf-btn[type="button"],
 %rf-btn {
+  -webkit-appearance: initial;
   border: 1px solid transparent;
   border-radius: $border-radius;
   cursor: pointer;
   display: inline-block;
   font-weight: bold;
-  height: 32px;
-  line-height: 30px;
-  padding: 0 15px;
+  height: auto;
+  line-height: 1.1em;
+  padding: $btn-padding-y $btn-padding-x;
+  position: relative;
   text-align: center;
-  text-decoration: none;
+  text-decoration: none !important;
   touch-action: manipulation;
   vertical-align: middle;
   white-space: nowrap;
@@ -21,9 +27,23 @@
 
   @include hocus {
     outline: none;
+    text-decoration: none !important;
   }
 }
 
+// Side by side buttons
+
+.rf-btn + .rf-btn {
+  margin-left: 8px;
+}
+
+
+//
+// BUTTON TYPES
+//
+
+// PRIMARY
+
 .rf-btn--primary,
 %rf-btn--primary {
   background-color: $blue-bright;
@@ -34,10 +54,11 @@
     background-color: $navy;
     border-color: $navy;
     color: $white;
-    text-decoration: none;
   }
 }
 
+// SECONDARY
+
 .rf-btn--secondary,
 %rf-btn--secondary {
   background-color: $white;
@@ -45,30 +66,106 @@
   color: $charcoal;
 
   @include hocus {
-    background-color: $prewhite;
+    background-color: $white;
+    border-color: $slate;
     color: $charcoal;
-    text-decoration: none;
   }
 }
 
-.rf-btn--small {
-  min-width: 100px;
+// LINK
+
+.rf-btn--link {
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: $blue-bright;
+
+  @include hocus {
+    background-color: transparent;
+    border: 1px solid transparent;
+    color: $navy;
+  }
 }
 
+// DROPDOWN
+
+.rf-btn--dropdown {
+  @extend %rf-btn--secondary;
+  font-weight: 400;
+
+  &:after {
+    content: "\f0d7";
+    display: inline-block;
+    font-family: $font-icon-f;
+    font-size: .8em;
+    line-height: 1em;
+    margin-left: 7px;
+  }
+}
+
+// WARNING
+
+.rf-btn--warning {
+  background-color: $gold;
+  border-color: $gold;
+  color: $white;
+
+  @include hocus {
+    background-color: $dandelion;
+    border-color: $dandelion;
+    color: $white;
+  }
+
+  // Warning icon
+
+  &:before {
+    color: $white;
+    content: "\f071";
+    display: inline-block;
+    font-family: $font-icon-f;
+    font-size: 1em;
+    line-height: .6em;
+    margin-right: 4px;
+  }
+}
+
+// ERROR
+
+.rf-btn--error {
+  background-color: $red;
+  border: 1px solid $red;
+  color: $white;
+
+  @include hocus {
+    background-color: $crimson;
+    border-color: $crimson;
+    color: $white;
+  }
+}
+
+
+//
+// BUTTON SIZES
+//
+
 .rf-btn--large,
 %rf-btn--large {
   font-size: 18px;
-  height:  44px;
+  height: 50px;
   min-width: 90px;
+  padding: ($btn-padding-y*1.7) ($btn-padding-x*1.7);
 }
 
-.rf-btn--xs {
+.rf-btn--small {
   font-size: 11px;
-  height: 24px;
-  line-height: 14px;
-  padding: 0px 6px;
+  min-width: 50px;
+  padding: ($btn-padding-y*.5) ($btn-padding-x*.5);
 }
 
+
+//
+// BUTTON HELPERS
+//
+
 // Disabled
 
 .rf-btn--disabled,
@@ -78,18 +175,45 @@
   pointer-events: none;
 }
 
-// Side by side buttons
+// Hiding button
+// A button that hides when more info is expanded
 
-.rf-btn + .rf-btn {
-  margin-left: 4px;
+.rf-btn--tohide[aria-expanded='true'] {
+  display: none;
 }
 
+// Multiline button
+// Smaller padding for more text
 
-//
-// ERROR BUTTON (should not click)
-//
+.rf-btn--multiline {
+  padding: ($btn-padding-y*.8) $btn-padding-x;
 
-.rf-btn--error {
+  &.rf-btn--small {
+    padding: ($btn-padding-y*.3) ($btn-padding-x*.5);
+  }
+
+  &.rf-btn--large {
+    padding: ($btn-padding-y*.8) ($btn-padding-x*1.4);
+
+    .rf-btn__text {
+      font-size: 13px;
+      line-height: 1.2em;
+    }
+  }
+
+  // Small text beneath main text
+
+  .rf-btn__text {
+    display: block;
+    font-weight: 400;
+    margin: auto;
+  }
+}
+
+// Error hover
+// Only looks like an error button on hover
+
+.rf-btn--errorhover {
   @include hocus() {
     background-color: $red;
     border: 1px solid $red;
@@ -97,11 +221,9 @@
   }
 }
 
-
-//
-// LIGHT BUTTON
+// Light button
 // For use on top of dark backgrounds
-//
+// Only works with secondary and dropdown types
 
 .rf-btn--light {
     background-color: rgba(255,255,255, .3);
@@ -115,3 +237,77 @@
     }
 }
 
+
+//
+// BUTTON ASSOCIATES
+//
+
+// Helper text associated with button
+
+.rf-btn__helpertext {
+  font-size: 12px;
+  height: 20px;
+  margin-bottom: 0;
+  width: 100%;
+}
+
+// Button wrapper
+// Used for tooltips and alignment
+
+.rf-btn__wrapper {
+  display: block;
+}
+
+.rf-btn__wrapper + .rf-btn__wrapper {
+  margin-left: 8px;
+}
+
+
+//
+// BUTTON GROUPINGS
+//
+
+// BUTTON GROUP
+// For groups of buttons that touch each other
+
+.rf-btn-group {
+  > .rf-btn {
+    border-radius: 0;
+    display: block;
+    float: left;
+    margin-left: -2px;
+    width: auto;
+  }
+
+  > .rf-btn:first-of-type {
+    border-radius: $border-radius 0 0 $border-radius;
+  }
+
+  > .rf-btn:last-of-type {
+    border-radius: 0 $border-radius $border-radius 0;
+  }
+
+  // Remove border color change on hover because the borders
+  // are problematic w/ the negative margin left
+
+  .rf-btn--secondary {
+    @include hocus() {
+      background-color: $prewhite;
+      border-color: $cloudy;
+    }
+  }
+}
+
+// BUTTON SET
+// Fills up given area w/ buttons
+
+.rf-btn-set {
+  display: flex;
+  width: 100%;
+
+  .rf-btn {
+    flex-grow: 1;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+}

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

@@ -0,0 +1,14 @@
+//
+// STYLEGUIDE/TESTING
+//
+
+// Dark background
+
+.rf-sg--dark {
+  background-color: $charcoal;
+  padding: 20px;
+
+  h2 {
+    color: $white;
+  }
+}

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

@@ -12,8 +12,10 @@ $stormy: #c0c0c0;
 $mercury: #e8e8e8;
 $cloudy: #dadada;
 $prewhite: #f3f3f3;
+$lighterprewhite: #f9f9f9;
 
-$gold: #d2c53b;
+$gold: #ebc30a;
+$dandelion: #e7b707;
 $lemon: #ffea00;
 $sunshine: #fffde1;
 
@@ -21,6 +23,7 @@ $green: #04ac00;
 $mint: #e7f9e6;
 
 $red: #d9534f;
+$crimson: #CC3030;
 
 $navy: #002c82;
 $blue-bright: #0057ff;

data/app/views/buttons.html

@@ -0,0 +1,105 @@
+<h1>BUTTON</h1>
+
+<section class="rf-section">
+
+  <h2>BUTTON TYPES</h2>
+
+  <a href="#" class="rf-btn rf-btn--primary">Primary</a>
+  <a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
+  <a href="#" class="rf-btn rf-btn--link">Link</a>
+  <a href="#" class="rf-btn rf-btn--dropdown">Dropdown</a>
+  <a href="#" class="rf-btn rf-btn--warning">Warning</a>
+  <a href="#" class="rf-btn rf-btn--error">Error</a>
+</section>
+
+<section class="rf-section">
+
+  <h2>BUTTON SIZES</h2>
+
+  <a href="#" class="rf-btn rf-btn--small">Button</a>
+  <a href="#" class="rf-btn rf-btn--large">Button</a>
+  <br/><br/><br/>
+
+  <h3>Types + sizes </h3>
+
+  <a href="#" class="rf-btn rf-btn--primary rf-btn--large">Primary</a>
+  <a href="#" class="rf-btn rf-btn--warning rf-btn--large">Secondary</a>
+  <a href="#" class="rf-btn rf-btn--secondary rf-btn--large">Button</a>
+  <a href="#" class="rf-btn rf-btn--link rf-btn--large">Link</a>
+  <a href="#" class="rf-btn rf-btn--dropdown rf-btn--large">Dropdown</a>
+  <a href="#" class="rf-btn rf-btn--error rf-btn--large">Error</a>
+  <br/><br/><br/>
+
+  <a href="#" class="rf-btn rf-btn--primary rf-btn--small">Button</a>
+  <a href="#" class="rf-btn rf-btn--secondary rf-btn--small">Button</a>
+  <a href="#" class="rf-btn rf-btn--warning rf-btn--small">Button</a>
+  <a href="#" class="rf-btn rf-btn--link rf-btn--small">Link</a>
+  <a href="#" class="rf-btn rf-btn--dropdown rf-btn--small">Dropdown</a>
+  <a href="#" class="rf-btn rf-btn--error rf-btn--small">Error</a>
+</section>
+
+<section class="rf-section">
+  <h2>BUTTON HELPERS</h2>
+
+  <a href="#" class="rf-btn rf-btn--primary rf-btn--disabled">Disabled</a>
+  <a href="#" class="rf-btn rf-btn--primary rf-btn--errorhover">Error Hover</a>
+  <br/><br/><br/>
+
+  <div class="rf-sg--dark">
+    <a href="#" class="rf-btn rf-btn--secondary rf-btn--light">Button</a>
+    <a href="#" class="rf-btn rf-btn--secondary rf-btn--large rf-btn--light">Button</a>
+    <a href="#" class="rf-btn rf-btn--secondary rf-btn--small rf-btn--light">Button</a>
+    <a href="#" class="rf-btn rf-btn--dropdown rf-btn--light">Dropdown</a>
+  </div>
+  <br/><br/><br/>
+
+  <h3>Multiline buttons</h3>
+
+  <a href="#" class="rf-btn rf-btn--primary rf-btn--large rf-btn--multiline">
+    Primary
+    <small class="rf-btn__text">Extra line of text</small>
+  </a>
+  <a href="#" class="rf-btn rf-btn--secondary rf-btn--large">
+    Secondary
+  </a>
+</section>
+
+<section class="rf-section">
+
+  <h2>BUTTON GROUPINGS</h2>
+  <br/>
+  <h3>Button Group</h3>
+
+  <div class="rf-btn-group">
+    <a href="#" class="rf-btn rf-btn--primary rf-btn--large">Primary</a>
+    <a href="#" class="rf-btn rf-btn--warning rf-btn--large">Secondary</a>
+    <a href="#" class="rf-btn rf-btn--secondary rf-btn--large">Button</a>
+    <a href="#" class="rf-btn rf-btn--dropdown rf-btn--large">Dropdown</a>
+    <a href="#" class="rf-btn rf-btn--error rf-btn--large">Error</a>
+  </div>
+  <br/><br/><br/><br/>
+
+  <h3>Button Set</h3>
+  <div class="rf-col--2">
+    <div class="rf-btn-set">
+      <a href="#" class="rf-btn rf-btn--primary">Primary</a>
+      <a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
+    </div>
+  </div>
+  <br/>
+  <div class="rf-col--8">
+    <div class="rf-btn-set">
+      <a href="#" class="rf-btn rf-btn--primary">Primary</a>
+      <a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
+      <a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
+    </div>
+  </div>
+  <br/>
+  <div class="rf-col--1">
+    <div class="rf-btn-set">
+      <a href="#" class="rf-btn rf-btn--primary">Primary</a>
+      <a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
+      <a href="#" class="rf-btn rf-btn--secondary">Secondary</a>
+    </div>
+  </div>
+</section>

data/lib/ethosstyles/version.rb

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

metadata

@@ -1,69 +1,69 @@
 --- !ruby/object:Gem::Specification
 name: ethosstyles
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Ethos
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-10-04 00:00:00.000000000 Z
+date: 2018-03-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '3.2'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '3.2'
 - !ruby/object:Gem::Dependency
   name: thor
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: aruba
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '0.4'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '0.4'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 description: Ethos Styles
@@ -73,7 +73,7 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- .gitignore
+- ".gitignore"
 - Gemfile
 - README.md
 - Rakefile
@@ -97,12 +97,14 @@ files:
 - app/assets/stylesheets/components/_tables.scss
 - app/assets/stylesheets/components/_timestamp.scss
 - app/assets/stylesheets/components/_well.scss
+- app/assets/stylesheets/pages/_styleguide.scss
 - app/assets/stylesheets/settings/_test.scss
 - app/assets/stylesheets/settings/_variables.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
+- app/views/buttons.html
 - ethosstyles.gemspec
 - lib/ethosstyles.rb
 - lib/ethosstyles/engine.rb
@@ -117,17 +119,17 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: ethosstyles
-rubygems_version: 2.0.14.1
+rubygems_version: 2.7.2
 signing_key: 
 specification_version: 4
 summary: Ethos Styles