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 **/
21 @import "../../assets/scss/mixins/mixin";
22 @import "../../assets/scss/variable";
23 $customnavbar-padding-x: math.div($spacer, 0.5) !default;
27 button[type="submit"]:focus,
28 .sidebar-body button[type="button"]:focus {
29 @include box-shadow(0, 0, 0, 0.2rem, lighten($primary, 50%) !important);
32 @include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
35 --bs-btn-hover-bg: #198754;
38 --bs-btn-hover-bg: #cb3424;
40 --bs-btn-hover-color: #fff;
41 --bs-btn-active-bg: #cb3424;
42 --bs-btn-active-color: #fff;
48 .modal-body-custom-height,
50 .CodeMirror-vscrollbar,
52 .runninginstances .popover-body,
53 .resources-chart-popover .popover-body,
54 .ng-dropdown-panel .scroll-host {
55 &::-webkit-scrollbar {
56 @include wh-value(10px, null);
58 &::-webkit-scrollbar-thumb {
59 background-clip: content-box;
60 @include border(all, 3, solid, transparent);
61 @include roundedCorners(7);
62 @include box-shadow(0, 0, 0, 10px, rgba($black, 0.8), inset);
64 &::-webkit-scrollbar-button {
65 @include wh-value(0, 0);
66 @include flexbox(none, null, null, null, null, null);
68 &::-webkit-scrollbar-corner {
69 @include background(null, transparent, null, null, null);
73 @include font-family("Roboto");
74 @include background(null, $theme-bg-color, null, null, null);
77 @include wh-value(100px, auto);
80 @include background(null, $theme-bg-color !important, null, null, null);
83 text-decoration: none;
87 text-decoration: none;
95 @include line-height(normal);
97 @include padding-percentage-value(0.2em, 0.6em, 0.2em, 0.6em);
102 @include box-shadow(0, 0, 0, 0, transparent);
107 @include box-shadow(0, 0, 0, 0, transparent !important);
112 &.btn-outline-primary:hover,
113 &.btn-outline-warning:hover {
117 &:not(:disabled):not(.disabled):active {
119 @include background(null, $primary, null, null, null);
120 border-color: $primary;
124 background-color: grey;
133 @include padding-percentage-value(
135 $customnavbar-padding-x,
137 $customnavbar-padding-x
143 background-color: $white;
144 @include roundedCorners(4);
145 @include font(null, 12px, null);
149 background-color: $white;
152 @include font(null, 1.2rem, 700);
154 @include line-height(1.25);
163 @include margin-value-percentage(5px, auto, auto, auto);
172 @include font(null, 11px, null);
176 @include flexbox(table, null, null, null, null, null);
177 @include wh-value(100%, 50px);
178 @include border(all, 1, dashed, $secondary);
181 @include padding-value(5, 5, 5, 5);
182 @include flexbox(table-cell, null, null, null, null, null);
183 vertical-align: middle;
186 @include font(null, 16px, null);
190 opacity: 1 !important;
191 background-color: transparent;
195 font-size: 1.3125rem;
203 background-color: #fff;
207 @include background(null, $gray-400 !important, null, null, null);
217 @include roundedCorners(4);
218 margin-bottom: 0.25rem;
219 box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
221 @include background(null, $primary !important, null, null, null);
228 padding: 0.75rem 1.25rem;
229 border-top-left-radius: 4px;
230 border-top-right-radius: 4px;
234 .seconds-btn-group .active {
236 @include background(null, $primary !important, null, null, null);
238 @include border(all, 2, dashed, $primary);
239 @include padding-value(5, 5, 5, 5);
250 tbody th i.active-icon {
255 background-color: #fff;
262 @include border(top, 3, solid, $primary);
263 @include roundedCorners(3);
265 @include padding-value(15, 15, 15, 15);
266 background-color: #fff;
269 table-cell-default-editor select-editor select {
270 @include wh-value(null, calc(2rem + 8px) !important);
271 @include padding-value(0, 10, 0, 10);
273 .edit-packages .CodeMirror {
274 min-height: 400px !important;
276 .new-vim .CodeMirror {
277 @include border(all, 1, solid, #eee !important);
279 .table-layout-fixed {
281 word-wrap: break-word;
283 .border-radius-default {
284 @include roundedCorners(3);
286 /** Model Popup-Design **/
293 background-color: #fff;
295 .modal-body-custom-height {
296 background-color: #fff !important;
301 /** Hide input clear icon in IE */
303 @include flexbox(none, null, null, null, null, null);
305 /** Overwrite the tooltip z-index */
309 /** Popover Header **/
313 @include background(null, $theme-bg-color, null, null, null);
315 /** Vim Show running instance Details **/
322 background-color: $white !important;
325 .resources-chart-popover {
327 max-width: 60% !important;
328 width: 600px !important;
329 @include font-family("Roboto");
333 background-color: #fff !important;
336 /****************************************************************************/
337 /************************** Smart table custom design ***********************/
338 /****************************************************************************/
340 background-color: #fff;
341 background-color: none;
342 @include font(null, 15px, null);
345 @include wh-value(null, auto);
347 &.dataTables_empty td {
350 ng2-smart-table-title {
352 @include font(null, 12px, null);
355 color: $gray-700 !important;
356 @include flexbox(block, null, null, null, null, null);
357 text-decoration: none;
359 content: "\f0dc" !important;
360 @include font-family("Font Awesome 5 Free");
363 @include wh-value(0, 0);
366 content: "\f0de" !important;
367 @include font-family("Font Awesome 5 Free");
372 content: "\f0dd" !important;
373 @include font-family("Font Awesome 5 Free");
378 text-decoration: none !important;
381 transform: none !important;
387 @include flexbox(inline-block, null, null, null, null, null);
388 @include wh-value(0, 0);
389 @include border(all, 0, solid, transparent !important);
390 margin-bottom: 0 !important;
397 ng2-smart-table-cell {
398 word-break: break-word;
399 table-cell-view-mode {
400 @include font(null, 12px, null);
402 @include font(null, 20px, null);
403 @include flexbox(inline-block, null, null, null, null, null);
404 @include wh-value(100px, 0);
411 background-color: #fff;
412 @include wh-value(null, calc(2rem + 2px) !important);
413 @include font(null, 12px, null);
417 background-color: #fff !important;
422 @include padding-value(2, 10, 2, 10);
423 vertical-align: middle !important;
424 background-color: #fff;
427 input[type="checkbox"] {
429 border-color: rgba(0, 0, 0, 0.5);
431 background-color: $blue !important;
437 background: none !important;
441 default-table-filter {
443 select.form-control {
444 background-color: #fff !important;
445 @include flexbox(inline-block, null, null, null, null, null);
446 @include wh-value(null, calc(1.5rem + 2px) !important);
447 vertical-align: middle;
449 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")
450 no-repeat right 0.75rem center;
451 background-size: 8px 10px;
452 @include border(all, 1, solid, $gray-200);
453 @include roundedCorners(2);
454 -webkit-appearance: none;
455 -moz-appearance: none;
464 @include roundedCorners(4);
469 background-color: #fff;
470 @include position_value(relative, null, null, null, null);
474 @include position_value(relative, -26px, null, null, 100%);
476 @include font("Font Awesome 5 Free", 10px, null);
477 @include padding-value(0, 0, 0, 2);
482 ng2-smart-table-pager {
483 @include flexbox(null, null, row-reverse, null, null, null);
484 @include padding-value(5, 20, 5, 20);
485 .ng2-smart-pagination {
486 .ng2-smart-page-item {
487 @include font(null, 10px, null);
490 text-decoration: none;
493 .ng2-smart-page-link {
494 background-color: #fff;
496 @include font(null, 12px !important, null);
499 vertical-align: middle;
501 @include border(all, 1, solid, $primary !important);
503 @include background(null, $primary !important, null, null, null);
508 span.ng2-smart-page-link.page-link {
510 @include background(null, $primary !important, null, null, null);
511 @include border(all, 1, solid, $primary !important);
517 /****************************************************************************/
518 /*********************** Button styles under list class *********************/
519 /****************************************************************************/
522 button.btn.btn-primary {
523 @include padding-value(2, 8, 2, 8);
528 @include box-shadow(0, 0, 0, 0, transparent);
530 button.btn.btn-primary {
532 @include background(null, $white, null, null, null);
533 &:not(.active:hover) {
534 @include background(null, $white, null, null, null);
538 @include background(null, $white, null, null, null);
542 @include background(null, $primary !important, null, null, null);
544 @include background(null, $primary, null, null, null);
549 /****************************************************************************/
550 /*********************** List Action Dropdown section ***********************/
551 /****************************************************************************/
552 .list-action-dropdown {
553 background-color: #fff;
554 @include border(all, 1, solid, $primary);
555 @include padding-value(0, 0, 0, 0);
557 button.btn.btn-primary {
558 @include background(null, transparent, null, null, null);
559 @include padding-value(8, 8, 8, 8);
560 @include roundedCorners(0);
561 background-color: #fff;
564 @include background(null, $primary, null, null, null);
568 @include border(bottom, 1, solid, $primary);
572 /****************************************************************************/
573 /*********************** Custom tabel design in topology ********************/
574 /****************************************************************************/
576 border: 1px solid rgba(0, 0, 0, 0.1);
578 @include font(null, null, bold);
583 border: 1px solid rgba(0, 0, 0, 0.1);
584 @include padding-value(5, 7, 5, 7);
585 @include font(null, 10px, null);
586 @include line-height(15px);
589 /****************************************************************************/
590 /************************** Ng select custom design *************************/
591 /****************************************************************************/
593 &.is-invalid .ng-select-container {
594 @include border(all, 1, solid, $red);
596 .ng-select-container {
597 @include border(all, 1, solid, $gray-200);
598 .ng-value-container .ng-placeholder {
603 .ng-dropdown-panel .scroll-host {
606 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
607 text-overflow: unset;
610 /****************************************************************************/
611 /******************** Custom nav section for default status *****************/
612 /****************************************************************************/
613 .list-utilites-actions {
615 @include flexbox(flex, null, row, null, center, null);
616 nav.custom-items-config {
617 @include position_value(relative, null, null, null, null);
618 @include roundedCorners(3);
620 @include font(null, 13px, 600);
621 @include flexbox(inline-block, null, null, null, null, null);
622 @include position_value(relative, null, null, null, null);
623 text-decoration: none;
625 @include margin-value(0, 0, 0, 10);
627 @include margin-value(0, 0, 0, 0);
630 @include font(null, 14px, null);
631 @include margin-value(0, 5, 0, 0);
636 /****************************************************************************/
637 /************************* File upload custom design ************************/
638 /****************************************************************************/
642 border-color: #054c8c;
648 input[type="file"]::file-selector-button {
657 @include roundedCorners(4);
658 @include border(all, 1, solid, $primary);
660 @include margin-value(0, 0, 0, 0);
661 text-overflow: ellipsis;
666 @include background(null, $primary, null, null, null);
669 /****************************************************************************/
670 /************************* Notifier Container Design ************************/
671 /****************************************************************************/
672 .notifier__container {
674 @include margin-value(0, 0, 0, 0);
677 /***************************************************************************/
678 /************************* Topology Common Design **************************/
679 /****************************************************************************/
683 @include font(null, 12px, null);
686 @include wh-value(30px, 25px);
692 @include font(null, 10px, null);
699 @include border(all, 1, solid, $primary);
704 @include padding-value(3.2, 8, 3.2, 8);
710 @include padding-value(4.8, 4.8, 4.8, 4.8);
711 @include margin-value(0, 0, 5, 0);
712 @include background(null, $gray-200, null, null, null);
713 @include flexbox(flex, null, null, null, center, null);
715 .span-overflow-text {
717 @include wh-value(90%, null);
720 text-overflow: ellipsis;
721 @include line-height(25px);
728 @include font(null, 15px, null);
734 -webkit-user-select: none;
735 -moz-user-select: none;
736 -ms-user-select: none;
737 -o-user-select: none;
741 opacity: 0.7 !important;
745 opacity: 0.7 !important;
755 pointer-events: none;
760 pointer-events: none;
767 @include border(all, 1, solid, $primary);
770 @include padding-value(0, 5, 0, 5);
771 @include font(null, 15px, null);
775 @include wh-value(55%, null);
778 @include wh-value(25%, null);
782 font-weight: 700 !important;
786 @include wh-value(36px, 36px);
788 @include margin-value(0, 10, 10, 0);
792 border-color: $primary;
795 color: $white !important;
796 @include background(null, $primary !important, null, null, null);
800 @include flexbox(flex, flex-end, row, center, center, null);
803 .ns-topology-sidebar-container,
804 .vnf-topology-sidebar-container,
805 .ns-instance-topology-sidebar-container {
806 @include position_value(absolute !important, 0px, null, null, 0px);
808 @include wh-value(27%, null);
809 @include background(null, $white, null, null, null);
810 @include border(all, 1, solid, $gray-300);
812 @include background(null, $modalheader-gray, null, null, null);
813 @include padding-value(5, 10, 5, 10);
814 @include border(bottom, 1, solid, $gray-300);
815 @include flexbox(flex, space-between, null, center, center, null);
821 @include padding-value(10, 5, 10, 5);
824 .ng-sidebar__content {
826 @include position_value(absolute, 45%, null, null, 0px);
827 @include background(null, $primary, null, null, null);
830 @include flexbox(inline-block, null, null, null, null, null);
831 @include position_value(relative, null, null, null, null);
832 animation: push 0.5s infinite linear;
850 /** Switch Design **/
852 @include position_value(relative, null, null, null, null);
853 @include flexbox(inline-block, null, null, null, null, null);
854 @include wh-value(50px, 15px);
855 @include margin-value(0, 0, 0, 0);
858 @include wh-value(0px, 0px);
859 &:checked + .slider {
860 @include background(null, $gray-400, null, null, null);
862 @include background(null, $pure-red, null, null, null);
864 animation: pulse 2s infinite;
865 -webkit-transform: translateX(26px);
866 -ms-transform: translateX(26px);
867 transform: translateX(26px);
870 @include flexbox(block, null, null, null, null, null);
873 @include flexbox(none, null, null, null, null, null);
878 @include position_value(absolute, 0, 0, 0, 0);
880 @include background(null, $gray-400, null, null, null);
881 -webkit-transition: 0.4s;
883 box-shadow: 0 0 1px $gray-400;
885 @include roundedCorners(30);
887 @include roundedCornersPercentage(50%);
891 @include position_value(absolute, null, null, -2px, 0px);
892 @include wh-value(20px, 20px);
893 @include background(null, $white, null, null, null);
895 -webkit-transition: 0.4s;
897 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
900 @include flexbox(none, null, null, null, null, null);
901 @include position_value(absolute, 50%, null, null, 35% !important);
905 @include position_value(absolute, 50%, null, null, 65%);
907 transform: translate(-50%, -50%);
908 @include font(null, 11px, bold);
911 @-webkit-keyframes pulse {
913 -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
916 -webkit-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
919 -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
924 -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
925 box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
928 -moz-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
929 box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
932 -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
933 box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
938 /****************************************************************************/
939 /************************** MEDIA QUERIES ***********************************/
940 /****************************************************************************/
941 @media (max-width: map-get($grid-breakpoints, md)) {
943 @include flexbox(block, null, null, null, null, null);
950 text-transform: capitalize;
953 color: $secondary !important;
956 @include flexbox(none, null, null, null, null, null);
960 @include wh-value(20%, null);
963 @include wh-value(25%, null);
968 @include roundedCorners(10);
969 @include padding-percentage-value(0.2rem, 1rem, 0.2rem, 1rem);
970 box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
976 background-color: #fff !important;
977 padding: 0.375rem 1.75rem 0.375rem 0.75rem;
979 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='10' viewBox='0 0 10 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"),
980 var(--input-bg-color),
986 /****************************************************************************/
987 /************************** HEALING STYLE ***********************************/
988 /****************************************************************************/
1007 margin-bottom: 16px;
1021 vertical-align: bottom;
1022 border-bottom: 2px solid rgba(0, 0, 0, 0.1);
1026 background-color: #fff;
1028 vertical-align: top;
1029 border-top: 1px solid rgba(0, 0, 0, 0.1);
1030 border-bottom: transparent;