MetaPhase-Consulting/State-TalentMAP

View on GitHub
src/sass/_panelSearch.scss

Summary

Maintainability
Test Coverage
.panel-meeting-search-page {
  .position-search--filters--panel-m {
    .react-daterange-picker__clear-button {
      padding: 2px 4px;
    }
    .react-daterange-picker__clear-button:hover {
      background-color: $color-white;
    }
    .react-daterange-picker__calendar--open {
      z-index: $daterange-z;
    }

    .react-daterange-picker {
      align-items: center;
      background: $color-white;
      font-size: 13px;
      height: 26px;
      width: 240px;
      margin: 7px 0;

      .react-daterange-picker__wrapper {
        border: none;
        width: 220px;
      }

      .react-daterange-picker__inputGroup {
        align-items: center;
        display: flex;
        justify-content: center;
      }

      .react-daterange-picker__range-divider,
      .react-daterange-picker__inputGroup__leadingZero,
      .react-date-picker__inputGroup__divider {
        color: $color-black;
      }
    }
  }
}

.panel-results-controls {
  display: flex;
  align-items: center;

  .panel-sort {
    width: 165px;
  }


  div:first-child {
    margin-right: 10px;
  }
}

.panel-select-all-container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 35px 10px 35px;


  .select-all {
    input {
      align-items: center !important;
    }
  }

  .view-all {
    .icon {
      padding-right: 10px;
    }

    .disabled-link {
      pointer-events: none;
      color: gray;
      cursor: not-allowed;
      text-decoration: none;
    }
  }
}

.panel-search-lower-section {
  padding: 0 35px 20px;
  position: relative;
}

.panel-meeting-row {
  border: 1px solid $color-gray-light;
  border-left: 11px solid $primary-blue;
  box-shadow: rgb(0 0 0 / 15%) 3px 2px 10px 1px;
  margin-bottom: 10px;
  margin-left: 0;
  padding: 15px 20px;

  &.highlighted {
    box-shadow: 2px 0 8px rgba($primary-alt-dark, 0.5);
  }

  .main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .button-box {
    width: 75px;
    line-height: 25px;
  }

  @media screen and (max-width: 1200px) {
    flex-wrap: wrap;

    .button-box-container {
      order: 1;

      .link-button-wrapper {
        margin-right: 10px;
      }
    }
  }
}