/* dojox.mobile.TabBar */ .mblTabBar { position: relative; margin: 0px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0px 6px; height: 42px; text-align: center; color: white; border-top: 1px solid @heading-border-top-color; border-bottom: 1px solid @heading-border-bottom-color; .mblTabBar-styles; } /* dojox.mobile.TabBarButton */ .mblTabBarFill .mblTabBarButton { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .mblTabBarButton { overflow: hidden; cursor: pointer; .tap-highlight-color(rgba(255,255,255,0)); position: relative; list-style-type: none; float: left; } .mblTabBarButtonIconArea { margin: 0 auto; width: 29px; } .mblTabBarButtonIconParent1 { display: block; } .mblTabBarButtonIconParent2 { display: none; } .mblTabBarButtonSelected .mblTabBarButtonIconParent1 { display: none; } .mblTabBarButtonSelected .mblTabBarButtonIconParent2 { display: block; } /* barType="tabBar" */ .mblTabBarTabBar { height: 48px; border-top: 1px solid #000000; .mblTabBarTabBar-styles; .mblTabBarButton { .mblTabBarTabBarButton-styles; } .mblTabBarButtonIconArea { padding-top: 4px; .mblTabBarTabBarButtonIconArea-styles; } .mblTabBarButtonLabel { font-family: "Helvetica Neue", Helvetica; font-size: 11px; .mblTabBarTabBarButtonLabel-styles; } .mblTabBarButtonSelected { border-radius: 3px; .mblTabBarTabBarButtonSelected-styles; } .mblTabBarButtonSelected .mblTabBarButtonLabel { .mblTabBarTabBarButtonLabelSelected-styles; } } /* barType="segmentedControl" */ .mblTabBarSegmentedControl { .heading-background-image(); .mblTabBarSegmentedControl-styles; &.mblTabBarNoText { .mblTabBarButton { width: auto; padding: 0 3px; } .mblTabBarButtonIconArea { position: relative; } } .mblTabBarButton { margin: 6px 0; width: 100px; height: 29px; border-width: 1px 1px 1px 0px; font-family: Helvetica; font-size: 13px; font-weight: bold; text-align: center; line-height: 29px; .mblTabBarSegmentedControlButton-styles; &:first-child { border-left-width: 1px; border-top-left-radius: @mbl-tab-bar-segmented-control-border-radius; border-bottom-left-radius: @mbl-tab-bar-segmented-control-border-radius; } &:last-child { border-top-right-radius: @mbl-tab-bar-segmented-control-border-radius; border-bottom-right-radius: @mbl-tab-bar-segmented-control-border-radius; } } .mblTabBarButtonIconArea { position: absolute; top: 0px; left: 0px; } .mblTabBarButtonSelected { .mblTabBarSegmentedControlButtonSelected-styles; } } .mblHeading .mblTabBarSegmentedControl { display: inline; float: left; height: auto; border: none; } /* barType="standardTab" */ .mblTabBarStandardTab { .heading-background-image(); .mblTabBarStandardTab-styles; .mblTabBarButton { margin-top: 9px; padding: 9px; border: 1px solid #62676d; border-top-left-radius: 4px; border-top-right-radius: 4px; font-family: Helvetica; font-size: 14px; font-weight: bold; .mblTabBarStandardTabButton-styles; } .mblTabBarButtonIconArea { position: absolute; top: 3px; left: 0px; .mblTabBarStandardTabButtonIconArea-styles; } .mblTabBarButtonLabel { .mblTabBarStandardTabButtonLabel-styles; } .mblTabBarButtonSelected { .mblTabBarStandardTabButtonSelected-styles; } .mblTabBarButtonSelected .mblTabBarButtonLabel { .mblTabBarStandardTabButtonLabelSelected-styles; } .mblTabBarButtonHasIcon .mblTabBarButtonLabel { margin-left: 20px; } } /* barType="slimTab" */ .mblTabBarSlimTab { height: 30px; padding: 0px; border: 1px solid @heading-border-bottom-color; background-color: #000000; .background-image-linear-gradient-top-bottom-2-stops(#2d2d2d, #000000, 0.5, #141414, 0.5, #000000); .mblTabBarButton { padding: 7px; border-right: 1px solid #4e4e4e; .background-image-linear-gradient-top-bottom-2-stops(#2d2d2d, #000000, 0.5, #141414, 0.5, #000000); font-family: Helvetica; font-size: 14px; font-weight: bold; color: white; text-shadow: rgba(100, 100, 100, 0.6) 0px -1px 0px; text-align: center; &:first-child { border-left: 1px solid #4e4e4e; } &:last-child { } } .mblTabBarButtonIconArea { position: absolute; top: 0px; left: 0px; } .mblTabBarButtonSelected { background-color: #404040; .background-image-linear-gradient-top-bottom-2-stops(#313031, #959595, 0.5, #5a555a, 0.5, #616161); } .mblTabBarButtonHasIcon .mblTabBarButtonLabel { margin-left: 20px; } } /* barType="flatTab" */ .mblTabBarFlatTab { height: 30px; padding: 0px; border-style: none; background-color: transparent; background-image: none; .mblTabBarButton { padding: 7px; background-image: none; font-family: Helvetica; font-size: 14px; font-weight: bold; text-shadow: rgba(100, 100, 100, 0.6) 0px -1px 0px; text-align: center; } .mblTabBarButtonIconArea { position: absolute; top: 0px; left: 0px; } .mblTabBarButtonHasIcon .mblTabBarButtonLabel { margin-left: 20px; } } /* barType="tallTab" */ .mblTabBarTallTab { height: 64px; border-top: 1px solid #cdd5df; border-bottom: 2px solid #949694; .mblTabBarTallTab-styles; .mblTabBarButton { margin-top: 3px; margin-right: 2px; width: 78px; height: 61px; border-width: 0px 1px 0px 1px; border-style: solid; border-color: black #182018 black #393c39; .background-image-linear-gradient-top-bottom-1-stop(#181818, #100c10, 0.1, #313031); font-family: Helvetica; font-size: 13px; color: white; text-align: center; .mblTabBarTallTabButton-styles; &:first-child { .mblTabBarTallTabButton-FirstChild-styles; } &:last-child { .mblTabBarTallTabButton-LastChild-styles; } } .mblTabBarButtonIconArea { margin-top: 8px; .mblTabBarTallTabButtonIconArea-styles; } .mblTabBarButtonLabel { font-family: "Helvetica Neue", Helvetica; font-size: 11px; .mblTabBarTallTabButtonLabel-styles; } .mblTabBarButtonSelected { .background-image-linear-gradient-top-bottom(#a59ea5, #848284); .mblTabBarTallTabButtonSelected-styles; } .mblTabBarButtonSelected .mblTabBarButtonLabel { .mblTabBarTallTabButtonLabelSelected-styles; } .mblTabBarButtonHasIcon .mblTabBarButtonLabel { } }