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/

**/
.immersive_awselect {
  overflow: hidden !important; }

.awselect_immersive_background {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-transition: 0.2s ease-in;
  -moz-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in; }
  .awselect_immersive_background.animate {
    opacity: 1; }

.awselect {
  --awselect_frame_padding_x: 40px;
  --awselect_frame_padding_y: 10px;
  --awselect_frame_padding_t: unset;
  --awselect_frame_padding_r: unset;
  --awselect_frame_padding_b: unset;
  --awselect_frame_padding_l: unset;
  --awselect_option_padding_x: unset;
  --awselect_option_padding_y: 5px;
  --awselect_options_margin: 10px 0;
  --awselect_icon_color: unset;
  --awselect_placeholder_color: green;
  --awselect_expand_placeholder_color: unset;
  float: left;
  width: 100%;
  position: relative;
  cursor: pointer;
  background: var(--awselect_background, #e5e5e5);
  -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 > .expand_background {
    background: var(--awselect_active_background, #fff);
    height: 0;
    float: left;
    width: 100%;
    position: absolute;
    z-index: 1;
    transform-origin: top;
    -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 > .frame {
    position: relative;
    padding: var(--awselect_frame_padding_y, var(--awselect_frame_padding_t, 10px) var(--awselect_frame_padding_r, 40px)) var(--awselect_frame_padding_x, var(--awselect_frame_padding_b, 10px) var(--awselect_frame_padding_l, 40px));
    color: #000;
    float: left;
    width: 100%; }
    .awselect > .frame .content {
      float: left;
      width: 100%;
      position: relative;
      z-index: 2;
      color: var(--awselect_placeholder_color, #000); }
    .awselect > .frame 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 > .frame .value {
      position: absolute;
      left: 0; }
    .awselect > .frame .placeholder {
      position: relative; }
    .awselect > .frame .icon {
      float: right;
      position: absolute;
      right: 0;
      top: 50%;
      transform: rotate(180deg) translateY(-50%);
      transform-origin: center 0;
      fill: var(--awselect_icon_color, var(--awselect_placeholder_color, #000));
      -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 > .frame .icon svg {
        width: 10px;
        height: 10px; }
  .awselect .expand_frame {
    z-index: 2;
    position: absolute;
    padding: 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);
    transform: translateY(20px);
    opacity: 0;
    float: left;
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    display: none;
    top: 100%; }
    .awselect .expand_frame.overflow {
      overflow-y: scroll; }
    .awselect .expand_frame > ul {
      float: left;
      padding: 0;
      width: 100%;
      color: var(--awselect_options_color, #000);
      margin: var(--awselect_options_margin); }
      .awselect .expand_frame > ul li {
        float: left;
        width: 100%;
        display: block; }
        .awselect .expand_frame > ul li a {
          padding: var(--awselect_option_padding_y, var(--awselect_frame_padding_y, var(--awselect_frame_padding_t, 10px) var(--awselect_frame_padding_r, 40px))) var(--awselect_option_padding_x, var(--awselect_frame_padding_x, var(--awselect_frame_padding_b, 10px) var(--awselect_frame_padding_l, 40px)));
          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 .expand_frame > ul li a:hover {
            background: rgba(0, 0, 0, 0.07);
            opacity: 1; }
  .awselect.animate {
    z-index: 9999; }
    .awselect.animate > .frame .icon {
      color: var(--awselect_expand_icon_color, var(--awselect_icon_color, var(--awselect_placeholder_color, #000)));
      transform: rotate(0deg) translateY(-50%); }
    .awselect.animate > .frame > .content {
      color: var(--awselect_expand_placeholder_color, var(--awselect_placeholder_color, #000)); }
    .awselect.animate > .expand_background {
      height: 100%; }
  .awselect.animate2 > .expand_background {
    box-shadow: 0px 11px 43px 11px rgba(0, 0, 0, 0.11); }
  .awselect.animate2 .expand_frame {
    transform: translateY(0px);
    opacity: 1; }
  .awselect.placeholder_animate > .frame .value {
    opacity: 0; }
  .awselect.placeholder_animate2 .frame .placeholder {
    transform: translateY(0);
    opacity: 1; }
  .awselect.transition_paused {
    transition: none !important; }
  .awselect.animate > .expand_frame, .awselect.animating > .expand_frame {
    display: block; }
  .awselect:not(.expand) > .expand_background {
    transform: scaleY(0); }
  .awselect:not(.animate) > .frame > .content > .value + .placeholder {
    transform: translateY(20px);
    opacity: 0; }

.aw_cursor_pointer {
  float: left;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #ddd;
  overflow: hidden;
  padding: 5px;
  -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: scale(0.5); }
  .aw_cursor_pointer .inner {
    float: left;
    width: 100%;
    height: 0;
    background: #fff;
    border-radius: 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); }
  .aw_cursor_pointer.animate {
    transform: scale(1); }
    .aw_cursor_pointer.animate .inner {
      height: 100%; }

.immersive_shadow {
  position: relative;
  float: left; }

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