jquery-weui.css 62 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073
  1. /**
  2. * jQuery WeUI V0.6.0
  3. * By 言川
  4. * http://lihongxun945.github.io/jquery-weui/
  5. */
  6. .preloader {
  7. width: 20px;
  8. height: 20px;
  9. -webkit-transform-origin: 50%;
  10. transform-origin: 50%;
  11. -webkit-animation: preloader-spin 1s steps(12, end) infinite;
  12. animation: preloader-spin 1s steps(12, end) infinite;
  13. }
  14. .preloader:after {
  15. display: block;
  16. width: 100%;
  17. height: 100%;
  18. content: "";
  19. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  20. background-repeat: no-repeat;
  21. background-position: 50%;
  22. background-size: 100%;
  23. }
  24. @-webkit-keyframes preloader-spin {
  25. 100% {
  26. -webkit-transform: rotate(360deg);
  27. transform: rotate(360deg);
  28. }
  29. }
  30. @keyframes preloader-spin {
  31. 100% {
  32. -webkit-transform: rotate(360deg);
  33. transform: rotate(360deg);
  34. }
  35. }
  36. /*
  37. .hairline(@position, @color) when (@position = top) {
  38. border-top: 1px solid @color;
  39. }
  40. .hairline(@position, @color) when (@position = left) {
  41. border-left: 1px solid @color;
  42. }
  43. .hairline(@position, @color) when (@position = bottom) {
  44. border-bottom: 1px solid @color;
  45. }
  46. .hairline(@position, @color) when (@position = right) {
  47. border-right: 1px solid @color;
  48. }
  49. // For right and bottom
  50. .hairline-remove(@position) when not (@position = left) and not (@position = top) {
  51. border-left: 0;
  52. border-bottom: 0;
  53. }
  54. // For left and top
  55. .hairline-remove(@position) when not (@position = right) and not (@position = bottom) {
  56. border-right: 0;
  57. border-top: 0;
  58. }
  59. // For right and bottom
  60. .hairline-color(@position, @color) when not (@position = left) and not (@position = top) {
  61. border-right-color: @color;
  62. border-bottom-color: @color;
  63. }
  64. // For left and top
  65. .hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) {
  66. border-left-color: @color;
  67. border-top-color: @color;
  68. }
  69. */
  70. /* html {
  71. font-size: 20px;
  72. }
  73. body {
  74. font-size: 16px;
  75. }
  76. @media only screen and (min-width: 400px) {
  77. html {
  78. font-size: 21.33333333px !important;
  79. }
  80. }
  81. @media only screen and (min-width: 414px) {
  82. html {
  83. font-size: 22.08px !important;
  84. }
  85. }
  86. @media only screen and (min-width: 480px) {
  87. html {
  88. font-size: 25.6px !important;
  89. }
  90. } */
  91. /* === Grid === */
  92. .weui-row {
  93. display: -webkit-box;
  94. display: -ms-flexbox;
  95. display: -webkit-flex;
  96. display: flex;
  97. -webkit-box-pack: justify;
  98. -ms-flex-pack: justify;
  99. -webkit-justify-content: space-between;
  100. justify-content: space-between;
  101. -webkit-box-lines: multiple;
  102. -moz-box-lines: multiple;
  103. -webkit-flex-wrap: wrap;
  104. -ms-flex-wrap: wrap;
  105. flex-wrap: wrap;
  106. -webkit-box-align: start;
  107. -ms-flex-align: start;
  108. -webkit-align-items: flex-start;
  109. align-items: flex-start;
  110. }
  111. .weui-row > [class*="col-"] {
  112. box-sizing: border-box;
  113. }
  114. .weui-row .col-auto {
  115. width: 100%;
  116. }
  117. .weui-row .weui-col-100 {
  118. width: 100%;
  119. width: calc((100% - 15px*0) / 1);
  120. }
  121. .weui-row.weui-no-gutter .weui-col-100 {
  122. width: 100%;
  123. }
  124. .weui-row .weui-col-95 {
  125. width: 95%;
  126. width: calc((100% - 15px*0.05263157894736836) / 1.0526315789473684);
  127. }
  128. .weui-row.weui-no-gutter .weui-col-95 {
  129. width: 95%;
  130. }
  131. .weui-row .weui-col-90 {
  132. width: 90%;
  133. width: calc((100% - 15px*0.11111111111111116) / 1.1111111111111112);
  134. }
  135. .weui-row.weui-no-gutter .weui-col-90 {
  136. width: 90%;
  137. }
  138. .weui-row .weui-col-85 {
  139. width: 85%;
  140. width: calc((100% - 15px*0.17647058823529416) / 1.1764705882352942);
  141. }
  142. .weui-row.weui-no-gutter .weui-col-85 {
  143. width: 85%;
  144. }
  145. .weui-row .weui-col-80 {
  146. width: 80%;
  147. width: calc((100% - 15px*0.25) / 1.25);
  148. }
  149. .weui-row.weui-no-gutter .weui-col-80 {
  150. width: 80%;
  151. }
  152. .weui-row .weui-col-75 {
  153. width: 75%;
  154. width: calc((100% - 15px*0.33333333333333326) / 1.3333333333333333);
  155. }
  156. .weui-row.weui-no-gutter .weui-col-75 {
  157. width: 75%;
  158. }
  159. .weui-row .weui-col-66 {
  160. width: 66.66666666666666%;
  161. width: calc((100% - 15px*0.5000000000000002) / 1.5000000000000002);
  162. }
  163. .weui-row.weui-no-gutter .weui-col-66 {
  164. width: 66.66666666666666%;
  165. }
  166. .weui-row .weui-col-60 {
  167. width: 60%;
  168. width: calc((100% - 15px*0.6666666666666667) / 1.6666666666666667);
  169. }
  170. .weui-row.weui-no-gutter .weui-col-60 {
  171. width: 60%;
  172. }
  173. .weui-row .weui-col-50 {
  174. width: 50%;
  175. width: calc((100% - 15px*1) / 2);
  176. }
  177. .weui-row.weui-no-gutter .weui-col-50 {
  178. width: 50%;
  179. }
  180. .weui-row .weui-col-40 {
  181. width: 40%;
  182. width: calc((100% - 15px*1.5) / 2.5);
  183. }
  184. .weui-row.weui-no-gutter .weui-col-40 {
  185. width: 40%;
  186. }
  187. .weui-row .weui-col-33 {
  188. width: 33.333333333333336%;
  189. width: calc((100% - 15px*2) / 3);
  190. }
  191. .weui-row.weui-no-gutter .weui-col-33 {
  192. width: 33.333333333333336%;
  193. }
  194. .weui-row .weui-col-25 {
  195. width: 25%;
  196. width: calc((100% - 15px*3) / 4);
  197. }
  198. .weui-row.weui-no-gutter .weui-col-25 {
  199. width: 25%;
  200. }
  201. .weui-row .weui-col-20 {
  202. width: 20%;
  203. width: calc((100% - 15px*4) / 5);
  204. }
  205. .weui-row.weui-no-gutter .weui-col-20 {
  206. width: 20%;
  207. }
  208. .weui-row .weui-col-15 {
  209. width: 15%;
  210. width: calc((100% - 15px*5.666666666666667) / 6.666666666666667);
  211. }
  212. .weui-row.weui-no-gutter .weui-col-15 {
  213. width: 15%;
  214. }
  215. .weui-row .weui-col-10 {
  216. width: 10%;
  217. width: calc((100% - 15px*9) / 10);
  218. }
  219. .weui-row.weui-no-gutter .weui-col-10 {
  220. width: 10%;
  221. }
  222. .weui-row .weui-col-5 {
  223. width: 5%;
  224. width: calc((100% - 15px*19) / 20);
  225. }
  226. .weui-row.weui-no-gutter .weui-col-5 {
  227. width: 5%;
  228. }
  229. .weui-row .weui-col-auto:nth-last-child(1),
  230. .weui-row .weui-col-auto:nth-last-child(1) ~ .weui-col-auto {
  231. width: 100%;
  232. width: calc((100% - 15px*0) / 1);
  233. }
  234. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(1),
  235. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(1) ~ .weui-col-auto {
  236. width: 100%;
  237. }
  238. .weui-row .weui-col-auto:nth-last-child(2),
  239. .weui-row .weui-col-auto:nth-last-child(2) ~ .weui-col-auto {
  240. width: 50%;
  241. width: calc((100% - 15px*1) / 2);
  242. }
  243. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(2),
  244. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(2) ~ .weui-col-auto {
  245. width: 50%;
  246. }
  247. .weui-row .weui-col-auto:nth-last-child(3),
  248. .weui-row .weui-col-auto:nth-last-child(3) ~ .weui-col-auto {
  249. width: 33.33333333%;
  250. width: calc((100% - 15px*2) / 3);
  251. }
  252. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(3),
  253. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(3) ~ .weui-col-auto {
  254. width: 33.33333333%;
  255. }
  256. .weui-row .weui-col-auto:nth-last-child(4),
  257. .weui-row .weui-col-auto:nth-last-child(4) ~ .weui-col-auto {
  258. width: 25%;
  259. width: calc((100% - 15px*3) / 4);
  260. }
  261. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(4),
  262. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(4) ~ .weui-col-auto {
  263. width: 25%;
  264. }
  265. .weui-row .weui-col-auto:nth-last-child(5),
  266. .weui-row .weui-col-auto:nth-last-child(5) ~ .weui-col-auto {
  267. width: 20%;
  268. width: calc((100% - 15px*4) / 5);
  269. }
  270. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(5),
  271. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(5) ~ .weui-col-auto {
  272. width: 20%;
  273. }
  274. .weui-row .weui-col-auto:nth-last-child(6),
  275. .weui-row .weui-col-auto:nth-last-child(6) ~ .weui-col-auto {
  276. width: 16.66666667%;
  277. width: calc((100% - 15px*5) / 6);
  278. }
  279. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(6),
  280. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(6) ~ .weui-col-auto {
  281. width: 16.66666667%;
  282. }
  283. .weui-row .weui-col-auto:nth-last-child(7),
  284. .weui-row .weui-col-auto:nth-last-child(7) ~ .weui-col-auto {
  285. width: 14.28571429%;
  286. width: calc((100% - 15px*6) / 7);
  287. }
  288. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(7),
  289. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(7) ~ .weui-col-auto {
  290. width: 14.28571429%;
  291. }
  292. .weui-row .weui-col-auto:nth-last-child(8),
  293. .weui-row .weui-col-auto:nth-last-child(8) ~ .weui-col-auto {
  294. width: 12.5%;
  295. width: calc((100% - 15px*7) / 8);
  296. }
  297. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(8),
  298. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(8) ~ .weui-col-auto {
  299. width: 12.5%;
  300. }
  301. .weui-row .weui-col-auto:nth-last-child(9),
  302. .weui-row .weui-col-auto:nth-last-child(9) ~ .weui-col-auto {
  303. width: 11.11111111%;
  304. width: calc((100% - 15px*8) / 9);
  305. }
  306. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(9),
  307. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(9) ~ .weui-col-auto {
  308. width: 11.11111111%;
  309. }
  310. .weui-row .weui-col-auto:nth-last-child(10),
  311. .weui-row .weui-col-auto:nth-last-child(10) ~ .weui-col-auto {
  312. width: 10%;
  313. width: calc((100% - 15px*9) / 10);
  314. }
  315. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(10),
  316. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(10) ~ .weui-col-auto {
  317. width: 10%;
  318. }
  319. .weui-row .weui-col-auto:nth-last-child(11),
  320. .weui-row .weui-col-auto:nth-last-child(11) ~ .weui-col-auto {
  321. width: 9.09090909%;
  322. width: calc((100% - 15px*10) / 11);
  323. }
  324. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(11),
  325. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(11) ~ .weui-col-auto {
  326. width: 9.09090909%;
  327. }
  328. .weui-row .weui-col-auto:nth-last-child(12),
  329. .weui-row .weui-col-auto:nth-last-child(12) ~ .weui-col-auto {
  330. width: 8.33333333%;
  331. width: calc((100% - 15px*11) / 12);
  332. }
  333. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(12),
  334. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(12) ~ .weui-col-auto {
  335. width: 8.33333333%;
  336. }
  337. .weui-row .weui-col-auto:nth-last-child(13),
  338. .weui-row .weui-col-auto:nth-last-child(13) ~ .weui-col-auto {
  339. width: 7.69230769%;
  340. width: calc((100% - 15px*12) / 13);
  341. }
  342. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(13),
  343. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(13) ~ .weui-col-auto {
  344. width: 7.69230769%;
  345. }
  346. .weui-row .weui-col-auto:nth-last-child(14),
  347. .weui-row .weui-col-auto:nth-last-child(14) ~ .weui-col-auto {
  348. width: 7.14285714%;
  349. width: calc((100% - 15px*13) / 14);
  350. }
  351. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(14),
  352. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(14) ~ .weui-col-auto {
  353. width: 7.14285714%;
  354. }
  355. .weui-row .weui-col-auto:nth-last-child(15),
  356. .weui-row .weui-col-auto:nth-last-child(15) ~ .weui-col-auto {
  357. width: 6.66666667%;
  358. width: calc((100% - 15px*14) / 15);
  359. }
  360. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(15),
  361. .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(15) ~ .weui-col-auto {
  362. width: 6.66666667%;
  363. }
  364. @media all and (min-width: 768px) {
  365. .row .tablet-100 {
  366. width: 100%;
  367. width: calc((100% - 15px*0) / 1);
  368. }
  369. .row.no-gutter .tablet-100 {
  370. width: 100%;
  371. }
  372. .row .tablet-95 {
  373. width: 95%;
  374. width: calc((100% - 15px*0.05263157894736836) / 1.0526315789473684);
  375. }
  376. .row.no-gutter .tablet-95 {
  377. width: 95%;
  378. }
  379. .row .tablet-90 {
  380. width: 90%;
  381. width: calc((100% - 15px*0.11111111111111116) / 1.1111111111111112);
  382. }
  383. .row.no-gutter .tablet-90 {
  384. width: 90%;
  385. }
  386. .row .tablet-85 {
  387. width: 85%;
  388. width: calc((100% - 15px*0.17647058823529416) / 1.1764705882352942);
  389. }
  390. .row.no-gutter .tablet-85 {
  391. width: 85%;
  392. }
  393. .row .tablet-80 {
  394. width: 80%;
  395. width: calc((100% - 15px*0.25) / 1.25);
  396. }
  397. .row.no-gutter .tablet-80 {
  398. width: 80%;
  399. }
  400. .row .tablet-75 {
  401. width: 75%;
  402. width: calc((100% - 15px*0.33333333333333326) / 1.3333333333333333);
  403. }
  404. .row.no-gutter .tablet-75 {
  405. width: 75%;
  406. }
  407. .row .tablet-66 {
  408. width: 66.66666666666666%;
  409. width: calc((100% - 15px*0.5000000000000002) / 1.5000000000000002);
  410. }
  411. .row.no-gutter .tablet-66 {
  412. width: 66.66666666666666%;
  413. }
  414. .row .tablet-60 {
  415. width: 60%;
  416. width: calc((100% - 15px*0.6666666666666667) / 1.6666666666666667);
  417. }
  418. .row.no-gutter .tablet-60 {
  419. width: 60%;
  420. }
  421. .row .tablet-50 {
  422. width: 50%;
  423. width: calc((100% - 15px*1) / 2);
  424. }
  425. .row.no-gutter .tablet-50 {
  426. width: 50%;
  427. }
  428. .row .tablet-40 {
  429. width: 40%;
  430. width: calc((100% - 15px*1.5) / 2.5);
  431. }
  432. .row.no-gutter .tablet-40 {
  433. width: 40%;
  434. }
  435. .row .tablet-33 {
  436. width: 33.333333333333336%;
  437. width: calc((100% - 15px*2) / 3);
  438. }
  439. .row.no-gutter .tablet-33 {
  440. width: 33.333333333333336%;
  441. }
  442. .row .tablet-25 {
  443. width: 25%;
  444. width: calc((100% - 15px*3) / 4);
  445. }
  446. .row.no-gutter .tablet-25 {
  447. width: 25%;
  448. }
  449. .row .tablet-20 {
  450. width: 20%;
  451. width: calc((100% - 15px*4) / 5);
  452. }
  453. .row.no-gutter .tablet-20 {
  454. width: 20%;
  455. }
  456. .row .tablet-15 {
  457. width: 15%;
  458. width: calc((100% - 15px*5.666666666666667) / 6.666666666666667);
  459. }
  460. .row.no-gutter .tablet-15 {
  461. width: 15%;
  462. }
  463. .row .tablet-10 {
  464. width: 10%;
  465. width: calc((100% - 15px*9) / 10);
  466. }
  467. .row.no-gutter .tablet-10 {
  468. width: 10%;
  469. }
  470. .row .tablet-5 {
  471. width: 5%;
  472. width: calc((100% - 15px*19) / 20);
  473. }
  474. .row.no-gutter .tablet-5 {
  475. width: 5%;
  476. }
  477. .row .tablet-auto:nth-last-child(1),
  478. .row .tablet-auto:nth-last-child(1) ~ .col-auto {
  479. width: 100%;
  480. width: calc((100% - 15px*0) / 1);
  481. }
  482. .row.no-gutter .tablet-auto:nth-last-child(1),
  483. .row.no-gutter .tablet-auto:nth-last-child(1) ~ .tablet-auto {
  484. width: 100%;
  485. }
  486. .row .tablet-auto:nth-last-child(2),
  487. .row .tablet-auto:nth-last-child(2) ~ .col-auto {
  488. width: 50%;
  489. width: calc((100% - 15px*1) / 2);
  490. }
  491. .row.no-gutter .tablet-auto:nth-last-child(2),
  492. .row.no-gutter .tablet-auto:nth-last-child(2) ~ .tablet-auto {
  493. width: 50%;
  494. }
  495. .row .tablet-auto:nth-last-child(3),
  496. .row .tablet-auto:nth-last-child(3) ~ .col-auto {
  497. width: 33.33333333%;
  498. width: calc((100% - 15px*2) / 3);
  499. }
  500. .row.no-gutter .tablet-auto:nth-last-child(3),
  501. .row.no-gutter .tablet-auto:nth-last-child(3) ~ .tablet-auto {
  502. width: 33.33333333%;
  503. }
  504. .row .tablet-auto:nth-last-child(4),
  505. .row .tablet-auto:nth-last-child(4) ~ .col-auto {
  506. width: 25%;
  507. width: calc((100% - 15px*3) / 4);
  508. }
  509. .row.no-gutter .tablet-auto:nth-last-child(4),
  510. .row.no-gutter .tablet-auto:nth-last-child(4) ~ .tablet-auto {
  511. width: 25%;
  512. }
  513. .row .tablet-auto:nth-last-child(5),
  514. .row .tablet-auto:nth-last-child(5) ~ .col-auto {
  515. width: 20%;
  516. width: calc((100% - 15px*4) / 5);
  517. }
  518. .row.no-gutter .tablet-auto:nth-last-child(5),
  519. .row.no-gutter .tablet-auto:nth-last-child(5) ~ .tablet-auto {
  520. width: 20%;
  521. }
  522. .row .tablet-auto:nth-last-child(6),
  523. .row .tablet-auto:nth-last-child(6) ~ .col-auto {
  524. width: 16.66666667%;
  525. width: calc((100% - 15px*5) / 6);
  526. }
  527. .row.no-gutter .tablet-auto:nth-last-child(6),
  528. .row.no-gutter .tablet-auto:nth-last-child(6) ~ .tablet-auto {
  529. width: 16.66666667%;
  530. }
  531. .row .tablet-auto:nth-last-child(7),
  532. .row .tablet-auto:nth-last-child(7) ~ .col-auto {
  533. width: 14.28571429%;
  534. width: calc((100% - 15px*6) / 7);
  535. }
  536. .row.no-gutter .tablet-auto:nth-last-child(7),
  537. .row.no-gutter .tablet-auto:nth-last-child(7) ~ .tablet-auto {
  538. width: 14.28571429%;
  539. }
  540. .row .tablet-auto:nth-last-child(8),
  541. .row .tablet-auto:nth-last-child(8) ~ .col-auto {
  542. width: 12.5%;
  543. width: calc((100% - 15px*7) / 8);
  544. }
  545. .row.no-gutter .tablet-auto:nth-last-child(8),
  546. .row.no-gutter .tablet-auto:nth-last-child(8) ~ .tablet-auto {
  547. width: 12.5%;
  548. }
  549. .row .tablet-auto:nth-last-child(9),
  550. .row .tablet-auto:nth-last-child(9) ~ .col-auto {
  551. width: 11.11111111%;
  552. width: calc((100% - 15px*8) / 9);
  553. }
  554. .row.no-gutter .tablet-auto:nth-last-child(9),
  555. .row.no-gutter .tablet-auto:nth-last-child(9) ~ .tablet-auto {
  556. width: 11.11111111%;
  557. }
  558. .row .tablet-auto:nth-last-child(10),
  559. .row .tablet-auto:nth-last-child(10) ~ .col-auto {
  560. width: 10%;
  561. width: calc((100% - 15px*9) / 10);
  562. }
  563. .row.no-gutter .tablet-auto:nth-last-child(10),
  564. .row.no-gutter .tablet-auto:nth-last-child(10) ~ .tablet-auto {
  565. width: 10%;
  566. }
  567. .row .tablet-auto:nth-last-child(11),
  568. .row .tablet-auto:nth-last-child(11) ~ .col-auto {
  569. width: 9.09090909%;
  570. width: calc((100% - 15px*10) / 11);
  571. }
  572. .row.no-gutter .tablet-auto:nth-last-child(11),
  573. .row.no-gutter .tablet-auto:nth-last-child(11) ~ .tablet-auto {
  574. width: 9.09090909%;
  575. }
  576. .row .tablet-auto:nth-last-child(12),
  577. .row .tablet-auto:nth-last-child(12) ~ .col-auto {
  578. width: 8.33333333%;
  579. width: calc((100% - 15px*11) / 12);
  580. }
  581. .row.no-gutter .tablet-auto:nth-last-child(12),
  582. .row.no-gutter .tablet-auto:nth-last-child(12) ~ .tablet-auto {
  583. width: 8.33333333%;
  584. }
  585. .row .tablet-auto:nth-last-child(13),
  586. .row .tablet-auto:nth-last-child(13) ~ .col-auto {
  587. width: 7.69230769%;
  588. width: calc((100% - 15px*12) / 13);
  589. }
  590. .row.no-gutter .tablet-auto:nth-last-child(13),
  591. .row.no-gutter .tablet-auto:nth-last-child(13) ~ .tablet-auto {
  592. width: 7.69230769%;
  593. }
  594. .row .tablet-auto:nth-last-child(14),
  595. .row .tablet-auto:nth-last-child(14) ~ .col-auto {
  596. width: 7.14285714%;
  597. width: calc((100% - 15px*13) / 14);
  598. }
  599. .row.no-gutter .tablet-auto:nth-last-child(14),
  600. .row.no-gutter .tablet-auto:nth-last-child(14) ~ .tablet-auto {
  601. width: 7.14285714%;
  602. }
  603. .row .tablet-auto:nth-last-child(15),
  604. .row .tablet-auto:nth-last-child(15) ~ .col-auto {
  605. width: 6.66666667%;
  606. width: calc((100% - 15px*14) / 15);
  607. }
  608. .row.no-gutter .tablet-auto:nth-last-child(15),
  609. .row.no-gutter .tablet-auto:nth-last-child(15) ~ .tablet-auto {
  610. width: 6.66666667%;
  611. }
  612. }
  613. .weui_dialog,
  614. .weui_toast {
  615. -webkit-transition-duration: .2s;
  616. transition-duration: .2s;
  617. opacity: 0;
  618. -webkit-transform: scale(0.9);
  619. transform: scale(0.9);
  620. visibility: hidden;
  621. margin: 0;
  622. left: 7.5%;
  623. top: 30%;
  624. z-index: 100;
  625. }
  626. .weui_dialog .weui_btn_dialog + .weui_btn_dialog,
  627. .weui_toast .weui_btn_dialog + .weui_btn_dialog {
  628. position: relative;
  629. }
  630. .weui_dialog .weui_btn_dialog + .weui_btn_dialog:after,
  631. .weui_toast .weui_btn_dialog + .weui_btn_dialog:after {
  632. content: " ";
  633. position: absolute;
  634. left: 0;
  635. top: 0;
  636. width: 1px;
  637. height: 100%;
  638. border-left: 1px solid #D5D5D6;
  639. color: #D5D5D6;
  640. -webkit-transform-origin: 0 0;
  641. transform-origin: 0 0;
  642. -webkit-transform: scaleX(0.5);
  643. transform: scaleX(0.5);
  644. }
  645. .weui_dialog.weui_dialog_visible,
  646. .weui_toast.weui_dialog_visible,
  647. .weui_dialog.weui_toast_visible,
  648. .weui_toast.weui_toast_visible {
  649. opacity: 1;
  650. visibility: visible;
  651. -webkit-transform: scale(1);
  652. transform: scale(1);
  653. }
  654. .weui_toast {
  655. left: 50%;
  656. top: 35%;
  657. margin-left: -3.8em;
  658. }
  659. .weui_toast_forbidden {
  660. color: #F76260;
  661. }
  662. .weui_toast_cancel .weui_icon_toast:before {
  663. content: "\EA0D";
  664. }
  665. .weui_toast_forbidden .weui_icon_toast:before {
  666. content: "\EA0B";
  667. color: #F76260;
  668. }
  669. .weui_mask {
  670. opacity: 0;
  671. -webkit-transition-duration: .3s;
  672. transition-duration: .3s;
  673. visibility: hidden;
  674. z-index: 10;
  675. }
  676. .weui_mask.weui_mask_visible {
  677. opacity: 1;
  678. visibility: visible;
  679. }
  680. .weui-prompt-input {
  681. padding: 4px 6px;
  682. border: 1px solid #ccc;
  683. box-sizing: border-box;
  684. height: 2em;
  685. width: 80%;
  686. margin-top: 10px;
  687. }
  688. .weui-pull-to-refresh {
  689. margin-top: -50px;
  690. -webkit-transition: -webkit-transform .4s;
  691. transition: -webkit-transform .4s;
  692. transition: transform .4s;
  693. transition: transform .4s, -webkit-transform .4s;
  694. }
  695. .weui-pull-to-refresh.refreshing {
  696. -webkit-transform: translate3d(0, 50px, 0);
  697. transform: translate3d(0, 50px, 0);
  698. }
  699. .weui-pull-to-refresh.touching {
  700. -webkit-transition-duration: 0s;
  701. transition-duration: 0s;
  702. }
  703. .weui-pull-to-refresh-layer {
  704. height: 30px;
  705. line-height: 30px;
  706. padding: 10px;
  707. text-align: center;
  708. }
  709. .weui-pull-to-refresh-layer .down {
  710. display: inline-block;
  711. }
  712. .weui-pull-to-refresh-layer .up,
  713. .weui-pull-to-refresh-layer .refresh {
  714. display: none;
  715. }
  716. .weui-pull-to-refresh-layer .pull-to-refresh-arrow {
  717. display: inline-block;
  718. z-index: 10;
  719. width: 20px;
  720. height: 20px;
  721. margin-right: 4px;
  722. vertical-align: -4px;
  723. background: no-repeat center;
  724. background-size: 13px 20px;
  725. -webkit-transition-duration: 300ms;
  726. transition-duration: 300ms;
  727. -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
  728. transform: rotate(0deg) translate3d(0, 0, 0);
  729. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2026%2040'%3E%3Cpolygon%20points%3D'9%2C22%209%2C0%2017%2C0%2017%2C22%2026%2C22%2013.5%2C40%200%2C22'%20fill%3D'%238c8c8c'%2F%3E%3C%2Fsvg%3E");
  730. }
  731. .weui-pull-to-refresh-layer .pull-to-refresh-preloader {
  732. display: none;
  733. vertical-align: -4px;
  734. margin-right: 4px;
  735. width: 20px;
  736. height: 20px;
  737. -webkit-transform-origin: 50%;
  738. transform-origin: 50%;
  739. -webkit-animation: preloader-spin 1s steps(12, end) infinite;
  740. animation: preloader-spin 1s steps(12, end) infinite;
  741. }
  742. .weui-pull-to-refresh-layer .pull-to-refresh-preloader:after {
  743. display: block;
  744. width: 100%;
  745. height: 100%;
  746. content: "";
  747. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  748. background-repeat: no-repeat;
  749. background-position: 50%;
  750. background-size: 100%;
  751. }
  752. .pull-up .weui-pull-to-refresh-layer .down,
  753. .refreshing .weui-pull-to-refresh-layer .down {
  754. display: none;
  755. }
  756. .pull-up .weui-pull-to-refresh-layer .pull-to-refresh-arrow {
  757. display: inline-block;
  758. -webkit-transform: rotate(180deg) translate3d(0, 0, 0);
  759. transform: rotate(180deg) translate3d(0, 0, 0);
  760. }
  761. .pull-up .weui-pull-to-refresh-layer .up {
  762. display: inline-block;
  763. }
  764. .pull-down .weui-pull-to-refresh-layer .pull-to-refresh-arrow {
  765. display: inline-block;
  766. }
  767. .pull-down .weui-pull-to-refresh-layer .down {
  768. display: inline-block;
  769. }
  770. .refreshing .weui-pull-to-refresh-layer .pull-to-refresh-arrow {
  771. display: none;
  772. }
  773. .refreshing .weui-pull-to-refresh-layer .pull-to-refresh-preloader {
  774. display: inline-block;
  775. }
  776. .refreshing .weui-pull-to-refresh-layer .refresh {
  777. display: inline-block;
  778. }
  779. @keyframes preloader-spin {
  780. 100% {
  781. -webkit-transform: rotate(360deg);
  782. transform: rotate(360deg);
  783. }
  784. }
  785. .weui_tab_bd_item.weui-pull-to-refresh {
  786. position: absolute;
  787. top: 50px;
  788. }
  789. .weui-infinite-scroll {
  790. height: 24px;
  791. line-height: 24px;
  792. padding: 10px;
  793. text-align: center;
  794. }
  795. .weui-infinite-scroll .infinite-preloader {
  796. display: inline-block;
  797. margin-right: 4px;
  798. vertical-align: -4px;
  799. width: 20px;
  800. height: 20px;
  801. -webkit-transform-origin: 50%;
  802. transform-origin: 50%;
  803. -webkit-animation: preloader-spin 1s steps(12, end) infinite;
  804. animation: preloader-spin 1s steps(12, end) infinite;
  805. }
  806. .weui-infinite-scroll .infinite-preloader:after {
  807. display: block;
  808. width: 100%;
  809. height: 100%;
  810. content: "";
  811. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  812. background-repeat: no-repeat;
  813. background-position: 50%;
  814. background-size: 100%;
  815. }
  816. .weui_tab {
  817. overflow: hidden;
  818. }
  819. .weui_navbar_item {
  820. color: #888;
  821. }
  822. .weui_navbar_item.weui_bar_item_on {
  823. color: #666;
  824. }
  825. .weui_tab_bd .weui_tab_bd_item {
  826. display: none;
  827. height: 100%;
  828. overflow: auto;
  829. }
  830. .weui_tab_bd .weui_tab_bd_item.weui_tab_bd_item_active {
  831. display: block;
  832. }
  833. .weui_navbar {
  834. z-index: 100;
  835. }
  836. /* === Columns Picker === */
  837. .weui-picker-modal {
  838. width: 100%;
  839. position: absolute;
  840. z-index: 100;
  841. bottom: 0;
  842. text-align: center;
  843. border-radius: 0;
  844. opacity: 0.6;
  845. color: #3d4145;
  846. -webkit-transition-duration: .3s;
  847. transition-duration: .3s;
  848. height: 13rem;
  849. background: #EFEFF4;
  850. -webkit-transform: translate3d(0, 100%, 0);
  851. transform: translate3d(0, 100%, 0);
  852. -webkit-transition-property: opacity, -webkit-transform;
  853. transition-property: opacity, -webkit-transform;
  854. transition-property: transform, opacity;
  855. transition-property: transform, opacity, -webkit-transform;
  856. }
  857. .weui-picker-modal.weui-picker-modal-visible {
  858. opacity: 1;
  859. -webkit-transform: translate3d(0, 0, 0);
  860. transform: translate3d(0, 0, 0);
  861. }
  862. .weui-picker-modal .picker-modal-inner {
  863. position: relative;
  864. height: 10.8rem;
  865. }
  866. .weui-picker-modal .toolbar {
  867. position: relative;
  868. width: 100%;
  869. font-size: .85rem;
  870. line-height: 1.5;
  871. color: #3d4145;
  872. background: #f7f7f8;
  873. }
  874. .weui-picker-modal .toolbar:before {
  875. content: '';
  876. position: absolute;
  877. left: 0;
  878. top: 0;
  879. bottom: auto;
  880. right: auto;
  881. height: 1px;
  882. width: 100%;
  883. background-color: #d9d9d9;
  884. display: block;
  885. z-index: 15;
  886. -webkit-transform-origin: 50% 0%;
  887. transform-origin: 50% 0%;
  888. }
  889. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  890. .weui-picker-modal .toolbar:before {
  891. -webkit-transform: scaleY(0.5);
  892. transform: scaleY(0.5);
  893. }
  894. }
  895. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  896. .weui-picker-modal .toolbar:before {
  897. -webkit-transform: scaleY(0.33);
  898. transform: scaleY(0.33);
  899. }
  900. }
  901. .weui-picker-modal .picker-columns {
  902. width: 100%;
  903. height: 13rem;
  904. z-index: 11500;
  905. }
  906. .weui-picker-modal .picker-columns.picker-modal-inline,
  907. .popover .weui-picker-modal .picker-columns {
  908. height: 10rem;
  909. }
  910. @media (orientation: landscape) and (max-height: 415px) {
  911. .weui-picker-modal .picker-columns:not(.picker-modal-inline) {
  912. height: 10rem;
  913. }
  914. }
  915. .weui-picker-modal .popover.popover-picker-columns {
  916. width: 14rem;
  917. }
  918. .weui-picker-modal .picker-items {
  919. display: -webkit-box;
  920. display: -ms-flexbox;
  921. display: -webkit-flex;
  922. display: flex;
  923. -webkit-box-pack: center;
  924. -ms-flex-pack: center;
  925. -webkit-justify-content: center;
  926. justify-content: center;
  927. width: 100%;
  928. padding: 0;
  929. text-align: right;
  930. font-size: 1rem;
  931. font-weight: normal;
  932. -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
  933. -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
  934. }
  935. .weui-picker-modal .bar + .picker-items {
  936. height: 10.8rem;
  937. }
  938. .weui-picker-modal .picker-items-col {
  939. overflow: hidden;
  940. position: relative;
  941. max-height: 100%;
  942. }
  943. .weui-picker-modal .picker-items-col.picker-items-col-left {
  944. text-align: left;
  945. }
  946. .weui-picker-modal .picker-items-col.picker-items-col-center {
  947. text-align: center;
  948. }
  949. .weui-picker-modal .picker-items-col.picker-items-col-right {
  950. text-align: right;
  951. }
  952. .weui-picker-modal .picker-items-col.picker-items-col-divider {
  953. color: #3d4145;
  954. display: -webkit-box;
  955. display: -ms-flexbox;
  956. display: -webkit-flex;
  957. display: flex;
  958. -webkit-box-align: center;
  959. -ms-flex-align: center;
  960. -webkit-align-items: center;
  961. align-items: center;
  962. }
  963. .weui-picker-modal .picker-items-col-wrapper {
  964. -webkit-transition: 300ms;
  965. transition: 300ms;
  966. -webkit-transition-timing-function: ease-out;
  967. transition-timing-function: ease-out;
  968. }
  969. .weui-picker-modal .picker-item {
  970. height: 32px;
  971. line-height: 32px;
  972. padding: 0 10px;
  973. white-space: nowrap;
  974. position: relative;
  975. overflow: hidden;
  976. text-overflow: ellipsis;
  977. color: #9b9b9b;
  978. left: 0;
  979. top: 0;
  980. width: 100%;
  981. box-sizing: border-box;
  982. -webkit-transition: 300ms;
  983. transition: 300ms;
  984. }
  985. .picker-items-col-absolute .weui-picker-modal .picker-item {
  986. position: absolute;
  987. }
  988. .weui-picker-modal .picker-item.picker-item-far {
  989. pointer-events: none;
  990. }
  991. .weui-picker-modal .picker-item.picker-selected {
  992. color: #3d4145;
  993. -webkit-transform: translate3d(0, 0, 0);
  994. transform: translate3d(0, 0, 0);
  995. -webkit-transform: rotateX(0deg);
  996. transform: rotateX(0deg);
  997. }
  998. .weui-picker-modal .picker-center-highlight {
  999. height: 32px;
  1000. box-sizing: border-box;
  1001. position: absolute;
  1002. left: 0;
  1003. width: 100%;
  1004. top: 50%;
  1005. margin-top: -16px;
  1006. pointer-events: none;
  1007. }
  1008. .weui-picker-modal .picker-center-highlight:before {
  1009. content: '';
  1010. position: absolute;
  1011. left: 0;
  1012. top: 0;
  1013. bottom: auto;
  1014. right: auto;
  1015. height: 1px;
  1016. width: 100%;
  1017. background-color: #D9D9D9;
  1018. display: block;
  1019. z-index: 15;
  1020. -webkit-transform-origin: 50% 0%;
  1021. transform-origin: 50% 0%;
  1022. }
  1023. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  1024. .weui-picker-modal .picker-center-highlight:before {
  1025. -webkit-transform: scaleY(0.5);
  1026. transform: scaleY(0.5);
  1027. }
  1028. }
  1029. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  1030. .weui-picker-modal .picker-center-highlight:before {
  1031. -webkit-transform: scaleY(0.33);
  1032. transform: scaleY(0.33);
  1033. }
  1034. }
  1035. .weui-picker-modal .picker-center-highlight:after {
  1036. content: '';
  1037. position: absolute;
  1038. left: 0;
  1039. bottom: 0;
  1040. right: auto;
  1041. top: auto;
  1042. height: 1px;
  1043. width: 100%;
  1044. background-color: #D9D9D9;
  1045. display: block;
  1046. z-index: 15;
  1047. -webkit-transform-origin: 50% 100%;
  1048. transform-origin: 50% 100%;
  1049. }
  1050. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  1051. .weui-picker-modal .picker-center-highlight:after {
  1052. -webkit-transform: scaleY(0.5);
  1053. transform: scaleY(0.5);
  1054. }
  1055. }
  1056. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  1057. .weui-picker-modal .picker-center-highlight:after {
  1058. -webkit-transform: scaleY(0.33);
  1059. transform: scaleY(0.33);
  1060. }
  1061. }
  1062. .weui-picker-modal .picker-3d .picker-items {
  1063. overflow: hidden;
  1064. -webkit-perspective: 1200px;
  1065. perspective: 1200px;
  1066. }
  1067. .weui-picker-modal .picker-3d .picker-items-col,
  1068. .weui-picker-modal .picker-3d .picker-items-col-wrapper,
  1069. .weui-picker-modal .picker-3d .picker-item {
  1070. -webkit-transform-style: preserve-3d;
  1071. transform-style: preserve-3d;
  1072. }
  1073. .weui-picker-modal .picker-3d .picker-items-col {
  1074. overflow: visible;
  1075. }
  1076. .weui-picker-modal .picker-3d .picker-item {
  1077. -webkit-transform-origin: center center -110px;
  1078. transform-origin: center center -110px;
  1079. -webkit-backface-visibility: hidden;
  1080. backface-visibility: hidden;
  1081. -webkit-transition-timing-function: ease-out;
  1082. transition-timing-function: ease-out;
  1083. }
  1084. .weui-picker-modal .title {
  1085. position: absolute;
  1086. display: block;
  1087. width: 100%;
  1088. padding: 0;
  1089. font-size: .85rem;
  1090. font-weight: normal;
  1091. line-height: 2.2rem;
  1092. color: #3d4145;
  1093. text-align: center;
  1094. white-space: nowrap;
  1095. }
  1096. .weui-picker-modal .picker-button {
  1097. position: absolute;
  1098. right: 0;
  1099. box-sizing: border-box;
  1100. height: 2.2rem;
  1101. line-height: 2.2rem;
  1102. color: #04BE02;
  1103. z-index: 1;
  1104. padding: 0 .5rem;
  1105. }
  1106. .weui-picker-overlay,
  1107. .weui-picker-container {
  1108. position: fixed;
  1109. bottom: 0;
  1110. left: 0;
  1111. right: 0;
  1112. height: 0;
  1113. width: 100%;
  1114. }
  1115. .city-picker .col-province {
  1116. width: 5rem;
  1117. }
  1118. .city-picker .col-city {
  1119. width: 6rem;
  1120. }
  1121. .city-picker .col-district {
  1122. width: 5rem;
  1123. }
  1124. .weui-picker-container .weui_cells {
  1125. margin: 0;
  1126. text-align: left;
  1127. }
  1128. .weui-select-modal {
  1129. height: auto;
  1130. }
  1131. .weui-select-modal .weui_cells {
  1132. overflow-y: auto;
  1133. overflow-x: hidden;
  1134. max-height: 16rem;
  1135. }
  1136. .weui-select-modal .weui_cells:after {
  1137. display: none;
  1138. }
  1139. /* === Calendar === */
  1140. .weui-picker-calendar {
  1141. background: #fff;
  1142. height: 15rem;
  1143. width: 100%;
  1144. overflow: hidden;
  1145. }
  1146. @media (orientation: landscape) and (max-height: 415px) {
  1147. .weui-picker-calendar:not(.picker-modal-inline) {
  1148. height: 11rem;
  1149. }
  1150. }
  1151. .weui-picker-calendar .picker-modal-inner {
  1152. overflow: hidden;
  1153. height: 12.8rem;
  1154. }
  1155. .picker-calendar-week-days {
  1156. height: .9rem;
  1157. background: #f7f7f8;
  1158. display: -webkit-box;
  1159. display: -ms-flexbox;
  1160. display: -webkit-flex;
  1161. display: flex;
  1162. font-size: 11px;
  1163. box-sizing: border-box;
  1164. position: relative;
  1165. }
  1166. .picker-calendar-week-days:after {
  1167. content: '';
  1168. position: absolute;
  1169. left: 0;
  1170. bottom: 0;
  1171. right: auto;
  1172. top: auto;
  1173. height: 1px;
  1174. width: 100%;
  1175. background-color: #c4c4c4;
  1176. display: block;
  1177. z-index: 15;
  1178. -webkit-transform-origin: 50% 100%;
  1179. transform-origin: 50% 100%;
  1180. }
  1181. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  1182. .picker-calendar-week-days:after {
  1183. -webkit-transform: scaleY(0.5);
  1184. transform: scaleY(0.5);
  1185. }
  1186. }
  1187. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  1188. .picker-calendar-week-days:after {
  1189. -webkit-transform: scaleY(0.33);
  1190. transform: scaleY(0.33);
  1191. }
  1192. }
  1193. .picker-calendar-week-days .picker-calendar-week-day {
  1194. -webkit-flex-shrink: 1;
  1195. -ms-flex: 0 1 auto;
  1196. -webkit-flex-shrink: 1;
  1197. -ms-flex-negative: 1;
  1198. flex-shrink: 1;
  1199. width: 14.28571429%;
  1200. width: calc(100% / 7);
  1201. line-height: 17px;
  1202. text-align: center;
  1203. }
  1204. .picker-calendar-week-days + .picker-calendar-months {
  1205. height: 11.9rem;
  1206. }
  1207. .picker-calendar-months {
  1208. width: 100%;
  1209. height: 100%;
  1210. overflow: hidden;
  1211. position: relative;
  1212. }
  1213. .picker-calendar-months-wrapper {
  1214. position: relative;
  1215. width: 100%;
  1216. height: 100%;
  1217. -webkit-transition: 300ms;
  1218. transition: 300ms;
  1219. }
  1220. .picker-calendar-month {
  1221. display: -webkit-box;
  1222. display: -ms-flexbox;
  1223. display: -webkit-flex;
  1224. display: flex;
  1225. -webkit-box-orient: vertical;
  1226. -ms-flex-direction: column;
  1227. -webkit-flex-direction: column;
  1228. flex-direction: column;
  1229. width: 100%;
  1230. height: 100%;
  1231. position: absolute;
  1232. left: 0;
  1233. top: 0;
  1234. }
  1235. .picker-calendar-row {
  1236. height: 16.66666667%;
  1237. height: calc(100% / 6);
  1238. display: -webkit-box;
  1239. display: -ms-flexbox;
  1240. display: -webkit-flex;
  1241. display: flex;
  1242. -webkit-flex-shrink: 1;
  1243. -ms-flex: 0 1 auto;
  1244. -webkit-flex-shrink: 1;
  1245. -ms-flex-negative: 1;
  1246. flex-shrink: 1;
  1247. width: 100%;
  1248. position: relative;
  1249. }
  1250. .picker-calendar-row:after {
  1251. content: '';
  1252. position: absolute;
  1253. left: 0;
  1254. bottom: 0;
  1255. right: auto;
  1256. top: auto;
  1257. height: 1px;
  1258. width: 100%;
  1259. background-color: #ccc;
  1260. display: block;
  1261. z-index: 15;
  1262. -webkit-transform-origin: 50% 100%;
  1263. transform-origin: 50% 100%;
  1264. }
  1265. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  1266. .picker-calendar-row:after {
  1267. -webkit-transform: scaleY(0.5);
  1268. transform: scaleY(0.5);
  1269. }
  1270. }
  1271. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  1272. .picker-calendar-row:after {
  1273. -webkit-transform: scaleY(0.33);
  1274. transform: scaleY(0.33);
  1275. }
  1276. }
  1277. .picker-calendar-row:last-child:after {
  1278. display: none;
  1279. }
  1280. .picker-calendar-day {
  1281. -webkit-flex-shrink: 1;
  1282. -ms-flex: 0 1 auto;
  1283. -webkit-flex-shrink: 1;
  1284. -ms-flex-negative: 1;
  1285. flex-shrink: 1;
  1286. display: -webkit-box;
  1287. display: -ms-flexbox;
  1288. display: -webkit-flex;
  1289. display: flex;
  1290. -webkit-box-pack: center;
  1291. -ms-flex-pack: center;
  1292. -webkit-justify-content: center;
  1293. justify-content: center;
  1294. -webkit-box-align: center;
  1295. -ms-flex-align: center;
  1296. -webkit-align-items: center;
  1297. align-items: center;
  1298. box-sizing: border-box;
  1299. width: 14.28571429%;
  1300. width: calc(100% / 7);
  1301. text-align: center;
  1302. color: #3d4145;
  1303. font-size: 15px;
  1304. cursor: pointer;
  1305. }
  1306. .picker-calendar-day.picker-calendar-day-prev,
  1307. .picker-calendar-day.picker-calendar-day-next {
  1308. color: #ccc;
  1309. }
  1310. .picker-calendar-day.picker-calendar-day-disabled {
  1311. color: #d4d4d4;
  1312. cursor: auto;
  1313. }
  1314. .picker-calendar-day.picker-calendar-day-today span {
  1315. background: #e3e3e3;
  1316. }
  1317. .picker-calendar-day.picker-calendar-day-selected span {
  1318. background: #04BE02;
  1319. color: #fff;
  1320. }
  1321. .picker-calendar-day span {
  1322. display: inline-block;
  1323. border-radius: 100%;
  1324. width: 30px;
  1325. height: 30px;
  1326. line-height: 30px;
  1327. }
  1328. .picker-calendar-month-picker,
  1329. .picker-calendar-year-picker {
  1330. display: -webkit-box;
  1331. display: -ms-flexbox;
  1332. display: -webkit-flex;
  1333. display: flex;
  1334. -webkit-box-align: center;
  1335. -ms-flex-align: center;
  1336. -webkit-align-items: center;
  1337. align-items: center;
  1338. -webkit-box-pack: justify;
  1339. -ms-flex-pack: justify;
  1340. -webkit-justify-content: space-between;
  1341. justify-content: space-between;
  1342. width: 50%;
  1343. max-width: 200px;
  1344. -webkit-flex-shrink: 10;
  1345. -ms-flex: 0 10 auto;
  1346. -webkit-flex-shrink: 10;
  1347. -ms-flex-negative: 10;
  1348. flex-shrink: 10;
  1349. }
  1350. .picker-calendar-month-picker a.icon-only,
  1351. .picker-calendar-year-picker a.icon-only {
  1352. min-width: 36px;
  1353. }
  1354. .picker-calendar-month-picker span,
  1355. .picker-calendar-year-picker span {
  1356. -webkit-flex-shrink: 1;
  1357. -ms-flex: 0 1 auto;
  1358. -webkit-flex-shrink: 1;
  1359. -ms-flex-negative: 1;
  1360. flex-shrink: 1;
  1361. position: relative;
  1362. overflow: hidden;
  1363. text-overflow: ellipsis;
  1364. }
  1365. .popover .picker-calendar .picker-calendar-week-days,
  1366. .picker-calendar.picker-modal-inline .picker-calendar-week-days {
  1367. background: none;
  1368. }
  1369. .popover .picker-calendar .toolbar:before,
  1370. .picker-calendar.picker-modal-inline .toolbar:before,
  1371. .popover .picker-calendar .picker-calendar-week-days:before,
  1372. .picker-calendar.picker-modal-inline .picker-calendar-week-days:before {
  1373. display: none;
  1374. }
  1375. .popover .picker-calendar .toolbar:after,
  1376. .picker-calendar.picker-modal-inline .toolbar:after,
  1377. .popover .picker-calendar .picker-calendar-week-days:after,
  1378. .picker-calendar.picker-modal-inline .picker-calendar-week-days:after {
  1379. display: none;
  1380. }
  1381. .popover .picker-calendar .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
  1382. .picker-calendar.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
  1383. .popover .picker-calendar .picker-calendar-week-days ~ .picker-calendar-months:before,
  1384. .picker-calendar.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before {
  1385. content: '';
  1386. position: absolute;
  1387. left: 0;
  1388. top: 0;
  1389. bottom: auto;
  1390. right: auto;
  1391. height: 1px;
  1392. width: 100%;
  1393. background-color: #c4c4c4;
  1394. display: block;
  1395. z-index: 15;
  1396. -webkit-transform-origin: 50% 0%;
  1397. transform-origin: 50% 0%;
  1398. }
  1399. @media only screen and (-webkit-min-device-pixel-ratio: 2) {
  1400. .popover .picker-calendar .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
  1401. .picker-calendar.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
  1402. .popover .picker-calendar .picker-calendar-week-days ~ .picker-calendar-months:before,
  1403. .picker-calendar.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before {
  1404. -webkit-transform: scaleY(0.5);
  1405. transform: scaleY(0.5);
  1406. }
  1407. }
  1408. @media only screen and (-webkit-min-device-pixel-ratio: 3) {
  1409. .popover .picker-calendar .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
  1410. .picker-calendar.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
  1411. .popover .picker-calendar .picker-calendar-week-days ~ .picker-calendar-months:before,
  1412. .picker-calendar.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before {
  1413. -webkit-transform: scaleY(0.33);
  1414. transform: scaleY(0.33);
  1415. }
  1416. }
  1417. .weui-picker-modal .toolbar-inner {
  1418. height: 2.2rem;
  1419. display: -webkit-box;
  1420. display: -ms-flexbox;
  1421. display: -webkit-flex;
  1422. display: flex;
  1423. text-align: center;
  1424. }
  1425. .picker-calendar-month-picker,
  1426. .picker-calendar-year-picker {
  1427. display: block;
  1428. line-height: 2.2rem;
  1429. }
  1430. .picker-calendar-month-picker a.icon-only,
  1431. .picker-calendar-year-picker a.icon-only {
  1432. float: left;
  1433. width: 25%;
  1434. height: 2.2rem;
  1435. line-height: 2rem;
  1436. }
  1437. .picker-calendar-month-picker .current-month-value,
  1438. .picker-calendar-year-picker .current-month-value,
  1439. .picker-calendar-month-picker .current-year-value,
  1440. .picker-calendar-year-picker .current-year-value {
  1441. float: left;
  1442. width: 50%;
  1443. height: 2.2rem;
  1444. }
  1445. i.icon {
  1446. display: inline-block;
  1447. vertical-align: middle;
  1448. background-size: 100% auto;
  1449. background-position: center;
  1450. background-repeat: no-repeat;
  1451. font-style: normal;
  1452. position: relative;
  1453. }
  1454. i.icon.icon-next,
  1455. i.icon.icon-prev {
  1456. width: 0.75rem;
  1457. height: 0.75rem;
  1458. }
  1459. i.icon.icon-next {
  1460. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%2304BE02'%20d%3D'M1%2C1.6l11.8%2C5.8L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  1461. }
  1462. i.icon.icon-prev {
  1463. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%2304BE02'%20d%3D'M14%2C1.6v11.8L2.2%2C7.6L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  1464. }
  1465. /**
  1466. * Swiper 3.3.1
  1467. * Most modern mobile touch slider and framework with hardware accelerated transitions
  1468. *
  1469. * http://www.idangero.us/swiper/
  1470. *
  1471. * Copyright 2016, Vladimir Kharlampidi
  1472. * The iDangero.us
  1473. * http://www.idangero.us/
  1474. *
  1475. * Licensed under MIT
  1476. *
  1477. * Released on: February 7, 2016
  1478. */
  1479. .swiper-container {
  1480. margin: 0 auto;
  1481. position: relative;
  1482. overflow: hidden;
  1483. /* Fix of Webkit flickering */
  1484. z-index: 1;
  1485. }
  1486. .swiper-container-no-flexbox .swiper-slide {
  1487. float: left;
  1488. }
  1489. .swiper-container-vertical > .swiper-wrapper {
  1490. -webkit-box-orient: vertical;
  1491. -ms-flex-direction: column;
  1492. -webkit-flex-direction: column;
  1493. flex-direction: column;
  1494. }
  1495. .swiper-wrapper {
  1496. position: relative;
  1497. width: 100%;
  1498. height: 100%;
  1499. z-index: 1;
  1500. display: -webkit-box;
  1501. display: -ms-flexbox;
  1502. display: -webkit-flex;
  1503. display: flex;
  1504. -webkit-transition-property: -webkit-transform;
  1505. transition-property: -webkit-transform;
  1506. transition-property: transform;
  1507. transition-property: transform, -webkit-transform;
  1508. box-sizing: content-box;
  1509. }
  1510. .swiper-container-android .swiper-slide,
  1511. .swiper-wrapper {
  1512. -webkit-transform: translate3d(0px, 0, 0);
  1513. transform: translate3d(0px, 0, 0);
  1514. }
  1515. .swiper-container-multirow > .swiper-wrapper {
  1516. -webkit-box-lines: multiple;
  1517. -moz-box-lines: multiple;
  1518. -ms-flex-wrap: wrap;
  1519. -webkit-flex-wrap: wrap;
  1520. flex-wrap: wrap;
  1521. }
  1522. .swiper-container-free-mode > .swiper-wrapper {
  1523. -webkit-transition-timing-function: ease-out;
  1524. transition-timing-function: ease-out;
  1525. margin: 0 auto;
  1526. }
  1527. .swiper-slide {
  1528. -webkit-flex-shrink: 0;
  1529. -ms-flex: 0 0 auto;
  1530. -webkit-flex-shrink: 0;
  1531. -ms-flex-negative: 0;
  1532. flex-shrink: 0;
  1533. width: 100%;
  1534. height: 100%;
  1535. position: relative;
  1536. }
  1537. /* Auto Height */
  1538. .swiper-container-autoheight,
  1539. .swiper-container-autoheight .swiper-slide {
  1540. height: auto;
  1541. }
  1542. .swiper-container-autoheight .swiper-wrapper {
  1543. -webkit-box-align: start;
  1544. -ms-flex-align: start;
  1545. -webkit-align-items: flex-start;
  1546. align-items: flex-start;
  1547. -webkit-transition-property: -webkit-transform, height;
  1548. -webkit-transition-property: height, -webkit-transform;
  1549. transition-property: height, -webkit-transform;
  1550. transition-property: transform, height;
  1551. transition-property: transform, height, -webkit-transform;
  1552. }
  1553. /* a11y */
  1554. .swiper-container .swiper-notification {
  1555. position: absolute;
  1556. left: 0;
  1557. top: 0;
  1558. pointer-events: none;
  1559. opacity: 0;
  1560. z-index: -1000;
  1561. }
  1562. /* IE10 Windows Phone 8 Fixes */
  1563. .swiper-wp8-horizontal {
  1564. -ms-touch-action: pan-y;
  1565. touch-action: pan-y;
  1566. }
  1567. .swiper-wp8-vertical {
  1568. -ms-touch-action: pan-x;
  1569. touch-action: pan-x;
  1570. }
  1571. /* Arrows */
  1572. .swiper-button-prev,
  1573. .swiper-button-next {
  1574. position: absolute;
  1575. top: 50%;
  1576. width: 27px;
  1577. height: 44px;
  1578. margin-top: -22px;
  1579. z-index: 10;
  1580. cursor: pointer;
  1581. background-size: 27px 44px;
  1582. background-position: center;
  1583. background-repeat: no-repeat;
  1584. }
  1585. .swiper-button-prev.swiper-button-disabled,
  1586. .swiper-button-next.swiper-button-disabled {
  1587. opacity: 0.35;
  1588. cursor: auto;
  1589. pointer-events: none;
  1590. }
  1591. .swiper-button-prev,
  1592. .swiper-container-rtl .swiper-button-next {
  1593. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  1594. left: 10px;
  1595. right: auto;
  1596. }
  1597. .swiper-button-prev.swiper-button-black,
  1598. .swiper-container-rtl .swiper-button-next.swiper-button-black {
  1599. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
  1600. }
  1601. .swiper-button-prev.swiper-button-white,
  1602. .swiper-container-rtl .swiper-button-next.swiper-button-white {
  1603. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  1604. }
  1605. .swiper-button-next,
  1606. .swiper-container-rtl .swiper-button-prev {
  1607. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  1608. right: 10px;
  1609. left: auto;
  1610. }
  1611. .swiper-button-next.swiper-button-black,
  1612. .swiper-container-rtl .swiper-button-prev.swiper-button-black {
  1613. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
  1614. }
  1615. .swiper-button-next.swiper-button-white,
  1616. .swiper-container-rtl .swiper-button-prev.swiper-button-white {
  1617. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  1618. }
  1619. /* Pagination Styles */
  1620. .swiper-pagination {
  1621. position: absolute;
  1622. text-align: center;
  1623. -webkit-transition: 300ms;
  1624. transition: 300ms;
  1625. -webkit-transform: translate3d(0, 0, 0);
  1626. transform: translate3d(0, 0, 0);
  1627. z-index: 10;
  1628. }
  1629. .swiper-pagination.swiper-pagination-hidden {
  1630. opacity: 0;
  1631. }
  1632. /* Common Styles */
  1633. .swiper-pagination-fraction,
  1634. .swiper-pagination-custom,
  1635. .swiper-container-horizontal > .swiper-pagination-bullets {
  1636. bottom: 10px;
  1637. left: 0;
  1638. width: 100%;
  1639. }
  1640. /* Bullets */
  1641. .swiper-pagination-bullet {
  1642. width: 8px;
  1643. height: 8px;
  1644. display: inline-block;
  1645. border-radius: 100%;
  1646. background: #000;
  1647. opacity: 0.2;
  1648. }
  1649. button.swiper-pagination-bullet {
  1650. border: none;
  1651. margin: 0;
  1652. padding: 0;
  1653. box-shadow: none;
  1654. -moz-appearance: none;
  1655. -ms-appearance: none;
  1656. -webkit-appearance: none;
  1657. appearance: none;
  1658. }
  1659. .swiper-pagination-clickable .swiper-pagination-bullet {
  1660. cursor: pointer;
  1661. }
  1662. .swiper-pagination-white .swiper-pagination-bullet {
  1663. background: #fff;
  1664. }
  1665. .swiper-pagination-bullet-active {
  1666. opacity: 1;
  1667. background: #04BE02;
  1668. }
  1669. .swiper-pagination-white .swiper-pagination-bullet-active {
  1670. background: #fff;
  1671. }
  1672. .swiper-pagination-black .swiper-pagination-bullet-active {
  1673. background: #000;
  1674. }
  1675. .swiper-container-vertical > .swiper-pagination-bullets {
  1676. right: 10px;
  1677. top: 50%;
  1678. -webkit-transform: translate3d(0px, -50%, 0);
  1679. transform: translate3d(0px, -50%, 0);
  1680. }
  1681. .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  1682. margin: 5px 0;
  1683. display: block;
  1684. }
  1685. .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  1686. margin: 0 5px;
  1687. }
  1688. /* Progress */
  1689. .swiper-pagination-progress {
  1690. background: rgba(0, 0, 0, 0.25);
  1691. position: absolute;
  1692. }
  1693. .swiper-pagination-progress .swiper-pagination-progressbar {
  1694. background: #007aff;
  1695. position: absolute;
  1696. left: 0;
  1697. top: 0;
  1698. width: 100%;
  1699. height: 100%;
  1700. -webkit-transform: scale(0);
  1701. transform: scale(0);
  1702. -webkit-transform-origin: left top;
  1703. transform-origin: left top;
  1704. }
  1705. .swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
  1706. -webkit-transform-origin: right top;
  1707. transform-origin: right top;
  1708. }
  1709. .swiper-container-horizontal > .swiper-pagination-progress {
  1710. width: 100%;
  1711. height: 4px;
  1712. left: 0;
  1713. top: 0;
  1714. }
  1715. .swiper-container-vertical > .swiper-pagination-progress {
  1716. width: 4px;
  1717. height: 100%;
  1718. left: 0;
  1719. top: 0;
  1720. }
  1721. .swiper-pagination-progress.swiper-pagination-white {
  1722. background: rgba(255, 255, 255, 0.5);
  1723. }
  1724. .swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
  1725. background: #fff;
  1726. }
  1727. .swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
  1728. background: #000;
  1729. }
  1730. /* 3D Container */
  1731. .swiper-container-3d {
  1732. -webkit-perspective: 1200px;
  1733. -o-perspective: 1200px;
  1734. perspective: 1200px;
  1735. }
  1736. .swiper-container-3d .swiper-wrapper,
  1737. .swiper-container-3d .swiper-slide,
  1738. .swiper-container-3d .swiper-slide-shadow-left,
  1739. .swiper-container-3d .swiper-slide-shadow-right,
  1740. .swiper-container-3d .swiper-slide-shadow-top,
  1741. .swiper-container-3d .swiper-slide-shadow-bottom,
  1742. .swiper-container-3d .swiper-cube-shadow {
  1743. -webkit-transform-style: preserve-3d;
  1744. transform-style: preserve-3d;
  1745. }
  1746. .swiper-container-3d .swiper-slide-shadow-left,
  1747. .swiper-container-3d .swiper-slide-shadow-right,
  1748. .swiper-container-3d .swiper-slide-shadow-top,
  1749. .swiper-container-3d .swiper-slide-shadow-bottom {
  1750. position: absolute;
  1751. left: 0;
  1752. top: 0;
  1753. width: 100%;
  1754. height: 100%;
  1755. pointer-events: none;
  1756. z-index: 10;
  1757. }
  1758. .swiper-container-3d .swiper-slide-shadow-left {
  1759. background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  1760. /* Safari 4+, Chrome */
  1761. background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  1762. /* Chrome 10+, Safari 5.1+, iOS 5+ */
  1763. /* Firefox 3.6-15 */
  1764. /* Opera 11.10-12.00 */
  1765. background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  1766. /* Firefox 16+, IE10, Opera 12.50+ */
  1767. }
  1768. .swiper-container-3d .swiper-slide-shadow-right {
  1769. background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  1770. /* Safari 4+, Chrome */
  1771. background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  1772. /* Chrome 10+, Safari 5.1+, iOS 5+ */
  1773. /* Firefox 3.6-15 */
  1774. /* Opera 11.10-12.00 */
  1775. background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  1776. /* Firefox 16+, IE10, Opera 12.50+ */
  1777. }
  1778. .swiper-container-3d .swiper-slide-shadow-top {
  1779. background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  1780. /* Safari 4+, Chrome */
  1781. background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  1782. /* Chrome 10+, Safari 5.1+, iOS 5+ */
  1783. /* Firefox 3.6-15 */
  1784. /* Opera 11.10-12.00 */
  1785. background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  1786. /* Firefox 16+, IE10, Opera 12.50+ */
  1787. }
  1788. .swiper-container-3d .swiper-slide-shadow-bottom {
  1789. background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
  1790. /* Safari 4+, Chrome */
  1791. background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  1792. /* Chrome 10+, Safari 5.1+, iOS 5+ */
  1793. /* Firefox 3.6-15 */
  1794. /* Opera 11.10-12.00 */
  1795. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  1796. /* Firefox 16+, IE10, Opera 12.50+ */
  1797. }
  1798. /* Coverflow */
  1799. .swiper-container-coverflow .swiper-wrapper,
  1800. .swiper-container-flip .swiper-wrapper {
  1801. /* Windows 8 IE 10 fix */
  1802. -ms-perspective: 1200px;
  1803. }
  1804. /* Cube + Flip */
  1805. .swiper-container-cube,
  1806. .swiper-container-flip {
  1807. overflow: visible;
  1808. }
  1809. .swiper-container-cube .swiper-slide,
  1810. .swiper-container-flip .swiper-slide {
  1811. pointer-events: none;
  1812. -webkit-backface-visibility: hidden;
  1813. backface-visibility: hidden;
  1814. z-index: 1;
  1815. }
  1816. .swiper-container-cube .swiper-slide .swiper-slide,
  1817. .swiper-container-flip .swiper-slide .swiper-slide {
  1818. pointer-events: none;
  1819. }
  1820. .swiper-container-cube .swiper-slide-active,
  1821. .swiper-container-flip .swiper-slide-active,
  1822. .swiper-container-cube .swiper-slide-active .swiper-slide-active,
  1823. .swiper-container-flip .swiper-slide-active .swiper-slide-active {
  1824. pointer-events: auto;
  1825. }
  1826. .swiper-container-cube .swiper-slide-shadow-top,
  1827. .swiper-container-flip .swiper-slide-shadow-top,
  1828. .swiper-container-cube .swiper-slide-shadow-bottom,
  1829. .swiper-container-flip .swiper-slide-shadow-bottom,
  1830. .swiper-container-cube .swiper-slide-shadow-left,
  1831. .swiper-container-flip .swiper-slide-shadow-left,
  1832. .swiper-container-cube .swiper-slide-shadow-right,
  1833. .swiper-container-flip .swiper-slide-shadow-right {
  1834. z-index: 0;
  1835. -webkit-backface-visibility: hidden;
  1836. backface-visibility: hidden;
  1837. }
  1838. /* Cube */
  1839. .swiper-container-cube .swiper-slide {
  1840. visibility: hidden;
  1841. -webkit-transform-origin: 0 0;
  1842. transform-origin: 0 0;
  1843. width: 100%;
  1844. height: 100%;
  1845. }
  1846. .swiper-container-cube.swiper-container-rtl .swiper-slide {
  1847. -webkit-transform-origin: 100% 0;
  1848. transform-origin: 100% 0;
  1849. }
  1850. .swiper-container-cube .swiper-slide-active,
  1851. .swiper-container-cube .swiper-slide-next,
  1852. .swiper-container-cube .swiper-slide-prev,
  1853. .swiper-container-cube .swiper-slide-next + .swiper-slide {
  1854. pointer-events: auto;
  1855. visibility: visible;
  1856. }
  1857. .swiper-container-cube .swiper-cube-shadow {
  1858. position: absolute;
  1859. left: 0;
  1860. bottom: 0px;
  1861. width: 100%;
  1862. height: 100%;
  1863. background: #000;
  1864. opacity: 0.6;
  1865. -webkit-filter: blur(50px);
  1866. filter: blur(50px);
  1867. z-index: 0;
  1868. }
  1869. /* Fade */
  1870. .swiper-container-fade.swiper-container-free-mode .swiper-slide {
  1871. -webkit-transition-timing-function: ease-out;
  1872. transition-timing-function: ease-out;
  1873. }
  1874. .swiper-container-fade .swiper-slide {
  1875. pointer-events: none;
  1876. -webkit-transition-property: opacity;
  1877. transition-property: opacity;
  1878. }
  1879. .swiper-container-fade .swiper-slide .swiper-slide {
  1880. pointer-events: none;
  1881. }
  1882. .swiper-container-fade .swiper-slide-active,
  1883. .swiper-container-fade .swiper-slide-active .swiper-slide-active {
  1884. pointer-events: auto;
  1885. }
  1886. /* Scrollbar */
  1887. .swiper-scrollbar {
  1888. border-radius: 10px;
  1889. position: relative;
  1890. -ms-touch-action: none;
  1891. background: rgba(0, 0, 0, 0.1);
  1892. }
  1893. .swiper-container-horizontal > .swiper-scrollbar {
  1894. position: absolute;
  1895. left: 1%;
  1896. bottom: 3px;
  1897. z-index: 50;
  1898. height: 5px;
  1899. width: 98%;
  1900. }
  1901. .swiper-container-vertical > .swiper-scrollbar {
  1902. position: absolute;
  1903. right: 3px;
  1904. top: 1%;
  1905. z-index: 50;
  1906. width: 5px;
  1907. height: 98%;
  1908. }
  1909. .swiper-scrollbar-drag {
  1910. height: 100%;
  1911. width: 100%;
  1912. position: relative;
  1913. background: rgba(0, 0, 0, 0.5);
  1914. border-radius: 10px;
  1915. left: 0;
  1916. top: 0;
  1917. }
  1918. .swiper-scrollbar-cursor-drag {
  1919. cursor: move;
  1920. }
  1921. /* Preloader */
  1922. .swiper-lazy-preloader {
  1923. width: 42px;
  1924. height: 42px;
  1925. position: absolute;
  1926. left: 50%;
  1927. top: 50%;
  1928. margin-left: -21px;
  1929. margin-top: -21px;
  1930. z-index: 10;
  1931. -webkit-transform-origin: 50%;
  1932. transform-origin: 50%;
  1933. -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  1934. animation: swiper-preloader-spin 1s steps(12, end) infinite;
  1935. }
  1936. .swiper-lazy-preloader:after {
  1937. display: block;
  1938. content: "";
  1939. width: 100%;
  1940. height: 100%;
  1941. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  1942. background-position: 50%;
  1943. background-size: 100%;
  1944. background-repeat: no-repeat;
  1945. }
  1946. .swiper-lazy-preloader-white:after {
  1947. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  1948. }
  1949. @-webkit-keyframes swiper-preloader-spin {
  1950. 100% {
  1951. -webkit-transform: rotate(360deg);
  1952. }
  1953. }
  1954. @keyframes swiper-preloader-spin {
  1955. 100% {
  1956. -webkit-transform: rotate(360deg);
  1957. transform: rotate(360deg);
  1958. }
  1959. }
  1960. .weui_actionsheet {
  1961. z-index: 100;
  1962. }
  1963. .weui-popup-modal {
  1964. width: 100%;
  1965. position: absolute;
  1966. z-index: 100;
  1967. bottom: 0;
  1968. border-radius: 0;
  1969. opacity: 0.6;
  1970. color: #3d4145;
  1971. -webkit-transition-duration: .3s;
  1972. transition-duration: .3s;
  1973. height: 100%;
  1974. background: #EFEFF4;
  1975. -webkit-transform: translate3d(0, 100%, 0);
  1976. transform: translate3d(0, 100%, 0);
  1977. -webkit-transition-property: opacity, -webkit-transform;
  1978. transition-property: opacity, -webkit-transform;
  1979. transition-property: transform, opacity;
  1980. transition-property: transform, opacity, -webkit-transform;
  1981. overflow-x: hidden;
  1982. overflow-y: auto;
  1983. }
  1984. .weui-popup-modal.weui-popup-modal-visible {
  1985. opacity: 1;
  1986. -webkit-transform: translate3d(0, 0, 0);
  1987. transform: translate3d(0, 0, 0);
  1988. }
  1989. .weui-popup-overlay,
  1990. .weui-popup-container {
  1991. position: fixed;
  1992. bottom: 0;
  1993. left: 0;
  1994. right: 0;
  1995. height: 0;
  1996. width: 100%;
  1997. height: 100%;
  1998. }
  1999. .weui-popup-container {
  2000. display: none;
  2001. }
  2002. .weui-popup-container.weui-popup-container-visible {
  2003. display: block;
  2004. }
  2005. .weui-popup-container .weui_cells {
  2006. margin: 0;
  2007. text-align: left;
  2008. }
  2009. .notification {
  2010. position: fixed;
  2011. width: 100%;
  2012. min-height: 3.4rem;
  2013. top: -2rem;
  2014. padding-top: 2rem;
  2015. left: 0;
  2016. right: 0;
  2017. z-index: 9999;
  2018. background-color: rgba(0, 0, 0, 0.85);
  2019. color: white;
  2020. font-size: .65rem;
  2021. -webkit-transform: translate3d(0, -100%, 0);
  2022. transform: translate3d(0, -100%, 0);
  2023. -webkit-transition: .4s;
  2024. transition: .4s;
  2025. }
  2026. .notification.notification-in {
  2027. -webkit-transform: translate3d(0, 0, 0);
  2028. transform: translate3d(0, 0, 0);
  2029. }
  2030. .notification.touching {
  2031. -webkit-transition-duration: 0s;
  2032. transition-duration: 0s;
  2033. }
  2034. .notification .notification-inner {
  2035. padding: .4rem .6rem 1rem .6rem;
  2036. display: -webkit-box;
  2037. display: -ms-flexbox;
  2038. display: -webkit-flex;
  2039. display: flex;
  2040. -webkit-box-align: start;
  2041. -ms-flex-align: start;
  2042. -webkit-align-items: flex-start;
  2043. align-items: flex-start;
  2044. }
  2045. .notification .notification-content {
  2046. width: 100%;
  2047. margin: 0rem .4rem;
  2048. }
  2049. .notification .notification-title {
  2050. font-weight: bold;
  2051. }
  2052. .notification .notification-text {
  2053. line-height: 1;
  2054. }
  2055. .notification .notification-media {
  2056. height: 1rem;
  2057. width: 1rem;
  2058. }
  2059. .notification .notification-media img {
  2060. width: 100%;
  2061. }
  2062. .notification .notification-handle-bar {
  2063. position: absolute;
  2064. bottom: .2rem;
  2065. left: 50%;
  2066. -webkit-transform: translate3d(-50%, 0, 0);
  2067. transform: translate3d(-50%, 0, 0);
  2068. width: 2rem;
  2069. height: .3rem;
  2070. border-radius: .15rem;
  2071. background: white;
  2072. opacity: .5;
  2073. }