luna-one 3.1.589 → 3.1.590

package/dist/luna/components/ImageGallery/ImageGallery.scss

@@ -1,443 +1,443 @@
-@import "../../../global-styles/terra.scss";
-
-.ter-image-gallery {
-  &__holder {
-    display: flex;
-    flex-direction: column;
-    &--reverse {
-      flex-direction: column-reverse;
-      padding-bottom: 35px;
-      .ter-image-gallery__nav {
-        padding: 30px 90px 30px 90px;
-        @media screen and (max-width: $breakpoint-md) {
-          padding: 0 60px 30px 60px;
-        }
-        @media screen and (max-width: $breakpoint-sm) {
-          padding: 0 30px 20px 30px;
-        }
-        @media screen and (max-width: $breakpoint-xs) {
-          padding: 0 0 20px 0;
-        }
-      }
-    }
-  }
-  &__inner {
-    display: flex;
-    flex-direction: row;
-    &--reverse {
-      flex-direction: row-reverse;
-    }
-  }
-  &__nav {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding: 30px 90px 0 90px;
-    @media screen and (max-width: $breakpoint-md) {
-      padding: 30px 60px 0 60px;
-    }
-    @media screen and (max-width: $breakpoint-sm) {
-      padding: 20px 30px 0 30px;
-      flex-wrap: wrap;
-    }
-    @media screen and (max-width: $breakpoint-xs) {
-      padding: 20px 0 0 0;
-      flex-wrap: wrap;
-    }
-    .ter-button {
-      @media screen and (max-width: $breakpoint-sm) {
-        font-size: $body-font-size;
-        margin-top: 20px;
-      }
-    }
-    .flickity-viewport {
-      display: flex;
-      height: 100%;
-      width: 100%;
-    }
-  }
-  &__holder--reverse .ter-image-gallery__nav {
-    padding-bottom: 0;
-  }
-  &__thumbnails {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    flex-grow: 1;
-    @media screen and (max-width: $breakpoint-sm){
-      width: 100%;
-      justify-content: center;
-    }
-    &--no-button {
-      width: 100%;
-      justify-content: center;
-    }
-  }
-  &__thumbnail-wrapper {
-    padding: 10px;
-    border: 2px solid transparent;
-    transition: 0.3s linear border;
-    margin-left: 5px;
-    margin-right: 5px;
-    @media screen and (max-width: $breakpoint-xs){
-      padding: 5px;
-    }
-  }
-  &__thumbnail-wrapper--active {
-    border-color: $trimble-gold;
-  }
-  &__thumbnail {
-    position: relative;
-    cursor: pointer;
-    width: 90px;
-    height: 90px;
-    @media screen and (max-width: $breakpoint-md){
-      width: 60px;
-      height: 60px;
-    }
-    @media screen and (max-width: $breakpoint-xs){
-      width: 40px;
-      height: 40px;
-    }
-    img {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      left: 0;
-      height: 100%;
-      width: 100%;
-      object-fit: cover;
-    }
-  }
-  &__main-image {
-    width: 100%;
-    height: 100%;
-  }
-  &__main-image--regular img {
-    display: block;
-    width: 100%;
-    height: auto;
-  }
-  &__images {
-    margin-top: 30px;
-    width: 100%;
-    position: relative;
-    @media screen and (max-width: $breakpoint-sm){
-      margin-top: 10px;
-    }
-  }
-  &__image-border {
-    background-image: url("../../images/gallery-image-corner-border.svg");
-    background-repeat: no-repeat;    
-    position: absolute;
-    height: 32px;
-    width: 32px;
-    bottom: -32px;
-    @media screen and (max-width: $breakpoint-md){
-      width: 24px;
-      height: 24px;
-      bottom: -24px;
-    }
-    @media screen and (max-width: $breakpoint-xs){
-      width: 10px;
-      height: 10px;
-      bottom: -10px;
-    }
-    &-left {
-      left: -32px;
-      transform: rotate(90deg);
-      @media screen and (max-width: $breakpoint-md){
-        left: -24px;
-      }
-      @media screen and (max-width: $breakpoint-xs){
-        left: -10px;
-      }
-    }
-    &-right {
-      right: -32px;
-      @media screen and (max-width: $breakpoint-md){
-        right: -24px;
-      }
-      @media screen and (max-width: $breakpoint-xs){
-        right: -10px;
-      }
-    }
-    &-top-left,
-    &-top-right {
-      bottom: initial;
-      top: -32px;
-      transform: rotate(180deg);
-      @media screen and (max-width: $breakpoint-md){
-        top: -24px;
-      }
-      @media screen and (max-width: $breakpoint-xs){
-        top: -10px;
-      }
-    }
-    &-top {
-      &-left {
-        left: -32px;
-        @media screen and (max-width: $breakpoint-md){
-          left: -24px;
-        }
-        @media screen and (max-width: $breakpoint-xs){
-          left: -10px;
-        }
-      }
-      &-right {
-        transform: rotate(270deg);
-        right: -32px;
-        @media screen and (max-width: $breakpoint-md){
-          right: -24px;
-        }
-        @media screen and (max-width: $breakpoint-xs){
-          right: -10px;
-        }
-      }
-    }
-  }
-  &__lightbox-wrapper {
-    flex-grow: 1;
-    align-items: center;
-    overflow: hidden;
-    padding: 70px;
-    display: flex;
-  }
-  &__lightbox {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    background-color: $trimble-dark-gray;
-    display: none;
-    &-nav {
-      background-color: $dark-navy;
-      max-width: 320px;
-      width: 100%;
-      display: flex;
-      height: 100%;
-      @media screen and (max-width: $breakpoint-md) {
-        width: 100%;
-        min-height: 200px;
-        height: 22%;
-        max-width: none;
-      }
-      &--horz {
-        display: none;
-        @media screen and (max-width: $breakpoint-md){
-          display: block;
-        }
-      }
-      &--vert {
-        display: block;
-        @media screen and (max-width: $breakpoint-md){
-          display: none;
-        }
-      }
-      .carousel-cell {
-        width: 100%;
-        max-width: 160px;
-        height: 120px;
-        margin: 5px auto;
-        padding: 7px;
-        cursor: pointer;
-        // position: relative !important;
-        @media screen and (min-width: $breakpoint-md) {
-          position: relative !important;
-        }
-        @media screen and (max-width: $breakpoint-md){
-          width: 160px;
-          margin: 0 5px;
-          // left: 0 !important;
-          // position: absolute !important;
-        }
-      }
-      .flickity-viewport,
-      .flickity-slider {
-        width: 100%;
-        height: 100% !important;
-      }
-      .flickity-slider {
-        overflow-y: auto;
-        overflow-x: hidden;
-        padding: 70px 10px;
-        @media screen and (max-width: $breakpoint-md) {
-          overflow-y: hidden;
-          overflow-x: auto;
-          padding: 35px 10px;
-          display: flex;
-          align-items: center;
-          // justify-content: left;
-        }
-        @media screen and (min-width: $breakpoint-md) {
-          transform: none !important;
-        }
-      }
-    }
-    &-main {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      .flickity-button {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 25px;
-        padding: 0;
-        cursor: pointer;
-        @media screen and (max-width: $breakpoint-sm){
-          transform: none;
-          top: initial;
-          position: relative;
-          margin-top: 20px;
-        }
-        &.next {
-          right: -50px;
-          @media screen and (max-width: $breakpoint-sm){
-            right: 0;
-          }
-        }
-        &.previous {
-          left: -50px;
-          @media screen and (max-width: $breakpoint-sm){
-            left: 0;
-            margin-right: 20px;
-          }
-        }
-        .flickity-button-icon {
-          width: 100%;
-          height: 100%;
-          padding: 5px;
-          background-color: $white;
-          border-radius: 50%;
-        }
-      }
-      .flickity-viewport,
-      .flickity-slider {
-        width: 100%;
-        height: 100% !important;
-        align-items: center;
-        display: flex;
-      }
-    }
-    &-main-item,
-    &-nav-item {
-      width: 100%;
-    }
-    &-nav-item {
-      border: 2px solid $dark-navy;
-      position: relative;
-      @media screen and (min-width: $breakpoint-md){
-        left: 0 !important;
-      }
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-      &.is-nav-selected {
-        border: 2px solid $trimble-gold;
-      }
-    }
-    &-main-item {
-      max-height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      img {
-        width: 100%;
-      }
-    }
-    .ter-image-gallery__close {
-      position: absolute;
-      top: 20px;
-      right: 20px;
-      height: 23px;
-      width: 23px;
-    }
-  }
-  &__lightbox--visible {
-    display: flex;
-    @media screen and (max-width: $breakpoint-md){
-      flex-direction: column-reverse;
-    }
-  }
-  &--split {
-    display: grid;
-    grid-template-columns: repeat(16, 1fr);
-    grid-template-rows: 1fr;
-    flex-wrap: wrap;
-    align-items: center;
-    padding-bottom: 35px;
-    &.ter-image-gallery--split-reverse {
-      .ter-image-gallery__content {
-        grid-column: 1/span 16;
-        @media screen and (min-width: $breakpoint-sm){
-          grid-column: 1/span 7;
-          grid-row: 1;
-        }
-      }
-      .ter-image-gallery__holder {
-        grid-column: 1/span 16;
-        @media screen and (min-width: $breakpoint-sm){
-          grid-column: 9/span 8;
-        }
-      }
-      .ter-image-gallery__holder--reverse {
-        padding-bottom: 0;
-      }
-    }
-    .ter-image-gallery__thumbnail {
-      @media screen and (min-width: $breakpoint-sm){
-        width: 72px;
-        height: 72px;
-      }
-      &-wrapper {
-        padding: 10px;
-        @media screen and (max-width: $breakpoint-xs){
-          padding: 5px;
-        }
-      }
-    }
-    .ter-image-gallery__nav {
-      padding: 20px 0 0 0;
-      width: 100%;
-      @media screen and (min-width: $breakpoint-md){
-        padding: 30px 0 0 0;
-      }
-    }
-    .ter-image-gallery__content {
-      padding: 0;
-      display: flex;
-      width: 100%;
-      padding-top: 64px;
-      grid-column: 1/span 16;
-      @media screen and (min-width: $breakpoint-sm) {
-        grid-row: 1;
-        grid-column: 10/span 8;
-        padding-bottom: 64px;
-      }
-      .default-layout.accordion {
-        margin-bottom: 0;
-      }
-    }
-    .ter-image-gallery__holder {
-      display: flex;
-      width: 100%;
-      align-items: flex-start;
-      grid-column: 1/span 16;
-      @media screen and (min-width: $breakpoint-sm) {
-        grid-column: 1/span 8;
-        grid-row: 1;
-      }
-    }
-  }
-}
-.lf-player-container,
-#lottie {
-  height: 100%;
+@import "../../../global-styles/terra.scss";
+
+.ter-image-gallery {
+  &__holder {
+    display: flex;
+    flex-direction: column;
+    &--reverse {
+      flex-direction: column-reverse;
+      padding-bottom: 35px;
+      .ter-image-gallery__nav {
+        padding: 30px 90px 30px 90px;
+        @media screen and (max-width: $breakpoint-md) {
+          padding: 0 60px 30px 60px;
+        }
+        @media screen and (max-width: $breakpoint-sm) {
+          padding: 0 30px 20px 30px;
+        }
+        @media screen and (max-width: $breakpoint-xs) {
+          padding: 0 0 20px 0;
+        }
+      }
+    }
+  }
+  &__inner {
+    display: flex;
+    flex-direction: row;
+    &--reverse {
+      flex-direction: row-reverse;
+    }
+  }
+  &__nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 30px 90px 0 90px;
+    @media screen and (max-width: $breakpoint-md) {
+      padding: 30px 60px 0 60px;
+    }
+    @media screen and (max-width: $breakpoint-sm) {
+      padding: 20px 30px 0 30px;
+      flex-wrap: wrap;
+    }
+    @media screen and (max-width: $breakpoint-xs) {
+      padding: 20px 0 0 0;
+      flex-wrap: wrap;
+    }
+    .ter-button {
+      @media screen and (max-width: $breakpoint-sm) {
+        font-size: $body-font-size;
+        margin-top: 20px;
+      }
+    }
+    .flickity-viewport {
+      display: flex;
+      height: 100%;
+      width: 100%;
+    }
+  }
+  &__holder--reverse .ter-image-gallery__nav {
+    padding-bottom: 0;
+  }
+  &__thumbnails {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    @media screen and (max-width: $breakpoint-sm){
+      width: 100%;
+      justify-content: center;
+    }
+    &--no-button {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+  &__thumbnail-wrapper {
+    padding: 10px;
+    border: 2px solid transparent;
+    transition: 0.3s linear border;
+    margin-left: 5px;
+    margin-right: 5px;
+    @media screen and (max-width: $breakpoint-xs){
+      padding: 5px;
+    }
+  }
+  &__thumbnail-wrapper--active {
+    border-color: $trimble-gold;
+  }
+  &__thumbnail {
+    position: relative;
+    cursor: pointer;
+    width: 90px;
+    height: 90px;
+    @media screen and (max-width: $breakpoint-md){
+      width: 60px;
+      height: 60px;
+    }
+    @media screen and (max-width: $breakpoint-xs){
+      width: 40px;
+      height: 40px;
+    }
+    img {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+    }
+  }
+  &__main-image {
+    width: 100%;
+    height: 100%;
+  }
+  &__main-image--regular img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  &__images {
+    margin-top: 30px;
+    width: 100%;
+    position: relative;
+    @media screen and (max-width: $breakpoint-sm){
+      margin-top: 10px;
+    }
+  }
+  &__image-border {
+    background-image: url("../../images/gallery-image-corner-border.svg");
+    background-repeat: no-repeat;    
+    position: absolute;
+    height: 32px;
+    width: 32px;
+    bottom: -32px;
+    @media screen and (max-width: $breakpoint-md){
+      width: 24px;
+      height: 24px;
+      bottom: -24px;
+    }
+    @media screen and (max-width: $breakpoint-xs){
+      width: 10px;
+      height: 10px;
+      bottom: -10px;
+    }
+    &-left {
+      left: -32px;
+      transform: rotate(90deg);
+      @media screen and (max-width: $breakpoint-md){
+        left: -24px;
+      }
+      @media screen and (max-width: $breakpoint-xs){
+        left: -10px;
+      }
+    }
+    &-right {
+      right: -32px;
+      @media screen and (max-width: $breakpoint-md){
+        right: -24px;
+      }
+      @media screen and (max-width: $breakpoint-xs){
+        right: -10px;
+      }
+    }
+    &-top-left,
+    &-top-right {
+      bottom: initial;
+      top: -32px;
+      transform: rotate(180deg);
+      @media screen and (max-width: $breakpoint-md){
+        top: -24px;
+      }
+      @media screen and (max-width: $breakpoint-xs){
+        top: -10px;
+      }
+    }
+    &-top {
+      &-left {
+        left: -32px;
+        @media screen and (max-width: $breakpoint-md){
+          left: -24px;
+        }
+        @media screen and (max-width: $breakpoint-xs){
+          left: -10px;
+        }
+      }
+      &-right {
+        transform: rotate(270deg);
+        right: -32px;
+        @media screen and (max-width: $breakpoint-md){
+          right: -24px;
+        }
+        @media screen and (max-width: $breakpoint-xs){
+          right: -10px;
+        }
+      }
+    }
+  }
+  &__lightbox-wrapper {
+    flex-grow: 1;
+    align-items: center;
+    overflow: hidden;
+    padding: 70px;
+    display: flex;
+  }
+  &__lightbox {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background-color: $trimble-dark-gray;
+    display: none;
+    &-nav {
+      background-color: $dark-navy;
+      max-width: 320px;
+      width: 100%;
+      display: flex;
+      height: 100%;
+      @media screen and (max-width: $breakpoint-md) {
+        width: 100%;
+        min-height: 200px;
+        height: 22%;
+        max-width: none;
+      }
+      &--horz {
+        display: none;
+        @media screen and (max-width: $breakpoint-md){
+          display: block;
+        }
+      }
+      &--vert {
+        display: block;
+        @media screen and (max-width: $breakpoint-md){
+          display: none;
+        }
+      }
+      .carousel-cell {
+        width: 100%;
+        max-width: 160px;
+        height: 120px;
+        margin: 5px auto;
+        padding: 7px;
+        cursor: pointer;
+        // position: relative !important;
+        @media screen and (min-width: $breakpoint-md) {
+          position: relative !important;
+        }
+        @media screen and (max-width: $breakpoint-md){
+          width: 160px;
+          margin: 0 5px;
+          // left: 0 !important;
+          // position: absolute !important;
+        }
+      }
+      .flickity-viewport,
+      .flickity-slider {
+        width: 100%;
+        height: 100% !important;
+      }
+      .flickity-slider {
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 70px 10px;
+        @media screen and (max-width: $breakpoint-md) {
+          overflow-y: hidden;
+          overflow-x: auto;
+          padding: 35px 10px;
+          display: flex;
+          align-items: center;
+          // justify-content: left;
+        }
+        @media screen and (min-width: $breakpoint-md) {
+          transform: none !important;
+        }
+      }
+    }
+    &-main {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      .flickity-button {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 25px;
+        padding: 0;
+        cursor: pointer;
+        @media screen and (max-width: $breakpoint-sm){
+          transform: none;
+          top: initial;
+          position: relative;
+          margin-top: 20px;
+        }
+        &.next {
+          right: -50px;
+          @media screen and (max-width: $breakpoint-sm){
+            right: 0;
+          }
+        }
+        &.previous {
+          left: -50px;
+          @media screen and (max-width: $breakpoint-sm){
+            left: 0;
+            margin-right: 20px;
+          }
+        }
+        .flickity-button-icon {
+          width: 100%;
+          height: 100%;
+          padding: 5px;
+          background-color: $white;
+          border-radius: 50%;
+        }
+      }
+      .flickity-viewport,
+      .flickity-slider {
+        width: 100%;
+        height: 100% !important;
+        align-items: center;
+        display: flex;
+      }
+    }
+    &-main-item,
+    &-nav-item {
+      width: 100%;
+    }
+    &-nav-item {
+      border: 2px solid $dark-navy;
+      position: relative;
+      @media screen and (min-width: $breakpoint-md){
+        left: 0 !important;
+      }
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      &.is-nav-selected {
+        border: 2px solid $trimble-gold;
+      }
+    }
+    &-main-item {
+      max-height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      img {
+        width: 100%;
+      }
+    }
+    .ter-image-gallery__close {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      height: 23px;
+      width: 23px;
+    }
+  }
+  &__lightbox--visible {
+    display: flex;
+    @media screen and (max-width: $breakpoint-md){
+      flex-direction: column-reverse;
+    }
+  }
+  &--split {
+    display: grid;
+    grid-template-columns: repeat(16, 1fr);
+    grid-template-rows: 1fr;
+    flex-wrap: wrap;
+    align-items: center;
+    padding-bottom: 35px;
+    &.ter-image-gallery--split-reverse {
+      .ter-image-gallery__content {
+        grid-column: 1/span 16;
+        @media screen and (min-width: $breakpoint-sm){
+          grid-column: 1/span 7;
+          grid-row: 1;
+        }
+      }
+      .ter-image-gallery__holder {
+        grid-column: 1/span 16;
+        @media screen and (min-width: $breakpoint-sm){
+          grid-column: 9/span 8;
+        }
+      }
+      .ter-image-gallery__holder--reverse {
+        padding-bottom: 0;
+      }
+    }
+    .ter-image-gallery__thumbnail {
+      @media screen and (min-width: $breakpoint-sm){
+        width: 72px;
+        height: 72px;
+      }
+      &-wrapper {
+        padding: 10px;
+        @media screen and (max-width: $breakpoint-xs){
+          padding: 5px;
+        }
+      }
+    }
+    .ter-image-gallery__nav {
+      padding: 20px 0 0 0;
+      width: 100%;
+      @media screen and (min-width: $breakpoint-md){
+        padding: 30px 0 0 0;
+      }
+    }
+    .ter-image-gallery__content {
+      padding: 0;
+      display: flex;
+      width: 100%;
+      padding-top: 64px;
+      grid-column: 1/span 16;
+      @media screen and (min-width: $breakpoint-sm) {
+        grid-row: 1;
+        grid-column: 10/span 8;
+        padding-bottom: 64px;
+      }
+      .default-layout.accordion {
+        margin-bottom: 0;
+      }
+    }
+    .ter-image-gallery__holder {
+      display: flex;
+      width: 100%;
+      align-items: flex-start;
+      grid-column: 1/span 16;
+      @media screen and (min-width: $breakpoint-sm) {
+        grid-column: 1/span 8;
+        grid-row: 1;
+      }
+    }
+  }
+}
+.lf-player-container,
+#lottie {
+  height: 100%;
 }