bk-magic-vue 2.5.9-beta.2 → 2.5.9-beta.21

package/lib/ui/loading.css

@@ -84,68 +84,6 @@
                     animation-delay:0.55s;
         }
 
-.bk-loading .bk-loading1.bk-black .point1,
-            .bk-loading .bk-loading1.bk-black .point2,
-            .bk-loading .bk-loading1.bk-black .point3,
-            .bk-loading .bk-loading1.bk-black .point4{
-                background:#979ba5;
-            }
-
-.bk-dot-loading,
-.bk-loading1{
-    position:relative;
-    width:75px;
-    height:14px;
-    margin:auto;
-    display:inline-block;
-}
-
-.bk-dot-loading .point, .bk-loading1 .point{
-        position:absolute;
-        top:0;
-        width:14px;
-        height:14px;
-        -webkit-animation-name:scale-animate;
-                animation-name:scale-animate;
-        -webkit-animation-duration:.8s;
-                animation-duration:.8s;
-        -webkit-animation-iteration-count:infinite;
-                animation-iteration-count:infinite;
-        -webkit-animation-direction:normal;
-                animation-direction:normal;
-        -webkit-transform:scale(.6);
-                transform:scale(.6);
-        border-radius:19px;
-    }
-
-.bk-dot-loading .point1, .bk-loading1 .point1{
-        background-color:#fd6154;
-        left:0;
-        -webkit-animation-delay:0.1s;
-                animation-delay:0.1s;
-    }
-
-.bk-dot-loading .point2, .bk-loading1 .point2{
-        background-color:#ffb726;
-        left:20px;
-        -webkit-animation-delay:0.25s;
-                animation-delay:0.25s;
-    }
-
-.bk-dot-loading .point3, .bk-loading1 .point3{
-        background-color:#4cd084;
-        left:40px;
-        -webkit-animation-delay:0.4s;
-                animation-delay:0.4s;
-    }
-
-.bk-dot-loading .point4, .bk-loading1 .point4{
-        background-color:#57a3f1;
-        left:60px;
-        -webkit-animation-delay:0.55s;
-                animation-delay:0.55s;
-    }
-
 .bk-dot-loading.bk-size-mini, .bk-loading1.bk-size-mini{
         width:30px;
     }
@@ -251,181 +189,6 @@
             background:#979BA5;
         }
 
