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

From: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; Adding .wok-mask to display a "Loading..." message and .wok-loading-icon when loading pages or panels Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt; --- 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 +@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