intelicoreact 1.5.38 → 1.5.41

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

@@ -1,207 +1,69 @@
-@use '../../../scss/vars';
-@use '../../../scss/mixins';
+@import "../../../scss/vars";
+@import "../../../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;
 
-    width: 100%;
-    padding: var(--accordion-padding);
+    height: fit-content;
+    padding: 10px 15px;
 
-    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: 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);
+      background-color: $color--gray-gentel;
     }
   }
 
   &__icon-container {
     display: flex;
-    flex-shrink: 0;
+    flex-flow: row nowrap;
     justify-content: center;
     align-items: center;
 
-    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));
+    width: fit-content;
+    height: 100%;
   }
 
-  &__title-container {
+  &__tile-container {
     flex-grow: 1;
   }
 
   &__container {
-    z-index: var(--accordion-content-z-index);
-
+    display: flex;
     overflow: hidden;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
 
-    max-height: 0;
+    font-size: 13px;
 
-    transition: max-height var(--accordion-transition-duration) var(--accordion-transition-timing);
+    transition: all 0.25s ease-out;
+
+    @include custom-scroll;
   }
 
   &__content-wrapper {
-    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;
+    padding: 0 15px;
   }
 
-  &--is-open {
-    > .mono-accordion__container {
-      max-height: var(--content-height, 1000px);
-    }
-
-    > .mono-accordion__container .mono-accordion__content-wrapper {
-      opacity: 1;
+  &_open {
+    .mono-accordion__container {
+      padding: 10px 15px;
 
-      transform: scale(1);
+      transition: all 0.25s ease-out;
     }
 
-    > .mono-accordion__head .mono-accordion__icon-container {
-      transform: rotate(var(--accordion-icon-rotation));
+    .mono-accordion__content-wrapper {
+      pointer-events: initial;
     }
   }
 
-  &--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;
   }
 }