/*! doby-grid.less
 * (c) 2014 Evgueni Naverniouk, Globex Designs, Inc.
 * Doby may be freely distributed under the MIT license.
 * For all details and documentation:
 * https://github.com/globexdesigns/doby-grid */


@w3c: true;
@import "../libs/lesshat/lesshat";


// Containers
// ==================================================================================================


.doby-grid {
	.box-sizing(content-box);
	font-size: 12px;
	height: 100%;
	line-height: normal;
	position: relative;

	&:focus {
		outline: 0;
	}
}

.doby-grid-clipboard {
	bottom: 0;
	height: 0;
	position: absolute;
	right: 0;
	width: 0;

	&:focus {
		outline: 0;
	}
}

.doby-grid-scrollbar-left {
	.doby-grid-viewport {
		direction: rtl;
	}
	
	.doby-grid-canvas {
		direction: ltr;
	}
}


// Header
// ==================================================================================================


.doby-grid-header {
	overflow: hidden;
	position: relative;
	width: 100%;
}

	// Left scrollbar spacer
	.doby-grid-column-spacer {
		display: inline-block;
		height: 100%;
		left: 1000px;
		margin-right: -1px;
		position: relative;
	}

	.doby-grid-header-columns {
		cursor: default;
		font-size: 14px;
		height: 29px;
		left: -1000px;
		overflow: hidden;
		position: relative;
		white-space: nowrap;
	}

		.doby-grid-header-column {
			border: 0;
			.box-sizing(content-box);
			display: inline-block;
			height: 29px;
			left: 1000px;
			line-height: 28px;
			margin: 0;
			padding: 0 8px;
			position: relative;
			vertical-align: top;

			&.sortable:hover {
				cursor: pointer;
			}
		}

		.ui-sortable-helper .doby-grid-resizable-handle {
			display: none
		}

		.doby-grid-sortable-placeholder {
			vertical-align: top;
		}

		// When columns are auto-sized, remove right border on the last item for a cleaner edge
		.doby-grid-no-right .doby-grid-header-column:last-child {border-right: 0}

			.doby-grid-column-name {
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100%;
			}

			// Resize handle
			.doby-grid-resizable-handle {
				cursor: col-resize;
				display: block;
				font-size: 0.1px;
				height: 100%;
				position: absolute;
				right: -6px;
				top: 0;
				width: 10px;
				z-index: 10;

				span {
					display: block;
					height: 100%;
					margin: 0 3px;
					.transition(all 0.2s ease-in-out);
					width: 1px;
				}
			}

		// Resize handle hover/active
		.doby-grid-header-column-dragging .doby-grid-resizable-handle span,
		.doby-grid-resizable-handle:hover span {
			margin: 0 1px;
			width: 5px;
		}

		// Sorting Indicator
		.doby-grid-sort-indicator {
			background: no-repeat 0 0;
			display: none;
			height: 16px;
			position: absolute;
			right: 5px;
			top: 7px;
			width: 16px;
		}

			.doby-grid-sort-indicator-desc,
			.doby-grid-sort-indicator-asc {
				display: inline-block
			}


// Context Menu
// ==================================================================================================


.doby-grid-dropdown {
	left: 0;
	opacity: 1;
	position: absolute;
	top: 0;
	z-index: 999;

	&.off {opacity: 0}

	.doby-grid-dropdown-menu {
		padding: 5px 0;
		position: relative;
	}

	.doby-grid-dropdown-item {
		cursor: pointer;
		padding: 6px 24px 6px 30px;
		position: relative;
		white-space: nowrap;

		.doby-grid-dropdown-icon {
			display: none;
			position: absolute;
			left: 9px;
			top: 4px;
		}

		.doby-grid-dropdown-arrow {
			border: 5px solid transparent;
			height: 0;
			position: absolute;
			right: 0;
			top: 7px;
			width: 0;
		}

		&.on .doby-grid-dropdown-icon {
			display: block;
			height: 16px;
			width: 16px;
		}

		& > .doby-grid-dropdown-menu {
			opacity: 0;
			pointer-events: none;
			position: absolute;
			.transition(0.3s opacity ease-in-out);
			z-index: 1;

			&.drop-down {top: -5px}
			&.drop-up {bottom: -5px}
			&.drop-right {left: 100%;}
			&.drop-left {right: 100%;}
		}

		&.open > .doby-grid-dropdown-menu {
			opacity: 1;
			pointer-events: all;
			z-index: 6
		}
	}

	.doby-grid-dropdown-title {
		margin: 2px 0;
		padding: 5px 12px 3px;
	}

	.doby-grid-dropdown-divider {
		margin: 2px 0;
	}
}


