weui-rails 0.2.0

data/assets/stylesheets/widget/weui_tips/weui_dialog.scss

@@ -0,0 +1,93 @@
+@import "../../base/fn";
+
+$weuiDialogBackgroundColor: #FAFAFC;
+$weuiDialogLineColor: #D5D5D6;
+$weuiDialogLinkColor: #3CC51F;
+
+.weui_dialog {
+    position: fixed;
+    z-index: 13;
+    width: 85%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    background-color: $weuiDialogBackgroundColor;
+    text-align: center;
+    border-radius: 3px;
+    .weui_dialog_confirm & {
+        .weui_dialog_hd {
+            text-align: left;
+            padding: 1.2em 20px .5em;
+        }
+        .weui_dialog_bd {
+            text-align: left;
+        }
+    }
+}
+
+.weui_dialog_hd {
+    padding: 1.2em 0 .5em;
+}
+
+.weui_dialog_title {
+    font-weight: 400;
+    font-size: 17px;
+}
+
+.weui_dialog_bd {
+    padding: 0 20px;
+    font-size: 15px;
+    color: $globalTextColor;
+}
+
+.weui_dialog_ft {
+    position: relative;
+    line-height: 42px;
+    margin-top: 20px;
+    font-size: 17px;
+    display: flex;
+    a {
+        display: block;
+        flex: 1;
+        color: $weuiDialogLinkColor;
+        text-decoration: none;
+        @include setTapColor();
+        &:active, &:hover {
+            text-decoration: none;
+        }
+    }
+    &:after {
+        content: " ";
+        @include setTopLine($weuiDialogLineColor);
+    }
+    .weui_dialog_confirm & {
+        a {
+            position: relative;
+            &:after {
+                content: " ";
+                @include setLeftLine($weuiDialogLineColor);
+            }
+            &:first-child {
+                &:after {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+
+.weui_btn_dialog {
+    &.default {
+        color: #353535;
+    }
+    &.primary {
+        color: #0BB20C;
+    }
+}
+
+@media screen and (min-width: 1024px) {
+    .weui_dialog {
+        width: 35%;
+    }
+}

data/assets/stylesheets/widget/weui_tips/weui_mask.scss

@@ -0,0 +1,35 @@
+@import "../../base/fn";
+
+.weui_mask {
+    position: fixed;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, .6);
+}
+
+.weui_mask_transparent {
+    position: fixed;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+.weui_mask_transition{
+    display: none;
+    position: fixed;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: rgba(0,0,0,0);
+    transition:background .3s;
+}
+.weui_fade_toggle{
+    background: rgba(0,0,0,.6);
+}

data/assets/stylesheets/widget/weui_tips/weui_toast.scss

@@ -0,0 +1,349 @@
+@import "../../base/fn";
+
+.weui_toast {
+    position: fixed;
+    z-index: 3;
+    width: 7.6em;
+    min-height: 7.6em;
+    top: 180px;
+    left: 50%;
+    margin-left: -3.8em;
+    background: rgba(40, 40, 40, 0.75);
+    text-align: center;
+    border-radius: 5px;
+    color: #FFFFFF;
+}
+
+.weui_icon_toast {
+    margin: 22px 0 0;
+    display: block;
+    &:before {
+        content: '\EA08';
+        color: #FFFFFF;
+        font-size: 55px;
+    }
+}
+
+.weui_toast_content {
+    margin: 0 0 15px;
+}
+
+// loading toast
+.weui_loading_toast {
+    .weui_toast_content {
+        margin-top: 64%;
+        font-size: 14px;
+    }
+}
+
+.weui_loading {
+    position: absolute;
+    width: 0px;
+    z-index: 2000000000;
+    left: 50%;
+    top: 38%;
+}
+
+.weui_loading_leaf {
+    position: absolute;
+    top: -1px;
+    @include opacity(0.25);
+    &:before {
+        content: " ";
+        position: absolute;
+        width: 8.14px;
+        height: 3.08px;
+        background: rgb(209, 209, 213);
+        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
+        border-radius: 1px;
+        transform-origin: left 50% 0px;
+    }
+    &_0 {
+        animation: opacity-60-25-0-12 1.25s linear infinite;
+        &:before {
+            transform: rotate(0deg) translate(7.92px, 0px);
+        }
+    }
+    &_1 {
+        animation: opacity-60-25-1-12 1.25s linear infinite;
+        &:before {
+            transform: rotate(30deg) translate(7.92px, 0px);
+        }
+    }
+    &_2 {
+        animation: opacity-60-25-2-12 1.25s linear infinite;
+        &:before {
+            transform: rotate(60deg) translate(7.92px, 0px);
+        }
+    }
+    &_3 {
+        animation: opacity-60-25-3-12 1.25s linear infinite;
+        &:before {
+            transform: rotate(90deg) translate(7.92px, 0px);
+        }
+    }
+    &_4 {
+        animation: opacity-60-25-4-12 1.25s linear infinite;
+        &:before {
+            transform: rotate(120deg) translate(7.92px, 0px);
+        }
+    }
+    &_5 {
+        animation: opacity-60-25-5-12 1.25s linear infinite;
+        &:before {
+            transform: rotate(150deg) translate(7.92px, 0px);
+        }
+    }
+    &_6 {
+        animation: opacity-60-25-6-12 1.25s linear infinite;
+        &:before {
+            transform: rotate(180deg) translate(7.92px, 0px);
+        }
+    }
+    &_7 {
+        animation: opacity-60-25-7-12 1.25s linear infinite;
+        &:before {
+            transform: rotate(210deg) translate(7.92px, 0px);
+        }
+    }
+    &_8 {
+        animation: opacity-60-25-8-12 1.25s linear infinite;
+        &:before {
+            transform: rotate(240deg) translate(7.92px, 0px);
+        }
+    }
+    &_9 {
+        animation: opacity-60-25-9-12 1.25s linear infinite;
+        &:before {
+            transform: rotate(270deg) translate(7.92px, 0px);
+        }
+    }
+    &_10 {
+        animation: opacity-60-25-10-12 1.25s linear infinite;
+        &:before {
+            transform: rotate(300deg) translate(7.92px, 0px);
+        }
+    }
+    &_11 {
+        animation: opacity-60-25-11-12 1.25s linear infinite;
+        &:before {
+            transform: rotate(330deg) translate(7.92px, 0px);
+        }
+    }
+}
+
+@keyframes opacity-60-25-0-12 {
+    0% {
+        @include opacity(0.25);
+    }
+    0.01% {
+        @include opacity(0.25);
+    }
+    0.02% {
+        @include opacity(1);
+    }
+    60.01% {
+        @include opacity(0.25);
+    }
+    100% {
+        @include opacity(0.25);
+    }
+}
+
+@keyframes opacity-60-25-1-12 {
+    0% {
+        @include opacity(0.25);
+    }
+    8.34333% {
+        @include opacity(0.25);
+    }
+    8.35333% {
+        @include opacity(1);
+    }
+    68.3433% {
+        @include opacity(0.25);
+    }
+    100% {
+        @include opacity(0.25);
+    }
+}
+
+@keyframes opacity-60-25-2-12 {
+    0% {
+        @include opacity(0.25);
+    }
+    16.6767% {
+        @include opacity(0.25);
+    }
+    16.6867% {
+        @include opacity(1);
+    }
+    76.6767% {
+        @include opacity(0.25);
+    }
+    100% {
+        @include opacity(0.25);
+    }
+}
+
+@keyframes opacity-60-25-3-12 {
+    0% {
+        @include opacity(0.25);
+    }
+    25.01% {
+        @include opacity(0.25);
+    }
+    25.02% {
+        @include opacity(1);
+    }
+    85.01% {
+        @include opacity(0.25);
+    }
+    100% {
+        @include opacity(0.25);
+    }
+}
+
+@keyframes opacity-60-25-4-12 {
+    0% {
+        @include opacity(0.25);
+    }
+    33.3433% {
+        @include opacity(0.25);
+    }
+    33.3533% {
+        @include opacity(1);
+    }
+    93.3433% {
+        @include opacity(0.25);
+    }
+    100% {
+        @include opacity(0.25);
+    }
+}
+
+@keyframes opacity-60-25-5-12 {
+    0% {
+        @include opacity(0.270958333333333);
+    }
+    41.6767% {
+        @include opacity(0.25);
+    }
+    41.6867% {
+        @include opacity(1);
+    }
+    1.67667% {
+        @include opacity(0.25);
+    }
+    100% {
+        @include opacity(0.270958333333333);
+    }
+}
+
+@keyframes opacity-60-25-6-12 {
+    0% {
+        @include opacity(0.375125);
+    }
+    50.01% {
+        @include opacity(0.25);
+    }
+    50.02% {
+        @include opacity(1);
+    }
+    10.01% {
+        @include opacity(0.25);
+    }
+    100% {
+        @include opacity(0.375125);
+    }
+}
+
+@keyframes opacity-60-25-7-12 {
+    0% {
+        @include opacity(0.479291666666667);
+    }
+    58.3433% {
+        @include opacity(0.25);
+    }
+    58.3533% {
+        @include opacity(1);
+    }
+    18.3433% {
+        @include opacity(0.25);
+    }
+    100% {
+        @include opacity(0.479291666666667);
+    }
+}
+
+@keyframes opacity-60-25-8-12 {
+    0% {
+        @include opacity(0.583458333333333);
+    }
+    66.6767% {
+        @include opacity(0.25);
+    }
+    66.6867% {
+        @include opacity(1);
+    }
+    26.6767% {
+        @include opacity(0.25);
+    }
+    100% {
+        @include opacity(0.583458333333333);
+    }
+}
+
+@keyframes opacity-60-25-9-12 {
+    0% {
+        @include opacity(0.687625);
+    }
+    75.01% {
+        @include opacity(0.25);
+    }
+    75.02% {
+        @include opacity(1);
+    }
+    35.01% {
+        @include opacity(0.25);
+    }
+    100% {
+        @include opacity(0.687625);
+    }
+}
+
+@keyframes opacity-60-25-10-12 {
+    0% {
+        @include opacity(0.791791666666667);
+    }
+    83.3433% {
+        @include opacity(0.25);
+    }
+    83.3533% {
+        @include opacity(1);
+    }
+    43.3433% {
+        @include opacity(0.25);
+    }
+    100% {
+        @include opacity(0.791791666666667);
+    }
+}
+
+@keyframes opacity-60-25-11-12 {
+    0% {
+        @include opacity(0.895958333333333);
+    }
+    91.6767% {
+        @include opacity(0.25);
+    }
+    91.6867% {
+        @include opacity(1);
+    }
+    51.6767% {
+        @include opacity(0.25);
+    }
+    100% {
+        @include opacity(0.895958333333333);
+    }
+}