Dodao tabove za razlicite tabele u column-table komponenti.

1 files changed, 85 insertions, 2 deletions

diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css
index f40a3aff..4dfb32ee 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.css
+++ b/frontend/src/app/_elements/column-table/column-table.component.css
@@ -44,7 +44,6 @@ table.fixed th:first-child {
 
 mat-slider {
     width: 150px;
-    
 }
 
 .belowColumn {
@@ -65,13 +64,13 @@ mat-slider {
     border-style: solid;
     border-width: 0px 1px 1px 1px;
 }
+
 #footer {
     display: flex;
     flex-direction: row;
     justify-content: center;
 }
 
-
 #missingValuesHeader {
     font-size: 12px;
     line-height: 110% !important;
@@ -119,3 +118,87 @@ table ::ng-deep .mat-form-field-wrapper {
 .graphic-class {
     background-color: white !important;
 }
+
+
+/* TABS STYLE */
+
+#folder-table {
+    border: 1px solid var(--ns-primary);
+    border-radius: 4px;
+}
+
+#tabs {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    height: 3.2rem;
+}
+
+#tabs>.folder-tab:not(:first-child) {
+    margin-left: -5px;
+}
+
+.folder-tab-end {
+    margin-left: auto;
+    color: var(--offwhite) !important;
+    overflow: hidden;
+}
+
+.folder-tab,
+.folder-tab-end {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    overflow-x: hidden;
+    height: 2.5rem;
+    background-color: var(--ns-bg-dark-100);
+    border-color: var(--ns-primary);
+    color: var(--ns-primary);
+    border-style: solid;
+    border-width: 1px 1px 0 1px;
+}
+
+.folder-tab:not(:first-child) {
+    margin-block-start: auto;
+}
+
+.folder-tab {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.selected-tab {
+    height: 3rem;
+    background-color: var(--ns-primary);
+    color: var(--offwhite);
+}
+
+.hover-tab {
+    height: 3.2rem;
+}
+
+.selected-tab,
+.hover-tab {
+    width: fit-content !important;
+}
+
+.tab-link {
+    color: var(--offwhite) !important;
+    text-decoration: none !important;
+    cursor: pointer;
+}
+
+.tab-link:active {
+    text-decoration: underline !important;
+}
+
+.selected-tab {
+    background-color: var(--ns-primary);
+}
+
+.hidden {
+    display: none;
+}
\ No newline at end of file