diff --git a/src/js/action.js b/src/js/action.js index 8ab4244..572a9c2 100644 --- a/src/js/action.js +++ b/src/js/action.js @@ -5,7 +5,7 @@ var show = function(params) { - var mask = $("
").appendTo(document.body); + var mask = $("
").appendTo(document.body); var actions = params.actions || []; @@ -56,6 +56,10 @@ hide(); } + $(document).on("click", ".weui_actions_mask", function() { + $.closeActions(); + }); + var defaults = $.actions.prototype.defaults = { /*actions: [{ text: "菜单", diff --git a/src/less/calendar.less b/src/less/calendar.less index fbe46ae..fc8a71f 100644 --- a/src/less/calendar.less +++ b/src/less/calendar.less @@ -106,7 +106,7 @@ background: #e3e3e3; } &.picker-calendar-day-selected span { - background: #0894ec; + background: @color-primary; color:#fff; } span { @@ -174,3 +174,27 @@ 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; + + &.icon-next, &.icon-prev { + width: 0.75rem; + height: 0.75rem; + } + + &.icon-next { + .encoded-svg-background(""); + } + &.icon-prev { + .encoded-svg-background(""); + } +} diff --git a/src/less/mixin.less b/src/less/mixin.less index ac13663..1fca3a5 100644 --- a/src/less/mixin.less +++ b/src/less/mixin.less @@ -121,89 +121,7 @@ overflow: auto; -webkit-overflow-scrolling: touch; } -.flexbox() { - display: -webkit-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; -} -.flex-wrap(@fw) when (@fw = nowrap) { - -webkit-box-lines: single; - -moz-box-lines: single; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: none; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; -} -.flex-wrap(@fw) when (@fw = wrap) { - -webkit-box-lines: multiple; - -moz-box-lines: multiple; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} -.flex-wrap(@fw) when not (@fw = wrap) and not (@fw = nowrap) { - -webkit-flex-wrap: @fw; - -ms-flex-wrap: @fw; - flex-wrap: @fw; -} -.flex-shrink(@fs) { - -webkit-flex-shrink: @fs; - -ms-flex: 0 @fs auto; - flex-shrink: @fs; -} -.justify-content(@jc) when (@jc = flex-start) { - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; -} -.justify-content(@jc) when (@jc = flex-end) { - -webkit-box-pack: end; - -ms-flex-pack: end; - -webkit-justify-content: flex-end; - justify-content: flex-end; -} -.justify-content(@jc) when (@jc = space-between) { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - -webkit-justify-content: space-between; - justify-content: space-between; -} -.justify-content(@jc) when not (@jc = flex-start) and not (@jc = flex-end) and not (@jc = space-between) { - -webkit-box-pack: @jc; - -ms-flex-pack: @jc; - -webkit-justify-content: @jc; - justify-content: @jc; -} -.align-items(@ai) when (@ai = flex-start) { - -webkit-box-align: start; - -ms-flex-align: start; - -webkit-align-items: flex-start; - align-items: flex-start; -} -.align-items(@ai) when (@ai = flex-end) { - -webkit-box-align: end; - -ms-flex-align: end; - -webkit-align-items: flex-end; - align-items: flex-end; -} -.align-items(@ai) when not (@ai = flex-start) and not (@ai = flex-end) { - -webkit-box-align: @ai; - -ms-flex-align: @ai; - -webkit-align-items: @ai; - align-items: @ai; -} -.align-content(@ai) { - -ms-flex-line-pack: @ai; - -webkit-align-content: @ai; - align-content: @ai; -} -.align-self(@as) { - -ms-flex-item-align: @as; - -webkit-align-self: @as; - align-self: @as; -} + .clearfix() { &:before, &:after { @@ -214,7 +132,7 @@ clear: both; } } -/*.hairline(@position, @color) when (@position = top) { +.hairline(@position, @color) when (@position = top) { &:before { content: ''; position: absolute; @@ -325,8 +243,9 @@ &:before { background-color: @color; } -}*/ +} +/* .hairline(@position, @color) when (@position = top) { border-top: 1px solid @color; } @@ -359,20 +278,9 @@ border-left-color: @color; border-top-color: @color; } +*/ -// Encoded SVG Background -.encoded-svg-background(@svg) { - @url: `encodeURIComponent(@{svg})`; - background-image: url("data:image/svg+xml;charset=utf-8,@{url}"); -} -// Preserve3D -.preserve3d() { - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - -ms-transform-style: preserve-3d; - transform-style: preserve-3d; -} //from ratchet .linear-gradient(@color-from, @color-to) { diff --git a/src/less/picker.less b/src/less/picker.less index b985801..5c9ad0c 100644 --- a/src/less/picker.less +++ b/src/less/picker.less @@ -12,7 +12,7 @@ color: @color-text; transition-duration: .3s; height: 13rem; - background: #cfd5da; + background: #EFEFF4; &.weui-picker-modal-visible { opacity: 1; @@ -29,7 +29,7 @@ .toolbar { position: relative; width: 100%; - border-top: 1px solid #999; + .hairline(top, #d9d9d9); font-size: .85rem; line-height: 1.5; color: #3d4145; @@ -58,7 +58,8 @@ width: 100%; padding: 0; text-align: right; - font-size: 1.2rem; + 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); } @@ -92,8 +93,8 @@ transition-timing-function: ease-out; } .picker-item { - height: 36px; - line-height: 36px; + height: 32px; + line-height: 32px; padding: 0 10px; white-space: nowrap; position: relative; @@ -122,15 +123,15 @@ } } .picker-center-highlight { - height: 36px; + height: 32px; box-sizing: border-box; position: absolute; left: 0; width: 100%; top: 50%; margin-top: -18px; - .hairline(top, #a8abb0); - .hairline(bottom, #a8abb0); + .hairline(top, @color-hairline); + .hairline(bottom, @color-hairline); pointer-events: none; } // 3D Picker @@ -163,7 +164,7 @@ width: 100%; padding: 0; font-size: .85rem; - font-weight: 500; + font-weight: normal; line-height: 2.2rem; color: #3d4145; text-align: center; @@ -194,28 +195,6 @@ } -i.icon { - display: inline-block; - vertical-align: middle; - background-size: 100% auto; - background-position: center; - background-repeat: no-repeat; - font-style: normal; - position: relative; - - &.icon-next, &.icon-prev { - width: 0.75rem; - height: 0.75rem; - } - - &.icon-next { - .encoded-svg-background(""); - } - &.icon-prev { - .encoded-svg-background(""); - } -} - .city-picker { .col-province { width: 5rem; diff --git a/src/less/swiper.less b/src/less/swiper.less index 96633d6..277415b 100755 --- a/src/less/swiper.less +++ b/src/less/swiper.less @@ -215,7 +215,7 @@ button.swiper-pagination-bullet { } .swiper-pagination-bullet-active { opacity: 1; - background: #007aff; + background: @color-primary; } .swiper-pagination-white .swiper-pagination-bullet-active { background: #fff; diff --git a/src/less/variables.less b/src/less/variables.less index a3ab63a..aaaaa2b 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -3,7 +3,7 @@ // -------------------------------------------------- // 主色 -@color-primary: #0894ec; +@color-primary: #04BE02; @color-danger: #f6383a; @color-warning: #f60; @color-success: #4cd964; @@ -17,5 +17,7 @@ @color-bg: #eee; @color-text: #3d4145; //文案色 @color-text-secondary: #5f646e; //次级文案 -@color-text-gray: #999; //灰色文案 -@color-text-gray-light: #ccc; //更灰色文案 +@color-text-gray: #9b9b9b; //灰色文案 +@color-text-gray-light: #EFEFF4; //更灰色文案 + +@color-hairline: #D9D9D9;