intelicoreact 1.5.33 → 1.5.35

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.scss

@@ -1,69 +1,207 @@
-@import "../../../scss/vars";
-@import "../../../scss/mixins";
+@use '../../../scss/vars';
+@use '../../../scss/mixins';
 
 .mono-accordion {
+  // Layout & Spacing
+  --accordion-padding-x: 15px;
+  --accordion-padding-y: 10px;
+  --accordion-padding: var(--accordion-padding-y) var(--accordion-padding-x);
+  --accordion-nested-margin: 10px;
+  --accordion-icon-margin: 12px;
+  --accordion-border-radius: 0px;
+  --accordion-max-width: 100%;
+  --accordion-min-width: auto;
+
+  // Typography
+  --accordion-font-size: 13px;
+  --accordion-font-weight: 400;
+  --accordion-line-height: 1.4;
+  --accordion-title-font-size: var(--accordion-font-size);
+  --accordion-title-font-weight: 500;
+  --accordion-content-font-size: var(--accordion-font-size);
+
+  // Colors
+  --accordion-bg: transparent;
+  --accordion-hover-bg: var(--color-gray-gentle, #{vars.$color--gray-gentel});
+  --accordion-active-bg: var(--accordion-hover-bg);
+  --accordion-text-color: inherit;
+  --accordion-title-color: var(--accordion-text-color);
+  --accordion-content-color: var(--accordion-text-color);
+  --accordion-icon-color: currentColor;
+  --accordion-disabled-opacity: 0.5;
+
+  // Borders
+  --accordion-border-width: 0px;
+  --accordion-border-style: solid;
+  --accordion-border-color: transparent;
+  --accordion-focus-ring-color: #4a90e2;
+  --accordion-focus-ring-width: 2px;
+  --accordion-focus-ring-offset: -2px;
+
+  // Animation
+  --accordion-transition-duration: 350ms;
+  --accordion-transition-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --accordion-icon-rotation: 180deg;
+  --accordion-scale-factor: 0.98;
+  --accordion-content-origin: top;
+
+  // Icons
+  --accordion-icon-size: 1em;
+  --accordion-icon-rotation-initial: 0deg;
+
+  // Z-index
+  --accordion-head-z-index: 1;
+  --accordion-content-z-index: 0;
+  width: var(--accordion-max-width);
+  min-width: var(--accordion-min-width);
   height: fit-content;
 
+  font-size: var(--accordion-font-size);
+  line-height: var(--accordion-line-height);
+
+  color: var(--accordion-text-color);
+  border: var(--accordion-border-width) var(--accordion-border-style) var(--accordion-border-color);
+  border-radius: var(--accordion-border-radius);
+  background: var(--accordion-bg);
+
+  // Стили для вложенных аккордеонов
+  .mono-accordion {
+    margin: var(--accordion-nested-margin) 0;
+
+    .mono-accordion__container {
+      max-height: 0;
+    }
+
+    &--is-open {
+      .mono-accordion__container {
+        max-height: var(--content-height, 1000px);
+      }
+
+      .mono-accordion__content-wrapper {
+        opacity: 1;
+
+        transform: scale(1);
+      }
+    }
+  }
+
   &__head {
+    z-index: var(--accordion-head-z-index);
+
     display: flex;
     justify-content: space-between;
     align-items: center;
 
-    height: fit-content;
-    padding: 10px 15px;
+    width: 100%;
+    padding: var(--accordion-padding);
 
+    font-size: var(--accordion-title-font-size);
+    font-weight: var(--accordion-title-font-weight);
     cursor: pointer;
+    text-align: left;
+
+    color: var(--accordion-title-color);
+    border: none;
+    background: none;
+
+    transition: background-color var(--accordion-transition-duration) ease;
+    transform: translateZ(0);
 
     &:hover {
-      background-color: $color--gray-gentel;
+      background-color: var(--accordion-hover-bg);
+    }
+
+    &:active {
+      background-color: var(--accordion-active-bg);
+    }
+
+    &:focus-visible {
+      outline: var(--accordion-focus-ring-width) solid var(--accordion-focus-ring-color);
+      outline-offset: var(--accordion-focus-ring-offset);
     }
   }
 
   &__icon-container {
     display: flex;
-    flex-flow: row nowrap;
+    flex-shrink: 0;
     justify-content: center;
     align-items: center;
 
-    width: fit-content;
-    height: 100%;
+    margin-left: var(--accordion-icon-margin);
+
+    font-size: var(--accordion-icon-size);
+
+    color: var(--accordion-icon-color);
+
+    transition: transform var(--accordion-transition-duration) var(--accordion-transition-timing);
+    transform: rotate(var(--accordion-icon-rotation-initial));
   }
 
-  &__tile-container {
+  &__title-container {
     flex-grow: 1;
   }
 
   &__container {
-    display: flex;
-    overflow: hidden;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
+    z-index: var(--accordion-content-z-index);
 
-    font-size: 13px;
+    overflow: hidden;
 
-    transition: all 0.25s ease-out;
+    max-height: 0;
 
-    @include custom-scroll;
+    transition: max-height var(--accordion-transition-duration) var(--accordion-transition-timing);
   }
 
   &__content-wrapper {
-    padding: 0 15px;
+    padding: 0 var(--accordion-padding-x);
+
+    font-size: var(--accordion-content-font-size);
+
+    opacity: 0;
+    color: var(--accordion-content-color);
+
+    transition:
+      opacity var(--accordion-transition-duration) var(--accordion-transition-timing),
+      transform var(--accordion-transition-duration) var(--accordion-transition-timing);
+    transform: scale(var(--accordion-scale-factor));
+    transform-origin: var(--accordion-content-origin);
+    will-change: transform, opacity;
   }
 
-  &_open {
-    .mono-accordion__container {
-      padding: 10px 15px;
+  &--is-open {
+    > .mono-accordion__container {
+      max-height: var(--content-height, 1000px);
+    }
+
+    > .mono-accordion__container .mono-accordion__content-wrapper {
+      opacity: 1;
 
-      transition: all 0.25s ease-out;
+      transform: scale(1);
     }
 
-    .mono-accordion__content-wrapper {
-      pointer-events: initial;
+    > .mono-accordion__head .mono-accordion__icon-container {
+      transform: rotate(var(--accordion-icon-rotation));
     }
   }
 
-  &_disabled {
+  &--disabled {
     pointer-events: none;
+
+    opacity: var(--accordion-disabled-opacity);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    --accordion-transition-duration: 0ms;
+
+    &__content-wrapper {
+      transform: none;
+    }
+  }
+
+  @media (max-width: 768px) {
+    --accordion-padding-x: 12px;
+    --accordion-padding-y: 8px;
+    --accordion-nested-margin: 8px;
+    --accordion-icon-margin: 8px;
+    --accordion-font-size: 14px;
   }
 }