SU-SWS/stanford_profile_helper

@charset 'UTF-8';

@import "./stanford_person.config";

// Header spacing for Person
.heading-h1,
.page-title {
  @include modular-spacing('margin', 6 null 5);
}

.flex-container {
  .main-region {
    @include grid-media-min(xl) {
      @include modular-spacing('padding-left', 2);
    }
  }
}

// Grid set up
.stanford-people-grid,
.taxonomy-term-pages.people-terms {
  .su-list-unstyled {

    // Short title
    .views-field-su-person-short-title {
      @include small-paragraph;
    }
  }

  // Load more set up
  .views-infinite-scroll-content-wrapper {
    &,
    + .js-pager__items {
      @include modular-spacing('margin-bottom', 8);
    }

    > div {
      margin-bottom: 45px;

      &:last-child {
        margin-bottom:0;
      }
    }
  }

  // Name field
  .views-field-title {
    h2 {
      @include type-e;

      font-weight: $su-font-semi-bold;
      margin-bottom: 0;
      line-height: 1.4;
    }

    h3 {
      @include type-e;

      font-weight: $su-font-semi-bold;
      margin-bottom: 0;
    }

    a {
      @include type-d;

      color: $su-color-bright-red;
      text-decoration: none;
      word-break: break-word;
      word-wrap: break-word;

      &:focus,
      &:hover {
        color: $su-color-black;
        text-decoration: underline;
      }
    }

    .field-media-image {
      @include responsive-spacing('padding-bottom', 0);
    }
  }
}

// filtered People grid.
.taxonomy-term-pages.people-terms {
  .su-list-unstyled {
    padding-bottom: 45px;
  }

  // Load more set up
  .views-infinite-scroll-content-wrapper {
    &,
    + .js-pager__items {
      @include modular-spacing('margin-bottom', 6);
    }
  }
}

// Edit this person node link
.su-people-edit-article,
.views-field-edit-node {

  a {
    @include modular-spacing('margin-top', 0);
    @include button-secondary;
    text-align: right;
  }
}

.paragraph {
  .stanford-people-grid {
    .views-row {

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

// Removing extra space for a Person list in a paragraph
.paragraph {
  .stanford-people-grid {
    .views-infinite-scroll-content-wrapper {
      margin-bottom: 0;
    }

    .views-row {
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}

// Collapsible menu
// Changing the layout for the filtered pages.
@include grid-media-max('lg') {
  .menu--stanford-person-type {
    @include modular-spacing('margin-bottom', 4);

    flex: auto;
    max-width: 100%;
  }
}

// Filter menu
.menu--stanford-person-type  {
  @include modular-spacing('padding', 3);

  border: 1px solid $su-color-cool-grey-25;

  @include grid-media-min('xl') {
    @include modular-spacing('margin-bottom', 8);
  }

  .person-category__collapsable-menu {
    @include type-e;
    @include padding(0);

    background-color: transparent;
    color: $su-color-bright-blue;
    cursor: pointer;
    display: inline-block;
    font-weight: $su-font-semi-bold;
    text-align: left;
    text-decoration: none;
    width: 100%;

    @include grid-media('xl') {
      @include modular-spacing('margin-bottom', 2);
    }

    &.show {
      @include modular-spacing('margin-bottom', 2);

      @include grid-media('xl') {
        margin-bottom: 0;

        & + .menu {
          & > li {
            &.menu-item {
              &:last-of-type {
                padding-bottom: 0;
              }
            }
          }
        }
      }
    }

    &:hover,
    &:focus {
      text-decoration: underline;
    }

    .su-link--jump {
      float: right;
    }

    @include grid-media-max('lg') {
      &::before {
        @include small-paragraph;
        @include padding(null 15px null null);

        color: $su-color-bright-blue;
        content: "\f1de"; // Placeholder Icon until SU ones in place.
        font-family: 'Font Awesome 5 Free';
        font-weight: $su-font-semi-bold; // Need this for the new version of FA. Will go away later.
      }
    }
  }

  .menu {
    @include margin(0);
    @include padding(0);

    .menu-item {
      @include modular-spacing('padding-bottom', 2);
      @include modular-spacing('padding-left', 0);
      @include small-paragraph;

      a {
        color: $su-color-black;
        text-decoration: none;

        &:hover,
        &:focus {
          text-decoration: underline;
        }
      }
    }

    & > li {
      &.menu-item {
        &:last-of-type {
          padding-bottom: 0;
        }
      }
    }

    .menu-item--active-trail {
      &::before {
        @include small-paragraph;

        color: $su-color-bright-blue;
        content: "\f00c"; ///* Need to switch to the SU icons.
        font-family: 'Font Awesome 5 Free';
        font-weight: $su-font-semi-bold; // Need this for the new version of FA. Will go away later.
        left: 35px;
        position: absolute;
      }

      .is-active {
        color: $su-color-bright-blue;
      }
    }
  }

  // Filter open/close for xs-lg
  @include grid-media-max('lg') {
    .menu {
      display: none;
    }

    .person-category__collapsable-menu {
      &.show {
        & + .menu {
          display: block;
        }
      }
    }
  }

  // Filter open/close for xl
  @include grid-media('xl') {
    .menu {
      display: block;
    }

    .person-category__collapsable-menu {
      &.show {
        + .menu {
          display: none;
        }
      }
    }
  }
}