openecomp-ui/resources/scss/onboarding.scss

   1 .dox-ui {
   2   @import "bootstrap";
   3   @import "~react-select/dist/react-select.min.css";
   4   @import "~react-datepicker/dist/react-datepicker.min.css";
   5
   6   @import "common";
   7   @import "components";
   8   @import "modules";
   9
  10   &.dox-ui-punch-out {
  11     background-color: $content-background-color;
  12     &.dox-ui-punch-out-full-page {
  13       position: absolute;
  14       top: 0;
  15       bottom: 0;
  16       left: 0;
  17       right: 0;
  18       overflow-y: auto;
  19     }
  20   }
  21 }
  22
  23 /* Out of namespace context for datepicker */
  24 div[data-reactroot].customized-date-picker-calendar {
  25   @import "common/variables";
  26   @import "common/typography";
  27   border-color: $light-gray;
  28   margin-top: -8px;
  29         color: $black;
  30   .react-datepicker__triangle {
  31       margin-top: 0px;
  32   }
  33   .react-datepicker__navigation--previous::before, .react-datepicker__navigation--next::before {
  34     width: 8px;
  35     height: 8px;
  36     display: inline-block;
  37     position: absolute;
  38     top: -4px;
  39   }
  40   .react-datepicker__navigation--previous::before {
  41     left: 0;
  42     content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg);
  43   }
  44   .react-datepicker__navigation--next::before {
  45     right: 0;
  46     content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg);
  47   }
  48
  49   .react-datepicker__navigation--previous, .react-datepicker__navigation--next {
  50       border: none;
  51   }
  52
  53
  54   .react-datepicker__month-container {
  55                 .react-datepicker__header {
  56                         background-color: $background-gray;
  57       border-bottom: none;
  58       .react-datepicker__current-month {
  59         @extend .body-1-semibold;
  60         background-color: $background-gray;
  61         margin-bottom: 10px;
  62       }
  63       .react-datepicker__day-names {
  64         @extend .body-1;
  65         background-color: $white;
  66       }
  67                 }
  68     .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected {
  69       @extend .body-1;
  70       background-color: $blue;
  71                         color: $white;
  72     }
  73     .react-datepicker__day {
  74                         border-radius: 0px;
  75                         margin: 0;
  76                         flex: 1;
  77       @extend .body-1;
  78     }
  79
  80                 .react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
  81                         background-color: $tlv-hover;
  82                         color: $black;
  83                         &.react-datepicker__day--selected, &.react-datepicker__day--keyboard-selected, &.react-datepicker__day--range-start, &.react-datepicker__day--range-end  {
  84                                 background-color: $blue;
  85                                 color: $white;
  86                         }
  87                         &.react-datepicker__day--selecting-range-start, &.react-datepicker__day--selecting-range-end {
  88                                 background-color: lighten($blue, 40%);
  89                                 color: $black;
  90                         }
  91                         &.react-datepicker__day--selecting-range-start.react-datepicker__day--range-start,
  92                         &.react-datepicker__day--selecting-range-end.react-datepicker__day--range-end,
  93                         &.react-datepicker__day--selecting-range-start.react-datepicker__day--keyboard-selected {
  94                                 background-color: $blue;
  95                                 color: $white;
  96                         }
  97                 }
  98
  99                 .react-datepicker__week {
 100                         display: flex;
 101     }
 102         }
 103 }
 104
 105 /* Out of namespace context for tooltips */
 106 div[data-reactroot].tooltip {
 107   @import "common/variables";
 108   @import "common/typography";
 109
 110   &.in {
 111         opacity: 1;
 112   }
 113   &.validation-error-message {
 114     &.bottom {
 115       .tooltip-arrow {
 116       border-bottom-color: $red !important;
 117       }
 118     }
 119     &.left {
 120       .tooltip-arrow {
 121         border-left-color: $red !important;
 122       }
 123     }
 124     &.right {
 125       .tooltip-arrow {
 126         border-right-color: $red !important;
 127       }
 128     }
 129     &.top {
 130       .tooltip-arrow {
 131         border-top-color: $red !important;
 132       }
 133     }
 134   }
 135   &.bottom {
 136     .tooltip-arrow {
 137       border-bottom-color: $dark-gray !important;
 138     }
 139   }
 140   &.top {
 141     .tooltip-arrow {
 142       border-top-color: $dark-gray !important;
 143     }
 144   }
 145   &.right {
 146     .tooltip-arrow {
 147       border-right-color: $dark-gray !important;
 148     }
 149   }
 150   &.left {
 151     .tooltip-arrow {
 152       border-left-color: $dark-gray !important;
 153     }
 154   }
 155   .tooltip-inner {
 156     @extend .body-1;
 157     max-width: 100%;
 158     background-color: $dark-gray;
 159     padding: 6px 9px;
 160     &:first-letter {
 161       text-transform: capitalize;
 162     }
 163   }
 164
 165   // activity log tooltip
 166   &.activity-log-message-tooltip {
 167           @include base-font-regular;
 168     font-size: $body-font-2;
 169     .message-block {
 170       text-align: left;
 171       padding: 3px 12px;
 172     }
 173   }
 174   // manage permisions modal
 175   &.manage-permissions-owner-tooltip {
 176     .tooltip-inner {
 177       width: 400px;
 178     }
 179   }
 180   // WS/Catalog Tile
 181   &.tile-super-info {
 182     .tooltip-inner {
 183       font-size: $body-font-3;
 184     }
 185   }
 186   //dependency table error tooltip
 187   &.select-action-table-error-tooltip{
 188     @include base-font-regular;
 189     margin-right: 5px;
 190     font-size: $body-font-2;
 191     .message-block {
 192       text-align: left;
 193       padding: 3px 12px;
 194     }
 195     .tooltip-arrow {
 196            border-bottom-color: $red !important;
 197           }
 198
 199     .tooltip-inner {
 200       background-color: $red;
 201       padding: 6px 8px;
 202       font-size: $body-font-2;
 203     }
 204   }
 205
 206   // for read-only mode, vendor description in VLM overview
 207   &.vendor-description-tooltip {
 208     .tooltip-inner {
 209       max-width: 600px;
 210     }
 211   }
 212 }
 213
 214 /* Out of namespace context for notifications */
 215 .onboarding-notifications-container {
 216   position: absolute;
 217   &.position-top-right {
 218     right: 30px;
 219     top: 50px;
 220   }
 221 }
 222
 223
 224 .onboarding-loader {
 225   .onboarding-loader-backdrop {
 226     @import "common/variables";
 227     top: 0;
 228     right: 0;
 229     bottom: 0;
 230     left: 0;
 231     position: absolute;
 232     background-color: $transparent-black;
 233   }
 234 }