awesome-select/package/css/awselect.css

/**

jQuery Awselect
Developed by: Prev Wong
Documentation: https://prevwong.github.io/awesome-select/
Github: https://github.com/prevwong/awesome-select/

**/
.awselect {
  float: left;
  width: 100%;
  position: relative;
  -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
  .awselect > .bg {
    background: #fff;
    height: 0%;
    float: left;
    width: 100%;
    position: absolute;
    z-index: 1;
    -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
  .awselect .front_face {
    position: relative;
    padding: 20px 40px;
    color: #000;
    float: left;
    width: 100%; }
    .awselect .front_face > .bg {
      position: absolute;
      z-index: 0;
      float: left;
      width: 100%;
      height: 100%;
      left: 0;
      background: #e5e5e5;
      top: 0; }
    .awselect .front_face .content {
      float: left;
      width: 100%;
      position: relative;
      z-index: 2; }
    .awselect .front_face span {
      -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
      -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
      -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
      transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
      float: left;
      width: 100%;
      color: inherit; }
    .awselect .front_face .current_value {
      position: absolute; }
    .awselect .front_face .placeholder {
      position: relative; }
    .awselect .front_face .icon {
      float: right;
      position: absolute;
      right: 0px;
      top: 50%;
      transform: rotate(180deg) translateY(-50%);
      transform-origin: center 0;
      -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
      -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
      -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
      transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
      .awselect .front_face .icon svg {
        width: 10px;
        height: 10px; }
  .awselect .back_face {
    z-index: 2;
    position: absolute;
    padding: 0px;
    -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    transform: translateY(20px);
    opacity: 0;
    float: left;
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    display: none; }
    .awselect .back_face.overflow {
      overflow-y: scroll; }
    .awselect .back_face ul {
      margin: 0;
      float: left;
      padding: 0;
      width: 100%; }
      .awselect .back_face ul li {
        float: left;
        width: 100%;
        display: block; }
        .awselect .back_face ul li a {
          color: inherit;
          opacity: 0.8;
          float: left;
          width: 100%;
          -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
          -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
          -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
          transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
          .awselect .back_face ul li a:hover {
            background: rgba(0, 0, 0, 0.07);
            opacity: 1; }
  .awselect.animate {
    z-index: 3;
    height: 100% !important; }
    .awselect.animate .front_face .icon {
      transform: rotate(0deg) translateY(-50%); }
    .awselect.animate > .bg {
      height: 100%; }
  .awselect.animate2 > .bg {
    box-shadow: 0px 11px 43px 11px rgba(0, 0, 0, 0.11); }
  .awselect.animate2 .back_face {
    transform: translateY(0px);
    opacity: 1; }
  .awselect.hasValue .front_face .placeholder {
    transform: translateY(20px);
    opacity: 0; }
  .awselect.placeholder_animate .front_face .current_value {
    opacity: 0; }
  .awselect.placeholder_animate2 .front_face .placeholder {
    transform: translateY(0);
    opacity: 1; }

/*# sourceMappingURL=awselect.css.map */