underoos 1.0.0 → 1.1.0

data/app/assets/stylesheets/polyfills/_transition.sass

@@ -1,4 +1,14 @@
 
+//~
+// Adds vendor prefixes for transitions (supports up to 9 transition parameters)
+//
+// Arguments:
+// - `$transition-n` The transition values to apply.
+//
+// Examples:
+//    .element
+//      +transition(height $speed $ease-in-out-quart, color $speed)
+
 @mixin transition($transition-1:all 0.25s, $transition-2:false, $transition-3:false, $transition-4:false, $transition-5:false, $transition-6:false, $transition-7:false, $transition-8:false, $transition-9:false)
   $full: combine($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9)
   -webkit-transition: $full

data/app/assets/stylesheets/polyfills/_user-select.sass

@@ -1,4 +1,14 @@
 
+//~
+// Define whether an element is selectable (only controls the appearance).
+//
+// Arguments:
+// - `$type:none` Options: `none | auto | text`
+//
+// Examples:
+//    .cant-touch-this
+//      +user-select(none)
+
 @mixin user-select($type:none)
   -webkit-user-select: $type
   -moz-user-select: $type

data/app/assets/stylesheets/settings/_config.sass

@@ -0,0 +1,26 @@
+
+//~
+// Configure settings for Underoos and Compass for css output. Disabling some of
+// these features will result in smaller code, but less overall support. See the
+// [Compass reference](http://compass-style.org/reference/compass/support/) for other
+// available settings.
+//
+// Property                                 | Value   | Usage
+// ---------------------------------------- | ------- | -------------------
+// `$legacy-support-for-ie`                 | `true`  | Toggles ie7 hacks (supported by Compass and Underoos polyfills)
+// `$legacy-support-for-ie8`                | `true`  | Toggles ie8 hacks (requires Compass)
+// `$support-for-original-webkit-gradients` | `true`  | Toggles support for the the original webkit style gradients (requires Compass)
+// `$experimental-support-for-mozilla`      | `true`  | Toggles support for the `-moz` prefix (requires Compass)
+// `$experimental-support-for-opera`        | `true`  | Toggles support for the `-o` prefix (requires Compass)
+// `$experimental-support-for-microsoft`    | `true`  | Toggles support for the `-ms` prefix (requires Compass)
+//
+// Notes:
+// - **Pro Tip!** When compiling for iOS and Android, disable `ie` and `experimental-support` for browsers besides `webkit`
+
+$legacy-support-for-ie: true !default
+$legacy-support-for-ie8: $legacy-support-for-ie
+$support-for-original-webkit-gradients: true
+$experimental-support-for-mozilla: true
+$experimental-support-for-opera: true
+$experimental-support-for-microsoft: true
+

data/app/assets/stylesheets/settings/_settings.sass

@@ -0,0 +1,7 @@
+
+//~
+// Contains the main configuration settings for compiling to css and color
+// palettes and themes found in the application.
+@import config
+@import theme
+

data/app/assets/stylesheets/settings/_theme.sass

