src/assets/scss/app.scss

/*
 Copyright 2020 TATA ELXSI

 Licensed under the Apache License, Version 2.0 (the 'License');
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.

 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: math.div($spacer, 0.5) !default;
* {
  outline: 0;
}
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 {
  @include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
}
body,
.list-overflow,
.scroll-box,
.smarttable-style,
.modal-body-custom-height,
.layout-wrapper,
.CodeMirror-vscrollbar,
.ng-sidebar,
.runninginstances .popover-body,
.resources-chart-popover .popover-body {
  &::-webkit-scrollbar {
    @include wh-value(10px, null);
  }
  &::-webkit-scrollbar-thumb {
    background-clip: content-box;
    @include border(all, 3, solid, transparent);
    @include roundedCorners(7);
    @include box-shadow(0, 0, 0, 10px, rgba($black, 0.8), inset);
  }
  &::-webkit-scrollbar-button {
    @include wh-value(0, 0);
    @include flexbox(none, null, null, null, null, null);
  }
  &::-webkit-scrollbar-corner {
    @include background(null, transparent, null, null, null);
  }
}
body {
  @include font-family("Roboto");
  @include background(null, $theme-bg-color, null, null, null);
  overflow-x: hidden;
  .osm-logo {
    @include wh-value(100px, auto);
  }
  .bg-light {
    @include background(null, $theme-bg-color !important, null, null, null);
  }
  a {
    color: $primary;
    &:hover,
    &:focus {
      text-decoration: none;
    }
    &:not([href]),
    &:not([href]):hover {
      color: inherit;
    }
  }
  .badge {
    @include line-height(normal);
    &.badge-pill {
      @include padding-percentage-value(0.2em, 0.6em, 0.2em, 0.6em);
    }
  }
  button {
    outline: none;
    @include box-shadow(0, 0, 0, 0, transparent);
    &:hover,
    &:focus,
    &:active {
      outline: none;
      @include box-shadow(0, 0, 0, 0, transparent !important);
    }
    &.btn-primary,
    &.btn-default,
    &.btn-warning,
    &.btn-outline-primary:hover,
    &.btn-outline-warning:hover {
      color: $white;
      &:hover,
      &:focus,
      &:not(:disabled):not(.disabled):active {
        color: $white;
        @include background(null, $primary, null, null, null);
        border-color: $primary;
      }
      &:disabled {
        cursor: not-allowed;
      }
    }
  }
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  .navbar {
    @include padding-percentage-value(
      $navbar-padding-y,
      $customnavbar-padding-x,
      $navbar-padding-y,
      $customnavbar-padding-x
    );
  }
  .form-control {
    @include roundedCorners(4);
    @include font(null, 12px, null);
    &::placeholder {
      color: $gray-400;
    }
  }
  .header-style {
    @include font(null, 1.2rem, 700);
    color: $primary;
    @include line-height(1.25);
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .mr-top-5 {
    @include margin-value-percentage(5px, auto, auto, auto);
  }
  .padLeft0 {
    padding-left: 0px;
  }
  .padRight0 {
    padding-right: 0px;
  }
  .mandatory-label {
    @include font(null, 11px, null);
  }
  .dropzone {
    min-height: 50px;
    @include flexbox(table, null, null, null, null, null);
    @include wh-value(100%, 50px);
    @include border(all, 1, dashed, $secondary);
    cursor: pointer;
    .text-wrapper {
      @include padding-value(5, 5, 5, 5);
      @include flexbox(table-cell, null, null, null, null, null);
      vertical-align: middle;
    }
    .file-drop-title {
      @include font(null, 16px, null);
    }
  }
  .close {
    opacity: 1 !important;
  }
  .closeVersion {
    text-shadow: none;
  }
  .roles-section {
    .card {
      .bg-secondary {
        @include background(null, $gray-400 !important, null, null, null);
      }
    }
  }
  .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;
  }
  .custom-card {
    @include border(top, 3, solid, $primary);
    @include roundedCorners(3);
    .custom-card-body {
      @include padding-value(15, 15, 15, 15);
    }
  }
  table-cell-default-editor select-editor select {
    @include wh-value(null, calc(2rem + 8px) !important);
    @include padding-value(0, 10, 0, 10);
  }
  .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;
  }
  .border-radius-default {
    @include roundedCorners(3);
  }
  /** Model Popup-Design **/
  .modal-body-custom-height {
    max-height: 65vh;
    overflow-y: auto;
  }
  /** Hide input clear icon in IE */
  input::-ms-clear {
    @include flexbox(none, null, null, null, null, null);
  }
  /** Overwrite the tooltip z-index */
  .tooltip {
    z-index: 1010;
  }
  /** Popover Header **/
  .popover-header {
    color: $primary;
    @include background(null, $theme-bg-color, null, null, null);
  }
  /** Vim Show running instance Details **/
  .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 ***********************/
  /****************************************************************************/
  ng2-smart-table {
    @include font(null, 15px, null);
    color: $gray-700;
    .form-control {
      @include wh-value(null, auto);
    }
    &.dataTables_empty td {
      text-align: center;
    }
    ng2-smart-table-title {
      * {
        @include font(null, 12px, null);
      }
      a {
        color: $gray-700 !important;
        @include flexbox(block, null, null, null, null, null);
        text-decoration: none;
        &::after {
          content: "\f0dc" !important;
          @include font-family("Font Awesome 5 Free");
          float: right;
          color: $gray-500;
          @include wh-value(0, 0);
        }
        &.asc::after {
          content: "\f0de" !important;
          @include font-family("Font Awesome 5 Free");
          float: right;
          color: $gray-500;
        }
        &.desc::after {
          content: "\f0dd" !important;
          @include font-family("Font Awesome 5 Free");
          float: right;
          color: $gray-500;
        }
        &:hover {
          text-decoration: none !important;
        }
        &.sort.desc::after {
          transform: none !important;
          margin-bottom: 0;
        }
        &.sort.asc::after,
        &.sort.desc::after {
          content: "";
          @include flexbox(inline-block, null, null, null, null, null);
          @include wh-value(0, 0);
          @include border(all, 0, solid, transparent !important);
          margin-bottom: 0 !important;
        }
      }
      span {
        color: $gray-700;
      }
    }
    ng2-smart-table-cell {
      word-break: break-word;
      table-cell-view-mode {
        @include font(null, 12px, null);
        .icon-label {
          @include font(null, 20px, null);
          @include flexbox(inline-block, null, null, null, null, null);
          @include wh-value(100px, 0);
          text-align: center;
          cursor: default;
        }
      }
    }
    .ng2-smart-filter {
      @include wh-value(null, calc(2rem + 2px) !important);
      @include font(null, 12px, null);
      margin-top: 6px;
    }
    table.list-data {
      tr td,
      tr th {
        @include padding-value(2, 10, 2, 10);
        vertical-align: middle !important;
      }
      tbody {
        tr.selected {
          background: none !important;
        }
      }
    }
    default-table-filter {
      select-filter {
        select.form-control {
          @include flexbox(inline-block, null, null, null, null, null);
          @include wh-value(null, calc(1.5rem + 2px) !important);
          vertical-align: middle;
          background: $white
            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")
            no-repeat right 0.75rem center;
          background-size: 8px 10px;
          @include border(all, 1, solid, $gray-200);
          @include roundedCorners(2);
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          &::-ms-expand {
            visibility: hidden;
          }
        }
      }
      select-filter {
        select {
          @include roundedCorners(4);
        }
      }
      input-filter {
        input[type="text"] {
          @include position_value(relative, null, null, null, null);
        }
        &:after {
          @include position_value(relative, -26px, null, null, 100%);
          content: "\f002";
          @include font("Font Awesome 5 Free", 10px, null);
          @include padding-value(0, 0, 0, 2);
          color: $gray-500;
        }
      }
    }
    ng2-smart-table-pager {
      @include flexbox(null, null, row-reverse, null, null, null);
      @include padding-value(5, 20, 5, 20);
      .ng2-smart-pagination {
        .ng2-smart-page-item {
          @include font(null, 10px, null);
          a {
            &:hover {
              text-decoration: none;
            }
          }
          .ng2-smart-page-link {
            @include font(null, 12px !important, null);
            &.page-link {
              text-align: center;
              vertical-align: middle;
              color: $primary;
              @include border(all, 1, solid, $primary !important);
              &:hover {
                @include background(null, $primary !important, null, null, null);
                color: $white;
              }
            }
          }
          span.ng2-smart-page-link.page-link {
            color: $white;
            @include background(null, $primary !important, null, null, null);
            @include border(all, 1, solid, $primary !important);
          }
        }
      }
    }
  }
  /****************************************************************************/
  /*********************** Button styles under list class *********************/
  /****************************************************************************/
  .list {
    &.action {
      button.btn.btn-primary {
        @include padding-value(2, 8, 2, 8);
      }
    }
    button:focus {
      outline: 0;
      @include box-shadow(0, 0, 0, 0, transparent);
    }
    button.btn.btn-primary {
      color: $primary;
      @include background(null, $white, null, null, null);
      &:not(.active:hover) {
        @include background(null, $white, null, null, null);
      }
      &:active {
        color: $primary;
        @include background(null, $white, null, null, null);
      }
      &.action-button {
        color: $white;
        @include background(null, $primary !important, null, null, null);
        &:hover {
          @include background(null, $primary, null, null, null);
        }
      }
    }
  }
  /****************************************************************************/
  /*********************** 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);
      }
    }
  }
  /****************************************************************************/
  /*********************** Custom tabel design in topology ********************/
  /****************************************************************************/
  .custom-table {
    td:first-child {
      @include font(null, null, bold);
      text-align: right;
    }
    th,
    td {
      @include padding-value(5, 7, 5, 7);
      @include font(null, 10px, null);
      @include line-height(15px);
    }
  }
  /****************************************************************************/
  /************************** Ng select custom design *************************/
  /****************************************************************************/
  .ng-select {
    &.is-invalid .ng-select-container {
      @include border(all, 1, solid, $red);
    }
    .ng-select-container {
      @include border(all, 1, solid, $gray-200);
      .ng-value-container .ng-placeholder {
        color: $gray-80;
      }
    }
  }
  /****************************************************************************/
  /******************** Custom nav section for default status *****************/
  /****************************************************************************/
  .list-utilites-actions {
    @include flexbox(flex, null, row, null, center, null);
    nav.custom-items-config {
      @include position_value(relative, null, null, null, null);
      @include roundedCorners(3);
      span {
        @include font(null, 13px, 600);
        @include flexbox(inline-block, null, null, null, null, null);
        @include position_value(relative, null, null, null, null);
        text-decoration: none;
        text-align: center;
        @include margin-value(0, 0, 0, 10);
        &:first-child {
          @include margin-value(0, 0, 0, 0);
        }
        i {
          @include font(null, 14px, null);
          @include margin-value(0, 5, 0, 0);
        }
      }
    }
  }
  /****************************************************************************/
  /************************* File upload custom design ************************/
  /****************************************************************************/
  .custom-file-label {
    color: $primary;
    @include roundedCorners(4);
    @include border(all, 1, solid, $primary);
    overflow: hidden;
    @include margin-value(0, 0, 0, 0);
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 80px;
    &::after {
      color: $white;
      @include background(null, $primary, null, null, null);
    }
  }
  /****************************************************************************/
  /************************* Notifier Container Design ************************/
  /****************************************************************************/
  .notifier__container {
    ul {
      @include margin-value(0, 0, 0, 0);
    }
  }
  /***************************************************************************/
  /************************* Topology Common Design **************************/
  /****************************************************************************/
  .ns-composer-form,
  .vnf-composer-form,
  .ns-instance-form {
    @include font(null, 12px, null);
    .ns-svg,
    .vnf-svg {
      @include wh-value(30px, 25px);
    }
    .svg-container {
      min-height: 60vh;
    }
    .form-control {
      @include font(null, 10px, null);
    }
    .scroll-box {
      max-height: 285px;
      overflow-y: scroll;
    }
    .border-all {
      @include border(all, 1, solid, $primary);
    }
    .list-group {
      &.inside-svg {
        .list-group-item {
          @include padding-value(3.2, 8, 3.2, 8);
        }
      }
      &.dragable {
        .list-group-item {
          cursor: move;
          @include padding-value(4.8, 4.8, 4.8, 4.8);
          @include margin-value(0, 0, 5, 0);
          @include background(null, $gray-200, null, null, null);
          @include flexbox(flex, null, null, null, center, null);
          border: none;
          .span-overflow-text {
            @include wh-value(90%, null);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            @include line-height(25px);
          }
        }
      }
    }
    .drag-icon {
      color: $gray-600;
      @include font(null, 15px, null);
    }
    .ctrl {
      cursor: move;
    }
    svg {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
      image.node:hover,
      circle.node:hover {
        opacity: 0.7 !important;
      }
      image.active,
      circle.active {
        opacity: 0.7 !important;
      }
      path.link {
        stroke: $dark-gray;
        stroke-width: 2px;
        fill: none;
        &:hover {
          stroke-width: 4px;
        }
        .dragline {
          pointer-events: none;
        }
      }
      .node_text {
        text-anchor: middle;
        pointer-events: none;
      }
      :not(.ctrl) {
        cursor: pointer;
      }
    }
    fieldset {
      @include border(all, 1, solid, $primary);
      legend {
        @include padding-value(0, 5, 0, 5);
        @include font(null, 15px, null);
        color: $primary;
        &.vl-legend,
        &.element-legend {
          @include wh-value(55%, null);
        }
        &.vnfd-legend {
          @include wh-value(25%, null);
        }
      }
    }
    .btn-icon {
      @include wh-value(36px, 36px);
      text-align: center;
      @include margin-value(0, 10, 10, 0);
    }
    .topology-btn {
      color: $primary;
      border-color: $primary;
      &:hover,
      &.pinned {
        color: $white !important;
        @include background(null, $primary !important, null, null, null);
      }
    }
    .badgegroup {
      @include flexbox(flex, flex-end, row, center, center, null);
    }
  }
  .ns-topology-sidebar-container,
  .vnf-topology-sidebar-container,
  .ns-instance-topology-sidebar-container {
    @include position_value(absolute !important, 0px, null, null, 0px);
    .ng-sidebar {
      @include wh-value(27%, null);
      @include background(null, $white, null, null, null);
      @include border(all, 1, solid, $gray-300);
      .sidebar-header {
        @include background(null, $modalheader-gray, null, null, null);
        @include padding-value(5, 10, 5, 10);
        @include border(bottom, 1, solid, $gray-300);
        @include flexbox(flex, space-between, null, center, center, null);
        .topology_title {
          color: $primary;
        }
      }
      .sidebar-body {
        @include padding-value(10, 5, 10, 5);
      }
    }
    .ng-sidebar__content {
      button {
        @include position_value(absolute, 45%, null, null, 0px);
        @include background(null, $primary, null, null, null);
      }
      .detail-sidebar {
        @include flexbox(inline-block, null, null, null, null, null);
        @include position_value(relative, null, null, null, null);
        animation: push 0.5s infinite linear;
      }
    }
    @keyframes push {
      0% {
        right: 0;
      }
      50% {
        right: -0.2em;
      }
      70% {
        right: -0.3em;
      }
      100% {
        right: 0;
      }
    }
  }
  /** 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;
  }
}

.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;
  }
}