X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=src%2Fassets%2Fscss%2Fapp.scss;h=337d6aada9dda81c6d2982dccbcb95d2f1b66d47;hb=refs%2Fheads%2Fmaster;hp=38318a74c4bc8feb4ce8db25138fef13fb8f7219;hpb=1245fc89f257bdc1c8db06d1f9f57e0e2eb760e2;p=osm%2FNG-UI.git

diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 38318a7..031608d 100644
--- 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 **/
+@use "sass:math";
+
 @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;
 }
@@ -29,6 +31,16 @@ button[type="submit"]:focus,
 .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,
@@ -37,7 +49,9 @@ body,
 .layout-wrapper,
 .CodeMirror-vscrollbar,
 .ng-sidebar,
-.runninginstances .popover-body {
+.runninginstances .popover-body,
+.resources-chart-popover .popover-body,
+.ng-dropdown-panel .scroll-host {
   &::-webkit-scrollbar {
     @include wh-value(10px, null);
   }
@@ -66,6 +80,7 @@ body {
     @include background(null, $theme-bg-color !important, null, null, null);
   }
   a {
+    text-decoration: none;
     color: $primary;
     &:hover,
     &:focus {
@@ -106,6 +121,7 @@ body {
       }
       &:disabled {
         cursor: not-allowed;
+        background-color: grey;
       }
     }
   }
@@ -122,14 +138,15 @@ body {
     );
   }
   .form-control {
+    color: #4f5467;
+    border-radius: 4px;
+    background-color: $white;
     @include roundedCorners(4);
     @include font(null, 12px, null);
     &::placeholder {
       color: $gray-400;
     }
-  }
-  .modal-dialog {
-    max-width: 600px;
+    background-color: $white;
   }
   .header-style {
     @include font(null, 1.2rem, 700);
@@ -142,7 +159,7 @@ body {
   .cursor-pointer {
     cursor: pointer;
   }
-  .mr-top-5 {
+  .me-top-5 {
     @include margin-value-percentage(5px, auto, auto, auto);
   }
   .padLeft0 {
@@ -152,7 +169,7 @@ body {
     padding-right: 0px;
   }
   .mandatory-label {
-    @include font(null, 10px, null);
+    @include font(null, 11px, null);
   }
   .dropzone {
     min-height: 50px;
@@ -171,17 +188,73 @@ body {
   }
   .close {
     opacity: 1 !important;
+    background-color: transparent;
+    border: 0;
+    position: absolute;
+    right: 10px;
+    font-size: 1.3125rem;
   }
   .closeVersion {
     text-shadow: none;
   }
   .roles-section {
     .card {
+      .card-body {
+        background-color: #fff;
+      }
       .bg-secondary {
+        padding: 11px;
         @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;
+      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);
+      .bg-secondary {
+        @include background(null, $primary !important, null, null, null);
+        b,
+        span {
+          color: $white;
+        }
+      }
+      .card-header {
+        padding: 0.75rem 1.25rem;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+      }
+      .card-body {
+        border-radius: 2px;
+        .seconds-btn-group .active {
+          color: $white;
+          @include background(null, $primary !important, null, null, null);
+        }
+        @include border(all, 2, dashed, $primary);
+        @include padding-value(5, 5, 5, 5);
+        border-top: 0;
+        table {
+          th,
+          td {
+            color: $body-color;
+          }
+          thead th {
+            font-size: 12px;
+            color: $body-color;
+          }
+          tbody th i.active-icon {
+            font-size: 10px;
+          }
+        }
+      }
+      background-color: #fff;
+    }
+  }
   .card {
     margin-bottom: 1rem;
   }
@@ -190,6 +263,7 @@ body {
     @include roundedCorners(3);
     .custom-card-body {
       @include padding-value(15, 15, 15, 15);
+      background-color: #fff;
     }
   }
   table-cell-default-editor select-editor select {
@@ -210,7 +284,17 @@ body {
     @include roundedCorners(3);
   }
   /** Model Popup-Design **/
+  .modal-header {
+    .close {
+      top: 10px;
+    }
+  }
+  .modal-content {
+    background-color: #fff;
+  }
   .modal-body-custom-height {
+    background-color: #fff !important;
+    color: $body-color;
     max-height: 65vh;
     overflow-y: auto;
   }
@@ -224,21 +308,37 @@ body {
   }
   /** 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;
+    margin-top: 10px;
     .popover-body {
       max-height: 200px;
       overflow-y: scroll;
+      background-color: $white !important;
+    }
+  }
+  .resources-chart-popover {
+    margin-top: 4px;
+    max-width: 60% !important;
+    width: 600px !important;
+    @include font-family("Roboto");
+    .popover-body {
+      max-height: 60vh;
+      overflow-y: scroll;
+      background-color: #fff !important;
     }
   }
   /****************************************************************************/
   /************************** Smart table custom design ***********************/
   /****************************************************************************/
   ng2-smart-table {
+    background-color: #fff;
+    background-color: none;
     @include font(null, 15px, null);
     color: $gray-700;
     .form-control {
@@ -308,15 +408,29 @@ body {
       }
     }
     .ng2-smart-filter {
+      background-color: #fff;
       @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;
+        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 {
@@ -327,6 +441,7 @@ body {
     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;
@@ -351,9 +466,11 @@ body {
       }
       input-filter {
         input[type="text"] {
+          background-color: #fff;
           @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);
@@ -374,6 +491,8 @@ body {
             }
           }
           .ng2-smart-page-link {
+            background-color: #fff;
+            box-shadow: none;
             @include font(null, 12px !important, null);
             &.page-link {
               text-align: center;
@@ -431,12 +550,15 @@ body {
   /*********************** List Action Dropdown section ***********************/
   /****************************************************************************/
   .list-action-dropdown {
+    background-color: #fff;
     @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);
+      background-color: #fff;
       color: $primary;
       &:hover {
         @include background(null, $primary, null, null, null);
@@ -451,12 +573,14 @@ body {
   /*********************** 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 {
+      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);
@@ -476,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 {
+    margin-left: 10px;
     @include flexbox(flex, null, row, null, center, null);
     nav.custom-items-config {
       @include position_value(relative, null, null, null, null);
@@ -504,6 +636,22 @@ body {
   /****************************************************************************/
   /************************* 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);
@@ -565,6 +713,7 @@ body {
           @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;
@@ -617,6 +766,7 @@ body {
     fieldset {
       @include border(all, 1, solid, $primary);
       legend {
+        float: none;
         @include padding-value(0, 5, 0, 5);
         @include font(null, 15px, null);
         color: $primary;
@@ -628,6 +778,9 @@ body {
           @include wh-value(25%, null);
         }
       }
+      .font-weight-bold {
+        font-weight: 700 !important;
+      }
     }
     .btn-icon {
       @include wh-value(36px, 36px);
@@ -694,6 +847,93 @@ body {
       }
     }
   }
+  /** Switch Design **/
+  .switch {
+    @include position_value(relative, null, null, null, null);
+    @include flexbox(inline-block, null, null, null, null, null);
+    @include wh-value(50px, 15px);
+    @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, $pure-red, null, null, null);
+          left: 5px;
+          animation: pulse 2s infinite;
+          -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(20px, 20px);
+        @include background(null, $white, 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, 65%);
+        color: $primary;
+        transform: translate(-50%, -50%);
+        @include font(null, 11px, bold);
+      }
+    }
+    @-webkit-keyframes pulse {
+      0% {
+        -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+      }
+      70% {
+        -webkit-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+      }
+      100% {
+        -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+      }
+    }
+    @keyframes pulse {
+      0% {
+        -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+        box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+      }
+      70% {
+        -moz-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+        box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+      }
+      100% {
+        -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+        box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+      }
+    }
+  }
 }
 /****************************************************************************/
 /************************** MEDIA QUERIES ***********************************/
@@ -709,6 +949,89 @@ body {
 .text-captilize {
   text-transform: capitalize;
 }
-.text-info{
+.text-info {
   color: $secondary !important;
 }
+.hide {
+  @include flexbox(none, null, null, null, null, null);
+}
+.title-bar {
+  .name-width {
+    @include wh-value(20%, null);
+  }
+  .id-width {
+    @include wh-value(25%, null);
+  }
+}
+.filter-actions {
+  button {
+    @include roundedCorners(10);
+    @include padding-percentage-value(0.2rem, 1rem, 0.2rem, 1rem);
+    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);
+    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;
+}