luna-one 3.1.589 → 3.1.591

package/dist/luna/components/ComparisonTable/ComparisonTable.scss

@@ -1,332 +1,332 @@
-@import "../../../global-styles/terra.scss";
-
-.ter-comparison-table {
-  border-collapse: collapse;
-  overscroll-behavior: contain;
-  font-size: $eyebrow-font-size;
-  display: block;
-  position: relative;
-  max-width: 1200px;
-  width: 100%;
-  * {
-    overscroll-behavior: contain;
-  }
-  th {
-    padding: 0;
-  }
-  &__caption {
-    text-align: left;
-    margin-bottom: 45px;
-    display: block;
-    max-width: 560px;
-  }
-  &__divider {
-    display: block;
-    background-color: transparent;
-    border-bottom: 1px dashed #FBC3C3;
-    margin-bottom: 45px;
-    &-wrapper {
-      display: block;
-      width: 100%;
-    }
-  }
-  &__inner-shadow {
-    box-shadow: 0 0 10px rgba(0,0,0,0.55);
-    clip-path: inset(0px 0px 0px -10px);
-    position: absolute; 
-    width: 15px;
-    right: -15px;
-    z-index: 10;
-    bottom: 0px;
-    pointer-events: none;
-    &--horz-scrollbar-visible {
-      // adjusts position to account for vertical scrollbar
-      right: 2px;
-    }
-    &--vert-scrollbar-visible {
-      // adjusts position to account for horizontal scrollbar
-      bottom: 17px;
-    }
-  }
-  &__skip {    
-    a {
-      color: transparent;
-      font-size: $body-font-size;
-      font-weight: bold;
-      display: inline-block;
-      margin-bottom: 10px;
-      &:focus {
-        color: $trimble-blue;
-      }
-    }
-  }
-  &__wrapper {
-    width: 100%;
-    overflow-x: scroll;
-    overflow-y: scroll;
-    -webkit-overflow-scrolling: auto;
-    max-height: 800px;
-    -webkit-overflow-scrolling: auto;
-    position: relative;
-    display: block;
-  }
-  &__blank {
-    position: -webkit-sticky;
-    position: sticky;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    z-index: 10;
-    overscroll-behavior: none;
-    background-color: $white;
-    -webkit-overflow-scrolling: auto;
-    border-left: 1px solid $white;
-    &>span {
-      display: block;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      position: absolute;
-      background-color: $white;
-      border-bottom: 1px solid $trimble-blue;
-      border-right: 1px solid $trimble-blue;
-      width: 161px;
-      border-left: 1px solid $white;
-    }
-  }
-  &__row {
-    &--header {
-      font-weight: 600;
-      top: 60px;
-      left: 0;
-      right: 0;
-      z-index: 5;
-      position: sticky;
-    }
-  }
-  &__group-title {
-    height: 60px; // to allow for two lines of text
-    left: 0;
-    right: 0;
-    z-index: 5;
-    top: 0;
-    position: sticky;
-  }
-  &__group-title > th:not(th.ter-comparison-table__blank) {
-    color: $white;
-    font-weight: 600;
-    background-color: $trimble-blue;
-    font-size: 13px;
-    line-height: 1;
-    text-align: center;
-    &:nth-child(odd){
-      background-color: $dark-navy;
-    }
-  }
-  &__group-title .ter-comparison-table__comparison-cell {
-    padding: 10px;
-    line-height: 1.3;
-    height: 60px;
-  }
-  &__group-title .ter-comparison-table__blank > span {
-    background-color: $white;
-    border-bottom: none;
-
-  }
-  &__comparison-cell {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 20px 10px;
-    line-height: 1.5;
-    text-align: center;
-    &--wide {
-      min-width: 260px;
-    }
-    &--medium {
-      min-width: 180px;
-    }
-  }
-  &__heading:nth-child(odd) {
-    background-color: $white;
-  }
-  &__heading:nth-child(even) {
-    background-color: $gray--1;
-  }
-  &__heading .ter-comparison-table__comparison-cell {
-    min-height: 125px;
-    border-bottom: 1px solid $trimble-blue;
-  }
-  &__product {
-    border-bottom: 1px solid rgba($trimble-blue, 0.3);
-    td:nth-child(even) {
-      background-color: $gray--1;
-    }
-    &-wrapper {
-      display: block;
-      height: 100%;
-    }
-    &-column {
-      position: -webkit-sticky;
-      position: sticky;
-      left: 0;
-      .ter-comparison-table__comparison-cell {
-        border-right: 1px solid $trimble-blue;
-        width: 160px;
-        left: 0;
-        min-height: 110px;
-        background-color: $white;
-        text-align: left;
-        @media screen and (min-width: $breakpoint-sm) {
-          width: 160px;
-        }
-        img {
-          margin-bottom: 5px;
-        }
-      }
-    }
-    &-info {
-      align-items: flex-start;
-      padding-left: 0;
-      padding-right: 15px;
-      position: absolute;
-      left: 0;
-      right: 0px;
-      bottom: 0;
-      top: 0;
-      &--with-tag {
-        padding-top: 30px;
-      }
-      &-wrapper {
-        display: flex;
-        align-items: flex-start;
-        justify-content: left;
-        flex-direction: column;
-      }
-      &-hidden {
-        opacity: 0;
-        display: block;
-        position: relative;
-        visibility: hidden;
-      }
-    }
-    &-tag {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      background-color: $trimble-green;
-      color: $white;
-      padding: 5px 10px;
-      text-align: center;
-      text-transform: uppercase;
-      line-height: 1;
-    }
-    &-title {
-      font-weight: 600;
-      font-size: $body-font-size;
-      display: inline-block;
-      position: relative;
-      text-decoration: none;
-      color: $trimble-dark-gray;
-      margin-bottom: 5px;
-      &:hover,
-      &:active,
-      &:focus,
-      &:active:hover,
-      &:focus:hover {
-        color: $trimble-dark-gray;
-        text-decoration: none;
-        font-weight: 600;
-      }
-      &::before {
-        position: absolute;
-        border-bottom: 2px solid $trimble-gold;
-        content: "";
-        width: 100%;
-        bottom: 0;
-        left: 0;
-        right: 0;
-      }
-      &--link::after {
-        position: absolute;
-        content: "";
-        bottom: 0px;
-        right: -25px;
-        background-image: url('../../images/arrow-left-circle.svg');
-        display: block;
-        transform: rotate(180deg);
-        width: 16px;
-        height: 16px;
-        scale: 0.9;
-      }
-    }
-    &-subheading {
-      font-weight: 600;
-      line-height: 1.1;
-      &+.ter-comparison-table__product-text {
-        margin-top: 5px;
-      }
-    }
-    &-text {
-      font-weight: 400;
-    }
-  }
-  &__tooltip {
-    display: block;
-    margin-top: 5px;
-    position: relative;
-    width: 100%;
-    &-inner {
-      position: relative;
-      padding: 15px 25px 15px 20px;
-      z-index: 2;
-    }
-    &-text {
-      display: none;
-      position: absolute;
-      border: 1px solid $trimble-dark-gray;
-      min-width: 300px;
-      width: 100%;
-      text-align: left;
-      font-size: $body-font-size;
-      font-weight: normal;
-      background-color: $white;
-      margin-top: 15px;
-      margin-left: -7px;
-      z-index: 4;
-      &:before,
-      &:after {
-        width: 0;
-        height: 0;
-        border-left: 15px solid transparent;
-        border-right: 15px solid transparent;
-        border-bottom: 15px solid white;
-        position: absolute;
-        top: -14px;
-        left: 18px;
-        content: "";
-        z-index: 2;
-      }
-      &:after {
-        border-bottom-color: $trimble-dark-gray;
-        z-index: 1;
-        top: -15px;
-      }
-    }
-    &-icon {
-      cursor: pointer;
-    }
-    &--open {
-      display: block;
-    }
-    &-close {
-      position: absolute;
-      top: 7px;
-      right: 7px;
-      cursor: pointer;
-      z-index: 5;
-    }
-  }
+@import "../../../global-styles/terra.scss";
+
+.ter-comparison-table {
+  border-collapse: collapse;
+  overscroll-behavior: contain;
+  font-size: $eyebrow-font-size;
+  display: block;
+  position: relative;
+  max-width: 1200px;
+  width: 100%;
+  * {
+    overscroll-behavior: contain;
+  }
+  th {
+    padding: 0;
+  }
+  &__caption {
+    text-align: left;
+    margin-bottom: 45px;
+    display: block;
+    max-width: 560px;
+  }
+  &__divider {
+    display: block;
+    background-color: transparent;
+    border-bottom: 1px dashed #FBC3C3;
+    margin-bottom: 45px;
+    &-wrapper {
+      display: block;
+      width: 100%;
+    }
+  }
+  &__inner-shadow {
+    box-shadow: 0 0 10px rgba(0,0,0,0.55);
+    clip-path: inset(0px 0px 0px -10px);
+    position: absolute; 
+    width: 15px;
+    right: -15px;
+    z-index: 10;
+    bottom: 0px;
+    pointer-events: none;
+    &--horz-scrollbar-visible {
+      // adjusts position to account for vertical scrollbar
+      right: 2px;
+    }
+    &--vert-scrollbar-visible {
+      // adjusts position to account for horizontal scrollbar
+      bottom: 17px;
+    }
+  }
+  &__skip {    
+    a {
+      color: transparent;
+      font-size: $body-font-size;
+      font-weight: bold;
+      display: inline-block;
+      margin-bottom: 10px;
+      &:focus {
+        color: $trimble-blue;
+      }
+    }
+  }
+  &__wrapper {
+    width: 100%;
+    overflow-x: scroll;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: auto;
+    max-height: 800px;
+    -webkit-overflow-scrolling: auto;
+    position: relative;
+    display: block;
+  }
+  &__blank {
+    position: -webkit-sticky;
+    position: sticky;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    z-index: 10;
+    overscroll-behavior: none;
+    background-color: $white;
+    -webkit-overflow-scrolling: auto;
+    border-left: 1px solid $white;
+    &>span {
+      display: block;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      position: absolute;
+      background-color: $white;
+      border-bottom: 1px solid $trimble-blue;
+      border-right: 1px solid $trimble-blue;
+      width: 161px;
+      border-left: 1px solid $white;
+    }
+  }
+  &__row {
+    &--header {
+      font-weight: 600;
+      top: 60px;
+      left: 0;
+      right: 0;
+      z-index: 5;
+      position: sticky;
+    }
+  }
+  &__group-title {
+    height: 60px; // to allow for two lines of text
+    left: 0;
+    right: 0;
+    z-index: 5;
+    top: 0;
+    position: sticky;
+  }
+  &__group-title > th:not(th.ter-comparison-table__blank) {
+    color: $white;
+    font-weight: 600;
+    background-color: $trimble-blue;
+    font-size: 13px;
+    line-height: 1;
+    text-align: center;
+    &:nth-child(odd){
+      background-color: $dark-navy;
+    }
+  }
+  &__group-title .ter-comparison-table__comparison-cell {
+    padding: 10px;
+    line-height: 1.3;
+    height: 60px;
+  }
+  &__group-title .ter-comparison-table__blank > span {
+    background-color: $white;
+    border-bottom: none;
+
+  }
+  &__comparison-cell {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px 10px;
+    line-height: 1.5;
+    text-align: center;
+    &--wide {
+      min-width: 260px;
+    }
+    &--medium {
+      min-width: 180px;
+    }
+  }
+  &__heading:nth-child(odd) {
+    background-color: $white;
+  }
+  &__heading:nth-child(even) {
+    background-color: $gray--1;
+  }
+  &__heading .ter-comparison-table__comparison-cell {
+    min-height: 125px;
+    border-bottom: 1px solid $trimble-blue;
+  }
+  &__product {
+    border-bottom: 1px solid rgba($trimble-blue, 0.3);
+    td:nth-child(even) {
+      background-color: $gray--1;
+    }
+    &-wrapper {
+      display: block;
+      height: 100%;
+    }
+    &-column {
+      position: -webkit-sticky;
+      position: sticky;
+      left: 0;
+      .ter-comparison-table__comparison-cell {
+        border-right: 1px solid $trimble-blue;
+        width: 160px;
+        left: 0;
+        min-height: 110px;
+        background-color: $white;
+        text-align: left;
+        @media screen and (min-width: $breakpoint-sm) {
+          width: 160px;
+        }
+        img {
+          margin-bottom: 5px;
+        }
+      }
+    }
+    &-info {
+      align-items: flex-start;
+      padding-left: 0;
+      padding-right: 15px;
+      position: absolute;
+      left: 0;
+      right: 0px;
+      bottom: 0;
+      top: 0;
+      &--with-tag {
+        padding-top: 30px;
+      }
+      &-wrapper {
+        display: flex;
+        align-items: flex-start;
+        justify-content: left;
+        flex-direction: column;
+      }
+      &-hidden {
+        opacity: 0;
+        display: block;
+        position: relative;
+        visibility: hidden;
+      }
+    }
+    &-tag {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      background-color: $trimble-green;
+      color: $white;
+      padding: 5px 10px;
+      text-align: center;
+      text-transform: uppercase;
+      line-height: 1;
+    }
+    &-title {
+      font-weight: 600;
+      font-size: $body-font-size;
+      display: inline-block;
+      position: relative;
+      text-decoration: none;
+      color: $trimble-dark-gray;
+      margin-bottom: 5px;
+      &:hover,
+      &:active,
+      &:focus,
+      &:active:hover,
+      &:focus:hover {
+        color: $trimble-dark-gray;
+        text-decoration: none;
+        font-weight: 600;
+      }
+      &::before {
+        position: absolute;
+        border-bottom: 2px solid $trimble-gold;
+        content: "";
+        width: 100%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+      &--link::after {
+        position: absolute;
+        content: "";
+        bottom: 0px;
+        right: -25px;
+        background-image: url('../../images/arrow-left-circle.svg');
+        display: block;
+        transform: rotate(180deg);
+        width: 16px;
+        height: 16px;
+        scale: 0.9;
+      }
+    }
+    &-subheading {
+      font-weight: 600;
+      line-height: 1.1;
+      &+.ter-comparison-table__product-text {
+        margin-top: 5px;
+      }
+    }
+    &-text {
+      font-weight: 400;
+    }
+  }
+  &__tooltip {
+    display: block;
+    margin-top: 5px;
+    position: relative;
+    width: 100%;
+    &-inner {
+      position: relative;
+      padding: 15px 25px 15px 20px;
+      z-index: 2;
+    }
+    &-text {
+      display: none;
+      position: absolute;
+      border: 1px solid $trimble-dark-gray;
+      min-width: 300px;
+      width: 100%;
+      text-align: left;
+      font-size: $body-font-size;
+      font-weight: normal;
+      background-color: $white;
+      margin-top: 15px;
+      margin-left: -7px;
+      z-index: 4;
+      &:before,
+      &:after {
+        width: 0;
+        height: 0;
+        border-left: 15px solid transparent;
+        border-right: 15px solid transparent;
+        border-bottom: 15px solid white;
+        position: absolute;
+        top: -14px;
+        left: 18px;
+        content: "";
+        z-index: 2;
+      }
+      &:after {
+        border-bottom-color: $trimble-dark-gray;
+        z-index: 1;
+        top: -15px;
+      }
+    }
+    &-icon {
+      cursor: pointer;
+    }
+    &--open {
+      display: block;
+    }
+    &-close {
+      position: absolute;
+      top: 7px;
+      right: 7px;
+      cursor: pointer;
+      z-index: 5;
+    }
+  }
 }