SelectBox jQuery Plugin Styling

jquery-selectbox-styling.css

/* SelecBox Styling */
.sbHolder {
  position: relative;
  background: #fff;
  cursor: default;
  height: 48px;
  float: left;
  color: #9c9898;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%!important;
  font: 15px/30px Helvetica, Arial, sans-serif;
}

.sbSelector {
  display: block;
  padding: 10px 12px 6px;
  text-decoration: none;
  color: #9c9898;
  border: 1px solid #ffd110;
}

.sbSelector:hover {
  text-decoration: none;
}

.sbToggle {
  width: 44px;
  height: 47px;
  background: url(images/select-bg.jpg) no-repeat 50% 50%;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
}

.sbOptions {
  width: 100%;
  border: 1px solid #ffd110;
  border-top: none;
  border-width: 1px;
  top: 100% !important;
  background-color: #fff;
  overflow-y: scroll;
  overflow-x: hidden;
  margin: 0;
  position: absolute;
  overflow: auto;
  background: #fff;
  z-index: 2000;
  max-height: 130px !important;
}

.sbOptions a {
  font: 15px/30px Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #9c9898;
  padding: 5px 12px;
  display: block;
  cursor: default;
  height: 1%;
}

.sbOptions a:hover,
.sbOptions a.sbActive {
  text-decoration: none;
  background: #ffd110;
  cursor: pointer;
  color: #fff;
}

.sbOptions a:hover,
.sbOptions a:focus,
.sbOptions a:active {
  outline: none;
}

.sbOptions li {
  padding: 0 !important;
}

jquery-selectbox-styling.scss

// This is the default SCSS styling of jQuery SelectBox
// by Zeshan Ahmed @zeshanshani22

// SelectBox Styling Variables
// ================================
$sb-selector-text-color: $color__text--base;
$sb-selector-background-color: #fff;
$sb-selector-font-size: $font__size--input;
$sb-selector-font-weight: 300;
$sb-selector-line-height: 1.1;
$sb-selector-box-shadow: none;
$sb-selector-padding-x: 22px;
$sb-selector-padding-y: 16px;
$sb-selector-border-radius: 0px;

$sb-toggle-position-right: 12px;
$sb-toggle-position-top: 50%;
$sb-toggle-width: 33px;
$sb-toggle-height: 33px;
$sb-toggle-line-height: 31px;
$sb-toggle-background-color: $primary;
$sb-toggle-border-radius: 50em;

$sb-options-margin: 0;
$sb-options-padding: 0;
$sb-options-background-color: #fff;
$sb-options-max-height: 264px;
$sb-options-min-width: 280px;
$sb-options-box-shadow: none;
$sb-options-border: none;

$sb-option-text-color: $color__text--base;
$sb-option-background-color: #fff;
$sb-option-font-weight: bold;
$sb-option-font-size: 18px;
$sb-option-padding-x: 15px;
$sb-option-padding-y: 15px;

$sb-option-active-text-color: $color__text--base;
$sb-option-active-background-color: #ccccff;

/* SelectBox Styling */
.sbHolder {
  position: relative;
  width: 100%;
  @extend %transition-base;

  .sbSelector {
    display: block;
    width: 100%;
    box-shadow: $sb-selector-box-shadow;
    color: $sb-selector-text-color;
    line-height: $sb-selector-line-height;
    background: $sb-selector-background-color;
    border-radius: $border-radius--base;
    @include padding( $sb-selector-padding-y $sb-selector-padding-x );
    @include font-size( $sb-selector-font-size );
    font-weight: $sb-selector-font-weight;
    border-radius: $sb-selector-border-radius;

    &:hover,
    &:focus {
      text-decoration: none;
      color: $color__text--base;
    }
  }

  .sbToggle {
    @include position( $top: $sb-toggle-position-top, $right: $sb-toggle-position-right );
    @include margin( 0, 'top' );
    line-height: 1;
    width: $sb-toggle-height;
    height: $sb-toggle-height;
    @include margin( -($sb-toggle-height / 2), 'top' );
    background-color: $sb-toggle-background-color;
    border-radius: $sb-toggle-border-radius;
    line-height: $sb-toggle-line-height;
    text-align: center;

    &:after {
      @extend .fa;
      content: fa-content( $fa-var-arrow-down );
      @include fa-icon;
      color: #fff;
      opacity: 1;
      font-weight: 900;
      @include font-size( 16px );
    }
  }

  .sbOptions {
    margin: $sb-options-margin;
    padding: $sb-options-padding;
    background-color: $sb-options-background-color;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: $sb-options-max-height !important;
    z-index: 100;
    list-style: none;
    @include position( $left: 0, $width: 100% );
    top: 100% !important;
    min-width: $sb-options-min-width;
    box-shadow: $sb-options-box-shadow;
    border: $sb-options-border;

    a {
      display: block;
      @include padding( $sb-option-padding-x $sb-option-padding-y );
      line-height: normal;
      @include font-size( $sb-option-font-size );
      font-weight: $sb-option-font-weight;
      color: $sb-option-text-color;
      background-color: $sb-option-background-color;

      &:hover, .sbActive {
        color: $sb-option-active-text-color;
        background-color: $sb-option-active-background-color;
        text-decoration: none;
      }
    }

    li {
      padding: 0 !important;

      &:first-child {
        border-top: none;
      }

      &.active {
        a {
          color: $sb-option-active-text-color;
          background-color: $sb-option-active-background-color;
        }
      }
    }
  }

  // Error
  .gfield_error & {
    border-color: $danger;

    &:focus,
    &:hover {
      @extend %input-focus-outline-error;
    }
  }
}