luna-one 3.1.593 → 3.1.594

package/dist/luna/{other-organisms → components}/LanguageSelector/LanguageSelector.scss

@@ -1,318 +1,318 @@
-@import "../../../global-styles/terra.scss";
-
-.luna-language-selector{
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  position: relative;
-
-  @media screen and (max-width: $breakpoint-sm) {
-    width: 100%;
-    margin-top: 60px;
-    align-items: center;
-    position: fixed;
-    top: 0;
-  }
-
-  &__header {
-    display: flex;
-    height: 48px;
-    align-items: center;
-    padding-right: 35px;
-    cursor: pointer;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      height: 60px;
-      width: 100%;
-    }
-
-    &-icon {
-      margin-right: 10px;
-      align-self: center;
-
-      &-globe {
-        width: 20px;
-        height: 20px;
-        margin-left: 28px;
-        display: block;
-      }
-
-      &-close {
-        width: 24px;
-        margin-left: 24px;
-        display: block;
-      }
-
-      @media screen and (max-width: $breakpoint-sm) {
-        display: none;
-      }
-    }
-
-    &-mobile-icon {
-      display: none;
-      @media screen and (max-width: $breakpoint-sm) {
-        display: block;
-
-        &-caret {
-          width: 10px;
-          transform: rotate(180deg);
-          margin-left: 22px;
-          display: block;
-          margin-right: 10px;
-        }
-      }
-    }
-
-    &-text {
-      @include benton-regular();
-      font-size: $eyebrow-font-size-mobile;
-      color: $trimble-blue;
-      line-height: 18px;
-      display: flex;
-      flex-direction: row;
-
-      @media screen and (max-width: $breakpoint-sm) {
-        color: $white;
-      }
-
-      &-deployed {
-        padding-bottom: 12px;
-        border-bottom: 3px solid $trimble-gold;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          padding-bottom: 0px;
-          border-bottom: none;
-        }
-      }
-
-      &-divider {
-        font-weight: 700;
-        margin: 0 28px;
-      }
-    }
-
-    &-deployed {
-      align-items: flex-end;
-      background: $white;
-      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
-
-      @media screen and (max-width: $breakpoint-sm) {
-        background-color: $trimble-blue;
-        align-items: center;
-      }
-    }
-  }
-
-  &__body {
-    width: 542px;
-    max-height: 95vh;
-    display: flex;
-    flex-direction: column;
-    background: $white;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
-    border-radius: 0px 0px 3px 3px;
-    position: absolute;
-    top: 48px;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      width: 100%;
-      box-shadow: none;
-      border-radius: 0px;
-      top: 60px;
-    }
-
-    &-content {
-      display: flex;
-      flex-direction: row;
-    }
-
-    &-section {
-      width: 50%;
-
-      @media screen and (max-width: $breakpoint-sm) {
-        width: 100%;
-      }
-
-      &--region-selected {
-        @media screen and (max-width: $breakpoint-sm) {
-          &:after {
-            position: absolute;
-            content: "";
-            width: 0;
-            height: 0;
-            border-left: 10px solid transparent;
-            border-right: 10px solid transparent;
-            border-top: 10px solid $dark-navy;
-            display: block;
-            left: 24%;
-          }
-        }
-      }
-
-      &--lang-selected {
-        @media screen and (max-width: $breakpoint-sm) {
-          &:after {
-            position: absolute;
-            content: "";
-            width: 0;
-            height: 0;
-            border-left: 10px solid transparent;
-            border-right: 10px solid transparent;
-            border-top: 10px solid $dark-navy;
-            display: block;
-            left: 75%;
-          }
-        }
-      }
-
-      &:first-child {
-        border-right: 1px solid $concrete-gray;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          border-right: none;
-        }
-      }
-
-      &-title {
-        @include benton-bold();
-        font-size: $body-font-size;
-        line-height: 22px;
-        letter-spacing: 0.01em;
-        color: $asphalt-gray;
-        width: 100%;
-        padding-top: 32px;
-        padding-left: 48px;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          padding: 18px 0 0 0;
-          text-align: center;
-          height: 60px;
-          cursor: pointer;
-        }
-
-        &--selected {
-          @media screen and (max-width: $breakpoint-sm) {
-            border-bottom: 6px solid $dark-navy;
-          }
-        }
-
-        &--no-selected {
-          @media screen and (max-width: $breakpoint-sm) {
-            border-bottom: 6px solid $concrete-gray;
-          }
-        }
-      }
-
-      &-items {
-        padding-top: 7.5px;
-        padding-bottom: 15px;
-        background-color: $white;
-
-        @media screen and (min-width: $breakpoint-sm) and (max-height: 650px) {
-          height: 50vh;
-          overflow-y: auto;
-        }
-
-        @media screen and (max-width: $breakpoint-sm) {
-          padding-top: 30px;
-          padding-bottom: 50px;
-          overflow-y: auto;
-          height: calc(100vh - 250px);
-        }
-
-        &--expanded {
-          @media screen and (max-width: $breakpoint-sm) {
-            width: 100%;
-            position: absolute;
-            left: 0;
-          }
-        }
-
-        &--no-expanded {
-          @media screen and (max-width: $breakpoint-sm) {
-            display: none;
-          }
-        }
-      }
-
-      &-item {
-        height: 37px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        cursor: pointer;
-
-        &-icon {
-          width: 48px;
-          text-align: right;
-          padding-right: 10px;
-        }
-
-        &-text {
-          @include benton-regular();
-          font-size: $body-font-size;
-          line-height: 22px;
-          letter-spacing: 0.01em;
-          color: $trimble-dark-gray;
-
-          &:hover {
-            color: $trimble-blue;
-          }
-        }
-
-        &:hover {
-          background-color: $concrete-gray-1;
-        }
-      }
-    }
-
-    &-fade {
-      @media screen and (max-width: $breakpoint-sm) {
-        background: linear-gradient(360deg, $white 0%, rgba(255, 255, 255, 0) 100%);
-        height: 44px;
-        position: fixed;
-        bottom: 84px;
-        width: 100%;
-      }
-    }
-
-    &-footer {
-      height: 84px;
-      justify-content: flex-end;
-      display: flex;
-      align-items: center;
-      border-top: 1px solid $concrete-gray;
-      width: 100%;
-      background-color: $white;
-
-      @media screen and (max-width: $breakpoint-sm) {
-        position: fixed;
-        bottom: 0;
-        width: 100%;
-      }
-
-      &-link {
-        @include benton-medium();
-        font-size: $body-font-size;
-        line-height: 24px;
-        position: relative;
-        cursor: pointer;
-        color: $trimble-dark-gray;
-        border-bottom: 3px solid $trimble-gold;
-      }
-
-      &-button {
-        width: 100px;
-        margin-right: 26px;
-        margin-left: 24px;
-        padding-left: 37px !important;
-      }
-    }
-  }
-
-  &__body.tabFocus:focus, &__header.tabFocus:focus, &__body-section-item.tabFocus:focus, &__body-footer-link.tabFocus:focus {
-    outline: 2px solid $sky-blue;
-  }
-
-  
-}
+@import "../../../global-styles/terra.scss";
+
+.luna-language-selector{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  position: relative;
+
+  @media screen and (max-width: $breakpoint-sm) {
+    width: 100%;
+    margin-top: 60px;
+    align-items: center;
+    position: fixed;
+    top: 0;
+  }
+
+  &__header {
+    display: flex;
+    height: 48px;
+    align-items: center;
+    padding-right: 35px;
+    cursor: pointer;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      height: 60px;
+      width: 100%;
+    }
+
+    &-icon {
+      margin-right: 10px;
+      align-self: center;
+
+      &-globe {
+        width: 20px;
+        height: 20px;
+        margin-left: 28px;
+        display: block;
+      }
+
+      &-close {
+        width: 24px;
+        margin-left: 24px;
+        display: block;
+      }
+
+      @media screen and (max-width: $breakpoint-sm) {
+        display: none;
+      }
+    }
+
+    &-mobile-icon {
+      display: none;
+      @media screen and (max-width: $breakpoint-sm) {
+        display: block;
+
+        &-caret {
+          width: 10px;
+          transform: rotate(180deg);
+          margin-left: 22px;
+          display: block;
+          margin-right: 10px;
+        }
+      }
+    }
+
+    &-text {
+      @include benton-regular();
+      font-size: $eyebrow-font-size-mobile;
+      color: $trimble-blue;
+      line-height: 18px;
+      display: flex;
+      flex-direction: row;
+
+      @media screen and (max-width: $breakpoint-sm) {
+        color: $white;
+      }
+
+      &-deployed {
+        padding-bottom: 12px;
+        border-bottom: 3px solid $trimble-gold;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          padding-bottom: 0px;
+          border-bottom: none;
+        }
+      }
+
+      &-divider {
+        font-weight: 700;
+        margin: 0 28px;
+      }
+    }
+
+    &-deployed {
+      align-items: flex-end;
+      background: $white;
+      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
+
+      @media screen and (max-width: $breakpoint-sm) {
+        background-color: $trimble-blue;
+        align-items: center;
+      }
+    }
+  }
+
+  &__body {
+    width: 542px;
+    max-height: 95vh;
+    display: flex;
+    flex-direction: column;
+    background: $white;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
+    border-radius: 0px 0px 3px 3px;
+    position: absolute;
+    top: 48px;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      width: 100%;
+      box-shadow: none;
+      border-radius: 0px;
+      top: 60px;
+    }
+
+    &-content {
+      display: flex;
+      flex-direction: row;
+    }
+
+    &-section {
+      width: 50%;
+
+      @media screen and (max-width: $breakpoint-sm) {
+        width: 100%;
+      }
+
+      &--region-selected {
+        @media screen and (max-width: $breakpoint-sm) {
+          &:after {
+            position: absolute;
+            content: "";
+            width: 0;
+            height: 0;
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+            border-top: 10px solid $dark-navy;
+            display: block;
+            left: 24%;
+          }
+        }
+      }
+
+      &--lang-selected {
+        @media screen and (max-width: $breakpoint-sm) {
+          &:after {
+            position: absolute;
+            content: "";
+            width: 0;
+            height: 0;
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+            border-top: 10px solid $dark-navy;
+            display: block;
+            left: 75%;
+          }
+        }
+      }
+
+      &:first-child {
+        border-right: 1px solid $concrete-gray;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          border-right: none;
+        }
+      }
+
+      &-title {
+        @include benton-bold();
+        font-size: $body-font-size;
+        line-height: 22px;
+        letter-spacing: 0.01em;
+        color: $asphalt-gray;
+        width: 100%;
+        padding-top: 32px;
+        padding-left: 48px;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          padding: 18px 0 0 0;
+          text-align: center;
+          height: 60px;
+          cursor: pointer;
+        }
+
+        &--selected {
+          @media screen and (max-width: $breakpoint-sm) {
+            border-bottom: 6px solid $dark-navy;
+          }
+        }
+
+        &--no-selected {
+          @media screen and (max-width: $breakpoint-sm) {
+            border-bottom: 6px solid $concrete-gray;
+          }
+        }
+      }
+
+      &-items {
+        padding-top: 7.5px;
+        padding-bottom: 15px;
+        background-color: $white;
+
+        @media screen and (min-width: $breakpoint-sm) and (max-height: 650px) {
+          height: 50vh;
+          overflow-y: auto;
+        }
+
+        @media screen and (max-width: $breakpoint-sm) {
+          padding-top: 30px;
+          padding-bottom: 50px;
+          overflow-y: auto;
+          height: calc(100vh - 250px);
+        }
+
+        &--expanded {
+          @media screen and (max-width: $breakpoint-sm) {
+            width: 100%;
+            position: absolute;
+            left: 0;
+          }
+        }
+
+        &--no-expanded {
+          @media screen and (max-width: $breakpoint-sm) {
+            display: none;
+          }
+        }
+      }
+
+      &-item {
+        height: 37px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        cursor: pointer;
+
+        &-icon {
+          width: 48px;
+          text-align: right;
+          padding-right: 10px;
+        }
+
+        &-text {
+          @include benton-regular();
+          font-size: $body-font-size;
+          line-height: 22px;
+          letter-spacing: 0.01em;
+          color: $trimble-dark-gray;
+
+          &:hover {
+            color: $trimble-blue;
+          }
+        }
+
+        &:hover {
+          background-color: $concrete-gray-1;
+        }
+      }
+    }
+
+    &-fade {
+      @media screen and (max-width: $breakpoint-sm) {
+        background: linear-gradient(360deg, $white 0%, rgba(255, 255, 255, 0) 100%);
+        height: 44px;
+        position: fixed;
+        bottom: 84px;
+        width: 100%;
+      }
+    }
+
+    &-footer {
+      height: 84px;
+      justify-content: flex-end;
+      display: flex;
+      align-items: center;
+      border-top: 1px solid $concrete-gray;
+      width: 100%;
+      background-color: $white;
+
+      @media screen and (max-width: $breakpoint-sm) {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+      }
+
+      &-link {
+        @include benton-medium();
+        font-size: $body-font-size;
+        line-height: 24px;
+        position: relative;
+        cursor: pointer;
+        color: $trimble-dark-gray;
+        border-bottom: 3px solid $trimble-gold;
+      }
+
+      &-button {
+        width: 100px;
+        margin-right: 26px;
+        margin-left: 24px;
+        padding-left: 37px !important;
+      }
+    }
+  }
+
+  &__body.tabFocus:focus, &__header.tabFocus:focus, &__body-section-item.tabFocus:focus, &__body-footer-link.tabFocus:focus {
+    outline: 2px solid $sky-blue;
+  }
+
+  
+}