mixin.less

dsMixin.less

/* !DStyle Mixin 0.4v */
/**
 * 일부 오타수정
 * padding,margin영역 일부 mixin 삭제.
 */

/* variables */
@font-color:#333;
@font-size:1em;
@border-color:#ccc;

/* font */
.color(@rgb:@font-color){color:@rgb}
.size(@size){font-size:@font-size}
.weight(@weight){font-weight:@weight}
.letter(@letter){letter-spacing:@letter}
.indent(@indent){text-indent:@indent}
.family(@font){font-family:@font}

/* overflow , text-overflow */
.text-overflow(){.overflow();text-overflow:ellipsis;white-space:nowrap;zoom:1;}
.text-overflow(@wid){ .text-overflow();.inline-block();.max-w(@wid); }
.overflow(@type:hidden){overflow:@type;}


/* display */
.none(){display:none;}
.block(){display:block;}
.inline-block(){display:inline-block;}
.inline(){display:inline;}

/* position */
.zi(@zi){z-index:@zi;}
.posR(){position:relative;}
.posR (@zi) when (isNumber(@zi)) { .posR();.zi(@zi) }
.posR (@left,@top){.posR();left:@left;top:@top;}
.posR (@left,@top,@zi){.posR();left:@left;top:@top;.zi(@zi);}
.posA(){position:absolute;}
.posA (@zi) when (isNumber(@zi)) { .posA();.zi(@zi) }

/* background */
.bg(@color){.bgColor(@color);}
.bgColor(@color){background:@color;}
.bgUrl(@url,@col:left,@row:top,@repeat:no-repeat,@color:transparent){
	background-color:@color;
	background-image: url("@{url}");
	background-position:@col @row; 
	background-repeat:@repeat;
}
.bgColorUrl(@color,@url,@col:left,@row:top,@repeat:no-repeat){
	.bgUrl(@url,@col,@row,@repeat,@color);
}

/* border */
.b(@color:@border-color,@width:1px,@shape:solid){
	border:@width @shape @color;
}
.bt(@color:@border-color,@width:1px,@shape:solid){
	border-top:@width @shape @color;
}
.br(@color:@border-color,@width:1px,@shape:solid){
	border-right:@width @shape @color;
}
.bb(@color:@border-color,@width:1px,@shape:solid){
	border-bottom:@width @shape @color;
}
.bl(@color:@border-color,@width:1px,@shape:solid){
	border-left:@width @shape @color;
}

/* width , height */
.w(@w){width:@w;}
.h(@h){height:@h;}
.min-w(@w){min-width:@w;}
.min-h(@h){min-height:@h;}
.max-w(@w){max-width:@w;}
.max-h(@h){max-height:@h;}

/* padding */
.p(@p){padding:@p;}
// .p(@pt,@pr){padding:@pt @pr;} .p만으로 동작하여 삭제함 (v0.4)
// .p(@pt,@prl,@pb){padding:@pt @prl @pb;} .p만으로 동작하여 삭제함 (v0.4)
// .p(@pt,@pr,@pb,@pl){padding:@pt @pr @pb @pl;} .p만으로 동작하여 삭제함 (v0.4)
.pt(@px){padding-top:@px}
.pb(@px){padding-bottom:@px}
.pl(@px){padding-left:@px}
.pr(@px){padding-right:@px}


/* margin */
.m(@m){padding:@m;}
// .m(@mt,@mr){padding:@mt @mr;} .m만으로 동작하여 삭제함 (v0.4)
// .m(@mt,@mrl,@mb){padding:@mt @mrl @mb;} .m만으로 동작하여 삭제함 (v0.4)
// .m(@mt,@mr,@mb,@ml){padding:@mt @mr @mb @ml;} .m만으로 동작하여 삭제함 (v0.4)
.mt(@px){margin-top:@px}
.mb(@px){margin-bottom:@px}
.ml(@px){margin-left:@px}
.mr(@px){margin-right:@px}

/* align */
.cb(){margin-left:auto;margin-right:auto;} /* block center align */
.cb (@wid) when (ispixel(@wid)) { .cb();.w(@wid) }
.fl(){float:left;}
.fr(){float:right;}

.ta(@align:center){text-align:@align;}
.tl(){text-align:left;}
.tr(){text-align:right;}
.tc(){text-align:center;}
.tc(){text-align:center;}

.valign(@v:middle){vertical-align:@v;}


/* custom */
.icon(@url,@px){.bgUrl(@url,left,center);.pl(@px);}/* 아이콘일경우 */
.clearfix {*zoom: 1;&:before,&:after {display: table;content: "";line-height: 0;}&:after {clear: both;}} /* clearFix */
.clfix(){.clearfix();}
.sr-only {position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0,0,0,0);border: 0;} /* 웹접근성 스크린리더 코드 */
.tts {.sr-only();}
.opacity(@number){@num : @number * 100;opacity:@number;filter:alpha(opacity=@num); zoom:1;} /* 투명도 */