MH: diverses

gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderComponent.js

@@ -124,7 +124,7 @@ export const createMarketingHeader =
       if (slideData.cta && slideData.link) {
         const buttonP = createElement('p', [], '', textBox);
         const btn = createButton({
-          color: 'white', icon: 'pfeil-simple-rechts', iconPosition: 'icon-right', label: slideData.cta
+          color: 'white', icon: 'pfeil-simple-rechts', iconPosition: 'icon-right', label: slideData.cta, size: 'small',
         });
         buttonP.appendChild(btn);
       }

gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss

@@ -2,36 +2,6 @@
 @import '../../_global/styles/vars';
 section.marketingheader{
   margin-top:0;
-  .rotation .slider{
-    border-bottom:0;
-    border-radius: 4px;
-    .slide-overflow{
-      border-radius: 4px;
-    }
-    .slider-tabs{
-      li:first-child:last-child{
-        display:none;
-      }
-    }
-    .text-box{
-        color:var(--theme-color-primary);
-        &:not(:first-child)::before {
-          background-color: var(--theme-color-primary-dimmed-04);
-        }
-        .btn{
-          background-color: var(--theme-color-primary);
-          color:white;
-          &:hover:after{
-            box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--theme-color-primary);
-          }
-        }
-      }
-      .text-only{
-        .text-box{
-          color:white;
-        }
-      }
-  }
   .search {
     position: relative;
     overflow: hidden;
@@ -575,8 +545,8 @@ section.marketingheader{
           }
           
         }
-        .slide.text-only.current {
-          background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
+        .slide.text-only.current{
+            background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
         }
       }
       
@@ -658,34 +628,96 @@ section.marketingheader{
       }
     }
   }
+  .rotation .slider{
+    border-bottom:0;
+    border-radius: 4px;
+    background-color: white;
+    h3{
+      margin-top: 4px;
+      margin-bottom: 8px;
+    }
+    .kicker{
+      margin-bottom:0;
+    }
+    p{
+      margin-bottom:0.4em;
+    }
+    .btn{
+      margin-top:0.4em;
+    }
+    .slide-overflow{
+      border-radius: 4px;
+    }
+    .slider-tabs{
+      li:first-child:last-child{
+        display:none;
+      }
+    }
+    .slide.text-only.current{
+      background: none;
+      outer{
+        background: linear-gradient(-10deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
+        .text-box{
+          justify-content: center;
+        }
+      }
+    }
+    .text-box{
+        color:var(--theme-color-primary);
+        padding: 30px 36px 24px 36px;
+        display: flex;
+        flex-flow: column;
+        justify-content: end;
+        min-width: 324px;
+        &:not(:first-child)::before {
+          background-color: var(--theme-color-primary-dimmed-04);
+        }
+        .btn{
+          background-color: var(--theme-color-primary);
+          color:white;
+          &:hover:after{
+            box-shadow: 0 0 0 var(--button-hover-shadow-size) var(--theme-color-primary);
+          }
+        }
+      }
+      .text-only{
+         .text-box{
+            color:white;         
+        }
+      }
+  }
   .rotation{
     margin:0;
-    @media screen and (max-width:900px){
+    @media (max-width: 1339px) {
+      .rotation .slider .text-box {
+        min-width: 324px;
+      }
+    }
+    @media (min-width: 1001px) {
+      .slider .text-box:not(:first-child)::before {
+        border-top-right-radius: 16% 50% !important;
+        border-bottom-right-radius: 16% 50% !important;
+        margin: -15% -8% -15% 20px;
+      }
+    }
+    @media (max-width:1000px){
       .slider{
-        background-color: transparent;
+        background-color: white;
         .slider-tabs{
           top:0;
           height: auto;
           bottom: auto;
           margin-top:15px;
-          @media screen and (max-width:767px){
-            .btn{
-              --button-icon-padding: 30px;
-              --button-icon-offset: 5px;
-              --button-padding: 5px 10px;
-              --button-min-size: 30px;
-              margin: 2.5px;
-            }
-          }
         }
-        .text-box{
-          padding: var(--container-padding);
+        .slide:not(.text-only) .text-box{
+          padding: 16px 0;
         }
         .text-box:not(:first-child)::before{
           display: none;
         }
         .image-box{
           order: 0;
+          
           &:before{
             display: none;
           }
@@ -696,6 +728,33 @@ section.marketingheader{
         }
       }
     }
+    @media screen and (max-width:900px){
+      .slider{
+        margin-bottom:20px;
+        .slide:not(.text-only){          
+          .text-box{
+            padding: 16px var(--container-padding) 0;
+          }
+        }
+        .slide.text-only{
+          padding-left: var(--container-padding);
+          padding-right: var(--container-padding);
+        }
+        .image-box{
+          padding-left: var(--container-padding);
+          padding-right: var(--container-padding);
+        }
+        .slider-tabs{
+          right: calc(var(--container-padding) + 10px);
+          top: 15px;
+          padding: 0;
+          margin: 0;
+          .btn{
+            margin-top:0 !important; 
+          }
+        }
+      }
+    }
     @media screen and (max-width:767px){
       .slider{
         .image-box{
@@ -703,6 +762,18 @@ section.marketingheader{
             height:250px;
           }
         }
+        .slide:not(.text-only) .text-box{
+          padding: 16px var(--container-padding);
+        }
+        .slider-tabs{
+          .btn{
+            --button-icon-padding: 30px;
+            --button-icon-offset: 5px;
+            --button-padding: 5px 10px;
+            --button-min-size: 30px;
+            margin: 2.5px;
+          }
+        }
       }
     }
     @media screen and (max-width:567px) {