underoos 1.0.0

data/app/assets/stylesheets/components/_wells.sass

@@ -0,0 +1,16 @@
+
+.well
+  +box-sizing(border-box)
+  border: 1px solid $component_border
+  border-radius: $radii
+  background-color: transparent
+  margin-bottom: 1.25em
+  padding: 1.25em
+  &.lite
+    background-color: $off_white
+  &.dark
+    background-color: $off_grey
+  &.primary
+    background-color: $primary
+    border-color: darken($primary, 30%)
+

data/app/assets/stylesheets/layouts/_containers.sass

@@ -0,0 +1,15 @@
+
+.container
+  +box-sizing(border-box)
+  +clearfixer
+  max-width: $base_width * 1px
+  margin-left: auto
+  margin-right: auto
+  &.outer
+    padding-left: 1%
+    padding-right: 1%
+  &.fluid, &.fixed
+    max-width: none
+  &.fixed
+    width: $base_width * 1px
+

data/app/assets/stylesheets/layouts/_print.sass

@@ -0,0 +1,48 @@
+
+// A very basic print stylesheet based off http://html5boilerplate.com/
+@media print
+  *
+    background: transparent !important
+    box-shadow: none !important
+    color: black !important
+    text-shadow: none !important
+    filter: none !important
+    -ms-filter: none !important
+
+  a, a:visited
+    text-decoration: underline
+
+  a[href]:after
+    content: " (" attr(href) ")"
+
+  abbr[title]:after
+    content: " (" attr(title) ")"
+
+  .ir a:after,
+  a[href^="javascript:"]:after,
+  a[href^="#"]:after
+    content: ""
+
+  pre, blockquote
+    border: 1px solid #999
+    page-break-inside: avoid
+
+  thead
+    display: table-header-group
+
+  tr, img
+    page-break-inside: avoid
+
+  img
+    max-width: 100% !important
+
+  @page
+    margin: 0.5cm
+
+  p, h2, h3
+    orphans: 3
+    widows: 3
+
+  h2, h3
+    page-break-after: avoid
+

data/app/assets/stylesheets/layouts/_queries.sass

@@ -0,0 +1,121 @@
+
+// Mixin the container sizes
+@mixin resize_containers($base_value)
+  .container
+    max-width: $base_value * 1px
+    &.fluid, &.fixed
+      max-width: none
+    &.fixed
+      width: $base_value * 1px
+
+// Large screens
+@media (min-width: 1200px)
+  +resize_containers(1200)
+
+// Default desktop and tablet portrait
+@media (min-width: 890px)
+  .nav-collapse.collapse
+    height: auto !important
+    overflow: visible !important
+
+// This is the point where your navigation needs to collapse
+@media (max-width: 889px)
+  .navbar.fixed
+    position: static
+  .navbar .nav-collapse
+    clear: left
+  .navbar .nav,
+  .navbar .nav > li
+    float: none
+
+  .navbar .dropdown-menu
+    +box-shadow(none)
+    background-color: transparent
+    border: none
+    border-radius: 0
+    position: static
+    top: auto
+    left: auto
+    display: block
+    float: none
+    margin: 0 0.5em
+    padding: 0
+    clip: auto
+    height: auto
+    width: auto
+    max-width: none
+    overflow: visible
+
+  .navbar .dropdown .dropdown-toggle,
+  .navbar .dropdown .dropdown-toggle:hover,
+  .navbar .dropdown .dropdown-toggle:active,
+  .navbar .nav .open > .dropdown-toggle,
+  .navbar .nav .active > .dropdown-toggle,
+  .navbar .nav .open.active > .dropdown-toggle
+    +box-shadow(none)
+    background-color: transparent
+    color: $component_normal
+    padding-bottom: 0.25em
+    text-shadow: none
+    cursor: default
+
+  .navbar .dropdown .caret
+    display: none
+
+  .btn-navbar
+    display: block
+
+  .nav-collapse
+    height: 0
+    overflow: hidden
+
+  .navbar .dropdown-menu .divider
+    display: none
+
+  .navbar form,
+  .navbar .pull-right
+    float: none
+
+// Portrait tablet and below
+@media (max-width: 768px)
+  +resize_containers(768)
+
+// Landscape mobile and below
+@media (max-width: 480px)
+  +resize_containers(480)
+
+  input[type="checkbox"],
+  input[type="radio"]
+    border: 1px solid #ccc
+
+  .form-horizontal,
+  .default-manage-form
+    li > label
+      float: none
+      padding-top: 0
+      text-align: left
+      width: auto
+
+    .boolean > label,
+    .choice > label,
+    .hint
+      padding-left: 0
+
+    .form-actions,
+    form .buttons
+      padding-left: 0.75em
+      padding-right: 0.75em
+
+    .modal
+      position: absolute
+      margin: 0
+      top: 10px
+      left: 10px
+      right: 10px
+      width: auto
+
+
+// Portrait mobile
+@media (max-width: 320px)
+  +resize_containers(320)
+

