luna-one 3.1.593 → 3.1.594

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

@@ -1,367 +1,367 @@
-@import "../../../global-styles/terra.scss";
-
-.ter-flyout {
-  height: 100%;
-  position: fixed;
-  top: 0;
-  right: 0;
-  width: 407px;
-  z-index: 200;
-  transform: translateX(100%);
-  transition-property: transform;
-  transition-duration: 500ms;
-  transition-delay: 0ms;
-  transition-timing-function: ease-in;
-  @media screen and (max-width: $breakpoint-sm) {
-    width: 100%;
-    margin-top: 60px;
-  }
-
-  &--deployed {
-    transform: translateX(0);
-    transition-property: transform;
-    transition-duration: 500ms;
-    transition-delay: 0ms;
-    transition-timing-function: ease-in;
-  }
-
-  &__close-btn {
-    background: $trimble-blue;
-    height: 55px;
-    width: 55px;
-    &:hover {
-      cursor: pointer;
-    }
-
-    @media screen and (max-width: $breakpoint-sm) {
-      display: none;
-    }
-  }
-
-  &__close-icon {
-    width: 13px;
-  }
-
-  &__container {
-    background: $trimble-blue;
-    height: 100%;
-    width: 352px;
-    position: fixed;
-    top: 0;
-    right: 0;
-    padding-left: 25px;
-    padding-right: 84px;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      width: 100%;
-      padding-left: 22px;
-      padding-right: 21px;
-    }
-  }
-
-  &__logo-wrapper {
-    height: 55px;
-    padding-top: 8px;
-    margin-top: 55px;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      height: 60px;
-      padding-top: 22px;
-      margin-top: 0px;
-      display: flex;
-      align-items: flex-start;
-      flex-direction: row;
-    }
-  }
-
-  &__logo {
-    max-width: 113px;
-    max-height: 26px;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      max-width: 85px;
-      max-height: 19px;
-    }
-  }
-
-  &__logo-caret {
-    display: none;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      display: block;
-    }
-
-    &-icon {
-      width: 10px;
-      transform: rotate(180deg);
-      margin-right: 22px;
-      display: block;
-      margin-top: 5px;
-    }
-  }
-
-  &__links {
-    .flyout-links {
-      &__menu {
-        list-style-type: none;
-        padding: 0 0 0 7px;
-        font-size: $subheading-size-mobile;
-        display: inline-block;
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      &__item {
-        display: block;
-        a:hover {
-          color: $white;
-        }
-      }
-
-      &__link {
-        display: flex;
-        color: $white;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        width: 244px;
-        height: 40px;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          height: 60px;
-          width: 100%;
-        }
-
-        &-text {
-          display: inline-block;
-          position: relative;
-          &:before {
-            display: block;
-            position: absolute;
-            content: "";
-            border-bottom: 2px solid transparent;
-            left: 0;
-            right: 0;
-            bottom: 0;
-          }
-          &:hover,
-          &:visited {
-            color: $white;
-          }
-          &:hover:before,
-          &:focus:before,
-          &:active:before {
-            border-color: $trimble-gold;
-          }
-        }
-
-        &-icon {
-          @media screen and (max-width: $breakpoint-sm) {
-            position: absolute;
-            right: 25px;
-          }
-        }
-      }
-
-      &__link:hover > .flyout-links__link-text:before {
-        border-bottom: 2px solid $trimble-gold;
-      }
-    }
-  }
-
-  &__search {
-    display: flex;
-    @media screen and (max-width: $breakpoint-sm) {
-      border: none;
-      height: 60px;
-      margin: 0;
-      padding: 0 0 0 7px;
-    }
-
-    &-icon {
-      justify-content: space-between;
-      flex-direction: row;
-      align-items: center;
-      width: 251px;
-      padding: 0 0 0 6px;
-      display: flex;
-      height: 40px;
-
-      img {
-        position: relative;
-        left: 8px;
-        margin-top: 3px;
-        height: 20px;
-        width: 20px;
-
-        @media screen and (max-width: $breakpoint-sm) {
-          left: -3px;
-        }
-      }
-
-      @media screen and (max-width: $breakpoint-sm) {
-        width: 100%;
-      }
-    }
-
-    &-text {
-      font-size: $subheading-size-mobile;
-      color: $white;
-      line-height: 25px;
-      margin-bottom: 0;
-      background: transparent;
-      border: none;
-      position: relative;
-
-      &::placeholder {
-        color: $white;
-      }
-      // @media screen and (max-width: $breakpoint-sm) {
-      //   padding-bottom: 25px;
-      // }
-    }
-    &-text:before {
-      display: block;
-      content: "";
-      position: absolute;
-      border-bottom: 2px solid transparent;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    }
-    &-text:hover:before {
-      border-bottom: 2px solid $trimble-gold;
-    }
-
-    &-btn {
-      display: none;
-
-      &-caret {
-        width: 10px;
-      }
-
-      @media screen and (max-width: $breakpoint-sm) {
-        display: block;
-      }
-    }
-  }
-
-  &__search:hover > p:before {
-    border-bottom: 2px solid $trimble-gold;
-  }
-
-  &__divider {
-    display: none;
-    position: absolute;
-    left: 0;
-    right: 0;
-    width: 100%;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-
-    @media screen and (max-width: $breakpoint-sm) {
-      display: block;
-    }
-
-    &-logo {
-      top: 60px;
-    }
-  }
-  
-  &__search-icon {
-    cursor: pointer;
-    @media screen and (max-width: $breakpoint-sm) {
-      margin-top: 15px;
-      padding-left: 0;
-    }
-  }
-
-  &__login-btn, &__logout-btn {
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    width: 238px !important;
-    margin-top: 28px;
-    margin-bottom: 32px;
-  }
-
-  &__login-btn {
-    margin-bottom: 32px;  
-    margin-top: 12px
-  }
-
-  &__logged-in-section {
-    max-width: 238px !important;
-    display: grid;
-    grid-template-columns: 64px 1fr;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      margin-top: 16px;
-    }
-
-    &--image,
-    &--no-image {
-      grid-column: 1 / span 1;
-      width: 64px;
-      height: 64px;
-      border-radius: 50%;
-    }
-
-    &--no-image {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $navy-blue;
-      font-weight: $very-bold-font-weight;
-      background-color: $white;
-    }
-
-    &--text-area {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      padding-left: 16px;
-
-      &--title {
-        font-weight: 400;
-        font-size: 14px;
-        line-height: 20px;
-      }
-
-      &--first-name,
-      &--last-name {
-        font-weight: 700;
-        font-size: 18px;
-        line-height: 1.2;
-        margin-bottom: 0;
-        width: 100%;
-      }
-
-      &--title,
-      &--first-name,
-      &--last-name {
-        color: #ffffff;
-      }
-    }
-  }
-
-  &__divider-auth-label {
-    color: #ffffff;
-    font-weight: 700;
-    font-size: 18px;
-    line-height: 25.2px;
-    width: 244px;
-    margin-left: 6px;
-  }
-  &__divider-auth {
-    position: relative;
-    // bottom: 8px;
-    width: 100%;
-    border-bottom: 1px solid rgba(255, 255, 255, 70%);
-    margin: 32px 0;
-
-    @media screen and (max-width: $breakpoint-sm) {
-      margin: 32px 0;
-      visibility: hidden;
-    }
-  }
-}
+@import "../../../global-styles/terra.scss";
+
+.ter-flyout {
+  height: 100%;
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 407px;
+  z-index: 200;
+  transform: translateX(100%);
+  transition-property: transform;
+  transition-duration: 500ms;
+  transition-delay: 0ms;
+  transition-timing-function: ease-in;
+  @media screen and (max-width: $breakpoint-sm) {
+    width: 100%;
+    margin-top: 60px;
+  }
+
+  &--deployed {
+    transform: translateX(0);
+    transition-property: transform;
+    transition-duration: 500ms;
+    transition-delay: 0ms;
+    transition-timing-function: ease-in;
+  }
+
+  &__close-btn {
+    background: $trimble-blue;
+    height: 55px;
+    width: 55px;
+    &:hover {
+      cursor: pointer;
+    }
+
+    @media screen and (max-width: $breakpoint-sm) {
+      display: none;
+    }
+  }
+
+  &__close-icon {
+    width: 13px;
+  }
+
+  &__container {
+    background: $trimble-blue;
+    height: 100%;
+    width: 352px;
+    position: fixed;
+    top: 0;
+    right: 0;
+    padding-left: 25px;
+    padding-right: 84px;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      width: 100%;
+      padding-left: 22px;
+      padding-right: 21px;
+    }
+  }
+
+  &__logo-wrapper {
+    height: 55px;
+    padding-top: 8px;
+    margin-top: 55px;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      height: 60px;
+      padding-top: 22px;
+      margin-top: 0px;
+      display: flex;
+      align-items: flex-start;
+      flex-direction: row;
+    }
+  }
+
+  &__logo {
+    max-width: 113px;
+    max-height: 26px;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      max-width: 85px;
+      max-height: 19px;
+    }
+  }
+
+  &__logo-caret {
+    display: none;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      display: block;
+    }
+
+    &-icon {
+      width: 10px;
+      transform: rotate(180deg);
+      margin-right: 22px;
+      display: block;
+      margin-top: 5px;
+    }
+  }
+
+  &__links {
+    .flyout-links {
+      &__menu {
+        list-style-type: none;
+        padding: 0 0 0 7px;
+        font-size: $subheading-size-mobile;
+        display: inline-block;
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
+      &__item {
+        display: block;
+        a:hover {
+          color: $white;
+        }
+      }
+
+      &__link {
+        display: flex;
+        color: $white;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 244px;
+        height: 40px;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          height: 60px;
+          width: 100%;
+        }
+
+        &-text {
+          display: inline-block;
+          position: relative;
+          &:before {
+            display: block;
+            position: absolute;
+            content: "";
+            border-bottom: 2px solid transparent;
+            left: 0;
+            right: 0;
+            bottom: 0;
+          }
+          &:hover,
+          &:visited {
+            color: $white;
+          }
+          &:hover:before,
+          &:focus:before,
+          &:active:before {
+            border-color: $trimble-gold;
+          }
+        }
+
+        &-icon {
+          @media screen and (max-width: $breakpoint-sm) {
+            position: absolute;
+            right: 25px;
+          }
+        }
+      }
+
+      &__link:hover > .flyout-links__link-text:before {
+        border-bottom: 2px solid $trimble-gold;
+      }
+    }
+  }
+
+  &__search {
+    display: flex;
+    @media screen and (max-width: $breakpoint-sm) {
+      border: none;
+      height: 60px;
+      margin: 0;
+      padding: 0 0 0 7px;
+    }
+
+    &-icon {
+      justify-content: space-between;
+      flex-direction: row;
+      align-items: center;
+      width: 251px;
+      padding: 0 0 0 6px;
+      display: flex;
+      height: 40px;
+
+      img {
+        position: relative;
+        left: 8px;
+        margin-top: 3px;
+        height: 20px;
+        width: 20px;
+
+        @media screen and (max-width: $breakpoint-sm) {
+          left: -3px;
+        }
+      }
+
+      @media screen and (max-width: $breakpoint-sm) {
+        width: 100%;
+      }
+    }
+
+    &-text {
+      font-size: $subheading-size-mobile;
+      color: $white;
+      line-height: 25px;
+      margin-bottom: 0;
+      background: transparent;
+      border: none;
+      position: relative;
+
+      &::placeholder {
+        color: $white;
+      }
+      // @media screen and (max-width: $breakpoint-sm) {
+      //   padding-bottom: 25px;
+      // }
+    }
+    &-text:before {
+      display: block;
+      content: "";
+      position: absolute;
+      border-bottom: 2px solid transparent;
+      left: 0;
+      bottom: 0;
+      right: 0;
+    }
+    &-text:hover:before {
+      border-bottom: 2px solid $trimble-gold;
+    }
+
+    &-btn {
+      display: none;
+
+      &-caret {
+        width: 10px;
+      }
+
+      @media screen and (max-width: $breakpoint-sm) {
+        display: block;
+      }
+    }
+  }
+
+  &__search:hover > p:before {
+    border-bottom: 2px solid $trimble-gold;
+  }
+
+  &__divider {
+    display: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+
+    @media screen and (max-width: $breakpoint-sm) {
+      display: block;
+    }
+
+    &-logo {
+      top: 60px;
+    }
+  }
+  
+  &__search-icon {
+    cursor: pointer;
+    @media screen and (max-width: $breakpoint-sm) {
+      margin-top: 15px;
+      padding-left: 0;
+    }
+  }
+
+  &__login-btn, &__logout-btn {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    width: 238px !important;
+    margin-top: 28px;
+    margin-bottom: 32px;
+  }
+
+  &__login-btn {
+    margin-bottom: 32px;  
+    margin-top: 12px
+  }
+
+  &__logged-in-section {
+    max-width: 238px !important;
+    display: grid;
+    grid-template-columns: 64px 1fr;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      margin-top: 16px;
+    }
+
+    &--image,
+    &--no-image {
+      grid-column: 1 / span 1;
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+    }
+
+    &--no-image {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: $navy-blue;
+      font-weight: $very-bold-font-weight;
+      background-color: $white;
+    }
+
+    &--text-area {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      padding-left: 16px;
+
+      &--title {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+      }
+
+      &--first-name,
+      &--last-name {
+        font-weight: 700;
+        font-size: 18px;
+        line-height: 1.2;
+        margin-bottom: 0;
+        width: 100%;
+      }
+
+      &--title,
+      &--first-name,
+      &--last-name {
+        color: #ffffff;
+      }
+    }
+  }
+
+  &__divider-auth-label {
+    color: #ffffff;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 25.2px;
+    width: 244px;
+    margin-left: 6px;
+  }
+  &__divider-auth {
+    position: relative;
+    // bottom: 8px;
+    width: 100%;
+    border-bottom: 1px solid rgba(255, 255, 255, 70%);
+    margin: 32px 0;
+
+    @media screen and (max-width: $breakpoint-sm) {
+      margin: 32px 0;
+      visibility: hidden;
+    }
+  }
+}