@@ -0,0 +1,189 @@
+
+//~
+// The theme file contains grid dimensions, fonts, colorways, shadows,
+// z-indexes, sprite positions and various other global reference variables.
+// Themes are the basis of the design language used throughout the application.
+//
+// ##### Greyscale palette
+// Swatch                                                                           | Variable                | Hex
+// -------------------------------------------------------------------------------- | ----------------------- | --------
+// <span class="sherpa-swatch" style="background-color:#000;"></span>               | `$black`                | `#000`
+// <span class="sherpa-swatch" style="background-color:#111;"></span>               | `$grey1`                | `#111`
+// <span class="sherpa-swatch" style="background-color:#222;"></span>               | `$grey2`                | `#222`
+// <span class="sherpa-swatch" style="background-color:#333;"></span>               | `$grey3`                | `#333`
+// <span class="sherpa-swatch" style="background-color:#444;"></span>               | `$grey4`                | `#444`
+// <span class="sherpa-swatch" style="background-color:#555;"></span>               | `$grey5`                | `#555`
+// <span class="sherpa-swatch" style="background-color:#666;"></span>               | `$grey6`                | `#666`
+// <span class="sherpa-swatch" style="background-color:#777;"></span>               | `$grey7`                | `#777`
+// <span class="sherpa-swatch" style="background-color:#888;"></span>               | `$grey8`                | `#888`
+// <span class="sherpa-swatch" style="background-color:#999;"></span>               | `$grey9`                | `#999`
+// <span class="sherpa-swatch" style="background-color:#aaa;"></span>               | `$greyA`                | `#aaa`
+// <span class="sherpa-swatch" style="background-color:#bbb;"></span>               | `$greyB`                | `#bbb`
+// <span class="sherpa-swatch" style="background-color:#ccc;"></span>               | `$greyC`                | `#ccc`
+// <span class="sherpa-swatch" style="background-color:#ddd;"></span>               | `$greyD`                | `#ddd`
+// <span class="sherpa-swatch" style="background-color:#eee;"></span>               | `$greyE`                | `#eee`
+// <span class="sherpa-swatch" style="background-color:#fff;"></span>               | `$white`                | `#fff`
+// <span class="sherpa-swatch" style="background-color:#fafafa;"></span>            | `$off_white`            | `#fafafa`
+// <span class="sherpa-swatch" style="background-color:#eaeaea;"></span>            | `$off_grey`             | `#eaeaea`
+//
+// ##### mc roy g biv palette
+// Swatch                                                                           | Variable                | Hex
+// -------------------------------------------------------------------------------- | ----------------------- | --------
+// <span class="sherpa-swatch" style="background-color:#ff00ff;"></span>            | `$magenta`              | `#ff00ff`
+// <span class="sherpa-swatch" style="background-color:#00ffff;"></span>            | `$cyan`                 | `#00ffff`
+// <span class="sherpa-swatch" style="background-color:#b22222;"></span>            | `$red`                  | `#b22222`
+// <span class="sherpa-swatch" style="background-color:#f26522;"></span>            | `$orange`               | `#f26522`
+// <span class="sherpa-swatch" style="background-color:#ffc40d;"></span>            | `$yellow`               | `#ffc40d`
+// <span class="sherpa-swatch" style="background-color:#46a546;"></span>            | `$green`                | `#46a546`
+// <span class="sherpa-swatch" style="background-color:#268bd2;"></span>            | `$blue`                 | `#268bd2`
+// <span class="sherpa-swatch" style="background-color:#4b0082;"></span>            | `$indigo`               | `#4b0082`
+// <span class="sherpa-swatch" style="background-color:#ee82ee;"></span>            | `$violet`               | `#ee82ee`
+//
+// ##### Status palette
+// Swatch                                                                           | Variable                | Hex
+// -------------------------------------------------------------------------------- | ----------------------- | --------
+// <span class="sherpa-swatch" style="background-color:#f5f5f5;"></span>            | `$standard`             | `#f5f5f5`
+// <span class="sherpa-swatch" style="background-color:#999;"></span>               | `$info`                 | `$grey9`
+// <span class="sherpa-swatch" style="background-color:#268bd2;"></span>            | `$important`            | `$blue`
+// <span class="sherpa-swatch" style="background-color:#46a546;"></span>            | `$success`              | `$green`
+// <span class="sherpa-swatch" style="background-color:#ffc40d;"></span>            | `$warning`              | `$yellow`
+// <span class="sherpa-swatch" style="background-color:#b22222;"></span>            | `$error`                | `$red`
+// <span class="sherpa-swatch" style="background-color:#b22222;"></span>            | `$danger`               | `$red`
+//
+// ##### Miscellaneous swatches
+// Swatch                                                                           | Variable                | Hex
+// -------------------------------------------------------------------------------- | ----------------------- | --------
+// <span class="sherpa-swatch" style="background-color:#268bd2;"></span>            | `$primary`              | `$blue`
+// <span class="sherpa-swatch" style="background-color:#bbb;"></span>               | `$disabled_color`       | `$greyB`
+// <span class="sherpa-swatch" style="background-color:#eee;"></span>               | `$disabled_bg`          | `$greyE`
+// <span class="sherpa-swatch" style="background-color:#ddd;"></span>               | `$disabled_border`      | `$greyD`
+// <span class="sherpa-swatch" style="background-color:#52a8ec;"></span>            | `$focus_color`          | `#52a8ec`
+// <span class="sherpa-swatch" style="background-color:rgba(#52a8ec, 0.8);"></span> | `$focus_border`         | `rgba($focus_color, 0.8)`
+// <span class="sherpa-swatch" style="background-color:#666;"></span>               | `$component_normal`     | `$grey6`
+// <span class="sherpa-swatch" style="background-color:#fff;"></span>               | `$component_active`     | `$white`
+// <span class="sherpa-swatch" style="background-color:transparent;"></span>        | `$component_bg`         | `transparent`
+// <span class="sherpa-swatch" style="background-color:#eee;"></span>               | `$component_bg_hover`   | `$greyE`
+// <span class="sherpa-swatch" style="background-color:#268bd2;"></span>            | `$component_bg_active`  | `$primary`
+// <span class="sherpa-swatch" style="background-color:#ccc;"></span>               | `$component_border`     | `$greyC`
+// <span class="sherpa-swatch" style="background-color:#b3b3b3;"></span>            | `$component_border_alt` | `darken($component_border, 10%)`
+//
+// Notes:
+// - **Heads Up!** Not every setting is shown within the styleguide. Please refer to the actual file for more settings.
+
+// Base Sizing
+$context_px: 16
+$base_font_size: 14
+$base_width: 1000
+$base_line_height: 1.2
+$base_vertical: $base_font_size * $base_line_height
+
+// Fonts
+$sans_norm: "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif
+$serif_norm: "Georgia", "Times", "Times New Roman", serif
+$code_norm: "Bitstream Vera Sans Mono", "Menslo LG M", "Menlo", "Monaco", monospace
+
+
+// greyscale
+$black: #000
+$grey1: #111
+$grey2: #222
+$grey3: #333
+$grey4: #444
+$grey5: #555
+$grey6: #666
+$grey7: #777
+$grey8: #888
+$grey9: #999
+$greyA: #aaa
+$greyB: #bbb
+$greyC: #ccc
+$greyD: #ddd
+$greyE: #eee
+$white: #fff
+$off_white: #fafafa
+$off_grey: #eaeaea
+
+// mc roy g biv
+$magenta: #ff00ff
+$cyan: #00ffff
+$red: #b22222
+$orange: #f26522
+$yellow: #ffc40d
+$green: #46a546
+$blue: #268bd2
+$indigo: #4b0082
+$violet: #ee82ee
+
+// status
+$standard: #f5f5f5
+$info: $grey9
+$important: $blue
+$success: $green
+$warning: $yellow
+$error: $red
+$danger: $red
+
+// ci
+$primary: $blue
+
+// misc colors
+$disabled_color: $greyB
+$disabled_bg: $greyE
+$disabled_border: $greyD
+$focus_color: #52a8ec
+$focus_border: rgba($focus_color, 0.8)
+
+// component
+$component_normal: $grey6
+$component_active: $white
+$component_bg: transparent
+$component_bg_hover: $greyE
+$component_bg_active: $primary
+$component_border: $greyC
+$component_border_alt: darken($component_border, 10%)
+
+// Shadows
+$text_inset_dark: 0 -1px 0 rgba($black, 0.25)
+$text_inset_lite: 0 -1px 0 rgba($white, 0.75)
+$text_drop_dark: 0 1px 0 rgba($black, 0.25)
+$text_drop_lite: 0 1px 0 rgba($white, 0.75)
+
+$inset_dark: inset 0 1px 4px rgba($black, 0.3)
+$inset_lite: inset 0 1px 4px rgba($white, 0.7)
+$drop_dark: 0 1px 4px rgba($black, 0.3)
+$drop_lite: 0 1px 4px rgba($white, 0.7)
+
+$focus_inset: inset 0 1px 3px rgba($black, 0.1)
+$focus_glow: 0 0 8px rgba($focus_color, 0.6)
+$error_glow: 0 0 8px rgba($red, 0.6)
+
+// Misc
+$radii: 0.4em
+$speed: 0.25s
+
+// z-indexing
+$zindex_dropdown: 1000
+$zindex_tips: 1010
+$zindex_navbar: 1020
+$zindex_modal_backdrop: 1030
+$zindex_modal: 1040
+$zindex_flash_message: 1050
+
+// base.sass
+$body_bg: $white
+$body_color: $grey3
+$select_bg: $primary
+$select_color: $white
+$tap_highlight: $primary
+$link_normal: $primary
+$link_hover: darken($link_normal, 20%)
+
+// typography.sass
+$header_color: $grey3
+$hr_color: $grey6
+
+// forms.sass
+$placeholder: $greyC
+$horiz_offset: 100px
+$input_inset_shadow: inset 0 1px 1px rgba($black, 0.1)
+

