ractive-ez-tabs/lib/EzTabs.less

Ractive Ez UI Tabs

.ez-tabs {
	display: flex;
	width: 100%;
	height: 100%;
	
	& > .ez-tablinks {
		display: flex;
		flex: 0 0 auto;

		& > .ez-tablink {
			flex: 0 0 auto;
		}
	}
	
	& > .ez-tabpane {
		flex: 1 0 auto;
		overflow: auto;
	}
	
	&[data-ez-align='top'] {
		flex-direction: column;
		& > .ez-tablinks { flex-direction: row; }
	}
	
	&[data-ez-align='right'] {
		flex-direction: row-reverse;
		& > .ez-tablinks { flex-direction: column; }
	}
	
	&[data-ez-align='bottom'] {
		flex-direction: column-reverse;
		& > .ez-tablinks { flex-direction: row; }
	}
	
	&[data-ez-align='left'] {
		flex-direction: row;
		& > .ez-tablinks { flex-direction: column; }
	}
}