@asante-org/leybold-design-system 1.2.1 → 1.3.0

package/dist/index.esm.scss

@@ -515,6 +515,8 @@
   padding: 0.25rem 0.375rem;
   font-size: 0.625rem;
   line-height: 1.2;
+  min-width: 80px;
+  min-height: 30px;
 }
 .Button-module__button--extra-small___R0QTM.Button-module__button--carousel-arrow-left___Wx-Jo, .Button-module__button--extra-small___R0QTM.Button-module__button--carousel-arrow-right___3ZtgT {
   padding: 0.25rem;
@@ -527,6 +529,8 @@
 .Button-module__button--small___ADJQe {
   padding: 0.25rem 0.5rem;
   font-size: 0.75rem;
+  min-width: 120px;
+  min-height: 41px;
 }
 .Button-module__button--small___ADJQe.Button-module__button--carousel-arrow-left___Wx-Jo, .Button-module__button--small___ADJQe.Button-module__button--carousel-arrow-right___3ZtgT {
   padding: 0.25rem;
@@ -537,6 +541,8 @@
 .Button-module__button--medium___ZuR4Z {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
+  min-width: 215px;
+  min-height: 56px;
 }
 .Button-module__button--medium___ZuR4Z.Button-module__button--carousel-arrow-left___Wx-Jo, .Button-module__button--medium___ZuR4Z.Button-module__button--carousel-arrow-right___3ZtgT {
   padding: 0.5rem;
@@ -547,6 +553,8 @@
 .Button-module__button--large___-FaV5 {
   padding: 1rem 1.5rem;
   font-size: 1rem;
+  min-width: 310px;
+  min-height: 73px;
 }
 .Button-module__button--large___-FaV5.Button-module__button--carousel-arrow-left___Wx-Jo, .Button-module__button--large___-FaV5.Button-module__button--carousel-arrow-right___3ZtgT {
   padding: 1rem;
@@ -1419,8 +1427,8 @@
   flex-direction: column;
   gap: 0.5rem;
   padding: 0.5rem !important;
-  background-color: transparent;
-  box-shadow: none;
+  background-color: white;
+  box-shadow: 2.7px 2.7px 5px 0 rgba(0, 0, 0, 0.1);
 }
 @media (max-width: 768px) {
   .ProductCardHorizontal-module__productWrapper___gs8fn {
@@ -1430,7 +1438,7 @@
     padding: 0 6px 0 0;
   }
 }
-.ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 {
+.ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2, .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withPlaceholder___x8IUh {
   display: grid;
   grid-template-columns: 75px repeat(2, minmax(80px, 1fr));
   grid-template-rows: repeat(3, auto);
@@ -1438,19 +1446,19 @@
   row-gap: 0.125rem;
 }
 @media (max-width: 768px) {
-  .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 {
+  .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2, .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withPlaceholder___x8IUh {
     display: flex;
     flex-direction: row;
     align-items: center;
   }
 }
-.ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 .ProductCardHorizontal-module__productTitle___xBuu7 {
+.ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 .ProductCardHorizontal-module__productTitle___xBuu7, .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withPlaceholder___x8IUh .ProductCardHorizontal-module__productTitle___xBuu7 {
   font-size: 16px;
 }
-.ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 .ProductCardHorizontal-module__productDescription___CA35O {
+.ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 .ProductCardHorizontal-module__productDescription___CA35O, .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withPlaceholder___x8IUh .ProductCardHorizontal-module__productDescription___CA35O {
   font-size: 16px;
 }
-.ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 .ProductCardHorizontal-module__productPrice___lf32A {
+.ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withImage___pPFw2 .ProductCardHorizontal-module__productPrice___lf32A, .ProductCardHorizontal-module__productWrapper___gs8fn.ProductCardHorizontal-module__withPlaceholder___x8IUh .ProductCardHorizontal-module__productPrice___lf32A {
   font-size: 16px;
 }
 
@@ -1471,6 +1479,14 @@
   }
 }
 
+.ProductCardHorizontal-module__placeholderImage___kT1sp {
+  width: 100%;
+  height: 100%;
+  background-color: var(--leybold-white-aluminium);
+  padding: 0 5px;
+  border-radius: 0 !important;
+}
+
 .ProductCardHorizontal-module__productContent___Np2cY {
   flex: 1;
   min-width: 0;
@@ -1479,7 +1495,7 @@
 .ProductCardHorizontal-module__productTitle___xBuu7,
 h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   margin: 0 0 0.25rem 0;
-  font-size: 16px;
+  font-size: var(--body-mobile-size);
   font-weight: 600;
   color: #111827;
   line-height: 1.4;
@@ -1487,8 +1503,8 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
 
 .ProductCardHorizontal-module__productId___3oOQV {
   margin: 0 0 0.25rem 0;
-  font-size: 9px;
-  color: #6b7280;
+  font-size: 14px;
+  color: var(--leybold-slate-Grey);
 }
 
 .ProductCardHorizontal-module__productDescription___CA35O {
@@ -1504,7 +1520,7 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
 
 .ProductCardHorizontal-module__productPrice___lf32A {
   margin: 0;
-  font-size: clamp(14px, 1.25vw, 1.5rem);
+  font-size: var(--body-mobile-size);
   font-weight: 700;
   color: #111827;
 }
@@ -1929,6 +1945,179 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   --text-xxl-line-height: 1;
 }
 
+.ContentCardVertical-module__contentCard___EoYej {
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+  color: inherit;
+  background-color: white;
+  padding: 16px;
+  width: 100%;
+  gap: 0.5rem;
+  /* Gen List Card Shadow */
+  box-shadow: 1px 0 6.7px 2px rgba(0, 0, 0, 0.08);
+  transition: box-shadow 0.2s ease-in-out;
+}
+.ContentCardVertical-module__contentCard___EoYej:hover {
+  box-shadow: 3px 6px 8px -5px rgba(0, 0, 0, 0.3);
+}
+.ContentCardVertical-module__contentCard___EoYej:focus-visible {
+  outline: 2px solid #000000;
+  outline-offset: 2px;
+}
+.ContentCardVertical-module__contentCard___EoYej:focus:not(:focus-visible) {
+  border: 1px solid #000000;
+}
+.ContentCardVertical-module__contentCard___EoYej .content-card-image-wrapper {
+  aspect-ratio: 16/9;
+  overflow: hidden;
+  background-color: #dae0e3;
+}
+.ContentCardVertical-module__contentCard___EoYej .content-card-image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+}
+.ContentCardVertical-module__contentCard___EoYej button {
+  width: 100%;
+  min-width: 0;
+  min-height: 44px;
+  margin-top: auto;
+}
+.ContentCardVertical-module__contentCard___EoYej .career-button {
+  justify-content: flex-start;
+}
+
+.ContentCardVertical-module__contentCard--instant-view___dsIUf,
+.ContentCardVertical-module__contentCard--results-view___6mSHQ {
+  gap: 0.5rem;
+}
+
+.ContentCardVertical-module__contentMeta___l2GtO {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+  margin: 0;
+}
+
+.ContentCardVertical-module__contentCategory___78vrj,
+.ContentCardVertical-module__contentMetaText___Rl-ln {
+  margin: 0;
+  font-size: var(--body-desktop-size);
+  line-height: var(--body-desktop-line-height);
+  color: #4a4e54;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+.ContentCardVertical-module__contentCategory___78vrj {
+  font-weight: 300;
+}
+
+.ContentCardVertical-module__contentTitle___rEiHm {
+  margin: 0;
+  font-size: var(--h3-mobile-size);
+  font-weight: 900;
+  line-height: var(--h3-mobile-line-height);
+  color: #4a4e54;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+.ContentCardVertical-module__contentExcerpt___5Gb2G {
+  margin: 0;
+  font-size: var(--body-desktop-size);
+  font-weight: 400;
+  line-height: var(--body-desktop-line-height);
+  color: #4a4e54;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+@media (max-width: 768px) {
+  .ContentCardVertical-module__contentCard___EoYej {
+    max-width: 100%;
+    padding: 1rem;
+  }
+  .ContentCardVertical-module__contentCategory___78vrj,
+  .ContentCardVertical-module__contentMetaText___Rl-ln,
+  .ContentCardVertical-module__contentExcerpt___5Gb2G {
+    font-size: 1rem;
+  }
+  .ContentCardVertical-module__contentTitle___rEiHm {
+    font-size: var(--h3-mobile-size);
+  }
+}
+:root {
+  --leybold-red: #e2001a;
+  --leybold-black: #000000;
+  --leybold-white: #ffffff;
+  --leybold-blue-grey: #546672;
+  --leybold-white-aluminium: #dae0e3;
+  --leybold-window-gray: #99a1ab;
+  --leybold-light-grey: #c5c7c4;
+  --leybold-very-light-grey: #f5f5f5;
+  --leybold-slate-gray: #4a4e54;
+  --leybold-anthracite-gray: #383e42;
+  --leybold-orange: #d18e56;
+  --leybold-yellow: #edd163;
+  --leybold-green: #6ea67b;
+  --leybold-purple: #732d5d;
+  --leybold-purple-gray: #945e67;
+  --leybold-blue: #2b4679;
+  --leybold-light-blue: #3f6a98;
+  --leybold-blue-green: #39788e;
+  --leybold-green-gray: #6d8f9f;
+  --color-primary: #e2001a;
+  --color-secondary: #546672;
+  --color-success: #6ea67b;
+  --color-danger: #e2001a;
+  --color-warning: #d18e56;
+  --color-info: #3f6a98;
+  --text-primary: #000000;
+  --text-secondary: #4a4e54;
+  --text-muted: #99a1ab;
+  --text-inverse: #ffffff;
+  --bg-primary: #ffffff;
+  --bg-secondary: #dae0e3;
+  --bg-dark: #383e42;
+  --border-color: #c5c7c4;
+  --border-color-dark: #4a4e54;
+  --font-family-base: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --h1-mobile-size: 32px;
+  --h1-mobile-line-height: 1.2;
+  --h2-mobile-size: 24px;
+  --h2-mobile-line-height: 1.2;
+  --h3-mobile-size: 18px;
+  --h3-mobile-line-height: 1.6;
+  --h4-mobile-size: 16px;
+  --h4-mobile-line-height: 1.55;
+  --h5-mobile-size: 14px;
+  --h5-mobile-line-height: 1.5;
+  --body-mobile-size: 14px;
+  --body-mobile-line-height: 1.5;
+  --h1-desktop-size: 55px;
+  --h1-desktop-line-height: 1.15;
+  --h1-desktop-letter-spacing: -0.02em;
+  --h2-desktop-size: 40px;
+  --h2-desktop-line-height: 1.2;
+  --h2-desktop-letter-spacing: -0.01em;
+  --h3-desktop-size: 32px;
+  --h3-desktop-line-height: 1.2;
+  --h4-desktop-size: 24px;
+  --h4-desktop-line-height: 1.2;
+  --h5-desktop-size: 18px;
+  --h5-desktop-line-height: 1.6;
+  --body-desktop-size: 18px;
+  --body-desktop-line-height: 1.6;
+  --text-lg-size: 27px;
+  --text-lg-line-height: 1.4;
+  --text-xl-size: 36px;
+  --text-xl-line-height: 1.4;
+  --text-xxl-size: 64px;
+  --text-xxl-line-height: 1;
+}
+
 @keyframes loading {
   0% {
     transform: skewX(-10deg) translateX(-100%);
@@ -1954,6 +2143,24 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
   opacity: 0;
   z-index: -1;
 }
+.cmpAlgoliaDynamicSearchWidget.hasStyleSilverGradientBackground {
+  background: #c5c7c4;
+}
+.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground {
+  background: #383e42;
+}
+.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text {
+  color: white;
+}
+.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h1,
+.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h2,
+.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h3,
+.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h4,
+.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h5,
+.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h6,
+.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text p {
+  color: white;
+}
 
 .cmpAlgoliaDynamicSearchWidget__container {
   margin-left: auto;
@@ -1990,7 +2197,10 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
 .cmpAlgoliaDynamicSearchWidget__header h6,
 .cmpAlgoliaDynamicSearchWidget__header p {
   margin: 0;
-  color: #546672;
+  color: var(--leybold-anthracite-gray);
+}
+.cmpAlgoliaDynamicSearchWidget__header p {
+  line-height: 160%;
 }
 
 .cmpAlgoliaDynamicSearchWidget__header__text {
@@ -2000,53 +2210,46 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
 }
 @media screen and (min-width: 768px) {
   .cmpAlgoliaDynamicSearchWidget__header__text {
-    max-width: 75%;
+    max-width: 66.66%;
   }
 }
 
 .cmpAlgoliaDynamicSearchWidget__cards {
   display: grid;
   gap: 1rem;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(0, 1fr);
+}
+.cmpAlgoliaDynamicSearchWidget__cards > * {
+  min-width: 0;
+  width: 100%;
 }
 @media (min-width: 768px) {
   .cmpAlgoliaDynamicSearchWidget__cards {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 @media (min-width: 961px) {
   .cmpAlgoliaDynamicSearchWidget__cards {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
 
 .cmpAlgoliaDynamicSearchWidget.isQueryContent .cmpAlgoliaDynamicSearchWidget__cards {
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+@media (min-width: 768px) {
+  .cmpAlgoliaDynamicSearchWidget.isQueryContent .cmpAlgoliaDynamicSearchWidget__cards {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 @media (min-width: 961px) {
   .cmpAlgoliaDynamicSearchWidget.isQueryContent .cmpAlgoliaDynamicSearchWidget__cards {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
 
 .cmpAlgoliaDynamicSearchWidget.hasStyleSilverGradientBackground {
-  background: #3f6a98;
-}
-
-.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground {
-  background: #546672;
-}
-.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text {
-  color: white;
-}
-.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h1,
-.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h2,
-.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h3,
-.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h4,
-.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h5,
-.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text h6,
-.cmpAlgoliaDynamicSearchWidget.hasStyleGreyBackground .cmpAlgoliaDynamicSearchWidget__header__text p {
-  color: white;
+  background: #c5c7c4;
 }
 
 .cmpAlgoliaDynamicSearchWidget__placeholder {