Feature-5950: Management of quotas in VIM Account

[osm/NG-UI.git] / src / app / vim-accounts / Resources-Overview / ResourcesOverviewComponent.scss

diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
new file mode 100644 (file)
index 0000000..e042092
--- /dev/null
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
@@ -0,0 +1,90 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
+*/
+@import "../../../assets/scss/mixins/mixin";
+@import "../../../assets/scss/variable";
+.chartData-card {
+    word-wrap: break-word;
+    @include box-shadow(0px, 1px, 15px, 0px, rgba(69, 90, 100, 0.1));
+    @include transition(all, 0.2s, null, null);
+    @include roundedCorners(5);
+    @include border(all, 1, solid, rgba(238, 238, 238, 0.75));
+    color: $white;
+    .card-body {
+        @include padding-value(5, 5, 5, 10);
+    }
+}
+.switch {
+    @include position_value(relative, null, null, null, null);
+    @include flexbox(inline-block, null, null, null, null, null);
+    @include wh-value(70px, 20px);
+    @include margin-value(0, 0, 0, 0);
+    input {
+        opacity: 0;
+        @include wh-value(0px, 0px);
+        &:checked + .slider {
+            @include background(null, $gray-400, null, null, null);
+            &:before {
+                @include background(null, $primary, null, null, null);
+                left: 22px;
+                -webkit-transform: translateX(26px);
+                -ms-transform: translateX(26px);
+                transform: translateX(26px);
+            }
+            .on {
+                @include flexbox(block, null, null, null, null, null);
+            }
+            .off {
+                @include flexbox(none, null, null, null, null, null);
+            }
+        }
+    }
+    .slider {
+        @include position_value(absolute, 0, 0, 0, 0);
+        cursor: pointer;
+        @include background(null, $gray-400, null, null, null);
+        -webkit-transition: 0.4s;
+        transition: 0.4s;
+        box-shadow: 0 0 1px $gray-400;
+        &.round {
+            @include roundedCorners(30);
+            &:before {
+                @include roundedCornersPercentage(50%);
+            }
+        }
+        &:before {
+            @include position_value(absolute, null, null, -2px, 0px);
+            @include wh-value(25px, 25px);
+            @include background(null, $primary, null, null, null);
+            content: "";
+            -webkit-transition: 0.4s;
+            transition: 0.4s;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+        }
+        .on {
+            @include flexbox(none, null, null, null, null, null);
+            @include position_value(absolute, 50%, null, null, 35% !important);
+        }
+        .on,
+        .off {
+            @include position_value(absolute, 50%, null, null, 55%);
+            color: $primary;
+            transform: translate(-50%, -50%);
+            @include font(null, 10px, bold);
+        }
+    }
+}