2 Copyright 2020 TATA ELXSI
4 Licensed under the Apache License, Version 2.0 (the 'License');
5 you may not use this file except in compliance with the License.
6 You may obtain a copy of the License at
8 http://www.apache.org/licenses/LICENSE-2.0
10 Unless required by applicable law or agreed to in writing, software
11 distributed under the License is distributed on an "AS IS" BASIS,
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 See the License for the specific language governing permissions and
14 limitations under the License.
16 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
18 /** Styles for the application **/
19 @import "../../assets/scss/mixins/mixin";
20 @import "../../assets/scss/variable";
21 $customnavbar-padding-x: ($spacer / 0.5) !default;
25 button[type=submit]:focus, .sidebar-body button[type=button]:focus {
26 @include box-shadow(0, 0, 0, 0.2rem, lighten($primary, 50%) !important);
29 @include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
35 .modal-body-custom-height,
36 .layout-wrapper, .CodeMirror-vscrollbar, .ng-sidebar, .runninginstances .popover-body {
37 &::-webkit-scrollbar {
38 @include wh-value(10px, null);
40 &::-webkit-scrollbar-thumb {
41 background-clip: content-box;
42 @include border(all, 3, solid, transparent);
43 @include roundedCorners(7);
44 @include box-shadow(0, 0, 0, 10px, rgba($black, 0.8), inset);
46 &::-webkit-scrollbar-button {
47 @include wh-value(0, 0);
48 @include flexbox(none, null, null, null, null, null);
50 &::-webkit-scrollbar-corner {
51 @include background(null, transparent, null, null, null);
55 @include font-family("Roboto");
56 @include background(null, $theme-bg-color, null, null, null);
59 @include wh-value(100px, auto);
62 @include background(null, $theme-bg-color !important, null, null, null);
68 text-decoration: none;
72 @include line-height(normal);
74 @include padding-percentage-value(0.2em, 0.6em, 0.2em, 0.6em);
79 @include box-shadow(0, 0, 0, 0, transparent);
84 @include box-shadow(0, 0, 0, 0, transparent !important);
89 &.btn-outline-primary:hover,
90 &.btn-outline-warning:hover {
94 &:not(:disabled):not(.disabled):active {
96 @include background(null, $primary, null, null, null);
97 border-color: $primary;
109 @include padding-percentage-value(
111 $customnavbar-padding-x,
113 $customnavbar-padding-x
117 @include roundedCorners(4);
118 @include font(null, 12px, null);
127 @include font(null, 1.2rem, 700);
129 @include line-height(1.25);
138 @include margin-value-percentage(5px, auto, auto, auto);
147 @include font(null, 10px, null);
151 @include flexbox(table, null, null, null, null, null);
152 @include wh-value(100%, 50px);
153 @include border(all, 1, dashed, $secondary);
156 @include padding-value(5, 5, 5, 5);
157 @include flexbox(table-cell, null, null, null, null, null);
158 vertical-align: middle;
161 @include font(null, 16px, null);
165 opacity: 1 !important;
170 @include background(null, $gray-400 !important, null, null, null);
178 @include border(top, 3, solid, $primary);
179 @include roundedCorners(3);
181 @include padding-value(15, 15, 15, 15);
184 table-cell-default-editor select-editor select {
185 @include wh-value(null, calc(2rem + 8px) !important);
186 @include padding-value(0, 10, 0, 10);
189 min-height: 400px !important;
191 .table-layout-fixed {
193 word-wrap: break-word;
195 .border-radius-default {
196 @include roundedCorners(3);
198 /** Model Popup-Design **/
199 .modal-body-custom-height {
203 /** Hide input clear icon in IE */
205 @include flexbox(none, null, null, null, null, null);
207 /** Overwrite the tooltip z-index */
211 /** Popover Header **/
214 @include background(null, $theme-bg-color, null, null, null);
216 /** Vim Show running instance Details **/
224 /****************************************************************************/
225 /************************** Smart table custom design ***********************/
226 /****************************************************************************/
228 @include font(null, 15px, null);
231 @include wh-value(null, auto);
233 &.dataTables_empty td {
236 ng2-smart-table-title {
238 @include font(null, 12px, null);
241 color: $gray-700 !important;
242 @include flexbox(block, null, null, null, null, null);
243 text-decoration: none;
245 content: "\f0dc" !important;
246 @include font-family("Font Awesome 5 Free");
249 @include wh-value(0, 0);
252 content: "\f0de" !important;
253 @include font-family("Font Awesome 5 Free");
258 content: "\f0dd" !important;
259 @include font-family("Font Awesome 5 Free");
264 text-decoration: none !important;
267 transform: none !important;
273 @include flexbox(inline-block, null, null, null, null, null);
274 @include wh-value(0, 0);
275 @include border(all, 0, solid, transparent !important);
276 margin-bottom: 0 !important;
283 ng2-smart-table-cell {
284 word-break: break-word;
285 table-cell-view-mode {
286 @include font(null, 12px, null);
288 @include font(null, 20px, null);
289 @include flexbox(inline-block, null, null, null, null, null);
290 @include wh-value(100px, 0);
297 @include wh-value(null, calc(2rem + 2px) !important);
298 @include font(null, 12px, null);
304 @include padding-value(2, 10, 2, 10);
305 vertical-align: middle !important;
309 background: none !important;
313 default-table-filter {
315 select.form-control {
316 @include flexbox(inline-block, null, null, null, null, null);
317 @include wh-value(null, calc(1.5rem + 2px) !important);
318 vertical-align: middle;
320 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
321 no-repeat right 0.75rem center;
322 background-size: 8px 10px;
323 @include border(all, 1, solid, $gray-200);
324 @include roundedCorners(2);
325 -webkit-appearance: none;
326 -moz-appearance: none;
335 @include roundedCorners(4);
340 @include position_value(relative, null, null, null, null);
343 @include position_value(relative, -26px, null, null, 100%);
345 @include font("Font Awesome 5 Free", 10px, null);
346 @include padding-value(0, 0, 0, 2);
351 ng2-smart-table-pager {
352 @include flexbox(null, null, row-reverse, null, null, null);
353 @include padding-value(5, 20, 5, 20);
354 .ng2-smart-pagination {
355 .ng2-smart-page-item {
356 @include font(null, 10px, null);
359 text-decoration: none;
362 .ng2-smart-page-link {
363 @include font(null, 12px !important, null);
366 vertical-align: middle;
368 @include border(all, 1, solid, $primary !important);
370 @include background(null, $primary !important, null, null, null);
375 span.ng2-smart-page-link.page-link {
377 @include background(null, $primary !important, null, null, null);
378 @include border(all, 1, solid, $primary !important);
384 /****************************************************************************/
385 /*********************** Button styles under list class *********************/
386 /****************************************************************************/
389 button.btn.btn-primary {
390 @include padding-value(2, 8, 2, 8);
395 @include box-shadow(0, 0, 0, 0, transparent);
397 button.btn.btn-primary {
399 @include background(null, $white, null, null, null);
400 &:not(.active:hover) {
401 @include background(null, $white, null, null, null);
405 @include background(null, $white, null, null, null);
409 @include background(null, $primary !important, null, null, null);
411 @include background(null, $primary, null, null, null);
416 @include border(all, 1, solid, $primary);
417 @include padding-value(0, 0, 0, 0);
418 button.btn.btn-primary {
419 @include background(null, transparent, null, null, null);
420 @include padding-value(8, 8, 8, 8);
421 @include roundedCorners(0);
423 @include background(null, $primary, null, null, null);
427 @include border(bottom, 1, solid, $primary);
432 /****************************************************************************/
433 /*********************** Custom tabel design in topology ********************/
434 /****************************************************************************/
437 @include font(null, null, bold);
442 @include padding-value(5, 7, 5, 7);
443 @include font(null, 10px, null);
444 @include line-height(15px);
447 /****************************************************************************/
448 /************************** Ng select custom design *************************/
449 /****************************************************************************/
451 &.is-invalid .ng-select-container {
452 @include border(all, 1, solid, $red);
454 .ng-select-container {
455 @include border(all, 1, solid, $gray-200);
456 .ng-value-container .ng-placeholder {
461 /****************************************************************************/
462 /******************** Custom nav section for default status *****************/
463 /****************************************************************************/
464 .list-utilites-actions {
465 @include flexbox(flex, null, row, null, center, null);
466 nav.custom-items-config {
467 @include position_value(relative, null, null, null, null);
468 @include roundedCorners(3);
470 @include font(null, 13px, 600);
471 @include flexbox(inline-block, null, null, null, null, null);
472 @include position_value(relative, null, null, null, null);
473 text-decoration: none;
475 @include margin-value(0, 0, 0, 10);
477 @include margin-value(0, 0, 0, 0);
480 @include font(null, 14px, null);
481 @include margin-value(0, 5, 0, 0);
486 /****************************************************************************/
487 /************************* File upload custom design ************************/
488 /****************************************************************************/
491 @include roundedCorners(4);
492 @include border(all, 1, solid, $primary);
494 @include margin-value(0, 0, 0, 0);
495 text-overflow: ellipsis;
500 @include background(null, $primary, null, null, null);
503 /****************************************************************************/
504 /************************* Notifier Container Design ************************/
505 /****************************************************************************/
506 .notifier__container {
508 @include margin-value(0, 0, 0, 0);
511 /***************************************************************************/
512 /************************* Topology Common Design **************************/
513 /****************************************************************************/
517 @include font(null, 12px, null);
520 @include wh-value(30px, 25px);
526 @include font(null, 10px, null);
533 @include border(all, 1, solid, $primary);
538 @include padding-value(3.2, 8, 3.2, 8);
544 @include padding-value(4.8, 4.8, 4.8, 4.8);
545 @include margin-value(0, 0, 5, 0);
546 @include background(null, $gray-200, null, null, null);
547 @include flexbox(flex, null, null, null, center, null);
549 .span-overflow-text {
550 @include wh-value(90%, null);
553 text-overflow: ellipsis;
554 @include line-height(25px);
561 @include font(null, 15px, null);
567 -webkit-user-select: none;
568 -moz-user-select: none;
569 -ms-user-select: none;
570 -o-user-select: none;
574 opacity: 0.7 !important;
578 opacity: 0.7 !important;
588 pointer-events: none;
593 pointer-events: none;
600 @include border(all, 1, solid, $primary);
602 @include padding-value(0, 5, 0, 5);
603 @include font(null, 15px, null);
607 @include wh-value(55%, null);
610 @include wh-value(25%, null);
615 @include wh-value(36px, 36px);
617 @include margin-value(0, 10, 10, 0);
621 border-color: $primary;
624 color: $white !important;
625 @include background(null, $primary !important, null, null, null);
629 @include flexbox(flex, flex-end, row, center, center, null);
632 .ns-topology-sidebar-container,
633 .vnf-topology-sidebar-container,
634 .ns-instance-topology-sidebar-container {
635 @include position_value(absolute !important, 0px, null, null, 0px);
637 @include wh-value(27%, null);
638 @include background(null, $white, null, null, null);
639 @include border(all, 1, solid, $gray-300);
641 @include background(null, $modalheader-gray, null, null, null);
642 @include padding-value(5, 10, 5, 10);
643 @include border(bottom, 1, solid, $gray-300);
644 @include flexbox(flex, space-between, null, center, center, null);
650 @include padding-value(10, 5, 10, 5);
653 .ng-sidebar__content {
655 @include position_value(absolute, 45%, null, null, 0px);
656 @include background(null, $primary, null, null, null);
659 @include flexbox(inline-block, null, null, null, null, null);
660 @include position_value(relative, null, null, null, null);
661 animation: push 0.5s infinite linear;
680 /****************************************************************************/
681 /************************** MEDIA QUERIES ***********************************/
682 /****************************************************************************/
683 @media (max-width: map-get($grid-breakpoints, md)) {