Skip to content
Snippets Groups Projects
_view.scss 8.64 KiB
// @file
// Styles for a view.

@use '../../01-core' as *;

$view-padding: var(--size-2) !default;
$sidebar-width: 18.75rem;

// set the layout for the Views container when being used with Blog, news, events
// to match flexbox in multi list usage.
.view {
  &s-element-container{
    @include uw-contained-width(var(--layout-max-width-narrow));
    @media(min-width: $screen-xl) {
      // Reset the width so we use all the width when we have room to.
      @include uw-contained-width(var(--layout-max-width));
    }
    padding: 0;
    position: relative;
    width: 100%;
  }
  &s-projects-container{
    margin-left: auto;
    margin-right: auto;
    max-width: var(--layout-max-width);
    padding: var(--size-2) 0;
    position: relative;
    width: 100%;
    .views-element-container{
      padding: 0;
    }
  }
  display: block;
  padding: 0;
  position: relative;
  &.view-uw-view-contacts{
    padding-left: 0;
    padding-right: 0;
  }
  &-interact{
    @include uw-contained-width(var(--layout-max-width-narrow));
    @media(min-width: $screen-xl) {
      // Reset the width so we use all the width when we have room to.
      @include uw-contained-width(var(--layout-max-width));
    }
    display: flex;
    gap: var(--size-1);
    grid-row-gap: 0;
    min-height: var(--size-6);
    justify-content: flex-end;
    // Moving the rss button up for the blog news and events
    margin-top: -3rem;
    padding: 0;
    .button{
      margin: 0;
    }
    .path-services & {
      margin-top: 0;
      @media(min-width: $screen-md) {
        margin-top: -3rem;
      }
    }
    .path-events & {
      margin-top: 0;
      @media(min-width: 375px) {
        margin-top: -3rem;
      }
    }
  }
  &-header{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    width: 100%;
  }
  &-content {
    grid-column: 1 / 2;
    width: 100%;
    :not(.media-library-item).views-row{
      width: 100%;
    }
  }
  &-content--message {
    grid-column: 1 / 2;
    margin: 0;
    position: relative;
    z-index: 2;
    .message,
    .messages{
      margin: 0;
    }
  }
  &-pager{
    align-self: flex-end;
    grid-column: 1 / 2;
    margin-bottom: var(--grid-gap);
    margin-top: var(--grid-gap);
    width: 100%;
  }
  // With Filters
  &.with-filters {
    @media(min-width: $screen-lg) {
      display: grid;
      gap: var(--grid-gap);
      grid-row-gap: 0;
      grid-template-columns: auto $sidebar-width;
    }
    .view-content {
      grid-column: 1 / 2;
      width: 100%;
    }
    .view-filters {
      h2{
        margin-top: 0;
      }
      .views-projects-container &{
        @media(min-width: $screen-lg) {
          margin-top: var(--size-1);
          h2{
            margin-top: inherit;
          }
        }
      }
      background: var(--uw-white);
      grid-column: 2 / 3;
      height: 0;
      overflow: hidden;
      width: 0;
      @media(min-width: $screen-lg) {
        grid-row: 1 / 4;
        height: inherit;
        overflow: hidden;
        width: inherit;
      }
      &:target {
        grid-column: 1 / 2;
        height: 100%;
        margin-top: -3.5rem;
        overflow: inherit;
        padding: var(--size-2);
        width: 100%;
        z-index: var(--layout-overlay);
        ~ .view-content {
          display: none;
          &--message{
            display: none;
          }
        }
      }
      @media(min-width: $screen-lg) {
        background: inherit;
        &:target {
          background: inherit;
          grid-column: 2 / 3;
          grid-row: inherit;
          height: inherit;
          margin-top: 0;
          overflow: inherit;
          padding: 0;
          width: $sidebar-width;
          ~ .view-content {
            @include uw-flex-grid();
            align-self: flex-start;
            grid-column: 1 / 2;
            &--message{
              align-self: flex-start;
              display: block;
              grid-column: 1 / 2;
            }
          }
        }
      }
    }
  }
  // Ovewrite the view for when in services or catalog
  &-uw-view-catalog-show-nodes,
  &-uw-view-catalog-show-terms,
  &-uw-view-taxonomy-show-nodes,
  &-uw-view-taxonomy-show-terms,
  &-uw-view-services,
  &-uw-view-catalog-search,
  &-uw-view-service-show-nodes,
  &-uw-view-service-show-terms{
    gap: inherit;
    .view-content {
      .item-list{
        ul {
          margin: 0;
          padding: 0;

          li {
            list-style-type: none;
            margin-left: 0;
            padding-left: 0;
          }
        }
      }
      p{
        margin: 0;
      }
      a {
        margin-right: 0.2rem;
        text-decoration: underline;
        &:hover,
        &:focus{
          text-decoration: none;
        }
      }
      h2{
        font-size: var(--font-size-3);
        span{
          font-family: var(--font-primary);
          font-size: var(--font-size-0);
          @media(min-width: $screen-md) {
            font-size: var(--font-size-1);
          }
        }
        img{
          float: left;
          height: auto;
          padding-right: var(--size-1);
          width: 4.75rem;
        }
      }
      .views-field-title,
      .views-field-title-1{
        font-size: var(--font-size-1);
        margin: var(--size-1) 0 0 0;
      }
    }
  }
}
//Setting the views views-row item grids.
.path-news,
.path-blog,
.path-events,
.view-uw-view-news-items,
.view-uw-view-blogs,
.view-uw-view-events,
.view-uw-view-projects,
.path-taxonomy,
.path-projects,
.path-profiles,
.path-opportunities {
  .view-content {
    display: block;
    padding: 0;
    @media(min-width: $screen-sm){
      display: grid;
      gap: var(--grid-gap);
      grid-row-gap: 0;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, min-content);
    }
    .views-row{
      margin-bottom: var(--grid-gap);
    }
  }
}
.path-news,
.path-blog,
.path-events,
.path-projects{
  .view-content {
    @media(min-width: $screen-sm){
      .views-row{
        &:first-of-type,
        &:nth-of-type(10n){
          grid-column: 1 / 3;
        }
      }
    }
  }
}

