awselect.css~ 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. /**
  2. jQuery Awselect
  3. Developed by: Prev Wong
  4. Documentation: https://prevwong.github.io/awesome-select/
  5. Github: https://github.com/prevwong/awesome-select/
  6. **/
  7. .immersive_awselect {
  8. overflow: hidden !important; }
  9. .awselect_bg {
  10. position: fixed;
  11. z-index: 999;
  12. left: 0;
  13. top: 0;
  14. width: 100%;
  15. height: 100%;
  16. opacity: 0;
  17. background: rgba(0, 0, 0, 0.8);
  18. -webkit-transition: 0.2s ease-in;
  19. -moz-transition: 0.2s ease-in;
  20. -o-transition: 0.2s ease-in;
  21. transition: 0.2s ease-in; }
  22. .awselect_bg.animate {
  23. opacity: 1; }
  24. .awselect {
  25. float: left;
  26. width: 100%;
  27. position: relative;
  28. cursor: pointer;
  29. -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  30. -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  31. -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  32. transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
  33. .awselect > .bg {
  34. background: #fff;
  35. height: 0%;
  36. float: left;
  37. width: 100%;
  38. position: absolute;
  39. z-index: 1;
  40. -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  41. -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  42. -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  43. transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
  44. .awselect .front_face {
  45. position: relative;
  46. padding: 20px 40px;
  47. color: #000;
  48. float: left;
  49. width: 100%; }
  50. .awselect .front_face > .bg {
  51. position: absolute;
  52. z-index: 0;
  53. float: left;
  54. width: 100%;
  55. height: 100%;
  56. left: 0;
  57. background: #e5e5e5;
  58. top: 0; }
  59. .awselect .front_face .content {
  60. float: left;
  61. width: 100%;
  62. position: relative;
  63. z-index: 2; }
  64. .awselect .front_face span {
  65. -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  66. -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  67. -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  68. transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  69. float: left;
  70. width: 100%;
  71. color: inherit; }
  72. .awselect .front_face .current_value {
  73. position: absolute;
  74. left: 0; }
  75. .awselect .front_face .placeholder {
  76. position: relative; }
  77. .awselect .front_face .icon {
  78. float: right;
  79. position: absolute;
  80. right: 0px;
  81. top: 50%;
  82. transform: rotate(180deg) translateY(-50%);
  83. transform-origin: center 0;
  84. -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  85. -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  86. -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  87. transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
  88. .awselect .front_face .icon svg {
  89. width: 10px;
  90. height: 10px; }
  91. .awselect .back_face {
  92. z-index: 2;
  93. position: absolute;
  94. padding: 0px;
  95. -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  96. -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  97. -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  98. transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  99. transform: translateY(20px);
  100. opacity: 0;
  101. float: left;
  102. width: 100%;
  103. max-height: 200px;
  104. overflow: hidden;
  105. display: none; }
  106. .awselect .back_face.overflow {
  107. overflow-y: scroll; }
  108. .awselect .back_face ul {
  109. margin: 0;
  110. float: left;
  111. padding: 0;
  112. width: 100%; }
  113. .awselect .back_face ul li {
  114. float: left;
  115. width: 100%;
  116. display: block; }
  117. .awselect .back_face ul li a {
  118. color: inherit;
  119. opacity: 0.8;
  120. float: left;
  121. width: 100%;
  122. -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  123. -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  124. -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  125. transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
  126. .awselect .back_face ul li a:hover {
  127. background: rgba(0, 0, 0, 0.07);
  128. opacity: 1; }
  129. .awselect.animate {
  130. z-index: 9999; }
  131. .awselect.animate .front_face .icon {
  132. transform: rotate(0deg) translateY(-50%); }
  133. .awselect.animate > .bg {
  134. height: 100%; }
  135. .awselect.animate2 > .bg {
  136. box-shadow: 0px 11px 43px 11px rgba(0, 0, 0, 0.11); }
  137. .awselect.animate2 .back_face {
  138. transform: translateY(0px);
  139. opacity: 1; }
  140. .awselect.hasValue .front_face .placeholder {
  141. transform: translateY(20px);
  142. opacity: 0; }
  143. .awselect.placeholder_animate .front_face .current_value {
  144. opacity: 0; }
  145. .awselect.placeholder_animate2 .front_face .placeholder {
  146. transform: translateY(0);
  147. opacity: 1; }
  148. .awselect.transition_paused {
  149. transition: none !important; }
  150. .aw_cursor_pointer {
  151. float: left;
  152. width: 20px;
  153. height: 20px;
  154. border-radius: 100%;
  155. background: #ddd;
  156. overflow: hidden;
  157. padding: 5px;
  158. -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  159. -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  160. -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  161. transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  162. transform: scale(0.5); }
  163. .aw_cursor_pointer .inner {
  164. float: left;
  165. width: 100%;
  166. height: 0%;
  167. background: #fff;
  168. border-radius: 100%;
  169. -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  170. -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  171. -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  172. transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
  173. .aw_cursor_pointer.animate {
  174. transform: scale(1); }
  175. .aw_cursor_pointer.animate .inner {
  176. height: 100%; }
  177. /*# sourceMappingURL=awselect.css.map */