UNPKG

jquery-weui

Version:
1,682 lines 67.9 kB
/** * jQuery WeUI V0.7.2 * By 言川 * http://lihongxun945.github.io/jquery-weui/ */ .preloader { width: 20px; height: 20px; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: preloader-spin 1s steps(12, end) infinite; animation: preloader-spin 1s steps(12, end) infinite; } .preloader:after { display: block; width: 100%; height: 100%; content: ""; 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"); background-repeat: no-repeat; background-position: 50%; background-size: 100%; } @-webkit-keyframes preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* .hairline(@position, @color) when (@position = top) { border-top: 1px solid @color; } .hairline(@position, @color) when (@position = left) { border-left: 1px solid @color; } .hairline(@position, @color) when (@position = bottom) { border-bottom: 1px solid @color; } .hairline(@position, @color) when (@position = right) { border-right: 1px solid @color; } // For right and bottom .hairline-remove(@position) when not (@position = left) and not (@position = top) { border-left: 0; border-bottom: 0; } // For left and top .hairline-remove(@position) when not (@position = right) and not (@position = bottom) { border-right: 0; border-top: 0; } // For right and bottom .hairline-color(@position, @color) when not (@position = left) and not (@position = top) { border-right-color: @color; border-bottom-color: @color; } // For left and top .hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) { border-left-color: @color; border-top-color: @color; } */ html { font-size: 20px; } body { font-size: 16px; } @media only screen and (min-width: 400px) { html { font-size: 21.33333333px !important; } } @media only screen and (min-width: 414px) { html { font-size: 22.08px !important; } } @media only screen and (min-width: 480px) { html { font-size: 25.6px !important; } } .weui_navbar { z-index: 10; } .weui-popup-overlay, .weui-popup-container { z-index: 50; } .weui_mask { z-index: 100; } /* === Grid === */ .weui-row { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .weui-row > [class*="col-"] { box-sizing: border-box; } .weui-row .col-auto { width: 100%; } .weui-row .weui-col-100 { width: 100%; width: calc((100% - 15px*0) / 1); } .weui-row.weui-no-gutter .weui-col-100 { width: 100%; } .weui-row .weui-col-95 { width: 95%; width: calc((100% - 15px*0.05263157894736836) / 1.0526315789473684); } .weui-row.weui-no-gutter .weui-col-95 { width: 95%; } .weui-row .weui-col-90 { width: 90%; width: calc((100% - 15px*0.11111111111111116) / 1.1111111111111112); } .weui-row.weui-no-gutter .weui-col-90 { width: 90%; } .weui-row .weui-col-85 { width: 85%; width: calc((100% - 15px*0.17647058823529416) / 1.1764705882352942); } .weui-row.weui-no-gutter .weui-col-85 { width: 85%; } .weui-row .weui-col-80 { width: 80%; width: calc((100% - 15px*0.25) / 1.25); } .weui-row.weui-no-gutter .weui-col-80 { width: 80%; } .weui-row .weui-col-75 { width: 75%; width: calc((100% - 15px*0.33333333333333326) / 1.3333333333333333); } .weui-row.weui-no-gutter .weui-col-75 { width: 75%; } .weui-row .weui-col-66 { width: 66.66666666666666%; width: calc((100% - 15px*0.5000000000000002) / 1.5000000000000002); } .weui-row.weui-no-gutter .weui-col-66 { width: 66.66666666666666%; } .weui-row .weui-col-60 { width: 60%; width: calc((100% - 15px*0.6666666666666667) / 1.6666666666666667); } .weui-row.weui-no-gutter .weui-col-60 { width: 60%; } .weui-row .weui-col-50 { width: 50%; width: calc((100% - 15px*1) / 2); } .weui-row.weui-no-gutter .weui-col-50 { width: 50%; } .weui-row .weui-col-40 { width: 40%; width: calc((100% - 15px*1.5) / 2.5); } .weui-row.weui-no-gutter .weui-col-40 { width: 40%; } .weui-row .weui-col-33 { width: 33.333333333333336%; width: calc((100% - 15px*2) / 3); } .weui-row.weui-no-gutter .weui-col-33 { width: 33.333333333333336%; } .weui-row .weui-col-25 { width: 25%; width: calc((100% - 15px*3) / 4); } .weui-row.weui-no-gutter .weui-col-25 { width: 25%; } .weui-row .weui-col-20 { width: 20%; width: calc((100% - 15px*4) / 5); } .weui-row.weui-no-gutter .weui-col-20 { width: 20%; } .weui-row .weui-col-15 { width: 15%; width: calc((100% - 15px*5.666666666666667) / 6.666666666666667); } .weui-row.weui-no-gutter .weui-col-15 { width: 15%; } .weui-row .weui-col-10 { width: 10%; width: calc((100% - 15px*9) / 10); } .weui-row.weui-no-gutter .weui-col-10 { width: 10%; } .weui-row .weui-col-5 { width: 5%; width: calc((100% - 15px*19) / 20); } .weui-row.weui-no-gutter .weui-col-5 { width: 5%; } .weui-row .weui-col-auto:nth-last-child(1), .weui-row .weui-col-auto:nth-last-child(1) ~ .weui-col-auto { width: 100%; width: calc((100% - 15px*0) / 1); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(1), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(1) ~ .weui-col-auto { width: 100%; } .weui-row .weui-col-auto:nth-last-child(2), .weui-row .weui-col-auto:nth-last-child(2) ~ .weui-col-auto { width: 50%; width: calc((100% - 15px*1) / 2); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(2), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(2) ~ .weui-col-auto { width: 50%; } .weui-row .weui-col-auto:nth-last-child(3), .weui-row .weui-col-auto:nth-last-child(3) ~ .weui-col-auto { width: 33.33333333%; width: calc((100% - 15px*2) / 3); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(3), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(3) ~ .weui-col-auto { width: 33.33333333%; } .weui-row .weui-col-auto:nth-last-child(4), .weui-row .weui-col-auto:nth-last-child(4) ~ .weui-col-auto { width: 25%; width: calc((100% - 15px*3) / 4); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(4), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(4) ~ .weui-col-auto { width: 25%; } .weui-row .weui-col-auto:nth-last-child(5), .weui-row .weui-col-auto:nth-last-child(5) ~ .weui-col-auto { width: 20%; width: calc((100% - 15px*4) / 5); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(5), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(5) ~ .weui-col-auto { width: 20%; } .weui-row .weui-col-auto:nth-last-child(6), .weui-row .weui-col-auto:nth-last-child(6) ~ .weui-col-auto { width: 16.66666667%; width: calc((100% - 15px*5) / 6); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(6), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(6) ~ .weui-col-auto { width: 16.66666667%; } .weui-row .weui-col-auto:nth-last-child(7), .weui-row .weui-col-auto:nth-last-child(7) ~ .weui-col-auto { width: 14.28571429%; width: calc((100% - 15px*6) / 7); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(7), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(7) ~ .weui-col-auto { width: 14.28571429%; } .weui-row .weui-col-auto:nth-last-child(8), .weui-row .weui-col-auto:nth-last-child(8) ~ .weui-col-auto { width: 12.5%; width: calc((100% - 15px*7) / 8); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(8), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(8) ~ .weui-col-auto { width: 12.5%; } .weui-row .weui-col-auto:nth-last-child(9), .weui-row .weui-col-auto:nth-last-child(9) ~ .weui-col-auto { width: 11.11111111%; width: calc((100% - 15px*8) / 9); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(9), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(9) ~ .weui-col-auto { width: 11.11111111%; } .weui-row .weui-col-auto:nth-last-child(10), .weui-row .weui-col-auto:nth-last-child(10) ~ .weui-col-auto { width: 10%; width: calc((100% - 15px*9) / 10); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(10), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(10) ~ .weui-col-auto { width: 10%; } .weui-row .weui-col-auto:nth-last-child(11), .weui-row .weui-col-auto:nth-last-child(11) ~ .weui-col-auto { width: 9.09090909%; width: calc((100% - 15px*10) / 11); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(11), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(11) ~ .weui-col-auto { width: 9.09090909%; } .weui-row .weui-col-auto:nth-last-child(12), .weui-row .weui-col-auto:nth-last-child(12) ~ .weui-col-auto { width: 8.33333333%; width: calc((100% - 15px*11) / 12); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(12), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(12) ~ .weui-col-auto { width: 8.33333333%; } .weui-row .weui-col-auto:nth-last-child(13), .weui-row .weui-col-auto:nth-last-child(13) ~ .weui-col-auto { width: 7.69230769%; width: calc((100% - 15px*12) / 13); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(13), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(13) ~ .weui-col-auto { width: 7.69230769%; } .weui-row .weui-col-auto:nth-last-child(14), .weui-row .weui-col-auto:nth-last-child(14) ~ .weui-col-auto { width: 7.14285714%; width: calc((100% - 15px*13) / 14); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(14), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(14) ~ .weui-col-auto { width: 7.14285714%; } .weui-row .weui-col-auto:nth-last-child(15), .weui-row .weui-col-auto:nth-last-child(15) ~ .weui-col-auto { width: 6.66666667%; width: calc((100% - 15px*14) / 15); } .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(15), .weui-row.weui-no-gutter .weui-col-auto:nth-last-child(15) ~ .weui-col-auto { width: 6.66666667%; } @media all and (min-width: 768px) { .row .tablet-100 { width: 100%; width: calc((100% - 15px*0) / 1); } .row.no-gutter .tablet-100 { width: 100%; } .row .tablet-95 { width: 95%; width: calc((100% - 15px*0.05263157894736836) / 1.0526315789473684); } .row.no-gutter .tablet-95 { width: 95%; } .row .tablet-90 { width: 90%; width: calc((100% - 15px*0.11111111111111116) / 1.1111111111111112); } .row.no-gutter .tablet-90 { width: 90%; } .row .tablet-85 { width: 85%; width: calc((100% - 15px*0.17647058823529416) / 1.1764705882352942); } .row.no-gutter .tablet-85 { width: 85%; } .row .tablet-80 { width: 80%; width: calc((100% - 15px*0.25) / 1.25); } .row.no-gutter .tablet-80 { width: 80%; } .row .tablet-75 { width: 75%; width: calc((100% - 15px*0.33333333333333326) / 1.3333333333333333); } .row.no-gutter .tablet-75 { width: 75%; } .row .tablet-66 { width: 66.66666666666666%; width: calc((100% - 15px*0.5000000000000002) / 1.5000000000000002); } .row.no-gutter .tablet-66 { width: 66.66666666666666%; } .row .tablet-60 { width: 60%; width: calc((100% - 15px*0.6666666666666667) / 1.6666666666666667); } .row.no-gutter .tablet-60 { width: 60%; } .row .tablet-50 { width: 50%; width: calc((100% - 15px*1) / 2); } .row.no-gutter .tablet-50 { width: 50%; } .row .tablet-40 { width: 40%; width: calc((100% - 15px*1.5) / 2.5); } .row.no-gutter .tablet-40 { width: 40%; } .row .tablet-33 { width: 33.333333333333336%; width: calc((100% - 15px*2) / 3); } .row.no-gutter .tablet-33 { width: 33.333333333333336%; } .row .tablet-25 { width: 25%; width: calc((100% - 15px*3) / 4); } .row.no-gutter .tablet-25 { width: 25%; } .row .tablet-20 { width: 20%; width: calc((100% - 15px*4) / 5); } .row.no-gutter .tablet-20 { width: 20%; } .row .tablet-15 { width: 15%; width: calc((100% - 15px*5.666666666666667) / 6.666666666666667); } .row.no-gutter .tablet-15 { width: 15%; } .row .tablet-10 { width: 10%; width: calc((100% - 15px*9) / 10); } .row.no-gutter .tablet-10 { width: 10%; } .row .tablet-5 { width: 5%; width: calc((100% - 15px*19) / 20); } .row.no-gutter .tablet-5 { width: 5%; } .row .tablet-auto:nth-last-child(1), .row .tablet-auto:nth-last-child(1) ~ .col-auto { width: 100%; width: calc((100% - 15px*0) / 1); } .row.no-gutter .tablet-auto:nth-last-child(1), .row.no-gutter .tablet-auto:nth-last-child(1) ~ .tablet-auto { width: 100%; } .row .tablet-auto:nth-last-child(2), .row .tablet-auto:nth-last-child(2) ~ .col-auto { width: 50%; width: calc((100% - 15px*1) / 2); } .row.no-gutter .tablet-auto:nth-last-child(2), .row.no-gutter .tablet-auto:nth-last-child(2) ~ .tablet-auto { width: 50%; } .row .tablet-auto:nth-last-child(3), .row .tablet-auto:nth-last-child(3) ~ .col-auto { width: 33.33333333%; width: calc((100% - 15px*2) / 3); } .row.no-gutter .tablet-auto:nth-last-child(3), .row.no-gutter .tablet-auto:nth-last-child(3) ~ .tablet-auto { width: 33.33333333%; } .row .tablet-auto:nth-last-child(4), .row .tablet-auto:nth-last-child(4) ~ .col-auto { width: 25%; width: calc((100% - 15px*3) / 4); } .row.no-gutter .tablet-auto:nth-last-child(4), .row.no-gutter .tablet-auto:nth-last-child(4) ~ .tablet-auto { width: 25%; } .row .tablet-auto:nth-last-child(5), .row .tablet-auto:nth-last-child(5) ~ .col-auto { width: 20%; width: calc((100% - 15px*4) / 5); } .row.no-gutter .tablet-auto:nth-last-child(5), .row.no-gutter .tablet-auto:nth-last-child(5) ~ .tablet-auto { width: 20%; } .row .tablet-auto:nth-last-child(6), .row .tablet-auto:nth-last-child(6) ~ .col-auto { width: 16.66666667%; width: calc((100% - 15px*5) / 6); } .row.no-gutter .tablet-auto:nth-last-child(6), .row.no-gutter .tablet-auto:nth-last-child(6) ~ .tablet-auto { width: 16.66666667%; } .row .tablet-auto:nth-last-child(7), .row .tablet-auto:nth-last-child(7) ~ .col-auto { width: 14.28571429%; width: calc((100% - 15px*6) / 7); } .row.no-gutter .tablet-auto:nth-last-child(7), .row.no-gutter .tablet-auto:nth-last-child(7) ~ .tablet-auto { width: 14.28571429%; } .row .tablet-auto:nth-last-child(8), .row .tablet-auto:nth-last-child(8) ~ .col-auto { width: 12.5%; width: calc((100% - 15px*7) / 8); } .row.no-gutter .tablet-auto:nth-last-child(8), .row.no-gutter .tablet-auto:nth-last-child(8) ~ .tablet-auto { width: 12.5%; } .row .tablet-auto:nth-last-child(9), .row .tablet-auto:nth-last-child(9) ~ .col-auto { width: 11.11111111%; width: calc((100% - 15px*8) / 9); } .row.no-gutter .tablet-auto:nth-last-child(9), .row.no-gutter .tablet-auto:nth-last-child(9) ~ .tablet-auto { width: 11.11111111%; } .row .tablet-auto:nth-last-child(10), .row .tablet-auto:nth-last-child(10) ~ .col-auto { width: 10%; width: calc((100% - 15px*9) / 10); } .row.no-gutter .tablet-auto:nth-last-child(10), .row.no-gutter .tablet-auto:nth-last-child(10) ~ .tablet-auto { width: 10%; } .row .tablet-auto:nth-last-child(11), .row .tablet-auto:nth-last-child(11) ~ .col-auto { width: 9.09090909%; width: calc((100% - 15px*10) / 11); } .row.no-gutter .tablet-auto:nth-last-child(11), .row.no-gutter .tablet-auto:nth-last-child(11) ~ .tablet-auto { width: 9.09090909%; } .row .tablet-auto:nth-last-child(12), .row .tablet-auto:nth-last-child(12) ~ .col-auto { width: 8.33333333%; width: calc((100% - 15px*11) / 12); } .row.no-gutter .tablet-auto:nth-last-child(12), .row.no-gutter .tablet-auto:nth-last-child(12) ~ .tablet-auto { width: 8.33333333%; } .row .tablet-auto:nth-last-child(13), .row .tablet-auto:nth-last-child(13) ~ .col-auto { width: 7.69230769%; width: calc((100% - 15px*12) / 13); } .row.no-gutter .tablet-auto:nth-last-child(13), .row.no-gutter .tablet-auto:nth-last-child(13) ~ .tablet-auto { width: 7.69230769%; } .row .tablet-auto:nth-last-child(14), .row .tablet-auto:nth-last-child(14) ~ .col-auto { width: 7.14285714%; width: calc((100% - 15px*13) / 14); } .row.no-gutter .tablet-auto:nth-last-child(14), .row.no-gutter .tablet-auto:nth-last-child(14) ~ .tablet-auto { width: 7.14285714%; } .row .tablet-auto:nth-last-child(15), .row .tablet-auto:nth-last-child(15) ~ .col-auto { width: 6.66666667%; width: calc((100% - 15px*14) / 15); } .row.no-gutter .tablet-auto:nth-last-child(15), .row.no-gutter .tablet-auto:nth-last-child(15) ~ .tablet-auto { width: 6.66666667%; } } .weui_dialog, .weui_toast { -webkit-transition-duration: .2s; transition-duration: .2s; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); visibility: hidden; margin: 0; left: 7.5%; top: 30%; z-index: 100; } .weui_dialog .weui_btn_dialog + .weui_btn_dialog, .weui_toast .weui_btn_dialog + .weui_btn_dialog { position: relative; } .weui_dialog .weui_btn_dialog + .weui_btn_dialog:after, .weui_toast .weui_btn_dialog + .weui_btn_dialog:after { content: " "; position: absolute; left: 0; top: 0; width: 1px; height: 100%; border-left: 1px solid #D5D5D6; color: #D5D5D6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); } .weui_dialog.weui_dialog_visible, .weui_toast.weui_dialog_visible, .weui_dialog.weui_toast_visible, .weui_toast.weui_toast_visible { opacity: 1; visibility: visible; -webkit-transform: scale(1); transform: scale(1); } @media screen and (min-width: 1024px) { .weui_dialog { left: 32.5%; } } .weui_toast { left: 50%; top: 35%; margin-left: -3.8em; } .weui_toast_forbidden { color: #F76260; } .weui_toast_cancel .weui_icon_toast:before { content: "\EA0D"; } .weui_toast_forbidden .weui_icon_toast:before { content: "\EA0B"; color: #F76260; } .weui_toast_text { min-height: 1em; width: auto; height: 45px; border-radius: 25px; margin-left: 0; -webkit-transform: scale(0.9) translate3d(-50%, 0, 0); transform: scale(0.9) translate3d(-50%, 0, 0); -webkit-transform-origin: left; transform-origin: left; } .weui_toast_text.weui_toast_visible { -webkit-transform: scale(1) translate3d(-50%, 0, 0); transform: scale(1) translate3d(-50%, 0, 0); } .weui_toast_text .weui_icon_toast { display: none; } .weui_toast_text .weui_toast_content { margin: 10px 15px; } .weui_mask { opacity: 0; -webkit-transition-duration: .3s; transition-duration: .3s; visibility: hidden; } .weui_mask.weui_mask_visible { opacity: 1; visibility: visible; } .weui-prompt-input { padding: 4px 6px; border: 1px solid #ccc; box-sizing: border-box; height: 2em; width: 80%; margin-top: 10px; } .weui-pull-to-refresh { margin-top: -50px; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .weui-pull-to-refresh.refreshing { -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } .weui-pull-to-refresh.touching { -webkit-transition-duration: 0s; transition-duration: 0s; } .weui-pull-to-refresh-layer { height: 30px; line-height: 30px; padding: 10px; text-align: center; } .weui-pull-to-refresh-layer .down { display: inline-block; } .weui-pull-to-refresh-layer .up, .weui-pull-to-refresh-layer .refresh { display: none; } .weui-pull-to-refresh-layer .pull-to-refresh-arrow { display: inline-block; z-index: 10; width: 20px; height: 20px; margin-right: 4px; vertical-align: -4px; background: no-repeat center; background-size: 13px 20px; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transform: rotate(0deg) translate3d(0, 0, 0); transform: rotate(0deg) translate3d(0, 0, 0); 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"); } .weui-pull-to-refresh-layer .pull-to-refresh-preloader { display: none; vertical-align: -4px; margin-right: 4px; width: 20px; height: 20px; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: preloader-spin 1s steps(12, end) infinite; animation: preloader-spin 1s steps(12, end) infinite; } .weui-pull-to-refresh-layer .pull-to-refresh-preloader:after { display: block; width: 100%; height: 100%; content: ""; 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"); background-repeat: no-repeat; background-position: 50%; background-size: 100%; } .pull-up .weui-pull-to-refresh-layer .down, .refreshing .weui-pull-to-refresh-layer .down { display: none; } .pull-up .weui-pull-to-refresh-layer .pull-to-refresh-arrow { display: inline-block; -webkit-transform: rotate(180deg) translate3d(0, 0, 0); transform: rotate(180deg) translate3d(0, 0, 0); } .pull-up .weui-pull-to-refresh-layer .up { display: inline-block; } .pull-down .weui-pull-to-refresh-layer .pull-to-refresh-arrow { display: inline-block; } .pull-down .weui-pull-to-refresh-layer .down { display: inline-block; } .refreshing .weui-pull-to-refresh-layer .pull-to-refresh-arrow { display: none; } .refreshing .weui-pull-to-refresh-layer .pull-to-refresh-preloader { display: inline-block; } .refreshing .weui-pull-to-refresh-layer .refresh { display: inline-block; } @keyframes preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .weui_tab_bd_item.weui-pull-to-refresh { position: absolute; top: 50px; } .weui-infinite-scroll { height: 24px; line-height: 24px; padding: 10px; text-align: center; } .weui-infinite-scroll .infinite-preloader { display: inline-block; margin-right: 4px; vertical-align: -4px; width: 20px; height: 20px; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: preloader-spin 1s steps(12, end) infinite; animation: preloader-spin 1s steps(12, end) infinite; } .weui-infinite-scroll .infinite-preloader:after { display: block; width: 100%; height: 100%; content: ""; 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"); background-repeat: no-repeat; background-position: 50%; background-size: 100%; } .weui_tab { overflow: hidden; } .weui_navbar_item { color: #888; } .weui_navbar_item.weui_bar_item_on { color: #666; } .weui_tab_bd .weui_tab_bd_item { display: none; height: 100%; overflow: auto; } .weui_tab_bd .weui_tab_bd_item.weui_tab_bd_item_active { display: block; } .toolbar { position: relative; width: 100%; font-size: .85rem; line-height: 1.5; color: #3d4145; background: #f7f7f8; } .toolbar:before { content: ''; position: absolute; left: 0; top: 0; bottom: auto; right: auto; height: 1px; width: 100%; background-color: #d9d9d9; display: block; z-index: 15; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .toolbar:before { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } @media only screen and (-webkit-min-device-pixel-ratio: 3) { .toolbar:before { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } } .toolbar .toolbar-inner { height: 2.2rem; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; text-align: center; } .toolbar .title { position: absolute; display: block; width: 100%; padding: 0; font-size: .85rem; font-weight: normal; line-height: 2.2rem; color: #3d4145; text-align: center; white-space: nowrap; } .toolbar .picker-button { position: absolute; right: 0; box-sizing: border-box; height: 2.2rem; line-height: 2.2rem; color: #04BE02; z-index: 1; padding: 0 .5rem; } /* === Columns Picker === */ .weui-picker-modal { width: 100%; position: absolute; bottom: 0; text-align: center; border-radius: 0; opacity: 0.6; color: #3d4145; -webkit-transition-duration: .3s; transition-duration: .3s; height: 13rem; background: #EFEFF4; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; } .weui-picker-modal.weui-picker-modal-visible { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .weui-picker-modal .picker-modal-inner { position: relative; height: 10.8rem; } .weui-picker-modal .picker-columns { width: 100%; height: 13rem; z-index: 11500; } .weui-picker-modal .picker-columns.picker-modal-inline, .popover .weui-picker-modal .picker-columns { height: 10rem; } @media (orientation: landscape) and (max-height: 415px) { .weui-picker-modal .picker-columns:not(.picker-modal-inline) { height: 10rem; } } .weui-picker-modal .popover.popover-picker-columns { width: 14rem; } .weui-picker-modal .picker-items { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; width: 100%; padding: 0; text-align: right; font-size: 1rem; font-weight: normal; -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); } .weui-picker-modal .bar + .picker-items { height: 10.8rem; } .weui-picker-modal .picker-items-col { overflow: hidden; position: relative; max-height: 100%; } .weui-picker-modal .picker-items-col.picker-items-col-left { text-align: left; } .weui-picker-modal .picker-items-col.picker-items-col-center { text-align: center; } .weui-picker-modal .picker-items-col.picker-items-col-right { text-align: right; } .weui-picker-modal .picker-items-col.picker-items-col-divider { color: #3d4145; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .weui-picker-modal .picker-items-col-wrapper { -webkit-transition: 300ms; transition: 300ms; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .weui-picker-modal .picker-item { height: 32px; line-height: 32px; padding: 0 10px; white-space: nowrap; position: relative; overflow: hidden; text-overflow: ellipsis; color: #9b9b9b; left: 0; top: 0; width: 100%; box-sizing: border-box; -webkit-transition: 300ms; transition: 300ms; } .picker-items-col-absolute .weui-picker-modal .picker-item { position: absolute; } .weui-picker-modal .picker-item.picker-item-far { pointer-events: none; } .weui-picker-modal .picker-item.picker-selected { color: #3d4145; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .weui-picker-modal .picker-center-highlight { height: 32px; box-sizing: border-box; position: absolute; left: 0; width: 100%; top: 50%; margin-top: -16px; pointer-events: none; } .weui-picker-modal .picker-center-highlight:before { content: ''; position: absolute; left: 0; top: 0; bottom: auto; right: auto; height: 1px; width: 100%; background-color: #D9D9D9; display: block; z-index: 15; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .weui-picker-modal .picker-center-highlight:before { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } @media only screen and (-webkit-min-device-pixel-ratio: 3) { .weui-picker-modal .picker-center-highlight:before { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } } .weui-picker-modal .picker-center-highlight:after { content: ''; position: absolute; left: 0; bottom: 0; right: auto; top: auto; height: 1px; width: 100%; background-color: #D9D9D9; display: block; z-index: 15; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .weui-picker-modal .picker-center-highlight:after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } @media only screen and (-webkit-min-device-pixel-ratio: 3) { .weui-picker-modal .picker-center-highlight:after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } } .weui-picker-modal .picker-3d .picker-items { overflow: hidden; -webkit-perspective: 1200px; perspective: 1200px; } .weui-picker-modal .picker-3d .picker-items-col, .weui-picker-modal .picker-3d .picker-items-col-wrapper, .weui-picker-modal .picker-3d .picker-item { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .weui-picker-modal .picker-3d .picker-items-col { overflow: visible; } .weui-picker-modal .picker-3d .picker-item { -webkit-transform-origin: center center -110px; transform-origin: center center -110px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .weui-picker-overlay, .weui-picker-container { position: fixed; bottom: 0; left: 0; right: 0; height: 0; width: 100%; z-index: 100; } .city-picker .col-province { width: 5rem; } .city-picker .col-city { width: 6rem; } .city-picker .col-district { width: 5rem; } .weui-picker-container .weui_cells { margin: 0; text-align: left; } .weui-select-modal { height: auto; } .weui-select-modal .weui_cells { overflow-y: auto; overflow-x: hidden; max-height: 16rem; } .weui-select-modal .weui_cells:after { display: none; } /* === Calendar === */ .weui-picker-calendar { background: #fff; height: 15rem; width: 100%; overflow: hidden; } .weui-picker-calendar .picker-modal-inner { overflow: hidden; height: 12.8rem; } .picker-calendar-week-days { height: .9rem; background: #f7f7f8; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; font-size: 11px; box-sizing: border-box; position: relative; } .picker-calendar-week-days:after { content: ''; position: absolute; left: 0; bottom: 0; right: auto; top: auto; height: 1px; width: 100%; background-color: #c4c4c4; display: block; z-index: 15; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .picker-calendar-week-days:after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } @media only screen and (-webkit-min-device-pixel-ratio: 3) { .picker-calendar-week-days:after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } } .picker-calendar-week-days .picker-calendar-week-day { -webkit-flex-shrink: 1; -ms-flex: 0 1 auto; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; width: 14.28571429%; width: calc(100% / 7); line-height: 17px; text-align: center; } .picker-calendar-week-days + .picker-calendar-months { height: 11.9rem; } .picker-calendar-months { width: 100%; height: 100%; overflow: hidden; position: relative; } .picker-calendar-months-wrapper { position: relative; width: 100%; height: 100%; -webkit-transition: 300ms; transition: 300ms; } .picker-calendar-month { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .picker-calendar-row { height: 16.66666667%; height: calc(100% / 6); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-shrink: 1; -ms-flex: 0 1 auto; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; width: 100%; position: relative; } .picker-calendar-row:after { content: ''; position: absolute; left: 0; bottom: 0; right: auto; top: auto; height: 1px; width: 100%; background-color: #ccc; display: block; z-index: 15; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .picker-calendar-row:after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } @media only screen and (-webkit-min-device-pixel-ratio: 3) { .picker-calendar-row:after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } } .weui-picker-modal .picker-calendar-row:last-child:after { display: none; } .picker-calendar-day { -webkit-flex-shrink: 1; -ms-flex: 0 1 auto; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; box-sizing: border-box; width: 14.28571429%; width: calc(100% / 7); text-align: center; color: #3d4145; font-size: 15px; cursor: pointer; } .picker-calendar-day.picker-calendar-day-prev, .picker-calendar-day.picker-calendar-day-next { color: #ccc; } .picker-calendar-day.picker-calendar-day-disabled { color: #d4d4d4; cursor: auto; } .picker-calendar-day.picker-calendar-day-today span { background: #e3e3e3; } .picker-calendar-day.picker-calendar-day-selected span { background: #04BE02; color: #fff; } .picker-calendar-day span { display: inline-block; border-radius: 100%; width: 30px; height: 30px; line-height: 30px; } .picker-calendar-month-picker, .picker-calendar-year-picker { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; width: 50%; max-width: 200px; -webkit-flex-shrink: 10; -ms-flex: 0 10 auto; -webkit-flex-shrink: 10; -ms-flex-negative: 10; flex-shrink: 10; } .picker-calendar-month-picker a.icon-only, .picker-calendar-year-picker a.icon-only { min-width: 36px; } .picker-calendar-month-picker span, .picker-calendar-year-picker span { -webkit-flex-shrink: 1; -ms-flex: 0 1 auto; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; position: relative; overflow: hidden; text-overflow: ellipsis; } .popover .picker-calendar .picker-calendar-week-days, .picker-calendar.picker-modal-inline .picker-calendar-week-days { background: none; } .popover .picker-calendar .toolbar:before, .picker-calendar.picker-modal-inline .toolbar:before, .popover .picker-calendar .picker-calendar-week-days:before, .picker-calendar.picker-modal-inline .picker-calendar-week-days:before { display: none; } .popover .picker-calendar .toolbar:after, .picker-calendar.picker-modal-inline .toolbar:after, .popover .picker-calendar .picker-calendar-week-days:after, .picker-calendar.picker-modal-inline .picker-calendar-week-days:after { display: none; } .popover .picker-calendar .toolbar ~ .picker-modal-inner .picker-calendar-months:before, .picker-calendar.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before, .popover .picker-calendar .picker-calendar-week-days ~ .picker-calendar-months:before, .picker-calendar.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before { content: ''; position: absolute; left: 0; top: 0; bottom: auto; right: auto; height: 1px; width: 100%; background-color: #c4c4c4; display: block; z-index: 15; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .popover .picker-calendar .toolbar ~ .picker-modal-inner .picker-calendar-months:before, .picker-calendar.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before, .popover .picker-calendar .picker-calendar-week-days ~ .picker-calendar-months:before, .picker-calendar.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } @media only screen and (-webkit-min-device-pixel-ratio: 3) { .popover .picker-calendar .toolbar ~ .picker-modal-inner .picker-calendar-months:before, .picker-calendar.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before, .popover .picker-calendar .picker-calendar-week-days ~ .picker-calendar-months:before, .picker-calendar.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } } .picker-calendar-month-picker, .picker-calendar-year-picker { display: block; line-height: 2.2rem; } .picker-calendar-month-picker a.icon-only, .picker-calendar-year-picker a.icon-only { float: left; width: 25%; height: 2.2rem; line-height: 2rem; } .picker-calendar-month-picker .current-month-value, .picker-calendar-year-picker .current-month-value, .picker-calendar-month-picker .current-year-value, .picker-calendar-year-picker .current-year-value { float: left; width: 50%; height: 2.2rem; } i.icon { display: inline-block; vertical-align: middle; background-size: 100% auto; background-position: center; background-repeat: no-repeat; font-style: normal; position: relative; } i.icon.icon-next, i.icon.icon-prev { width: 0.75rem; height: 0.75rem; } i.icon.icon-next { 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"); } i.icon.icon-prev { 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"); } /** * Swiper 3.3.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * * http://www.idangero.us/swiper/ * * Copyright 2016, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ * * Licensed under MIT * * Released on: February 7, 2016 */ .swiper-container { margin: 0 auto; position: relative; overflow: hidden; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-no-flexbox .swiper-slide { float: left; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-transition-property: -webkit-transform, height; -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; transition-property: transform, height; transition-property: transform, height, -webkit-transform; } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } /* IE10 Windows Phone 8 Fixes */ .swiper-wp8-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; touch-action: pan-x; } /* Arrows */ .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { 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"); left: 10px; right: auto; } .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black { 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"); } .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white { 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"); } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { 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"); right: 10px; left: auto; } .swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black { 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"); } .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { 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"); } /* Pagination Styles */ .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -moz-appearance: none; -ms-ap