X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=src%2Fassets%2Fscss%2Fapp.scss;h=cb96c93dd1aa6f673b2954457648474e7c4e6c38;hb=0a34dfa32165036b380ec6ac493469b34007df0a;hp=bc8a216c1e1c4622ff7dba10ac4a2dc426394e90;hpb=3b4814aa2d3dec621dadb52f058ba95a3dc3a86a;p=osm%2FNG-UI.git

diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index bc8a216..cb96c93 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -16,16 +16,19 @@
  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;
 }
-button[type=submit]:focus, .sidebar-body button[type=button]:focus {
+button[type="submit"]:focus,
+.sidebar-body button[type="button"]:focus {
   @include box-shadow(0, 0, 0, 0.2rem, lighten($primary, 50%) !important);
 }
-.btn-danger:focus{
+.btn-danger:focus {
   @include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
 }
 body,
@@ -33,7 +36,11 @@ body,
 .scroll-box,
 .smarttable-style,
 .modal-body-custom-height,
-.layout-wrapper, .CodeMirror-vscrollbar, .ng-sidebar, .runninginstances .popover-body {
+.layout-wrapper,
+.CodeMirror-vscrollbar,
+.ng-sidebar,
+.runninginstances .popover-body,
+.resources-chart-popover .popover-body {
   &::-webkit-scrollbar {
     @include wh-value(10px, null);
   }
@@ -67,6 +74,10 @@ body {
     &:focus {
       text-decoration: none;
     }
+    &:not([href]),
+    &:not([href]):hover {
+      color: inherit;
+    }
   }
   .badge {
     @include line-height(normal);
@@ -120,9 +131,6 @@ body {
       color: $gray-400;
     }
   }
-  .modal-dialog {
-    max-width: 600px;
-  }
   .header-style {
     @include font(null, 1.2rem, 700);
     color: $primary;
@@ -144,7 +152,7 @@ body {
     padding-right: 0px;
   }
   .mandatory-label {
-    @include font(null, 10px, null);
+    @include font(null, 11px, null);
   }
   .dropzone {
     min-height: 50px;
@@ -164,6 +172,9 @@ body {
   .close {
     opacity: 1 !important;
   }
+  .closeVersion {
+    text-shadow: none;
+  }
   .roles-section {
     .card {
       .bg-secondary {
@@ -171,6 +182,37 @@ body {
       }
     }
   }
+  .juju-section {
+    .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-body {
+        .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 {
+          thead th {
+            font-size: 12px;
+          }
+          tbody th i.active-icon {
+            font-size: 10px;
+          }
+        }
+      }
+    }
+  }
   .card {
     margin-bottom: 1rem;
   }
@@ -185,9 +227,12 @@ body {
     @include wh-value(null, calc(2rem + 8px) !important);
     @include padding-value(0, 10, 0, 10);
   }
-  .CodeMirror {
+  .edit-packages .CodeMirror {
     min-height: 400px !important;
   }
+  .new-vim .CodeMirror {
+    @include border(all, 1, solid, #eee !important);
+  }
   .table-layout-fixed {
     table-layout: fixed;
     word-wrap: break-word;
@@ -214,12 +259,21 @@ body {
     @include background(null, $theme-bg-color, null, null, null);
   }
   /** Vim Show running instance Details **/
-  .runninginstances{
-     width:200px;
-     .popover-body{
+  .runninginstances {
+    width: 200px;
+    .popover-body {
       max-height: 200px;
       overflow-y: scroll;
-     }
+    }
+  }
+  .resources-chart-popover {
+    max-width: 60% !important;
+    width: 600px !important;
+    @include font-family("Roboto");
+    .popover-body {
+      max-height: 60vh;
+      overflow-y: scroll;
+    }
   }
   /****************************************************************************/
   /************************** Smart table custom design ***********************/
@@ -412,20 +466,24 @@ body {
         }
       }
     }
-    .dropdown-menu {
-      @include border(all, 1, solid, $primary);
-      @include padding-value(0, 0, 0, 0);
-      button.btn.btn-primary {
-        @include background(null, transparent, null, null, null);
-        @include padding-value(8, 8, 8, 8);
-        @include roundedCorners(0);
-        &:hover {
-          @include background(null, $primary, null, null, null);
-          color: $white;
-        }
-        &:not(:last-child) {
-          @include border(bottom, 1, solid, $primary);
-        }
+  }
+  /****************************************************************************/
+  /*********************** List Action Dropdown section ***********************/
+  /****************************************************************************/
+  .list-action-dropdown {
+    @include border(all, 1, solid, $primary);
+    @include padding-value(0, 0, 0, 0);
+    button.btn.btn-primary {
+      @include background(null, transparent, null, null, null);
+      @include padding-value(8, 8, 8, 8);
+      @include roundedCorners(0);
+      color: $primary;
+      &:hover {
+        @include background(null, $primary, null, null, null);
+        color: $white;
+      }
+      &:not(:last-child) {
+        @include border(bottom, 1, solid, $primary);
       }
     }
   }
@@ -676,13 +734,127 @@ 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 ***********************************/
 /****************************************************************************/
 @media (max-width: map-get($grid-breakpoints, md)) {
   .smarttable-style {
+    @include flexbox(block, null, null, null, null, null);
     overflow-x: auto;
     white-space: nowrap;
   }
-}
\ No newline at end of file
+}
+
+.text-captilize {
+  text-transform: capitalize;
+}
+.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;
+  }
+}