@eeacms/volto-tabs-block 5.0.1 → 5.0.3

package/src/less/menu.less

@@ -11,6 +11,18 @@
     display: none !important;
   }
 
+  .remove-menu {
+    padding-right: 0px !important;
+    padding-bottom: 0px !important;
+    overflow-y: hidden;
+  }
+
+  .remove-menu :not(.RRT__tab--collapsed) {
+    padding-top: 0px !important;
+    padding-left: 0px !important;
+    border-bottom: none !important;
+  }
+
   .ui.menu {
     margin-bottom: @menuMarginButton;
   }
@@ -108,7 +120,7 @@
   > .styled > .side.tabs {
     > .ui.menu {
       display: flex;
-      flex-basis: 20%;
+
       flex-direction: column;
     }
 
@@ -132,6 +144,12 @@
   }
 
   .RRT__container {
+    .inverted {
+      .RRT__tab.active {
+        background-color: rgba(0, 0, 0, 0.1) !important;
+      }
+    }
+
     > .ui.tab .rah-animating {
       transition: height 0ms ease 0ms !important;
 
@@ -139,12 +157,25 @@
         transition: opacity 0ms ease 0ms !important;
       }
     }
+
+    .RRT__tabs.inverted.ui.secondary.pointing.menu:not(.RRT__accordion) {
+      background-color: @green !important;
+    }
+
+    .inverted .RRT__tab--collapsed {
+      background-color: @green !important;
+    }
   }
 
   .ui.menu.RRT__accordion.tabs-accordion-icon-right {
-    .ui.item {
-      flex-direction: row-reverse;
-      justify-content: space-between;
+    .tabs-icon {
+      position: absolute;
+      right: 0%;
+    }
+
+    .item {
+      padding-top: 0.6875rem !important;
+      padding-bottom: 0.6875rem !important;
     }
   }
 
@@ -194,6 +225,10 @@
         background-color: @primaryColor !important;
         color: #fff !important;
       }
+
+      .active .menu-item-text {
+        color: #fff !important;
+      }
     }
 
     &.theme-secondary {
@@ -209,6 +244,10 @@
         background-color: @secondaryColor !important;
         color: #fff !important;
       }
+
+      .active .menu-item-text {
+        color: #fff !important;
+      }
     }
 
     &.theme-tertiary {
@@ -224,6 +263,10 @@
         background-color: @tertiaryColor !important;
         color: #fff !important;
       }
+
+      .active .menu-item-text {
+        color: #fff !important;
+      }
     }
 
     &.red {
@@ -233,6 +276,10 @@
         background-color: @red !important;
         color: #fff !important;
       }
+
+      .active .menu-item-text {
+        color: #fff !important;
+      }
     }
 
     &.orange {
@@ -244,6 +291,10 @@
         background-color: @orange !important;
         color: #fff !important;
       }
+
+      .active .menu-item-text {
+        color: #fff !important;
+      }
     }
 
     &.yellow {
@@ -255,6 +306,10 @@
         background-color: @yellow !important;
         color: #fff !important;
       }
+
+      .active .menu-item-text {
+        color: #fff !important;
+      }
     }
 
     &.olive {
@@ -266,6 +321,10 @@
         background-color: @olive !important;
         color: #fff !important;
       }
+
+      .active .menu-item-text {
+        color: #fff !important;
+      }
     }
 
     &.green {
@@ -277,6 +336,10 @@
         background-color: @green !important;
         color: #fff !important;
       }
+
+      .active .menu-item-text {
+        color: #fff !important;
+      }
     }
 
     &.teal {
@@ -288,6 +351,10 @@
         background-color: @teal !important;
         color: #fff !important;
       }
+
+      .active .menu-item-text {
+        color: #fff !important;
+      }
     }
 
     &.blue {
@@ -299,6 +366,10 @@
         background-color: @blue !important;
         color: #fff !important;
       }
+
+      .active .menu-item-text {
+        color: #fff !important;
+      }
     }
 
     &.violet {
@@ -310,6 +381,10 @@
         background-color: @violet !important;
         color: #fff !important;
       }
+
+      .active .menu-item-text {
+        color: #fff !important;
+      }
     }
 
     &.purple {
@@ -321,6 +396,10 @@
         background-color: @purple !important;
         color: #fff !important;
       }
+
+      .active .menu-item-text {
+        color: #fff !important;
+      }
     }
 
     &.brown {
@@ -343,6 +422,10 @@
         background-color: @grey !important;
         color: #fff !important;
       }
+
+      .active .menu-item-text {
+        color: #fff !important;
+      }
     }
 
     &.black {
@@ -354,6 +437,10 @@
         background-color: @black !important;
         color: #fff !important;
       }
+
+      .active .menu-item-text {
+        color: #fff !important;
+      }
     }
 
     .ui.tab {

package/src/less/tabs.less

@@ -87,10 +87,55 @@
       }
     }
   }
-}
+  @media print {
+    .ui.tab {
+      display: block !important;
+    }
+
+    .tab-name > div {
+      border-top: 0.1875rem solid #007b6c !important;
+    }
+
+    .tab-name::before {
+      color: var(--text-color, #007b6c);
+      content: attr(id);
+    }
+
+    .secondary.menu {
+      display: none !important;
+    }
+
+    .RRT__container .ui.RRT__tabs {
+      margin-bottom: 0;
+    }
 
-.RRT__container .ui.RRT__tabs {
-  margin-bottom: 0;
+    .slick-track {
+      flex-direction: column !important;
+    }
+
+    .slick-list {
+      overflow: visible !important;
+    }
+
+    .slick-slider .slick-track,
+    .slick-slider .slick-list {
+      overflow: visible !important;
+      width: auto !important;
+      height: auto !important;
+      transform: none !important;
+    }
+
+    .slick-track .slick-slide {
+      display: block !important;
+      overflow: visible !important;
+    }
+
+    .slick-arrow,
+    .slick-dots,
+    .slick-track .slick-cloned {
+      display: none !important;
+    }
+  }
 }
 
 .loadAddonOverrides();

package/src/utils/dimensions.js

@@ -11,7 +11,6 @@ export function positionedOffset(targetElement, container) {
   }
 
   const HTMLElement = document.defaultView.HTMLElement;
-
   let top = 0;
   let left = 0;
   const height = element.offsetHeight;

package/src/utils/index.js

@@ -29,9 +29,9 @@ const toggleItem = (container, item, hidden) => {
   // Set visibility to hidden, instead of .hidden attribute
   // so we can still calculate distance accurately
   item.style.visibility = hidden ? 'hidden' : '';
-  // item.style.display = hidden ? 'none' : 'flex';
   // Get tab-item name, if present, so we can match it up with the dropdown menu
   const itemData = item.getAttribute('item-data');
+
   if (itemData) {
     const itemToHide = container.querySelector(
       `[underline-item-data="${itemData}"]`,