cmps/static/style/qpf/baseWhite.less

cmps is not only a server tool but also a powerful tool to design & make your component/UI quickly and best.

/**
 * Base style of all componennts
 */
// css3 functions
@import "./css-vendor.less";

body{
	font-family: "Helvetica", "Arial", "黑体";
	font-size: 14px;
}
//-------------------------------------
// meta : button
// normal : 30px height
// small : 20px height 
//-------------------------------------
.qpf-ui-button,
.qpf-common-button{
	border:none;
	border-radius: 3px;
	box-shadow: 0px 1px 3px black;
	border-top: 1px solid #626262;
	.linear-gradient-top(#3f3f3f, rgba(255,255,255,0.1), 0%, rgba(255,255,255,0.0), 99%);
	color:#aeaeae;
	text-align: center;
	cursor: pointer;
	line-height: 1.5;
    padding: 4px 15px;
    font-size: 12px;

	&:hover,
	&.hover{
		background-color: #757575;
		border-top: 1px solid #848484;
		color:#232323;
	}

	&:active,
	&.active{
		.linear-gradient-top(#000000, rgba(255,255,255,0.0), 0%, rgba(255,255,255,0.1), 99%);
		border-bottom: 1px solid #2b2b2b;
		box-shadow: inset 0px 1px 3px black;
		border-top: none;
		color:#aeaeae;
	}

	&.small{
		line-height: 20px;
		height:20px;
		padding: 0px 10px;
		font-size: 12px;
	}

}

//-------------------------------------
// meta : label
//-------------------------------------
.qpf-ui-label{
	color : white;
}

//-------------------------------------
// meta : textfield
//-------------------------------------
.qpf-ui-textfield{

	background-color: #111111;
	border-radius: 3px;
	display: inline-block;
	border-bottom: 1px solid #414141;
	box-shadow: inset 0px 1px 3px black;

	input{
		background:none;
		border:none;
		//default width
		min-width:10px;
		color:#b1b1b1;
		float:left;
		margin:0px;

		line-height: 23px;
		padding-left: 4px;
		font-size: 14px;

		&:focus{
			outline: none;
		}

	}
}
.qpf-ui-textarea{

	background-color: #111111;
	border-radius: 3px;
	display: inline-block;
	border-bottom: 1px solid #414141;
	box-shadow: inset 0px 1px 3px black;

	textarea{
		background:none;
		border:none;
		//default width
		min-width:10px;
		color:#b1b1b1;
		float:left;
		margin:0px;

		line-height: 23px;
		padding-left: 4px;
		font-size: 14px;

		&:focus{
			outline: none;
		}

	}
}

//-------------------------------------
// meta : checkbox
//-------------------------------------
.qpf-ui-checkbox{

	cursor: pointer;
	display: inline;

	input{
		display: none;
	}

	span{
		width: 19px;
		height: 16px;
		background-image: url(images/check_radio_sheet.png);
		background-repeat: no-repeat;
		display: inline-block;
		border-radius: 3px;
		
		&.checked{
			background-position: -19px 0px;
		}
	}
}

//spinner
.qpf-ui-spinner{
	
	background-color: #111111;
	border-radius: 3px;
	border-bottom: 1px solid #414141;
	height:26px;
	box-shadow: inset 0px 1px 3px black;

	.qpf-left{
		
		float:left;
		input{
			background:none;
			border:none;
			//default width
			min-width:10px;
			color:#717171;
			float:left;
			margin:0px;

			line-height: 23px;
			padding-left: 4px;
			font-size: 14px;

			&:focus{
				outline: none;
			}

		}
	}
	.qpf-right{
		
		float:right;

		.qpf-increase,
		.qpf-decrease{
			width:16px;
			height:11px;
			margin-top: 1px;
			padding:0px;
		}

		.qpf-increase{
			border-radius: 0px 3px 0px 0px;
			line-height: 9px;
			font-size: 12px;
		}
		.qpf-decrease{
			border-radius: 0px 0px 3px 0px;
			line-height: 9px;
			font-size: 16px;
		}
	}
}

//-------------------------------------
// meta : slider
//-------------------------------------
.qpf-ui-slider{
	
	height:25px;
	position: relative;

	.qpf-slider-groove-box{
		float: left;
	}
	.qpf-slider-groove{

		background-color: #030303;
		box-shadow: 0px 0px 1px black;
		border-bottom: 1px solid #3D3D3D;
		border-radius: 2px;
		overflow: hidden;
	}

	.qpf-slider-percentage{
		background-color: #4EADD5;
		margin-top: 1px;
		margin-left: 1px;
		border-radius: 2px;
	}

	.qpf-slider-control{
		width: 0px;
		height: 14px;
		position: absolute;

		.qpf-slider-control-inner{
			width: 12px;
			height: 14px;
			margin-left: -6px;
			background-image: url(images/slider-control.png);
		}

		.qpf-slider-value{
			background-color: #464648;
			color:#939395;
			padding:2px 4px;
			position: absolute;
			font-size: 12px;
			border-radius: 3px;
			opacity: 0;
			.transition(opacity 0.2s linear);
			.transition-delay(1s);
		}

		&:hover{
			.qpf-slider-value{
				opacity: 1;
				.transition-delay(0s);
			}
		}
	}

	.qpf-slider-min{
		position: absolute;
		font-size: 12px;
		color:#616161;
	}
	.qpf-slider-max{		
		position: absolute;
		font-size: 12px;
		color:#616161;
	}

	// the slider is horizontal
	&.horizontal{
		.qpf-slider-groove-box{
			width:100%;
		}
		.qpf-slider-groove{
			width:100%;
			height:3px;
			margin-top: 15px;
		}
		.qpf-slider-percentage{
			height: 2px;
		}
		.qpf-slider-min{
			left:0px;
			top:2px;
		}
		.qpf-slider-max{
			right:0px;
			top:2px;
		}
		.qpf-slider-control{
			top:10px;
			.qpf-slider-value{
				bottom:-1px;
				left:16px;
			}
		}
	}

	// the slider is vertical
	&.vertical{
		height: 100%;
		.qpf-slider-groove-box{
			height:100%;
		}
		.qpf-slider-groove{
			width:3px;
			height:100%;
			margin-left: 5px;
		}
		.qpf-slider-percentage{
			height: 2px;
		}
		.qpf-slider-min{
			left:15px;
			top:0px;
		}
		.qpf-slider-max{
			left:15px;
			bottom:0px;
		}
		.qpf-slider-control{
			top:10px;
			.qpf-slider-value{
				bottom:-1px;
				left:16px;
			}
		}
	}
}

//-------------------------------------
// meta : combobox
//-------------------------------------
.qpf-ui-combobox{

	border-radius: 3px;
	border: 1px solid #141414;
	position: relative;

	.qpf-combobox-selected{
		
		position: relative;

		.qpf-left{
			box-shadow: none;
			text-align: left;
			padding: 0px 10px;
			border-radius:3px 0px 0px 3px;
			border-right: 1px solid #616161;
			.linear-gradient-top(#3f3f3f, rgba(255,255,255,0.1), 0%, rgba(255,255,255,0.0), 99%);
			color:#aeaeae;
			border-top: 1px solid #626262;
			overflow: hidden;

			height:30px;
			line-height: 30px;

			margin-right: 21px;
		}
		.qpf-right{
			float:right;
			width:20px;
			height:30px;
			position: absolute;
			right:0px;
			top: 0px;

			padding:0px;
			border-radius: 0px 3px 3px 0px;
			box-shadow: none;
			border-left: 1px solid #272727;

			&:active{
				background-color: #757575;
				border-top: 1px solid #848484;
				color:#232323;
			}
			.qpf-icon{
				background-size: 10px 10px;
				width:20px;
				height:30px;
				background-position: 50% 50%;
				background-image: url(images/arrow-down.svg);
				background-repeat: no-repeat;
			}
		}
	}

	ul.qpf-combobox-items{
		margin:0px;
		padding: 0px;
		display: none;
		
		width:100%;
		position: absolute;
		top:32px;
		z-index: 20000;

		border: 1px solid #141414;
		border-top: none;
		margin-left: -1px;

		&>li{
			list-style: none;
			border-bottom: 1px solid #292929;
			border-top: 1px solid #565656;
			background-color: #414141;
			color:#8d8d8d;

			line-height: 30px;
			padding: 0px 10px;

			cursor: pointer;

			&:hover{
				color:#acacac;
				background-color:#4b4b4b;
			}

			&.selected{
				border-left: 2px solid #4EADD5;
				box-sizing:border-box;
			}
		}
	}

	&.active{
		border-radius: 3px 3px 0px 0px;
		
		.qpf-combobox-selected{
			.qpf-left{
				border-bottom: 1px solid #292929;
				border-radius: 3px 0px 0px 0px;
			}
			.qpf-right{
				border-bottom: 1px solid #292929;
				border-radius: 0px 3px 0px 0px;
				.qpf-icon{
					background-image: url(images/arrow-up.svg);
				}
			}
		}

		ul.qpf-combobox-items{
			display: block;
		}
	}

	&.small{
		.qpf-combobox-selected{

			.qpf-left{
				line-height: 20px;
				height:20px;
				padding: 0px 10px;
				font-size: 12px;
			}
			.qpf-right{
				height:20px;
				.qpf-icon{
					height:20px;
				}
			}
		}
		ul.qpf-combobox-items{
			top:22px;
			&>li{
				line-height: 20px;
				padding: 0px 10px;
				font-size: 12px;
			}
		}
	}

	&:focus{
		outline:none;
	}
}


//-------------------------------------
// meta : tree
//-------------------------------------
.qpf-ui-tree{
	ul{
		margin:0px;
		padding: 0px;

		li{
			list-style: none;
			line-height: 24px;
		}
	}
	.qpf-tree-item-title{
		cursor: pointer;
		&:hover{
		}
	}
}
//-------------------------------------
// widget : vector
//-------------------------------------
.qpf-ui-vector{

	position: relative;

	&>.qpf-left{
		position: absolute;
		top: 5px;
		bottom: 5px;
		left: 5px;
		width: 12px;

		cursor: pointer;
	}

	.qpf-vector-link{
		border:1px solid #5F5F5F;
		border-right:none;
		border-radius: 3px 0px 0px 3px;
		height:100%;

		background-image: url(images/link.png);
		background-position: 2px 50%;
		background-repeat: no-repeat;
		background-size: 8px 8px;
	}

	&>.qpf-right{
		margin-left: 20px;

		.qpf-list{

			margin:0px;
			padding:0px;

			li{
				list-style: none;
				margin:3px 0px;
			}
		}
	}

	&.qpf-vector-constrain{
		.qpf-vector-link{
			border-color:#4EADD5;
			background-image: url(images/link-active.png);
		}
	}
}

//-------------------------------------
// widget : palette
//-------------------------------------
.qpf-ui-palette{
	width:360px;

	.qpf-palette-adjuster{

		&>.qpf-left{
			float:left;
			margin-top: 10px;
		}
		&>.qpf-right{
			float:left;
			width:110px;
			margin-left: 20px;

			.qpf-ui-spinner{
				input{
					width:60px;
				}
			}
		}
	}

	.qpf-palette-picksv{
		position: relative;
		float:left;
		width:200px;
		height:200px;

		overflow: hidden;

		.qpf-palette-saturation{
			height:100%;
			.linear-gradient-left(none, white, 0%, rgba(204, 154, 129, 0), 100%);
		}
		.qpf-palette-value{
			height:100%;
			.linear-gradient-top(none, rgba(204, 154, 129, 0), 0%, black, 100%);
			
			box-shadow: inset 0px 0px 5px black;
		}
		.qpf-palette-picker{
			width:8px;
			height:8px;
			border-radius: 5px;
			border:2px solid #ffffff;
			margin-left: -5px;
			margin-top: -5px;
			box-shadow: 0px 0px 3px black;
		}
	}
	.qpf-palette-pickh{
		position: relative;
		float:left;
		margin-left: 10px;

		width:20px;
		height:200px;

		background: -webkit-linear-gradient(top, red 0%, yellow 17%, lime 33%, cyan 50%, blue 67%, magenta 83%, red 100%);
		background: -moz-linear-gradient(top, red 0%, yellow 17%, lime 33%, cyan 50%, blue 67%, magenta 83%, red 100%);
		background: linear-gradient(top, red 0%, yellow 17%, lime 33%, cyan 50%, blue 67%, magenta 83%, red 100%);

		overflow: hidden;
		
		box-shadow: inset 0px 0px 5px black;


		.qpf-palette-picker{
			width:16px;
			height:4px;
			border-radius: 3px;
			border:2px solid #ffffff;
			margin: -4px 0px;
			box-shadow: 0px 0px 3px black;
		}
	}
	.qpf-palette-picker{
		position: absolute;
	}

	.qpf-ui-label{
		font-size: 12px;
		color:#666666;
	}

	.qpf-palette-hex{
		&>div{
			float: left;
		}
		input{
			width:80px;
		}
		.qpf-ui-label{
			margin:5px;
		}
	}

	.qpf-palette-alpha{
		margin-top: 5px;
	}

	.qpf-palette-recent{
		margin:10px 0px;
		padding:0px;

		li{
			width:30px;
			height:20px;
			float: left;
			list-style: none;
			margin:1px;
			cursor: pointer;

			.transition(all 0.2s linear);

			box-shadow: 0px 0px 2px black;
		}
		li:first-of-type{
			border-radius: 5px 0px 0px 5px;
		}
		li:last-of-type{
			border-radius: 0px 5px 5px 0px;
		}
		li:hover{
			width:34px;
			height:24px;
			margin:-1px;
		}
	}
	.qpf-palette-buttons{
		&>div{
			float:right;
			margin:4px 6px;
		}
	}
}

//-------------------------------------
// container : panel
//-------------------------------------
.qpf-ui-panel{

	border-radius: 5px;
	box-shadow: 0px 1px 2px black;
	background-color: #323234;
	position: relative;

	&>.qpf-panel-header{
		.linear-gradient-top(#3f3f3f, rgba(255,255,255,0.1), 0%, rgba(255,255,255,0.0), 99%);
		border-top: 1px solid #626262;
		color:#919191;
		line-height: 25px;

		border-radius: 5px 5px 0px 0px;

		box-shadow: 0px 1px 1px black;

		&>.qpf-panel-title{
			margin-left: 10px;
		}

	}

	&>.qpf-panel-body{
		padding: 10px;
	}

	&>.qpf-panel-footer{
		min-height: 5px;
		border-radius: 0px 0px 5px 5px;
	}
}
//-------------------------------------
// container : Window
//-------------------------------------

.qpf-ui-window{
	position: absolute;
}
//-------------------------------------
// container : Tab
//-------------------------------------
.qpf-ui-tab{


	&>.qpf-tab-header{
		overflow: hidden;

		&>.qpf-tab-tabs{

			margin: -1px -1px 0px -1px;
			box-shadow: inset 0px 0px 1px black;
			height: 28px;
			padding: 3px 3px 1px 1px;
			
			&>li{
				cursor: pointer;
				list-style: none;
				border-radius: 5px 5px 0px 0px;
				border-top: 1px solid #525252;
				.linear-gradient-top(#3f3f3f, rgba(255,255,255,0.05), 0%, rgba(255,255,255,0.0), 99%);
			
				line-height: 27px;
				float: left;
				text-align: center;
				border-bottom: 1px solid #222;

				overflow: hidden;

				&.actived{
					background-color: #323234;
					border: 1px solid #1B1B1B;
					border-bottom: none;
					margin-top: -1px;
					line-height: 29px;
				}

				a{
					color:#919191;
					margin:0px 5px;
				}
			}
		}
	}

	&>.qpf-tab-body{
		background-color: #323234;
		border-radius: 0px 0px 5px 5px;
		border:1px solid #1B1B1B;
		border-top: none;

		&>.qpf-tab-views>.qpf-ui-panel{
			box-shadow: none;
			&>.qpf-panel-header{
				display: none;
			}
			&>.qpf-panel-footer{
				display: none;
			}
		}
	}
}

//-------------------------------------
// container : Inline
//-------------------------------------
.qpf-ui-inline{

	.qpf-children{
		div,button{
			float:left;
		}
		button{
			margin-top: 2px;
		}
		
	}
}