selectric-extended/src/_selectric.css

Fast, simple and light jQuery plugin to customize HTML selects

.selectric-wrapper {
  appearance: none;
  background-color: $white;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: left;
  user-select: none;
  vertical-align: middle;
}

.selectric-responsive {
  width: 100%;
}

.selectric {
  border: 0.0625rem solid $grey;
  border-radius: 0.25rem;
  background: $white;
  line-height: 1.25;
  padding: 1rem;
  position: relative;

  .button {
    bottom: 0;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    
    /* The up and down arrow style */
    &::after,
    &::before {
      background: $black none repeat scroll 0 0;
      backface-visibility: hidden;
      content: "";
      height: 0.125rem;
      position: absolute;
      transition: width 0.3s ease 0s, transform 0.3s ease 0s;
      -webkit-transition-delay: 0s, 0s;
      top: 50%;
      width: 0.5rem;
    }

    &::after {
      right: 1.125rem;
      transform: rotate(-45deg);
    }

    &::before {
      right: 1.438rem;
      transform: rotate(45deg);
    }
  }

   /* Styles for classic theme of dropdown. */
    &-t-classic {
      box-shadow: 0  0.625rem 0.875rem 0 $box-shadow-menu;
      font-size: $font-s; /* 14px */
      min-width: 8.125rem; /* 130px */
      color: $blue;
      
      /* The up and down arrow style */
      .button {
        display: block;
        &::after,
        &::before {
          background-color: $blue;
        }
      }

      &.selectric-open .selectric {
        /* Switch up and down arrow position in open state */
        &::after {
          transform: rotate(45deg);
        }

        &::before {
          transform: rotate(-45deg);
        }
      }

      &.selectric-open .selectric-items {
          box-shadow: 0  0.625rem 0.875rem 0 $box-shadow-menu;
        }

      /* Media queries for different viewports */
      @media (--medium-viewport) {
        font-size: $font-m; /* 16px */
        min-width: 9.125rem; /* 146px */
      }

      @media (--large-viewport) {
        font-size: $font-m; /* 16px */
        min-width: 9.125rem; /* 146px */
      }

      @media (--extra-large-viewport) {
        font-size: $font-ms;  /* 18px */
        min-width: 10rem; /* 160px */
      } /* End of media queries */
    } /* End of classic theme (.t-classic) */
}

.selectric-open {
  z-index: 9999;

  .selectric {

    /* Selected option box focused with highlighted border in open state */
    border: 0.0625rem solid $blue;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    
    /* Switch up and down arrow position in open state */
    .button::before {
      transform: rotate(-45deg);
    }

    .button::after {
      transform: rotate(45deg);
    }
  }

  .selectric-items {
    /* Dropdown box focused with highlighted border in open state */
    border: 0.0625rem solid $blue;
    border-radius: 0.25rem;
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: block;
  }
}

.selectric-disabled {
  color: $dark-grey;
  filter: alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  user-select: none;
}

.selectric-hide-select {
  position: relative;
  overflow: hidden;
  width: 0;
  height: 0;

  select {
    position: absolute;
    left: -100%;
  }

  &.selectric-is-native {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;

    select {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      border: none;
      z-index: 1;
      box-sizing: border-box;
      opacity: 0;
    }
  }
}

.selectric-input {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  margin: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  outline: none;
  border: none;
  background: none;
}

/* Items box */
.selectric-items {
  background: $white;
  border: 0.0625rem solid $grey;
  display: none;
  left: 0;
  overflow: auto;
  position: absolute;
  top: 100%;
  z-index: -1;

  .selectric-scroll {
    height: 100%;
    overflow: auto;
  }

  li {
    display: block;
    cursor: pointer;
    background-color: $white;
    line-height: 1;
    padding: 1rem;
    user-select: none;

    &.selected, &:hover, &.highlighted {
      background-color: $white;
      color: $blue;
    }
  }

  .disabled {
    filter: alpha(opacity=50);
    opacity: 0.5;
    cursor: default;
    background: none;
    color: $dark-grey;
    user-select: none;
  }
}