-.bk-spin-loading,
-.bk-loading2{
-    width:39px;
-    height:39px;
-    position:relative;
-    margin:auto;
-    display:inline-block;
-    vertical-align:middle;
-}
-
-.bk-spin-loading .rotate,
-.bk-loading2 .rotate{
-    position:absolute;
-    top:77%;
-    right:43%;
-    background-color:none;
-    background-color:#39424e\9\0;
-    width:6px;
-    height:8px;
-    -webkit-transform-origin:50% -10px;
-            transform-origin:50% -10px;
-    border-radius:8px;
-    -webkit-transform:scale(0.4);
-            transform:scale(0.4);
-    -webkit-animation-name:fade;
-            animation-name:fade;
-    -webkit-animation-duration:1.2s;
-            animation-duration:1.2s;
-    -webkit-animation-iteration-count:infinite;
-            animation-iteration-count:infinite;
-    -webkit-animation-direction:normal;
-            animation-direction:normal;
-}
-
-.bk-spin-loading.bk-spin-loading-success .rotate,
-.bk-loading2.bk-spin-loading-success .rotate{
-    background:#30d878\9\0;
-    -webkit-animation-name:fadeSuccess;
-            animation-name:fadeSuccess;
-}
-
-.bk-spin-loading.bk-spin-loading-danger .rotate,
-.bk-loading2.bk-spin-loading-danger .rotate{
-    background:#ff5656\9\0;
-    -webkit-animation-name:fadeDanger;
-            animation-name:fadeDanger;
-}
-
-.bk-spin-loading.bk-spin-loading-warning .rotate,
-.bk-loading2.bk-spin-loading-warning .rotate{
-    background:#ffb400\9\0;
-    -webkit-animation-name:fadeWarning;
-            animation-name:fadeWarning;
-}
-
-.bk-spin-loading.bk-spin-loading-primary .rotate,
-.bk-loading2.bk-spin-loading-primary .rotate{
-    background:#3c96ff\9\0;
-    -webkit-animation-name:fadePrimary;
-            animation-name:fadePrimary;
-}
-
-.bk-spin-loading.bk-spin-loading-white .rotate,
-.bk-loading2.bk-spin-loading-white .rotate{
-    background:#fff\9\0;
-    -webkit-animation-name:fadeWhite;
-            animation-name:fadeWhite;
-}
-
-.bk-spin-loading .rotate1,
-.bk-loading2 .rotate1{
-    -webkit-animation-delay:0.45s;
-            animation-delay:0.45s;
-    -webkit-transform:rotate(-90deg);
-            transform:rotate(-90deg);
-}
-
-.bk-spin-loading .rotate2,
-.bk-loading2 .rotate2{
-    -webkit-animation-delay:0.6s;
-            animation-delay:0.6s;
-    -webkit-transform:rotate(-45deg);
-            transform:rotate(-45deg);
-}
-
-.bk-spin-loading .rotate3,
-.bk-loading2 .rotate3{
-    -webkit-animation-delay:0.75s;
-            animation-delay:0.75s;
-    -webkit-transform:rotate(0deg);
-            transform:rotate(0deg);
-}
-
-.bk-spin-loading .rotate4,
-.bk-loading2 .rotate4{
-    -webkit-animation-delay:0.9s;
-            animation-delay:0.9s;
-    -webkit-transform:rotate(45deg);
-            transform:rotate(45deg);
-}
-
-.bk-spin-loading .rotate5,
-.bk-loading2 .rotate5{
-    -webkit-animation-delay:1.05s;
-            animation-delay:1.05s;
-    -webkit-transform:rotate(90deg);
-            transform:rotate(90deg);
-}
-
-.bk-spin-loading .rotate6,
-.bk-loading2 .rotate6{
-    -webkit-animation-delay:1.2s;
-            animation-delay:1.2s;
-    -webkit-transform:rotate(135deg);
-            transform:rotate(135deg);
-}
-
-.bk-spin-loading .rotate7,
-.bk-loading2 .rotate7{
-    -webkit-animation-delay:1.35s;
-            animation-delay:1.35s;
-    -webkit-transform:rotate(180deg);
-            transform:rotate(180deg);
-}
-
-.bk-spin-loading .rotate8,
-.bk-loading2 .rotate8{
-    -webkit-animation-delay:1.5s;
-            animation-delay:1.5s;
-    -webkit-transform:rotate(-135deg);
-            transform:rotate(-135deg);
-}
-
-.bk-spin-loading.bk-spin-loading-large,
-.bk-loading2.bk-spin-loading-large{
-    width:69px;
-    height:69px;
-}
-
-.bk-spin-loading.bk-spin-loading-large .rotate,
-.bk-loading2.bk-spin-loading-large .rotate{
-    width:10px;
-    height:14px;
-    -webkit-transform-origin:50% -18px;
-            transform-origin:50% -18px;
-}
-
-.bk-spin-loading.bk-spin-loading-small,
-.bk-loading2.bk-spin-loading-small{
-    width:27px;
-    height:27px;
-}
-
-.bk-spin-loading.bk-spin-loading-small .rotate,
-.bk-loading2.bk-spin-loading-small .rotate{
-    width:4px;
-    height:5px;
-    -webkit-transform-origin:50% -7px;
-            transform-origin:50% -7px;
-}
-
-.bk-spin-loading.bk-spin-loading-mini,
-.bk-loading2.bk-spin-loading-mini{
-    width:16px;
-    height:16px;
-}
-
-.bk-spin-loading.bk-spin-loading-mini .rotate,
-.bk-loading2.bk-spin-loading-mini .rotate{
-    width:2px;
-    height:3px;
-    -webkit-transform-origin:50% -4px;
-            transform-origin:50% -4px;
-}
-
 @keyframes scale-animate{
     0%{
         -webkit-transform:scale(1);
@@ -450,24 +213,26 @@
 
 .bk-spin-loading,
 .bk-loading2{
-    width:39px;
-    height:39px;
+    width:48px;
+    height:48px;
     position:relative;
     margin:auto;
     display:inline-block;
     vertical-align:middle;
+    display:-webkit-box;
+    display:-ms-flexbox;
+    display:flex;
+    -webkit-box-pack:center;
+        -ms-flex-pack:center;
+            justify-content:center;
 }
 
 .bk-spin-loading .rotate, .bk-loading2 .rotate{
         position:absolute;
-        top:77%;
-        right:43%;
-        background-color:none;
-        background-color:#39424e\9\0;
         width:6px;
         height:8px;
-        -webkit-transform-origin:50% -10px;
-                transform-origin:50% -10px;
+        -webkit-transform-origin:50% 24px;
+                transform-origin:50% 24px;
         border-radius:8px;
         -webkit-transform:scale(0.4);
                 transform:scale(0.4);
@@ -482,31 +247,26 @@
     }
 
 .bk-spin-loading.bk-spin-loading-success .rotate, .bk-loading2.bk-spin-loading-success .rotate{
-            background:#30d878\9\0;
             -webkit-animation-name:fadeSuccess;
                     animation-name:fadeSuccess;
         }
 
 .bk-spin-loading.bk-spin-loading-danger .rotate, .bk-loading2.bk-spin-loading-danger .rotate{
-            background:#ff5656\9\0;
             -webkit-animation-name:fadeDanger;
                     animation-name:fadeDanger;
         }
 
 .bk-spin-loading.bk-spin-loading-warning .rotate, .bk-loading2.bk-spin-loading-warning .rotate{
-            background:#ffb400\9\0;
             -webkit-animation-name:fadeWarning;
                     animation-name:fadeWarning;
         }
 
 .bk-spin-loading.bk-spin-loading-primary .rotate, .bk-loading2.bk-spin-loading-primary .rotate{
-            background:#3c96ff\9\0;
             -webkit-animation-name:fadePrimary;
                     animation-name:fadePrimary;
         }
 
 .bk-spin-loading.bk-spin-loading-white .rotate, .bk-loading2.bk-spin-loading-white .rotate{
-            background:#fff\9\0;
             -webkit-animation-name:fadeWhite;
                     animation-name:fadeWhite;
         }
@@ -568,27 +328,29 @@
     }
 
 .bk-spin-loading.bk-spin-loading-large, .bk-loading2.bk-spin-loading-large{
-        width:69px;
-        height:69px;
+        width:68px;
+        height:68px;
     }
 
 .bk-spin-loading.bk-spin-loading-large .rotate, .bk-loading2.bk-spin-loading-large .rotate{
             width:10px;
-            height:14px;
-            -webkit-transform-origin:50% -18px;
-                    transform-origin:50% -18px;
+            height:12px;
+            border-radius:12px;
+            -webkit-transform-origin:50% 34px;
+                    transform-origin:50% 34px;
         }
 
 .bk-spin-loading.bk-spin-loading-small, .bk-loading2.bk-spin-loading-small{
-        width:27px;
-        height:27px;
+        width:32px;
+        height:32px;
     }
 
 .bk-spin-loading.bk-spin-loading-small .rotate, .bk-loading2.bk-spin-loading-small .rotate{
             width:4px;
             height:5px;
-            -webkit-transform-origin:50% -7px;
-                    transform-origin:50% -7px;
+            border-radius:5px;
+            -webkit-transform-origin:50% 16px;
+                    transform-origin:50% 16px;
         }
 
 .bk-spin-loading.bk-spin-loading-mini, .bk-loading2.bk-spin-loading-mini{
@@ -599,8 +361,9 @@
 .bk-spin-loading.bk-spin-loading-mini .rotate, .bk-loading2.bk-spin-loading-mini .rotate{
             width:2px;
             height:3px;
-            -webkit-transform-origin:50% -4px;
-                    transform-origin:50% -4px;
+            border-radius:3px;
+            -webkit-transform-origin:50% 8px;
+                    transform-origin:50% 8px;
         }
 
 @keyframes fade{
@@ -609,7 +372,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -619,7 +382,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -629,7 +392,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -639,7 +402,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -649,7 +412,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -659,7 +422,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -669,7 +432,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -679,7 +442,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -689,7 +452,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -699,7 +462,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -709,7 +472,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -719,7 +482,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -762,7 +525,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -772,7 +535,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -782,7 +545,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -792,7 +555,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -802,7 +565,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -812,7 +575,7 @@
     }
 
     100%{
-        background-color:none;
+        background-color:transparent;
     }
 }
 
@@ -871,4 +634,4 @@
 
 .bk-default-loading .bk-loading-wrapper :nth-child(1){
             margin:unset;
-          }
+          }

package/lib/ui/loading.min.css

