@fcolor:#C31A00; .firbg(){ background: #C31A00; } .secbg(){ background: #F3F3F3; } .border(){ border: 1px solid rgba(0,0,0,.2); } .testbg(){ background: papayawhip; } .border-1px-bottom(@color){ position: relative; &:after{ display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid @color; content: ' '; } @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){ &:after{ -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } } @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ &:after{ -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){ &:after{ -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } } } .border-1px(@color){ position: relative; margin-bottom: 20px; border:none; &:after{ content: ''; position: absolute; top: 0; left: 0; border: 1px solid @color; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform-origin: left top; transform-origin: left top; } @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){ &:after{ -webkit-transform: scale(0.7); transform: scale(0.7); } } @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ &:after{ -webkit-transform: scale(0.5); transform: scale(0.5); } } @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){ &:after{ -webkit-transform: scale(0.33); transform: scale(0.33); } } } .border-none(){ &:after{ display: none; } } .flex-center(){ display: -webkit-box; display: -moz-box; display: -mz-flexbox; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; align-content: center; } .flex-center-between(){ display: -webkit-box; display: -moz-box; display: -mz-flexbox; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; align-content: center; } .flex-end(){ display: -webkit-box; display: -moz-box; display: -mz-flexbox; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; align-content: center; } .flex-empty(){ height:0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-image:none; border:none; &:after{ display: none; } } .flex-empty{ .flex-empty(); } .text-ellipsis(){ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-multi-ellipsis(@row){ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: @row; overflow: hidden; } .border-img(){ border:1px solid transparent; -webkit-border-image: url("../images/border-1px.png") .5 .5 .5 .5 stretch; border-image: url("../images/border-1px.png") .5 .5 .5 .5 stretch; } .clear(){ &:after{ content:""; display:block; clear:both; height:0; overflow:hidden; visibility:hidden; } zoom:1; } .lot-shadow(){ box-shadow: 0 0 10px 10px #fff,0 0 15px 15px #DADADA; border-radius: 50%; }