dojox/mobile/themes/common/TabBar-compat.less

Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.

/* dojox.mobile.TabBar */
.mblTabBar {
}
.dj_ie6 .mblTabBar .mblTabBarButton {
	display: inline; // IE bug
}

/* barType="tabBar" */
.mblTabBarTabBar {
	background-image: none;
	.mblTabBarTabBar-compat;
}
.dj_ff3 {
	.mblTabBarTabBar {
		.mblTabBarButtonSelected {
			-moz-border-radius: 3px;
		}
	}
}

/* barType="segmentedControl" | "standardTab" */
.mblTabBarSegmentedControl, .mblTabBarStandardTab {
	background-image: url(compat/heading-bg.png);
	.mblTabBarButton {
		background-image: url(compat/tab-seg-button-bg.png);
	}
	.mblTabBarButtonSelected {
		background-image: url(compat/tab-seg-sel-button-bg.png);
	}
}
.dj_gecko .mblTabBarSegmentedControl {
	.mblTabBarButton {
		.mblTabBarSegmentedControlButton-compat-gecko;
	}
}
.dj_ff3 {
	.mblTabBarSegmentedControl {
		.mblTabBarButton {
			&:first-child {
				-moz-border-radius-topleft: @mbl-tab-bar-segmented-control-border-radius;
				-moz-border-radius-bottomleft: @mbl-tab-bar-segmented-control-border-radius;
			}
			&:last-child {
				-moz-border-radius-topright: @mbl-tab-bar-segmented-control-border-radius;
				-moz-border-radius-bottomright: @mbl-tab-bar-segmented-control-border-radius;
			}
		}
	}
	.mblTabBarStandardTab {
		.mblTabBarButton {
			-moz-border-radius-topleft: 4px;
			-moz-border-radius-topright: 4px;
		}
	}
}

/* barType="slimTab" */
.mblTabBarSlimTab {
	background-image: url(compat/tab-slim-bar-bg.png);
}
.dj_gecko .mblTabBarSlimTab {
	background-image: -moz-linear-gradient(top, #2d2d2d 0%, #141414 50%, #000000 50%, #000000 100%);
	.mblTabBarButton {
		background-image: -moz-linear-gradient(top, #2d2d2d 0%, #141414 50%, #000000 50%, #000000 100%);
	}
	.mblTabBarButtonSelected {
		background-image: -moz-linear-gradient(top, #313031 0%, #5a555a 50%, #616161 50%, #959595 100%);
	}
}

/* barType="flatTab" */
.mblTabBarFlatTab {
}

/* barType="tallTab" */
.mblTabBarTallTab {
	background-image: url(compat/tab-tall-bar-bg.png);
	.mblTabBarButtonSelected {
		background-color: #8c8e8c;
	}
}