203 lines
3.9 KiB
Plaintext
203 lines
3.9 KiB
Plaintext
/*================变量==================*/
|
|
@primary-color: #C52733;
|
|
@dark-color: #333333;
|
|
@white-color: #fff;
|
|
|
|
@colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999, #E92727, #FFC543, #69C573;
|
|
@classnames: primary, dark, white, secondary-dark, grey, dark1, red, yellow, success;
|
|
/*=====================================*/
|
|
|
|
each(@colors, {
|
|
@color: extract(@colors, @index);
|
|
@classname: extract(@classnames, @index);
|
|
.v12-@{classname} {
|
|
background-color: @color !important;
|
|
background: @color !important;
|
|
}
|
|
.v12-@{classname}-text{
|
|
color: @color !important;
|
|
}
|
|
.v12-@{classname}-border{
|
|
border: 1px solid @color !important;
|
|
}
|
|
});
|
|
|
|
/*===================字体大小======================*/
|
|
.generateFontSize(@i) when (@i <= 80) {
|
|
.v12-font-@{i} {
|
|
font-size: @i * 1rpx !important;
|
|
}
|
|
.generateFontSize(@i + 2);
|
|
}
|
|
|
|
.generateFontSize(0);
|
|
|
|
.v12-font-bold{
|
|
font-weight: bold !important;
|
|
}
|
|
.generateFontWeight(@n, @i: 100) when (@i <= @n) {
|
|
.v12-font-weight-@{i} {
|
|
font-weight: @i !important;
|
|
}
|
|
.generateFontWeight(@n, (@i + 100))
|
|
}
|
|
.generateFontWeight(900);
|
|
|
|
/*==================内外边距====================*/
|
|
.generateMarginAndPadding(@n, @i:0) when (@i<= @n) {
|
|
@baseNum: @i * 8rpx;
|
|
.v12-mt-@{i} {
|
|
margin-top: @baseNum;
|
|
}
|
|
.v12-ml-@{i} {
|
|
margin-left: @baseNum;
|
|
}
|
|
.v12-mr-@{i} {
|
|
margin-right: @baseNum;
|
|
}
|
|
.v12-mb-@{i} {
|
|
margin-bottom: @baseNum;
|
|
}
|
|
.v12-ma-@{i} {
|
|
margin-left: @baseNum;
|
|
margin-right: @baseNum;
|
|
margin-bottom: @baseNum;
|
|
margin-top: @baseNum;
|
|
}
|
|
.v12-mx-@{i} {
|
|
margin-left: @baseNum;
|
|
margin-right: @baseNum;
|
|
}
|
|
.v12-my-@{i} {
|
|
margin-bottom: @baseNum;
|
|
margin-top: @baseNum;
|
|
}
|
|
.v12-pt-@{i} {
|
|
padding-top: @baseNum;
|
|
}
|
|
.v12-pl-@{i} {
|
|
padding-left: @baseNum;
|
|
}
|
|
.v12-pr-@{i} {
|
|
padding-right: @baseNum;
|
|
}
|
|
.v12-pb-@{i} {
|
|
padding-bottom: @baseNum;
|
|
}
|
|
.v12-pa-@{i} {
|
|
padding-top: @baseNum;
|
|
padding-bottom: @baseNum;
|
|
padding-right: @baseNum;
|
|
padding-left: @baseNum;
|
|
}
|
|
.v12-px-@{i} {
|
|
padding-right: @baseNum;
|
|
padding-left: @baseNum;
|
|
}
|
|
.v12-py-@{i} {
|
|
padding-top: @baseNum;
|
|
padding-bottom: @baseNum;
|
|
}
|
|
.generateMarginAndPadding(@n, (@i + 1))
|
|
}
|
|
.generateMarginAndPadding(40);
|
|
|
|
/*==================圆角====================*/
|
|
.generateRadius(@n, @i: 0) when (@i <= @n) {
|
|
@baseRadius: @i * 1rpx;
|
|
.v12-radius-@{i} {
|
|
border-radius: @baseRadius !important;
|
|
}
|
|
.generateRadius(@n, (@i + 1))
|
|
}
|
|
.generateRadius(100);
|
|
/*=========================================*/
|
|
|
|
.generateSpacing(@n, @i: 0) when(@i <= @n) {
|
|
@baseSpacing:@i * 1rpx;
|
|
.v12-spacing-@{i} {
|
|
letter-spacing: @baseSpacing !important;
|
|
}
|
|
.generateSpacing(@n, (@i + 1))
|
|
}
|
|
.generateSpacing(100);
|
|
/*====================flex 函数表达式=====================*/
|
|
|
|
.v12-d-flex{
|
|
display: flex !important;
|
|
}
|
|
.v12-flex-column {
|
|
flex-direction: column;
|
|
}
|
|
.v12-align-center{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.v12-align-start{
|
|
display: flex;
|
|
align-items: start;
|
|
}
|
|
.v12-align-end{
|
|
display: flex;
|
|
align-items: end;
|
|
}
|
|
.v12-align-baseline{
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
.v12-justify-center{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.v12-justify-around{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.v12-justify-between{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.v12-justify-start{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
.v12-justify-end{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
.v12-d-grid-columns-2 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.v12-gap-10{
|
|
grid-gap: 20rpx 20rpx;
|
|
}
|
|
|
|
.v12-text-right{
|
|
text-align: right;
|
|
}
|
|
.v12-text-left{
|
|
text-align: left;
|
|
}
|
|
.v12-text-center{
|
|
text-align: center;
|
|
}
|
|
.v12-btn{
|
|
width: 136rpx;
|
|
height: 50rpx;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
border-radius: 50rpx;
|
|
color: #fff;
|
|
font-size: 27rpx;
|
|
}
|
|
.v12-full-width{
|
|
width: 100%;
|
|
}
|
|
.v12-nowrap{
|
|
white-space: nowrap
|
|
}
|
|
|
|
|
|
|