selectboxit.sass

//
// jquery.selectBoxIt.css 3.8.1
// Author: @gregfranko
// SassMonkey: @itsluke
//

//
// Common CSS Properties
// ---------------------
// These properties will be applied to any themes that you use
//

$selectH = 40px
$mainFont = "Helvetica"

.no_marg_pad
  margin: 0
  padding: 0

/* SelectBoxIt container */
.selectboxit-container 
  width: 100%
  position: relative
  display: inline-block
  vertical-align: top

/* Styles that apply to all SelectBoxIt elements */
.selectboxit-container * 
  font-size: 14px 
  font-family: $mainFont
  font-weight: 300
  // Prevents text selection 
  +user-select(none)
  outline: none
  white-space: nowrap

// Button 
.selectboxit-container .selectboxit 
  min-width: 80px           // Width of the dropdown button 
  cursor: pointer
  @extend .no_marg_pad
  +border-radius(3px)
  overflow: hidden
  display: block
  position: relative

// Height and Vertical Alignment of Text 
.selectboxit-container span, .selectboxit-container .selectboxit-options a 
  height: $selectH          // Height of the drop down 
  line-height: $selectH     // Vertically positions the drop down text 
  display: block

// Focus pseudo selector 
.selectboxit-container .selectboxit:focus 
  outline: 0

// Disabled Mouse Interaction 
.selectboxit.selectboxit-disabled, .selectboxit-options .selectboxit-disabled 
  opacity: 0.65
  filter: alpha(opacity=65)
  +single-box-shadow(none)
  cursor: default

// Button Text 
.selectboxit-text 
  text-indent: 5px
  overflow: hidden
  text-overflow: ellipsis
  float: left

.selectboxit .selectboxit-option-icon-container 
  margin-left: 5px

// Options List 
.selectboxit-container .selectboxit-options 
  +box-sizing(border-box)
  +single-box-shadow(none)

  min-width: 100%  // Minimum Width of the dropdown list box options 
  *width: 100%
  @extend .no_marg_pad
  list-style: none
  position: absolute
  overflow-x: hidden
  overflow-y: auto
  cursor: pointer
  display: none
  z-index: 9999999999999
  +border-radius(3px)
  text-align: left

// Individual options 
 .selectboxit-option .selectboxit-option-anchor
   padding: 0 2px

// Individual Option Hover Action 
.selectboxit-option .selectboxit-option-anchor:hover 
  text-decoration: none

// Individual Option Optgroup Header 
.selectboxit-option, .selectboxit-optgroup-header 
  text-indent: 5px // Horizontal Positioning of the select box option text 
  margin: 0
  list-style-type: none

// The first Drop Down option 
.selectboxit-option-first 
  +border-top-radius(6px)

/* The first Drop Down option optgroup */
.selectboxit-optgroup-header + .selectboxit-option-first
  +border-top-radius(0px)

/* The last Drop Down option */
.selectboxit-option-last
  +border-top-radius(6px)

// Drop Down optgroup headers 
.selectboxit-optgroup-header 
  font-weight: bold

// Drop Down optgroup header hover psuedo class 
.selectboxit-optgroup-header:hover 
  cursor: default

// Drop Down down arrow container 
.selectboxit-arrow-container 
  // Positions the down arrow 
  width: 30px
  position: absolute
  right: 0

// Drop Down down arrow 
.selectboxit .selectboxit-arrow-container .selectboxit-arrow 
  // Horizontally centers the down arrow 
  margin: 0 auto
  position: absolute
  top: 50%
  right: 0
  left: 0

// Drop Down down arrow for jQueryUI and jQuery Mobile 
.selectboxit .selectboxit-arrow-container .selectboxit-arrow.ui-icon 
  top: 30%

// Drop Down individual option icon positioning 
.selectboxit-option-icon-container 
  float: left

.selectboxit-container .selectboxit-option-icon 
  @extend .no_marg_pad
  vertical-align: middle

// Drop Down individual option icon positioning 
.selectboxit-option-icon-url 
  width: 18px
  background-size: 18px 18px
  background-repeat: no-repeat
  height: 100%
  background-position: center
  float: left

.selectboxit-rendering 
  display: inline-block !important
  *display: inline !important
  zoom: 1 !important
  visibility: visible !important
  position: absolute !important
  top: -9999px !important
  left: -9999px !important

// jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile 
.jqueryui .ui-icon 
  background-color: inherit

// Another jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile 
.jqueryui .ui-icon-triangle-1-s 
  background-position: -64px -16px


//
// Default Theme
// -------------
// Note: Feel free to remove all of the CSS underneath this line if you are not using the default theme


.selectboxit-btn 
  background-color: #F7F7F7
  //  +background-image(linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%)
  background-repeat: repeat-x
  border: 1px solid #E9E9E9
  // border-color: #e6e6e6 #e6e6e6 #bfbfbf
  // border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)
  // border-bottom-color: #b3b3b3

.selectboxit-btn.selectboxit-enabled
  &:hover, &:focus, &:active
    color: #333333
    background-color: #e6e6e6

.selectboxit-btn.selectboxit-enabled
  &:hover, &:focus
  color: #333333
  text-decoration: none
  background-position: 0 -15px

.selectboxit-default-arrow 
  width: 0
  height: 0
  border-top: 4px solid #E9E9E9
  border-right: 4px solid transparent
  border-left: 4px solid transparent

.selectboxit-list 
  background-color: #ffffff
  border: 1px solid #ccc
  border: 1px solid rgba(0, 0, 0, 0.2)
  // +single-box-shadow(0 5px 10px rgba(0, 0, 0, 0.2))

.selectboxit-list .selectboxit-option-anchor 
  color: #333333

.selectboxit-list > .selectboxit-focus > .selectboxit-option-anchor 
  color: #ffffff
  background-color: #0081c2
  +background-image(linear-gradient(top, #0088cc, #0077b3) )
  background-repeat: repeat-x

.selectboxit-list > .selectboxit-disabled > .selectboxit-option-anchor 
  color: #999999