luna-one 3.1.581 → 3.1.582

package/dist/luna/featurettes/PullQuote/PullQuote.scss

@@ -1,395 +1,395 @@
-@import "../../../global-styles/terra.scss";
-
-.ter-pullQuote {
-  margin: auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  position: relative;
-  z-index: 27;
-  flex-direction: row;
-  grid-column: 1 / span 16;
-
-  &--variant3 {
-    flex-direction: column;
-  }
-
-  &--background-layout {
-    grid-column: 4 / span 10;
-    grid-row: 1;
-    padding: 54px 0;
-    @media screen and (max-width: $breakpoint-sm) {
-      grid-column: 3 / span 12;
-      padding: spacing("lg") 0;
-    }
-    @media screen and (max-width: $breakpoint-xs) {
-      grid-column: 2 / span 14;
-      padding: spacing("sm") 0;
-    }
-    @media screen and (max-width: $breakpoint-xxs) {
-      padding: spacing("xs") 0;
-    }
-  }
-
-  &__background {
-    grid-column: 1 / span 16;
-    grid-row: 1;
-    max-height: 960px;
-    background-size: cover;
-    background-position: center;
-
-    &--image {
-      height: 100%;
-      width: 100%;
-      object-fit: cover;
-    }
-  }
-
-  &__grid {
-    display: grid;
-    grid-template-columns: repeat(16, 1fr);
-    grid-template-rows: 1fr;
-    max-width: 1280px;
-  }
-
-  &--top-image {
-    width: 100%;
-    max-height: 400px;
-    &> .ter-lottie-animation--wrapper {
-      width: 100%;
-    }
-  }
-
-  &__quote-section {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    max-width: 100%;
-
-    @media (max-width: $breakpoint-xs) {
-      flex-direction: column;
-    }
-
-    &--right {
-      flex-direction: row-reverse;
-
-      @media (max-width: $breakpoint-xs) {
-        flex-direction: column;
-      }
-    }
-    &__image {
-      &--variant1 {
-        &--quarter {
-          width: 25%;
-        }
-        &--left {
-          padding: 20px 80px 0 20px;
-        }
-        &--right {
-          padding: 20px 20px 0 80px;
-        }
-      }
-      &--variant2 {
-        &--quarter {
-          width: 25%;
-
-          @media (max-width: $breakpoint-xs) {
-            width: 100%;
-          }
-        }
-        &--half {
-          width: 50%;
-
-          @media (max-width: $breakpoint-md) {
-            width: 55%;
-          }
-        }
-      }
-    }
-    &__quote {
-      padding: 20px;
-      &--variant2,
-      &--variant1 {
-        &--quarter {
-          width: 25%;
-        }
-        &--half {
-          width: 50%;
-
-          @media (max-width: $breakpoint-md) {
-            width: 55%;
-          }
-        }
-        &--threeQuarter {
-          width: 75%;
-
-          @media (max-width: $breakpoint-xs) {
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-
-  &__image {
-    max-width: 800px;
-    max-height: 400px;
-    -webkit-box-sizing: content-box;
-
-    box-sizing: content-box;
-    -ms-grid-column-align: end;
-    justify-self: end;
-    display: block;
-  }
-
-  &__quote-text,
-  &__quote-text-holder p {
-    @include benton-regular();
-    font-size: $heading-5-size;
-    line-height: 46px;
-    letter-spacing: -0.5%;
-  }
-
-  &__full-quote-wrapper {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-
-    @media (max-width: $breakpoint-xs) {
-      display: block;
-    }
-
-    padding: 1em;
-    border: 2px solid #fbad26;
-    position: relative;
-
-    &::before,
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      background: $white;
-    }
-    &--dark {
-      &::before,
-      &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        background: $trimble-dark-gray;
-      }
-    }
-
-    &::before {
-      top: -0.3em; // let it overlap a bit to prevent thin line which could appear during scaling in some browsers etc.
-      bottom: -0.3em;
-      left: 1em;
-      right: 1em;
-    }
-
-    &::after {
-      left: -0.3em;
-      right: -0.3em;
-      top: 1em;
-      bottom: 1em;
-    }
-
-    &--content {
-      position: relative;
-      z-index: 1;
-      padding: 10px;
-
-      @media (max-width: $breakpoint-xs) {
-        padding: 0;
-      }
-    }
-  }
-
-  &__quote-source {
-    @include benton-bold();
-    font-size: $body-font-size;
-    line-height: 22px;
-    margin-bottom: 5px;
-  }
-
-  &__quote-source-title {
-    @include benton-normal();
-    font-size: $body-font-size;
-    line-height: 22px;
-  }
-}
-@media (max-width: $breakpoint-sm) {
-  .ter-pullQuote {
-    &__image {
-      width: 300px;
-      height: 300px;
-      margin: auto;
-    }
-    &__quote-section {
-      &--variant1--quarter {
-        flex-direction: column;
-      }
-      &--variant2 {
-        &--half {
-          flex-direction: column;
-        }
-      }
-      &__image {
-        &--variant1 {
-          &--quarter {
-            width: 50%;
-          }
-          &--right {
-            padding: 20px 20px 0 30px;
-          }
-          &--left {
-            padding: 20px 30px 0 20px;
-          }
-        }
-        &--variant2 {
-          &--half {
-            width: 100%;
-          }
-        }
-      }
-      &__quote {
-        &--variant2 {
-          &--half {
-            width: 100%;
-          }
-        }
-      }
-    }
-
-    &__full-quote-wrapper {
-      margin: spacing("auto");
-    }
-    &__quote-text {
-      font-size: $heading-4-size-mobile;
-      line-height: 35px;
-    }
-
-    .ter-button {
-      text-align: center;
-      margin: auto;
-      white-space: normal;
-      padding: 5px 12px 2px;
-      height: auto !important;
-      line-height: 25px;
-      gap: 10px;
-
-
-
-      @media (max-width: $breakpoint-xs) {
-        font-size: 14px;
-      }
-
-      @media (max-width: $breakpoint-sm) {
-        padding: 8px 16px 4px;
-        font-size: 16px;
-      }
-    }
-  }
-}
-
-
-@media (max-width: $breakpoint-xxs) {
-  .ter-pullQuote {
-    &--top-image {
-      height: 200px;
-      width: 100%;
-    }
-    &__quote-section {
-      flex-direction: column;
-
-      &__image {
-        &--left {
-          width: 50% !important;
-          padding: 2px 30px 40px 2px;
-        }
-        &--variant1 {
-          &--threeQuarter {
-            width: 100%;
-          }
-          &--quarter {
-            width: 50%;
-          }
-          &--left {
-            padding: 20px 0 0 20px;
-          }
-          &--right {
-            padding: 20px 0 0 20px;
-          }
-        }
-        &--variant2 {
-          &--quarter {
-            width: 100%;
-            height: 50%;
-          }
-          &--half {
-            width: 100%;
-          }
-        }
-      }
-      &__quote {
-        &--variant1,
-        &--variant2 {
-          &--threeQuarter {
-            width: 100%;
-          }
-        }
-      }
-    }
-
-    &__image {
-      margin: spacing("auto");
-      min-width: 200px;
-      min-height: 200px;
-      max-width: 200px;
-      max-height: 200px;
-    }
-    &--vertical {
-      flex-direction: column;
-    }
-    &--horizontal {
-      flex-direction: column;
-    }
-
-    .ter-button {
-      text-align: center;
-      margin: auto;
-      white-space: normal;
-      padding: 5px 12px 2px;
-      height: auto !important;
-      line-height: 25px;
-      gap: 10px;
-
-      @media (max-width: $breakpoint-xs) {
-        font-size: 14px;
-      }
-    }
-  }
-}
-
-@media screen and (-ms-high-contrast: active),
-  screen and (-ms-high-contrast: none) {
-  /* IE10+ specific styles go here */
-  .ter-pullQuote {
-    &__image {
-      min-width: 300px;
-      min-height: 300px;
-      max-width: 300px;
-      max-height: 300px;
-      margin-top: 25px;
-    }
-  }
-}
-
-@media screen and (max-width: $breakpoint-xs) {
-  .default-layout__grid {
-    margin: 0 !important;
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.ter-pullQuote {
+  margin: auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  position: relative;
+  z-index: 27;
+  flex-direction: row;
+  grid-column: 1 / span 16;
+
+  &--variant3 {
+    flex-direction: column;
+  }
+
+  &--background-layout {
+    grid-column: 4 / span 10;
+    grid-row: 1;
+    padding: 54px 0;
+    @media screen and (max-width: $breakpoint-sm) {
+      grid-column: 3 / span 12;
+      padding: spacing("lg") 0;
+    }
+    @media screen and (max-width: $breakpoint-xs) {
+      grid-column: 2 / span 14;
+      padding: spacing("sm") 0;
+    }
+    @media screen and (max-width: $breakpoint-xxs) {
+      padding: spacing("xs") 0;
+    }
+  }
+
+  &__background {
+    grid-column: 1 / span 16;
+    grid-row: 1;
+    max-height: 960px;
+    background-size: cover;
+    background-position: center;
+
+    &--image {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(16, 1fr);
+    grid-template-rows: 1fr;
+    max-width: 1280px;
+  }
+
+  &--top-image {
+    width: 100%;
+    max-height: 400px;
+    &> .ter-lottie-animation--wrapper {
+      width: 100%;
+    }
+  }
+
+  &__quote-section {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    max-width: 100%;
+
+    @media (max-width: $breakpoint-xs) {
+      flex-direction: column;
+    }
+
+    &--right {
+      flex-direction: row-reverse;
+
+      @media (max-width: $breakpoint-xs) {
+        flex-direction: column;
+      }
+    }
+    &__image {
+      &--variant1 {
+        &--quarter {
+          width: 25%;
+        }
+        &--left {
+          padding: 20px 80px 0 20px;
+        }
+        &--right {
+          padding: 20px 20px 0 80px;
+        }
+      }
+      &--variant2 {
+        &--quarter {
+          width: 25%;
+
+          @media (max-width: $breakpoint-xs) {
+            width: 100%;
+          }
+        }
+        &--half {
+          width: 50%;
+
+          @media (max-width: $breakpoint-md) {
+            width: 55%;
+          }
+        }
+      }
+    }
+    &__quote {
+      padding: 20px;
+      &--variant2,
+      &--variant1 {
+        &--quarter {
+          width: 25%;
+        }
+        &--half {
+          width: 50%;
+
+          @media (max-width: $breakpoint-md) {
+            width: 55%;
+          }
+        }
+        &--threeQuarter {
+          width: 75%;
+
+          @media (max-width: $breakpoint-xs) {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  &__image {
+    max-width: 800px;
+    max-height: 400px;
+    -webkit-box-sizing: content-box;
+
+    box-sizing: content-box;
+    -ms-grid-column-align: end;
+    justify-self: end;
+    display: block;
+  }
+
+  &__quote-text,
+  &__quote-text-holder p {
+    @include benton-regular();
+    font-size: $heading-5-size;
+    line-height: 46px;
+    letter-spacing: -0.5%;
+  }
+
+  &__full-quote-wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+
+    @media (max-width: $breakpoint-xs) {
+      display: block;
+    }
+
+    padding: 1em;
+    border: 2px solid #fbad26;
+    position: relative;
+
+    &::before,
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      background: $white;
+    }
+    &--dark {
+      &::before,
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        background: $trimble-dark-gray;
+      }
+    }
+
+    &::before {
+      top: -0.3em; // let it overlap a bit to prevent thin line which could appear during scaling in some browsers etc.
+      bottom: -0.3em;
+      left: 1em;
+      right: 1em;
+    }
+
+    &::after {
+      left: -0.3em;
+      right: -0.3em;
+      top: 1em;
+      bottom: 1em;
+    }
+
+    &--content {
+      position: relative;
+      z-index: 1;
+      padding: 10px;
+
+      @media (max-width: $breakpoint-xs) {
+        padding: 0;
+      }
+    }
+  }
+
+  &__quote-source {
+    @include benton-bold();
+    font-size: $body-font-size;
+    line-height: 22px;
+    margin-bottom: 5px;
+  }
+
+  &__quote-source-title {
+    @include benton-normal();
+    font-size: $body-font-size;
+    line-height: 22px;
+  }
+}
+@media (max-width: $breakpoint-sm) {
+  .ter-pullQuote {
+    &__image {
+      width: 300px;
+      height: 300px;
+      margin: auto;
+    }
+    &__quote-section {
+      &--variant1--quarter {
+        flex-direction: column;
+      }
+      &--variant2 {
+        &--half {
+          flex-direction: column;
+        }
+      }
+      &__image {
+        &--variant1 {
+          &--quarter {
+            width: 50%;
+          }
+          &--right {
+            padding: 20px 20px 0 30px;
+          }
+          &--left {
+            padding: 20px 30px 0 20px;
+          }
+        }
+        &--variant2 {
+          &--half {
+            width: 100%;
+          }
+        }
+      }
+      &__quote {
+        &--variant2 {
+          &--half {
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    &__full-quote-wrapper {
+      margin: spacing("auto");
+    }
+    &__quote-text {
+      font-size: $heading-4-size-mobile;
+      line-height: 35px;
+    }
+
+    .ter-button {
+      text-align: center;
+      margin: auto;
+      white-space: normal;
+      padding: 5px 12px 2px;
+      height: auto !important;
+      line-height: 25px;
+      gap: 10px;
+
+
+
+      @media (max-width: $breakpoint-xs) {
+        font-size: 14px;
+      }
+
+      @media (max-width: $breakpoint-sm) {
+        padding: 8px 16px 4px;
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+
+@media (max-width: $breakpoint-xxs) {
+  .ter-pullQuote {
+    &--top-image {
+      height: 200px;
+      width: 100%;
+    }
+    &__quote-section {
+      flex-direction: column;
+
+      &__image {
+        &--left {
+          width: 50% !important;
+          padding: 2px 30px 40px 2px;
+        }
+        &--variant1 {
+          &--threeQuarter {
+            width: 100%;
+          }
+          &--quarter {
+            width: 50%;
+          }
+          &--left {
+            padding: 20px 0 0 20px;
+          }
+          &--right {
+            padding: 20px 0 0 20px;
+          }
+        }
+        &--variant2 {
+          &--quarter {
+            width: 100%;
+            height: 50%;
+          }
+          &--half {
+            width: 100%;
+          }
+        }
+      }
+      &__quote {
+        &--variant1,
+        &--variant2 {
+          &--threeQuarter {
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    &__image {
+      margin: spacing("auto");
+      min-width: 200px;
+      min-height: 200px;
+      max-width: 200px;
+      max-height: 200px;
+    }
+    &--vertical {
+      flex-direction: column;
+    }
+    &--horizontal {
+      flex-direction: column;
+    }
+
+    .ter-button {
+      text-align: center;
+      margin: auto;
+      white-space: normal;
+      padding: 5px 12px 2px;
+      height: auto !important;
+      line-height: 25px;
+      gap: 10px;
+
+      @media (max-width: $breakpoint-xs) {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+@media screen and (-ms-high-contrast: active),
+  screen and (-ms-high-contrast: none) {
+  /* IE10+ specific styles go here */
+  .ter-pullQuote {
+    &__image {
+      min-width: 300px;
+      min-height: 300px;
+      max-width: 300px;
+      max-height: 300px;
+      margin-top: 25px;
+    }
+  }
+}
+
+@media screen and (max-width: $breakpoint-xs) {
+  .default-layout__grid {
+    margin: 0 !important;
+  }
+}