feathers 0.1.4 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c9e87030fb37a398115e93e4cdda5c685333bcbb
-  data.tar.gz: 865f052d511bb4e9e73e0586cf4ec3c86a838cc4
+  metadata.gz: 15675287e5c469f62927f5a1bbc4d84148d6ac4a
+  data.tar.gz: f3d5218e1e98711394786b70f934d426505868b3
 SHA512:
-  metadata.gz: f5a45b994ebf4ae0fe236bf61e8a2f66ed5054f0578fe3e7b72631674397035932ae3aa7bbf2d8e6b8a56ecc80b97780dc97edc05fe46def6f16a8dd62503e32
-  data.tar.gz: 8ddd35b603389e64183a6e3b1a8c0aa7c5103c87a1e381e501cb8d6b74d3bf005a832a40f95c8089b4911529c49a10668ee3d2f41fc61495a67263ff5a4270e3
+  metadata.gz: e51b346cccb604ae0ea535510a06be22c63844114382f93bd08ef51857cbbec414f26c76219ee61a9bf678e3feb64bc566f251fc27ac7ac01c824b512b24081b
+  data.tar.gz: 201974911ec14361414d64d4aa87199350f788389d6c6069268ea223d0dcbd973197b550958ceecd85167fa1ef72c1aec129e9ff2127a5a9128d1e9e1e9ca80d

data/README.md

@@ -43,18 +43,14 @@ Then simply override the Feathers color presets. You can change any or all value
     module Feathers
       class Config
 
-        @light_1 = "#efefef"
-        @light_2 = "#ddd"
-        @medium_1 = "#ccc"
-        @medium_2 = "#aaa"
-        @dark_1 = "#777"
+        @light = "#efefef"
+        @medium = "#ccc"
         @dark_2 = "#444"
         @highlight = "#ffe"
         @notice_background = "#ecffd6"
         @warning_background = "#fbefb9"
         @error_background = "#ffebeb"
         @note_background = "#d8f2ff"
-        @default_element = "#ccc"
         @danger_element = "#cf0404"
         @info_element = "#448ccb"
         @success_element = "#7ba900"
@@ -67,10 +63,25 @@ Then simply override the Feathers color presets. You can change any or all value
 
 Borders and gradients are calculated automatically based on the defined values for their element.
 
-ToDo
+Changes
 ----
 
