Styles for Dropdown Component (SCSS)

dropdown.component.scss

@import "../../app/variables";

:host {
  display: block;
  min-width: 8rem;

  select,
  ng-select ::ng-deep .ng-select-container {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: $text-color;
    border: 2px solid transparent;
    border-radius: $global-border-radius;
    background-color: $form-field-background-color;

    .ng-value-container .ng-input > input {
      padding: 0 0.75rem;
    }
  }

  &.ng-invalid.ng-touched {
    select,
    ng-select {
      border: 2px solid $red;
    }
  }
}

:host ::ng-deep ng-select {
  &.ng-select-focused:not(.ng-select-opened) .ng-select-container {
    box-shadow: 0 0 0 2px $blue-light;
  }

  .ng-placeholder {
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    color: $text-color-light;
  }
  .ng-has-value .ng-placeholder {
    display: none;
  }

  .ng-value {
    display: flex;
    align-items: center;
  }

  .ng-arrow-wrapper {
    margin-left: 0.4rem;
    display: flex;
    align-items: center;

    .ng-arrow {
      width: 10px;
      height: 6px;
      background: no-repeat url("/assets/images/dropdown-chevron.svg");
    }
  }
  &.ng-select-opened {
    .ng-arrow-wrapper .ng-arrow {
      transform: rotate(180deg);
    }
  }

  .ng-clear-wrapper {
    display: flex;
    align-items: center;
    width: auto;
  }

  .ng-dropdown-panel {
    left: 0;
    background-color: $white;
    border: $border;

    .ng-option {
      padding: 0.5rem 1rem;
      border: 1px solid transparent;

      &.ng-option-selected {
        background-color: $blue-light;
        color: $white;
      }

      &.ng-option-marked {
        border-color: $blue;
      }
    }
  }

  &.ng-select-multiple {
    .ng-value {
      display: flex;
      align-items: center;
      margin: 0.1rem 0.15rem 0.1rem 0;
      padding: 0 0.3rem;
      background-color: $blue-light;
      color: $white;
      border-radius: $global-border-radius;

      &:last-of-type {
        margin-right: 0;
      }

      .ng-value-icon {
        order: 2;
        margin-left: 0.3rem;
      }
    }
  }
}