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
  11 /* Out of namespace context for datepicker */
  12 div[data-reactroot].customized-date-picker-calendar {
  13   @import "common/variables";
  14   @import "common/typography";
  15   border-color: $light-gray;
  16   margin-top: -8px;
  17         color: $black;
  18   .react-datepicker__triangle {
  19       margin-top: 0px;
  20   }
  21   .react-datepicker__navigation--previous {
  22       border: none;
  23       width: 12px;
  24       height: 12px;
  25       margin-top: 2px;
  26       content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg);
  27   }
  28   .react-datepicker__navigation--next {
  29       border: none;
  30       width: 12px;
  31       height: 12px;
  32       margin-top: 2px;
  33       content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg);
  34   }
  35   .react-datepicker__month-container {
  36                 .react-datepicker__header {
  37                         background-color: $background-gray;
  38       border-bottom: none;
  39       .react-datepicker__current-month {
  40         @extend .body-1-semibold;
  41         background-color: $background-gray;
  42         margin-bottom: 10px;
  43       }
  44       .react-datepicker__day-names {
  45         @extend .body-1;
  46         background-color: $white;
  47       }
  48                 }
  49     .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected {
  50       @extend .body-1;
  51       background-color: $blue;
  52                         color: $white;
  53     }
  54     .react-datepicker__day {
  55                         border-radius: 0px;
  56                         margin: 0;
  57                         flex: 1;
  58       @extend .body-1;
  59     }
  60
  61                 .react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
  62                         background-color: $tlv-hover;
  63                         color: $black;
  64                         &.react-datepicker__day--selected, &.react-datepicker__day--keyboard-selected, &.react-datepicker__day--range-start, &.react-datepicker__day--range-end  {
  65                                 background-color: $blue;
  66                                 color: $white;
  67                         }
  68                         &.react-datepicker__day--selecting-range-start, &.react-datepicker__day--selecting-range-end {
  69                                 background-color: lighten($blue, 40%);
  70                                 color: $black;
  71                         }
  72                         &.react-datepicker__day--selecting-range-start.react-datepicker__day--range-start,
  73                         &.react-datepicker__day--selecting-range-end.react-datepicker__day--range-end,
  74                         &.react-datepicker__day--selecting-range-start.react-datepicker__day--keyboard-selected {
  75                                 background-color: $blue;
  76                                 color: $white;
  77                         }
  78                 }
  79
  80                 .react-datepicker__week {
  81                         display: flex;
  82     }
  83         }
  84 }
  85
  86 /* Out of namespace context for tooltips */
  87 div[data-reactroot].tooltip {
  88   @import "common/variables";
  89   @import "common/typography";
  90
  91   &.in {
  92         opacity: 1;
  93   }
  94   &.validation-error-message {
  95     &.bottom {
  96       .tooltip-arrow {
  97       border-bottom-color: $red !important;
  98       }
  99     }
 100     &.left {
 101       .tooltip-arrow {
 102         border-left-color: $red !important;
 103       }
 104     }
 105     &.right {
 106       .tooltip-arrow {
 107         border-right-color: $red !important;
 108       }
 109     }
 110     &.top {
 111       .tooltip-arrow {
 112         border-top-color: $red !important;
 113       }
 114     }
 115   }
 116   &.bottom {
 117     .tooltip-arrow {
 118       border-bottom-color: $dark-gray !important;
 119     }
 120   }
 121   &.top {
 122     .tooltip-arrow {
 123       border-top-color: $dark-gray !important;
 124     }
 125   }
 126   .tooltip-inner {
 127     @extend .body-1;
 128     max-width: 100%;
 129     background-color: $dark-gray;
 130     padding: 6px 9px;
 131     &:first-letter {
 132       text-transform: capitalize;
 133     }
 134   }
 135
 136   // activity log tooltip
 137   &.activity-log-message-tooltip {
 138           @include base-font-regular;
 139     font-size: $body-font-2;
 140     .message-block {
 141       text-align: left;
 142       padding: 3px 12px;
 143     }
 144   }
 145   //dependency table error tooltip
 146   &.select-action-table-error-tooltip{
 147     @include base-font-regular;
 148     margin-right: 5px;
 149     font-size: $body-font-2;
 150     .message-block {
 151       text-align: left;
 152       padding: 3px 12px;
 153     }
 154     .tooltip-arrow {
 155            border-bottom-color: $red !important;
 156           }
 157
 158     .tooltip-inner {
 159       background-color: $red;
 160       padding: 6px 8px;
 161       font-size: $body-font-2;
 162     }
 163   }
 164
 165   // for read-only mode, vendor description in VLM overview
 166   &.vendor-description-tooltip {
 167     .tooltip-inner {
 168       max-width: 600px;
 169     }
 170   }
 171 }