_image-gallery.scss

// @file
// Styles for Image gallery.

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

$size-small: 3;
$size-medium: 4;
$size-large: 4;
$size-xlarge: 7;
.uw-ig {
  &--slider {
    //
  }
  &--grid {
    //.uw-ig__wrapper {
    //  align-items: baseline;
    //  display: grid;
    //  grid-gap: 1rem;
    //  grid-template-columns: repeat(2, 1fr);
    //  @include small {
    //    grid-template-columns: repeat($size-small, 1fr);
    //  }
    //  @include medium {
    //    grid-template-columns: repeat($size-medium, 1fr);
    //    .layout--uw-2-col &,
    //    .layout--uw-3-col &,
    //    .layout--uw-4-col &,
    //    .layout--uw-5-col & {
    //      grid-template-columns: repeat($size-small, 1fr);
    //    }
    //  }
    //  @include large {
    //    grid-template-columns: repeat($size-large, 1fr);
    //    .uw-contained-width--narrow &,
    //    .layout--uw-2-col &,
    //    .layout--uw-3-col &,
    //    .layout--uw-4-col &,
    //    .layout--uw-5-col & {
    //      grid-template-columns: repeat($size-small, 1fr);
    //    }
    //  }
    //  @include xl {
    //    .uw-full-width.layout--uw-1-col & {
    //      grid-template-columns: repeat($size-xlarge, 1fr);
    //    }
    //
    //  }
    //}

    .uw-ig__wrapper {
      align-items: flex-start;
      display: flex;
      flex-flow: row wrap;
      gap: var(--size-2);
      justify-content: space-between;

      @media(min-width: $screen-sm) {
        //
      }
      @media(min-width: $screen-md) {
        //
        .layout--uw-2-col &,
        .layout--uw-3-col &,
        .layout--uw-4-col &,
        .layout--uw-5-col & {
          //
        }
      }
      @media(min-width: $screen-lg) {
        .uw-contained-width--narrow &,
        .layout--uw-2-col &,
        .layout--uw-3-col &,
        .layout--uw-4-col &,
        .layout--uw-5-col & {
          //
        }
      }
      @media(min-width: $screen-xl) {
        .uw-full-width.layout--uw-1-col & {
          //
        }
      }
      .uw-ig__item{
        flex: 1 0 auto;
        width: 32%;
      }
    }
  }
  &--masonry {
    .uw-ig__wrapper {
      @media(min-width: $screen-md) {
        grid-template-columns: repeat($size-medium, 1fr);
        height: 100%;
        > div {
          //Grid Structure
          &:nth-child(#{$size-medium}n + 1) {
            grid-column: span 2;
            grid-row: span 2;
          }

          &:nth-child(2) {
            grid-column: span 3;
            grid-row: span 3;
          }

          &:nth-child(4) {
            grid-column: span 1;
            grid-row: span 2;
          }
        }
        // Inside narrow width section or multiple
        // column layout, make columns 3"
        .uw-contained-width--narrow &,
        .layout--uw-2-col &,
        .layout--uw-3-col &,
        .layout--uw-4-col &,
        .layout--uw-5-col & {
          grid-template-columns: repeat($size-small, 1fr);

          > div {
            &:nth-child(#{$size-small}n + 1) {
              grid-column: span 1;
              grid-row: span 1;
            }
          }
        }
      }
      @media(min-width: $screen-xl) {
        .uw-full-width.layout--uw-1-col & {
          grid-template-columns: repeat($size-xlarge, 1fr);
        }
        > div {
          //&:nth-child(#{$size-xlarge}n + 1) {
          //  grid-column: span 2;
          //  grid-row: span 2;
          //}
          //
          //&:nth-child(2) {
          //  grid-column: span 3;
          //  grid-row: span 3;
          //}
          //&:nth-child(3) {
          //  grid-column: span 1;
          //  grid-row: span 2;
          //}
          //&:nth-child(4) {
          //  grid-column: span 2;
          //  grid-row: span 2;
          //}
          //&:nth-child(5) {
          //  grid-column: span 1;
          //  grid-row: span 1;
          //}
          //&:nth-child(6) {
          //  grid-column: span 2;
          //  grid-row: span 2;
          //}
        }
      }
    }
  }
  &__image{
    min-height: 200px;
    position: relative;
    width: 100%;
    a {
      background: transparent;
      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
      display: block;
      height: 100%;
      left: 0;
      overflow: hidden;
      top: 0;
      transition: all ease 250ms;
      transition-delay: 0s;
      transition-duration: 0.2s;
      transition-property: color, background-color, border-color, opacity;
      transition-timing-function: linear;
      width: 100%;
      img {
        display: block;
        object-fit: contain;
        opacity: 1;
        width: 100%;
      }
      &:hover,
      &:focus{
        background: var(--uw-black);
        img {
          min-height: 100%;
          object-fit: contain;
          opacity: 0.6;
          transition: all ease 250ms;
          width: 100%;
        }
      }
    }
  }
}
//
// lightbox
//
[id^="uw-lightbox-"] {
  &.openLightBox{
    opacity: 1 !important;
  }
  .uw-lightbox{
    &__prev-next{
      display: flex;
      flex-flow: column;
      opacity: 0;
      position: absolute;
      top: calc(50% - 6rem);
      transition: opacity 250ms ease-in-out 250ms;
      width: 100% !important;
      z-index: 1000;
    }
    &__prev,
    &__next{
      @include button-reset();
      background: var(--uw-gold);
      height: 6.5rem;
      position: absolute;
      vertical-align: middle !important;
      width: 3rem;
      &:hover,
      &:focus{
        background: var(--uw-black);

        &::after{
          color: var(--uw-gold);
        }
      }
      &::after{
        color: var(--uw-black);
        display: block;
        font-family: var(--font-system);
        font-size: var(--font-size-12);
      }
    }
    &__prev{
      align-self: flex-start;
      padding-left: var(--size-2) !important;
      &::after{
        content: "\2039";
      }
    }
    &__next{
      align-self: flex-end;
      padding-left: var(--size-2) !important;
      right: 0;
      &::after{
        content: "\203A";
      }
    }
  }
  &:target {
    opacity: 1;
    pointer-events: inherit;
    z-index: 100;
    .uw-lightbox__content{
      opacity: 1;
      transition: opacity 250ms ease-in-out 125ms;
      img,
      picture{
        display: block;
      }
      &:hover{
        .uw-lightbox{
          &__prev-next{
            opacity: 1;
            transition: opacity 250ms ease-in-out;
          }
        }
      }
    }
  }
  align-items: center;
  background-color: rgba(0, 0, 0, 0.95);
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100vw;
  .uw-lightbox__content {
    border: var(--size-xs) solid var(--gray-7);
    color: var(--uw-white) !important;
    opacity: 0;
    position: relative;
    transition: opacity 250ms ease-in-out 125ms;
    img,
    picture{
      display: none;
    }
    &:hover > .uw-lightbox__close {
      opacity: 1;
      transform: scale(1, 1);
    }

    &:hover > .uw-lightbox__title {
      opacity: 1;
      transform: translateY(0); //Fix extra line at end
      &::after{
        opacity: 1;
      }
    }
    > * {
      transition: all 250ms ease-in-out;
    }
  }
  .uw-lightbox__title {
    bottom: 0;
    display: block;
    margin: 0;
    opacity: 0;
    padding: var(--size-2);
    position: absolute;
    transform: translateY(50%);
    width: 100%;
    &::after {
      background-color: rgba(0, 0, 0, 0.8);
      bottom: 0;
      content: ' ';
      height: 100%;
      left: 0;
      opacity: 0;
      position: absolute;
      transform-origin: bottom;
      transition: all 250ms ease-in-out 250ms;
      width: 100%;
    }
  }
  .uw-lightbox__caption{
    color: var(--uw-white);
    font-family: var(--font-system);
    position: relative;
    z-index: var(--layer-overlay);
  }
  img {
    display: block;
    margin: 0;
    max-height: 90vh;
    max-width: 100%;
    padding: 0;
  }
  .uw-lightbox__count{
    color: var(--uw-white) !important;
    display: flex;
    font-family: var(--font-systemmedium);
    font-size: var(--font-size-0);
    padding: var(--size-05) var(--size-1);
    position: absolute;
    right: 0;
    top: 0.125rem;
    z-index: var(--layer-overlay);
  }
  .uw-lightbox__close {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--uw-white) !important;
    display: flex;
    font-family: var(--font-systembold);
    font-size: var(--font-size-2);
    height: var(--size-4);
    justify-content: center;
    opacity: 0;
    position: absolute;
    right: 0;
    text-decoration: none;
    top: 0;
    transform: scale(0, 0);
    transform-origin: right top;
    width: var(--size-4);
    &::after {
      content: "X";
    }
  }
}