ares-ide/enyo/source/ui/data/data.less

A browser-based code editor and UI designer for Enyo 2 projects

// Vertical oriented DataList
.enyo-data-list {
	overflow: hidden;
	position: relative;
	height: 100%;
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	.active {
		position: relative;
		overflow: hidden;
	}
	.buffer {
		height: 100%;
		overflow: hidden;
	}
	.page {
		position: absolute;
		visibility: hidden;
		width: 100%;
	}
	&.transitions {
		.page {
			opacity: 0;
			filter: alpha(opacity=0);
			-webkit-transition: opacity 300ms ease-out;
			-moz-transition: opacity 300ms ease-out;
			-ms-transition: opacity 300ms ease-out;
			-o-transition: opacity 300ms ease-out;
			transition: opacity 300ms ease-out;
		}
	}
	&.rendered {
		.page {
			visibility: visible;
		}
		&.transitions {
			.page {
				opacity: 1;
				filter: alpha(opacity=100);
			}
		}
	}
	&.debug {
		.page1 {
			background: #99CCFF;
		}
		.page2 {
			background: #CC99FF;
		}
	}
}
// Horizontal oriented DataList
.enyo-data-list {
	&.horizontal {
		.active {
			white-space: nowrap;
		}
		.page > * {
			display: inline-block !important;
		}
		.page {
			width: auto;
		}
	}
}
// Vertical oriented DataGridList
.enyo-data-grid-list {
	.item {
		display: block;
		position: absolute !important;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	&.transitions {
		&.reset {
			&.rendered {
				.item {
					-webkit-transition: top 300ms ease-out, left 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
					-moz-transition: top 300ms ease-out, left 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
					-ms-transition: top 300ms ease-out, left 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
					-o-transition: top 300ms ease-out, left 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
					transition: top 300ms ease-out, left 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
				}
			}
		}
	}
}