w5grid-rest-node/test/resources/grid.less

w5grid restful sample

@charset "UTF-8";

// gird variables
@gird-default-row-h 				: 25px;
@gird-title-h						: 25px;
@gird-title-borderWidth-bottom		: 1px;
@gird-title-borderStyle-bottom		: solid;
@gird-title-borderColor-bottom		: #ccc; 
@header-label-color					: #333;
@header-label-bg					: #F4F6F7;
@header-label-height				: 25px;
@header-label-font-size				: 12px;
@header-label-borderWidth-top		: 1px;
@header-label-borderStyle-top		: solid;
@header-label-borderColor-top		: #636363; 
@header-label-borderWidth-right		: 1px;
@header-label-borderStyle-right		: solid;
@header-label-borderColor-right		: #B1BCC6; 
@header-label-borderWidth-bottom	: 1px;
@header-label-borderStyle-bottom	: solid;
@header-label-borderColor-bottom	: #B1BCC6; 
@header-label-borderWidth-left		: 1px;
@header-label-borderStyle-left		: solid;
@header-label-borderColor-left		: #B1BCC6; 
@header-menu-height					: @header-label-font-size;

@row-odd-color 						: #fff;
@row-even-color						: #F5F7F8;
@row-hover-color					: #E5FCF8;
/*@row-hover-color					: softlight(@row-even-color, @header-label-bg);*/

@cell-padding-upDown 				: 3px;
@cell-padding-both 					: 5px;
@cell-borderWidth-top				: 1px;
@cell-borderStyle-top				: solid;
@cell-borderColor-top				: #D7E3F0;
@cell-borderWidth-right				: 1px;
@cell-borderStyle-right				: solid;
@cell-borderColor-right				: #D7E3F0;
@cell-borderWidth-bottom			: 1px;
@cell-borderStyle-bottom			: solid;
@cell-borderColor-bottom			: #D7E3F0;
@cell-borderWidth-left				: 1px;
@cell-borderStyle-left				: solid;
@cell-borderColor-left				: #D7E3F0;
@cell-input-width 					: (@cell-padding-both+(@cell-input-borderWidth)*2);
@cell-input-borderWidth				: 1px;
@cell-input-borderStyle				: solid;
@cell-input-borderColor				: gray;
@cell-input-bg 						: white;
@cell-input-readOnly-bg				: antiquewhite;

@cell-default-color 				: #fff;
@cell-hover-color 					: #DFE9F8;
@cell-selected-color 				: softlight(@row-even-color, @row-odd-color);

@vScroll-width 						: 10px;
@vScroll-bg 						: #EEEEEE;
@vScroll-handle-width				: 8px;
@vScroll-handle-color				: #BDBDBD;  
@vScroll-handle-mHeight				: 28px;
@hScroll-height 					: 10px;
@hScroll-bg		 					: #EEEEEE;
@hScroll-handle-color  				: #BDBDBD;
@hScroll-handle-width				: 8px;
@hScroll-handle-height				: 8px;
@hScroll-handle-mWidth				: 28px;

// utilities
.clearfix() {
  display:block;
  &:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
}
.clearfix {
	display:block;
}
.clearfix:after {
	content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}
.text-overflow-init() {
	overflow-y : visible;
 	text-overflow: initial;
 }

.hide { opacity:0; display:none; }
.show { opacity:1; display:block; -webkit-transition: opacity 1s ease-in;}
.float-left { float:left; }
.float-right { float:right; }

// body용 클래스... mixin으로 정의한다고 해서 별개의 공통 클래스로 빠지는 것은 아니었음.
.dragging() {
	cursor: pointer;
}
.dragging {
	cursor: pointer;
}
.sizingH {
	cursor: col-resize;
}
.sizingH() {
	cursor: col-resize;
}

