jQuery UI 1.6 theme sass

ui.all.sass

// $Id$

//
  jQuery UI screen structure and presentation
  This CSS file was generated by ThemeRoller, a Filament Group Project for jQuery UI
  Author: Scott Jehl, [email protected], http://www.filamentgroup.com
  Visit themeroller.com

@import compass/utilities/general/reset.sass
@import compass/utilities/general/float.sass
@import compass/utilities/general/clearfix.sass
@import compass/utilities/links/link_colors.sass
@import compass/utilities/lists/horizontal_list.sass

!jquery_ui_image_path   ||= "images/"

!jquery_ui_font_family = "Verdana,Arial,sans-serif"
!jquery_ui_font_weight = "normal"
!jquery_ui_font_size = 1.1em

!jquery_ui_corner_radius = 4px

!jquery_ui_header_bgcolor = #cccccc
!jquery_ui_header_bgimage = ""
!jquery_ui_header_bgpos = 75%
!jquery_ui_header_border_color = #aaaaaa
!jquery_ui_header_text_color = #222222
!jquery_ui_header_icon_color = #222223

!jquery_ui_content_bgcolor = #ffffff
!jquery_ui_content_bgimage = "ffffff_40x100_textures_01_flat_75.png"
!jquery_ui_content_bgpos = 75%
!jquery_ui_content_border_color = #aaaaab
!jquery_ui_content_text_color = #222224
!jquery_ui_content_icon_color = #222225

!jquery_ui_clickable_default_bgcolor = #e6e6e6
!jquery_ui_clickable_default_bgimage = "e6e6e6_40x100_textures_02_glass_75.png"
!jquery_ui_clickable_default_bgpos = 75%
!jquery_ui_clickable_default_border_color = #d3d3d3
!jquery_ui_clickable_default_text_color = #555555
!jquery_ui_clickable_default_icon_color = #888888

!jquery_ui_clickable_hover_bgcolor = #dadada
!jquery_ui_clickable_hover_bgimage = "dadada_40x100_textures_02_glass_75.png"
!jquery_ui_clickable_hover_bgpos = 75%
!jquery_ui_clickable_hover_border_color = #999999
!jquery_ui_clickable_hover_text_color = #212121
!jquery_ui_clickable_hover_icon_color = #454545

!jquery_ui_clickable_active_bgcolor = #fffffe
!jquery_ui_clickable_active_bgimage = "ffffff_40x100_textures_02_glass_65.png"
!jquery_ui_clickable_active_bgpos = 65%
!jquery_ui_clickable_active_border_color = #aaaaac
!jquery_ui_clickable_active_text_color = #212122
!jquery_ui_clickable_active_icon_color = #454546

!jquery_ui_highlight_bgcolor = #fbf9ee
!jquery_ui_highlight_bgimage = ""
!jquery_ui_highlight_bgpos = 55%
!jquery_ui_highlight_border_color = #fcefa1
!jquery_ui_highlight_text_color = #363636
!jquery_ui_highlight_icon_color = #2e83ff

!jquery_ui_error_bgcolor = #fef1ec
!jquery_ui_error_bgimage = ""
!jquery_ui_error_bgpos = 95%
!jquery_ui_error_border_color = #cd0a0a
!jquery_ui_error_text_color = #cd0a0b
!jquery_ui_error_icon_color = #cd0a0c

!jquery_ui_modal_screen_bgcolor = #aaaaad
!jquery_ui_modal_screen_bgimage = ""
!jquery_ui_modal_screen_bgpos = 0%
!jquery_ui_modal_screen_opacity = 30%

!jquery_ui_drop_shadow_bgcolor = #aaaaae
!jquery_ui_drop_shadow_bgimage = ""
!jquery_ui_drop_shadow_bgpos = 0%
!jquery_ui_drop_shadow_opacity = 30%
!jquery_ui_drop_shadow_thickness = 8px
!jquery_ui_drop_shadow_offset_top = -8px
!jquery_ui_drop_shadow_offset_left = -8px
!jquery_ui_drop_shadow_corners = 8px


=jquery-ui-reset
  +reset-box-model
  line-height: 1.3
  text-decoration: none
  font-size: 100%
  +reset-list-style

=jquery-ui-component
  +jquery-ui-reset
  font-family = !jquery_ui_font_family
  font-size = !jquery_ui_font_size

=jquery-ui-component-affordance(!bg_color, !border_color, !text_color)
  border:
    color = !border_color
  background:
    color = !bg_color
  color = !text_color

=jquery-ui-component-content(!link = true)
  +jquery-ui-component-affordance(!jquery_ui_content_bgcolor, !jquery_ui_content_border_color, !jquery_ui_content_text_color)
  +jquery-ui-texture-image(!jquery_ui_content_bgimage, "0 0")
  @if !link
    a
      color = !jquery_ui_content_text_color
      text-decoration: underline