.view-uw-view-news-items,
.view-uw-view-blogs,
.view-uw-view-events,
.view-uw-view-projects,
.view-taxonomy-term{
  .view-content {
    .views-row{
      &:first-of-type{
        grid-column: 1 / 3;
      }
    }
  }
}

.path-catalogs,
.path-taxonomy,
.path-services {
  .view.with-filters{
    gap: var(--grid-gap);
  }
  .view-content {
    .views-row{
      width: 100%;
    }
    .item-list{
      ul{
        margin: 0;
        padding: 0;
        li{
          list-style-type: none;
          margin-left: 0;
          padding-left: 0;
          p{
            margin: 0;
          }
          .views-field{
            a {
              margin-right: 0.2rem;
              text-decoration: underline;

              &:hover,
              &:focus{
                text-decoration: none;
              }
            }
            h2{
              font-size: var(--font-size-3);
              margin: var(--size-3) 0 var(--size-1) 0;
              span{
                font-family: var(--font-primary);
                font-size: var(--font-size-0);
                @media(min-width: $screen-md) {
                  font-size: var(--font-size-1);
                }
              }
            }
          }
        }
      }
    }
  }
}

.path-taxonomy {
  .view-uw-view-catalog-show-nodes {
    .view-content {
      padding: 0;
    }
  }
}
.path-contacts{
  .views-row{
    width: 100%;
  }
}
.path-projects{
  .view-content {
    @media(min-width: $screen-sm) {
      .views-row {
        &:first-of-type,
        &:nth-of-type(10n) {
          grid-column: 1 / 3;
        }
      }
    }
  }
  .view{
    &.with-filters{
      margin: 0;
      .views-element-container {
        grid-column: 1 / 3;
      }
      > .view-content {
        margin: 0;
        > h2{
          grid-column: 1 / 3;
          margin: 0;
          width: 100%;
        }
      }
      .view-footer{
        padding: 0 0 var(--size-6) 0;
        text-align: center;
        @media(min-width: $screen-sm) {
          grid-column: 1 / 3;
          justify-self: center;
        }
        a{
          @include button();
        }
      }
    }
    &.view-uw-view-projects{
      &.view-display-id-search{
        &_page{
          .view-content{
            margin-top: var(--size-1);
            @media(min-width: $screen-md) {
              margin-top: var(--size-4);
            }
          }
        }
      }
    }
  }
}
.uw-offcanvas--filter{
  display: flex;
  gap: var(--size-1);
  justify-content: flex-end;
}

// Make views display properly in layout builder (particularly narrow columns).
.layout-builder-block.views-element-container {
  padding: 1.5em; /* The default for layout builder blocks; for some reason it only works if I set it explicitly */
  width: auto;
}