intelicoreact 1.5.41 → 1.6.1

package/dist/Atomic/UI/NavLine/NavLine.scss

@@ -1,222 +1,269 @@
-.nav-line {
-  &__inner {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: center;
-
-    background-color: #f7fafc;
-  }
+.nav-line-wrapper {
+  // Colors
+  --nav-line-bg: #f7fafc;
+  --nav-line-text: #1e1e2d;
+  --nav-line-active: #6b81dd;
+  --nav-line-border: #cfcfcf;
+  --nav-line-arrow: #424242;
+  --nav-line-arrow-shadow: #ddd;
+  --nav-line-white: #fff;
+
+  // Sizes
+  --nav-line-font-size: 13px;
+  --nav-line-icon-size: 17px;
+  --nav-line-arrow-size: 24px;
+  --nav-line-arrow-width: 36px;
+  --nav-line-arrow-height: 39px;
+
+  // Spacing
+  --nav-line-padding: 10px;
+  --nav-line-body-padding: 24px 32px;
+  --nav-line-margin: -32px;
+
+  // Animation
+  --nav-line-transition-duration: 0.3s;
+  --nav-line-transition-timing: ease;
+
+  .nav-line {
+    &__content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    &__inner {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      align-items: center;
 
-  &__item {
-    margin-bottom: -1px;
-    padding: 10px;
+      background-color: var(--nav-line-bg, #f7fafc);
 
-    font-size: 13px;
-    cursor: pointer;
-    user-select: none;
+      transition: transform var(--nav-line-transition-duration, 0.3s)
+        var(--nav-line-transition-timing, ease);
+    }
 
-    color: #1e1e2d;
-    border-top: 2px solid transparent;
-    border-right: 1px solid transparent;
-    border-left: 1px solid transparent;
+    &__item {
+      margin-bottom: -1px;
+      padding: var(--nav-line-padding, 10px);
 
-    &--label {
-      text-transform: uppercase;
-    }
+      font-size: var(--nav-line-font-size, 13px);
+      cursor: pointer;
+      user-select: none;
 
-    &--icon {
-      display: flex;
-      align-items: center;
+      color: var(--nav-line-text, #1e1e2d);
+      border-top: 2px solid transparent;
+      border-right: 1px solid transparent;
+      border-left: 1px solid transparent;
 
-      margin-right: 5px;
+      transition: all var(--nav-line-transition-duration, 0.3s)
+        var(--nav-line-transition-timing, ease);
 
-      svg {
-        width: 17px;
-        height: 17px;
+      &--label {
+        text-transform: uppercase;
       }
-    }
 
-    &.active {
-      font-weight: 500;
-      cursor: default;
-      text-decoration: none;
+      &--icon {
+        display: flex;
+        align-items: center;
+
+        margin-right: 5px;
+
+        svg {
+          width: var(--nav-line-icon-size, 17px);
+          height: var(--nav-line-icon-size, 17px);
+        }
+      }
+
+      &.active {
+        font-weight: 500;
+        cursor: default;
+        text-decoration: none;
+
+        color: var(--nav-line-active, #6b81dd);
+        border-top: 2px solid var(--nav-line-active, #6b81dd);
+        border-right: 1px solid var(--nav-line-border, #cfcfcf);
+        border-left: 1px solid var(--nav-line-border, #cfcfcf);
+        background: var(--nav-line-white, #fff);
 
-      color: #6b81dd;
-      border-top: 2px solid #6b81dd;
-      border-right: 1px solid #cfcfcf;
-      border-left: 1px solid #cfcfcf;
-      background: #fff;
+        transition: all var(--nav-line-transition-duration, 0.3s)
+          var(--nav-line-transition-timing, ease);
+      }
     }
-  }
 
-  &__body {
-    position: relative;
-    bottom: 0;
+    &__body {
+      position: relative;
+      bottom: 0;
 
-    display: flex;
-    flex-wrap: wrap;
+      display: flex;
+      flex-wrap: wrap;
 
-    margin-right: -32px;
-    margin-left: -32px;
-    padding: 24px 32px;
+      margin-right: var(--nav-line-margin, -32px);
+      margin-left: var(--nav-line-margin, -32px);
+      padding: var(--nav-line-body-padding, 24px 32px);
 
-    font-size: 13px;
+      font-size: var(--nav-line-font-size, 13px);
 
-    border-top: 1px solid #cfcfcf;
-    background-color: #f7fafc;
+      border-top: 1px solid var(--nav-line-border, #cfcfcf);
+      background-color: var(--nav-line-bg, #f7fafc);
 
-    &:empty {
-      padding: 0 32px;
+      &:empty {
+        padding: 0 32px;
+      }
     }
-  }
 
-  &--scroll-mode {
-    position: relative;
+    &--scroll-mode {
+      position: relative;
 
-    .nav-line--simple__inner {
-      overflow: hidden;
-      flex-wrap: nowrap;
-    }
+      .nav-line--simple__inner {
+        overflow: hidden;
+        flex-wrap: nowrap;
+      }
 
-    .nav-line--simple__item {
-      flex-wrap: nowrap;
+      .nav-line--simple__item {
+        flex-wrap: nowrap;
 
-      white-space: nowrap;
+        white-space: nowrap;
+      }
     }
   }
-}
-
-.nav-line--simple {
-  &__inner {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: center;
 
-    padding-left: 8px;
-  }
+  .nav-line--simple {
+    &__inner {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      align-items: center;
 
-  &__item {
-    position: relative;
+      padding-left: 8px;
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
+      transition: transform var(--nav-line-transition-duration, 0.3s)
+        var(--nav-line-transition-timing, ease);
+    }
 
-    margin-bottom: -1px;
-    padding: 10px 10px 14px;
+    &__item {
+      position: relative;
 
-    font-size: 13px;
-    cursor: pointer;
-    user-select: none;
-    text-decoration: none !important;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-    color: #1e1e2d;
-    border-bottom: 1px solid #cfcfcf;
+      margin-bottom: -1px;
+      padding: var(--nav-line-padding, 10px) var(--nav-line-padding, 10px) 14px;
 
-    transition: all 0.2s ease-out;
+      font-size: var(--nav-line-font-size, 13px);
+      cursor: pointer;
+      user-select: none;
+      text-decoration: none !important;
 
-    &::after {
-      position: absolute;
-      bottom: 0;
+      color: var(--nav-line-text, #1e1e2d);
+      border-bottom: 1px solid var(--nav-line-border, #cfcfcf);
 
-      width: 0;
-      height: 2px;
+      transition: all var(--nav-line-transition-duration, 0.3s)
+        var(--nav-line-transition-timing, ease);
 
-      content: "";
+      &::after {
+        position: absolute;
+        bottom: 0;
+        left: 50%; // Центрируем полоску
 
-      background-color: #6b81dd;
+        width: 0;
+        height: 2px;
 
-      transition: all 0.2s ease-out;
-    }
+        content: "";
 
-    &:hover {
-      &::after {
-        width: 50%;
+        background-color: var(--nav-line-active, #6b81dd);
 
-        opacity: 0.6;
+        transition: all var(--nav-line-transition-duration, 0.3s)
+          var(--nav-line-transition-timing, ease);
+        transform: translateX(-50%); // Выравниваем относительно центра
       }
-    }
 
-    &.active {
-      font-weight: 500;
-      cursor: default;
+      &:hover {
+        &::after {
+          width: 50%;
 
-      opacity: 1;
-
-      &::after {
-        left: 0;
+          opacity: 0.6;
+        }
+      }
 
-        width: 100%;
+      &.active {
+        font-weight: 500;
+        cursor: default;
 
         opacity: 1;
+
+        &::after {
+          width: 100%;
+
+          opacity: 1;
+        }
       }
     }
-  }
 
-  &__arrow {
-    position: absolute;
-    z-index: 2;
+    &__arrow {
+      position: absolute;
+      z-index: 2;
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-    box-sizing: border-box;
-    width: 36px;
-    height: 39px;
+      box-sizing: border-box;
+      width: var(--nav-line-arrow-width, 36px);
+      height: var(--nav-line-arrow-height, 39px);
 
-    color: #424242;
-    background: #fff;
+      color: var(--nav-line-arrow, #424242);
+      background: var(--nav-line-white, #fff);
 
-    transition: all 0.5s;
+      transition: all var(--nav-line-transition-duration, 0.3s)
+        var(--nav-line-transition-timing, ease);
 
-    &:hover {
-      cursor: pointer;
-    }
+      &:hover {
+        cursor: pointer;
+      }
 
-    &--prev {
-      top: 0;
-      left: 0;
+      &--prev {
+        top: 0;
+        left: 0;
 
-      border-radius: 8px 0 0 8px;
-      box-shadow: 10px 0 10px -5px #ddd;
+        border-radius: 8px 0 0 8px;
+        box-shadow: 10px 0 10px -5px var(--nav-line-arrow-shadow, #ddd);
 
-      transform: translate(-100%, -2px);
-    }
+        transform: translate(-100%, -2px);
+      }
 
-    &--next {
-      top: 0;
-      right: 0;
+      &--next {
+        top: 0;
+        right: 0;
 
-      border-radius: 0 8px 8px 0;
-      box-shadow: -10px 0 10px -5px #ddd;
+        border-radius: 0 8px 8px 0;
+        box-shadow: -10px 0 10px -5px var(--nav-line-arrow-shadow, #ddd);
 
-      transform: translate(100%, -2px);
-    }
+        transform: translate(100%, -2px);
+      }
 
-    svg {
-      width: 24px;
-      height: 24px;
+      svg {
+        width: var(--nav-line-arrow-size, 24px);
+        height: var(--nav-line-arrow-size, 24px);
+      }
     }
-  }
 
-  &__body {
-    padding: 15px 10px;
+    &__body {
+      padding: 15px 10px;
 
-    font-size: 13px;
+      font-size: var(--nav-line-font-size, 13px);
+    }
   }
-}
 
-.nav-line-count {
-  margin-left: 5px;
-}
+  .nav-line-count {
+    margin-left: 5px;
+  }
 
-.post-log-tab__body {
-  background-color: #f7fafc;
-}
+  .post-log-tab__body {
+    background-color: var(--nav-line-bg, #f7fafc);
+  }
 
-.nav-line__item--hidden {
-  display: none;
+  .nav-line__item--hidden {
+    display: none;
+  }
 }