// Header Quick Filter
// ==================================================================================================


.doby-grid-header-filter {
	height: 30px;
	overflow: hidden;
	white-space: nowrap
}

	.doby-grid-header-filter-cell {
		border-left: 1px solid transparent;
		border-right: 1px solid transparent;
		.box-sizing(content-box);
		display: inline-block;
		height: 30px;
		margin: -1px 0 -1px -1px;
		padding: 0 8px;
		vertical-align: top;

		.doby-grid-editor {
			.calc(width, ~'100% - 20px');
		}
	}


// Body
// ==================================================================================================


.doby-grid-viewport {
	overflow: auto;
	position: relative;
	width: 100%;

	&:focus {
		outline: 0;
	}
}

	.doby-grid-canvas {
		-webkit-transform: translate3d(0,0,0);
	       -moz-transform: translate3d(0,0,0);
		    -ms-transform: translate3d(0,0,0);
		     -o-transform: translate3d(0,0,0);
			    transform: translate3d(0,0,0);
		position: relative;

		&:focus {
			outline: 0;
		}
	}

.doby-grid-scroll-loader {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}


// Rows
// ==================================================================================================


.doby-grid-row {
	border-bottom: 1px solid #DDD;
	.box-sizing(content-box);
	position: absolute;
	-webkit-transform: translate3d(0,0,0);
	   -moz-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		 -o-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
	width: 100%;
}

	.doby-grid-cell {
		border: 1px solid #DDD;
		bottom: -1px;
		.box-sizing(content-box);
		cursor: default;
		overflow: hidden;
		padding: 0 8px;
		position: absolute;
		top: -1px;
		white-space: nowrap;
		z-index: 1;

		&.nopad {padding: 0}

		&.selected {z-index: 2}
		&.active {z-index: 3}
	}
	
	

	// When columns are auto-sized, remove right border on the last item for a cleaner edge
	.doby-grid-no-right .doby-grid-cell:last-child {border-right: 0}

	// Row resize handle
	.doby-grid-row-handle {
		bottom: -5px;
		cursor: ns-resize;
		height: 6px;
		left: 0;
		position: absolute;
		right: 0;
		z-index: 2;
	}

// Row drag container
.doby-grid-row-drag-container {
	bottom: 0;
	left: 0;
	top: 0;
	position: absolute;
	right: 0;
}


// Groups
// ==================================================================================================


// Click this to expand/collapse groups
.doby-grid-group-toggle {
	cursor: pointer;

	.doby-grid-cell {cursor: inherit}

	.icon {
		background-position: 0 0;
		background-repeat: no-repeat;
		display: inline-block;
		height: 16px;
		margin-right: 4px;
		vertical-align: middle;
		width: 16px;
	}

	.doby-grid-row-handle {bottom: -6px}
}

// Sticky groups need to stick to be on top
.doby-grid-sticky {
	z-index: 1
}


// Editing
// ==================================================================================================


// Input field
.doby-grid-editor {
	background: none;
	border: 0;
	box-shadow: none;
	font-size: 12px;
	height: 100%;
	margin: 0;
	outline: none;
	padding: 0;
	text-indent: 0;
	text-shadow: none;
	width: 100%;
}

// Cell range decorator
.doby-grid-range-decorator {
	.box-sizing(content-box);
	position: absolute;
	z-index: 999
}

.doby-grid-range-decorator-stats {
	.box-sizing(content-box);
	padding: 2px 10px;
	position: absolute;
	right: 4px;
	top: 0;
}

.doby-grid-invalid-icon {
	bottom: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 16px;
}


// Popup Tooltips
// ==================================================================================================


.doby-grid-tooltip {
	opacity: 0;
	position: absolute;
	white-space: normal;
	z-index: 999;

	&.on {opacity: 1}
}

.doby-grid-tooltip-arrow {
	font-size: 0;
	height: 0;
	line-height: 0;
	position: absolute;
	top: -10px;
	width: 0;
}


// Remote Loading Spinner
// ==================================================================================================


.doby-grid-loader {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	z-index: 100
}

.doby-grid-message {
	bottom: 0;
	display: table;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 100;
}

	.doby-grid-message > div {
		display: table-cell;
		vertical-align: middle;
	}

		.doby-grid-message > div > div {
			margin: 0 auto;
			min-width: 300px;
			width: 50%;
		}

// Error Block
// ==================================================================================================

.doby-grid-overlay {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}