data/app/assets/stylesheets/{styleguide.sass → underoos-docs.sass}

@@ -1,99 +1,22 @@
 
-// Import what's necessary
-@import themes/default
-@import mixins/clearfixins
 @import mixins/timing-equations
 
-// Nav Bar
-.sg-navbar .dropdown .caret
-  margin-left: 0.25em
-.sg-navbar .brand
-  float: right
-
-// Containers
-.sg-spy-landing
-  height: 2em
-
-.sg-section, .sg-subsection
-  +clearfixer
-
-.sg-section
-  border-bottom: 1px solid $hr_color
-  padding: 3em 0 1.875em
-
-.sg-subsection
-  margin: 1.75em 0 0
-
-.sg-threequarter, .sg-half, .sg-quarter,
-.sg-twothird, .sg-onethird
-  -webkit-box-sizing: border-box
-  -moz-box-sizing: border-box
-  box-sizing: border-box
-  display: block
-  float: left
-  margin-left: 2%
-  margin-right: 2%
-  &.pull
-    margin-left: 0
-  &.push
-    margin-right: 0
-.sg-threequarter
-  width: 71%
-  &.pull, &.push
-    width: 73%
-.sg-half
-  width: 46%
-  &.pull, &.push
-    width: 48%
-.sg-quarter
-  width: 21%
-  &.pull, &.push
-    width: 23%
-.sg-twothird
-  width: 63%
-  &.pull, &.push
-    width: 65%
-.sg-onethird
-  width: 29%
-  &.pull, &.push
-    width: 31%
-
-// Text items
-.sg-heading
-  color: $primary
-  text-shadow: $text_drop_lite
-  line-height: 1.4
-
-.sg-subheading
-  border-bottom: 1px solid $greyC
-  line-height: 1.4
-  margin-bottom: 1em
-  & span
-    color: $greyC
-    float: right
-    font-size: 0.5em
-    margin-top: 1.5em
-
-.sg-note, .sg-todo
-  font-weight: bold
-
-.sg-note
-  color: $grey6
-
-.sg-todo
-  color: lighten($magenta, 20%)
-  font-style: italic
-
-.sg-swatch
-  background-color: $magenta
-  border-radius: $radii
-  display: inline-block
-  vertical-align: middle
-  width: 30px
-  height: 20px
+// .pln, .pun, .opn, .clo => color: body_color
+pre.prettyprint
+  .com
+    color: #93a1a1
+  .lit
+    color: #195f91
+  .fun
+    color: #cb4b15
+  .kwd, .tag
+    color: #258ad2
+  .str, .atv
+    color: #859900
+  .atn, .type, .dec, .var
+    color: #d33682
 
 // Transition demo
-
 @mixin _tranny-settings($prop, $timing)
   -webkit-transition-property: $prop
   -moz-transition-property: $prop
@@ -113,12 +36,8 @@
   -o-transition-timing-function: $type
   transition-timing-function: $type
 
-.sg-tranny-demo
+#mixins-timing-equations table:hover .sherpa-swatch
   cursor: pointer
-  & td
-    padding: 0.2em
-
-.sg-tranny-demo:hover .sg-swatch
   $_pos: 500px
   -webkit-transform: translateX($_pos)
   -moz-transform: translateX($_pos)
@@ -126,15 +45,13 @@
   -o-transform: translateX($_pos)
   transform: translateX($_pos)
 
-.sg-tranny-demo li
-  margin-bottom: 0.25em
-
-.sg-tranny-demo .prop
-  width: 20%
+#mixins-timing-equations table tr td
+  padding: 0.2em
+  &:first-child
+    width: 20%
 
-.sg-tranny-demo .sg-swatch
+#mixins-timing-equations .sherpa-swatch
   +_tranny-settings(all, 1.5s)
-  background-color: $primary
   &.ease-in-quad
     +_tranny-timing($ease-in-quad)
   &.ease-in-cubic
@@ -184,16 +101,3 @@
   &.ease-in-out-back
     +_tranny-timing($ease-in-out-back)
 
-// Media Queries specific for the guide
-@media (max-width: 889px)
-  .sg-navbar .brand
-    float: left
-
-@media (max-width: 480px)
-  .sg-threequarter, .sg-half, .sg-quarter,
-  .sg-twothird, .sg-onethird
-    float: none
-    margin-left: 0
-    margin-right: 0
-    width: 98%
-

data/app/assets/stylesheets/underoos.sass

@@ -4,24 +4,13 @@
 // @import bourbon
 @import polyfills/polyfills
 
-// import all underoos mixins
+// import core underoos files
 @import mixins/mixins
+@import settings/settings
+@import base/base
 
-// configuration theme
-@import themes/default
-
-// base elements
-@import base/normalize
-@import base/scaffold
-@import base/helpers
-@import base/transitions
-@import base/button-btn-mixin
-@import base/typography
-@import base/elements
-@import base/tables
-@import base/forms
-
-// components
+// components (import only what's needed)
+// @import components/components
 @import components/carets
 @import components/close
 @import components/decals