// Component states

=ui-default-state(!link = false)
  +jquery-ui-component-affordance(!jquery_ui_clickable_default_bgcolor, !jquery_ui_clickable_default_border_color, !jquery_ui_clickable_default_text_color)
  +jquery-ui-texture-image(!jquery_ui_clickable_default_bgimage)
  @if !link
    a
      +link-colors(!jquery_ui_clickable_default_text_color)

=ui-hover-state(!link = false)
  +jquery-ui-component-affordance(!jquery_ui_clickable_hover_bgcolor, !jquery_ui_clickable_hover_border_color, !jquery_ui_clickable_hover_text_color)
  +jquery-ui-texture-image(!jquery_ui_clickable_hover_bgimage)
  @if !link
    a
      +link-colors(!jquery_ui_clickable_hover_text_color)

=ui-active-state(!link = false)
  +jquery-ui-component-affordance(!jquery_ui_clickable_active_bgcolor, !jquery_ui_clickable_active_border_color, !jquery_ui_clickable_active_text_color)
  +jquery-ui-texture-image(!jquery_ui_clickable_active_bgimage)
  outline: none
  @if !link
    a
      +link-colors(!jquery_ui_clickable_active_text_color)
      outline: none

=ui-default-component(!link = false)
  +ui-default-state(!link)
  &:hover
    +ui-hover-state(!link)
  &:active
    +ui-active-state(!link)

// Images

=jquery-ui-image(!image = "")
  background-image = "url(" + !jquery_ui_image_path + !image + ")"

=jquery-ui-texture-image(!texture = "", !position = "0 50%")
  +jquery-ui-image(!texture)
  background-position = !position
  background-repeat: repeat-x

=jquery-ui-icon-image(!icon = "", !position = "50% 50%")
  +jquery-ui-image(!icon)
  background-position = !position
  background-repeat: no-repeat

=jquery-ui-icon(!icon, !size, !suffix = "-default", !position = "50% 50%")
  &#{!suffix}
    +jquery-ui-icon-image("888888_" + !size + "_icon_" + !icon + ".gif", !position)
  &#{!suffix}:hover,&-hover
    +jquery-ui-icon-image("454545_" + !size + "_icon_" + !icon + ".gif", !position)
  &#{!suffix}:active,&-active
    +jquery-ui-icon-image("454546_" + !size + "_icon_" + !icon + ".gif", !position)
  &-content
    +jquery-ui-icon-image("222225_" + !size + "_icon_" + !icon + ".gif", !position)

// hide
=ui-accessible-hidden
  position: absolute
  left: -99999999px

// Accordion

.ui-accordion
  +jquery-ui-reset
  font-family = !jquery_ui_font_family
  font-size = !jquery_ui_font_size
  border-bottom:
    width: 1px
    style: solid
    color = !jquery_ui_clickable_default_border_color

.ui-accordion-group
  +jquery-ui-reset
  border:
    width: 1px
    style: solid
    color = !jquery_ui_clickable_default_border_color
    bottom:
      style: none

.ui-accordion-header
  +jquery-ui-reset
  +ui-default-component(true)
  cursor: pointer
  +jquery-ui-texture-image(!jquery_ui_clickable_default_bgimage)
  a
    +jquery-ui-reset
    display: block
    font-size: 1em
    font-weight = !jquery_ui_font_weight
    text-decoration: none
    padding: .5em .5em .5em 1.7em
    +jquery-ui-icon-image("888888_7x7_arrow_right.gif", ".5em 50%")
    &:hover
      +jquery-ui-icon-image("454545_7x7_arrow_right.gif", ".5em 50%")
  .selected &,.selected &:hover
    +ui-active-state
    a
      +jquery-ui-icon-image("454546_7x7_arrow_down.gif", ".5em 50%")
      &:hover
        +jquery-ui-icon-image("454546_7x7_arrow_down.gif", ".5em 50%")


// This rule has no effect because the accordion widget doesn't produce this class.
  .ui-accordion-content
    +jquery-ui-component-content(false)
    font-size: 1em
    padding: 1em 1.7em 0.6em
    p
      padding: 1em 1.7em 0.6em

// UI tabs

