Angular upgrade

[osm/NG-UI.git] / src / assets / scss / app.scss

diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 2e2eb92..031608d 100644 (file)
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -16,9 +16,11 @@
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
  */
 /** Styles for the application **/
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
  */
 /** Styles for the application **/

+@use "sass:math";
+

 @import "../../assets/scss/mixins/mixin";
 @import "../../assets/scss/variable";
 @import "../../assets/scss/mixins/mixin";
 @import "../../assets/scss/variable";

-$customnavbar-padding-x: ($spacer / 0.5) !default;
+$customnavbar-padding-x: math.div($spacer, 0.5) !default;

 * {
   outline: 0;
 }
 * {
   outline: 0;
 }


@@ -29,6 +31,16 @@ button[type="submit"]:focus,
 .btn-danger:focus {
   @include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
 }
 .btn-danger:focus {
   @include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
 }

+.btn-success {
+  --bs-btn-hover-bg: #198754;
+}
+.btn-danger {
+  --bs-btn-hover-bg: #cb3424;
+  --bs-btn-color: #fff;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-active-bg: #cb3424;
+  --bs-btn-active-color: #fff;
+}

 body,
 .list-overflow,
 .scroll-box,
 body,
 .list-overflow,
 .scroll-box,


@@ -38,7 +50,8 @@ body,
 .CodeMirror-vscrollbar,
 .ng-sidebar,
 .runninginstances .popover-body,
 .CodeMirror-vscrollbar,
 .ng-sidebar,
 .runninginstances .popover-body,

-.resources-chart-popover .popover-body {
+.resources-chart-popover .popover-body,
+.ng-dropdown-panel .scroll-host {

   &::-webkit-scrollbar {
     @include wh-value(10px, null);
   }
   &::-webkit-scrollbar {
     @include wh-value(10px, null);
   }


@@ -67,6 +80,7 @@ body {
     @include background(null, $theme-bg-color !important, null, null, null);
   }
   a {
     @include background(null, $theme-bg-color !important, null, null, null);
   }
   a {

+    text-decoration: none;

     color: $primary;
     &:hover,
     &:focus {
     color: $primary;
     &:hover,
     &:focus {


@@ -107,6 +121,7 @@ body {
       }
       &:disabled {
         cursor: not-allowed;
       }
       &:disabled {
         cursor: not-allowed;

+        background-color: grey;

       }
     }
   }
       }
     }
   }


