добавляю скрипты для работы компонента: контекст для универсального доступа к компоненту, сам tsx компонент и css стили

2026-03-22 18:36:01 +03:00
parent a0dad6e138
commit 9b4c68022d
3 changed files with 338 additions and 0 deletions
@@ -0,0 +1,121 @@
+@import url('./../variables.css');
+
+/* #modal-window__background{
+  position: fixed;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: #6a6a6ab5;
+  top: 0;
+  z-index: 99;
+} */
+
+.entity-hist-container{
+  position: fixed;
+  width: 50%;
+  top: 10%;
+  left: 25%;
+  z-index: 100;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0px 0px 15px 1px #9b9999;
+
+  &>.hist__header-block{
+    display: flex;
+      align-items: center;
+      justify-content: space-between;
+    background: var(--color_graphite_main);
+    min-height: 7%;
+    height: auto;
+    border-radius: 10px;
+    color: white;
+    padding: 10px;
+
+    &>.hist__header__buttons{
+
+      &>.header__buttons__close{
+        transform: rotate(45deg);
+        font-size: 2rem;
+        color: var(--color_ruby_main);
+        cursor: pointer;
+      }
+    }
+  }
+
+  &>.hist__content-block{
+    overflow-y: scroll;
+    padding: 10px;
+    max-height: 500px;
+
+    &>.hist-container__date-block{
+      display: flex;
+    
+      &>.date-block__date{
+        flex-basis: 15%;
+
+        &>div{
+          position: sticky;
+          top: 0px;
+          padding: 3px;
+          background: var(--color_purple_main);
+          border-radius: 5px 0 0 5px;
+          color: white;
+        }
+      }
+
+      &>.date-block__changes{
+        flex-basis: 85%;
+        border-left: 2px solid black;
+        padding: 0 10px;
+
+        &>.changes__action-block{
+
+          & .action-block__action-name{
+            padding: 3px;
+            border-radius: 3px;
+            font-size: 1.2rem;
+            /* border-bottom: 3px solid var(--color_purple_main); */
+            background: color-mix(in srgb, var(--color_purple_main) 20%, transparent);
+            box-shadow: 0px 2px 3px 0px #c0bdd3;
+          }
+
+          &:last-child{
+            margin-bottom: 30px;
+          }
+
+          &>.changes__date-time-block{
+            display: flex;
+              justify-content: space-between;
+            margin: 5px 0px 10px 0px;
+            color: rgb(173 173 173);
+          }
+
+          &>.changes__details{
+            margin-bottom: 15px;
+
+            & .changes__details__el{
+              display: flex;
+                justify-content: space-between;
+              margin-bottom: 10px;
+
+              &>.changes__details__el__prop-name{
+                flex-basis: 30%;
+                font-weight: 500;
+              }
+
+              &>.changes__details__el__prop-val{
+                flex-basis: 70%;
+                background: #91919121;
+                border-radius: 5px;
+                padding: 5px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+} 
+
+