util.less 3.64 KB
/***************************************************
* feature  :  工具类class,提供浮动清除、文本对齐、显示隐藏等;
* update   :  2015/02/03;
* use      :  按需使用对应class即可;
* desc     :  ;
* feedback :  此处填入 issue, 并请附带以下信息[os_version, browser_version, page_path, issue_description]
*          -  demo => [windows 7, IE 8, http://diligrp.com/icon.html, 在不定height下未能垂直居中];
****************************************************/

//文本
.text-left{
	text-align: left !important;
}

.text-center{
	text-align: center !important;
}

.text-right{
	text-align: right !important;
}

.text-nowrap{
	white-space: nowrap !important;
}
.text-overflow{
	overflow: hidden;
	text-overflow: ellipsis;
}

//改变大小写
.text-lowercase{
	text-transform: lowercase;
}

.text-uppercase{
	text-transform: uppercase;
}

.text-capitalize{
	text-transform: capitalize;
}

//缩进
.text-indent{
	text-indent: -999em;
}

//浮动
.float-left{
	float: left !important;
}

.float-right{
	float: right !important;
}

.float-none{
	float: none !important;
}

.display-block{
	display: block !important;
}

//浮动清除
.clearfix:after{
	content: '';
	display: block;
	height: 0;
	overflow: hidden;
	font-size: 0;
	clear: both;
}

//可见性
.m-hide{
	display: none !important;
	visibility: hidden;
	opacity: 0;
	z-index: -1;
}

.m-hidden{
	visibility: hidden;
	opacity: 0;
	z-index: -1;
}

.m-show{
	display: block !important;
	visibility: visible;
}


//分割线
.m-separate{
	position: relative;
	width: 100%;
	line-height: 50px;
	text-align: center;
	font-size: 12px;
	color: #666;
	overflow: visible;
}

//more text
.m-more, a.m-more{
	display: block;
	font-size: 12px;
	text-align: center;
	color: #999;
	line-height: 45px;
	background-color: #FFF;
}

.m-animate-hide {
    // -webkit-transform: translate3d(0, 100%, 0);
    // -ms-transform: translate3d(0, 100%, 0);
    // -o-transform: translate3d(0, 100%, 0);
    // transform: translate3d(0, 100%, 0);
    -webkit-transform: translate(0, 100%)  translateZ(0)  !important;
    -ms-transform: translate(0, 100%)  translateZ(0)  !important;
    -o-transform: translate(0, 100%)  translateZ(0)  !important;
    transform: translate(0, 100%)  translateZ(0)  !important;
    // visibility: hidden;
}

.m-animate-show {
	-webkit-transform: translate(0, 0)  translateZ(0)  !important;
	-ms-transform: translate(0, 0)  translateZ(0)  !important;
	-o-transform: translate(0, 0)  translateZ(0)  !important;
	transform: translate(0, 0)  translateZ(0)  !important;

    // visibility: hidden;
}

.hidden{
	// visibility: hidden;
	opacity: 0;
	z-index: -1;
}
.mask-hidden{
	opacity: 0;
}

.font-white{
	color: #FFF !important;
}

.font-white-opacity{
	color: rgba(255, 255, 255, .8) !important;
}
.font-deep{
  color: #333 !important;
}
.font-gray{
	color: #666 !important;
}
.font-light{
	color: #999 !important;
}
.font-yellow{
	color: #FF9D2C !important;
}
.font-orange{
	color: #FF6B00 !important;
}
.font-red{
	color: #fa4535 !important;
}
.font-green{
	color: #23ac38 !important;
}

.background-white{
	background-color: #FFF;
}
.background-gray{
	background-color: #666 !important;
}
.background-yellow{
	background-color: #FF9D2C !important;
}
.background-orange{
	background-color: #FF6B00 !important;
}
.background-red{
	background-color: #fa4535 !important;
}
.background-green{
	background-color: #23ac38 !important;
}
.position-relative{
	position: relative;
}
.z-index2{
	z-index: 2;
}
.width-auto{
	width: auto !important;
}
.width-200p{
	width: 200%;
}

.m-col-1{
	width: 100% !important;
}
.m-col-2{
	width: 50% !important;
}
.m-col-3{
	width: 33.33% !important;
}
.m-col-4{
	width: 25% !important;
}