linagora-rse/frontend/js/modules/search/provider-select/search-provider-select.less

Linagora RSE

@search-input-color-focus : rgba(51, 51, 51, 0.69);
@search-input-background-color-focus : rgba(255, 255, 255, 1);
@search-input-background-color-hover : rgba(255, 255, 255, 0.26);
@search-input-background-color : rgba(255, 255, 255, 0.15);

esn-search-provider-select {
  md-select {
    width: 64px;
    display: inline-block;
    outline: 0;
    border: 0;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    background-color: @search-input-background-color;
    color: @textPrimaryColor;
    font-size: 14px;
    margin: 0 1px;

    .md-select-value {
      padding: 0;
      border: none;
      height: 36px;

      .md-text img {
        display: none;
      }
    }

    &:hover{
      background-color: @black-alpha-10;
      transition: @transition-btn-link;
    }

    .md-select-icon {
      color: @textPrimaryColor;
    }

    &:not([disabled]):focus .md-select-value {
      color: @textPrimaryColor;
      border:none;
    }

    .md-no-underline .md-select-value {
      min-width: 78px;
      max-width: 78px;
      height: 36px;
      padding: 0 2px;
    }
  }

  esn-search-provider-select.focus {
    md-select, .md-select-icon {
      color: @search-input-color-focus;
      transition: color 100ms ease-in;
    }
  }
}

md-select-menu {
  md-content {
    md-option {
      .option-icon {
        height: 28px;
        width: 28px;
        margin-right: 5px;
      }

      &[selected] {
        color: @primaryColor;
      }
    }
  }
}

.md-select-value .md-select-icon {
  width: 11px;
  margin: 0 2px;
}

@media (min-width: @screen-md-min) {
  md-select-menu {
    md-content {
      md-option {
        min-height: 32px;
        height: 32px;
        line-height: 32px;
        font-family: roboto;
        font-size: 13px;

        &.option-all {
          font-weight: 500;
          padding-left: 20px;
        }

        &:hover  {
          color: @primaryColor;
        }
      }
    }
  }
}

@media (min-width: @screen-md-min) and (max-width: @screen-xl-min) {
  esn-search-provider-select {
    md-select {
      width: 90px;
    }

   .md-no-underline .md-select-value {
      padding: 0 5px;
      height: 38px;
    }
  }
}

@media (min-width: @screen-xl-min) {
  esn-search-provider-select {
    md-select {
      width: 90px;
    }

    .md-no-underline .md-select-value {
      padding: 0 5px;
      height: 42px;
    }
  }
}