SU-SWS/stanford_profile_helper

View on GitHub
modules/stanford_profile_styles/lib/scss/component/node/stanford_page.scss

Summary

Maintainability
Test Coverage
@charset 'UTF-8';
@import '../../config';

//
// Custom Styles For Stanford Page Content Type.
//
.su-page-components {
  // New layout paragraphs styles.
  .paragraph--type--stanford-entity,
  .paragraph--type--stanford-card,
  .paragraph--type--stanford-wysiwyg,
  .paragraph--type--stanford-media-caption,
  .paragraph--type--stanford-cta-list,
  .paragraph--type--stanford-stories,
  .paragraph--type--stanford-lists,
  .paragraph--type--stanford-gallery,
  .ptype-stanford-card,
  .ptype-stanford-wysiwyg,
  .ptype-stanford-media-caption,
  .ptype-stanford-cta-list,
  .ptype-stanford-stories,
  .ptype-stanford-image-cta,
  .ptype-stanford-lists,
  .ptype-stanford-entity,
  .ptype-stanford-gallery{
    margin: 0 auto;
    width: 100%;
    max-width: calc(100vw - #{map-get($su-screen-margins, 'xs') * 2});

    @include grid-media('sm') {
      max-width: calc(100vw - #{map-get($su-screen-margins, 'sm') * 2});
    }

    @include grid-media('md') {
      max-width: calc(100vw - #{map-get($su-screen-margins, 'md') * 2});
    }

    @include grid-media('lg') {
      max-width: 880px;
    }

    @include grid-media('xl') {
      max-width: 980px;
    }
  }


  // Old react paragraphs styles.
  div[data-react-columns="12"] {
    &.ptype-stanford-card,
    &.ptype-stanford-wysiwyg,
    &.ptype-stanford-media-caption,
    &.ptype-stanford-cta-list,
    &.ptype-stanford-stories,
    &.ptype-stanford-image-cta,
    &.ptype-stanford-lists,
    &.ptype-stanford-entity,
    &.ptype-stanford-gallery {
      max-width: 980px;

      @include grid-media-only('lg') {
        margin-left: auto;
        margin-right: auto;
        max-width: 880px;
      }
    }

    &.ptype-stanford-card {
      img {
        width: 100%;
      }
    }
  }
}

.jumpstart-ui {
  &--three-column,
  &--two-column {

    // Hide secondary navigation on mobile.
    .left-region {
      .menu--main {
        @include grid-media-max('md') {
          display: none;
        }
      }
    }

    // Add some extra space between the main-region and the left-region.
    > .left-region + .main-region {
      @include grid-media('xl') {
        @include padding(null null null 80px);
      }
    }
  }
}

.node-stanford-page-su-page-banner {
  @include modular-spacing('margin-bottom', 4);
}

.paragraph--type--stanford-gallery,
.ptype-stanford-gallery {
  h2 {
    @include margin(0);

    text-align: center;
  }
}

// Make the people referenced entity pictures circles.
.su-person-photo {
  @include margin(0 auto);
  @include padding(30px);
  max-width: 300px;

  picture,
  img {
    border-radius: 50%;
  }
}

.ds-entity--stanford-person {
  text-align: center;

  h3 {
    font-size: 1.4em;
    margin-bottom: 1.0rem;
  }
}

.su-list-unstyled {
  li {
    @include modular-spacing('margin-bottom', 4);
  }

  a {
    color: $su-color-bright-red;

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

.ptype-stanford-entity,
.paragraph--type--stanford-entity,
.stanford-shared-tags {

  .su-entity-headline {
    h2 {
      @include margin(0);

      text-align: center;
    }
  }

  .su-entity-item {
    > div {
      @include modular-spacing('margin-bottom', 4);
    }

    a {
      color: $su-color-bright-red;

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

  &[data-react-columns="12"],
  .layout--layout-paragraphs-one-column & {
    .su-entity-item {
      & > div:first-child:last-child {
        .ds-entity--stanford-person {
          @include grid-media('sm') {
            .su-card {
              display: flex;
            }

            .su-person-photo {
              width: 25%;
              flex: 1;
              @include margin(3rem);
            }

            .su-card__contents {
              flex: 1;
              @include margin(auto);
            }
          }
        }
      }
    }

    @include grid-media('lg') {
      .su-entity-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        > div {
          @include margin(0);
          width: calc(33% - 40px);

          &:nth-child(1):nth-last-child(1) {
            width: 100%;
          }

          &:nth-child(1):nth-last-child(2),
          &:nth-child(2):nth-last-child(1) {
            width: calc(50% - 40px);
          }

          &:nth-child(n+4) {
            @include modular-spacing('margin-top', 4);
          }
        }
      }
    }
  }

  .su-entity-button {
    display: flex;
    justify-content: center;
  }

  // Publication teasers
  .ds-entity--stanford-publication {
    .su-card__contents {
      > h2,
      h3 {
        margin: 0;
        @include responsive-spacing('margin-bottom', 2);

        color: $su-color-black;
        display: inline-block;
        font-weight: $su-font-bold;

        &::after {
          @include modular-spacing('margin-left', -1);
          background-color: $su-color-bright-red;
        }

        a {
          @include link-icon(caret-right, 1.2rem, right);

          color: $su-color-black;

          &::after {
            background-color: $su-color-bright-red;
          }

          &:hover,
          &:focus,
          &:active {
            color: $su-color-bright-red;
            text-decoration: underline;

            &::after {
              background-color: $su-color-bright-red;
            }
          }
        }
      }

      h3 {
        font-size: 1.4em;
      }

      .su-publication-topics {

        ul {
          list-style: none;
          margin: 0;
          padding: 0;

          li {
            display: inline-block;
          }
        }

        a {
          @include small-paragraph;

          color: $su-color-bright-red;
          font-weight: $su-font-regular;
          text-decoration: none;

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

        // adding commas conditionally
        li {
          &:not(:last-of-type) {
            &::after {
              content: ",";
              padding-right: 5px;
            }
          }
        }

      }
    }
  }

  // Policy teasers
  .ds-entity--stanford-policy {
    h2 {
      @include type-c;
    }

    h3 {
      font-size: 1.4em;
    }
  }
}

.ptype-stanford-lists,
.paragraph--type--stanford-lists {
  container: paragraph / inline-size;

  .su-list-headline {
    h2 {
      @include margin(0);
      text-align: center;
    }
  }

  .su-list-button {
    display: flex;
    justify-content: center;
  }

  @container paragraph (max-width: 600px) {
  .stanford-news--cards,
  .stanford-events {
    .views-view-grid {
      .views-col,
      .views-row {
        @include responsive-spacing('margin-bottom', 4);
        padding-top: 0; //for the event padding top on the first item

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

  .view [class*="grid-container"] {
    grid-template-columns: 1fr;
  }

  // Person grid has a little different need.
  .stanford-people-grid {
    .views-view-grid {
      .views-col,
      .views-row {
        @include responsive-spacing('margin-bottom', 4);
      }
    }

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

  .views-view-grid .views-row > div {
    width: 100%;
    max-width: 100%;
    flex: none;

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

  .su-news-list__item-date + .su-news-list__item {
    .media {
      margin-top: 0;
    }
  }

  .su-news-vertical-teaser {
    &.su-card {
      margin-bottom: inherit;
    }
  }

  // Stack the date above the title on the events lists.
  .su-event-list-item {
    display: block;
  }

  .su-news-list,
  .su-basic-page-types-list {
    img,
    picture {
      display: none;
    }
  }
}

  &[data-react-columns]:not([data-react-columns="12"]) {
    // Views-row for non-grid displays.
    // Views-view-grid has some different markup, so it needs some different work.
    // this is to remove spacing from the last col and to keep MS4 between the cards.
    .stanford-news--cards,
    .stanford-events {
      .views-view-grid {
        .views-col,
        .views-row {
          @include responsive-spacing('margin-bottom', 4);
          padding-top: 0; //for the event padding top on the first item

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

    .view [class*="grid-container"] {
      grid-template-columns: 1fr;
    }

    // Person grid has a little different need.
    .stanford-people-grid {
      .views-view-grid {
        .views-col,
        .views-row {
          @include responsive-spacing('margin-bottom', 4);
        }
      }

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

    .views-view-grid .views-row > div {
      width: 100%;
      max-width: 100%;
      flex: none;

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

    .su-news-list__item-date + .su-news-list__item {
      .media {
        margin-top: 0;
      }
    }

    .su-news-vertical-teaser {
      &.su-card {
        margin-bottom: inherit;
      }
    }

    // Stack the date above the title on the events lists.
    .su-event-list-item {
      display: block;
    }

    .su-news-list,
    .su-basic-page-types-list {
      img,
      picture {
        display: none;
      }
    }
  }

  //adds margin for the basic page plus when a card in 12 across.
  .stanford-basic-pages {
    .views-view-grid {
      .su-basic-page-types-view-row {
        @include responsive-spacing('margin-bottom', 4);

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

  //adds margin for the basic page plus when a card in 2 or 3 cols.
  &.flex-6-of-12,
  &.flex-4-of-12 {
    .su-basic-page-types-view-column {
      @include responsive-spacing('margin-bottom', 4);

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

  }

  // Removes the padding top for the first item
  // but not on 12 across.
  &:not(.flex-12-of-12) {
    .stanford-news--list {
      div:first-child {
        .su-news-list {
          @include grid-media-min('xl') {
            padding-top: 0;
          }
        }
      }
    }
  }

  // Grid removal for news and people lists in cols
  // Grid removal for event spanning dates in cols
  &[data-react-columns='4'],
  &[data-react-columns='6'] {
    .su-news-list__header {
      grid-template-columns: 1fr;
    }

    .stanford-people-grid {
      .flex-container {
        display: unset;
      }
    }

    .su-event-list-item__date {
      align-items: center;
      display: flex;
    }
  }
}

@include grid-media-min('lg') {
  .container-1-items,
  .container-2-items,
  .container-3-items {
    .ptype-stanford-lists {
      .field--name-su-list-view {
        @include responsive-spacing('padding', null 2 null 0);
      }
    }
  }
}

.ds-entity--stanford-event-series {
  .su-card {
    @include modular-typography(0);

    .su-event-series-dek {
      display: none;
    }

    h3 {
      font-size: 1.4em;
    }

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

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