data/app/assets/stylesheets/layouts/_upgrades.sass

@@ -0,0 +1,64 @@
+
+// The main container for the upgrade notification
+#upgrade_notifications
+  display: none
+  color: $white
+  font-weight: bold
+  position: absolute
+  top: 10px
+  left: 10px
+  z-index: 99999
+
+// Settings for the icon
+#upgrade_notifications .upgrade-icon
+  background-color: $danger
+  border: 1px solid darken($danger, 10%)
+  cursor: pointer
+  font-size: 1em
+  line-height: 1
+  text-align: center
+  width: 1.2em
+  height: 1.2em
+
+// Settings for block message
+#upgrade_notifications .upgrade-notification
+  background-color: $danger
+  border: 1px solid darken($danger, 10%)
+  cursor: default
+  font-size: 0.85em
+  text-align: left
+  display: none
+  margin-top: 0.2em
+  padding: 0.75em
+  position: relative
+  top: 0
+  left: 0
+  width: 200px
+
+// Make the links readable
+#upgrade_notifications .upgrade-notification a
+  color: $white
+  text-decoration: underline
+
+// Show the message on hover
+#upgrade_notifications .upgrade-icon:hover .upgrade-notification
+  display: block
+
+// Default all message containers to be hidden
+#upgrade_notifications .upgrade-container
+  display: none
+
+// Space out multiple containers
+#upgrade_notifications .upgrade-container + .upgrade-container
+  margin-top: 1em
+
+// Show the upgrade notifications if a condition is met
+html.no-js #upgrade_notifications,
+html.lt-ie8 #upgrade_notifications
+  display: block
+
+// Show the correct notification container
+html.no-js #upgrade_notifications #no_js,
+html.lt-ie8 #upgrade_notifications #lt_ie8
+  display: block
+

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

