underoos 1.0.0

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

@@ -0,0 +1,108 @@
+
+// Base notification used for @extends
+.base-notification
+  +background-darken-border($standard)
+  border-radius: $radii
+  position: relative
+  padding: 0.75em
+  margin: 1em 0
+  a
+    text-decoration: underline
+  header, footer, p
+    padding-right: 1.2em
+  header
+    margin-bottom: 0.5em
+  footer
+    margin-top: 1.25em
+    &.footer-right
+      text-align: right
+  .close
+    position: absolute
+    top: 7px
+    right: 10px
+
+// Main notification message
+.notification
+  @extend .base-notification
+  text-shadow: $text_drop_lite
+  &.info, &.notice
+    +background-darken-border(lighten($info, 20%))
+  &.important
+    +background-darken-border(lighten($important, 40%))
+    color: $important
+    .heading
+      color: $important
+  &.success
+    +background-darken-border(lighten($success, 40%))
+    color: $success
+    .heading
+      color: $success
+  &.warning
+    +background-darken-border(lighten($warning, 30%))
+    color: darken($warning, 15%)
+    .heading
+      color: darken($warning, 15%)
+  &.danger, &.error, &.alert
+    +background-darken-border(lighten($danger, 40%))
+    color: $danger
+    .heading
+      color: $danger
+  &.primary
+    +background-darken-border(lighten($primary, 40%))
+    color: $primary
+    .heading
+      color: $primary
+
+// Flash messages container
+.flash-messages,
+.flash-messages.top
+  position: fixed
+  top: 0
+  right: 0
+  left: 0
+  z-index: $zindex_flash_message
+
+.flash-messages.bottom
+  top: auto
+  bottom: 0
+
+.flash-messages.top-left,
+.flash-messages.top-center,
+.flash-messages.top-right
+  top: 1.5em
+
+.flash-messages.top-left,
+.flash-messages.top-center,
+.flash-messages.middle
+  right: auto
+
+.flash-messages.top-left,
+.flash-messages.top-right
+  width: 25%
+
+.flash-messages.top-left
+  left: 1.5em
+
+.flash-messages.top-center,
+.flash-messages.middle
+  left: 25%
+  width: 50%
+
+.flash-messages.middle
+  top: 45%
+
+.flash-messages.top-right
+  left: auto
+  right: 1.5em
+
+// Override some of the settings for full screen messages
+.flash-messages .notification,
+.flash-messages .pop-notification
+  margin: 0
+
+.flash-messages.top .notification,
+.flash-messages.top .pop-notification,
+.flash-messages.bottom .notification,
+.flash-messages.bottom .pop-notification
+  border-radius: 0
+

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

@@ -0,0 +1,34 @@
+
+.paddles
+  +clearfixer
+  list-style: none
+
+.paddles li
+  display: inline
+
+.paddles a
+  +inline-block
+  background-color: $body_bg
+  border: 1px solid $component_border
+  border-radius: 1em
+  padding: 0.4em .75em
+  &:hover
+    background-color: $component_bg_hover
+  &:active
+    +box-shadow($inset_dark)
+
+.paddles .disabled > a,
+.paddles .disabled > a:hover
+  background: transparent
+  color: $disabled_color
+
+.paddles .next > a
+  float: right
+.paddles .prev > a
+  float: left
+
+.paddles-center
+  text-align: center
+.paddles-right
+  text-align: right
+

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

@@ -0,0 +1,41 @@
+
+.pagination
+  +clearfixer
+
+.pagination > li
+  display: inline
+  float: left
+
+.pagination > li > a
+  background-color: $component_bg
+  border: 1px solid $component_border
+  border-right-width: 0
+  padding: 0.5em 0.75em
+  &:hover
+    background-color: $component_bg_hover
+
+.pagination .active > a,
+.pagination .active > a:hover
+  background-color: $component_bg_active
+  color: $component_active
+
+.pagination .active > a,
+.pagination > li > a:active
+  +box-shadow($inset_dark)
+
+.pagination .disabled > a,
+.pagination .disabled > a:hover
+  background: transparent
+  color: $disabled_color
+
+.pagination > li:first-child > a
+  border-radius: $radii 0 0 $radii
+.pagination > li:last-child > a
+  border-radius: 0 $radii $radii 0
+  border-right-width: 1px
+
+.pagination-center
+  text-align: center
+.pagination-right
+  text-align: right
+

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