.gGrid {
	margin : 0 auto;
	padding : 9px 10px; 
	font-size : 12px;
	//background-color : #eee;
	border : 1px solid #bebebe;
	position : relative;
	.gGrid-setTable {
		padding-bottom:@hScroll-height;
		width:100%;
		height:100%;
		position:relative; 
		overflow:hidden;
	}
}
.gGrid-caption {
 	text-align : left;
 	font-size : 17px;
 	line-height : @gird-title-h;
 	// border-bottom-width : @gird-title-borderWidth-bottom;
 	// border-bottom-style : @gird-title-borderStyle-bottom;
 	// border-bottom-color : @gird-title-borderColor-bottom;
 }
 .adjustCol-handle {
	margin : 0;
	padding : 0;
	width : 3px;
	background : transparent;
	border : none;
	display : block;
	position : absolute;
	top : -(@cell-padding-upDown);
	right : 0px;
	bottom : -(@cell-padding-upDown);
	text-indent:-9999px;
	&:focus { background : #000; .sizingH(); }
	&:hover { background : #000; .sizingH(); }
	&:active { background : #000; .sizingH(); }
}
.gGrid-table {
	table-layout: fixed;
	border-collapse : collapse;
	border-spacing : 0;
}
.gGrid-headerLabel {
	//padding : @cell-padding-upDown @cell-padding-both;
	height : @header-label-height; 
 	background-color : @header-label-bg;
 	border-top-width : @header-label-borderWidth-top;
 	border-top-style : @header-label-borderStyle-top;
 	border-top-color : @header-label-borderColor-top;
 	border-right-width : @header-label-borderWidth-right;
 	border-right-style : @header-label-borderStyle-right;
 	border-right-color : @header-label-borderColor-right;
 	border-bottom-width : @header-label-borderWidth-bottom;
 	border-bottom-style : @header-label-borderStyle-bottom;
 	border-bottom-color : @header-label-borderColor-bottom;
 	border-left-width : @header-label-borderWidth-left;
 	border-left-style : @header-label-borderStyle-left;
 	border-left-color : @header-label-borderColor-left;
 	vertical-align : middle;
 	overflow-y : visible;
 	.gGrid-headerLabelWrap {
 		text-align : center; 
	 	font-size : @header-label-font-size;
	 	font-weight : bold;
	 	color : @header-label-color;
 		position : relative;
 		box-sizing : content-box;
 	}
 	.gGrid-colMenu {
 		height : @header-label-height - ((@header-label-height - @header-menu-height)/2);
		background-color : @header-label-bg;
		position : absolute;
		//top : (@header-label-height - @header-label-font-size)/2;
		top : 0;
		&.display-left{
			left : 0;		
		}
		&.display-right{
			right : 0;
			//bootstrap. 추후 바뀔 수 있음
			.dropdown-menu {
				margin-top: @header-label-height/6;
				text-align : left;
				color : #333;
				float : none;	// colIndex가 
				left : initial;
				left : 0;
				>li {
					.clearfix();
					>a {
						padding : 3px 12px;
						font-weight : bold;
					}
					.form-group {
						label {
							display : block;
						}
						.btn-group {
							margin-top : 5px;
							text-align : right;
							display : block;
							clear : both;
						}
						.btn {
								margin-left : 3px;	
								display : inline;
								float : none;
							}
					}
					.form-control {
						margin: 0 3px 3px 0;
						float : left;
					}
					input.form-control {
						margin-right : 0;
					}
				}
				.divider {
					height : auto;
					margin : 0;
					padding : 3px 12px;
					background : none;
					border-top : 1px solid #e5e5e5;
				}

			}		
		}
		.glyphicon {
			margin-right:5px;
			cursor: pointer;
		}
 	}// .sort-by-order, .sort-by-order-alt
}
.gGrid-row {
	height : @gird-default-row-h;
	background-color : @cell-default-color;	
	border-bottom-width : @cell-borderWidth-bottom;
	border-bottom-style : @cell-borderStyle-bottom;
	border-bottom-color : @cell-borderColor-bottom;

	&:nth-child(odd){ background-color : @row-odd-color; }
	&:nth-child(even){ background-color : @row-even-color; }
	&:hover { background-color : @row-hover-color; }
	>tbody {}
	>td { 
		padding : @cell-padding-upDown @cell-padding-both;
		height : @gird-default-row-h;
		border-left-width : @cell-borderWidth-left;
		border-left-style : @cell-borderStyle-left;
		border-left-color : @cell-borderColor-left;
		border-right-width : @cell-borderWidth-right;
		border-right-style : @cell-borderStyle-right;
		border-right-color : @cell-borderColor-right;
		.text-overflow();
		>input[type=text]{
	 		width : 100% - @cell-input-width;
	 		background-color : @cell-input-bg;
			border-width : @cell-input-borderWidth;	
	 		border-style : @cell-input-borderStyle;
			border-color : @cell-input-borderColor;	
			&[readonly]{
				background-color : @cell-input-readOnly-bg;	
			}
		}
		>select {
				width : 100% - @cell-input-width;
			}
			>input[type=radio],
			>input[type=checkbox]{
				margin : 0 3px 0 5px;
	 		&:first-child {
	 			margin-left : 0px;
	 		}
	 	}
	 	>label { cursor : pointer; }
	 	>input[type=range] { width : 100% - @cell-input-width; }
	 	&:hover { background-color:@cell-hover-color !important; }
	}
	.gGrid-cell-selected { background-color:@cell-selected-color !important; }
} 
.w2_grid_editbox {
	position: absolute;
	background: white;
	overflow: hidden;
	padding: 3px 5px;
}
.separateCol {
	margin : 0;
	padding : 0;
	width : 2px;
	background : gray;
	border : none;
	text-indent : -9999px;
	position : absolute;
	top : @gird-title-h;
	left : 100px;
	bottom : 0px;
	.sizingH();
}
.frozenCol {
	margin : 0;
	padding : 0;
	width : 2px;
	background : #636363;
	border : none;
	text-indent : -9999px;
	position : absolute;
	top : @gird-title-h;
	left : 200px;
	bottom : 0px;
	.sizingH();
}
.columnMove {
	margin : 0;
	padding : 0;
	width : 2px;
	background : lime;
	border : none;
	text-indent : -9999px;
	position : absolute;
	z-index : 10;
}
.gScroll-v,
.gScroll-h {
	button {
		margin : 0;
		padding : 0;
		border : none;
		background-color: rgba(0,0,0,0.2);
 	    box-shadow: inset 0px 0px .5px .5px rgba(0,0,0,0.10);
 	    &:hover {
			cursor: default;
			outline: none;
 	    	background-color: rgba(104,104,104,.6);
 			box-shadow: inset 0px 0px .5px .5px rgba(104,104,104,.5);
 	    }
 	    &:active {
 	    	cursor: default;
			outline: none;
 	    	background-color: rgba(104,104,104,.9);
 			box-shadow: inset 0px 0px .5px .5px rgba(104,104,104,.7);
 	    }
	}
	&:hover {
		box-shadow:.5px 0px 1px 0.5px #999 inset;
 		background-color: #f7f7f7;
	}
	&:active {
		box-shadow:.5px 0px 1px 0.75px #888 inset;
 		background-color: #f1f1f1;
	}
}
.gScroll-v {
	width : @vScroll-width;
	background :  @vScroll-bg;
	position:absolute;
	top : @gird-title-h + @header-label-height + @header-label-borderWidth-top + @header-label-borderWidth-bottom;
	right : 0px; 
	bottom : @vScroll-width;
	.scrollHandler {
		padding:0px;
		width : @vScroll-handle-width;
		min-height : @vScroll-handle-mHeight;
		background : @vScroll-handle-color;
		border : none;
		text-indent : -9999px;
		position : absolute;
		top : 0;
		right:1px;
	}
}
.gScroll-h {
	height : @hScroll-height;
	background : @hScroll-bg;
	position : absolute;
	left : 0px;
	right : @vScroll-width;
	bottom : 0px;
	.scrollHandler {
		padding:0px;
		min-width : @hScroll-handle-mWidth;
		height: @hScroll-handle-height;
		background : @hScroll-handle-color;
		border : none;
		text-indent : -9999px;
		position : absolute;
		top : 1px;
	}
}
.noselect {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}
.toggleButton_button {
	display: inline-block;
	float: left;
}
.toggleButton_text {
	
}

// test 용 bgClass generator
.bg-variant(@colorName; @background) {
  .bg@{colorName} { background-color:@background; }
}
.bg-variant( Red; #e11d21 );
.bg-variant( Orange; #eb6420 );
.bg-variant( Yellow; #fbca04 );
.bg-variant( Green; #009800 );
.bg-variant( Blue; #207de5 );
.bg-variant( Navy; #0052cc );
.bg-variant( Purple; #5319e7 );
.bd1 { border:1px solid #000; }
.f-bold { font-weight:bold; }
.f-underLine { text-decoration:underline; }
.f-italic { font-style:italic; }