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