luna-one 3.1.592 → 3.1.593

package/dist/luna/components/TimeBasedList/TimeBasedList.scss

@@ -1,394 +1,394 @@
-@import "../../../global-styles/terra.scss";
-
-.time-based-list-container {
-  width: 100%;
-  color: $trimble-blue;
-  font-family: $header-font-family;
-
-  .header {
-    .heading {
-      width: 100%;
-      padding-bottom: 8px;
-      margin-bottom: 24px;
-      border-bottom: 1px solid $gravel-gray;
-      font-size: $card-title-size;
-      line-height: 30px;
-      color: $trimble-dark-gray;
-      font-family: $very-bold-font-family;
-    }
-
-    .col-headings {
-      .col-heading {
-        box-sizing: border-box;
-        font-family: $bold-font-family;
-        font-size: $body-font-size;
-        line-height: 22px;
-        color: $trimble-dark-gray;
-      }
-    }
-  }
-
-  .card {
-    border-top: 1px solid $gray-0;
-
-    .group {
-      box-sizing: border-box;
-      display: flex;
-      align-items: flex-start;
-    }
-
-    .info-group {
-      .industry-category {
-        margin-bottom: 16px;
-        font-family: $bold-font-family;
-        font-size: $eyebrow-font-size;
-        line-height: 18px;
-        text-transform: uppercase;
-        color: $trimble-dark-gray;
-      }
-
-      .title {
-        position: relative;
-        font-size: $subheading-size;
-        line-height: 27px;
-        color: $trimble-blue;
-        text-decoration: none;
-        border-bottom: 2px solid $trimble-blue;
-
-        @media (max-width: $breakpoint-xs) {
-          font-size: $subheading-size-mobile;
-          line-height: 26px;
-        }
-
-        &:after {
-          position: absolute;
-          left: calc(100% + 12px);
-          bottom: 0;
-          display: block;
-          width: 20px;
-          height: 20px;
-          content: "";
-          background-image: url('../../images/internal-arrow-blue.svg');
-
-          background-size: 100%;
-          background-repeat: no-repeat;
-        }
-      }
-
-      .title:hover {
-        color: $dark-navy;
-      }
-
-
-      .title-external {
-        position: relative;
-        font-size: $subheading-size;
-        line-height: 27px;
-        color: $trimble-blue;
-        text-decoration: none;
-        border-bottom: 2px solid $trimble-blue;
-
-        @media (max-width: $breakpoint-xs) {
-          font-size: $subheading-size-mobile;
-          line-height: 26px;
-        }
-
-        &:after {
-          position: absolute;
-          left: calc(100% + 12px);
-          bottom: -1px;
-          display: block;
-          width: 20px;
-          height: 20px;
-          content: "";
-          background-image: url('../../images/external-arrow-blue.svg');
-
-          background-size: 100%;
-          background-repeat: no-repeat;
-        }
-      }
-
-      .title-external:hover {
-        color: $dark-navy;
-      }
-    }
-
-    .docs {
-      width: 100%;
-      margin-top: 24px;
-      font-size: $body-font-size;
-      line-height: 22px;
-      color: $trimble-dark-gray;
-
-      .label {
-        font-family: $bold-font-family;
-      }
-
-      .link {
-        margin: 0 3px;
-        color: $trimble-blue;
-      }
-
-      .link:hover {        
-        color: $dark-navy;
-      }
-
-      .download-icon {
-        margin-right: 3px;
-        position: relative;
-        bottom: -1px;
-        left: 2px;
-
-        svg {
-          width: 16px;
-          height: 16px;
-        }    
-      }
-    }
-  }
-
-  .long-details {
-    &:not(:last-child) {
-      margin-bottom: 47px;
-    }
-
-    .header {
-      width: 100%;
-      padding-bottom: 11px;
-
-      @media (max-width: $breakpoint-xs) {
-        padding-bottom: 16px;
-      }
-
-      .col-headings {
-        width: 100%;
-        display: flex;
-        align-items: flex-end;
-        justify-content: space-between;
-
-        .event {
-          padding-right: 16px;
-        }
-      }
-    }
-
-    .cards {
-      .card {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        padding: 40px 0;
-
-        @media (max-width: $breakpoint-xs) {
-          margin-bottom: 50px;
-          padding: 24px 0;
-          flex-wrap: wrap;
-          justify-content: flex-start;
-        }
-
-        .info-group {
-          width: 84%;
-
-          @media (max-width: $breakpoint-xs) {
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-          }
-
-          .thumbnail-container {
-            width: 200px;
-            height: 180px;
-            box-sizing: border-box;
-            margin-right: 45px;
-
-            @media (min-width: $breakpoint-xs) {
-              .ter-focused-image-container {
-                img {
-                  object-fit: cover;
-                }
-              }
-            }
-
-            .ter-focused-image-container {
-              height: 100% !important;
-
-              @media (max-width: $breakpoint-xs) {
-                padding-bottom: 0% !important;
-              }
-            }
-
-            @media (max-width: $breakpoint-md) {
-              width: 200px;
-              height: 180px;
-              margin-bottom: 24px;
-              padding: 0;
-            }
-
-            @media (max-width: $breakpoint-xs) {
-              width: 100%;
-              height: 180px;
-              margin-bottom: 24px;
-              padding: 0;
-            }
-
-            img {
-              inset: 0 !important;
-              width: 100%;
-            }
-
-          }
-
-          .details {
-            width: 74%;
-            display: flex;
-            flex-wrap: wrap;
-            box-sizing: border-box;
-            padding-right: 45px;
-            
-            .industry-category {
-              width: 100%;
-              margin-bottom: 16px;
-              font-size: $eyebrow-font-size;
-              line-height: 18px;
-              font-weight: 900;
-              text-transform: uppercase;
-              color: $trimble-dark-gray;
-            }
-
-            .date {
-              order: -1;
-              width: 100%;
-              margin-bottom: 25px;
-              font-size: $body-font-size;
-              line-height: 22px;
-              color: $trimble-dark-gray;
-
-              @media (max-width: $breakpoint-xs) {
-                margin-bottom: 8px;
-              }
-            }
-
-            .title {
-              display: inline-block;
-              margin-bottom: 16px;
-            }
-
-            .description {
-              width: 100%;
-              font-family: $light-font-family;
-              font-size: $body-font-size;
-              line-height: 22px;
-              color: $trimble-dark-gray;
-
-              * {
-                font-family: $light-font-family;
-                font-size: $body-font-size;
-                line-height: 22px;
-                color: $trimble-dark-gray;  
-              }
-
-              *:last-child {
-                margin-bottom: 0;
-                padding-bottom: 0;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .short-details {
-    &:not(:last-child) {
-      margin-bottom: 47px;
-    }
-
-    .header {
-      width: 100%;
-
-      .col-headings {
-        width: 100%;
-        margin-bottom: 15px;
-        display: flex;
-        justify-content: space-between;
-
-        .summary {
-          width: 57%;
-        }
-
-        .dates {
-          width: 25%;
-
-          @media (max-width: $breakpoint-xs) {
-            display: none;
-          }
-        }
-      }
-    }
-
-    .cards {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-
-      .card {
-        width: 100%;
-        padding: 32px 0;
-        display: flex;
-        flex-wrap: wrap;
-
-        @media (min-width: $breakpoint-xs) {
-          &:not(:last-child) {
-            margin-bottom: 17px;
-          }
-        }
-
-        @media (max-width: $breakpoint-xs) {
-
-          &:not(:last-child) {
-            margin-bottom: 50px;
-          }
-        }
-
-        .info-group {
-          width: 100%;
-          justify-content: space-between;
-          display: flex;
-          justify-content: space-between;
-
-          @media (max-width: $breakpoint-xs) {
-            flex-wrap: wrap;
-            width: 100%;
-          }
-        }
-
-        .details {
-          width: calc(75% - 30px);
-
-          @media (max-width: $breakpoint-xs) {
-            width: 100%;
-          }
-        }
-
-        .date {
-          width: 25%;
-          display: flex;
-          align-items: center;
-          margin-left: 30px;
-          font-size: $body-font-size;
-          line-height: 24px;
-          color: $trimble-dark-gray;
-
-
-          @media (max-width: $breakpoint-xs) {
-            order: -1;
-            width: 100%;
-            margin-left: 0;
-            margin-bottom: 8px;
-          }
-        }
-      }
-    }
-  }
-}
-
+@import "../../../global-styles/terra.scss";
+
+.time-based-list-container {
+  width: 100%;
+  color: $trimble-blue;
+  font-family: $header-font-family;
+
+  .header {
+    .heading {
+      width: 100%;
+      padding-bottom: 8px;
+      margin-bottom: 24px;
+      border-bottom: 1px solid $gravel-gray;
+      font-size: $card-title-size;
+      line-height: 30px;
+      color: $trimble-dark-gray;
+      font-family: $very-bold-font-family;
+    }
+
+    .col-headings {
+      .col-heading {
+        box-sizing: border-box;
+        font-family: $bold-font-family;
+        font-size: $body-font-size;
+        line-height: 22px;
+        color: $trimble-dark-gray;
+      }
+    }
+  }
+
+  .card {
+    border-top: 1px solid $gray-0;
+
+    .group {
+      box-sizing: border-box;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .info-group {
+      .industry-category {
+        margin-bottom: 16px;
+        font-family: $bold-font-family;
+        font-size: $eyebrow-font-size;
+        line-height: 18px;
+        text-transform: uppercase;
+        color: $trimble-dark-gray;
+      }
+
+      .title {
+        position: relative;
+        font-size: $subheading-size;
+        line-height: 27px;
+        color: $trimble-blue;
+        text-decoration: none;
+        border-bottom: 2px solid $trimble-blue;
+
+        @media (max-width: $breakpoint-xs) {
+          font-size: $subheading-size-mobile;
+          line-height: 26px;
+        }
+
+        &:after {
+          position: absolute;
+          left: calc(100% + 12px);
+          bottom: 0;
+          display: block;
+          width: 20px;
+          height: 20px;
+          content: "";
+          background-image: url('../../images/internal-arrow-blue.svg');
+
+          background-size: 100%;
+          background-repeat: no-repeat;
+        }
+      }
+
+      .title:hover {
+        color: $dark-navy;
+      }
+
+
+      .title-external {
+        position: relative;
+        font-size: $subheading-size;
+        line-height: 27px;
+        color: $trimble-blue;
+        text-decoration: none;
+        border-bottom: 2px solid $trimble-blue;
+
+        @media (max-width: $breakpoint-xs) {
+          font-size: $subheading-size-mobile;
+          line-height: 26px;
+        }
+
+        &:after {
+          position: absolute;
+          left: calc(100% + 12px);
+          bottom: -1px;
+          display: block;
+          width: 20px;
+          height: 20px;
+          content: "";
+          background-image: url('../../images/external-arrow-blue.svg');
+
+          background-size: 100%;
+          background-repeat: no-repeat;
+        }
+      }
+
+      .title-external:hover {
+        color: $dark-navy;
+      }
+    }
+
+    .docs {
+      width: 100%;
+      margin-top: 24px;
+      font-size: $body-font-size;
+      line-height: 22px;
+      color: $trimble-dark-gray;
+
+      .label {
+        font-family: $bold-font-family;
+      }
+
+      .link {
+        margin: 0 3px;
+        color: $trimble-blue;
+      }
+
+      .link:hover {        
+        color: $dark-navy;
+      }
+
+      .download-icon {
+        margin-right: 3px;
+        position: relative;
+        bottom: -1px;
+        left: 2px;
+
+        svg {
+          width: 16px;
+          height: 16px;
+        }    
+      }
+    }
+  }
+
+  .long-details {
+    &:not(:last-child) {
+      margin-bottom: 47px;
+    }
+
+    .header {
+      width: 100%;
+      padding-bottom: 11px;
+
+      @media (max-width: $breakpoint-xs) {
+        padding-bottom: 16px;
+      }
+
+      .col-headings {
+        width: 100%;
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+
+        .event {
+          padding-right: 16px;
+        }
+      }
+    }
+
+    .cards {
+      .card {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        padding: 40px 0;
+
+        @media (max-width: $breakpoint-xs) {
+          margin-bottom: 50px;
+          padding: 24px 0;
+          flex-wrap: wrap;
+          justify-content: flex-start;
+        }
+
+        .info-group {
+          width: 84%;
+
+          @media (max-width: $breakpoint-xs) {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+          }
+
+          .thumbnail-container {
+            width: 200px;
+            height: 180px;
+            box-sizing: border-box;
+            margin-right: 45px;
+
+            @media (min-width: $breakpoint-xs) {
+              .ter-focused-image-container {
+                img {
+                  object-fit: cover;
+                }
+              }
+            }
+
+            .ter-focused-image-container {
+              height: 100% !important;
+
+              @media (max-width: $breakpoint-xs) {
+                padding-bottom: 0% !important;
+              }
+            }
+
+            @media (max-width: $breakpoint-md) {
+              width: 200px;
+              height: 180px;
+              margin-bottom: 24px;
+              padding: 0;
+            }
+
+            @media (max-width: $breakpoint-xs) {
+              width: 100%;
+              height: 180px;
+              margin-bottom: 24px;
+              padding: 0;
+            }
+
+            img {
+              inset: 0 !important;
+              width: 100%;
+            }
+
+          }
+
+          .details {
+            width: 74%;
+            display: flex;
+            flex-wrap: wrap;
+            box-sizing: border-box;
+            padding-right: 45px;
+            
+            .industry-category {
+              width: 100%;
+              margin-bottom: 16px;
+              font-size: $eyebrow-font-size;
+              line-height: 18px;
+              font-weight: 900;
+              text-transform: uppercase;
+              color: $trimble-dark-gray;
+            }
+
+            .date {
+              order: -1;
+              width: 100%;
+              margin-bottom: 25px;
+              font-size: $body-font-size;
+              line-height: 22px;
+              color: $trimble-dark-gray;
+
+              @media (max-width: $breakpoint-xs) {
+                margin-bottom: 8px;
+              }
+            }
+
+            .title {
+              display: inline-block;
+              margin-bottom: 16px;
+            }
+
+            .description {
+              width: 100%;
+              font-family: $light-font-family;
+              font-size: $body-font-size;
+              line-height: 22px;
+              color: $trimble-dark-gray;
+
+              * {
+                font-family: $light-font-family;
+                font-size: $body-font-size;
+                line-height: 22px;
+                color: $trimble-dark-gray;  
+              }
+
+              *:last-child {
+                margin-bottom: 0;
+                padding-bottom: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .short-details {
+    &:not(:last-child) {
+      margin-bottom: 47px;
+    }
+
+    .header {
+      width: 100%;
+
+      .col-headings {
+        width: 100%;
+        margin-bottom: 15px;
+        display: flex;
+        justify-content: space-between;
+
+        .summary {
+          width: 57%;
+        }
+
+        .dates {
+          width: 25%;
+
+          @media (max-width: $breakpoint-xs) {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .cards {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .card {
+        width: 100%;
+        padding: 32px 0;
+        display: flex;
+        flex-wrap: wrap;
+
+        @media (min-width: $breakpoint-xs) {
+          &:not(:last-child) {
+            margin-bottom: 17px;
+          }
+        }
+
+        @media (max-width: $breakpoint-xs) {
+
+          &:not(:last-child) {
+            margin-bottom: 50px;
+          }
+        }
+
+        .info-group {
+          width: 100%;
+          justify-content: space-between;
+          display: flex;
+          justify-content: space-between;
+
+          @media (max-width: $breakpoint-xs) {
+            flex-wrap: wrap;
+            width: 100%;
+          }
+        }
+
+        .details {
+          width: calc(75% - 30px);
+
+          @media (max-width: $breakpoint-xs) {
+            width: 100%;
+          }
+        }
+
+        .date {
+          width: 25%;
+          display: flex;
+          align-items: center;
+          margin-left: 30px;
+          font-size: $body-font-size;
+          line-height: 24px;
+          color: $trimble-dark-gray;
+
+
+          @media (max-width: $breakpoint-xs) {
+            order: -1;
+            width: 100%;
+            margin-left: 0;
+            margin-bottom: 8px;
+          }
+        }
+      }
+    }
+  }
+}
+