.ui-tabs-nav
  +jquery-ui-reset
  +jquery-ui-component
  +jquery-ui-component-content
  line-height: 1.3
  z-index: 1
  ul
    +jquery-ui-reset
    +float-left
    +horizontal-list-container
    position: relative
    bottom: -1px
    border:
      right:
        width: 1px
        style: solid
        color = !jquery_ui_clickable_default_border_color
  li
    +float-left
    border:
      width: 1px
      style: solid
      color = !jquery_ui_clickable_default_border_color
      right:
        style: none
    a
      +ui-default-component
      +jquery-ui-reset
      +horizontal-list-item(0)
      padding: .5em 1.7em
      font-size: 1em
      font-weight = !jquery_ui_font_weight
      text-decoration: none
    &.ui-tabs-selected
      border:
        bottom:
          color = !jquery_ui_clickable_active_bgcolor
      a
        +ui-active-state
        &:hover
          +ui-active-state

.ui-tabs-panel
  +jquery-ui-component
  +jquery-ui-component-content(false)
  clear: left
  border:
    width: 1px
    style: solid
    color = !jquery_ui_clickable_default_border_color
  padding: 1.5em 1.7em

.ui-tabs-hide
  display: none
  // for accessible hiding: position: absolute left: -99999999px

// Slider
.ui-slider
  +jquery-ui-component
  +jquery-ui-component-content(false)
  border:
    width: 1px
    style: solid
  height: .8em
  position: relative

.ui-slider-handle
  +jquery-ui-reset
  position: absolute
  z-index: 2
  top: -3px
  width: 1.2em
  height: 1.2em
  +ui-default-component
  border:
    width: 1px
    style: solid

.ui-slider-handle-active
  +ui-active-state
  &:hover
    +ui-active-state

.ui-slider-range
  +jquery-ui-reset
  height: .8em
  background-color = !jquery_ui_clickable_hover_bgcolor
  +jquery-ui-texture-image("dadada_40x100_textures_02_glass_75.png")
  position: absolute
  border:
    width: 1px
    style: solid
    color = !jquery_ui_clickable_default_border_color
  border-left: 0
  border-right: 0
  top: -1px
  z-index: 1
  opacity: .7
  filter: Alpha(Opacity=70)

// Dialog

.ui-dialog
  +jquery-ui-reset
  +jquery-ui-component
  +jquery-ui-component-content(false)
  position: relative
  border:
    width: 4px
    style: solid

.ui-resizable-handle
  position: absolute
  font-size: 0.1px
  z-index: 99999
  .ui-resizable &
    display: block
  // use 'body' to make it more specific (css order)
  body .ui-resizable-disabled &,
  body .ui-resizable-autohide &
    display: none

.ui-resizable-n,.ui-resizable-s
  width: 100%
  height: 7px
.ui-resizable-e,.ui-resizable-w
  width: 7px
  height: 100%
.ui-resizable-sw,.ui-resizable-nw,.ui-resizable-ne
  height: 9px
  width: 9px
.ui-resizable-se
  width: 13px
  height: 13px

.ui-resizable-e,.ui-resizable-w,.ui-resizable-ne,.ui-resizable-nw
  top: 0px
.ui-resizable-se,.ui-resizable-sw
  bottom: 0px
.ui-resizable-n,.ui-resizable-s,.ui-resizable-sw,.ui-resizable-nw
  left: 0px
.ui-resizable-se,.ui-resizable-ne
  right: 0px

.ui-resizable-n
  top: -5px
.ui-resizable-s
  bottom: -5px
.ui-resizable-e
  right: -5px
.ui-resizable-w
  left: -5px

.ui-resizable-n
  cursor: n-resize
.ui-resizable-s
  cursor: s-resize
.ui-resizable-e
  cursor: e-resize
.ui-resizable-w
  cursor: w-resize
.ui-resizable-se
  cursor: se-resize
.ui-resizable-sw
  cursor: sw-resize
.ui-resizable-nw
  cursor: nw-resize
.ui-resizable-ne
  cursor: ne-resize

.ui-resizable-se
  +jquery-ui-icon-image("222222_11x11_icon_resize_se.gif")
  background-position: 0 0

.ui-dialog-titlebar
  +jquery-ui-reset
  +ui-default-state
  padding: .5em 1.5em .5em 1em
  position: relative
  border:
    bottom:
      width: 1px
      style: solid
  font-size: 1em
  font-weight = !jquery_ui_font_weight

.ui-dialog-title

.ui-dialog-titlebar-close
  +jquery-ui-reset
  position: absolute
  right: 8px
  top: .7em
  width: 11px
  height: 11px
  z-index: 100
  +jquery-ui-icon("close", "11x11", "", "0 0")
  span
    display: none

.ui-dialog-content
  +jquery-ui-reset
  +jquery-ui-component-content(false)
  padding: 1.5em 1.7em

.ui-dialog-buttonpane
  position: absolute
  bottom: 0
  width: 100%
  text-align: left
  +jquery-ui-component-content(false)
  border:
    top:
      width: 1px
      style: solid

  button
    +ui-default-component
    border:
      width: 1px
      style: solid
    margin: .5em 0 .5em 8px
    font-size: 1em
    cursor: pointer
    padding: .2em .6em .3em .6em
    line-height: 1.4em