@@ -1,2 +1,2 @@
-.bk-loading{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;background-color:hsla(0,0%,100%,.9);z-index:100}.bk-loading .bk-loading-wrapper{text-align:center;line-height:1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}.bk-loading-title{text-align:center;font-size:14px;color:#63656e;line-height:normal;margin-top:5px}.bk-loading .bk-loading1{position:relative;width:75px;height:14px;margin:auto;display:inline-block}.bk-loading .bk-loading1 .point{position:absolute;top:0;width:14px;height:14px;-webkit-animation-name:scale-animate;animation-name:scale-animate;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:normal;animation-direction:normal;-webkit-transform:scale(.6);transform:scale(.6);border-radius:19px}.bk-loading .bk-loading1 .point1{background-color:#fd6154;left:0;-webkit-animation-delay:.1s;animation-delay:.1s}.bk-loading .bk-loading1 .point2{background-color:#ffb726;left:20px;-webkit-animation-delay:.25s;animation-delay:.25s}.bk-loading .bk-loading1 .point3{background-color:#4cd084;left:40px;-webkit-animation-delay:.4s;animation-delay:.4s}.bk-loading .bk-loading1 .point4{background-color:#57a3f1;left:60px;-webkit-animation-delay:.55s;animation-delay:.55s}.bk-loading .bk-loading1.bk-black .point1,.bk-loading .bk-loading1.bk-black .point2,.bk-loading .bk-loading1.bk-black .point3,.bk-loading .bk-loading1.bk-black .point4{background:#979ba5}.bk-dot-loading,.bk-loading1{position:relative;width:75px;height:14px;margin:auto;display:inline-block}.bk-dot-loading .point,.bk-loading1 .point{position:absolute;top:0;width:14px;height:14px;-webkit-animation-name:scale-animate;animation-name:scale-animate;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:normal;animation-direction:normal;-webkit-transform:scale(.6);transform:scale(.6);border-radius:19px}.bk-dot-loading .point1,.bk-loading1 .point1{background-color:#fd6154;left:0;-webkit-animation-delay:.1s;animation-delay:.1s}.bk-dot-loading .point2,.bk-loading1 .point2{background-color:#ffb726;left:20px;-webkit-animation-delay:.25s;animation-delay:.25s}.bk-dot-loading .point3,.bk-loading1 .point3{background-color:#4cd084;left:40px;-webkit-animation-delay:.4s;animation-delay:.4s}.bk-dot-loading .point4,.bk-loading1 .point4{background-color:#57a3f1;left:60px;-webkit-animation-delay:.55s;animation-delay:.55s}.bk-dot-loading.bk-size-mini,.bk-loading1.bk-size-mini{width:30px}.bk-dot-loading.bk-size-mini .point,.bk-loading1.bk-size-mini .point{width:6px;height:6px}.bk-dot-loading.bk-size-mini .point1,.bk-loading1.bk-size-mini .point1{left:0}.bk-dot-loading.bk-size-mini .point2,.bk-loading1.bk-size-mini .point2{left:10px}.bk-dot-loading.bk-size-mini .point3,.bk-loading1.bk-size-mini .point3{left:20px}.bk-dot-loading.bk-size-mini .point4,.bk-loading1.bk-size-mini .point4{left:30px}.bk-dot-loading.bk-size-small,.bk-loading1.bk-size-small{width:45px}.bk-dot-loading.bk-size-small .point,.bk-loading1.bk-size-small .point{width:10px;height:10px}.bk-dot-loading.bk-size-small .point1,.bk-loading1.bk-size-small .point1{left:0}.bk-dot-loading.bk-size-small .point2,.bk-loading1.bk-size-small .point2{left:15px}.bk-dot-loading.bk-size-small .point3,.bk-loading1.bk-size-small .point3{left:30px}.bk-dot-loading.bk-size-small .point4,.bk-loading1.bk-size-small .point4{left:45px}.bk-dot-loading.bk-black .point1,.bk-dot-loading.bk-black .point2,.bk-dot-loading.bk-black .point3,.bk-dot-loading.bk-black .point4,.bk-loading1.bk-black .point1,.bk-loading1.bk-black .point2,.bk-loading1.bk-black .point3,.bk-loading1.bk-black .point4{background:#979ba5}.bk-dot-loading.bk-primary .point1,.bk-dot-loading.bk-primary .point2,.bk-dot-loading.bk-primary .point3,.bk-dot-loading.bk-primary .point4,.bk-loading1.bk-primary .point1,.bk-loading1.bk-primary .point2,.bk-loading1.bk-primary .point3,.bk-loading1.bk-primary .point4{background:#3c96ff}.bk-dot-loading.bk-danger .point1,.bk-dot-loading.bk-danger .point2,.bk-dot-loading.bk-danger .point3,.bk-dot-loading.bk-danger .point4,.bk-loading1.bk-danger .point1,.bk-loading1.bk-danger .point2,.bk-loading1.bk-danger .point3,.bk-loading1.bk-danger .point4{background:#ff5656}.bk-dot-loading.bk-warning .point1,.bk-dot-loading.bk-warning .point2,.bk-dot-loading.bk-warning .point3,.bk-dot-loading.bk-warning .point4,.bk-loading1.bk-warning .point1,.bk-loading1.bk-warning .point2,.bk-loading1.bk-warning .point3,.bk-loading1.bk-warning .point4{background:#ffb848}.bk-dot-loading.bk-default .point1,.bk-dot-loading.bk-default .point2,.bk-dot-loading.bk-default .point3,.bk-dot-loading.bk-default .point4,.bk-loading1.bk-default .point1,.bk-loading1.bk-default .point2,.bk-loading1.bk-default .point3,.bk-loading1.bk-default .point4{background:#979ba5}@keyframes scale-animate{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(.6);transform:scale(.6)}}@-webkit-keyframes scale-animate{0%{-webkit-transform:scale(1)}to{-webkit-transform:scale(.6)}}.bk-loading2,.bk-spin-loading{width:39px;height:39px;position:relative;margin:auto;display:inline-block;vertical-align:middle}.bk-loading2 .rotate,.bk-spin-loading .rotate{position:absolute;top:77%;right:43%;background-color:none;background-color:#39424e\9\0;width:6px;height:8px;-webkit-transform-origin:50% -10px;transform-origin:50% -10px;border-radius:8px;-webkit-transform:scale(.4);transform:scale(.4);-webkit-animation-name:fade;animation-name:fade;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:normal;animation-direction:normal}.bk-loading2.bk-spin-loading-success .rotate,.bk-spin-loading.bk-spin-loading-success .rotate{background:#30d878\9\0;-webkit-animation-name:fadeSuccess;animation-name:fadeSuccess}.bk-loading2.bk-spin-loading-danger .rotate,.bk-spin-loading.bk-spin-loading-danger .rotate{background:#ff5656\9\0;-webkit-animation-name:fadeDanger;animation-name:fadeDanger}.bk-loading2.bk-spin-loading-warning .rotate,.bk-spin-loading.bk-spin-loading-warning .rotate{background:#ffb400\9\0;-webkit-animation-name:fadeWarning;animation-name:fadeWarning}.bk-loading2.bk-spin-loading-primary .rotate,.bk-spin-loading.bk-spin-loading-primary .rotate{background:#3c96ff\9\0;-webkit-animation-name:fadePrimary;animation-name:fadePrimary}.bk-loading2.bk-spin-loading-white .rotate,.bk-spin-loading.bk-spin-loading-white .rotate{background:#fff\9\0;-webkit-animation-name:fadeWhite;animation-name:fadeWhite}.bk-loading2 .rotate1,.bk-spin-loading .rotate1{-webkit-animation-delay:.45s;animation-delay:.45s;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.bk-loading2 .rotate2,.bk-spin-loading .rotate2{-webkit-animation-delay:.6s;animation-delay:.6s;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.bk-loading2 .rotate3,.bk-spin-loading .rotate3{-webkit-animation-delay:.75s;animation-delay:.75s;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.bk-loading2 .rotate4,.bk-spin-loading .rotate4{-webkit-animation-delay:.9s;animation-delay:.9s;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.bk-loading2 .rotate5,.bk-spin-loading .rotate5{-webkit-animation-delay:1.05s;animation-delay:1.05s;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.bk-loading2 .rotate6,.bk-spin-loading .rotate6{-webkit-animation-delay:1.2s;animation-delay:1.2s;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.bk-loading2 .rotate7,.bk-spin-loading .rotate7{-webkit-animation-delay:1.35s;animation-delay:1.35s;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bk-loading2 .rotate8,.bk-spin-loading .rotate8{-webkit-animation-delay:1.5s;animation-delay:1.5s;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.bk-loading2.bk-spin-loading-large,.bk-spin-loading.bk-spin-loading-large{width:69px;height:69px}.bk-loading2.bk-spin-loading-large .rotate,.bk-spin-loading.bk-spin-loading-large .rotate{width:10px;height:14px;-webkit-transform-origin:50% -18px;transform-origin:50% -18px}.bk-loading2.bk-spin-loading-small,.bk-spin-loading.bk-spin-loading-small{width:27px;height:27px}.bk-loading2.bk-spin-loading-small .rotate,.bk-spin-loading.bk-spin-loading-small .rotate{width:4px;height:5px;-webkit-transform-origin:50% -7px;transform-origin:50% -7px}.bk-loading2.bk-spin-loading-mini,.bk-spin-loading.bk-spin-loading-mini{width:16px;height:16px}.bk-loading2.bk-spin-loading-mini .rotate,.bk-spin-loading.bk-spin-loading-mini .rotate{width:2px;height:3px;-webkit-transform-origin:50% -4px;transform-origin:50% -4px}@-webkit-keyframes fade{0%{background-color:#39424e}to{background-color:none}}@-webkit-keyframes fadeSuccess{0%{background-color:#2dcb56}to{background-color:none}}@-webkit-keyframes fadePrimary{0%{background-color:#3c96ff}to{background-color:none}}@-webkit-keyframes fadeDanger{0%{background-color:#ff5656}to{background-color:none}}@-webkit-keyframes fadeWarning{0%{background-color:#ffb848}to{background-color:none}}@-webkit-keyframes fadeWhite{0%{background-color:#fff}to{background-color:none}}.bk-loading,.bk-loading-box{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;background-color:hsla(0,0%,100%,.9);z-index:100}.bk-loading-box .bk-loading-wrapper,.bk-loading .bk-loading-wrapper{text-align:center;line-height:1;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.bk-loading-box-title,.bk-loading-title{text-align:center;font-size:14px;color:#63656e;line-height:normal;margin-top:5px}@keyframes fade{0%{background-color:#39424e}to{background-color:none}}@keyframes fadeSuccess{0%{background-color:#30d878}to{background-color:none}}@keyframes fadePrimary{0%{background-color:#3c96ff}to{background-color:none}}@keyframes fadeDanger{0%{background-color:#ff5656}to{background-color:none}}@keyframes fadeWarning{0%{background-color:#ffb400}to{background-color:none}}@keyframes fadeWhite{0%{background-color:#fff}to{background-color:none}}@-webkit-keyframes animate{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(.3);transform:scale(.3)}}@keyframes animate{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(.3);transform:scale(.3)}}.bk-default-loading{display:inline-block}.bk-default-loading .bk-loading-wrapper{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;width:100%;height:100%;left:unset;top:0;transform:unset;-webkit-transform:unset;background:inherit;padding:0 25%}.bk-default-loading .bk-loading-wrapper :first-child{margin:unset}
+.bk-loading{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;background-color:hsla(0,0%,100%,.9);z-index:100}.bk-loading .bk-loading-wrapper{text-align:center;line-height:1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}.bk-loading-title{text-align:center;font-size:14px;color:#63656e;line-height:normal;margin-top:5px}.bk-loading .bk-loading1{position:relative;width:75px;height:14px;margin:auto;display:inline-block}.bk-loading .bk-loading1 .point{position:absolute;top:0;width:14px;height:14px;-webkit-animation-name:scale-animate;animation-name:scale-animate;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:normal;animation-direction:normal;-webkit-transform:scale(.6);transform:scale(.6);border-radius:19px}.bk-loading .bk-loading1 .point1{background-color:#fd6154;left:0;-webkit-animation-delay:.1s;animation-delay:.1s}.bk-loading .bk-loading1 .point2{background-color:#ffb726;left:20px;-webkit-animation-delay:.25s;animation-delay:.25s}.bk-loading .bk-loading1 .point3{background-color:#4cd084;left:40px;-webkit-animation-delay:.4s;animation-delay:.4s}.bk-loading .bk-loading1 .point4{background-color:#57a3f1;left:60px;-webkit-animation-delay:.55s;animation-delay:.55s}.bk-dot-loading.bk-size-mini,.bk-loading1.bk-size-mini{width:30px}.bk-dot-loading.bk-size-mini .point,.bk-loading1.bk-size-mini .point{width:6px;height:6px}.bk-dot-loading.bk-size-mini .point1,.bk-loading1.bk-size-mini .point1{left:0}.bk-dot-loading.bk-size-mini .point2,.bk-loading1.bk-size-mini .point2{left:10px}.bk-dot-loading.bk-size-mini .point3,.bk-loading1.bk-size-mini .point3{left:20px}.bk-dot-loading.bk-size-mini .point4,.bk-loading1.bk-size-mini .point4{left:30px}.bk-dot-loading.bk-size-small,.bk-loading1.bk-size-small{width:45px}.bk-dot-loading.bk-size-small .point,.bk-loading1.bk-size-small .point{width:10px;height:10px}.bk-dot-loading.bk-size-small .point1,.bk-loading1.bk-size-small .point1{left:0}.bk-dot-loading.bk-size-small .point2,.bk-loading1.bk-size-small .point2{left:15px}.bk-dot-loading.bk-size-small .point3,.bk-loading1.bk-size-small .point3{left:30px}.bk-dot-loading.bk-size-small .point4,.bk-loading1.bk-size-small .point4{left:45px}.bk-dot-loading.bk-black .point1,.bk-dot-loading.bk-black .point2,.bk-dot-loading.bk-black .point3,.bk-dot-loading.bk-black .point4,.bk-loading1.bk-black .point1,.bk-loading1.bk-black .point2,.bk-loading1.bk-black .point3,.bk-loading1.bk-black .point4{background:#979ba5}.bk-dot-loading.bk-primary .point1,.bk-dot-loading.bk-primary .point2,.bk-dot-loading.bk-primary .point3,.bk-dot-loading.bk-primary .point4,.bk-loading1.bk-primary .point1,.bk-loading1.bk-primary .point2,.bk-loading1.bk-primary .point3,.bk-loading1.bk-primary .point4{background:#3c96ff}.bk-dot-loading.bk-danger .point1,.bk-dot-loading.bk-danger .point2,.bk-dot-loading.bk-danger .point3,.bk-dot-loading.bk-danger .point4,.bk-loading1.bk-danger .point1,.bk-loading1.bk-danger .point2,.bk-loading1.bk-danger .point3,.bk-loading1.bk-danger .point4{background:#ff5656}.bk-dot-loading.bk-warning .point1,.bk-dot-loading.bk-warning .point2,.bk-dot-loading.bk-warning .point3,.bk-dot-loading.bk-warning .point4,.bk-loading1.bk-warning .point1,.bk-loading1.bk-warning .point2,.bk-loading1.bk-warning .point3,.bk-loading1.bk-warning .point4{background:#ffb848}.bk-dot-loading.bk-default .point1,.bk-dot-loading.bk-default .point2,.bk-dot-loading.bk-default .point3,.bk-dot-loading.bk-default .point4,.bk-loading1.bk-default .point1,.bk-loading1.bk-default .point2,.bk-loading1.bk-default .point3,.bk-loading1.bk-default .point4{background:#979ba5}@keyframes scale-animate{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(.6);transform:scale(.6)}}@-webkit-keyframes scale-animate{0%{-webkit-transform:scale(1)}to{-webkit-transform:scale(.6)}}.bk-loading2,.bk-spin-loading{width:48px;height:48px;position:relative;margin:auto;display:inline-block;vertical-align:middle;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.bk-loading2 .rotate,.bk-spin-loading .rotate{position:absolute;width:6px;height:8px;-webkit-transform-origin:50% 24px;transform-origin:50% 24px;border-radius:8px;-webkit-transform:scale(.4);transform:scale(.4);-webkit-animation-name:fade;animation-name:fade;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:normal;animation-direction:normal}.bk-loading2.bk-spin-loading-success .rotate,.bk-spin-loading.bk-spin-loading-success .rotate{-webkit-animation-name:fadeSuccess;animation-name:fadeSuccess}.bk-loading2.bk-spin-loading-danger .rotate,.bk-spin-loading.bk-spin-loading-danger .rotate{-webkit-animation-name:fadeDanger;animation-name:fadeDanger}.bk-loading2.bk-spin-loading-warning .rotate,.bk-spin-loading.bk-spin-loading-warning .rotate{-webkit-animation-name:fadeWarning;animation-name:fadeWarning}.bk-loading2.bk-spin-loading-primary .rotate,.bk-spin-loading.bk-spin-loading-primary .rotate{-webkit-animation-name:fadePrimary;animation-name:fadePrimary}.bk-loading2.bk-spin-loading-white .rotate,.bk-spin-loading.bk-spin-loading-white .rotate{-webkit-animation-name:fadeWhite;animation-name:fadeWhite}.bk-loading2 .rotate1,.bk-spin-loading .rotate1{-webkit-animation-delay:.45s;animation-delay:.45s;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.bk-loading2 .rotate2,.bk-spin-loading .rotate2{-webkit-animation-delay:.6s;animation-delay:.6s;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.bk-loading2 .rotate3,.bk-spin-loading .rotate3{-webkit-animation-delay:.75s;animation-delay:.75s;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.bk-loading2 .rotate4,.bk-spin-loading .rotate4{-webkit-animation-delay:.9s;animation-delay:.9s;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.bk-loading2 .rotate5,.bk-spin-loading .rotate5{-webkit-animation-delay:1.05s;animation-delay:1.05s;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.bk-loading2 .rotate6,.bk-spin-loading .rotate6{-webkit-animation-delay:1.2s;animation-delay:1.2s;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.bk-loading2 .rotate7,.bk-spin-loading .rotate7{-webkit-animation-delay:1.35s;animation-delay:1.35s;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bk-loading2 .rotate8,.bk-spin-loading .rotate8{-webkit-animation-delay:1.5s;animation-delay:1.5s;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.bk-loading2.bk-spin-loading-large,.bk-spin-loading.bk-spin-loading-large{width:68px;height:68px}.bk-loading2.bk-spin-loading-large .rotate,.bk-spin-loading.bk-spin-loading-large .rotate{width:10px;height:12px;border-radius:12px;-webkit-transform-origin:50% 34px;transform-origin:50% 34px}.bk-loading2.bk-spin-loading-small,.bk-spin-loading.bk-spin-loading-small{width:32px;height:32px}.bk-loading2.bk-spin-loading-small .rotate,.bk-spin-loading.bk-spin-loading-small .rotate{width:4px;height:5px;border-radius:5px;-webkit-transform-origin:50% 16px;transform-origin:50% 16px}.bk-loading2.bk-spin-loading-mini,.bk-spin-loading.bk-spin-loading-mini{width:16px;height:16px}.bk-loading2.bk-spin-loading-mini .rotate,.bk-spin-loading.bk-spin-loading-mini .rotate{width:2px;height:3px;border-radius:3px;-webkit-transform-origin:50% 8px;transform-origin:50% 8px}@-webkit-keyframes fade{0%{background-color:#39424e}to{background-color:transparent}}@-webkit-keyframes fadeSuccess{0%{background-color:#2dcb56}to{background-color:transparent}}@-webkit-keyframes fadePrimary{0%{background-color:#3c96ff}to{background-color:transparent}}@-webkit-keyframes fadeDanger{0%{background-color:#ff5656}to{background-color:transparent}}@-webkit-keyframes fadeWarning{0%{background-color:#ffb848}to{background-color:transparent}}@-webkit-keyframes fadeWhite{0%{background-color:#fff}to{background-color:transparent}}.bk-loading,.bk-loading-box{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;background-color:hsla(0,0%,100%,.9);z-index:100}.bk-loading-box .bk-loading-wrapper,.bk-loading .bk-loading-wrapper{text-align:center;line-height:1;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.bk-loading-box-title,.bk-loading-title{text-align:center;font-size:14px;color:#63656e;line-height:normal;margin-top:5px}@keyframes fade{0%{background-color:#39424e}to{background-color:transparent}}@keyframes fadeSuccess{0%{background-color:#30d878}to{background-color:transparent}}@keyframes fadePrimary{0%{background-color:#3c96ff}to{background-color:transparent}}@keyframes fadeDanger{0%{background-color:#ff5656}to{background-color:transparent}}@keyframes fadeWarning{0%{background-color:#ffb400}to{background-color:transparent}}@keyframes fadeWhite{0%{background-color:#fff}to{background-color:transparent}}@-webkit-keyframes animate{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(.3);transform:scale(.3)}}@keyframes animate{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(.3);transform:scale(.3)}}.bk-default-loading{display:inline-block}.bk-default-loading .bk-loading-wrapper{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;width:100%;height:100%;left:unset;top:0;transform:unset;-webkit-transform:unset;background:inherit;padding:0 25%}.bk-default-loading .bk-loading-wrapper :first-child{margin:unset}
 /*# sourceMappingURL=loading.min.css.map */

package/lib/ui/loading.min.css.map

@@ -1 +1 @@
-{"version":3,"sources":["loading.css"],"names":[],"mappings":"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","file":"loading.min.css","sourcesContent":["@import './variable.css';\n\n@define-mixin create-rotate $time, $deg {\n    animation-delay: $time;\n    transform: rotate($deg);\n}\n\n.bk-loading {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0.9);\n    z-index: $loadingZIndex;\n    .bk-loading-wrapper {\n        text-align: center;\n        line-height: 1;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        -webkit-transform: translate(-50%, -50%);\n    }\n    &-title {\n        text-align: center;\n        font-size: 14px;\n        color: $fnMainColor;\n        line-height: initial;\n        margin-top: 5px;\n    }\n    .bk-loading1 {\n        position: relative;\n        width: 75px;\n        height: 14px;\n        margin: auto;\n        display: inline-block;\n        .point {\n            position: absolute;\n            top: 0;\n            width: 14px;\n            height: 14px;\n            animation-name: scale-animate;\n            animation-duration: .8s;\n            animation-iteration-count: infinite;\n            animation-direction: normal;\n            transform: scale(.6);\n            border-radius: 19px;\n        }\n\n        .point1 {\n            background-color: #fd6154;\n            left: 0;\n            animation-delay: 0.1s;\n        }\n\n        .point2 {\n            background-color: #ffb726;\n            left: 20px;\n            animation-delay: 0.25s;\n        }\n\n        .point3 {\n            background-color: #4cd084;\n            left: 40px;\n            animation-delay: 0.4s;\n        }\n\n        .point4 {\n            background-color: #57a3f1;\n            left: 60px;\n            animation-delay: 0.55s;\n        }\n\n        &.bk-black {\n            .point1,\n            .point2,\n            .point3,\n            .point4{\n                background: #979ba5;\n            }\n        }\n    }\n}\n\n/* 加载动画一，点状 */\n.bk-dot-loading,\n.bk-loading1 {\n    position: relative;\n    width: 75px;\n    height: 14px;\n    margin: auto;\n    display: inline-block;\n    .point {\n        position: absolute;\n        top: 0;\n        width: 14px;\n        height: 14px;\n        animation-name: scale-animate;\n        animation-duration: .8s;\n        animation-iteration-count: infinite;\n        animation-direction: normal;\n        transform: scale(.6);\n        border-radius: 19px;\n    }\n\n    .point1 {\n        background-color: #fd6154;\n        left: 0;\n        animation-delay: 0.1s;\n    }\n\n    .point2 {\n        background-color: #ffb726;\n        left: 20px;\n        animation-delay: 0.25s;\n    }\n\n    .point3 {\n        background-color: #4cd084;\n        left: 40px;\n        animation-delay: 0.4s;\n    }\n\n    .point4 {\n        background-color: #57a3f1;\n        left: 60px;\n        animation-delay: 0.55s;\n    }\n\n    &.bk-size-mini {\n        width: 30px;\n\n        .point {\n            width: 6px;\n            height: 6px;\n        }\n\n        .point1 {\n            left: 0;\n        }\n\n        .point2 {\n            left: 10px;\n        }\n\n        .point3 {\n            left: 20px;\n        }\n\n        .point4 {\n            left: 30px;\n        }\n    }\n\n    &.bk-size-small {\n        width: 45px;\n\n        .point {\n            width: 10px;\n            height: 10px;\n        }\n\n        .point1 {\n            left: 0;\n        }\n\n        .point2 {\n            left: 15px;\n        }\n\n        .point3 {\n            left: 30px;\n        }\n\n        .point4 {\n            left: 45px;\n        }\n    }\n\n    &.bk-black {\n        .point1,\n        .point2,\n        .point3,\n        .point4 {\n            background: #979ba5;\n        }\n    }\n\n    &.bk-primary {\n        .point1,\n        .point2,\n        .point3,\n        .point4 {\n            background: $primaryColor;\n        }\n    }\n\n    &.bk-danger {\n        .point1,\n        .point2,\n        .point3,\n        .point4 {\n            background: $dangerColor;\n        }\n    }\n\n    &.bk-warning {\n        .point1,\n        .point2,\n        .point3,\n        .point4 {\n            background: $warningColor;\n        }\n    }\n    &.bk-default {\n        .point1,\n        .point2,\n        .point3,\n        .point4 {\n            background: #979BA5;\n        }\n    }\n}\n\n.bk-spin-loading,\n.bk-loading2 {\n    width: 39px;\n    height: 39px;\n    position: relative;\n    margin: auto;\n    display: inline-block;\n    vertical-align: middle;\n}\n\n.bk-spin-loading .rotate,\n.bk-loading2 .rotate {\n    position: absolute;\n    top: 77%;\n    right: 43%;\n    background-color: none;\n    background-color: #39424e\\9\\0;\n    width: 6px;\n    height: 8px;\n    transform-origin: 50% -10px;\n    border-radius: 8px;\n    transform: scale(0.4);\n    animation-name: fade;\n    animation-duration: 1.2s;\n    animation-iteration-count: infinite;\n    animation-direction: normal;\n}\n\n.bk-spin-loading.bk-spin-loading-success .rotate,\n.bk-loading2.bk-spin-loading-success .rotate {\n    background: #30d878\\9\\0;\n    animation-name: fadeSuccess;\n}\n\n.bk-spin-loading.bk-spin-loading-danger .rotate,\n.bk-loading2.bk-spin-loading-danger .rotate {\n    background: #ff5656\\9\\0;\n    animation-name: fadeDanger;\n}\n\n.bk-spin-loading.bk-spin-loading-warning .rotate,\n.bk-loading2.bk-spin-loading-warning .rotate {\n    background: #ffb400\\9\\0;\n    animation-name: fadeWarning;\n}\n\n.bk-spin-loading.bk-spin-loading-primary .rotate,\n.bk-loading2.bk-spin-loading-primary .rotate {\n    background: #3c96ff\\9\\0;\n    animation-name: fadePrimary;\n}\n\n.bk-spin-loading.bk-spin-loading-white .rotate,\n.bk-loading2.bk-spin-loading-white .rotate {\n    background: #fff\\9\\0;\n    animation-name: fadeWhite;\n}\n\n.bk-spin-loading .rotate1,\n.bk-loading2 .rotate1 {\n    animation-delay: 0.45s;\n    transform: rotate(-90deg);\n}\n\n.bk-spin-loading .rotate2,\n.bk-loading2 .rotate2 {\n    animation-delay: 0.6s;\n    transform: rotate(-45deg);\n}\n\n.bk-spin-loading .rotate3,\n.bk-loading2 .rotate3 {\n    animation-delay: 0.75s;\n    transform: rotate(0deg);\n}\n\n.bk-spin-loading .rotate4,\n.bk-loading2 .rotate4 {\n    animation-delay: 0.9s;\n    transform: rotate(45deg);\n}\n\n.bk-spin-loading .rotate5,\n.bk-loading2 .rotate5 {\n    animation-delay: 1.05s;\n    transform: rotate(90deg);\n}\n\n.bk-spin-loading .rotate6,\n.bk-loading2 .rotate6 {\n    animation-delay: 1.2s;\n    transform: rotate(135deg);\n}\n\n.bk-spin-loading .rotate7,\n.bk-loading2 .rotate7 {\n    animation-delay: 1.35s;\n    transform: rotate(180deg);\n}\n\n.bk-spin-loading .rotate8,\n.bk-loading2 .rotate8 {\n    animation-delay: 1.5s;\n    transform: rotate(-135deg);\n}\n\n.bk-spin-loading.bk-spin-loading-large,\n.bk-loading2.bk-spin-loading-large {\n    width: 69px;\n    height: 69px;\n}\n\n.bk-spin-loading.bk-spin-loading-large .rotate,\n.bk-loading2.bk-spin-loading-large .rotate {\n    width: 10px;\n    height: 14px;\n    transform-origin: 50% -18px;\n}\n\n.bk-spin-loading.bk-spin-loading-small,\n.bk-loading2.bk-spin-loading-small {\n    width: 27px;\n    height: 27px;\n}\n\n.bk-spin-loading.bk-spin-loading-small .rotate,\n.bk-loading2.bk-spin-loading-small .rotate {\n    width: 4px;\n    height: 5px;\n    transform-origin: 50% -7px;\n}\n\n.bk-spin-loading.bk-spin-loading-mini,\n.bk-loading2.bk-spin-loading-mini {\n    width: 16px;\n    height: 16px;\n}\n\n.bk-spin-loading.bk-spin-loading-mini .rotate,\n.bk-loading2.bk-spin-loading-mini .rotate {\n    width: 2px;\n    height: 3px;\n    transform-origin: 50% -4px;\n}\n\n@keyframes scale-animate {\n    0% {\n        transform: scale(1);\n    }\n\n    100% {\n        transform: scale(.6);\n    }\n}\n\n@-webkit-keyframes scale-animate {\n    0% {\n        -webkit-transform: scale(1);\n    }\n\n    100% {\n        -webkit-transform: scale(.6);\n    }\n}\n\n.bk-spin-loading,\n.bk-loading2 {\n    width: 39px;\n    height: 39px;\n    position: relative;\n    margin: auto;\n    display:inline-block;\n    vertical-align: middle;\n    .rotate {\n        position: absolute;\n        top: 77%;\n        right: 43%;\n        background-color: none;\n        background-color: #39424e\\9\\0;\n        width: 6px;\n        height: 8px;\n        transform-origin: 50% -10px;\n        border-radius: 8px;\n        transform: scale(0.4);\n        animation-name: fade;\n        animation-duration: 1.2s;\n        animation-iteration-count: infinite;\n        animation-direction: normal;\n    }\n    &.bk-spin-loading-success {\n        .rotate {\n            background: #30d878\\9\\0;\n            animation-name: fadeSuccess;\n        }\n    }\n    &.bk-spin-loading-danger {\n        .rotate {\n            background:  #ff5656\\9\\0;\n            animation-name: fadeDanger;\n        }\n    }\n    &.bk-spin-loading-warning {\n        .rotate {\n            background: #ffb400\\9\\0;\n            animation-name: fadeWarning;\n        }\n    }\n    &.bk-spin-loading-primary {\n        .rotate {\n            background: #3c96ff\\9\\0;\n            animation-name: fadePrimary;\n        }\n    }\n\n    &.bk-spin-loading-white {\n        .rotate {\n            background: #fff\\9\\0;\n            animation-name: fadeWhite;\n        }\n    }\n\n    .rotate1 {\n        @mixin create-rotate 0.45s, -90deg;\n    }\n    .rotate2 {\n        @mixin create-rotate 0.6s, -45deg;\n    }\n    .rotate3 {\n        @mixin create-rotate 0.75s, 0deg;\n    }\n    .rotate4 {\n        @mixin create-rotate 0.9s, 45deg;\n    }\n    .rotate5 {\n        @mixin create-rotate 1.05s, 90deg;\n    }\n    .rotate6 {\n        @mixin create-rotate 1.2s, 135deg;\n    }\n    .rotate7 {\n        @mixin create-rotate 1.35s, 180deg;\n    }\n    .rotate8 {\n        @mixin create-rotate 1.5s, -135deg;\n    }\n    &.bk-spin-loading-large {\n        width: 69px;\n        height: 69px;\n        .rotate {\n            width: 10px;\n            height: 14px;\n            transform-origin: 50% -18px;\n        }\n    }\n    &.bk-spin-loading-small {\n        width: 27px;\n        height: 27px;\n        .rotate {\n            width: 4px;\n            height: 5px;\n            transform-origin: 50% -7px;\n        }\n    }\n    &.bk-spin-loading-mini {\n        width: 16px;\n        height: 16px;\n        .rotate {\n            width: 2px;\n            height: 3px;\n            transform-origin: 50% -4px;\n        }\n    }\n}\n\n@keyframes fade {\n    0% {\n        background-color: #39424e;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n@-webkit-keyframes fade {\n    0% {\n        background-color: #39424e;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@keyframes fadeSuccess {\n    0% {\n        background-color: $successColor;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@-webkit-keyframes fadeSuccess {\n    0% {\n        background-color: $successColor;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@keyframes fadePrimary {\n    0% {\n        background-color: $primaryColor;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@-webkit-keyframes fadePrimary {\n    0% {\n        background-color: $primaryColor;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@keyframes fadeDanger {\n    0% {\n        background-color: $dangerColor;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@-webkit-keyframes fadeDanger {\n    0% {\n        background-color: $dangerColor;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@keyframes fadeWarning {\n    0% {\n        background-color: $warningColor;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@-webkit-keyframes fadeWarning {\n    0% {\n        background-color: $warningColor;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@keyframes fadeWhite {\n    0% {\n        background-color: rgb(255, 255, 255);\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@-webkit-keyframes fadeWhite {\n    0%{\n        background-color: rgb(255, 255, 255);\n    }\n\n    100%{\n        background-color: none;\n    }\n}\n\n/* 加载动画容器，.bk-loading 保留，为了兼容 */\n.bk-loading-box,\n.bk-loading {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0.9);\n    z-index: $loadingZIndex;\n    .bk-loading-wrapper {\n        text-align: center;\n        line-height: 1;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n    }\n    &-title {\n        text-align: center;\n        font-size: 14px;\n        color: $fnMainColor;\n        line-height: initial;\n        margin-top: 5px;\n    }\n}\n\n@keyframes fade {\n    0% {\n        background-color: #39424e;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@keyframes fadeSuccess {\n    0% {\n        background-color: #30d878;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@keyframes fadePrimary {\n    0% {\n        background-color: #3c96ff;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@keyframes fadeDanger {\n    0% {\n        background-color: #ff5656;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@keyframes fadeWarning {\n    0% {\n        background-color: #ffb400;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@keyframes fadeWhite {\n    0% {\n        background-color: white;\n    }\n\n    100% {\n        background-color: none;\n    }\n}\n\n@keyframes animate {\n    0% {\n        transform: scale(.5)\n    }\n\n    100% {\n        transform: scale(.3)\n    }\n}\n\n.bk-default-loading {\n    display: inline-block;\n    .bk-loading-wrapper {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        left: unset;\n        top: 0;\n        transform: unset;\n        -webkit-transform: unset;\n        background: inherit;\n        padding: 0 25%;\n\n        & :nth-child(1) {\n            margin: unset;\n          }\n    }\n}"]}
+{"version":3,"sources":["loading.css"],"names":[],"mappings":"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","file":"loading.min.css","sourcesContent":["@import './variable.css';\n\n@define-mixin create-rotate $time, $deg {\n    animation-delay: $time;\n    transform: rotate($deg);\n}\n\n.bk-loading {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0.9);\n    z-index: $loadingZIndex;\n    .bk-loading-wrapper {\n        text-align: center;\n        line-height: 1;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        -webkit-transform: translate(-50%, -50%);\n    }\n    &-title {\n        text-align: center;\n        font-size: 14px;\n        color: $fnMainColor;\n        line-height: initial;\n        margin-top: 5px;\n    }\n    .bk-loading1 {\n        position: relative;\n        width: 75px;\n        height: 14px;\n        margin: auto;\n        display: inline-block;\n        .point {\n            position: absolute;\n            top: 0;\n            width: 14px;\n            height: 14px;\n            animation-name: scale-animate;\n            animation-duration: .8s;\n            animation-iteration-count: infinite;\n            animation-direction: normal;\n            transform: scale(.6);\n            border-radius: 19px;\n        }\n\n        .point1 {\n            background-color: #fd6154;\n            left: 0;\n            animation-delay: 0.1s;\n        }\n\n        .point2 {\n            background-color: #ffb726;\n            left: 20px;\n            animation-delay: 0.25s;\n        }\n\n        .point3 {\n            background-color: #4cd084;\n            left: 40px;\n            animation-delay: 0.4s;\n        }\n\n        .point4 {\n            background-color: #57a3f1;\n            left: 60px;\n            animation-delay: 0.55s;\n        }\n    }\n}\n\n/* 加载动画一，点状 */\n.bk-dot-loading,\n.bk-loading1 {\n    &.bk-size-mini {\n        width: 30px;\n\n        .point {\n            width: 6px;\n            height: 6px;\n        }\n\n        .point1 {\n            left: 0;\n        }\n\n        .point2 {\n            left: 10px;\n        }\n\n        .point3 {\n            left: 20px;\n        }\n\n        .point4 {\n            left: 30px;\n        }\n    }\n\n    &.bk-size-small {\n        width: 45px;\n\n        .point {\n            width: 10px;\n            height: 10px;\n        }\n\n        .point1 {\n            left: 0;\n        }\n\n        .point2 {\n            left: 15px;\n        }\n\n        .point3 {\n            left: 30px;\n        }\n\n        .point4 {\n            left: 45px;\n        }\n    }\n\n    &.bk-black {\n        .point1,\n        .point2,\n        .point3,\n        .point4 {\n            background: #979ba5;\n        }\n    }\n\n    &.bk-primary {\n        .point1,\n        .point2,\n        .point3,\n        .point4 {\n            background: $primaryColor;\n        }\n    }\n\n    &.bk-danger {\n        .point1,\n        .point2,\n        .point3,\n        .point4 {\n            background: $dangerColor;\n        }\n    }\n\n    &.bk-warning {\n        .point1,\n        .point2,\n        .point3,\n        .point4 {\n            background: $warningColor;\n        }\n    }\n    &.bk-default {\n        .point1,\n        .point2,\n        .point3,\n        .point4 {\n            background: #979BA5;\n        }\n    }\n}\n\n@keyframes scale-animate {\n    0% {\n        transform: scale(1);\n    }\n\n    100% {\n        transform: scale(.6);\n    }\n}\n\n@-webkit-keyframes scale-animate {\n    0% {\n        -webkit-transform: scale(1);\n    }\n\n    100% {\n        -webkit-transform: scale(.6);\n    }\n}\n\n.bk-spin-loading,\n.bk-loading2 {\n    width: 48px;\n    height: 48px;\n    position: relative;\n    margin: auto;\n    display:inline-block;\n    vertical-align: middle;\n    display: flex;\n    justify-content: center;\n    .rotate {\n        position: absolute;\n        /* top: 77%; */\n        /* right: 43%; */\n        /* background-color: transparent; */\n        /* background-color: #39424e\\9\\0; */\n        width: 6px;\n        height: 8px;\n        transform-origin: 50% 24px;\n        border-radius: 8px;\n        transform: scale(0.4);\n        animation-name: fade;\n        animation-duration: 1.2s;\n        animation-iteration-count: infinite;\n        animation-direction: normal;\n    }\n    &.bk-spin-loading-success {\n        .rotate {\n            /* background: #30d878; */\n            animation-name: fadeSuccess;\n        }\n    }\n    &.bk-spin-loading-danger {\n        .rotate {\n            /* background:  #ff5656; */\n            animation-name: fadeDanger;\n        }\n    }\n    &.bk-spin-loading-warning {\n        .rotate {\n            /* background: #ffb400; */\n            animation-name: fadeWarning;\n        }\n    }\n    &.bk-spin-loading-primary {\n        .rotate {\n            /* background-color: #3c96ff; */\n            animation-name: fadePrimary;\n        }\n    }\n\n    &.bk-spin-loading-white {\n        .rotate {\n            /* background: #fff; */\n            animation-name: fadeWhite;\n        }\n    }\n\n    .rotate1 {\n        @mixin create-rotate 0.45s, -90deg;\n    }\n    .rotate2 {\n        @mixin create-rotate 0.6s, -45deg;\n    }\n    .rotate3 {\n        @mixin create-rotate 0.75s, 0deg;\n    }\n    .rotate4 {\n        @mixin create-rotate 0.9s, 45deg;\n    }\n    .rotate5 {\n        @mixin create-rotate 1.05s, 90deg;\n    }\n    .rotate6 {\n        @mixin create-rotate 1.2s, 135deg;\n    }\n    .rotate7 {\n        @mixin create-rotate 1.35s, 180deg;\n    }\n    .rotate8 {\n        @mixin create-rotate 1.5s, -135deg;\n    }\n    &.bk-spin-loading-large {\n        width: 68px;\n        height: 68px;\n        .rotate {\n            width: 10px;\n            height: 12px;\n            border-radius: 12px;\n            transform-origin: 50% 34px;\n        }\n    }\n    &.bk-spin-loading-small {\n        width: 32px;\n        height: 32px;\n        .rotate {\n            width: 4px;\n            height: 5px;\n            border-radius: 5px;\n            transform-origin: 50% 16px;\n        }\n    }\n    &.bk-spin-loading-mini {\n        width: 16px;\n        height: 16px;\n        .rotate {\n            width: 2px;\n            height: 3px;\n            border-radius: 3px;\n            transform-origin: 50% 8px;\n        }\n    }\n}\n\n@keyframes fade {\n    0% {\n        background-color: #39424e;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n@-webkit-keyframes fade {\n    0% {\n        background-color: #39424e;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@keyframes fadeSuccess {\n    0% {\n        background-color: $successColor;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@-webkit-keyframes fadeSuccess {\n    0% {\n        background-color: $successColor;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@keyframes fadePrimary {\n    0% {\n        background-color: $primaryColor;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@-webkit-keyframes fadePrimary {\n    0% {\n        background-color: $primaryColor;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@keyframes fadeDanger {\n    0% {\n        background-color: $dangerColor;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@-webkit-keyframes fadeDanger {\n    0% {\n        background-color: $dangerColor;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@keyframes fadeWarning {\n    0% {\n        background-color: $warningColor;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@-webkit-keyframes fadeWarning {\n    0% {\n        background-color: $warningColor;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@keyframes fadeWhite {\n    0% {\n        background-color: rgb(255, 255, 255);\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@-webkit-keyframes fadeWhite {\n    0%{\n        background-color: rgb(255, 255, 255);\n    }\n\n    100%{\n        background-color: transparent;\n    }\n}\n\n/* 加载动画容器，.bk-loading 保留，为了兼容 */\n.bk-loading-box,\n.bk-loading {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto;\n    background-color: rgba(255, 255, 255, 0.9);\n    z-index: $loadingZIndex;\n    .bk-loading-wrapper {\n        text-align: center;\n        line-height: 1;\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n    }\n    &-title {\n        text-align: center;\n        font-size: 14px;\n        color: $fnMainColor;\n        line-height: initial;\n        margin-top: 5px;\n    }\n}\n\n@keyframes fade {\n    0% {\n        background-color: #39424e;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@keyframes fadeSuccess {\n    0% {\n        background-color: #30d878;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@keyframes fadePrimary {\n    0% {\n        background-color: #3c96ff;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@keyframes fadeDanger {\n    0% {\n        background-color: #ff5656;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@keyframes fadeWarning {\n    0% {\n        background-color: #ffb400;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@keyframes fadeWhite {\n    0% {\n        background-color: white;\n    }\n\n    100% {\n        background-color: transparent;\n    }\n}\n\n@keyframes animate {\n    0% {\n        transform: scale(.5)\n    }\n\n    100% {\n        transform: scale(.3)\n    }\n}\n\n.bk-default-loading {\n    display: inline-block;\n    .bk-loading-wrapper {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        left: unset;\n        top: 0;\n        transform: unset;\n        -webkit-transform: unset;\n        background: inherit;\n        padding: 0 25%;\n\n        & :nth-child(1) {\n            margin: unset;\n          }\n    }\n}\n"]}

package/lib/ui/notify.css

@@ -10,7 +10,7 @@
         -ms-flex-align:center;
             align-items:center;
     position:fixed;
-    padding:24px;
+    padding:16px 24px 16px 24px;
     width:360px;
     background:rgba(255,255,255,1);
     -webkit-box-shadow:0px 3px 6px 0px rgba(0,0,0,0.15);
@@ -50,7 +50,7 @@
     -ms-flex-negative:0;
         flex-shrink:0;
     margin-top:1px;
-    margin-right:5px;
+    margin-right:8px;
     color:#ffffff;
 }
 
@@ -80,7 +80,7 @@
 
 .bk-notify-content .bk-notify-content-title{
         margin-top:0;
-        margin-bottom:4px;
+        margin-bottom:8px;
         font-size:14px;
         font-weight:bold;
     }
@@ -109,8 +109,8 @@
 .bk-notify-close{
     text-align:center;
     position:absolute;
-    right:10px;
-    top:10px;
+    right:8px;
+    top:8px;
 }
 
 .bk-notify-close .bk-icon{