@@ -123,11 +138,15 @@ body {
     );
   }
   .form-control {
     );
   }
   .form-control {

+    color: #4f5467;
+    border-radius: 4px;
+    background-color: $white;

     @include roundedCorners(4);
     @include font(null, 12px, null);
     &::placeholder {
       color: $gray-400;
     }
     @include roundedCorners(4);
     @include font(null, 12px, null);
     &::placeholder {
       color: $gray-400;
     }

+    background-color: $white;

   }
   .header-style {
     @include font(null, 1.2rem, 700);
   }
   .header-style {
     @include font(null, 1.2rem, 700);


@@ -140,7 +159,7 @@ body {
   .cursor-pointer {
     cursor: pointer;
   }
   .cursor-pointer {
     cursor: pointer;
   }

-  .mr-top-5 {
+  .me-top-5 {

     @include margin-value-percentage(5px, auto, auto, auto);
   }
   .padLeft0 {
     @include margin-value-percentage(5px, auto, auto, auto);
   }
   .padLeft0 {


@@ -169,18 +188,31 @@ body {
   }
   .close {
     opacity: 1 !important;
   }
   .close {
     opacity: 1 !important;

+    background-color: transparent;
+    border: 0;
+    position: absolute;
+    right: 10px;
+    font-size: 1.3125rem;

   }
   .closeVersion {
     text-shadow: none;
   }
   .roles-section {
     .card {
   }
   .closeVersion {
     text-shadow: none;
   }
   .roles-section {
     .card {

+      .card-body {
+        background-color: #fff;
+      }

       .bg-secondary {
       .bg-secondary {

+        padding: 11px;

         @include background(null, $gray-400 !important, null, null, null);
       }
     }
   }
   .juju-section {
         @include background(null, $gray-400 !important, null, null, null);
       }
     }
   }
   .juju-section {

+    .col-form-label {
+      position: relative;
+      bottom: 3px;
+    }

     .card {
       @include roundedCorners(4);
       margin-bottom: 0.25rem;
     .card {
       @include roundedCorners(4);
       margin-bottom: 0.25rem;


@@ -192,7 +224,13 @@ body {
           color: $white;
         }
       }
           color: $white;
         }
       }

+      .card-header {
+        padding: 0.75rem 1.25rem;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+      }

       .card-body {
       .card-body {

+        border-radius: 2px;

         .seconds-btn-group .active {
           color: $white;
           @include background(null, $primary !important, null, null, null);
         .seconds-btn-group .active {
           color: $white;
           @include background(null, $primary !important, null, null, null);


@@ -201,14 +239,20 @@ body {
         @include padding-value(5, 5, 5, 5);
         border-top: 0;
         table {
         @include padding-value(5, 5, 5, 5);
         border-top: 0;
         table {

+          th,
+          td {
+            color: $body-color;
+          }

           thead th {
             font-size: 12px;
           thead th {
             font-size: 12px;

+            color: $body-color;

           }
           tbody th i.active-icon {
             font-size: 10px;
           }
         }
       }
           }
           tbody th i.active-icon {
             font-size: 10px;
           }
         }
       }

+      background-color: #fff;

     }
   }
   .card {
     }
   }
   .card {


@@ -219,6 +263,7 @@ body {
     @include roundedCorners(3);
     .custom-card-body {
       @include padding-value(15, 15, 15, 15);
     @include roundedCorners(3);
     .custom-card-body {
       @include padding-value(15, 15, 15, 15);

+      background-color: #fff;

     }
   }
   table-cell-default-editor select-editor select {
     }
   }
   table-cell-default-editor select-editor select {


@@ -239,7 +284,17 @@ body {
     @include roundedCorners(3);
   }
   /** Model Popup-Design **/
     @include roundedCorners(3);
   }
   /** Model Popup-Design **/

+  .modal-header {
+    .close {
+      top: 10px;
+    }
+  }
+  .modal-content {
+    background-color: #fff;
+  }

   .modal-body-custom-height {
   .modal-body-custom-height {

+    background-color: #fff !important;
+    color: $body-color;

     max-height: 65vh;
     overflow-y: auto;
   }
     max-height: 65vh;
     overflow-y: auto;
   }


@@ -253,29 +308,37 @@ body {
   }
   /** Popover Header **/
   .popover-header {
   }
   /** Popover Header **/
   .popover-header {

+    margin-top: 7px;

     color: $primary;
     @include background(null, $theme-bg-color, null, null, null);
   }
   /** Vim Show running instance Details **/
   .runninginstances {
     width: 200px;
     color: $primary;
     @include background(null, $theme-bg-color, null, null, null);
   }
   /** Vim Show running instance Details **/
   .runninginstances {
     width: 200px;

+    margin-top: 10px;

     .popover-body {
       max-height: 200px;
       overflow-y: scroll;
     .popover-body {
       max-height: 200px;
       overflow-y: scroll;

+      background-color: $white !important;

     }
   }
   .resources-chart-popover {
     }
   }
   .resources-chart-popover {

+    margin-top: 4px;

     max-width: 60% !important;
     max-width: 60% !important;

+    width: 600px !important;

     @include font-family("Roboto");
     .popover-body {
       max-height: 60vh;
       overflow-y: scroll;
     @include font-family("Roboto");
     .popover-body {
       max-height: 60vh;
       overflow-y: scroll;

+      background-color: #fff !important;

     }
   }
   /****************************************************************************/
   /************************** Smart table custom design ***********************/
   /****************************************************************************/
   ng2-smart-table {
     }
   }
   /****************************************************************************/
   /************************** Smart table custom design ***********************/
   /****************************************************************************/
   ng2-smart-table {

+    background-color: #fff;
+    background-color: none;

     @include font(null, 15px, null);
     color: $gray-700;
     .form-control {
     @include font(null, 15px, null);
     color: $gray-700;
     .form-control {


@@ -345,15 +408,29 @@ body {
       }
     }
     .ng2-smart-filter {
       }
     }
     .ng2-smart-filter {

+      background-color: #fff;

       @include wh-value(null, calc(2rem + 2px) !important);
       @include font(null, 12px, null);
       margin-top: 6px;
     }
       @include wh-value(null, calc(2rem + 2px) !important);
       @include font(null, 12px, null);
       margin-top: 6px;
     }

+    input {
+      background-color: #fff !important;
+    }

     table.list-data {
       tr td,
       tr th {
         @include padding-value(2, 10, 2, 10);
         vertical-align: middle !important;
     table.list-data {
       tr td,
       tr th {
         @include padding-value(2, 10, 2, 10);
         vertical-align: middle !important;

+        background-color: #fff;
+        color: grey;
+      }
+      input[type="checkbox"] {
+        padding: 6px 6px;
+        border-color: rgba(0, 0, 0, 0.5);
+        &:checked {
+          background-color: $blue !important;
+          border: black;
+        }

       }
       tbody {
         tr.selected {
       }
       tbody {
         tr.selected {


@@ -364,6 +441,7 @@ body {
     default-table-filter {
       select-filter {
         select.form-control {
     default-table-filter {
       select-filter {
         select.form-control {

+          background-color: #fff !important;

           @include flexbox(inline-block, null, null, null, null, null);
           @include wh-value(null, calc(1.5rem + 2px) !important);
           vertical-align: middle;
           @include flexbox(inline-block, null, null, null, null, null);
           @include wh-value(null, calc(1.5rem + 2px) !important);
           vertical-align: middle;


@@ -388,9 +466,11 @@ body {
       }
       input-filter {
         input[type="text"] {
       }
       input-filter {
         input[type="text"] {

+          background-color: #fff;

           @include position_value(relative, null, null, null, null);
         }
         &:after {
           @include position_value(relative, null, null, null, null);
         }
         &:after {

+          color: #afb5c1;

           @include position_value(relative, -26px, null, null, 100%);
           content: "\f002";
           @include font("Font Awesome 5 Free", 10px, null);
           @include position_value(relative, -26px, null, null, 100%);
           content: "\f002";
           @include font("Font Awesome 5 Free", 10px, null);


@@ -411,6 +491,8 @@ body {
             }
           }
           .ng2-smart-page-link {
             }
           }
           .ng2-smart-page-link {

+            background-color: #fff;
+            box-shadow: none;

             @include font(null, 12px !important, null);
             &.page-link {
               text-align: center;
             @include font(null, 12px !important, null);
             &.page-link {
               text-align: center;


@@ -468,12 +550,15 @@ body {
   /*********************** List Action Dropdown section ***********************/
   /****************************************************************************/
   .list-action-dropdown {
   /*********************** List Action Dropdown section ***********************/
   /****************************************************************************/
   .list-action-dropdown {

+    background-color: #fff;

     @include border(all, 1, solid, $primary);
     @include padding-value(0, 0, 0, 0);
     @include border(all, 1, solid, $primary);
     @include padding-value(0, 0, 0, 0);

+    margin-top: 3px;

     button.btn.btn-primary {
       @include background(null, transparent, null, null, null);
       @include padding-value(8, 8, 8, 8);
       @include roundedCorners(0);
     button.btn.btn-primary {
       @include background(null, transparent, null, null, null);
       @include padding-value(8, 8, 8, 8);
       @include roundedCorners(0);

+      background-color: #fff;

       color: $primary;
       &:hover {
         @include background(null, $primary, null, null, null);
       color: $primary;
       &:hover {
         @include background(null, $primary, null, null, null);


@@ -488,12 +573,14 @@ body {
   /*********************** Custom tabel design in topology ********************/
   /****************************************************************************/
   .custom-table {
   /*********************** Custom tabel design in topology ********************/
   /****************************************************************************/
   .custom-table {

+    border: 1px solid rgba(0, 0, 0, 0.1);

     td:first-child {
       @include font(null, null, bold);
       text-align: right;
     }
     th,
     td {
     td:first-child {
       @include font(null, null, bold);
       text-align: right;
     }
     th,
     td {

+      border: 1px solid rgba(0, 0, 0, 0.1);

       @include padding-value(5, 7, 5, 7);
       @include font(null, 10px, null);
       @include line-height(15px);
       @include padding-value(5, 7, 5, 7);
       @include font(null, 10px, null);
       @include line-height(15px);


@@ -513,10 +600,18 @@ body {
       }
     }
   }
       }
     }
   }

+  .ng-dropdown-panel .scroll-host {
+    overflow-x: auto;
+  }
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    text-overflow: unset;
+    overflow: unset;
+  }

   /****************************************************************************/
   /******************** Custom nav section for default status *****************/
   /****************************************************************************/
   .list-utilites-actions {
   /****************************************************************************/
   /******************** Custom nav section for default status *****************/
   /****************************************************************************/
   .list-utilites-actions {

+    margin-left: 10px;

     @include flexbox(flex, null, row, null, center, null);
     nav.custom-items-config {
       @include position_value(relative, null, null, null, null);
     @include flexbox(flex, null, row, null, center, null);
     nav.custom-items-config {
       @include position_value(relative, null, null, null, null);


@@ -541,6 +636,22 @@ body {
   /****************************************************************************/
   /************************* File upload custom design ************************/
   /****************************************************************************/
   /****************************************************************************/
   /************************* File upload custom design ************************/
   /****************************************************************************/

+  .fileupload {
+    border: 1px solid;
+    border: 1px solid;
+    border-color: #054c8c;
+    border-radius: 4px;
+  }
+  input[type="file"] {
+    width: 100%;
+  }
+  input[type="file"]::file-selector-button {
+    border: none;
+    background: #054c8c;
+    padding: 7px 10px;
+    border-radius: 2px;
+    color: #fff;
+  }

   .custom-file-label {
     color: $primary;
     @include roundedCorners(4);
   .custom-file-label {
     color: $primary;
     @include roundedCorners(4);


@@ -602,6 +713,7 @@ body {
           @include flexbox(flex, null, null, null, center, null);
           border: none;
           .span-overflow-text {
           @include flexbox(flex, null, null, null, center, null);
           border: none;
           .span-overflow-text {

+            color: $black;

             @include wh-value(90%, null);
             white-space: nowrap;
             overflow: hidden;
             @include wh-value(90%, null);
             white-space: nowrap;
             overflow: hidden;


@@ -654,6 +766,7 @@ body {
     fieldset {
       @include border(all, 1, solid, $primary);
       legend {
     fieldset {
       @include border(all, 1, solid, $primary);
       legend {

+        float: none;

         @include padding-value(0, 5, 0, 5);
         @include font(null, 15px, null);
         color: $primary;
         @include padding-value(0, 5, 0, 5);
         @include font(null, 15px, null);
         color: $primary;


@@ -665,6 +778,9 @@ body {
           @include wh-value(25%, null);
         }
       }
           @include wh-value(25%, null);
         }
       }

+      .font-weight-bold {
+        font-weight: 700 !important;
+      }

     }
     .btn-icon {
       @include wh-value(36px, 36px);
     }
     .btn-icon {
       @include wh-value(36px, 36px);


@@ -855,3 +971,67 @@ body {
     border: none;
   }
 }
     border: none;
   }
 }

+
+.custom-select {
+  background-color: #fff !important;
+  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+  @include background(
+    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"),
+    var(--input-bg-color),
+    null,
+    no-repeat,
+    0px 10px
+  );
+}
+/****************************************************************************/
+/************************** HEALING STYLE ***********************************/
+/****************************************************************************/
+
+app-healing {
+  .card {
+    border-radius: 15px;
+    width: auto;
+    height: auto;
+    margin-bottom: 5px;
+  }
+
+  .card-body {
+    flex: 1 1 auto;
+    min-height: 1px;
+    padding: 5px;
+  }
+
+  .form-group {
+    margin-bottom: 1px;
+    .row {
+      margin-bottom: 16px;
+    }
+  }
+
+  .col-sm-1 {
+    bottom: 20px;
+  }
+
+  .col-5 {
+    left: 79px;
+  }
+}
+
+.table thead th {
+  vertical-align: bottom;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+}
+.table th,
+.table td {
+  background-color: #fff;
+  padding: 5px;
+  vertical-align: top;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: transparent;
+}
+.table b {
+  background: none;
+  color: $body-color;
+  padding-right: 0px;
+  padding-left: 0px;
+}