openecomp-ui/resources/scss/onboarding.scss

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