58 lines
1.4 KiB
Plaintext
58 lines
1.4 KiB
Plaintext
//mixin 공통으로 사용할 수 있는 범용적 css ========================================================
|
|
.flex(@display: flex, @justifyCenter: center, @alignCenter: center, @direction: row) {
|
|
display: @display;
|
|
justify-content: @justifyCenter;
|
|
align-items: @alignCenter;
|
|
flex-direction: @direction;
|
|
}
|
|
|
|
.focused(@boxShadow: 0px, @borderRadius: 0px) {
|
|
.position(@position: absolute, @top: 0, @left: 0, @right: 0, @bottom: 0);
|
|
border: 4px solid @PRIMARY_COLOR_RED;
|
|
box-shadow: 0 0 @boxShadow 0 rgba(0, 0, 0, 0.5);
|
|
border-radius: @borderRadius;
|
|
content: "";
|
|
}
|
|
|
|
.size(@w: 50px, @h: 50px) {
|
|
width: @w;
|
|
height: @h;
|
|
}
|
|
|
|
.position(@position: relative, @top: auto, @right: auto, @bottom: auto, @left: auto) {
|
|
position: @position;
|
|
top: @top;
|
|
right: @right;
|
|
bottom: @bottom;
|
|
left: @left;
|
|
}
|
|
|
|
//border-solid
|
|
.border-solid(@size, @color) {
|
|
border: @size solid @color;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
//font
|
|
.font (@fontFamily, @fontSize) {
|
|
font-family: @fontFamily;
|
|
font-size: @fontSize;
|
|
}
|
|
|
|
//말줄임
|
|
.elip(@clamp) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-break: break-word;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: @clamp;
|
|
}
|
|
|
|
//background 이미지 삽입
|
|
.imgElement (@backgroundW, @backgroundH, @positionX, @positionY) {
|
|
background-size: @backgroundW, @backgroundH;
|
|
background-repeat: no-repeat;
|
|
background-position: @positionX @positionY;
|
|
}
|