@@ -0,0 +1,64 @@
+
+// Default Pills
+.pills > li
+  float: left
+  margin-top: 0.3em
+
+.pills > li > a
+  border-radius: $radii
+  margin-right: 0.15em
+  padding: 0.4em 0.85em
+  text-shadow: $text_drop_lite
+  &:hover
+    background-color: $component_bg_hover
+
+.pills .active > a,
+.pills li > a:active
+  +box-shadow($inset_dark)
+
+.pills .active > a,
+.pills .active > a:hover
+  background-color: $component_bg_active
+  color: $component_active
+  text-shadow: $text_inset_dark
+
+// Stacked Pills
+.pills.stacked > li
+  float: none
+  margin-top: 0
+
+.pills.stacked > li > a
+  margin: 0.14em 0
+
+// Dropdown Pills
+.pills .dropdown-menu
+  margin-top: 1px
+
+.pills .active .dropdown-toggle .caret
+  border-top-color: $component_active
+
+.pills .open .dropdown-toggle,
+.pills .open.active > a:hover
+  background-color: darken($component_bg_hover, 35%)
+  border-color: $component_border
+  color: $component_active
+  text-shadow: none
+
+.pills .open .caret,
+.pills .open.active .caret,
+.pills .open a:hover .caret
+  border-top-color: $component_active
+
+.pills.stacked .dropdown-menu
+  border: none
+  margin-top: 0
+  max-width: none
+  width: 100%
+
+// Togglable pill panes
+.pill-content > .pill-pane
+  +visuallyhidden
+
+.pill-content > .active
+  +visuallyshown
+

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

@@ -0,0 +1,55 @@
+
+.popover
+  display: none
+  padding: 5px
+  position: absolute
+  top: 0
+  left: 0
+  min-width: 280px
+  z-index: $zindex_tips
+  &.top
+    margin-top: -5px
+  &.bottom
+    margin-top: 5px
+  &.left
+    margin-left: -5px
+  &.right
+    margin-left: 5px
+  &.top .arrow
+    +arrow_south(invert($body_bg))
+    bottom: 0
+    left: 50%
+  &.bottom .arrow
+    +arrow_north(invert($body_bg))
+    top: 0
+    left: 50%
+  &.left .arrow
+    +arrow_east(invert($body_bg))
+    top: 50%
+    right: 0
+  &.right .arrow
+    +arrow_west(invert($body_bg))
+    top: 50%
+    left: 0
+
+.popover-inner
+  +box-shadow($drop_dark)
+  background-color: $body_bg
+  border: 1px solid $component_border
+  border-radius: $radii
+  overflow: hidden
+
+.popover-title
+  +font-size(16)
+  background-clip: padding-box
+  background-color: $component_bg_hover
+  border-bottom: 1px solid $component_border_alt
+  border-radius: $radii $radii 0 0
+  padding: 0.625em 1em
+  line-height: 1
+
+.popover-content
+  background-clip: padding-box
+  border-radius: 0 0 $radii $radii
+  padding: 1em
+

data/app/assets/stylesheets/components/_progress-bars.sass

@@ -0,0 +1,29 @@
+
+.progress
+  +box-shadow($inset_dark)
+  background-color: $body_bg
+  border-radius: $radii
+  overflow: hidden
+  height: 1em
+
+.progress .bar
+  +box-sizing(border-box)
+  +box-shadow(inset 0 1px 4px rgba($black, 0.3))
+  +transition(width $speed)
+  background-color: $standard
+  width: 0%
+  height: 1em
+
+.progress.info .bar
+  background-color: $info
+.progress.important .bar
+  background-color: $important
+.progress.success .bar
+  background-color: $success
+.progress.warning .bar
+  background-color: $warning
+.progress.danger .bar
+  background-color: $danger
+.progress.primary .bar
+  background-color: $primary
+

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

