UNPKG

asia-weex-vue-render4light

Version:

Web renderer for weex project written in Vue DSL.

507 lines (456 loc) 14.9 kB
/*/////////////////////////////////////////////////////////////*/ .weex-root * { border-width: 0; border-color: inherit; border-style: solid; } .weex-ct { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: flex; position: relative; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-flex-grow: 0; -ms-flex-grow: 0; flex-grow: 0; -webkit-flex-basis: auto; flex-basis: auto; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; border: 0 solid black; margin: 0; padding: 0; min-width: 0; } .weex-ct.horizontal { -webkit-box-orient: horizontal; -webkit-flex-direction: row; flex-direction: row; } .weex-el { display: block; box-sizing: border-box; position: relative; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-flex-grow: 0; -ms-flex-grow: 0; flex-grow: 0; -webkit-flex-basis: auto; flex-basis: auto; border: 0 solid black; margin: 0; padding: 0; min-width: 0; } .weex-a { text-decoration: none; } body > .weex-div { min-height: 100%; } .weex-input, .weex-textarea { font-size: 0.426667rem; } .weex-input:focus, .weex-textarea:focus { outline: none; } .weex-image, .weex-img { background-repeat: no-repeat; background-position: 50% 50%; } .weex-toast { font-size: 0.426667rem; line-height: 0.426667rem; position: fixed; z-index: 1999999999; box-sizing: border-box; max-width: 80%; bottom: 50%; left: 50%; padding: 0.213333rem; background-color: #000; color: #fff; text-align: center; opacity: 0.6; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; border-radius: 0.066667rem; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .weex-toast.hide { opacity: 0; } .weex-alert .weex-alert-ok { width: 100%; } .weex-confirm .btn-group .btn { float: left; width: 50%; } .weex-confirm .btn-group .btn.btn-ok { border-right: 0.013333rem solid #ddd; } .weex-modal-wrap { display: none; position: fixed; z-index: 999999999; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.5; } .weex-modal-node { position: fixed; z-index: 9999999999; top: 50%; left: 50%; width: 6.666667rem; min-height: 2.666667rem; border-radius: 0.066667rem; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; } .weex-modal-node.hide { display: none; } .weex-modal-node .content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -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; width: 100%; min-height: 1.866667rem; box-sizing: border-box; font-size: 0.426667rem; line-height: 0.426667rem; padding: 0.213333rem; border-bottom: 0.013333rem solid #ddd; } .weex-modal-node .btn-group { width: 100%; height: 0.8rem; font-size: 0.373333rem; text-align: center; margin: 0; padding: 0; border: none; } .amfe-modal-node .btn-group .btn { text-align: center; } .weex-modal-node .btn-group .btn { box-sizing: border-box; height: 0.8rem; line-height: 0.8rem; margin: 0; padding: 0; border: none; background: none; text-align: center; } .weex-prompt .input-wrap { box-sizing: border-box; width: 100%; margin-top: 0.133333rem; height: 0.96rem; } .weex-prompt .input-wrap .input { box-sizing: border-box; width: 100%; height: 0.56rem; line-height: 0.56rem; font-size: 0.426667rem; border: 0.013333rem solid #999; } .weex-prompt .btn-group .btn { float: left; width: 50%; } .weex-prompt .btn-group .btn.btn-ok { border-right: 0.013333rem solid #ddd; } body > .weex-list, body > .weex-scroller { max-height: 100%; } .weex-list-wrapper, .weex-scroller-wrapper { -webkit-overflow-scrolling: touch; } .weex-list-wrapper { overflow-y: scroll !important; } .weex-list-inner, .weex-scroller-inner { -webkit-overflow-scrolling: touch; width: 100%; } .weex-scroller-inner::-webkit-scrollbar { width: 0; } .weex-scroller-wrapper.weex-scroller-vertical { overflow-y: scroll; } .weex-scroller-wrapper.weex-scroller-horizontal { overflow-x: scroll; } .weex-scroller-horizontal .weex-scroller-inner { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-orient: horizontal; height: 100%; } .iossticky { position: -webkit-sticky !important; position: sticky !important; z-index: 9999; top: 0; } .sticky { position: fixed; top: 0; z-index: 9999; } .weex-cell { width: 100%; } .weex-refresh, .weex-loading { -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; width: 100%; overflow: hidden; } .weex-slider-wrapper { overflow: hidden; } .weex-slider-inner { position: absolute; height: 100%; top: 0; left: 0; } .weex-slider-cell { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; height: 100%; overflow: hidden; } .weex-indicator { position: absolute; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-orient: horizontal; margin: 0; padding: 0; } .weex-indicator-item { display: inline-block; position: relative; border-radius: 50%; width: 0.266667rem; height: 0.266667rem; background-color: #BBBBBB; } .weex-indicator-item + .weex-indicator-item { margin-left: 0.133333rem; } .weex-indicator-item-active { background-color: blue; } .weex-refresh-indicator, .weex-loading-indicator { width: 1.0rem; height: 1.0rem; -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; overflow: visible; background: none; } .weex-refresh-indicator:before, .weex-loading-indicator:before { display: block; content: ''; font-size: 0.16rem; width: 1em; height: 1em; left: -60%; top: 40%; border-radius: 50%; position: relative; text-indent: -9999em; -webkit-animation: weex-spinner 1.1s infinite ease; animation: weex-spinner 1.1s infinite ease; -webkit-transform: translate3d(1.0rem, 0, 0); transform: translate3d(1.0rem, 0, 0); } @-webkit-keyframes weex-spinner { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; } } @keyframes weex-spinner { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; } } .weex-switch { border: 0.013333rem solid #dfdfdf; cursor: pointer; display: inline-block; position: relative; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-sizing: content-box; background-clip: content-box; color: #64bd63; width: 1.333333rem; height: 0.8rem; background-color: white; border-color: #dfdfdf; box-shadow: #dfdfdf 0 0 0 0 inset; border-radius: 0.8rem; -webkit-transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; } .weex-switch-checked { background-color: #64bd63; border-color: #64bd63; box-shadow: #64bd63 0 0 0 0.533333rem inset; } .weex-switch-checked.weex-switch-disabled { background-color: #A0CCA0; box-shadow: #A0CCA0 0 0 0 0.533333rem inset; } .weex-switch-disabled { background-color: #EEEEEE; } .weex-switch-inner { width: 0.8rem; height: 0.8rem; background: #fff; border-radius: 100%; box-shadow: 0 0.013333rem 0.04rem rgba(0, 0, 0, 0.4); position: absolute; top: 0; left: 0; -webkit-transition: background-color 0.4s, left 0.2s; transition: background-color 0.4s, left 0.2s; } .weex-switch-checked > .weex-switch-inner { left: 0.533333rem; } .weex-text { display: -webkit-box; -webkit-box-orient: vertical; position: relative; white-space: pre-wrap; /* not using 'pre': support auto line feed. */ font-size: 0.426667rem; word-wrap: break-word; overflow: hidden; /* it'll be clipped if the height is not high enough. */ } .weex-web { position: relative; width: 100%; height: 100%; border: none; box-sizing: border-box; }