add styles for tabs

eea · Sep 15, 2023 · 8448bf4 · 8448bf4
1 parent f8a55c5
commit 8448bf4
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 9 deletions.
diff --git a/theme/themes/eea/modules/accordion.overrides b/theme/themes/eea/modules/accordion.overrides
@@ -3,13 +3,13 @@
 *******************************/
 
 .accordion .filter {
-  background-color: var(--bg-color, transparent);
+  background-color: var(--bg-color, transparent) !important;
 }
 
 .ui.accordion button.title {
   width: 100%;
   border: none;
-  background: transparent;
+  background: transparent !important;
 }
 
 .ui.accordion {
@@ -77,7 +77,7 @@
 
   .active.title {
     border-bottom: @activeTitleBorderBottom;
-    background-color: @activeTitleBackground;
+    background-color: @activeTitleBackground !important;
     color: @activeTitleColor;
 
     .icon {
@@ -119,18 +119,21 @@
      Tabs as accordion (Volto)
 --------------------------------*/
 
-.ui.menu.RRT__accordion {
-  //.ui.item {
-  //  background-color: transparent;
-  //}
-
+.ui.accordion.RRT__accordion {
   .ui.item .icon {
     font-size: @iconFontSize;
 
     &::before {
       font-size: @iconFontSize;
     }
   }
+
+  .title {
+      padding: 1rem 1.25rem;
+      font-family: 'Roboto', Arial, 'Helvetica Neue', Helvetica, sans-serif;
+      font-size: 1.125rem;
+      color: var(--text-color, #3D5265);
+  }
 }
 
 /*--------------
@@ -140,6 +143,15 @@
 .ui.accordion[class*='ary'] .filter {
   --text-color-hover: white;
   --text-color: white;
+
+
+}
+
+.ui.accordion.inverted{
+  background-color: @green !important;
+    .icon {
+    color: white !important;
+  } 
 }
 
 /* Primary */

diff --git a/theme/themes/eea/modules/tab.overrides b/theme/themes/eea/modules/tab.overrides
@@ -13,9 +13,39 @@
 }
 
 .tabs-block {
-  color: @tabsBlockColor;
+  .RRT__container {
+    .inverted {
+      background-color: @green !important;
+        .RRT__tab.active {
+          background-color: rgba(0, 0, 0, 0.1) !important;
+        }
+
+    .RRT__tab{
+      background-color:@green !important;
+      color: white !important;
+    }
+
+    .RRT__tab:not(.active):hover {
+      color: @tabsColorHover !important;
+    }
+
+    .RRT__tab:hover {
+      color: @tabsColorHover !important;
+    }
+    }
+
+    .RRT__tab{
+      background:transparent !important;
+      padding:1rem 1.25rem !important;
+      .icon{
+        margin:0 !important;
+      }
+    }
+  }
 }
 
+
+
 // Contain images inside vertical tab content
 .stretched.wide.column > .tab img {
   max-width: @verticalTabPaneImageMaxWidth;

diff --git a/theme/themes/eea/modules/tab.variables b/theme/themes/eea/modules/tab.variables
@@ -10,6 +10,7 @@
 @headerSize: @h4;
 @headerSizeResponsive: @fontSize;
 @contentSize: @fontSize;
+@tabsColorHover: #fefefe;
 
 /* Loading */
 @loadingMinHeight: 250px;