Select2

gistfile1.txt

//= require select2

@import 'global/settings';

$c-red-error-bg: #f3b1ac;

.select2-container {
  @include user-select;
  display: block;
  margin: 5px 0 0;

  > .select2-choice {
    padding-left: 16px;
    height: 50px;
    border: none;
    border-radius: 0;
    background: $c-bg-fileds;
    line-height: 50px;

    > .select2-arrow {
      width: auto;
      height: auto;
      border: 0;
      background: transparent;

      > b {
        @include arrow;
        @include rotate(135deg);
      }
    }

    > div {
    }

    &:hover {
      > .select2-arrow {
      }
    }

    &.select2-default {
      color: red !important;
    }

    > .select2-chosen {
      text-align: left;
      vertical-align: middle;
    }
  }

  &.select2-container-active {
    > .select2-choice,
    > .select2-choices {
      box-shadow: none;
    }
  }

  &.select2-dropdown-open.select2-container-active {
    @include border-bottom-radius(0);

    > .select2-choice {

      @include border-bottom-radius(0);
      background: white;

      > .select2-arrow {
        > b {
        }
      }
    }
  }

  &.select2-dropdown-open.select2-drop-above {
    > .select2-choice {
      @include border-top-radius(0);
      @include border-bottom-radius(0);
      border: none;
    }
  }

  &.select2-container-disabled .select2-choice {
    span {
      cursor: default;
    }

    > .select2-arrow {
      background-color: transparent;
      > b {
        background-position: center bottom;
      }
    }

    &:hover {
      border-color: green !important;
    }
  }

  &:hover {

    > .select2-choice {
      background-color: $c-input_hover;
    }
  }
}
.select2-drop {
  border-radius: 0;
  border: none;
  overflow: hidden;
  box-shadow: none;

  > .select2-search {
    display: none;

    > .select2-input {
    }
  }

  > .select2-results {
    padding: 0;
    margin: 0;
    width: 100%;
    background: white;
    text-align: left;

    > .select2-result {
      > .select2-result-label {
        padding-left: 16px;
      }

      &.select2-highlighted {
        background: $c-input_hover;
        color: black;
      }
    }
  }

  &.select2-drop-above.select2-drop-active {
    border-radius: 0;
    border: none;
    overflow: hidden;
    box-shadow: none;
  }
}

.select2-container.error {
  > .select2-choice {
    background-color: $c-red-error-bg;
  }
}