Moved LESS for tab menus into a separate file

diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 1450273c69326de50734159d85468c5b970c851d..597011be0ed0ce760a9f31e8ffdc8d3751afa358 100644 (file)
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -1452,207 +1452,6 @@ html[dir="rtl"] {
        }
 }
 
-/* tab menus */
-.tabMenu {
-       display: block;
-       margin-top: @wcfGapLarge;
-       position: relative;
-       text-align: left;
-       
-       > ul {
-               background-color: @wcfContainerAccentBackgroundColor;
-               border-color: @wcfContainerBorderColor;
-               border-style: solid;
-               border-width: 1px 1px 0 1px;
-               display: inline-block;
-               font-size: 0;
-               position: relative;
-               white-space: nowrap;
-               word-wrap: normal;
-               
-               .textShadow(@wcfContainerBackgroundColor);
-               
-               > li {
-                       display: inline-block;
-                       outline: 0;
-                       
-                       &.ui-state-active {
-                               > a {
-                                       background-color: @wcfContainerBackgroundColor;
-                                       border-color: @wcfContainerBorderColor @wcfContainerBorderColor @wcfContainerBackgroundColor;
-                                       border-style: solid;
-                                       border-width: 1px;
-                                       color: @wcfLinkColor;
-                                       font-weight: bold;
-                                       z-index: 30;
-                               }
-                       }
-                       
-                       > a {
-                               color: @wcfDimmedColor;
-                               display: inline-block;
-                               font-size: 1.1rem;
-                               outline: 0;
-                               padding: 7px 10px;
-                               position: relative;
-                               text-decoration: none;
-                               z-index: 10;
-                               
-                               > .badge {
-                                       top: -1px;
-                               }
-                       }
-                       
-                       &:not(.ui-state-active) {
-                               > a:hover {
-                                       color: @wcfLinkColor;
-                               }
-                       }
-               }
-       }
-}
-
-@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 {
-       cursor: default;
-}
-
-.tabMenuContent {
-       display: block;
-       margin-top: -1px;
-       min-height: @wcfGapLarge;
-       position: relative;
-       z-index: 20; /* Prevents border overlay during transition */
-       
-       &.hidden {
-               display: none;
-       }
-}
-
-/* sub tabs */
-.tabMenuContainer {
-       &.containerPadding > .menu {
-               margin: -@wcfGapMedium -@wcfGapLarge @wcfGapMedium -@wcfGapLarge; /* reverse paddings from .containerPadding */
-       }
-       
-       > .menu {
-               border-bottom: 1px solid @wcfContainerBorderColor;
-               padding: @wcfGapTiny @wcfGapSmall;
-               
-               .linearGradient(@wcfContainerBackgroundColor, @wcfContainerBackgroundColor, @wcfContainerAccentBackgroundColor);
-               
-               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 {
-                                       background-color: @wcfButtonPrimaryBackgroundColor;
-                                       border-color: @wcfButtonPrimaryBorderColor;
-                                       color: @wcfButtonPrimaryColor;
-                                       cursor: default;
-                               }
-                               
-                               a {
-                                       background-color: @wcfContainerBackgroundColor;
-                                       border: 1px solid @wcfContainerBorderColor;
-                                       border-radius: @wcfButtonBorderRadius;
-                                       color: @wcfButtonColor;
-                                       display: block;
-                                       font-size: @wcfSmallFontSize;
-                                       margin: @wcfGapTiny 0;
-                                       outline: 0;
-                                       padding: @wcfGapTiny @wcfGapSmall;
-                                       
-                                       &:hover {
-                                               background-color: @wcfButtonHoverBackgroundColor;
-                                               border-color: @wcfButtonHoverBorderColor;
-                                               color: @wcfButtonHoverColor;
-                                               text-decoration: none;
-                                       }
-                               }
-                               
-                               &:not(:last-child) {
-                                       padding-right: @wcfGapTiny;
-                               }
-                               
-                               &.dropdown > a {
-                                       font-size: 1.0rem;
-                                       padding: 4px 7px 2px;
-                               }
-                       }
-               }
-       }
-}
-
-@media only screen and (max-width: 800px) {
-       .tabMenuContainer.containerPadding > .menu {
-               margin: -@wcfGapSmall -@wcfGapMedium @wcfGapSmall -@wcfGapMedium; /* reverse paddings from .containerPadding */
-       }
-}
-
-.containerPadding > .tabMenuContainer:last-child {
-       margin-bottom: @wcfGapSmall;
-}
-
-/* jquery ui fixes */
-.ui-tabs .ui-tabs-hide {
-       display: none !important;
-}
-
 .ui-helper-hidden {
        display: none;
 }

diff --git a/wcfsetup/install/files/style/tabMenu.less b/wcfsetup/install/files/style/tabMenu.less
new file mode 100644 (file)
index 0000000..e69de29