awselect.css 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  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. .awselect .front_face .placeholder {
  75. position: relative; }
  76. .awselect .front_face .icon {
  77. float: right;
  78. position: absolute;
  79. right: 0px;
  80. top: 50%;
  81. transform: rotate(180deg) translateY(-50%);
  82. transform-origin: center 0;
  83. -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  84. -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  85. -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  86. transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
  87. .awselect .front_face .icon svg {
  88. width: 10px;
  89. height: 10px; }
  90. .awselect .back_face {
  91. z-index: 2;
  92. position: absolute;
  93. padding: 0px;
  94. -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  95. -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  96. -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  97. transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  98. transform: translateY(20px);
  99. opacity: 0;
  100. float: left;
  101. width: 100%;
  102. max-height: 200px;
  103. overflow: hidden;
  104. display: none; }
  105. .awselect .back_face.overflow {
  106. overflow-y: scroll; }
  107. .awselect .back_face ul {
  108. margin: 0;
  109. float: left;
  110. padding: 0;
  111. width: 100%; }
  112. .awselect .back_face ul li {
  113. float: left;
  114. width: 100%;
  115. display: block; }
  116. .awselect .back_face ul li a {
  117. color: inherit;
  118. opacity: 0.8;
  119. float: left;
  120. width: 100%;
  121. -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  122. -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  123. -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  124. transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
  125. .awselect .back_face ul li a:hover {
  126. background: rgba(0, 0, 0, 0.07);
  127. opacity: 1; }
  128. .awselect.animate {
  129. z-index: 9999; }
  130. .awselect.animate .front_face .icon {
  131. transform: rotate(0deg) translateY(-50%); }
  132. .awselect.animate > .bg {
  133. height: 100%; }
  134. .awselect.animate2 > .bg {
  135. box-shadow: 0px 11px 43px 11px rgba(0, 0, 0, 0.11); }
  136. .awselect.animate2 .back_face {
  137. transform: translateY(0px);
  138. opacity: 1; }
  139. .awselect.hasValue .front_face .placeholder {
  140. transform: translateY(20px);
  141. opacity: 0; }
  142. .awselect.placeholder_animate .front_face .current_value {
  143. opacity: 0; }
  144. .awselect.placeholder_animate2 .front_face .placeholder {
  145. transform: translateY(0);
  146. opacity: 1; }
  147. .awselect.transition_paused {
  148. transition: none !important; }
  149. .aw_cursor_pointer {
  150. float: left;
  151. width: 20px;
  152. height: 20px;
  153. border-radius: 100%;
  154. background: #ddd;
  155. overflow: hidden;
  156. padding: 5px;
  157. -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  158. -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  159. -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  160. transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  161. transform: scale(0.5); }
  162. .aw_cursor_pointer .inner {
  163. float: left;
  164. width: 100%;
  165. height: 0%;
  166. background: #fff;
  167. border-radius: 100%;
  168. -webkit-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  169. -moz-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  170. -o-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  171. transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
  172. .aw_cursor_pointer.animate {
  173. transform: scale(1); }
  174. .aw_cursor_pointer.animate .inner {
  175. height: 100%; }
  176. /*# sourceMappingURL=awselect.css.map */