refactor(tab): add max width for tab items

eea · Mar 16, 2022 · 366d279 · 366d279
1 parent c199167
commit 366d279
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 59 deletions.
diff --git a/theme/themes/eea/collections/menu.overrides b/theme/themes/eea/collections/menu.overrides
@@ -60,14 +60,15 @@
 .ui.secondary.pointing.menu:not(.vertical) {
   position: relative;
   overflow: auto; // Horizontal scolling of links
-  height: 2rem; //  height ensures that scrollable region has keyboard access
+  height: auto; //  height ensures that scrollable region has keyboard access
   padding-bottom: @2px; // Leave room for the active border item
   border-bottom: none; // Border comes from before pseudo-element
   margin-right: 0em;
   margin-left: 0em;
 
   a.item {
-    border-bottom: @1px solid @midGray;
+    max-width: @secondaryPointingItemMaxWidth;
+    border-bottom: @secondaryPointingItemBorderBottom;
   }
 }
 

diff --git a/theme/themes/eea/collections/menu.variables b/theme/themes/eea/collections/menu.variables
@@ -269,6 +269,9 @@
 @secondaryVerticalPointingItemMargin: 0em -@secondaryPointingBorderWidth 0em 0em;
 
 
+@secondaryPointingItemBorderBottom: @1px solid @midGray;
+@secondaryPointingItemMaxWidth: 15.626rem; 
+
 /* Inverted Secondary */
 @secondaryInvertedColor: @invertedLightTextColor;
 

diff --git a/theme/themes/eea/modules/tab.overrides b/theme/themes/eea/modules/tab.overrides
@@ -11,60 +11,3 @@
     color: @tabActiveItemHoverColor;
   }
 }
-
-div.eea-tab {
-  a.item {
-    font-size: @headerSize;
-  }
-
-  .tab {
-    font-size: @contentSize;
-  }
-
-  .ui.secondary.pointing.menu {
-    border-color: @silverGray;
-
-    .active.item {
-      border-color: @secondaryColor !important;
-      color: @secondaryColor !important;
-
-      &:hover {
-        border-color: @secondaryColorHover;
-        color: @secondaryColorHover;
-      }
-    }
-  }
-
-  .ui.bottom.attached.segment.active.tab {
-    border: none;
-  }
-}
-
-/* For semantic ui responsive bug */
-div.eea-tab .ui.secondary.vertical.menu {
-  max-width: 100%;
-}
-
-@media only screen and (max-width: @mobileBreakpoint) {
-  div.eea-tab .ui.secondary.pointing.menu {
-    padding-bottom: 2px;
-    overflow-x: auto;
-    overflow-y: hidden;
-
-    a.item {
-      padding: 12px 8px;
-      font-size: @headerSizeResponsive;
-    }
-  }
-
-  div.eea-tab .ui.secondary.pointing.vertical.menu {
-    border: none;
-    overflow-x: unset;
-    overflow-y: unset;
-
-    a.item {
-      padding: 12px 8px;
-      font-size: @headerSizeResponsive;
-    }
-  }
-}