add style.less

2026-01-21 15:03:24 +01:00
commit bd4853e970
1 changed files with 156 additions and 0 deletions
--- a/style.less
+++ b/style.less
@@ -0,0 +1,156 @@
+@idm-tabs__weight-bold : @font_bold;
+@idm-tabs__weight-normal : @font_normal;
+@idm-tabs__primary-green: @primary_green;
+@idm-tabs__primary-black: @primary_black;
+@idm-tabs__secondary-green: #3EB975;
+@idm-tabs__primary-orange: @primary_orange;
+@idm-tabs__secondary-gray: @primary_grey;
+@idm-tabs__mobile-h2: @headline_font;
+@idm-tabs__mobile-body-large: 1.8rem;
+@idm-tabs__mobile-body-medium: @body_m_font;
+@idm-tabs__mobile-body-small: @body_s_font;
+@idm-tabs__lineheight-l: @line_height;
+@idm-tabs__lineheight-m: 120%;
+@idm-tabs__modal-max-width: 1179px;
+@idm-tabs__modal-max-height: 867px;
+
+@idm-tabs__secondary-white: @primary_white;
+
+@idm-tabs__secondary-background-gray: @second_bg;
+@idm-tabs__secondary-outline-gray: @primary_secondary_grey;
+
+.idm-tabs{
+  
+  &__cache-container{
+    display: none;
+    & * {
+      display: none;
+    }
+  }
+
+  &-modal{
+    z-index: 99999999;
+    .modal__wrapper{
+      width: 100vw !important;
+      height: 100% !important;
+      max-width: @idm-tabs__modal-max-width !important;
+      max-height: @idm-tabs__modal-max-height !important;
+      margin: 0 !important;
+      border-radius: 0 !important;
+      padding:0 !important;
+      background-color: transparent !important;
+    
+      .modal__content{
+        height: 100%;
+      }
+      & > .modal__close, .modal__close::before{
+        display: none !important;
+      }  
+    }
+  
+  
+    &__wrapper{
+      position: relative;
+      background-color: @idm-tabs__secondary-white;
+      padding: 2.4rem 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    
+      @media @desktop{
+        border-radius: 8px;
+      }
+    
+    }
+    
+    &__heading{
+      margin-bottom: 1.6rem;
+      
+      @media @laptop{
+        margin-bottom: 2.4rem;
+      }
+    }
+  
+    &__title-wrapper{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 2.4rem;
+      padding: 0 2.4rem;
+    }
+    
+    &__title{
+      color: @idm-tabs__primary-black !important;
+      font-size: @idm-tabs__mobile-h2 !important;
+      font-weight: @idm-tabs__weight-bold !important;
+      line-height: @idm-tabs__lineheight-m !important;
+    } 
+    
+    &__close-button{
+      position: relative;
+      width: 4.2rem;
+      height: 4.2rem;
+      min-width: 4.2rem;
+      background-color: @idm-tabs__secondary-background-gray;
+      border-radius: 10rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    
+    &__buttons{
+      margin-top: 2.4rem;
+      display: flex;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      
+      scrollbar-width: none; /* Firefox */
+      -ms-overflow-style: none; /* IE 10+ */
+    
+      @media @laptop{
+        padding: 0 2.4rem;
+      }
+    
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+    
+    &__button{
+      padding: 0 1.2rem 1.2rem 1.2rem;
+      font-size: @idm-tabs__mobile-body-large;
+      line-height: 130%;
+      font-weight: @idm-tabs__weight-normal;
+      white-space: nowrap;
+      border-bottom: 2px solid @idm-tabs__secondary-outline-gray;
+    
+      @media @laptop{
+        padding: 0 2rem 2rem 2rem;
+      }
+      
+      &--active{
+        border-bottom: 2px solid @idm-tabs__primary-black;
+      }
+    }
+    
+    
+    &__content{
+      position: relative;
+      flex: 1;
+      overflow-y: auto;
+      padding:0 2.4rem;
+    }
+  
+    &__tab{
+      position: relative;
+      display: none;
+      height: 100%;
+      width: 100%;
+    
+      &--active{
+        display: block;
+      }
+    }
+  }
+}