@@ -0,0 +1,40 @@
+
+// Mixins for creating arrows on pseudo elements
+
+@mixin _arrow
+  position: absolute
+  width: 0
+  height: 0
+
+// Set `top` and `left` positions from the caller
+@mixin arrow_north($color:#000, $size:5px)
+  +_arrow
+  border-left: $size solid transparent
+  border-right: $size solid transparent
+  border-bottom: $size solid $color
+  margin-left: -$size
+
+// Set `bottom` and `left` positions from the caller
+@mixin arrow_south($color:#000, $size:5px)
+  +_arrow
+  border-left: $size solid transparent
+  border-right: $size solid transparent
+  border-top: $size solid $color
+  margin-left: -$size
+
+// Set `top` and `right` positions from the caller
+@mixin arrow_east($color:#000, $size:5px)
+  +_arrow
+  border-top: $size solid transparent
+  border-bottom: $size solid transparent
+  border-left: $size solid $color
+  margin-top: -$size
+
+// Set `top` and `left` positions from the caller
+@mixin arrow_west($color:#000, $size:5px)
+  +_arrow
+  border-top: $size solid transparent
+  border-bottom: $size solid transparent
+  border-right: $size solid $color
+  margin-top: -$size
+

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

@@ -0,0 +1,15 @@
+
+// The [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/)
+@mixin clearfixer
+  *zoom: 1
+  &:before, &:after
+    content: ""
+    display: table
+  &:after
+    clear: both
+
+// The standard `clearfix` found in Compass
+@mixin clearfix
+  overflow: hidden
+  *zoom: 1
+

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

@@ -0,0 +1,6 @@
+
+// Fills a background color and darkens the border based off a percentage
+@mixin background-darken-border($color, $percentage:20%)
+  background-color: $color
+  border: 1px solid darken($color, $percentage)
+

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

@@ -0,0 +1,19 @@
+
+// The base `column` settings, should be extended by all columns
+@mixin base-column
+  +box-sizing(border-box)
+  display: block
+  float: left
+
+// An alternate base `column` which floats elements to the right
+@mixin base-column-right
+  +box-sizing(border-box)
+  display: block
+  float: right
+
+// The base `row` settings, should be extended by all rows
+@mixin base-row
+  +box-sizing(border-box)
+  +clearfixer
+  display: block
+

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

@@ -0,0 +1,25 @@
+
+// Converts target `px` value to `em` in context constraints of the base font size
+@function to_em($target_px, $context:$base_font_size)
+  @return ($target_px / $context) * 1em
+
+// Converts target `px` value to `rem` in context constraints of the user's base font size
+@function to_rem($target_px, $context:$context_px)
+  @return ($target_px / $context) * 1rem
+
+// Converts target `px` value to `percentage` in context constraints of the container's width
+@function to_percent($target_px, $context:$base_width)
+  @return percentage($target_px / $context)
+
+// Returns the vertical rhythm in pixels calculated from the `$base_vertical` setting
+@function vertical_pixel($target_px)
+  @return ($base_vertical / $target_px) * 1px
+
+// Returns the vertical rhythm in em calculated from the `$base_vertical` setting
+@function vertical_em($target_px)
+  @return to_em(($base_vertical / $target_px), $base_font_size)
+
+// Returns the vertical rhythm in percent calculated from the `$base_vertical` setting
+@function vertical_percent($target_px)
+  @return to_percent(($base_vertical / $target_px), $base_font_size)
+

data/app/assets/stylesheets/mixins/_font-size.sass

@@ -0,0 +1,6 @@
+
+// Use `rems` to insert a font size
+@mixin font-size($target_px, $context:$context_px)
+  font-size: $target_px * 1px
+  font-size: to_rem($target_px, $context)
+

data/app/assets/stylesheets/mixins/_image-tools.sass

@@ -0,0 +1,13 @@
+
+// Image interpolation from http://stitchcss.com/
+@mixin sharpen-image
+  image-rendering: -moz-crisp-edges
+  -ms-interpolation-mode: nearest-neighbor
+
+@mixin high-quality-image
+  image-rendering: optimizeQuality
+  -ms-interpolation-mode: bicubic
+
+@mixin low-quality-image
+  image-rendering: optimizeSpeed
+

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

@@ -0,0 +1,9 @@
+
+// Image replacement
+@mixin ir
+  background-color: transparent
+  border: 0
+  color: transparent
+  font: 0/0 a
+  text-shadow: none
+

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

@@ -0,0 +1,14 @@
+
+// underoos mixins
+@import arrows
+@import clearfixins
+@import coloring
+@import columns
+@import conversions
+@import font-size
+@import image-tools
+@import ir
+@import tab-focus
+@import timing-equations
+@import visibility
+

data/app/assets/stylesheets/mixins/_tab-focus.sass

@@ -0,0 +1,7 @@
+
+// Sets normal focus behavior
+@mixin tab-focus
+  outline: thin dotted
+  outline: 5px auto -webkit-focus-ring-color
+  outline-offset: -2px
+