grid.styl

@import 'lib/nib'

divide(a, b)
	a / b

body
	padding:80px
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
	font-size: 13px
	line-height: 18px
	color: #333

.left {float:left}
.right {float:right}
.fc {overflow:hidden}

div.gridWrapper
	width:800px
	min-width:515px
	border: 1px solid #DDD
	border-radius: 4px
	border-radius: 4px
	height:200px
	position:relative

	&.resizing
		-webkit-user-select: none
	
	.gridConfirm
		position absolute
		top: 50px
		left: 50%
		padding:20px
		border-radius: 7px
		color:#333
		font-size:11px
		width:200px
		height:30%
		margin-left:-100px
		background:white
		//border: 1px solid rgba(0,0,0,.2)
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
		
		span
			display:block
			margin-bottom:5px
			
		.confirmButtons
			bottom: 12px;
			position: absolute;
			right: 15px;
	
	.gridLoading
		text-align:center
		display:block
		width:100%
		font-size:11px
		height:100%

	.gridResizer
		position:absolute
		right:0px
		top:0px
		bottom:0px
		width:10px
		cursor:e-resize

	.columns
		height:inherit
		overflow-x:hidden
		transition:-webkit-filter 200ms ease-out
	
		&.blur
			-webkit-filter: blur(2px);

		.cell
			padding:5px
			border-left:1px solid #DDD
			white-space:nowrap
			height:24px
			transition:background 200ms ease-out
			
			&.row-hover
				background:rgba(0,0,0,.01)
			
			&.input
				padding-right:15px

			&.center
				text-align:center
	
			&.editable input[type="text"]
				width: 100%
				box-shadow: inset 0px 1px 3px #ccc
				border:0px
				margin:0px
			
			&.headerCell
				position:absolute
				width:inherit
				height:inherit
				overflow:hidden
				border-bottom:1px solid #DDD
				padding:0px
				cursor:pointer
				-webkit-user-select : none
				background: linear-gradient(top, #ffffff 0%,#f5f5f5 100%)
				
				span 
					font-weight:bold
					padding:9px
					display:block
					
				.sortbar
					position:absolute
					height:10px
					width:100%
					bottom:0px
					left:0px
					font-size:13px
					line-height: 9px
					text-align: center
					display:none
					transform: rotate(0deg)
					
					.desc
						transform: rotate(180deg)
					
				.resizer
					position:absolute
					top:0px
					right:0px
					height:100%
					width:10px
					background:transparent
					cursor:move
		
		.col
			float:left
			overflow:hidden
			
			&._checkbox .headerCell
				text-align:center

			&:first-child .cell
				border-left:0px
				
	&.small .headerCell
		text-align:center
		
		span
			padding (@padding / 2)
	
	&.small, &.small .input
		font-size:10px