@@ -0,0 +1,93 @@
+
+// Default Tabs
+.tabs
+  border-bottom: 1px solid $component_border_alt
+
+.tabs > li
+  float: left
+  margin-bottom: -1px
+
+.tabs > li > a
+  border: 1px solid transparent
+  border-radius: $radii $radii 0 0
+  margin-right: 0.15em
+  padding: 0.6em 0.85em
+  text-shadow: $text_drop_lite
+  &:hover
+    background-color: $component_bg_hover
+    border-color: $component_bg_hover $component_bg_hover $component_border_alt
+
+.tabs > .active > a,
+.tabs > .active > a:hover
+  background-color: $body_bg
+  border: 1px solid $component_border_alt
+  border-bottom-color: transparent
+
+// Stacked Tabs
+.tabs.stacked
+  border-bottom: 0
+
+.tabs.stacked > li
+  float: none
+
+.tabs.stacked > li > a
+  border: 1px solid $component_border_alt
+  border-radius: 0
+  margin-right: 0
+  padding: 0.4em 0.85em
+  &:hover
+    border-color: $component_border_alt
+    z-index: 2
+
+.tabs.stacked > li:first-child > a
+  border-radius: $radii $radii 0 0
+.tabs.stacked > li:last-child > a
+  border-radius: 0 0 $radii $radii
+
+.tabs.stacked .active > a,
+.tabs.stacked li > a:active
+  +box-shadow($inset_dark)
+
+.tabs.stacked .active > a,
+.tabs.stacked .active > a:hover
+  background-color: $component_bg_active
+  color: $component_active
+  text-shadow: $text_inset_dark
+
+// Dropdown Tabs
+.tabs .dropdown-menu
+  border-top: 0
+  border-color: $component_border_alt
+
+.tabs .active .caret
+  border-top-color: $link_hover
+
+.tabs.stacked .caret
+  float: right
+.tabs.stacked .active .caret
+  border-top-color: $component_active
+
+.tabs .open .dropdown-toggle,
+.tabs .open.active .dropdown-toggle,
+.tabs .open.active > a:hover
+  background-color: darken($component_bg_hover, 35%)
+  border-color: $component_border_alt
+  color: $component_active
+  text-shadow: none
+
+.tabs .open .caret,
+.tabs .open.active .caret,
+.tabs .open a:hover .caret
+  border-top-color: $component_active
+
+.tabs.stacked .dropdown-menu
+  border: none
+  max-width: none
+  width: 100%
+
+// Togglable tab panes
+.tab-content > .tab-pane
+  +visuallyhidden
+.tab-content > .active
+  +visuallyshown
+

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

@@ -0,0 +1,46 @@
+
+.tooltip
+  +font-size(12)
+  +opacity(0)
+  font-weight: bold
+  padding: 5px
+  display: block
+  position: absolute
+  visibility: visible
+  z-index: $zindex_tips
+  &.in
+    +opacity(0.9)
+  &.top
+    margin-top: -2px
+  &.bottom
+    margin-top: 2px
+  &.left
+    margin-left: -2px
+  &.right
+    margin-left: 2px
+  &.top .tooltip-arrow
+    +arrow_south(invert($body_bg))
+    bottom: 0
+    left: 50%
+  &.bottom .tooltip-arrow
+    +arrow_north(invert($body_bg))
+    top: 0
+    left: 50%
+  &.left .tooltip-arrow
+    +arrow_east(invert($body_bg))
+    top: 50%
+    right: 0
+  &.right .tooltip-arrow
+    +arrow_west(invert($body_bg))
+    top: 50%
+    left: 0
+
+.tooltip-inner
+  background-color: invert($body_bg)
+  border-radius: $radii
+  color: $body_bg
+  text-align: center
+  line-height: 1.4
+  padding: 0.25em 0.7em
+  max-width: 200px
+