更新新组件的样式。actions可以点击背景关闭

lihongxun945 · Mar 24, 2016 · 16cdb28 · 16cdb28
1 parent d68f44d
commit 16cdb28
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 134 deletions.
diff --git a/src/js/action.js b/src/js/action.js
@@ -5,7 +5,7 @@
 
   var show = function(params) {
 
-    var mask = $("<div class='weui_mask'></div>").appendTo(document.body);
+    var mask = $("<div class='weui_mask weui_actions_mask'></div>").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
@@ -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("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='#04BE02' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
+  }
+  &.icon-prev {
+    .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='#04BE02' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
+  }
+}
diff --git 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
@@ -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("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='#007aff' d='M1,1.6l11.8,5.8L1,13.4V1.6 M0,0v15l15-7.6L0,0L0,0z'/></g></svg>");
-  }
-  &.icon-prev {
-    .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><g><path fill='#007aff' d='M14,1.6v11.8L2.2,7.6L14,1.6 M15,0L0,7.6L15,15V0L15,0z'/></g></svg>");
-  }
-}
-
 .city-picker {
   .col-province {
     width: 5rem;

diff --git 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
@@ -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;