From bd4853e97052561a7ba31e4042a12cd83a69ce39 Mon Sep 17 00:00:00 2001 From: kkrzowski Date: Wed, 21 Jan 2026 15:03:24 +0100 Subject: [PATCH] add style.less --- style.less | 156 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 style.less diff --git a/style.less b/style.less new file mode 100644 index 0000000..4ffaafa --- /dev/null +++ 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; + } + } + } +} \ No newline at end of file