control-panel/cp-frontend/src/app/pages/service-list/components/services-table/services-table.component.scss

@import 'src/app/styles/colors';
@import 'src/app/styles/font';
@import 'src/app/styles/variables';

.employee-table-wrapper {
  padding-left: 0;
  padding-right: 0;
  margin: 16px 16px 32px 16px;
  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;

  &__header {
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    @media (max-width: $small) {
      padding: 0 16px;
    }
  }

  &__title {
    margin: 0;
  }

  &__search {
    display: flex;
    align-items: center;
  }

  &__icon-wrapper {
    height: 46px;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__icon {
    color: inherit;
  }

  &__search-input {
    font-size: $fs-normal;
    height: 32px;
    border: 0;
    border-bottom: 1px solid $grey;
    outline: none;

    @media (max-width: $small) {
      width: 150px;
    }

    &:focus {
      border-bottom: 2px solid $blue;
    }
  }

  &__button {
    box-shadow: none;
    background-color: inherit;
    width: 46px;
    height: 46px;
    color: $grey;

    &:hover {
      background-color: $black-08;
      color: $blue;
    }
  }
}

.employee-table {
  &__content {
    @media (max-width: $small) {
      overflow-x: scroll;
    }
  }

  &__table {
    width: 100%;
    box-shadow: none;

    @media (max-width: $small) {
      width: 200%;
    }
  }

  &__table-checkbox {
    width: 32px;
    padding-left: 24px;
  }

  &__table-header {
    font-size: $fs-small;
  }

  &__table-body {
    font-size: $fs-small;
  }
}