Merge branch 'master' of gitlab.qima-inc.com:fe/oxygen

packages/zanui/src/dialog.pcss

@@ -0,0 +1,95 @@
+@import "./mixins/border_retina.pcss";
+
+@component-namespace o2 {
+  @component dialog-wrapper {
+    position: absolute;
+  }
+
+  @component dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    background-color: #fff;
+    width: 85%;
+    border-radius: 4px;
+    font-size: 16px;
+    overflow: hidden;
+    backface-visibility: hidden;
+    transition: .2s;
+
+    @descendent header {
+      padding: 15px 0 0;
+    }
+
+    @descendent content {
+      padding: 15px 20px;
+      min-height: 36px;
+      position: relative;
+
+      &::after {
+        @mixin border-retina (bottom);
+      }
+    }
+
+    @descendent title {
+      text-align: center;
+      padding-left: 0;
+      margin-bottom: 0;
+      font-size: 16px;
+      color: #333;
+    }
+
+    @descendent message {
+      color: #999;
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    @descendent footer {
+      font-size: 14px;
+      overflow: hidden;
+    }
+
+    .is-twobtn {
+      .o2-dialog-btn {
+        width: 50%;
+      }
+
+      .o2-dialog-cancel {
+        &::after {
+          @mixin border-retina (right);
+        }
+      }
+    }
+
+    @descendent btn {
+      line-height: 40px;
+      border: 0;
+      background-color: #fff;
+      float: left;
+      box-sizing: border-box;
+      text-align: center;
+      position: relative;
+    }
+
+    @descendent cancel {
+      color: #333;
+    }
+
+    @descendent confirm {
+      color: #00C000;
+      width: 100%;
+    }
+  }
+}
+
+.dialog-bounce-enter {
+  opacity: 0;
+  transform: translate3d(-50%, -50%, 0) scale(0.7);
+}
+.dialog-bounce-leave-active {
+  opacity: 0;
+  transform: translate3d(-50%, -50%, 0) scale(0.9);
+}

packages/zanui/src/index.pcss

@@ -3,6 +3,8 @@
  */
 @import './button.pcss';
 @import './cell.pcss';
+@import './dialog.pcss';
 @import './field.pcss';
 @import './icon.pcss';
+@import './popup.pcss';
 @import './switch.pcss';

packages/zanui/src/popup.pcss

@@ -0,0 +1,75 @@
+.v-modal {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.701961);
+}
+
+@component-namespace o2 {
+  @component popup {
+    position: fixed;
+    background-color: #fff;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    backface-visibility: hidden;
+    transition: .2s ease-out;
+
+    @modifier top {
+      top: 0;
+      right: auto;
+      bottom: auto;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
+    }
+
+    @modifier right {
+      top: 50%;
+      right: 0;
+      bottom: auto;
+      left: auto;
+      transform: translate3d(0, -50%, 0);
+    }
+
+    @modifier bottom {
+      top: auto;
+      bottom: 0;
+      right: auto;
+      left: 50%;
+      transform: translate3d(-50%, 0, 0);
+    }
+
+    @modifier left {
+      top: 50%;
+      right: auto;
+      bottom: auto;
+      left: 0;
+      transform: translate3d(0, -50%, 0);
+    }
+  }
+}
+
+.popup-slide-top-enter,
+.popup-slide-top-leave-active {
+  transform: translate3d(-50%, -100%, 0);
+}
+
+.popup-slide-right-enter,
+.popup-slide-right-leave-active {
+  transform: translate3d(100%, -50%, 0);
+}
+
+.popup-slide-bottom-enter,
+.popup-slide-bottom-leave-active {
+  transform: translate3d(-50%, 100%, 0);
+}
+
+.popup-slide-left-enter, .popup-slide-left-leave-active {
+  transform: translate3d(-100%, -50%, 0);
+}
+
+.popup-fade-enter, .popup-fade-leave-active {
+  opacity: 0;
+}