-* Currently checkbox, radio buttons, and select box stylings are webkit only
-* View Helpers for various Feathers elements
-* JavaScript for better handling of tap states for touch events (`:hover` isn't always accurate)
-* Add a demo and tests (tests don't really make sense until we have view helpers to test)
+####v0.2.0
+* Cleaned up typography / resets
+* Headings now use Apple system default font where available
+* Placeholders or all icons, instead of Font Awesome
+* Restyled dropdown menu slighlty
+* Restyled horizontal nav bar
+* Toned down border radi on all menus
+* Title bar is lighter and now uses Apple system font where available
+* Lightened icon bar
+* Default label now has darker background
+* Added some padding on the default table
+* Fixed vertical alignment on checkboxes and radio buttons
+* Removed `default_element` config color option
+* Consolidated `light_1` and `light_2` config color options to `light`
+* Consolidated `medium_1` and `medium_2` config color options to `medium`
+* Consolidated `dark_1` and `dark_2` config color options to `dark`
+
+####v0.1.4
+* Add support for Rails 4.1

data/app/assets/stylesheets/base.css.scss.erb

@@ -5,19 +5,54 @@
 }
 
 ::-moz-selection {
-  background:<%= Feathers::Config.dark_2 %>;
+  background:<%= Feathers::Config.dark %>;
   color:<%= Feathers::Config.white %>;
   text-shadow:none;
 }
 
 ::selection {
-  background:<%= Feathers::Config.dark_2 %>;
+  background:<%= Feathers::Config.dark %>;
   color:<%= Feathers::Config.white %>;
   text-shadow:none;
 }
 
+html {
+  font-family:Helvetica, Arial, sans-serif;
+  font-smoothing:antialiased;
+  -webkit-font-smoothing:antialiased;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  background-color:<%= Feathers::Config.white %>;
+  margin:0;
+  overflow-scrolling:touch;
+  -webkit-overflow-scrolling:touch;
+  overflow-y:scroll;
+}
+
+article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
+  display: block;
+}
+
+audio,canvas,progress,video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+[hidden],.hidden {
+  display: none;
+}
+
 a {
-  color:<%= Feathers::Config.dark_2 %>;
+  background: transparent;
+  color:<%= Feathers::Config.dark %>;
   outline:none;
   -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
   -moz-tap-highlight-color:rgba(0, 0, 0, 0);
@@ -27,24 +62,16 @@ a {
 }
 
 a:hover {
-  color:<%= Feathers::Config.dark_1 %>;
-}
-
-.align-center {
-  text-align:center;
-}
-
-.align-right {
-  text-align: right;
+  color:darken(<%= Feathers::Config.dark %>, 30%);
 }
 
-.align-left {
-  text-align:left;
+abbr[title] {
+  border-bottom: 1px dotted;
 }
 
 blockquote {
-  border-left:3px solid <%= Feathers::Config.medium_1 %>;
-  color:<%= Feathers::Config.dark_2 %>;
+  border-left:3px solid <%= Feathers::Config.medium %>;
+  color:<%= Feathers::Config.dark %>;
   margin:0 1em 0.5em 1em;
   padding:1em;
   cite {
@@ -55,75 +82,175 @@ blockquote {
   }
 }
 
-body {
-  background-color:<%= Feathers::Config.white %>;
-  font-family:helvetica, arial, sans-serif;
-  font-size:16px;
-  font-smoothing:antialiased;
-  -webkit-font-smoothing:antialiased;
-  line-height:150%;
-  margin:0;
-  overflow-scroll:touch;
-  -webkit-overflow-scroll:touch;
-  overflow-y:scroll;
-  -webkit-text-size-adjust:100%;
-  -ms-text-size-adjust:100%;
+b,strong {
+  font-weight: bold;
 }
 
-footer, header, nav, section {
-  display:block;
+h1, h2, h3, h4, h5, h6 {
+  font-family: -apple-system-font, Helvetica, Arial, sans-serif;
+  margin: 16px 0;
 }
 
-fieldset, img {
-  border:none;
+h1 { font-size: 2em; }
+h2 { font-size:1.75em; }
+h3 { font-size:1.5em; }
+h4 { font-size:1em; }
+h5 { font-size:0.75em; }
+h6 { font-size:0.67em; }
+
+small {
+  font-size: 80%;
 }
 
-form, legend, li {
-  margin:0;
-  padding:0;
+sub,sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  line-height:1.5rem;
-  margin:0 0 0.5em 0;
-  padding:0;
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+i {
+  color:<%= Feathers::Config.dark %>;
+}
+
+img {
+  border: 0;
 }
 
-h1 { font-size:200%; }
-h2 { font-size:180%; }
-h3 { font-size:160%; }
-h4 { font-size:140%; }
-h5 { font-size:120%; }
-h6 { font-size:100%; }
+svg:not(:root) {
+  overflow: hidden;
+}
 
-.hidden {
-  display:none;
+figure {
+  margin: 1em 40px;
 }
 
 hr {
-  border:none;
-  border-bottom:1px solid <%= Feathers::Config.medium_1 %>;
-  height:0;
-  margin:1em 0;
-  padding:0;
+  border-bottom:1px solid <%= Feathers::Config.medium %>;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 1px;
 }
 
-i {
-  color:<%= Feathers::Config.dark_2 %>;
+pre {
+  overflow-x:scroll;
+  overflow-y:hidden;
+}
+
+code,kbd,pre,samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+button,input,optgroup,select,textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+
+button {
+  overflow: visible;
+}
+
+button,select {
+  text-transform: none;
+}
+
+button,html input[type="button"],input[type="reset"],input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+
+button[disabled],html input[disabled] {
+  cursor: default;
+}
+
+button::-moz-focus-inner,input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
 }
 
 input, select, textarea {
   color:#444;
   font-family:helvetica, arial, sans-serif;
-  font-size:0.8em;
+  font-size:1em;
+  line-height: normal;
 }
 
-p {
-  margin:0 0 1em 0;
+
+input[type="checkbox"],input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
 }
 
-small {
-  font-size:70%;
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+  border: 0;
+  padding: 0;
+}
+
+textarea {
+  overflow: auto;
+}
+
+
+optgroup {
+  font-weight: bold;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,th {
+  padding: 0;
+}
+
+.align-center {
+  text-align:center;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.align-left {
+  text-align:left;
+}
+
+p {
+  margin:0 0 1em 0;
 }
 
 ul, ol {

data/app/assets/stylesheets/buttons.css.scss.erb

@@ -1,15 +1,23 @@
 @import 'mixins';
 
 .button {
-  border:1px solid darken(<%= Feathers::Config.default_element %>, 30%);
+  border:1px solid darken(<%= Feathers::Config.light %>, 30%);
   display:inline-block;
+  font-weight:bold;
   line-height:1.5em;
   padding:0.25em 0.5em;
-  @include background-gradient(lighten(<%= Feathers::Config.default_element %>, 10%), <%= Feathers::Config.default_element %>);
+  text-align:center;
+  @include background-gradient(lighten(<%= Feathers::Config.light %>, 10%), <%= Feathers::Config.light %>);
   @include border-radius(0.25em);
   i {
     margin-right:0.5em;
   }
+  i.icon-empty {
+    display:inline-block;
+    height:0.75em;
+    width:0.75em;
+    border:1px solid <%= Feathers::Config.dark %>;
+  }
 }
 
 .button:active {
@@ -17,22 +25,21 @@
 }
 
 .button:hover {
-  @include background-gradient(darken(<%= Feathers::Config.default_element %>, 10%), darken(<%= Feathers::Config.default_element %>, 20%));
   color:<%= Feathers::Config.white %>;
-  @include background-gradient(darken(<%= Feathers::Config.default_element %>, 10%), darken(<%= Feathers::Config.default_element %>, 20%));
+  @include background-gradient(darken(<%= Feathers::Config.light %>, 10%), darken(<%= Feathers::Config.light %>, 20%));
   i {
     color:<%= Feathers::Config.white %>;
   }
 }
 
 .button.cancel {
-  border:1px solid darken(<%= Feathers::Config.default_element %>, 30%);
-  @include background-gradient(lighten(<%= Feathers::Config.default_element %>, 10%), <%= Feathers::Config.default_element %>);
+  border:1px solid darken(<%= Feathers::Config.light %>, 30%);
+  @include background-gradient(<%= Feathers::Config.light %>, darken(<%= Feathers::Config.light %>, 10%));
 }
 
 .button.cancel:hover {
   color:<%= Feathers::Config.white %>;
-  @include background-gradient(darken(<%= Feathers::Config.default_element %>, 10%), darken(<%= Feathers::Config.default_element %>, 20%));
+  @include background-gradient(darken(<%= Feathers::Config.light %>, 20%), darken(<%= Feathers::Config.light %>, 30%));
   i {
     color:<%= Feathers::Config.white %>;
   }
@@ -45,6 +52,9 @@
   i {
     color:<%= Feathers::Config.white %>;
   }
+  i.icon-empty {
+    border:1px solid #fff;
+  }
 }
 
 .button.delete:hover {
@@ -66,6 +76,9 @@
   i {
     color:<%= Feathers::Config.white %>;
   }
+  i.icon-empty {
+    border:1px solid #fff;
+  }
 }
 
 .button.action:hover {
@@ -79,6 +92,9 @@
   i {
     color:<%= Feathers::Config.white %>;
   }
+  i.icon-empty {
+    border:1px solid #fff;
+  }
 }
 
 .button.success:hover {
@@ -92,6 +108,9 @@
   i {
     color:<%= Feathers::Config.white %>;
   }
+  i.icon-empty {
+    border:1px solid #fff;
+  }
 }
 
 .button.warning:hover {

data/app/assets/stylesheets/flash-messages.css.scss.erb

@@ -5,6 +5,11 @@ div.notice, div.error, div.note, div.warning {
   i {
     margin-right:1em;
   }
+  i.icon-empty {
+    display:inline-block;
+    height:1em;
+    width:1em;
+  }
 }
 
 div.error {
@@ -13,6 +18,9 @@ div.error {
   i {
     color:darken(<%= Feathers::Config.error_background %>, 50%);
   }
+  i.icon-empty {
+    background:darken(<%= Feathers::Config.error_background %>, 50%);
+  }
 }
 
 div.notice {
@@ -21,6 +29,9 @@ div.notice {
   i {
     color:darken(<%= Feathers::Config.notice_background %>, 50%);
   }
+  i.icon-empty {
+    background:darken(<%= Feathers::Config.notice_background %>, 50%);
+  }
 }
 
 div.warning {
@@ -29,5 +40,8 @@ div.warning {
   i {
     color:darken(<%= Feathers::Config.warning_background %>, 50%);
   }
+  i.icon-empty {
+    background:darken(<%= Feathers::Config.warning_background %>, 50%);
+  }
 }
 

data/app/assets/stylesheets/forms.css.scss.erb

@@ -17,7 +17,7 @@ fieldset, div.field, div.actions {
   input[type=search],
   input[type=password] {
     background:<%= Feathers::Config.white %>;
-    border:1px solid <%= Feathers::Config.medium_1 %>;
+    border:1px solid <%= Feathers::Config.medium %>;
     padding:0.5em;
     @include border-radius(0.25em);
   }
@@ -62,11 +62,17 @@ fieldset, div.field, div.actions {
     input[type=checkbox]:checked {
       background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAYAAAD+MdrbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWtJREFUeNrslU2LglAUhl/lUou2LhWCdubGsk1B/oKZHzvTDwgEd4lFm0Aoog8XgpswXVjTvaD0Nc2YzjAMvosr5yIP77n33HO44/GIIkXownHcSxGwk7l3cha85YGdTL3SL4+CVQJLYAksgb8DJNf9LK+4okfAz6T8v2dKGIbFnOHhcIBlWRiNRvmBcRxjOBxiOp2iWq3er8MMB89g6/WaxZVKJZ9D6iqBUe33++eBruvCtu2bvadSjqIIhmHg/GU1Gg10Op2vHXqeh8FggOVyme5NJpOL9FRVRa/XuzlDcu2CloHjOCwej8eQJAm73Q6z2Sz9r91uo9lsPu42VNvtFpvNJo1938d8PsdqtWJ1RyXL8qewG2C9XocoijBNE4vFgu3R4k1SFQQBrVYrW7chhKDf70NRFBYHQcAughawruvgef659kWd0PQSdbtd1Gq173fse9I0LX239HIyjYBH0Cxd/e/PlA8BBgA6gpuyV9X9zQAAAABJRU5ErkJggg==) bottom left no-repeat;
     }
+
+    input[type=radio], input[type=checkbox] {
+      outline:none;
+      position:relative;
+      top:0.3em;
+    } 
   }
 
   legend {
-    background:<%= Feathers::Config.light_1 %>;
-    color:<%= Feathers::Config.dark_1 %>;
+    background:<%= Feathers::Config.light %>;
+    color:<%= Feathers::Config.dark %>;
     padding:0.5em;
     @include border-radius(0.25em);
   }
@@ -76,7 +82,7 @@ fieldset, div.field, div.actions {
     -moz-appearance:none;
     appearance:none;
     background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAH1JREFUeNqkUTsKwCAMNaGDk4qDoGcQZwdHj+1pHLyFpE6l1P5o3xRCHu8TICL2Fch+YNmmUkpr7fSIc55Scs4d9rC3PfMBwBjjvbfWIuIdeeYrpYam1vpV5pzzZk8IEUIY/KvMcNr20O+9xxillHeN0QVqrfQE+PPnVYABAAwmZGpbdzcOAAAAAElFTkSuQmCC) 100% 50% no-repeat <%= Feathers::Config.white %>;
-    border:1px solid <%= Feathers::Config.medium_1 %>;
+    border:1px solid <%= Feathers::Config.medium %>;
     line-height:1.25em;
     min-width:16em;
     padding:0.5em 3em 0.5em 0.5em;
@@ -87,7 +93,7 @@ fieldset, div.field, div.actions {
     -webkit-appearance:none;
     -moz-appearance:none;
     appearance:none;
-    border:1px solid <%= Feathers::Config.medium_1 %>;
+    border:1px solid <%= Feathers::Config.medium %>;
     line-height:1.25em;
     padding:0.5em;
     @include border-radius(0.25em);
@@ -119,11 +125,11 @@ form {
 
 input[type=reset], input[type=submit], input[type=button] {
   display:inline-block;
-  border:1px solid darken(<%= Feathers::Config.default_element %>, 30%);
+  border:1px solid darken(<%= Feathers::Config.light %>, 30%);
   display:inline-block;
   line-height:1.5em;
   padding:0.25em 0.5em;
-  @include background-gradient(lighten(<%= Feathers::Config.default_element %>, 10%), <%= Feathers::Config.default_element %>);
+  @include background-gradient(<%= Feathers::Config.light %>, darken(<%= Feathers::Config.light %>, 10%));
   @include border-radius(0.25em);
   -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
   -moz-tap-highlight-color:rgba(0, 0, 0, 0);

data/app/assets/stylesheets/menus.css.scss.erb

@@ -1,65 +1,53 @@
 .breadcrumbs {
-  background:<%= Feathers::Config.light_1 %>;
-  border:1px solid <%= Feathers::Config.light_2 %>;
-  color:<%= Feathers::Config.dark_1 %>;
+  background:<%= Feathers::Config.light %>;
+  border:1px solid darken(<%= Feathers::Config.light %>, 30%);
+  color:<%= Feathers::Config.dark %>;
   padding:1em;
   span {
-    color:<%= Feathers::Config.dark_2 %>;
+    color:darken(<%= Feathers::Config.dark %>, 30%);
   }
 }
 
 .drop-menu {
-  background:<%= Feathers::Config.light_1 %>;
+  background:<%= Feathers::Config.light %>;
   display:inline-block;
   padding:0.5em 1em;
   position:relative;
-  @include border-radius(0.5em);
+  @include border-radius(0.25em);
   ul {
-    background:<%= Feathers::Config.light_1 %>;
+    background:<%= Feathers::Config.light %>;
     display:none;
-    left:0.5em;
+    left:0;
     margin:0;
     min-width:12em;
     padding:0;
     position:absolute;
-    top:2.5em;
+    top:2em;
     z-index:1000;
-    @include border-radius(0.5em);
+    @include border-radius(0.25em);
     li {
       list-style:none;
       margin:0;
       padding:0;
       a {
-        background:<%= Feathers::Config.light_1 %>;
+        background:<%= Feathers::Config.light %>;
         display:block;
         padding:0.5em;
       }
       a:hover {
-        color:<%= Feathers::Config.light_1 %>;
-        background:<%= Feathers::Config.dark_1 %>;
-        @include border-radius(0.5em);
+        color:<%= Feathers::Config.light %>;
+        background:<%= Feathers::Config.dark %>;
+        @include border-radius(0.25em);
       }
     }
   }
-  ul:before {
-    content: "";
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-width: 12px;
-    border-style: solid;
-    border-color: transparent transparent <%= Feathers::Config.light_1 %> transparent;
-    top: -24px;
-    left: 1em;
-    z-index:1000;
-  }
 }
 .drop-menu:hover {
-  background:<%= Feathers::Config.medium_1 %>;
+  background:<%= Feathers::Config.medium %>;
   > a {
-    color:<%= Feathers::Config.dark_2 %>;
+    color:<%= Feathers::Config.dark %>;
     i {
-      color:<%= Feathers::Config.dark_2 %>;
+      color:<%= Feathers::Config.dark %>;
     }
   }
   ul {
@@ -78,22 +66,27 @@ ul.horizontal-menu, ul.vertical-menu {
 }
 
 ul.horizontal-menu {
-  background:<%= Feathers::Config.light_1 %>;
+  background:<%= Feathers::Config.light %>;
+  font-weight:bold;
+  height:2em;
+  line-height:2em;
   overflow:hidden;
-  padding:0.5em 0;
-  @include border-radius(0.5em);
+  padding:0;
+  @include border-radius(0.25em);
   li {
     display:inline;
     a {
       display:inline-block;
       float:left;
-      margin:0 0.5em;
+      height:2em;
+      line-height:2em;
+      margin:0;
       padding:0 1em;
     }
     a:hover {
-      background:<%= Feathers::Config.dark_1 %>;
+      background:<%= Feathers::Config.dark %>;
       color:<%= Feathers::Config.white %>;
-      @include border-radius(0.5em);
+      @include border-radius(0.25em);
     }
   }
 }
@@ -103,11 +96,11 @@ ul.vertical-menu {
     margin:0;
     padding:0;
     a {
-      background:<%= Feathers::Config.light_1 %>;
+      background:<%= Feathers::Config.light %>;
       display:block;
       margin-bottom:0.5em;
       padding:0.5em 1em;
-      @include border-radius(0.5em);
+      @include border-radius(0.25em);
       i {
         display:inline-block;
         float:right;
@@ -116,7 +109,7 @@ ul.vertical-menu {
       }
     }
     a:hover {
-      background:<%= Feathers::Config.dark_1 %>;
+      background:<%= Feathers::Config.dark %>;
       color:<%= Feathers::Config.white %>;
       i {
         color:<%= Feathers::Config.white %>;
@@ -127,21 +120,28 @@ ul.vertical-menu {
 }
 
 .icon-bar {
-  border:1px solid <%= Feathers::Config.medium_1 %>;
+  border:1px solid <%= Feathers::Config.medium %>;
   display:block;
   height:3em;
   line-height:2em;
   padding:0.5em;
   text-align:center;
-  @include background-gradient(lighten(<%= Feathers::Config.light_2 %>, 10%), <%= Feathers::Config.light_2 %>);
+  @include background-gradient(lighten(<%= Feathers::Config.light %>, 10%), <%= Feathers::Config.light %>);
   a {
     display:inline-block;
     margin:0 2em;
     i {
       font-size:180%;
-      color:<%= Feathers::Config.dark_1 %>;
+      color:<%= Feathers::Config.dark %>;
       @include text-shadow(1px 1px 1px <%= Feathers::Config.white %>);
     }
+    i.icon-empty {
+      @include border-radius(0.25em);
+      background:<%= Feathers::Config.dark %>;
+      display:inline-block;
+      height:1em;
+      width:1em;
+    }
   }
   a:hover, a:active {
     i {
@@ -163,9 +163,9 @@ ul.link-list {
       display:block;
       padding:0.5em;
       margin:0;
-      border-bottom:1px solid <%= Feathers::Config.medium_1 %>;
+      border-bottom:1px solid <%= Feathers::Config.medium %>;
       i {
-        color:<%= Feathers::Config.dark_1 %>;
+        color:<%= Feathers::Config.dark %>;
         display:inline-block;
         float:right;
         line-height:1.5em;
@@ -173,7 +173,7 @@ ul.link-list {
       }
     }
     a:hover {
-      background:<%= Feathers::Config.light_2 %>;
+      background:<%= Feathers::Config.light %>;
     }
   }
   li:last-child {

data/app/assets/stylesheets/other-widgets.css.scss.erb

@@ -9,39 +9,39 @@
 
 .avatar.framed {
   background:<%= Feathers::Config.white %>;
-  border:1px solid <%= Feathers::Config.medium_1 %>;
+  border:1px solid <%= Feathers::Config.medium %>;
   padding:3px;
 }
 
 .pagination {
   overflow:hidden;
   a {
-    border:1px solid <%= Feathers::Config.light_2 %>;
+    border:1px solid <%= Feathers::Config.light %>;
     display:inline-block;
     float:left;
     margin-right:0.5em;
     padding:0.25em 0.5em;
   }
   a.current {
-    background:#f6f6f6;
-    color:<%= Feathers::Config.dark_1 %>;
+  border:1px solid <%= Feathers::Config.light %>;
+    color:<%= Feathers::Config.dark %>;
   }
   a.disabled {
     border:none;
-    color:<%= Feathers::Config.medium_1 %>;
+    color:<%= Feathers::Config.medium %>;
   }
   a:hover {
-    background:<%= Feathers::Config.dark_2 %>;
+    background:<%= Feathers::Config.dark %>;
     color:<%= Feathers::Config.white %>;
   }
   a.disabled:hover {
-    background:<%= Feathers::Config.medium_1 %>;
+    background:<%= Feathers::Config.medium %>;
     color:<%= Feathers::Config.white %>;
   }
 }
 
 .progress-bar {
-  background:<%= Feathers::Config.light_1 %>;
+  background:<%= Feathers::Config.light %>;
   height:16px;
   margin:1em 0;
   @include border-radius(1em);
@@ -58,7 +58,7 @@
 }
 
 span.label {
-  background:<%= Feathers::Config.default_element %>;
+  background:<%= Feathers::Config.dark %>;
   color:<%= Feathers::Config.white %>;
   font-size:80%;
   font-weight:bold;
@@ -83,18 +83,20 @@ div.note {
 }
 
 .tag-line {
-  color:<%= Feathers::Config.dark_1 %>;
+  color:<%= Feathers::Config.dark %>;
   font-size:125%;
 }
 
 .title-bar {
-  border:1px solid <%= Feathers::Config.medium_2 %>;
+  border:1px solid <%= Feathers::Config.medium %>;
+  font-family: -apple-system-font, Helvetica, Arial, sans-serif;
   padding:0.5em;
   text-align:center;
-  @include background-gradient(lighten(<%= Feathers::Config.default_element %>, 10%), <%= Feathers::Config.default_element %>);
+  @include background-gradient(lighten(<%= Feathers::Config.light %>, 10%), <%= Feathers::Config.light %>);
   h1 {
-    color:<%= Feathers::Config.dark_1 %>;
+    color:<%= Feathers::Config.dark %>;
     font-size:180%;
+    font-weight:normal;
     margin:0;
     @include text-shadow(1px 1px 1px <%= Feathers::Config.white %>);
   }

data/app/assets/stylesheets/tables.css.scss.erb

@@ -3,28 +3,33 @@
 table.data-table {
   thead {
     th {
-      border-bottom:1px solid <%= Feathers::Config.medium_1 %>;
-      border-right:1px solid <%= Feathers::Config.medium_1 %>;
-      border-top:1px solid <%= Feathers::Config.medium_1 %>;
-      color:<%= Feathers::Config.dark_2 %>;
+      border-bottom:1px solid <%= Feathers::Config.medium %>;
+      border-right:1px solid <%= Feathers::Config.medium %>;
+      border-top:1px solid <%= Feathers::Config.medium %>;
+      color:<%= Feathers::Config.dark %>;
       font-weight:bold;
       text-align:left;
-      @include background-gradient(lighten(<%= Feathers::Config.default_element %>, 10%), <%= Feathers::Config.default_element %>);
+      padding:0.25em;
+      @include background-gradient(lighten(<%= Feathers::Config.light %>, 10%), <%= Feathers::Config.light %>);
     }
     th:first-child {
-      border-left:1px solid <%= Feathers::Config.medium_1 %>;
+      border-left:1px solid <%= Feathers::Config.medium %>;
     }
   }
   tbody {
     td {
-      border-bottom:1px solid <%= Feathers::Config.light_2 %>;
+      border-bottom:1px solid <%= Feathers::Config.light %>;
+      padding:0.25em;
     }
     tr:hover {
       background:<%= Feathers::Config.highlight %>;
     }
   }
   tfoot {
-    background:<%= Feathers::Config.light_2 %>;
-    color:<%= Feathers::Config.dark_1 %>;
+    background:<%= Feathers::Config.light %>;
+    color:<%= Feathers::Config.dark %>;
+    th, td {
+      padding:0.25em;
+    }
   }
 }

data/lib/feathers/config.rb

@@ -2,18 +2,14 @@ module Feathers
   class Config
     class << self
 
-      attr_reader :light_1,
-                  :light_2,
-                  :medium_1,
-                  :medium_2,
-                  :dark_1,
-                  :dark_2,
+      attr_reader :light,
+                  :medium,
+                  :dark,
                   :highlight,
                   :notice_background,
                   :warning_background,
                   :error_background,
                   :note_background,
-                  :default_element,
                   :danger_element,
                   :info_element,
                   :success_element,
@@ -21,19 +17,15 @@ module Feathers
                   :black,
                   :white
 
-      attr_writer :light_1,
-                  :light_2,
-                  :medium_1,
-                  :medium_2,
-                  :dark_1,
-                  :dark_2,
+      attr_writer :light,
+                  :medium,
+                  :dark,
                   :highlight,
                   :notice_background,
                   :warning_border,
                   :warning_background,
                   :error_background,
                   :note_background,
-                  :default_element,
                   :danger_element,
                   :info_element,
                   :success_element,
@@ -42,18 +34,14 @@ module Feathers
                   :white
 
       def set_defaults
-        @light_1 = "#efefef"
-        @light_2 = "#ddd"
-        @medium_1 = "#ccc"
-        @medium_2 = "#aaa"
-        @dark_1 = "#777"
-        @dark_2 = "#444"
+        @light = "#efefef"
+        @medium = "#ccc"
+        @dark = "#777"
         @highlight = "#ffe"
         @notice_background = "#ecffd6"
         @warning_background = "#fbefb9"
         @error_background = "#ffebeb"
         @note_background = "#d8f2ff"
-        @default_element = "#ccc"
         @danger_element = "#cf0404"
         @info_element = "#448ccb"
         @success_element = "#7ba900"

data/lib/feathers/version.rb

@@ -1,3 +1,3 @@
 module Feathers
-  VERSION = "0.1.4"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: feathers
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.2.0
 platform: ruby
 authors:
 - Kelli Shaver
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-06-19 00:00:00.000000000 Z
+date: 2014-08-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails