underoos 1.0.0

data/app/assets/stylesheets/mixins/_timing-equations.sass

@@ -0,0 +1,29 @@
+
+// CSS cubic-bezier timing functions courtesy of [jaukia](http://github.com/jaukia/easie)
+$ease-in-quad:      cubic-bezier(0.55, 0.085, 0.68, 0.53)
+$ease-in-cubic:     cubic-bezier(0.55, 0.055, 0.675, 0.19)
+$ease-in-quart:     cubic-bezier(0.895, 0.03, 0.685, 0.22)
+$ease-in-quint:     cubic-bezier(0.755, 0.05, 0.855, 0.06)
+$ease-in-sine:      cubic-bezier(0.47, 0, 0.745, 0.715)
+$ease-in-expo:      cubic-bezier(0.95, 0.05, 0.795, 0.035)
+$ease-in-circ:      cubic-bezier(0.6, 0.04, 0.98, 0.335)
+$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045)
+
+$ease-out-quad:     cubic-bezier(0.25, 0.46, 0.45, 0.94)
+$ease-out-cubic:    cubic-bezier(0.215, 0.61, 0.355, 1)
+$ease-out-quart:    cubic-bezier(0.165, 0.84, 0.44, 1)
+$ease-out-quint:    cubic-bezier(0.23, 1, 0.32, 1)
+$ease-out-sine:     cubic-bezier(0.39, 0.575, 0.565, 1)
+$ease-out-expo:     cubic-bezier(0.19, 1, 0.22, 1)
+$ease-out-circ:     cubic-bezier(0.075, 0.82, 0.165, 1)
+$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275)
+
+$ease-in-out-quad:  cubic-bezier(0.455, 0.03, 0.515, 0.955)
+$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1)
+$ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1)
+$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1)
+$ease-in-out-sine:  cubic-bezier(0.445, 0.05, 0.55, 0.95)
+$ease-in-out-expo:  cubic-bezier(1, 0, 0, 1)
+$ease-in-out-circ:  cubic-bezier(0.785, 0.135, 0.15, 0.86)
+$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550)
+

data/app/assets/stylesheets/mixins/_visibility.sass

@@ -0,0 +1,43 @@
+
+// Totally hidden from screen readers and browsers
+@mixin hidden
+  display: none !important
+  visibility: hidden
+
+// Reverse the effects of hidden
+@mixin shown
+  display: block
+  visibility: visible
+
+// Only visually hidden, still available to screen readers
+@mixin visuallyhidden
+  border: 0
+  clip: rect(0 0 0 0)
+  position: absolute
+  overflow: hidden
+  margin: -1px
+  padding: 0
+  width: 1px
+  height: 1px
+  &.focusable:active,
+  &.focusable:focus
+    clip: auto
+    position: static
+    overflow: visible
+    margin: 0
+    width: auto
+    height: auto
+
+// Reverse the settings applied by `.visuallyhidden`
+@mixin visuallyshown
+  clip: auto
+  position: static
+  overflow: visible
+  margin: 0
+  width: auto
+  height: auto
+
+// Hide visually and from screenreaders, but maintain layout
+@mixin invisible
+  visibility: hidden
+

data/app/assets/stylesheets/polyfills/_box-shadow.sass

@@ -0,0 +1,7 @@
+
+@mixin box-shadow($shadow-1:none, $shadow-2:false, $shadow-3:false, $shadow-4:false, $shadow-5:false, $shadow-6:false, $shadow-7:false, $shadow-8:false, $shadow-9:false)
+  $full: combine($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9)
+  -webkit-box-shadow: $full
+  -moz-box-shadow: $full
+  box-shadow: $full
+

data/app/assets/stylesheets/polyfills/_box-sizing.sass

@@ -0,0 +1,8 @@
+
+// Box sizing content-box | border-box | inherit, matches compass and bourbon
+@mixin box-sizing ($type:border-box)
+  $box: unquote($type)
+  -webkit-box-sizing: $box
+  -moz-box-sizing: $box
+  box-sizing: $box
+

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

@@ -0,0 +1,22 @@
+
+// A function used to combine and normalize multiple parameters for a polyfill (supports up to 9 values)
+@function combine($value-1, $value-2:false, $value-3:false, $value-4:false, $value-5:false, $value-6:false, $value-7:false, $value-8:false, $value-9:false)
+  @if $value-2 == false and $value-3 == false and $value-4 == false and $value-5 == false and $value-6 == false and $value-7 == false and $value-8 == false and $value-9 == false
+    @return $value-1
+  @else if $value-2 != false and $value-3 == false and $value-4 == false and $value-5 == false and $value-6 == false and $value-7 == false and $value-8 == false and $value-9 == false
+    @return $value-1, $value-2
+  @else if $value-2 != false and $value-3 != false and $value-4 == false and $value-5 == false and $value-6 == false and $value-7 == false and $value-8 == false and $value-9 == false
+    @return $value-1, $value-2, $value-3
+  @else if $value-2 != false and $value-3 != false and $value-4 != false and $value-5 == false and $value-6 == false and $value-7 == false and $value-8 == false and $value-9 == false
+    @return $value-1, $value-2, $value-3, $value-4
+  @else if $value-2 != false and $value-3 != false and $value-4 != false and $value-5 != false and $value-6 == false and $value-7 == false and $value-8 == false and $value-9 == false
+    @return $value-1, $value-2, $value-3, $value-4, $value-5
+  @else if $value-2 != false and $value-3 != false and $value-4 != false and $value-5 != false and $value-6 != false and $value-7 == false and $value-8 == false and $value-9 == false
+    @return $value-1, $value-2, $value-3, $value-4, $value-5, $value-6
+  @else if $value-2 != false and $value-3 != false and $value-4 != false and $value-5 != false and $value-6 != false and $value-7 != false and $value-8 == false and $value-9 == false
+    @return $value-1, $value-2, $value-3, $value-4, $value-5, $value-6, $value-7
+  @else if $value-2 != false and $value-3 != false and $value-4 != false and $value-5 != false and $value-6 != false and $value-7 != false and $value-8 != false and $value-9 == false
+    @return $value-1, $value-2, $value-3, $value-4, $value-5, $value-6, $value-7, $value-8
+
+  @return $value-1, $value-2, $value-3, $value-4, $value-5, $value-6, $value-7, $value-8, $value-9
+

data/app/assets/stylesheets/polyfills/_inline-block.sass

@@ -0,0 +1,8 @@
+
+@mixin inline-block
+  display: inline-block
+  vertical-align: middle
+  zoom: 1
+  *display: inline
+  *vertical-align: auto
+

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

@@ -0,0 +1,6 @@
+
+// Opacity polyfill matches compass and bourbon
+@mixin opacity($alpha:1)
+  filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($alpha * 100)})")
+  opacity: $alpha
+

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

@@ -0,0 +1,10 @@
+
+// Import the polyfills for underoos if not using either Compass or Bourbon
+@import functions
+@import box-shadow
+@import box-sizing
+@import inline-block
+@import opacity
+@import transition
+@import user-select
+

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

@@ -0,0 +1,9 @@
+
+@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
+  -moz-transition: $full
+  -ms-transition: $full
+  -o-transition: $full
+  transition: $full
+

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

@@ -0,0 +1,8 @@
+
+@mixin user-select($type:none)
+  -webkit-user-select: $type
+  -moz-user-select: $type
+  -ms-user-select: $type
+  -o-user-select: $type
+  user-select: $type
+

data/app/assets/stylesheets/styleguide.sass

@@ -0,0 +1,199 @@
+
+// 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
+
+// Transition demo
+
+@mixin _tranny-settings($prop, $timing)
+  -webkit-transition-property: $prop
+  -moz-transition-property: $prop
+  -ms-transition-property: $prop
+  -o-transition-property: $prop
+  transition-property: $prop
+  -webkit-transition-duration: $timing
+  -moz-transition-duration: $timing
+  -ms-transition-duration: $timing
+  -o-transition-duration: $timing
+  transition-duration: $timing
+
+@mixin _tranny-timing($type)
+  -webkit-transition-timing-function: $type
+  -moz-transition-timing-function: $type
+  -ms-transition-timing-function: $type
+  -o-transition-timing-function: $type
+  transition-timing-function: $type
+
+.sg-tranny-demo
+  cursor: pointer
+  & td
+    padding: 0.2em
+
+.sg-tranny-demo:hover .sg-swatch
+  $_pos: 500px
+  -webkit-transform: translateX($_pos)
+  -moz-transform: translateX($_pos)
+  -ms-transform: translateX($_pos)
+  -o-transform: translateX($_pos)
+  transform: translateX($_pos)
+
+.sg-tranny-demo li
+  margin-bottom: 0.25em
+
+.sg-tranny-demo .prop
+  width: 20%
+
+.sg-tranny-demo .sg-swatch
+  +_tranny-settings(all, 1.5s)
+  background-color: $primary
+  &.ease-in-quad
+    +_tranny-timing($ease-in-quad)
+  &.ease-in-cubic
+    +_tranny-timing($ease-in-cubic)
+  &.ease-in-quart
+    +_tranny-timing($ease-in-quart)
+  &.ease-in-quint
+    +_tranny-timing($ease-in-quint)
+  &.ease-in-sine
+    +_tranny-timing($ease-in-sine)
+  &.ease-in-expo
+    +_tranny-timing($ease-in-expo)
+  &.ease-in-circ
+    +_tranny-timing($ease-in-circ)
+  &.ease-in-back
+    +_tranny-timing($ease-in-back)
+  &.ease-out-quad
+    +_tranny-timing($ease-out-quad)
+  &.ease-out-cubic
+    +_tranny-timing($ease-out-cubic)
+  &.ease-out-quart
+    +_tranny-timing($ease-out-quart)
+  &.ease-out-quint
+    +_tranny-timing($ease-out-quint)
+  &.ease-out-sine
+    +_tranny-timing($ease-out-sine)
+  &.ease-out-expo
+    +_tranny-timing($ease-out-expo)
+  &.ease-out-circ
+    +_tranny-timing($ease-out-circ)
+  &.ease-out-back
+    +_tranny-timing($ease-out-back)
+  &.ease-in-out-quad
+    +_tranny-timing($ease-in-out-quad)
+  &.ease-in-out-cubic
+    +_tranny-timing($ease-in-out-cubic)
+  &.ease-in-out-quart
+    +_tranny-timing($ease-in-out-quart)
+  &.ease-in-out-quint
+    +_tranny-timing($ease-in-out-quint)
+  &.ease-in-out-sine
+    +_tranny-timing($ease-in-out-sine)
+  &.ease-in-out-expo
+    +_tranny-timing($ease-in-out-expo)
+  &.ease-in-out-circ
+    +_tranny-timing($ease-in-out-circ)
+  &.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/themes/_default.sass

@@ -0,0 +1,119 @@
+
+// ## 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
+
+
+// ## Colors
+
+// 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
+
+$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)
+