• Home
• com.ajaxjs
• ajaxjs-web
• 1.1.2
• source code
• common_style.less

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

META-INF.resources.asset.ajaxjs-ui.less.common_style.less Maven / Gradle / Ivy

// AJAJXS LESS 样式库 基础库，该文件应该通过 @import 'common_style'; 被引入。

/*
-------------------------
常见样式类
-------------------------
*/

.centerBody (@defaultWidth: 1300px) {
	max-width: @defaultWidth;
	margin: 0 auto;
	width: 100%;
	height: 100%;
}

// 水平线
.ajaxjs-hr {
	margin: 1% 0;
	border: 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #fff;
}

// 快速制作1px 表格边框，为需要设置的table元素加上border的class即可
.ajaxjs-borderTable {
	border: 1px lightgray solid;
	border-collapse: collapse;
	border-spacing: 0;
	th {
		background-color: #efefef;
		letter-spacing: 3px;
	}

	td , th {
		border: 1px lightgray solid;
		line-height: 160%;
		height: 120%;
		padding: 6px;
	}

	tr {
		.transition (background-color 400ms ease-out);
		&:hover {
			background-color: #fbf8e9 ! important;
		}
	}

	tr:nth-child(even) {
		background: #f5f5f5;
		box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
	}
}

.ajaxjs-niceTable {
	border-spacing: 0;
	border: solid #ccc 1px;
	border-radius: 6px;
	box-shadow: 0 1px 1px #ccc;
	td , th {
		border-left: 1px solid #ccc;
		border-top: 1px solid #ccc;
		padding: 10px;
		text-align: center;
	}

	tr {
		.transition (background-color 400ms ease-out);
		&:hover {
			background-color: #fbf8e9 ! important;
		}

		&:last-child {
			td:first-child {
				border-radius: 0 0 0 6px;
			}

			td:last-child {
				border-radius: 0 0 6px 0;
			}
		}
	}

	th {
		background-color: #dce9f9;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
		.gradient (top , #ebf3fc , #dce9f9);
		text-align: center;
		border-top: none;
		box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
		text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
		&:first-child {
			border-radius: 6px 0 0 0;
		}

		&:last-child {
			border-radius: 0 6px 0 0;
		}

		&:only-child {
			border-radius: 6px 6px 0 0;
		}
	}

	td:first-child , th:first-child {
		border-left: none;
	}

	tbody {
		tr:nth-child(even) {
			background: #f5f5f5;
			box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
		}
	}

	tfoot td {
		text-align: right;
	}
}

.transition (@t) {
	-webkit-transition: @t;
	-moz-transition: @t;
	-ms-transition: @t;
	-o-transition: @t;
	transition: @t;
}

.transition_withTransform (@t) {
	-webkit-transition: -webkit-transform @t;
	-moz-transition: -moz-transform @t;
	-ms-transition: -moz-transform @t;
	-o-transition: -o-transform @t;
	transition: transform @t;
}

.transform (@t) {
	-webkit-transform: @t;
	-moz-transform: @t;
	-ms-transform: @t;
	-o-transform: @t;
	-transform: @t;
}

.heightFx () {
	.transition (300ms height ease-out);
}

.widthFx () {
	.transition (200ms width ease-out);
}

.leftFx () {
	.transition (200ms left linear);
}

// 解决使用CSS动画时闪烁的问题
// http://ued.taobao.com/blog/2012/01/chrome%E6%B8%B2%E6%9F%93transition%E6%97%B6%E9%A1%B5%E9%9D%A2%E9%97%AA%E5%8A%A8bug/
.fixTransitionFlash () {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}

// 解决高度塌陷的问题 – 清除浮动 或叫 闭合浮动
// http://www.iyunlu.com/view/css-xhtml/55.html
// http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%BA%8C/
// 强制换行
.forceBreak () {
	word-wrap: break-word;
	word-break: break-all;
}

.giveHeight () {
	overflow: hidden;
	zoom: 1;
}

// 透明度
.imgOpacityShow (@time: 300ms) {
	.transition (opacity @time ease-in);
}

// 旋转角度
.rotate (@ro: 30deg) {
	.transform (rotate(@ro));
}

// 渐变
.gradient (@direction , @startColor , @endColor) {
	background-image: -webkit-linear-gradient(@direction, @startColor, @endColor);
	background-image: -moz-linear-gradient(@direction, @startColor, @endColor);
	background-image: -ms-linear-gradient(@direction, @startColor, @endColor);
	background-image: -o-linear-gradient(@direction, @startColor, @endColor);
	background-image: linear-gradient(@direction, @startColor, @endColor);
}

// 渐变
.gradient (@direction , @startColor , @midColor , @endColor) {
	background-image: -webkit-linear-gradient(@direction, @startColor, @midColor, @endColor);
	background-image: -moz-linear-gradient(@direction, @startColor, @midColor, @endColor);
	background-image: -ms-linear-gradient(@direction, @startColor, @midColor, @endColor);
	background-image: -o-linear-gradient(@direction, @startColor, @midColor, @endColor);
	background-image: linear-gradient(@direction, @startColor, @midColor, @endColor);
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	40% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fade-in {
	0% {
		opacity: 0;
	}

	40% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fade-out {
	0% {
		opacity: 1;
	}

	40% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@-webkit-keyframes fade-out {
	0% {
		opacity: 1;
	}

	40% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fade-out-hide {
	0% {
		opacity: 1;
	}

	40% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		display:none;
	}
}

.fadeIn (@duration) {
	animation: fade-in;
	animation-duration: @duration;
	-webkit-animation: fade-in @duration;
}

.aj-p, .ajaxjs-text-p {
	color: #333;
	line-height: 160%;
	margin: 15px 0;
	font-size: 1rem;
	letter-spacing: 1px;
	text-align: justify;
}

.ajaxjs-text-quotation {
	color: gray;
}

.ajaxjs-text-quotation:before {
	content: '‟';
	font-size: 3rem;
}

.ajaxjs-text-quotation:after {
	content: '”';
	font-size: 3rem;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

// 图片容器
.ajaxjs-imgHolder {
	position: relative;
	overflow: hidden;
	min-height: 70px;
	background: no-repeat center top url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALMAAAB2CAYAAACDMaL0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA1xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDM0MiwgMjAxMC8wMS8xMC0xODowNjo0MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5RkM5NjQxRDQxQUNFNDExOTcwMkU4MjNEOTc3MDU5RiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4QTc3NDNFQkFDNDIxMUU0QTEzMkQyOUQzOTFFQkMzRCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4QTc3NDNFQUFDNDIxMUU0QTEzMkQyOUQzOTFFQkMzRCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OUZDOTY0MUQ0MUFDRTQxMTk3MDJFODIzRDk3NzA1OUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OUZDOTY0MUQ0MUFDRTQxMTk3MDJFODIzRDk3NzA1OUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz77Tka5AAADFElEQVR42uzd0W3aUBiAUVNFlTqBO4VRn/scT1FvQaaAKWCK0hX6FKZghb44Rr2uLGqCL+AY7HMkqyitSHC+XP5riDoryzIZs91ulzAJ5SfngJGYiZnREDNiBjGDmEHMiBnEDGIGMYOYETOIGcQMYkbMIGYQM4gZxIyYQcwgZhAzYgYxg5hBzPDP0wQeYzmR7+Wf6vhdHd+tzDy6z9Xxzco8HZvq2I/sMaXVUYTbX8Q8DasQ8+vIHlcWfkAXNoDTsR9hyMlIH5OYETPjeNYRs1OAmEHM0I8np+BuHK4Xz8PtrdNhZX5UeXUsq+NndfwIt3Onxcr8iCvyIeD6Vbyi8XErtJX54Vbl4sTfFU6PlTlWFv58HfBzt4Xs+rGYo9XheGlYzA9tEebTe2RlNjNHbb6yls3XR/qV/H0337GNDaCYY1flonH7eYCvYRtW4GbQqzDyGHuMGZ3n5PTE1YWPXhFfGnP7vhE0Yu50BeG5Zayogxri6X0jR2PGpaty8c4cfYtX3/LEb3+IuecrA3mH0K+ZnbPG/J0mXvgwZvQ8XpxbMesIY5766xU9O7r/1UBzuJhHbB05huxDoF2u9ebv/JAsGlct+n7WMWbQatFxREg7rvbGDTEPqstmMO0Q8iKMH5lTKuYhV+dzm8E84r68R1nMgyvOrMwx+gg69S0Sc9cV9dSIEBvmMtzPreOzARRzVNBt4WZJ/Asjyws3g0YUMd/UrYJKIzeD9fXrwiZSzLewPArpmqgOq/k84t9n4fOvQ9hWaTHfdDM4D4H1vdLnJ36o7vmXCgbhN03iV+f67ZrXhrQO93WwPTOSLFu+jnrjZ/MXzMpy3P9Lwm63u/cH+JL8/+b841k55hlgZsxgyNW+nqOzDqsyxoy71nwT1NcwdvRxPVrMfPhMnlwwXojZKbjbsQMzM2IGMYOYQcwgZsQMYgYxg5gRMzy+0b+fGTGDmEHMIGYQM2IGMYOYQcyIGcQMYgYxg5gRM4gZxAxiRswgZhAziBnEjJhBzCBmEDNiBjGDmEHMIGbEDGIGMYOYmaY3AQYAXojZOq5J9RcAAAAASUVORK5CYII=');
	background-size: 110% 80%;
	img {
		width: 100%;
		height: 100%;
		vertical-align: top;
	}

	h3 , h4 {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 25px;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 1%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		color: white;
	}

	.m_checkbox {
		width: 20px;
		height: 20px;
		border: 5px solid rgba(0, 255, 0, .5);
		border-right-width: 2px;
		border-bottom-width: 2px;
		position: absolute;
		top: 5px;
		right: 5px;
	}

	.m_selected {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 25px;
		height: 25px;
		background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACOklEQVQ4jdXSS2sTYRQG4Hcu38wktdO09LKxRRA3CiJdSChkY0BRxNKFilm4CPgb/AcuxIVLxWJ/gYuCUEKxIkKtl5ZEkjZEbRpDa+pMJpfOfb5vxoVGigahS8/uwHneA4cD/He1uP9JXWnWRno9fxQ8Xy+oMUFc4oAXD3fWRwGAOwqeUtSlYaLMuCFFw7fyVbuTFnsDK83ayAH16ezEqW4/fFwZzB0TSLLhm4giwGH0nOY713gAeFIvjPLAy5ggLs3XC+ph/OhrXh2X4rkBgST1wEEYAm3qoWjquubZm/yD6rupSWXwlSrKZ8dJfGZSUXOP63kVAO5vv1XHSGx5mCjJVuAijCK0mYeiqe/V7M7c+25jQ9R9544bstMWCwAAE1I8yaJw+d7nNzdPxIaejUmxacN3ESJCl/komfrOF6t9vWwZ+VIqS/lm4Kyvtfd8I3ARRRH2fRuDonT+5ECiOiHFp43ABeMidKiHoqlVypYxW7aMjVIqSwFA8G5d2E4QudoKvMsxgYgCx8ENKQRwcEL6czP1sGk2PxZNfW7H7pZLqWzYu5GgLSyyIJPeUkW5YrHgSoLIROR4RIgQAjBZgKKpreUPtBu7rrl9GAOAAADawiKjmXRlmCh1iwVXh4jMC7wAmwYomvrKh04j892z63/i3wG9ED+TLieIXHMYvSRxvLhlG89XW7u3W4H3rZTKRv0e7K9PPPP6qTStjl8cIvLcamvvrhcyvZTK9rP9A36FiAAkAPa/MAD8AF00Kz0NRW+cAAAAAElFTkSuQmCC);
		background-size: 100%;
	}
}




// 箭头 父容器必须 position: relative;
.aj-arrow {
	position: absolute;
	&:after , &:before {
		position: absolute;
		border: 5px solid transparent;
		content: ' ';
		height: 0;
		width: 0;
	}

	&.toTop {
		top: -1px;
		&:after {
			border-bottom-color: #fffce9;
			bottom: -1px;
		}

		&:before {
			border-bottom-color: #ffcc9e;
			bottom: 0;
		}
	}

	&.toBottom {
		bottom: -8px;
		&:after {
			border-top-color: #fffce9;
			bottom: -1px;
		}

		&:before {
			border-top-color: #ffcc9e;
			bottom: -2px;
		}
	}

	&.toLeft {
		left: -9px;
		&:after {
			top: 5px;
			border-right-color: #fffce9;
		}

		&:before {
			border-right-color: #ffcc9e;
			top: 5px;
			left: -2px;
		}
	}

	&.toRight {
		right: 0;
		&:after {
			top: 5px;
			border-left-color: #fffce9;
		}

		&:before {
			border-left-color: red;
			top: 5px;
		}
	}
}

.tipsNote {
	line-height: 20px;
	color: #ff865d;
	border: solid 1px #ffcc9e;
	background-color: #fffce9;
	padding: 8px 12px;
	width: 70%;
	border-radius: 3px;
	margin-top: 10px;
	font-size: .8rem;
	box-sizing: border-box;
	position: relative;
	text-align: left;
}

.single_tips , .tipsNote2 {
	position: fixed;
	background-color: #f5faff;
	border: 1px solid #0066cc;
	font-size: .9rem;
	border-radius: 3px;
	color: #0066cc;
	padding: 7px 12px 8px 12px;
	margin-left: 10px;
	.aj-arrow:after {
		border-right-color: #f5faff;
	}

	.aj-arrow:before {
		border-right-color: #0066cc;
	}
}

.aj-mask {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0, .5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}

.aj-tableList {
	header{
		background-color:#f7f8fa;
		font-weight:bold;
		margin-bottom:2%;
		&>div{
			display: inline-block;
			padding:1% 0;
			text-align:center;
		}
	}
	ul {
		li {
			padding:2% 0;
			border-bottom:1px solid #eee;
			font-size:.9rem;
			text-align: left;
			& > div {
				display: inline-block;
				vertical-align: top;
				text-align: center;
			}
		}
	}
	
	.aj-page-list footer{
		margin-top: 30px;
	}
}