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: #ccc !important;
  45       box-shadow: none !important;
  46     }
  47   }
  48
  49   .ng-input > input {
  50     color: pvar(--inputForegroundColor) !important;
  51   }
  52
  53   .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
  54     &:not(.ng-option-marked, .ng-option-selected) {
  55       color: pvar(--mainForegroundColor);
  56       background-color: pvar(--mainBackgroundColor);
  57     }
  58   }
  59
  60   .ng-select-container {
  61     background-color: pvar(--inputBackgroundColor);
  62   }
  63
  64   .ng-arrow-wrapper {
  65     @include padding-right(12px);
  66   }
  67
  68   .ng-arrow {
  69     border-color: #000 transparent transparent !important;
  70   }
  71
  72   &.ng-select-opened .ng-arrow {
  73     border-color: transparent transparent #000 !important;
  74   }
  75
  76   &.ng-select-single .ng-value-container .ng-value {
  77     color: pvar(--inputForegroundColor);
  78
  79     .ng-value-label {
  80       display: flex;
  81       align-items: center;
  82     }
  83   }
  84
  85   &.ng-select-multiple .ng-select-container .ng-value-container {
  86     @include padding-left(12px);
  87
  88     .ng-value {
  89       @include margin-left(12px);
  90
  91       background-color: pvar(--mainColorLightest);
  92
  93       .ng-value-icon {
  94         border: 0 !important;
  95       }
  96     }
  97   }
  98 }