client/src/sass/ng-select.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 $ng-select-highlight: pvar(--mainColor);
   5 $ng-select-primary-text: pvar(--mainForegroundColor);
   6 // $ng-select-disabled-text: #f9f9f9 !default;
   7 $ng-select-border: $input-border-color;
   8 // $ng-select-border-radius: 4px !default;
   9 $ng-select-bg: pvar(--mainBackgroundColor);
  10
  11 // Cannot use a CSS variable as the default them use darken on this variable
  12 $ng-select-selected: lighten($main-color, 40%);
  13 // $ng-select-selected-text: $ng-select-primary-text !default;
  14
  15 $ng-select-marked: pvar(--mainColorLightest);
  16 // $ng-select-marked-text: $ng-select-primary-text !default;
  17
  18 $ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
  19 $ng-select-placeholder: pvar(--greyForegroundColor);
  20 $ng-select-height: 30px;
  21 $ng-select-value-padding-left: 15px;
  22 $ng-select-value-font-size: $form-input-font-size;
  23 // $ng-select-value-text: $ng-select-primary-text !default;
  24
  25 // $ng-select-dropdown-bg: $ng-select-bg !default;
  26 // $ng-select-dropdown-border: $ng-select-border !default;
  27 // $ng-select-dropdown-optgroup-text: rgba(0, 0, 0, 0.54) !default;
  28 // $ng-select-dropdown-optgroup-marked: $ng-select-dropdown-optgroup-text !default;
  29 // $ng-select-dropdown-option-bg: $ng-select-dropdown-bg !default;
  30 // $ng-select-dropdown-option-text: rgba(0, 0, 0, 0.87) !default;
  31 $ng-select-dropdown-option-disabled: pvar(--greyForegroundColor);
  32
  33 $ng-select-input-text: pvar(--mainForegroundColor);
  34
  35 @import '@ng-select/ng-select/scss/default.theme';
  36
  37 .ng-select {
  38   @include rounded-line-height-1-5($ng-select-value-font-size);
  39
  40   font-size: $ng-select-value-font-size;
  41
  42   &.ng-select-focused {
  43     &:not(.ng-select-opened) > .ng-select-container {
  44       border-color: $ng-select-border !important;
  45     }
  46   }
  47
  48   .ng-input > input {
  49     color: pvar(--inputForegroundColor) !important;
  50   }
  51
  52   .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
  53     &:not(.ng-option-marked, .ng-option-selected) {
  54       color: pvar(--mainForegroundColor);
  55       background-color: pvar(--mainBackgroundColor);
  56     }
  57   }
  58
  59   .ng-select-container {
  60     background-color: pvar(--inputBackgroundColor);
  61   }
  62
  63   .ng-arrow-wrapper {
  64     @include padding-right(12px);
  65   }
  66
  67   .ng-arrow {
  68     border-color: #000 transparent transparent !important;
  69   }
  70
  71   &.ng-select-opened .ng-arrow {
  72     border-color: transparent transparent #000 !important;
  73   }
  74
  75   &.ng-select-single .ng-value-container .ng-value {
  76     color: pvar(--inputForegroundColor);
  77
  78     .ng-value-label {
  79       display: flex;
  80       align-items: center;
  81     }
  82   }
  83
  84   &.ng-select-multiple .ng-select-container .ng-value-container {
  85     @include padding-left(12px);
  86
  87     .ng-value {
  88       @include margin-left(12px);
  89
  90       background-color: pvar(--mainColorLightest);
  91
  92       .ng-value-icon {
  93         border: 0 !important;
  94       }
  95     }
  96   }
  97 }