@festo-ui/web-essentials 4.0.3-pre-20221213.1 → 5.0.0-dev.102

package/scss/organisms/_image-gallery.scss

@@ -1,257 +1,257 @@
-/* stylelint-disable selector-class-pattern -- Doing swiper overrides here */
-.fwe-modal-image-gallery {
-  background: transparent;
-  box-shadow: none;
-  padding: 0px;
-  position: fixed;
-  width: 288px;
-  max-width: unset;
-  max-height: 100vh;
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  .fwe-btn-link i.fwe-icon-menu-close.fwe-modal-image-gallery-close {
-    padding-right: 0px;
-    padding-top: 4px;
-  }
-
-  .fwe-image-gallery {
-    // pagination height (37px + 24px) + 12px (extra padding on top and bottom)
-    max-height: calc(100vh - 73px);
-  }
-
-  &--with-thumbnails {
-    .fwe-image-gallery {
-      // pagination height (37px + 24px) + thumbs height (64 + 24) + 12px (extra padding on top and bottom)
-      max-height: calc(100vh - 161px);
-    }
-  }
-
-  &--with-container {
-    border-top: 1px solid $control-border;
-    border-bottom: 1px solid $control-border;
-
-    .fwe-image-gallery-header {
-      margin-top: $spacer-m - 6px;
-    }
-  }
-}
-
-.fwe-image-gallery-container {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-}
-
-.fwe-image-gallery-content {
-  color: $white;
-  padding-top: 24px;
-  padding-bottom: 24px;
-}
-
-.fwe-image-gallery-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: $spacer-m;
-  margin-top: 0px;
-}
-
-.fwe-image-gallery {
-  width: 100%;
-  height: 288px;
-  background-color: $background-image-gallery;
-  user-select: none;
-
-  svg,
-  img,
-  .swiper-zoom-container img,
-  .swiper-zoom-container svg {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.fwe-image-gallery-thumbs {
-  margin-top: 24px;
-  user-select: none;
-
-  &.swiper {
-    width: 100%;
-    height: 64px;
-    box-sizing: border-box;
-    margin-left: auto;
-    margin-right: auto;
-
-    .swiper-slide {
-      position: relative;
-      background-size: cover;
-      background-position: center;
-      width: 88px;
-      margin-right: 8px;
-      height: 64px;
-      opacity: 0.33;
-      transition: opacity 0.3s;
-
-      &:last-child {
-        margin-right: 0px;
-      }
-
-      &::after {
-        position: absolute;
-        content: "";
-        height: 4px;
-        width: 100%;
-        background-color: $hero;
-        bottom: 0px;
-        opacity: 0;
-        transition: opacity 0.3s;
-      }
-
-      img {
-        display: block;
-        object-fit: cover;
-        width: 88px;
-        height: 56px;
-        background-color: $background-image-gallery;
-      }
-
-      &.swiper-slide-thumb-active,
-      &:hover {
-        opacity: 1;
-
-        &::after {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &:not(.swiper) {
-    display: flex;
-    flex-direction: row;
-    overflow: hidden;
-  }
-
-  &-nail {
-    position: relative;
-    height: 64px;
-    width: 88px;
-    min-width: 88px;
-    margin-right: 8px;
-    opacity: 0.33;
-    transition: opacity 0.3s;
-
-    img {
-      position: absolute;
-      height: 56px;
-      width: 88px;
-      min-width: 88px;
-      background: $background-image-gallery;
-      object-fit: cover;
-    }
-
-    &:last-child {
-      margin-right: 0px;
-    }
-
-    &::after {
-      position: absolute;
-      content: "";
-      height: 4px;
-      width: 100%;
-      background-color: $hero;
-      bottom: 0px;
-      opacity: 0;
-      transition: opacity 0.3s;
-    }
-
-    &.fwe-active,
-    &:hover {
-      opacity: 1;
-
-      &::after {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-@media only screen and (min-width: $grid-breakpoint-xxs) {
-  .fwe-modal-image-gallery {
-    width: 342px;
-    max-height: 90vh;
-  }
-
-  .fwe-image-gallery,
-  .fwe-image-gallery-content {
-    height: 342px;
-  }
-}
-
-@media only screen and (min-width: $grid-breakpoint-sm) {
-  .fwe-modal-image-gallery {
-    width: 696px;
-  }
-
-  .fwe-image-gallery,
-  .fwe-image-gallery-content {
-    height: 465px;
-  }
-}
-
-@media only screen and (min-width: $grid-breakpoint-md) {
-  .fwe-modal-image-gallery {
-    width: 696px;
-  }
-
-  .fwe-image-gallery,
-  .fwe-image-gallery-content {
-    height: 465px;
-  }
-}
-
-@media only screen and (min-width: $grid-breakpoint-xl) {
-  .fwe-modal-image-gallery {
-    width: 960px;
-    min-height: 726px;
-
-    &--with-container {
-      width: 1320px;
-      border-top: none;
-      border-bottom: none;
-
-      .fwe-image-gallery-header {
-        margin-top: none;
-      }
-    }
-
-    &--with-thumbnails {
-      .fwe-image-gallery-wrapper {
-        width: 984px;
-      }
-    }
-  }
-
-  .fwe-image-gallery,
-  .fwe-image-gallery-content {
-    height: 640px;
-  }
-
-  .fwe-image-gallery-container {
-    flex-direction: row;
-
-    .fwe-image-gallery {
-      width: 984px;
-    }
-
-    .fwe-image-gallery-content {
-      max-width: 312px;
-      width: 312px;
-      min-width: 312px;
-      margin-left: 24px;
-      border-top: 1px solid $control-border;
-      border-bottom: 1px solid $control-border;
-    }
-  }
-}
+/* stylelint-disable selector-class-pattern -- Doing swiper overrides here */
+.fwe-modal-image-gallery {
+  background: transparent;
+  box-shadow: none;
+  padding: 0px;
+  position: fixed;
+  width: 288px;
+  max-width: unset;
+  max-height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  .fwe-btn-link i.fwe-icon-menu-close.fwe-modal-image-gallery-close {
+    padding-right: 0px;
+    padding-top: 4px;
+  }
+
+  .fwe-image-gallery {
+    // pagination height (37px + 24px) + 12px (extra padding on top and bottom)
+    max-height: calc(100vh - 73px);
+  }
+
+  &--with-thumbnails {
+    .fwe-image-gallery {
+      // pagination height (37px + 24px) + thumbs height (64 + 24) + 12px (extra padding on top and bottom)
+      max-height: calc(100vh - 161px);
+    }
+  }
+
+  &--with-container {
+    border-top: 1px solid $control-border;
+    border-bottom: 1px solid $control-border;
+
+    .fwe-image-gallery-header {
+      margin-top: $spacer-m - 6px;
+    }
+  }
+}
+
+.fwe-image-gallery-container {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.fwe-image-gallery-content {
+  color: $white;
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
+.fwe-image-gallery-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: $spacer-m;
+  margin-top: 0px;
+}
+
+.fwe-image-gallery {
+  width: 100%;
+  height: 288px;
+  background-color: $background-image-gallery;
+  user-select: none;
+
+  svg,
+  img,
+  .swiper-zoom-container img,
+  .swiper-zoom-container svg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.fwe-image-gallery-thumbs {
+  margin-top: 24px;
+  user-select: none;
+
+  &.swiper {
+    width: 100%;
+    height: 64px;
+    box-sizing: border-box;
+    margin-left: auto;
+    margin-right: auto;
+
+    .swiper-slide {
+      position: relative;
+      background-size: cover;
+      background-position: center;
+      width: 88px;
+      margin-right: 8px;
+      height: 64px;
+      opacity: 0.33;
+      transition: opacity 0.3s;
+
+      &:last-child {
+        margin-right: 0px;
+      }
+
+      &::after {
+        position: absolute;
+        content: "";
+        height: 4px;
+        width: 100%;
+        background-color: $hero;
+        bottom: 0px;
+        opacity: 0;
+        transition: opacity 0.3s;
+      }
+
+      img {
+        display: block;
+        object-fit: cover;
+        width: 88px;
+        height: 56px;
+        background-color: $background-image-gallery;
+      }
+
+      &.swiper-slide-thumb-active,
+      &:hover {
+        opacity: 1;
+
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &:not(.swiper) {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+  }
+
+  &-nail {
+    position: relative;
+    height: 64px;
+    width: 88px;
+    min-width: 88px;
+    margin-right: 8px;
+    opacity: 0.33;
+    transition: opacity 0.3s;
+
+    img {
+      position: absolute;
+      height: 56px;
+      width: 88px;
+      min-width: 88px;
+      background: $background-image-gallery;
+      object-fit: cover;
+    }
+
+    &:last-child {
+      margin-right: 0px;
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      height: 4px;
+      width: 100%;
+      background-color: $hero;
+      bottom: 0px;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+
+    &.fwe-active,
+    &:hover {
+      opacity: 1;
+
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: $grid-breakpoint-xxs) {
+  .fwe-modal-image-gallery {
+    width: 342px;
+    max-height: 90vh;
+  }
+
+  .fwe-image-gallery,
+  .fwe-image-gallery-content {
+    height: 342px;
+  }
+}
+
+@media only screen and (min-width: $grid-breakpoint-sm) {
+  .fwe-modal-image-gallery {
+    width: 696px;
+  }
+
+  .fwe-image-gallery,
+  .fwe-image-gallery-content {
+    height: 465px;
+  }
+}
+
+@media only screen and (min-width: $grid-breakpoint-md) {
+  .fwe-modal-image-gallery {
+    width: 696px;
+  }
+
+  .fwe-image-gallery,
+  .fwe-image-gallery-content {
+    height: 465px;
+  }
+}
+
+@media only screen and (min-width: $grid-breakpoint-xl) {
+  .fwe-modal-image-gallery {
+    width: 960px;
+    min-height: 726px;
+
+    &--with-container {
+      width: 1320px;
+      border-top: none;
+      border-bottom: none;
+
+      .fwe-image-gallery-header {
+        margin-top: none;
+      }
+    }
+
+    &--with-thumbnails {
+      .fwe-image-gallery-wrapper {
+        width: 984px;
+      }
+    }
+  }
+
+  .fwe-image-gallery,
+  .fwe-image-gallery-content {
+    height: 640px;
+  }
+
+  .fwe-image-gallery-container {
+    flex-direction: row;
+
+    .fwe-image-gallery {
+      width: 984px;
+    }
+
+    .fwe-image-gallery-content {
+      max-width: 312px;
+      width: 312px;
+      min-width: 312px;
+      margin-left: 24px;
+      border-top: 1px solid $control-border;
+      border-bottom: 1px solid $control-border;
+    }
+  }
+}

package/scss/organisms/_login.scss

@@ -1,57 +1,59 @@
-.fwe-login-layout {
-  position: fixed;
-  background: $background;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  .fwe-login-background {
-    top: $navbar-height;
-    position: absolute;
-    height: calc(100vh - #{$navbar-height});
-    width: 100vw;
-    object-fit: cover;
-    object-position: center;
-  }
-  .fwe-login-container {
-    height: calc(100vh - #{$navbar-height});
-    overflow: auto;
-    display: flex;
-    align-items: center;
-    .fwe-login-form {
-      z-index: 1;
-      margin-left: 20%;
-      width: 432px;
-      background: $white;
-      padding: $spacer-xl;
-      h1 {
-        margin: 0px 0px 48px 0px;
-      }
-      .fwe-login-link-container {
-        margin-top: $spacer-m;
-        text-align: right;
-      }
-      @media (max-width: $grid-breakpoint-xxs) {
-        padding-left: $spacer-s;
-        padding-right: $spacer-s;
-      }
-    }
-  }
-  @media (max-width: $grid-breakpoint-xs), (max-height: $grid-breakpoint-xs) {
-    .fwe-login-container {
-      background-color: $white;
-      position: unset;
-      left: unset;
-      top: unset;
-      width: 100vw;
-      align-items: stretch;
-      .fwe-login-form {
-        margin-left: 0px;
-        width: 100%;
-      }
-    }
-    .fwe-login-background {
-      display: none;
-    }
-  }
-}
+.fwe-login-layout {
+  position: fixed;
+  background: $background;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  .fwe-login-background {
+    top: $navbar-height;
+    position: absolute;
+    height: calc(100vh - #{$navbar-height});
+    width: 100vw;
+    object-fit: cover;
+    object-position: center;
+  }
+  .fwe-login-container {
+    height: calc(100vh - #{$navbar-height});
+    overflow: auto;
+    display: flex;
+    align-items: center;
+    .fwe-login-form {
+      z-index: 1;
+      margin-left: 20%;
+      width: 432px;
+      background: $white;
+      padding: $spacer-xl;
+      h1 {
+        margin: 0px 0px 48px 0px;
+      }
+      .fwe-login-link-container {
+        margin-top: $spacer-m;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: row-reverse;
+      }
+      @media (max-width: $grid-breakpoint-xxs) {
+        padding-left: $spacer-s;
+        padding-right: $spacer-s;
+      }
+    }
+  }
+  @media (max-width: $grid-breakpoint-xs), (max-height: $grid-breakpoint-xs) {
+    .fwe-login-container {
+      background-color: $white;
+      position: unset;
+      left: unset;
+      top: unset;
+      width: 100vw;
+      align-items: stretch;
+      .fwe-login-form {
+        margin-left: 0px;
+        width: 100%;
+      }
+    }
+    .fwe-login-background {
+      display: none;
+    }
+  }
+}