c1-cms/styles/default/tabboxes.less

Contains React components distributed with C1 CMS.

ui|tabbox {
	display: block;
	overflow: hidden;

	ui|tabbox.tabsontop { // usage: Edit Data Type -> Fields -> Tabs
		ui|tabs{
			padding-top: 36px;
		}
	}
}

ui|tabs {
	display: block;
	position: relative !important;
	overflow: hidden;
}

ui|tab {
	display: block;
	float: left;
	position: relative;
	white-space: nowrap;
	border: solid 1px @tabs-border-color;
	border-radius: @tabs-border-radius @tabs-border-radius 0 0;
	background: @tabs-bg-color;
	z-index: 2;
	margin-right: -4px;
	text-transform: uppercase;
	font-family: @heading-font-family;
	font-size: 13px;
	line-height: 18px;
}

ui|tabpanels {
	display: block;
	height: 100%;
	clear: both;
	overflow: hidden;
}

ui|tabbox.boxed ui|tabpanels {
	overflow: visible;
	height: auto;
}

ui|tabbox.equalsize ui|tabpanels {
	overflow: hidden;
	height: 100%;
}

ui|tabpanel { /* styles comparable to deck - please coordinate all changes! */
	display: block;
	height: 100% !important;
	overflow: hidden;
	position: absolute;
	top: -10000px;
}

ui|tabbox.equalsize ui|tabpanel {
	overflow: visible;
	height: auto !important;
}

ui|tabbox.tabsontop {

	ui|tabs {
		box-shadow: inset 0px -1px 0px 0px rgba(204,204,204,1);
		padding: 0px 10px 0px 10px;
	}

	ui|tab {
		padding: 5px 20px 5px 15px;
		color: @tabs-text-color;

		&.selected {
			color: @tabs-active-text-color;
			z-index: 3;
			border-color: @tabs-active-border-color @tabs-active-border-color transparent @tabs-active-border-color;
		}
	}
}