From 7b608580baa9ec9d817faac63fc1b13975d81d48 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sun, 20 Oct 2013 14:57:39 +0200 Subject: [PATCH] Added flexible tab-based menus --- com.woltlab.wcf/templates/headInclude.tpl | 4 +- .../acp/style/blueTemptation/individual.less | 181 +++++------ wcfsetup/install/files/js/WCF.js | 241 +++++++++++++-- wcfsetup/install/files/style/layout.less | 280 ++++++++---------- 4 files changed, 436 insertions(+), 270 deletions(-) diff --git a/com.woltlab.wcf/templates/headInclude.tpl b/com.woltlab.wcf/templates/headInclude.tpl index ade02b605a..e6ad479e00 100644 --- a/com.woltlab.wcf/templates/headInclude.tpl +++ b/com.woltlab.wcf/templates/headInclude.tpl @@ -138,8 +138,9 @@ {event name='javascriptLanguageImport'} }); - + if (jQuery.browser.touch) $('html').addClass('touch'); + WCF.System.FlexibleMenu.init(); new WCF.Date.Time(); new WCF.Effect.SmoothScroll(); new WCF.Effect.BalloonTooltip(); @@ -148,7 +149,6 @@ WCF.Dropdown.init(); WCF.System.PageNavigation.init('.pageNavigation'); WCF.Date.Picker.init(); - WCF.System.MobileNavigation.init(); new WCF.User.ProfilePreview(); {event name='javascriptInit'} diff --git a/wcfsetup/install/files/acp/style/blueTemptation/individual.less b/wcfsetup/install/files/acp/style/blueTemptation/individual.less index d0897c6ff8..c89cad5d60 100644 --- a/wcfsetup/install/files/acp/style/blueTemptation/individual.less +++ b/wcfsetup/install/files/acp/style/blueTemptation/individual.less @@ -6,65 +6,67 @@ body, .tabularBox, .dialogTitlebar { } /* main menu */ +.mainMenu > ul { + background-color: rgba(0, 0, 0, .4); + + > li { + > a { + border-width: 0 !important; + color: @wcfPageLinkColor; + + .transition(color, .3s, ease); + .textShadow(@wcfPageBackgroundColor); + + &:hover { + color: @wcfPageLinkHoverColor; + } + } + + &.active > a { + .linearGradient(@wcfNavigationHeaderBackgroundColor, lighten(@wcfNavigationHeaderBackgroundColor, 20%), @wcfNavigationHeaderBackgroundColor); + } + + &:hover { + color: @wcfMainMenuActiveColor; + } + } +} + @media all and (min-width: 801px) { .mainMenu { margin: @wcfGapMedium 9px 0; > ul { - background-color: rgba(0, 0, 0, .4); border-radius: 5px 5px 0 0; - > li { - > a { - border-width: 0 !important; - color: @wcfPageLinkColor; - position: relative; - - .transition(color, .3s, ease); - .textShadow(@wcfPageBackgroundColor); + > li.active > a { + border-radius: 5px 5px 0 0; + position: relative; + + &:after { + border-bottom-left-radius: 6px; + border-width: 0 0 1px 1px; + bottom: 0; + content: ""; + height: 7px; + position: absolute; + right: -7px; + width: 7px; - &:hover { - color: @wcfPageLinkHoverColor; - } + .boxShadow(-2px, 2px, @wcfNavigationHeaderBackgroundColor, 0); } - &.active { - > a { - border-radius: 5px 5px 0 0; - - .linearGradient(@wcfNavigationHeaderBackgroundColor, lighten(@wcfNavigationHeaderBackgroundColor, 20%), @wcfNavigationHeaderBackgroundColor); - - &:after { - border-bottom-left-radius: 6px; - border-width: 0 0 1px 1px; - bottom: 0; - content: ""; - height: 7px; - position: absolute; - right: -7px; - width: 7px; - - .boxShadow(-2px, 2px, @wcfNavigationHeaderBackgroundColor, 0); - } - - &:before { - border-bottom-right-radius: 6px; - border-width: 0 1px 1px 0; - bottom: 0; - content: ""; - height: 7px; - left: -7px; - position: absolute; - width: 7px; - - .boxShadow(2px, 2px, @wcfNavigationHeaderBackgroundColor, 0); - } - - &:hover { - color: @wcfMainMenuActiveColor; - } - } - + &:before { + border-bottom-right-radius: 6px; + border-width: 0 1px 1px 0; + bottom: 0; + content: ""; + height: 7px; + left: -7px; + position: absolute; + width: 7px; + + .boxShadow(2px, 2px, @wcfNavigationHeaderBackgroundColor, 0); } } } @@ -532,47 +534,49 @@ button.active:hover { /* tab menus */ -.tabMenu { - padding: 0 10px; - - > ul { - border-top-left-radius: @wcfContainerBorderRadius; - border-top-right-radius: @wcfContainerBorderRadius; +@media all and (min-width: 801px) { + .tabMenu { + padding: 0 10px; - > li { - &.ui-state-active { - > a { - border-top-right-radius: @wcfContainerBorderRadius; - border-top-left-radius: @wcfContainerBorderRadius; - - &:before { - border: 1px solid @wcfContainerBorderColor; - border-bottom-right-radius: 6px; - border-width: 0 1px 1px 0; - bottom: -1px; - clip: rect(0, 6px, 6px, 0); - content: " "; - height: 5px; - left: -6px; - position: absolute; - width: 5px; + > ul { + border-top-left-radius: @wcfContainerBorderRadius; + border-top-right-radius: @wcfContainerBorderRadius; + + > li { + &.ui-state-active { + > a { + border-top-right-radius: @wcfContainerBorderRadius; + border-top-left-radius: @wcfContainerBorderRadius; - .boxShadow(2px, 1px, @wcfContainerBackgroundColor, 0); - } - - &:after { - border: 1px solid @wcfContainerBorderColor; - border-bottom-left-radius: 6px; - border-width: 0 0 1px 1px; - bottom: -1px; - clip: rect(0, 6px, 6px, 0); - content: " "; - height: 5px; - position: absolute; - right: -6px; - width: 5px; + &:before { + border: 1px solid @wcfContainerBorderColor; + border-bottom-right-radius: 6px; + border-width: 0 1px 1px 0; + bottom: -1px; + clip: rect(0, 6px, 6px, 0); + content: " "; + height: 5px; + left: -6px; + position: absolute; + width: 5px; + + .boxShadow(2px, 1px, @wcfContainerBackgroundColor, 0); + } - .boxShadow(-2px, 1px, @wcfContainerBackgroundColor, 0); + &:after { + border: 1px solid @wcfContainerBorderColor; + border-bottom-left-radius: 6px; + border-width: 0 0 1px 1px; + bottom: -1px; + clip: rect(0, 6px, 6px, 0); + content: " "; + height: 5px; + position: absolute; + right: -6px; + width: 5px; + + .boxShadow(-2px, 1px, @wcfContainerBackgroundColor, 0); + } } } } @@ -580,7 +584,6 @@ button.active:hover { } } - /* ### inputs ### */ /* normal state */ input[type='text'], @@ -825,4 +828,4 @@ div.tabularBox, -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.5, transparent), to(rgba(0, 0, 0, .4))); } } -} \ No newline at end of file +} diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js index 1e647fa0dc..6eca13fb05 100755 --- a/wcfsetup/install/files/js/WCF.js +++ b/wcfsetup/install/files/js/WCF.js @@ -168,7 +168,7 @@ $.extend(true, { /** * Escapes an ID to work with jQuery selectors. - * + * * @see http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_by_an_ID_that_has_characters_used_in_CSS_notation.3F * @param string id * @return string @@ -201,7 +201,7 @@ $.extend(true, { $length++; } } - + return $length; } }); @@ -555,7 +555,7 @@ $.extend(WCF, { /** * Counter for dynamic element ids - * + * * @var integer */ _idCounter: 0, @@ -756,7 +756,7 @@ WCF.Dropdown = { var $verticalScrollTolerance = $(element).height() / 2; - // check if dropdown toggle is still (partially) visible + // check if dropdown toggle is still (partially) visible if ($dropdownOffset.top + $verticalScrollTolerance <= $dialogContentOffset.top) { // top check WCF.Dropdown.toggleDropdown($dropdownID); @@ -807,12 +807,14 @@ WCF.Dropdown = { var $dropdown = button.parents('.dropdown'); if (!$dropdown.length) { // broken dropdown, ignore + console.debug("[WCF.Dropdown] Invalid dropdown passed, button '" + button.wcfIdentify() + "' does not have a parent with .dropdown, aborting."); return; } var $dropdownMenu = button.next('.dropdownMenu'); if (!$dropdownMenu.length) { // broken dropdown, ignore + console.debug("[WCF.Dropdown] Invalid dropdown passed, dropdown '" + $dropdown.wcfIdentify() + "' does not have a dropdown menu, aborting."); return; } @@ -3546,7 +3548,7 @@ WCF.String = { /** * Escapes a String to work with RegExp. - * + * * @see https://github.com/sstephenson/prototype/blob/master/src/prototype/lang/regexp.js#L25 * @param string string * @return string @@ -3682,8 +3684,6 @@ WCF.TabMenu = { } } } - - //$container.trigger('tabsbeforeactivate', event, eventData); } }); @@ -3694,6 +3694,12 @@ WCF.TabMenu = { $tabMenu.data('parent', $tabMenu.parent()); } } + + // register as flexible menu unless it has no tabs + var $navigation = $tabMenu.children('nav'); + if ($navigation.length && $navigation.find('> ul:eq(0) > li').length) { + WCF.System.FlexibleMenu.registerMenu($navigation.wcfIdentify()); + } }); // try to resolve location hash @@ -3933,7 +3939,7 @@ WCF.Template = Class.extend({ return "' + " + content + " + '"; }) // {lang}foo{/lang} - .replace(/{lang}(.+?){\/lang}/, function(_, content) { + .replace(/{lang}(.+?){\/lang}/g, function(_, content) { return "' + WCF.Language.get('" + unescape(content) + "') + '"; }) // {if} @@ -4053,7 +4059,7 @@ WCF.Template = Class.extend({ /** * Fetches the template with the given variables. - * + * * @param v variables to insert * @return parsed template */ @@ -5856,23 +5862,201 @@ WCF.Search.User = WCF.Search.Base.extend({ WCF.System = { }; /** - * Enables mobile navigation. + * Provides flexible dropdowns for tab-based menus. */ -WCF.System.MobileNavigation = { +WCF.System.FlexibleMenu = { + /** + * list of containers + * @var object + */ + _containers: { }, + + /** + * list of registered container ids + * @var array + */ + _containerIDs: [ ], + + /** + * list of dropdowns + * @var object + */ + _dropdowns: { }, + + /** + * list of dropdown menus + * @var object + */ + _dropdownMenus: { }, + + /** + * list of hidden status for containers + * @var object + */ + _hasHiddenItems: { }, + + /** + * true if menus are currently rebuilt + * @var boolean + */ + _isWorking: false, + + /** + * list of tab menu items per container + * @var object + */ + _menuItems: { }, + + /** + * Initializes the WCF.System.FlexibleMenu class. + */ init: function() { - this._convertNavigation(); + // register .mainMenu and .navigationHeader by default + this.registerMenu('mainMenu'); + this.registerMenu($('.navigationHeader:eq(0)').wcfIdentify()); - WCF.DOMNodeInsertedHandler.addCallback('WCF.System.MobileNavigation', function() { - WCF.System.MobileNavigation._convertNavigation(); - }); + $(window).resize($.proxy(this.rebuildAll, this)); }, - _convertNavigation: function() { - $('nav.jsMobileNavigation').removeClass('jsMobileNavigation').each(function(index, navigation) { - var $navigation = $(navigation); - $('').click(function() {}).prependTo($navigation); - }); + /** + * Registers a tab-based menu by id. + * + * Required DOM: + * + *
    + *
  • tab 1
    • + *
  • tab 2
    • + * ... + *
  • tab n
    • + *
+ * + * + * @param string containerID + */ + registerMenu: function(containerID) { + var $container = $('#' + containerID); + if (!$container.length) { + console.debug("[WCF.System.FlexibleMenu] Unable to find container identified by '" + containerID + "', aborting."); + return; + } + + this._containerIDs.push(containerID); + this._containers[containerID] = $container; + this._menuItems[containerID] = $container.find('> ul:eq(0) > li'); + this._dropdowns[containerID] = $('
    • ').data('containerID', containerID).hide().appendTo($container.children('ul')).click($.proxy(this._click, this)); + this._dropdownMenus[containerID] = $('
      ').appendTo(this._dropdowns[containerID]); + this._hasHiddenItems[containerID] = false; + + this.rebuild(containerID); + + WCF.Dropdown.initDropdown(this._dropdowns[containerID].children('a')); + }, + + /** + * Rebuilds all registered containers. + */ + rebuildAll: function() { + if (this._isWorking) { + return; + } + + this._isWorking = true; + + for (var $i = 0, $length = this._containerIDs.length; $i < $length; $i++) { + this.rebuild(this._containerIDs[$i]); + } + + this._isWorking = false; + }, + + /** + * Rebuilds a container, will be automatically invoked on window resize and registering. + * + * @param string containerID + */ + rebuild: function(containerID) { + if (!this._containers[containerID]) { + console.debug("[WCF.System.FlexibleMenu] Cannot rebuild unknown container identified by '" + containerID + "'"); + return; + } + + var $changedItems = false; + var $currentWidth = 0; + + // the current width is based upon all items without the dropdown + var $menuItems = this._menuItems[containerID].filter(':visible'); + for (var $i = 0, $length = $menuItems.length; $i < $length; $i++) { + $currentWidth += $($menuItems[$i]).outerWidth(true); + } + + var $dropdownWidth = this._dropdowns[containerID].outerWidth(true); + var $container = this._containers[containerID]; + var $maximumWidth = $container.parent().innerWidth() - $dropdownWidth; + + // substract padding from the parent element + $maximumWidth -= parseInt($container.parent().css('padding-left').replace(/px$/, '')) + parseInt($container.parent().css('padding-right').replace(/px$/, '')); + + // substract margins and paddings from the container itself + $maximumWidth -= parseInt($container.css('margin-left').replace(/px$/, '')) + parseInt($container.css('margin-right').replace(/px$/, '')); + $maximumWidth -= parseInt($container.css('padding-left').replace(/px$/, '')) + parseInt($container.css('padding-right').replace(/px$/, '')); + + // substract paddings from the actual list + $maximumWidth -= parseInt($container.children('ul:eq(0)').css('padding-left').replace(/px$/, '')) + parseInt($container.children('ul:eq(0)').css('padding-right').replace(/px$/, '')); + + if ($currentWidth > $maximumWidth) { + var $menuItems = $menuItems.filter(':not(.active):not(.ui-state-active)'); + + // hide items starting with the last in list (ignores active item) + for (var $i = ($menuItems.length - 1); $i >= 0; $i--) { + if ($currentWidth > $maximumWidth) { + var $item = $($menuItems[$i]); + $currentWidth -= $item.outerWidth(true); + $item.hide(); + + $changedItems = true; + this._hasHiddenItems[containerID] = true; + } + else { + break; + } + } + + if (this._hasHiddenItems[containerID]) { + this._dropdowns[containerID].show(); + } + } + else if (this._hasHiddenItems[containerID] && $currentWidth < $maximumWidth) { + var $hiddenItems = this._menuItems[containerID].filter(':not(:visible)'); + + // reverts items starting with the first hidden one + for (var $i = 0, $length = $hiddenItems.length; $i < $length; $i++) { + var $item = $($hiddenItems[$i]); + $currentWidth += $item.outerWidth(); + if ($currentWidth < $maximumWidth) { + // enough space, show item + $item.css('display', ''); + $changedItems = true; + } + else { + break; + } + } + + if ($changedItems) { + this._hasHiddenItems[containerID] = (this._menuItems[containerID].filter(':not(:visible)').length > 0); + if (!this._hasHiddenItems[containerID]) { + this._dropdowns[containerID].hide(); + } + } + } + + // build dropdown menu for hidden items + if ($changedItems) { + this._dropdownMenus[containerID].empty(); + this._menuItems[containerID].filter(':not(:visible)').each($.proxy(function(index, item) { + $('
    • ' + $(item).html() + '
      • ').appendTo(this._dropdownMenus[containerID]); + }, this)); + } } }; @@ -7244,7 +7428,6 @@ WCF.Popover = Class.extend({ */ _popoverContent: null, - /** * popover horizontal offset * @var integer @@ -9176,18 +9359,18 @@ $.widget('ui.wcfTabs', $.ui.tabs, { */ _processTabs: function() { var that = this; - + this.tablist = this._getList() .addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" ) .attr( "role", "tablist" ); - + this.tabs = this.tablist.find( "> li:has(a[href])" ) .addClass( "ui-state-default ui-corner-top" ) .attr({ role: "tab", tabIndex: -1 }); - + this.anchors = this.tabs.map(function() { return $( "a", this )[ 0 ]; }) @@ -9196,15 +9379,15 @@ $.widget('ui.wcfTabs', $.ui.tabs, { role: "presentation", tabIndex: -1 }); - + this.panels = $(); - + this.anchors.each(function( i, anchor ) { var selector, panel, anchorId = $( anchor ).uniqueId().attr( "id" ), tab = $( anchor ).closest( "li" ), originalAriaControls = tab.attr( "aria-controls" ); - + // inline tab selector = anchor.hash; panel = that.element.find( that._sanitizeSelector( selector ) ); @@ -9221,7 +9404,7 @@ $.widget('ui.wcfTabs', $.ui.tabs, { }); panel.attr( "aria-labelledby", anchorId ); }); - + this.panels .addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ) .attr( "role", "tabpanel" ); diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less index 5b7912ef2c..34be1ac20c 100644 --- a/wcfsetup/install/files/style/layout.less +++ b/wcfsetup/install/files/style/layout.less @@ -320,29 +320,38 @@ } /* main menu */ -@media screen and (min-width: 801px), print { - .mainMenu { - font-size: 0; - - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +.mainMenu { + font-size: 0; + white-space: nowrap; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + > ul { + background-color: @wcfMainMenuBackgroundColor; + display: inline-block; - > ul { - background-color: @wcfMainMenuBackgroundColor; + > li { display: inline-block; + font-size: @wcfTitleFontSize; + vertical-align: middle; - > li { + > a { + color: @wcfMainMenuColor; display: inline-block; - font-size: @wcfTitleFontSize; - margin-top: -7px; - vertical-align: bottom; + padding: 4px 9px; - > a { + .textShadow(@wcfMainMenuBackgroundColor); + + &:hover { + color: @wcfMainMenuActiveColor; + text-decoration: none; + } + + > span { color: @wcfMainMenuColor; - display: inline-block; - padding: 9px 21px; .textShadow(@wcfMainMenuBackgroundColor); @@ -351,104 +360,44 @@ text-decoration: none; } } + } + + &.active > a { + background-color: @wcfNavigationHeaderBackgroundColor; + color: @wcfMainMenuActiveColor; + text-align: center; - &.active { - font-size: @wcfSubHeadlineFontSize; - margin-top: -8px; - - > a { - background-color: @wcfNavigationHeaderBackgroundColor; - color: @wcfMainMenuActiveColor; - font-weight: bold; - min-width: 80px; - padding: 14px 21px 8px; - text-align: center; - - .textShadow(@wcfNavigationHeaderBackgroundColor); - } - } - - &:not(.active) { - padding-top: 5px; - } - - &:not(:last-child) > a { - border-right: 1px solid @wcfContainerBorderColor; - } + .textShadow(@wcfNavigationHeaderBackgroundColor); + } + + &:not(:last-child) > a { + border-right: 1px solid @wcfContainerBorderColor; } } } } +@media screen and (min-width: 801px), print { + .mainMenu > ul > li { + margin-top: -7px; + vertical-align: bottom; -@media only screen and (max-width: 800px) { - .mainMenu { - position: relative; - - > a:first-child { - .button; - margin-left: @wcfGapSmall; - outline: 0; - - + a { - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - z-index:100; - } - - &:focus { - + a { - display: block; - } - - ~ ul { - display: block; - } - } + > a { + padding: 9px 21px; } - > ul { - .dropdownMenu; - font-size: @wcfTitleFontSize; - left: @wcfGapSmall; - - &:hover { - display: block; - } + &.active { + font-size: @wcfSubHeadlineFontSize; + margin-top: -8px; - > li.active { - > ul.invisible { - display: block; - font-size: @wcfSmallFontSize; - padding-left: 14px; - - > li > span.badge { - display: none; - } - } - - > a { - position: relative; - - &:after { - content: "\f00c"; - font-family: FontAwesome; - font-size: 14px; - position: absolute; - right: 7px; - } - } + > a { + font-weight: bold; + min-width: 80px; + padding: 14px 21px 8px; } } - } -} - -@media only screen and (min-width: 641px) and (max-width: 800px) { - .mainMenu { - > a:first-child { - margin-left: @wcfGapMedium; + + &:not(.active) { + padding-top: 5px; } } } @@ -529,8 +478,8 @@ @media only screen and (max-width: 800px) { .navigation.navigationHeader { > ul.navigationIcons, - > ul.navigationItems, - > ul.navigationMenuItems { + > ul.navigationItems/*, + > ul.navigationMenuItems*/ { display: none; } } @@ -548,11 +497,16 @@ } .navigationHeader { + overflow: hidden; .clearfix; background-color: @wcfNavigationHeaderBackgroundColor; border-bottom: 1px solid @wcfContainerBorderColor; border-top: 1px solid @wcfContainerBorderColor; + + > ul.navigationMenuItems { + white-space: nowrap; + } } .navigationFooter { @@ -564,8 +518,8 @@ @media only screen and (max-width: 800px) { .navigationHeader { - background-color: transparent; - border: 0; + border-top-width: 0; + min-height: 4px; } } @@ -701,7 +655,7 @@ #main { border-right-width: 0; position: relative; - margin-top: 7px; + //margin-top: 7px; > div { display: block; @@ -1353,7 +1307,7 @@ border-style: solid; border-width: 1px 1px 0 1px; display: inline-block; - padding: 0 5px 3px 5px; + font-size: 0; position: relative; white-space: nowrap; word-wrap: normal; @@ -1372,28 +1326,16 @@ border-width: 1px; color: @wcfLinkColor; font-weight: bold; - font-size: 1.3rem; - margin-top: -10px; - padding: 10px 15px 5px; z-index: 30; } - - &:first-child { - margin-left: -6px; - } - - &:last-child { - margin-right: -6px; - } } > a { - bottom: -3px; color: @wcfDimmedColor; display: inline-block; font-size: 1.1rem; outline: 0; - padding: 1px 10px 3px; + padding: 7px 10px; position: relative; text-decoration: none; z-index: 10; @@ -1412,6 +1354,52 @@ } } +@media only screen and (max-width: 800px) { + .tabMenu { + > ul > li.ui-state-active { + margin-top: -1px; + + &:first-child { + margin-left: -1px; + } + + &:last-child { + margin-right: -1px; + } + } + + } +} + +@media all and (min-width: 801px) { + .tabMenu > ul { + padding: 0 5px 3px 5px; + + > li { + > a { + bottom: -3px; + padding: 1px 10px 3px; + } + + &.ui-state-active { + > a { + font-size: 1.3rem; + margin-top: -10px; + padding: 10px 15px 5px; + } + + &:first-child { + margin-left: -6px; + } + + &:last-child { + margin-right: -6px; + } + } + } + } +} + .tabMenu > ul > li.ui-state-active > a, .tabMenu > ul > li.ui-state-disabled > a, .tabMenu > ul > li.ui-state-processing > a { @@ -1438,12 +1426,15 @@ .linearGradient(@wcfContainerBackgroundColor, @wcfContainerBackgroundColor, @wcfContainerAccentBackgroundColor); - ul{ + ul { display: inline-block; + font-size: 0; + white-space: nowrap; li { display: inline-block; outline: 0; + vertical-align: bottom; &.ui-state-active a, &.ui-state-active a:hover { @@ -1471,41 +1462,30 @@ text-decoration: none; } } + + &:not(:last-child) { + padding-right: @wcfGapTiny; + } + + &.dropdown > a { + font-size: 1.0rem; + padding: 4px 7px 2px; + } } } } } -.containerPadding > .tabMenuContainer:last-child { - margin-bottom: @wcfGapSmall; -} - @media only screen and (max-width: 800px) { - .tabMenu { - > ul { - margin-left: @wcfGapTiny; - margin-right: @wcfGapTiny; - - > li { - &.ui-state-active { - > a { - font-size: 1rem; - padding-left: 10px; - padding-right: 10px; - } - } - - > a { - font-size: 1rem; - padding-left: 5px; - padding-right: 5px; - } - } - } - + .tabMenuContainer.containerPadding > .menu { + margin-top: -@wcfGapSmall; } } +.containerPadding > .tabMenuContainer:last-child { + margin-bottom: @wcfGapSmall; +} + /* jquery ui fixes */ .ui-tabs .ui-tabs-hide { display: none !important; -- 2.20.1