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-radius: 2px;
  16   border-color: $light-gray;
  17   margin-top: -8px;
  18   .react-datepicker__triangle {
  19       margin-top: 0px;
  20   }
  21   .react-datepicker__navigation--previous {
  22       border: none;
  23       width: 15px;
  24       height: 15px;
  25       margin-top: 2px;
  26       content: url(../images/angle-left.svg);
  27   }
  28   .react-datepicker__navigation--next {
  29       border: none;
  30       width: 15px;
  31       height: 15px;
  32       margin-top: 2px;
  33       content: url(../images/angle-right.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 .heading-5;
  41         background-color: $background-gray;
  42         margin-bottom: 10px;
  43       }
  44       .react-datepicker__day-names {
  45         @extend .heading-5;
  46         background-color: $white;
  47       }
  48                 }
  49     .react-datepicker__day--selected {
  50       @extend .heading-5;
  51       border-radius: 20px;
  52       background-color: $blue;
  53       &:hover {
  54         background-color: $dark-blue;
  55       }
  56     }
  57     .react-datepicker__day {
  58       @extend .heading-5;
  59       &:hover {
  60         border-radius: 20px;
  61       }
  62     }
  63         }
  64 }
  65
  66 /* Out of namespace context for tooltips */
  67 div[data-reactroot].tooltip {
  68   @import "common/variables";
  69   @import "common/typography";
  70
  71   &.in {
  72         opacity: 1;
  73   }
  74   &.validation-error-message {
  75     &.bottom {
  76       .tooltip-arrow {
  77       border-bottom-color: $red !important;
  78       }
  79     }
  80     &.left {
  81       .tooltip-arrow {
  82         border-left-color: $red !important;
  83       }
  84     }
  85     &.right {
  86       .tooltip-arrow {
  87         border-right-color: $red !important;
  88       }
  89     }
  90     &.top {
  91       .tooltip-arrow {
  92         border-top-color: $red !important;
  93       }
  94     }
  95   }
  96   &.bottom {
  97         .tooltip-arrow {
  98           border-bottom-color: $dark-gray !important;
  99         }
 100   }
 101   &.top {
 102         .tooltip-arrow {
 103           border-top-color: $dark-gray !important;
 104         }
 105   }
 106   .tooltip-inner {
 107         max-width: 100%;
 108         background-color: $dark-gray;
 109   }
 110
 111   // activity log tooltip
 112   &.activity-log-message-tooltip {
 113         @include base-font-regular;
 114         font-size: $body-font-2;
 115         .message-block {
 116           text-align: left;
 117           padding: 3px 12px;
 118         }
 119   }
 120   //dependency table error tooltip
 121   &.select-action-table-error-tooltip{
 122     @include base-font-regular;
 123     margin-right: 5px;
 124     font-size: $body-font-2;
 125     .message-block {
 126       text-align: left;
 127       padding: 3px 12px;
 128     }
 129     .tooltip-arrow {
 130            border-bottom-color: $red !important;
 131           }
 132
 133     .tooltip-inner {
 134       background-color: $red;
 135       padding: 6px 8px;
 136       font-size: $body-font-2;
 137     }
 138   }
 139 }