openecomp-ui/resources/scss/onboarding.scss

   1 .dox-ui,
   2 .onap-sdc-portal {
   3     @import 'bootstrap';
   4     @import '~react-select/dist/react-select.min.css';
   5     @import '~react-datepicker/dist/react-datepicker.min.css';
   6
   7     @import 'common';
   8     @import 'components';
   9     @import 'modules';
  10
  11     .sdc-alert__header,
  12     .sdc-error__header,
  13     .sdc-info__header {
  14         box-sizing: content-box;
  15     }
  16     &.dox-ui-punch-out {
  17         background-color: $content-background-color;
  18         &.dox-ui-punch-out-full-page {
  19             position: absolute;
  20             top: 0;
  21             bottom: 0;
  22             left: 0;
  23             right: 0;
  24             overflow-y: auto;
  25         }
  26     }
  27 }
  28
  29 /* Out of namespace context for tooltips */
  30 div[data-onboardingroot].tooltip {
  31     @import 'common/variables';
  32     @import 'common/typography';
  33
  34     &.in {
  35         opacity: 1;
  36     }
  37     &.validation-error-message {
  38         &.bottom {
  39             .tooltip-arrow {
  40                 border-bottom-color: $red !important;
  41             }
  42         }
  43         &.left {
  44             .tooltip-arrow {
  45                 border-left-color: $red !important;
  46             }
  47         }
  48         &.right {
  49             .tooltip-arrow {
  50                 border-right-color: $red !important;
  51             }
  52         }
  53         &.top {
  54             .tooltip-arrow {
  55                 border-top-color: $red !important;
  56             }
  57         }
  58     }
  59     &.bottom {
  60         .tooltip-arrow {
  61             border-bottom-color: $dark-gray !important;
  62         }
  63     }
  64     &.top {
  65         .tooltip-arrow {
  66             border-top-color: $dark-gray !important;
  67         }
  68     }
  69     &.right {
  70         .tooltip-arrow {
  71             border-right-color: $dark-gray !important;
  72         }
  73     }
  74     &.left {
  75         .tooltip-arrow {
  76             border-left-color: $dark-gray !important;
  77         }
  78     }
  79     .tooltip-inner {
  80         @extend .body-1;
  81         max-width: 100%;
  82         background-color: $dark-gray;
  83         padding: 6px 9px;
  84         &:first-letter {
  85             text-transform: capitalize;
  86         }
  87     }
  88
  89     // activity log tooltip
  90     &.activity-log-message-tooltip {
  91         @include base-font-regular;
  92         font-size: $body-font-2;
  93         .message-block {
  94             text-align: left;
  95             padding: 3px 12px;
  96         }
  97     }
  98     // manage permisions modal
  99     &.manage-permissions-owner-tooltip {
 100         .tooltip-inner {
 101             width: 400px;
 102         }
 103     }
 104     // WS/Catalog Tile
 105     &.tile-super-info {
 106         .tooltip-inner {
 107             font-size: $body-font-3;
 108         }
 109     }
 110     //dependency table error tooltip
 111     &.select-action-table-error-tooltip {
 112         @include base-font-regular;
 113         margin-right: 5px;
 114         font-size: $body-font-2;
 115         .message-block {
 116             text-align: left;
 117             padding: 3px 12px;
 118         }
 119         .tooltip-arrow {
 120             border-bottom-color: $red !important;
 121         }
 122
 123         .tooltip-inner {
 124             background-color: $red;
 125             padding: 6px 8px;
 126             font-size: $body-font-2;
 127         }
 128     }
 129
 130     // for read-only mode, vendor description in VLM overview
 131     &.vendor-description-tooltip {
 132         .tooltip-inner {
 133             max-width: 600px;
 134         }
 135     }
 136 }
 137
 138 /* Out of namespace context for notifications */
 139 .onboarding-notifications-container {
 140     position: absolute;
 141     &.position-top-right {
 142         right: 30px;
 143         top: 50px;
 144     }
 145 }
 146
 147 .onboarding-loader {
 148     .onboarding-loader-backdrop {
 149         @import 'common/variables';
 150         top: 0;
 151         right: 0;
 152         bottom: 0;
 153         left: 0;
 154         position: absolute;
 155         background-color: $transparent-black;
 156     }
 157 }