mobiscroll.scroller.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. .dwwb,
  2. .dwwo,
  3. .dwwol {
  4. /*-webkit-backface-visibility: hidden;*/
  5. -webkit-transform: translateZ(0);
  6. }
  7. /* Wheel container wrapper */
  8. .dwc {
  9. max-width: 100%;
  10. vertical-align: middle;
  11. display: inline-block;
  12. overflow: hidden;
  13. -webkit-box-sizing: border-box;
  14. -moz-box-sizing: border-box;
  15. box-sizing: border-box;
  16. }
  17. /* Wheel label */
  18. .dwl {
  19. line-height: 30px;
  20. height: 30px;
  21. top: -30px;
  22. left: 0;
  23. text-align: center;
  24. white-space: nowrap;
  25. position: absolute;
  26. width: 100%;
  27. }
  28. /* Wheel container */
  29. .dwwc {
  30. margin: 0 auto;
  31. position: relative;
  32. zoom: 1;
  33. display: -webkit-box;
  34. display: -webkit-flex;
  35. display: -ms-flexbox;
  36. display: flex;
  37. -webkit-box-pack: center;
  38. -webkit-justify-content: center;
  39. justify-content: center;
  40. }
  41. .dwfl {
  42. max-width: 100%;
  43. -webkit-box-flex: 1;
  44. -webkit-flex: 1 auto;
  45. -ms-flex: 1 auto;
  46. flex: 1 auto;
  47. }
  48. /* Wheels */
  49. .dwwl {
  50. position: relative;
  51. z-index: 5;
  52. }
  53. .dwww {
  54. position: relative;
  55. padding: 1px;
  56. /*overflow: hidden;*/
  57. }
  58. .dww {
  59. overflow: hidden;
  60. position: relative;
  61. }
  62. .dw-bf {
  63. -webkit-backface-visibility: hidden;
  64. -webkit-perspective: 1000px;
  65. backface-visibility: hidden;
  66. perspective: 1000px;
  67. }
  68. .dw-ul {
  69. position: relative;
  70. z-index: 3;
  71. }
  72. .dw-li {
  73. padding: 0 5px;
  74. position: relative;
  75. text-align: center;
  76. white-space: nowrap;
  77. vertical-align: bottom;
  78. opacity: .3;
  79. filter: Alpha(Opacity=30);
  80. cursor: pointer;
  81. }
  82. /* Valid entry */
  83. .dw-li.dw-v,
  84. .dw-li.dw-fv {
  85. opacity: 1;
  86. filter: Alpha(Opacity=100);
  87. }
  88. /* Hidden entry */
  89. .dw-li.dw-h {
  90. visibility: hidden;
  91. }
  92. .dw-i {
  93. position: relative;
  94. height: 100%;
  95. overflow: hidden;
  96. text-overflow: ellipsis;
  97. }
  98. /* Clickpick mode */
  99. .dwwb {
  100. position: absolute;
  101. z-index: 4;
  102. left: 0;
  103. cursor: pointer;
  104. width: 100%;
  105. text-decoration: none;
  106. text-align: center;
  107. opacity: 1;
  108. -webkit-transition: opacity .2s linear;
  109. transition: opacity .2s linear;
  110. }
  111. .dwa .dwwb {
  112. opacity: 0;
  113. }
  114. .dwpm .dwwbp {
  115. top: 0;
  116. }
  117. .dwpm .dwwbm {
  118. bottom: 0;
  119. }
  120. .dwpm .dwwol {
  121. display: none;
  122. }
  123. /* Wheel overlay */
  124. .dwwo {
  125. position: absolute;
  126. z-index: 3;
  127. top: 0;
  128. left: 0;
  129. width: 100%;
  130. height: 100%;
  131. pointer-events: none;
  132. }
  133. /* Background line */
  134. .dwwol {
  135. position: absolute;
  136. z-index: 1;
  137. top: 50%;
  138. left: 0;
  139. width: 100%;
  140. pointer-events: none;
  141. }
  142. /* Liquid mode */
  143. .dw-liq .dwc {
  144. display: block;
  145. }
  146. .dw-liq .dw-tbl {
  147. width: 100%;
  148. table-layout: fixed;
  149. }
  150. /* Hidden label */
  151. .dwhl .dwl {
  152. display: none;
  153. }
  154. /* Hidden select element */
  155. .dw-hsel {
  156. position: absolute;
  157. height: 1px;
  158. width: 1px;
  159. left: 0;
  160. overflow: hidden;
  161. clip: rect(1px,1px,1px,1px);
  162. }
  163. /* Multiple lines */
  164. .dw-ml .dw-li {
  165. overflow: hidden;
  166. }
  167. .dw-ml .dw-li .dw-i {
  168. width: 100%;
  169. height: auto;
  170. display: inline-block;
  171. vertical-align: middle;
  172. white-space: normal;
  173. }
  174. /* Multiple selection */
  175. .dwwms .dw-li {
  176. padding: 0 40px;
  177. }
  178. .dwwms .dwwol {
  179. display: none;
  180. }
  181. .dw-msel:before {
  182. width: 40px;
  183. text-align: center;
  184. position: absolute;
  185. top: 0;
  186. left: 0;
  187. }
  188. /* Select groups */
  189. .dww .dw-w-gr {
  190. padding: 0 5px;
  191. opacity: 1;
  192. font-weight: bold;
  193. text-align: left;
  194. }
  195. /* Default theme */
  196. .mbsc-mobiscroll .dwc {
  197. padding: 2em .25em 0 .25em;
  198. }
  199. .mbsc-mobiscroll .dwl {
  200. color: #4eccc4;
  201. font-size: .75em;
  202. text-transform: uppercase;
  203. }
  204. .mbsc-mobiscroll .dwhl {
  205. padding-top: 0;
  206. }
  207. .mbsc-mobiscroll .dwfl {
  208. padding: .5em .25em;
  209. }
  210. .mbsc-mobiscroll .dw-li {
  211. font-size: 1.375em;
  212. }
  213. .mbsc-mobiscroll .dw-hl {
  214. background: rgba(78,204,196,.3);
  215. }
  216. .mbsc-mobiscroll .dwwol {
  217. border-top: 1px solid #4eccc4;
  218. border-bottom: 1px solid #4eccc4;
  219. }
  220. /* Clickpick mode */
  221. .mbsc-mobiscroll .dwpm .dwwol {
  222. display: block;
  223. }
  224. .mbsc-mobiscroll .dwwb {
  225. color: #4eccc4;
  226. background: #f7f7f7;
  227. }
  228. .mbsc-mobiscroll .dwwbp {
  229. bottom: 0;
  230. top: auto;
  231. }
  232. .mbsc-mobiscroll .dwwbm {
  233. top: 0;
  234. bottom: auto;
  235. }
  236. .mbsc-mobiscroll .dwwb span {
  237. display: none;
  238. }
  239. .mbsc-mobiscroll .dwwb:before {
  240. position: absolute;
  241. left: 0;
  242. top: 0;
  243. width: 100%;
  244. font-size: 24px;
  245. text-align: center;
  246. }
  247. .mbsc-mobiscroll .dwwb.dwb-a:before {
  248. background: rgba(78,204,196,.3);
  249. }
  250. /* Group select */
  251. /* Multiple select */
  252. .mbsc-mobiscroll .dw-w-gr {
  253. font-size: 1.125em;
  254. }
  255. .mbsc-mobiscroll .dw-msel:before {
  256. font-size: 40px;
  257. color: #4eccc4;
  258. }
  259. .mbsc-mobiscroll .dwwms .dwwol {
  260. display: none;
  261. }