[Kimchi-devel] [PATCH] [Wok 03/10] 'Loading' mask and backdrop SCSS

[sguimaraes943 at gmail.com]

From: samhenri <samuel.guimaraes at eldorado.org.br>

Adding .wok-mask to display a "Loading..." message and .wok-loading-icon when loading pages or panels

Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
 ui/css/src/modules/_loaders.scss  | 55 +++++++++++++++++++++++++++++++++++++++
 ui/css/src/modules/_wok-grid.scss | 31 ----------------------
 ui/css/src/wok.scss               | 48 +++-------------------------------
 3 files changed, 59 insertions(+), 75 deletions(-)
 create mode 100644 ui/css/src/modules/_loaders.scss

diff --git a/ui/css/src/modules/_loaders.scss b/ui/css/src/modules/_loaders.scss
new file mode 100644
index 0000000..49a14ce
--- /dev/null
+++ b/ui/css/src/modules/_loaders.scss
@@ -0,0 +1,55 @@
+//
+// Project Wok
+//
+// Copyright IBM, Corp. 2015
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+.wok-mask, .wok-grid-mask, .wok-list-mask {
+    @extend .absolute-middle;
+    background: rgba(255,255,255,.7);
+}
+
+.wok-mask {
+    top: 180px !important;
+    @media (max-width: $screen-sm - 1) {
+        top: 0 !important;
+    }
+}
+
+.wok-mask-loading, .wok-grid-loading, .wok-list-loading {
+    width: 100%;
+    white-space: nowrap;
+    @extend .absolute-middle;
+}
+
+.wok-mask-loader-container, .wok-grid-loader-container, .wok-list-loader-container {
+    width: 120px;
+    height: 40px;
+    @extend .absolute-middle;
+}
+
+.wok-mask-loading-icon, .wok-grid-loading-icon, .wok-list-loading-icon{
+    background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%;
+    @include animation(spin 2s infinite linear);
+    height: 20px;
+    width: 20px;
+    @extend .absolute-middle;
+}
+
+.wok-mask-loading-text, .wok-grid-loading-text, .wok-list-loading-text {
+    color: $gray;
+    padding-top: 40px;
+    text-shadow: 0px 0px 10px #fff;
+}
\ No newline at end of file
diff --git a/ui/css/src/modules/_wok-grid.scss b/ui/css/src/modules/_wok-grid.scss
index ec870b7..23fc0fd 100644
--- a/ui/css/src/modules/_wok-grid.scss
+++ b/ui/css/src/modules/_wok-grid.scss
@@ -36,37 +36,6 @@
     top: 37px !important;
 }
 
-.wok-grid-mask, .wok-list-mask {
-    @extend .absolute-middle;
-    background: rgba(255,255,255,.7);
-}
-
-.wok-grid-loading, .wok-list-loading {
-    width: 100%;
-    white-space: nowrap;
-    @extend .absolute-middle;
-}
-
-.wok-grid-loader-container, .wok-list-loader-container {
-    width: 120px;
-    height: 40px;
-    @extend .absolute-middle;
-}
-
-.wok-grid-loading-icon, .wok-list-loading-icon{
-    background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%; 
-    @include animation(spin 2s infinite linear);
-    height: 20px;
-    width: 20px;
-    @extend .absolute-middle;
-}
-
-.wok-grid-loading-text, .wok-list-loading-text {
-    color: $gray;
-    padding-top: 40px;
-    text-shadow: 0px 0px 10px #fff;
-}
-
 .wok-list-cell {
     position: relative;
     padding-left: 45px;
diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss
index 5d4f515..9a934d5 100755
--- a/ui/css/src/wok.scss
+++ b/ui/css/src/wok.scss
@@ -66,6 +66,8 @@
 @import "modules/wok-grid";
 // Wok Datagrid
 @import "modules/datagrid";
+// Wok Loaders
+ at import "modules/loaders";
 // Wok Confirm Dialog
 @import "modules/wok-confirm";
 // Form validation classes
@@ -140,50 +142,8 @@ input[type=radio].wok-radio:checked + label:before {
 
 // Animation
 @import "modules/animation";
+
 // Documentation
 pre {
     margin-top: 20px;
-}
-
-// @media screen and (max-width: 63.75em) {
-//     .container {
-//         width: 100%;
-//     }
-// }
-
-// @media screen and (max-width: 76.25em) {
-//     .container {
-//         width: 100%;
-//     }
-// }
-
-// @media screen and (max-width: 84.375em) {
-//     .container {
-//         width: 100%;
-//     }
-// }
-
-// @media screen and (max-width: 89em) {
-//     .container {
-//         width: 100%;
-//     }
-// }
-
-// @media screen and (max-width: 99em) {
-//     .container {
-//         width: 100%;
-//     }
-// }
-
-// @media screen and (max-width: 104em) {
-//     .container {
-//         width: 100%;
-//     }
-// }
-
-// @media screen (min-width: 104em)  and (max-width: 120em) {
-//     .container {
-//         width: 100%;
-//     }
-// }
-
+}
\ No newline at end of file
-- 
1.9.3