UNPKG

antd-mobile-alita

Version:

基于 React 的移动设计规范实现

1,964 lines (1,871 loc) 214 kB
/*! * * antd-mobile v2.3.4 * * Copyright 2015-present, Alipay, Inc. * All rights reserved. * */ /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, /* 1 */ menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /*do not import this file except components/style/index.less*/ .am-fade-enter, .am-fade-appear { opacity: 0; -webkit-animation-duration: .2s; animation-duration: .2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); -webkit-animation-play-state: paused; animation-play-state: paused; } .am-fade-leave { -webkit-animation-duration: .2s; animation-duration: .2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); -webkit-animation-play-state: paused; animation-play-state: paused; } .am-fade-enter.am-fade-enter-active, .am-fade-appear.am-fade-appear-active { -webkit-animation-name: amFadeIn; animation-name: amFadeIn; -webkit-animation-play-state: running; animation-play-state: running; } .am-fade-leave.am-fade-leave-active { -webkit-animation-name: amFadeOut; animation-name: amFadeOut; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes amFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes amFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes amFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes amFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .am-slide-up-enter, .am-slide-up-appear { -webkit-transform: translate(0, 100%); -ms-transform: translate(0, 100%); transform: translate(0, 100%); } .am-slide-up-enter, .am-slide-up-appear, .am-slide-up-leave { -webkit-animation-duration: .2s; animation-duration: .2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); -webkit-animation-play-state: paused; animation-play-state: paused; } .am-slide-up-enter.am-slide-up-enter-active, .am-slide-up-appear.am-slide-up-appear-active { -webkit-animation-name: amSlideUpIn; animation-name: amSlideUpIn; -webkit-animation-play-state: running; animation-play-state: running; } .am-slide-up-leave.am-slide-up-leave-active { -webkit-animation-name: amSlideUpOut; animation-name: amSlideUpOut; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes amSlideUpIn { 0% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes amSlideUpIn { 0% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes amSlideUpOut { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } } @keyframes amSlideUpOut { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } } .am.am-zoom-enter, .am.am-zoom-leave { display: block; } .am-zoom-enter, .am-zoom-appear { opacity: 0; -webkit-animation-duration: .2s; animation-duration: .2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); -webkit-animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28); animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28); -webkit-animation-play-state: paused; animation-play-state: paused; } .am-zoom-leave { -webkit-animation-duration: .2s; animation-duration: .2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); -webkit-animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05); animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05); -webkit-animation-play-state: paused; animation-play-state: paused; } .am-zoom-enter.am-zoom-enter-active, .am-zoom-appear.am-zoom-appear-active { -webkit-animation-name: amZoomIn; animation-name: amZoomIn; -webkit-animation-play-state: running; animation-play-state: running; } .am-zoom-leave.am-zoom-leave-active { -webkit-animation-name: amZoomOut; animation-name: amZoomOut; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes amZoomIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); transform: scale(0, 0); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes amZoomIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); transform: scale(0, 0); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes amZoomOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); transform: scale(0, 0); } } @keyframes amZoomOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); transform: scale(0, 0); } } .am-slide-down-enter, .am-slide-down-appear { -webkit-transform: translate(0, -100%); -ms-transform: translate(0, -100%); transform: translate(0, -100%); } .am-slide-down-enter, .am-slide-down-appear, .am-slide-down-leave { -webkit-animation-duration: .2s; animation-duration: .2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); -webkit-animation-play-state: paused; animation-play-state: paused; } .am-slide-down-enter.am-slide-down-enter-active, .am-slide-down-appear.am-slide-down-appear-active { -webkit-animation-name: amSlideDownIn; animation-name: amSlideDownIn; -webkit-animation-play-state: running; animation-play-state: running; } .am-slide-down-leave.am-slide-down-leave-active { -webkit-animation-name: amSlideDownOut; animation-name: amSlideDownOut; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes amSlideDownIn { 0% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes amSlideDownIn { 0% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes amSlideDownOut { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } } @keyframes amSlideDownOut { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } } *, *:before, *:after { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { background-color: #f5f5f9; font-size: 14px; } *[contenteditable] { -webkit-user-select: auto !important; } *:focus { outline: none; } a { background: transparent; text-decoration: none; outline: none; } .am-accordion { position: relative; border-top: 1PX solid #ddd; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-accordion { border-top: none; } html:not([data-scale]) .am-accordion::before { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 1PX; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-accordion::before { -webkit-transform: scaleY(0.33); -ms-transform: scaleY(0.33); transform: scaleY(0.33); } } .am-accordion-anim-active { -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .am-accordion .am-accordion-item .am-accordion-header { position: relative; color: #000; font-size: 17px; height: 44px; line-height: 44px; background-color: #fff; -webkit-box-sizing: content-box; box-sizing: content-box; padding-left: 15px; padding-right: 30px; border-bottom: 1PX solid #ddd; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-accordion .am-accordion-item .am-accordion-header { border-bottom: none; } html:not([data-scale]) .am-accordion .am-accordion-item .am-accordion-header::after { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: 1PX; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-accordion .am-accordion-item .am-accordion-header::after { -webkit-transform: scaleY(0.33); -ms-transform: scaleY(0.33); transform: scaleY(0.33); } } .am-accordion .am-accordion-item .am-accordion-header i { position: absolute; display: block; top: 15px; right: 15px; width: 15px; height: 15px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2226%22%20viewBox%3D%220%200%2016%2026%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20id%3D%22UI-KIT_%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%229.9%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20transform%3D%22translate(-5809.000000%2C%20-8482.000000)%22%20fill%3D%22%23C7C7CC%22%3E%3Cpolygon%20id%3D%22Disclosure-Indicator%22%20points%3D%225811%208482%205809%208484%205820.5%208495%205809%208506%205811%208508%205825%208495%22%3E%3C%2Fpolygon%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease; } .am-accordion .am-accordion-item .am-accordion-header[aria-expanded~="true"] i { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .am-accordion .am-accordion-item .am-accordion-content { overflow: hidden; background: #fff; } .am-accordion .am-accordion-item .am-accordion-content .am-accordion-content-box { font-size: 15px; color: #333; position: relative; border-bottom: 1PX solid #ddd; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-accordion .am-accordion-item .am-accordion-content .am-accordion-content-box { border-bottom: none; } html:not([data-scale]) .am-accordion .am-accordion-item .am-accordion-content .am-accordion-content-box::after { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: 1PX; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-accordion .am-accordion-item .am-accordion-content .am-accordion-content-box::after { -webkit-transform: scaleY(0.33); -ms-transform: scaleY(0.33); transform: scaleY(0.33); } } .am-accordion .am-accordion-item .am-accordion-content .am-accordion-content-box .am-list-body { border-top: 0; } .am-accordion .am-accordion-item .am-accordion-content .am-accordion-content-box .am-list-body:before { display: none !important; } .am-accordion .am-accordion-item .am-accordion-content.am-accordion-content-inactive { display: none; } .am-badge { position: relative; display: inline-block; line-height: 1; vertical-align: middle; } .am-badge-text { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: -6px; height: 18px; line-height: 18px; min-width: 9px; border-radius: 12px; padding: 0 5px; text-align: center; font-size: 12px; color: #fff; background-color: #ff5b05; white-space: nowrap; -webkit-transform: translateX(-45%); -ms-transform: translateX(-45%); transform: translateX(-45%); -webkit-transform-origin: -10% center; -ms-transform-origin: -10% center; transform-origin: -10% center; z-index: 10; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", SimSun, sans-serif; } .am-badge-text a { color: #fff; } .am-badge-text p { margin: 0; padding: 0; } .am-badge-hot .am-badge-text { background-color: #f96268; } .am-badge-dot { position: absolute; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transform-origin: 0 center; -ms-transform-origin: 0 center; transform-origin: 0 center; top: -4px; height: 8px; width: 8px; border-radius: 100%; background: #ff5b05; z-index: 10; } .am-badge-dot-large { height: 16px; width: 16px; } .am-badge-not-a-wrapper .am-badge-text, .am-badge-not-a-wrapper .am-badge-dot { top: auto; display: block; position: relative; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .am-badge-corner { width: 80px; padding: 8px; position: absolute; right: -32px; top: 8px; background-color: #ff5b05; color: #fff; white-space: nowrap; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); text-align: center; font-size: 15px; } .am-badge-corner-wrapper { overflow: hidden; } .am-action-sheet-wrap { position: fixed; overflow: auto; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; -webkit-overflow-scrolling: touch; outline: 0; } .am-action-sheet-mask { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); height: 100%; z-index: 1000; } .am-action-sheet-mask-hidden { display: none; } .am-action-sheet-close { display: none; } .am-action-sheet { position: fixed; left: 0; bottom: 0; width: 100%; background-color: #fff; padding-bottom: env(safe-area-inset-bottom); } .am-action-sheet.am-action-sheet-share { background-color: #f2f2f2; } .am-action-sheet-title, .am-action-sheet-message { margin: 15px auto; padding: 0 15px; text-align: center; } .am-action-sheet-title { font-size: 17px; } .am-action-sheet-message { color: #888; font-size: 14px; } .am-action-sheet-button-list { text-align: center; color: #000; } .am-action-sheet-button-list-item { font-size: 18px; padding: 0 8px; margin: 0; position: relative; height: 50px; line-height: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; border-top: 1PX solid #ddd; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-action-sheet-button-list-item { border-top: none; } html:not([data-scale]) .am-action-sheet-button-list-item::before { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 1PX; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-action-sheet-button-list-item::before { -webkit-transform: scaleY(0.33); -ms-transform: scaleY(0.33); transform: scaleY(0.33); } } .am-action-sheet-button-list-item.am-action-sheet-button-list-item-active { background-color: #ddd; } .am-action-sheet-button-list-badge { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .am-action-sheet-button-list-badge .am-badge { margin-left: 8px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .am-action-sheet-button-list-item-content { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .am-action-sheet-button-list .am-action-sheet-cancel-button { padding-top: 6px; position: relative; } .am-action-sheet-button-list .am-action-sheet-cancel-button-mask { position: absolute; top: 0; left: 0; width: 100%; height: 6px; background-color: #e7e7ed; border-top: 1PX solid #ddd; border-bottom: 1PX solid #ddd; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-action-sheet-button-list .am-action-sheet-cancel-button-mask { border-top: none; } html:not([data-scale]) .am-action-sheet-button-list .am-action-sheet-cancel-button-mask::before { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 1PX; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-action-sheet-button-list .am-action-sheet-cancel-button-mask::before { -webkit-transform: scaleY(0.33); -ms-transform: scaleY(0.33); transform: scaleY(0.33); } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-action-sheet-button-list .am-action-sheet-cancel-button-mask { border-bottom: none; } html:not([data-scale]) .am-action-sheet-button-list .am-action-sheet-cancel-button-mask::after { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: 1PX; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-action-sheet-button-list .am-action-sheet-cancel-button-mask::after { -webkit-transform: scaleY(0.33); -ms-transform: scaleY(0.33); transform: scaleY(0.33); } } .am-action-sheet-button-list .am-action-sheet-destructive-button { color: #f4333c; } .am-action-sheet-share-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; border-top: 1PX solid #ddd; padding: 21px 0 21px 15px; overflow-y: scroll; -webkit-overflow-scrolling: touch; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-action-sheet-share-list { border-top: none; } html:not([data-scale]) .am-action-sheet-share-list::before { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 1PX; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-action-sheet-share-list::before { -webkit-transform: scaleY(0.33); -ms-transform: scaleY(0.33); transform: scaleY(0.33); } } .am-action-sheet-share-list-item { -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; margin: 0 12px 0 0; } .am-action-sheet-share-list-item-icon { margin-bottom: 9px; width: 60px; height: 60px; background-color: #fff; border-radius: 3px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .am-action-sheet-share-list-item-title { color: #888; font-size: 10px; text-align: center; } .am-action-sheet-share-cancel-button { height: 50px; line-height: 50px; text-align: center; background-color: #fff; color: #000; font-size: 18px; position: relative; border-top: 1PX solid #ddd; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-action-sheet-share-cancel-button { border-top: none; } html:not([data-scale]) .am-action-sheet-share-cancel-button::before { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 1PX; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-action-sheet-share-cancel-button::before { -webkit-transform: scaleY(0.33); -ms-transform: scaleY(0.33); transform: scaleY(0.33); } } .am-action-sheet-share-cancel-button.am-action-sheet-share-cancel-button-active { background-color: #ddd; } .am-activity-indicator { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: 99; } .am-activity-indicator-spinner { display: inline-block; width: 20px; height: 20px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-2.125%20-1.875%2064%2064%22%3E%3Cpath%20fill%3D%22%23CCC%22%20d%3D%22M29.875-1.875c-17.673%200-32%2014.327-32%2032s14.327%2032%2032%2032%2032-14.327%2032-32-14.327-32-32-32zm0%2060.7c-15.85%200-28.7-12.85-28.7-28.7s12.85-28.7%2028.7-28.7%2028.7%2012.85%2028.7%2028.7-12.85%2028.7-28.7%2028.7z%22%2F%3E%3Cpath%20fill%3D%22%23108ee9%22%20d%3D%22M61.858%2030.34c.003-.102.008-.203.008-.305%200-11.43-5.996-21.452-15.01-27.113l-.013.026c-.24-.137-.515-.22-.81-.22-.912%200-1.65.738-1.65%201.65%200%20.654.384%201.215.937%201.482%207.963%205.1%2013.247%2014.017%2013.247%2024.176%200%20.147-.01.293-.01.44h.022c0%20.01-.004.02-.004.03%200%20.91.74%201.65%201.65%201.65s1.65-.74%201.65-1.65c0-.06-.012-.112-.018-.167z%22%2F%3E%3C%2Fsvg%3E"); background-position: 50%; background-size: 100%; background-repeat: no-repeat; -webkit-animation: spinner-anime 1s linear infinite; animation: spinner-anime 1s linear infinite; } .am-activity-indicator-tip { font-size: 14px; margin-left: 8px; color: #000; opacity: 0.4; } .am-activity-indicator.am-activity-indicator-toast { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; z-index: 1999; } .am-activity-indicator.am-activity-indicator-toast .am-activity-indicator-spinner { margin: 0; } .am-activity-indicator.am-activity-indicator-toast .am-activity-indicator-toast { display: inline-block; position: relative; top: 4px; } .am-activity-indicator-content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 15px 15px; border-radius: 7px; background-clip: padding-box; color: #fff; background-color: rgba(58, 58, 58, 0.9); font-size: 15px; line-height: 20px; } .am-activity-indicator-spinner-lg { width: 32px; height: 32px; } @-webkit-keyframes spinner-anime { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner-anime { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .am-icon { fill: currentColor; background-size: cover; width: 22px; height: 22px; } .am-icon-xxs { width: 15px; height: 15px; } .am-icon-xs { width: 18px; height: 18px; } .am-icon-sm { width: 21px; height: 21px; } .am-icon-md { width: 22px; height: 22px; } .am-icon-lg { width: 36px; height: 36px; } .am-icon-loading { -webkit-animation: cirle-anim 1s linear infinite; animation: cirle-anim 1s linear infinite; } @-webkit-keyframes cirle-anim { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes cirle-anim { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .am-button { display: block; outline: 0 none; -webkit-appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; text-align: center; font-size: 18px; height: 47px; line-height: 47px; overflow: hidden; text-overflow: ellipsis; word-break: break-word; white-space: nowrap; color: #000; background-color: #fff; border: 1PX solid #ddd; border-radius: 5px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-button { position: relative; border: none; } html:not([data-scale]) .am-button::before { content: ''; position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 1PX solid #ddd; border-radius: 10px; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); -webkit-box-sizing: border-box; box-sizing: border-box; pointer-events: none; } } .am-button-borderfix:before { -webkit-transform: scale(0.49) !important; -ms-transform: scale(0.49) !important; transform: scale(0.49) !important; } .am-button.am-button-active { background-color: #ddd; } .am-button.am-button-disabled { color: rgba(0, 0, 0, 0.3); opacity: 0.6; } .am-button-primary { color: #fff; background-color: #108ee9; border: 1PX solid #108ee9; border-radius: 5px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-button-primary { position: relative; border: none; } html:not([data-scale]) .am-button-primary::before { content: ''; position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 1PX solid #108ee9; border-radius: 10px; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); -webkit-box-sizing: border-box; box-sizing: border-box; pointer-events: none; } } .am-button-primary.am-button-active { color: rgba(255, 255, 255, 0.3); background-color: #0e80d2; } .am-button-primary.am-button-disabled { color: rgba(255, 255, 255, 0.6); opacity: 0.4; } .am-button-ghost { color: #108ee9; background-color: transparent; border: 1PX solid #108ee9; border-radius: 5px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-button-ghost { position: relative; border: none; } html:not([data-scale]) .am-button-ghost::before { content: ''; position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 1PX solid #108ee9; border-radius: 10px; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); -webkit-box-sizing: border-box; box-sizing: border-box; pointer-events: none; } } .am-button-ghost.am-button-active { color: rgba(16, 142, 233, 0.6); background-color: transparent; border: 1PX solid rgba(16, 142, 233, 0.6); border-radius: 5px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-button-ghost.am-button-active { position: relative; border: none; } html:not([data-scale]) .am-button-ghost.am-button-active::before { content: ''; position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 1PX solid rgba(16, 142, 233, 0.6); border-radius: 10px; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); -webkit-box-sizing: border-box; box-sizing: border-box; pointer-events: none; } } .am-button-ghost.am-button-disabled { color: rgba(0, 0, 0, 0.1); border: 1PX solid rgba(0, 0, 0, 0.1); border-radius: 5px; opacity: 1; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-button-ghost.am-button-disabled { position: relative; border: none; } html:not([data-scale]) .am-button-ghost.am-button-disabled::before { content: ''; position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 1PX solid rgba(0, 0, 0, 0.1); border-radius: 10px; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); -webkit-box-sizing: border-box; box-sizing: border-box; pointer-events: none; } } .am-button-warning { color: #fff; background-color: #e94f4f; } .am-button-warning.am-button-active { color: rgba(255, 255, 255, 0.3); background-color: #d24747; } .am-button-warning.am-button-disabled { color: rgba(255, 255, 255, 0.6); opacity: 0.4; } .am-button-inline { display: inline-block; padding: 0 15px; } .am-button-inline.am-button-icon { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } .am-button-small { font-size: 13px; height: 30px; line-height: 30px; padding: 0 15px; } .am-button-icon { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .am-button > .am-button-icon { margin-right: 0.5em; } .am-picker-col { display: block; position: relative; height: 238px; overflow: hidden; width: 100%; } .am-picker-col-content { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; padding: 102px 0; } .am-picker-col-item { -ms-touch-action: manipulation; touch-action: manipulation; text-align: center; font-size: 16px; height: 34px; line-height: 34px; color: #000; white-space: nowrap; text-overflow: ellipsis; } .am-picker-col-item-selected { font-size: 17px; } .am-picker-col-mask { position: absolute; left: 0; top: 0; height: 100%; margin: 0 auto; width: 100%; z-index: 3; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.95)), to(rgba(255, 255, 255, 0.6))), -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.95)), to(rgba(255, 255, 255, 0.6))); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)); background-position: top, bottom; background-size: 100% 102px; background-repeat: no-repeat; } .am-picker-col-indicator { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 34px; position: absolute; left: 0; top: 102px; z-index: 3; border-top: 1PX solid #ddd; border-bottom: 1PX solid #ddd; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-picker-col-indicator { border-top: none; } html:not([data-scale]) .am-picker-col-indicator::before { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 1PX; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-picker-col-indicator::before { -webkit-transform: scaleY(0.33); -ms-transform: scaleY(0.33); transform: scaleY(0.33); } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-picker-col-indicator { border-bottom: none; } html:not([data-scale]) .am-picker-col-indicator::after { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: 1PX; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-picker-col-indicator::after { -webkit-transform: scaleY(0.33); -ms-transform: scaleY(0.33); transform: scaleY(0.33); } } .am-picker { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .am-picker-item { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; } .am-picker-popup { left: 0; bottom: 0; position: fixed; width: 100%; background-color: #fff; padding-bottom: env(safe-area-inset-bottom); } .am-picker-popup-wrap { position: fixed; overflow: auto; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; -webkit-overflow-scrolling: touch; outline: 0; -webkit-transform: translateZ(1px); transform: translateZ(1px); } .am-picker-popup-mask { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); height: 100%; z-index: 1000; -webkit-transform: translateZ(1px); transform: translateZ(1px); } .am-picker-popup-mask-hidden { display: none; } .am-picker-popup-header { background-image: -webkit-linear-gradient(top, #e7e7e7, #e7e7e7, transparent, transparent); background-image: -webkit-gradient(linear, left top, left bottom, from(#e7e7e7), color-stop(#e7e7e7), color-stop(transparent), to(transparent)); background-image: linear-gradient(to bottom, #e7e7e7, #e7e7e7, transparent, transparent); background-position: bottom; background-size: 100% 1PX; background-repeat: no-repeat; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; border-bottom: 1PX solid #ddd; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-picker-popup-header { border-bottom: none; } html:not([data-scale]) .am-picker-popup-header::after { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: 1PX; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-picker-popup-header::after { -webkit-transform: scaleY(0.33); -ms-transform: scaleY(0.33); transf