luna-one 3.1.596 → 3.1.598

package/dist/luna/components/CtaWithHeader/CtaWithHeader.scss

@@ -1,324 +1,324 @@
-@import "../../../global-styles/terra.scss";
-
-.cta-container {
-  width: 100%;
-  font-family: "Benton Sans for Trimble W05";
-  color: $trimble-dark-gray;
-
-  &.light {
-    color: white;
-  }
-
-  &.dark {
-    color: white;
-    background-color: $trimble-blue;
-  }
-
-  &.dark-gray {
-    color: white;
-    background-color: $trimble-dark-gray;
-  }
-
-  &.dark-navy {
-    color: white;
-    background-color: $dark-navy;
-  }
-
-  &.transparent-light-text {
-    background-color: unset;
-    color: inherit;
-
-    @media screen and (min-width: $breakpoint-xs) {
-      color: $white;
-    }
-
-    .content {
-      font-weight: 400 !important;
-      a {
-        color: $trimble-gold;
-      }
-    }
-  }
-
-  &.transparent-dark-text {
-    color: $trimble-dark-gray;
-    background-color: unset;
-  }
-
-  &.center {
-    text-align: center;
-
-    .cta-buttons {
-      justify-content: center;
-    }
-  }
-
-  .header {
-    width: 100%;
-    margin: 0;
-
-    &:not(:last-child) {
-      margin-bottom: 12px;
-    }
-
-    .eyebrow {
-      margin: 0;
-      font-weight: 700;
-      font-size: $eyebrow-font-size;
-      line-height: 18px;
-      text-transform: uppercase;
-
-      &:not(:last-child) {
-        margin-bottom: 6px;
-      }
-
-      @media only screen and (max-width: $breakpoint-xs) {
-        font-size: $eyebrow-font-size-mobile;
-        line-height: 19px;
-      }
-    }
-
-    .heading {
-      margin: 0;
-      font: "Benton Sans for Trimble W05";
-      font-weight: $very-bold-font-weight;
-      font-size: $heading-3-size !important;
-      line-height: 38px;
-
-      &:not(:last-child) {
-        margin-bottom: 12px;
-      }
-
-      @media only screen and (max-width: $breakpoint-xs) {
-        line-height: 32px;
-        font-size: $heading-3-size-mobile;
-      }
-    }
-
-    .subheading {
-      margin: 0;
-      font-weight: $medium-font-weight;
-      font-size: $subheading-size;
-      line-height: 25px;
-
-      @media only screen and (max-width: $breakpoint-xs) {
-        font-size: $subheading-size-mobile;
-      }
-      p {
-        line-height: 25px;
-      }
-    }
-  }
-
-  .content {
-    font-weight: 400 !important;
-    margin: 0;
-    font-weight: $regular-font-weight;
-    font-size: $body-font-size;
-    line-height: 22px;
-
-    @media only screen and (max-width: $breakpoint-xs) {
-      font-size: $body-font-size-mobile;
-      line-height: 23px;
-    }
-
-    ul,
-    ol {
-      width: auto;
-      display: inline-block;
-
-      li {
-        text-align: left;
-        list-style: none;
-        position: relative;
-
-        &:before {
-          content: "\26AC";
-          color: $trimble-blue;
-          font-weight: bold;
-          display: inline-block;
-          width: 1rem;
-          margin-left: -1rem;
-        }
-      }
-    }
-
-    > * {
-      margin: 0;
-
-      &:not(:last-child) {
-        margin: 0 0 10px 0;
-      }
-    }
-
-    > p {
-      font-size: $body-font-size;
-      line-height: 22px;
-    }
-
-    &__bullet-theme {
-      &--dark,
-      &--dark-navy,
-      &--dark-gray,
-      &--transparent-light-text {
-        > ul {
-          li:before {
-            color: $white;
-          }
-        }
-      }
-
-      &--transparent-dark-text {
-        > ul {
-          li:before {
-            color: $trimble-blue;
-          }
-        }
-      }
-    }
-  }
-
-  .cta-buttons {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    a, button {
-      margin: 40px 32px 0 0;
-      height: unset !important;
-      white-space: pre-wrap;
-    }
-
-    &--multiple {
-      a.ter-button + a.ter-button, button.ter-button + button.ter-button {
-        margin-top: 40px;
-      }
-      @media (max-width: $breakpoint-xs) {
-        flex-direction: column;
-        width: 230px;
-      }
-    }
-
-    &--center {
-      @media screen and (max-width: $breakpoint-xs) {
-        margin: 0 auto;
-      }
-      .ter-button {
-        @media screen and (max-width: $breakpoint-xs) {
-          max-width: 100%;
-          min-width: 200px;
-        }
-  
-        &--primary--1 {
-          @media screen and (max-width: $breakpoint-xs) {
-            margin: 40px auto 0px !important;
-          }
-        }
-  
-        &--primary--2 {
-          margin-right: 0px !important;
-  
-          @media screen and (max-width: $breakpoint-xs) {
-            margin: 40px auto 0px !important;
-          }
-        }
-      }
-    }
-
-    &.text-links {
-      flex-direction: column;
-      grid-gap: 24px;
-      font-size: $body-font-size;
-      line-height: 24px;
-      margin: 0;
-
-      @media (max-width: $breakpoint-xs) {
-        font-size: $body-font-size-mobile;
-        line-height: 24px;
-      }
-
-      &.links-dark {
-        .text-link-container {
-          .text-link {
-            color: $white;
-            font-weight: 500 !important;
-            &:after {
-              background-image: url("../../images/internal-arrow-white-theme.svg");
-            }
-          }
-
-          .text-link:hover,
-          .text-link-external:hover {
-            border-bottom: 3px solid $dark-theme-link-list-underscore;
-          }
-          .text-link-external {
-            font-weight: 500 !important;
-            color: $white;
-
-            &:after {
-              background-image: url("../../images/external-arrow-white-theme.svg");
-            }
-          }
-        }
-      }
-
-      .text-link-container {
-        &:first-child {
-          margin-top: 40px;
-        }
-
-        a {
-          margin: 0;
-        }
-
-        .text-link {
-          font-weight: 500 !important;
-          position: relative;
-          text-decoration: none;
-          color: $trimble-dark-gray;
-          border-bottom: 3px solid $trimble-gold;
-
-          &:after {
-            position: absolute;
-            bottom: -3px;
-            right: -32px;
-            display: block;
-            content: "";
-            width: 16px;
-            height: 16px;
-            background-image: url("../../images/internal-arrow.svg");
-            background-repeat: no-repeat;
-            background-position: center;
-          }
-        }
-
-        .text-link:hover,
-        .text-link-external:hover {
-          border-bottom: 3px solid $trimble-blue;
-        }
-
-        .text-link-external {
-          font-weight: 500 !important;
-          position: relative;
-          text-decoration: none;
-          color: $trimble-dark-gray;
-          border-bottom: 3px solid $trimble-gold;
-
-          &:after {
-            position: absolute;
-            bottom: -3px;
-            right: -32px;
-            display: block;
-            content: "";
-            width: 16px;
-            height: 16px;
-            background-image: url("../../images/external-arrow.svg");
-            background-repeat: no-repeat;
-            background-position: center;
-          }
-        }
-      }
-    }
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.cta-container {
+  width: 100%;
+  font-family: "Benton Sans for Trimble W05";
+  color: $trimble-dark-gray;
+
+  &.light {
+    color: white;
+  }
+
+  &.dark {
+    color: white;
+    background-color: $trimble-blue;
+  }
+
+  &.dark-gray {
+    color: white;
+    background-color: $trimble-dark-gray;
+  }
+
+  &.dark-navy {
+    color: white;
+    background-color: $dark-navy;
+  }
+
+  &.transparent-light-text {
+    background-color: unset;
+    color: inherit;
+
+    @media screen and (min-width: $breakpoint-xs) {
+      color: $white;
+    }
+
+    .content {
+      font-weight: 400 !important;
+      a {
+        color: $trimble-gold;
+      }
+    }
+  }
+
+  &.transparent-dark-text {
+    color: $trimble-dark-gray;
+    background-color: unset;
+  }
+
+  &.center {
+    text-align: center;
+
+    .cta-buttons {
+      justify-content: center;
+    }
+  }
+
+  .header {
+    width: 100%;
+    margin: 0;
+
+    &:not(:last-child) {
+      margin-bottom: 12px;
+    }
+
+    .eyebrow {
+      margin: 0;
+      font-weight: 700;
+      font-size: $eyebrow-font-size;
+      line-height: 18px;
+      text-transform: uppercase;
+
+      &:not(:last-child) {
+        margin-bottom: 6px;
+      }
+
+      @media only screen and (max-width: $breakpoint-xs) {
+        font-size: $eyebrow-font-size-mobile;
+        line-height: 19px;
+      }
+    }
+
+    .heading {
+      margin: 0;
+      font: "Benton Sans for Trimble W05";
+      font-weight: $very-bold-font-weight;
+      font-size: $heading-3-size !important;
+      line-height: 38px;
+
+      &:not(:last-child) {
+        margin-bottom: 12px;
+      }
+
+      @media only screen and (max-width: $breakpoint-xs) {
+        line-height: 32px;
+        font-size: $heading-3-size-mobile;
+      }
+    }
+
+    .subheading {
+      margin: 0;
+      font-weight: $medium-font-weight;
+      font-size: $subheading-size;
+      line-height: 25px;
+
+      @media only screen and (max-width: $breakpoint-xs) {
+        font-size: $subheading-size-mobile;
+      }
+      p {
+        line-height: 25px;
+      }
+    }
+  }
+
+  .content {
+    font-weight: 400 !important;
+    margin: 0;
+    font-weight: $regular-font-weight;
+    font-size: $body-font-size;
+    line-height: 22px;
+
+    @media only screen and (max-width: $breakpoint-xs) {
+      font-size: $body-font-size-mobile;
+      line-height: 23px;
+    }
+
+    ul,
+    ol {
+      width: auto;
+      display: inline-block;
+
+      li {
+        text-align: left;
+        list-style: none;
+        position: relative;
+
+        &:before {
+          content: "\26AC";
+          color: $trimble-blue;
+          font-weight: bold;
+          display: inline-block;
+          width: 1rem;
+          margin-left: -1rem;
+        }
+      }
+    }
+
+    > * {
+      margin: 0;
+
+      &:not(:last-child) {
+        margin: 0 0 10px 0;
+      }
+    }
+
+    > p {
+      font-size: $body-font-size;
+      line-height: 22px;
+    }
+
+    &__bullet-theme {
+      &--dark,
+      &--dark-navy,
+      &--dark-gray,
+      &--transparent-light-text {
+        > ul {
+          li:before {
+            color: $white;
+          }
+        }
+      }
+
+      &--transparent-dark-text {
+        > ul {
+          li:before {
+            color: $trimble-blue;
+          }
+        }
+      }
+    }
+  }
+
+  .cta-buttons {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    a, button {
+      margin: 40px 32px 0 0;
+      height: unset !important;
+      white-space: pre-wrap;
+    }
+
+    &--multiple {
+      a.ter-button + a.ter-button, button.ter-button + button.ter-button {
+        margin-top: 40px;
+      }
+      @media (max-width: $breakpoint-xs) {
+        flex-direction: column;
+        width: 230px;
+      }
+    }
+
+    &--center {
+      @media screen and (max-width: $breakpoint-xs) {
+        margin: 0 auto;
+      }
+      .ter-button {
+        @media screen and (max-width: $breakpoint-xs) {
+          max-width: 100%;
+          min-width: 200px;
+        }
+  
+        &--primary--1 {
+          @media screen and (max-width: $breakpoint-xs) {
+            margin: 40px auto 0px !important;
+          }
+        }
+  
+        &--primary--2 {
+          margin-right: 0px !important;
+  
+          @media screen and (max-width: $breakpoint-xs) {
+            margin: 40px auto 0px !important;
+          }
+        }
+      }
+    }
+
+    &.text-links {
+      flex-direction: column;
+      grid-gap: 24px;
+      font-size: $body-font-size;
+      line-height: 24px;
+      margin: 0;
+
+      @media (max-width: $breakpoint-xs) {
+        font-size: $body-font-size-mobile;
+        line-height: 24px;
+      }
+
+      &.links-dark {
+        .text-link-container {
+          .text-link {
+            color: $white;
+            font-weight: 500 !important;
+            &:after {
+              background-image: url("../../images/internal-arrow-white-theme.svg");
+            }
+          }
+
+          .text-link:hover,
+          .text-link-external:hover {
+            border-bottom: 3px solid $dark-theme-link-list-underscore;
+          }
+          .text-link-external {
+            font-weight: 500 !important;
+            color: $white;
+
+            &:after {
+              background-image: url("../../images/external-arrow-white-theme.svg");
+            }
+          }
+        }
+      }
+
+      .text-link-container {
+        &:first-child {
+          margin-top: 40px;
+        }
+
+        a {
+          margin: 0;
+        }
+
+        .text-link {
+          font-weight: 500 !important;
+          position: relative;
+          text-decoration: none;
+          color: $trimble-dark-gray;
+          border-bottom: 3px solid $trimble-gold;
+
+          &:after {
+            position: absolute;
+            bottom: -3px;
+            right: -32px;
+            display: block;
+            content: "";
+            width: 16px;
+            height: 16px;
+            background-image: url("../../images/internal-arrow.svg");
+            background-repeat: no-repeat;
+            background-position: center;
+          }
+        }
+
+        .text-link:hover,
+        .text-link-external:hover {
+          border-bottom: 3px solid $trimble-blue;
+        }
+
+        .text-link-external {
+          font-weight: 500 !important;
+          position: relative;
+          text-decoration: none;
+          color: $trimble-dark-gray;
+          border-bottom: 3px solid $trimble-gold;
+
+          &:after {
+            position: absolute;
+            bottom: -3px;
+            right: -32px;
+            display: block;
+            content: "";
+            width: 16px;
+            height: 16px;
+            background-image: url("../../images/external-arrow.svg");
+            background-repeat: no-repeat;
+            background-position: center;
+          }
+        }
+      }
+    }
+  }
+}