.ui-dialog.ui-draggable

// Resizable
// Note: for resizable styles, use the styles listed above in the dialog section

// Datepicker
// Main Style Sheet for jQuery UI date picker
.ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div
  +jquery-ui-component
  +jquery-ui-component-content
  border:
    width: 4px
    style: solid
  width: 15.5em
  padding: 2.5em .5em .5em .5em
  position: relative

.ui-datepicker-div, #ui-datepicker-div
  z-index: 9999
  //must have
  display: none

.ui-datepicker-inline
  +float-left
  display: block

.ui-datepicker-control, .ui-datepicker-current
  display: none

.ui-datepicker-next, .ui-datepicker-prev
  +ui-default-component
  position: absolute
  left: .5em
  top: .5em
  a
    +ui-default-component
    border:
      width: 1px
      style: solid
    text-indent: -999999px
    width: 1.3em
    height: 1.4em
    display: block
    font-size: 1em
    cursor: pointer

.ui-datepicker-next
  left: 14.6em

.ui-datepicker-prev
  a
    +jquery-ui-icon-image("888888_7x7_arrow_left.gif")
    &:hover
      +jquery-ui-icon-image("454545_7x7_arrow_left.gif")
    &:active
      +jquery-ui-icon-image("222222_7x7_arrow_left.gif")

.ui-datepicker-next
  a
    +jquery-ui-icon-image("888888_7x7_arrow_right.gif")
    &:hover
      +jquery-ui-icon-image("454545_7x7_arrow_right.gif")
    &:active
      +jquery-ui-icon-image("222222_7x7_arrow_right.gif")

.ui-datepicker-header select
  +ui-default-state
  border:
    width: 1px
    style: solid
  font-size: 1em
  line-height: 1.4em
  position: absolute
  top: .5em
  margin: 0 !important
  &.ui-datepicker-new-month
    width: 7em
    left: 2.2em
  &.ui-datepicker-new-year
    width: 5em
    left: 9.4em

  option
    &:focus, &:hover
      background = !jquery_ui_clickable_hover_bgcolor

table.ui-datepicker
  width: 15.5em
  text-align: right
  td a
    +ui-default-component
    padding: .1em .3em .1em 0
    display: block
    cursor: pointer
    border: 1px solid #ffffff
  .ui-datepicker-title-row td
    padding: .3em 0
    text-align: center
    font-size: .9em
    color = !jquery_ui_content_text_color
    text-transform: uppercase
    a
      color = !jquery_ui_content_text_color

.ui-datepicker-cover
  display: none
  display/**/: block
  position: absolute
  z-index: -1
  filter: mask()
  top: -4px
  left: -4px
  width: 193px
  height: 200px

//
  Generic ThemeRoller Classes
  Make your jQuery Components ThemeRoller-Compatible!


//component global class
.ui-component
  +jquery-ui-component

//component content styles
.ui-component-content
  +jquery-ui-component-content

//component states
// see mixins at top.

.ui-default-state
  +ui-default-state(true)
  border:
    width: 1px
    style: solid

.ui-hover-state,.ui-default-state:hover
  +ui-hover-state(true)
  border:
    width: 1px
    style: solid

.ui-active-state,.ui-default-state:active
  +ui-active-state(true)
  border:
    width: 1px
    style: solid

//icons
.ui-arrow-right
  +jquery-ui-icon("arrow_right", "7x7")

.ui-arrow-left
  +jquery-ui-icon("arrow_left", "7x7")

.ui-arrow-down
  +jquery-ui-icon("arrow_down", "7x7")

.ui-arrow-up
  +jquery-ui-icon("arrow_up", "7x7")

.ui-close
  +jquery-ui-icon("close", "11x11")

.ui-folder-closed
  +jquery-ui-icon("folder_closed", "11x11")

.ui-folder-open
  +jquery-ui-icon("folder_open", "11x11")

.ui-doc
  +jquery-ui-icon("doc", "11x11")

.ui-arrows-leftright
  +jquery-ui-icon("arrows_leftright", "11x11")

.ui-arrows-updown
  +jquery-ui-icon("arrows_updown", "11x11")

.ui-minus
  +jquery-ui-icon("minus", "11x11")

.ui-plus
  +jquery-ui-icon("plus", "11x11")


//hidden elements
.ui-hidden
  display: none
  // for accessible hiding: position: absolute left: -99999999px

.ui-accessible-hidden
  +ui-accessible-hidden

//reset styles
.ui-reset
  //resets
  +jquery-ui-reset

//clearfix class
.ui-clearfix
  +clearfix