.flex-auto {
|
flex: 1;
|
overflow: hidden;
|
}
|
|
.flex-0 {
|
flex: 0 0 auto;
|
}
|
|
.flex-center {
|
justify-content: center;
|
align-items: center;
|
}
|
|
.flex-items-center {
|
display: flex;
|
align-items: center;
|
}
|
|
.flex-justify-center {
|
display: flex;
|
justify-content: center;
|
}
|
|
/* 单行文本溢出显示省略号
|
--------------------------------------------------------- */
|
.over-ellipsis {
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
}
|
/* 多行文本溢出显示省略号，需要指定行数
|
--------------------------------------------------------- */
|
.over-ellisis-2{
|
display: -webkit-box;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
word-break: break-all;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
}
|
.over-ellisis-3{
|
display: -webkit-box;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
word-break: break-all;
|
-webkit-box-orient: vertical;
|
// -webkit-line-clamp: 3;
|
}
|
|
/* 字体大小全局样式
|
------------------------------- */
|
@for $i from 10 through 60 {
|
.font#{$i} {
|
font-size: #{$i}rpx !important;
|
}
|
}
|
|
/* 外边距、内边距全局样式
|
------------------------------- */
|
@for $i from 1 through 35 {
|
.m-#{$i} {
|
margin: #{$i}rpx !important;
|
}
|
|
.mx-#{$i} {
|
margin-left: #{$i}rpx !important;
|
margin-right: #{$i}rpx !important;
|
}
|
|
.my-#{$i} {
|
margin-top: #{$i}rpx !important;
|
margin-bottom: #{$i}rpx !important;
|
}
|
|
.mt-#{$i} {
|
margin-top: #{$i}rpx !important;
|
}
|
|
.mr-#{$i} {
|
margin-right: #{$i}rpx !important;
|
}
|
|
.mb-#{$i} {
|
margin-bottom: #{$i}rpx !important;
|
}
|
|
.ml-#{$i} {
|
margin-left: #{$i}rpx !important;
|
}
|
|
.p-#{$i} {
|
padding: #{$i}rpx !important;
|
}
|
|
.px-#{$i} {
|
padding-left: #{$i}rpx !important;
|
padding-right: #{$i}rpx !important;
|
}
|
|
.py-#{$i} {
|
padding-top: #{$i}rpx !important;
|
padding-bottom: #{$i}rpx !important;
|
}
|
|
.pt-#{$i} {
|
padding-top: #{$i}rpx !important;
|
}
|
|
.pr-#{$i} {
|
padding-right: #{$i}rpx !important;
|
}
|
|
.pb-#{$i} {
|
padding-bottom: #{$i}rpx !important;
|
}
|
|
.pl-#{$i} {
|
padding-left: #{$i}rpx !important;
|
}
|
|
// .space-x-#{$i} > * + * {
|
// margin-left: #{$i}rpx;
|
// }
|
|
// .space-y-#{$i} > * + * {
|
// margin-left: #{$i}rpx;
|
// }
|
}
|
|
$percent-steps: (10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%);
|
|
@for $i from 1 through length($percent-steps) {
|
$percent: nth($percent-steps, $i);
|
|
.w-p-#{$i * 10} {
|
width: $percent;
|
}
|
|
.h-p-#{$i * 10} {
|
height: $percent;
|
}
|
}
|
|
@for $i from 0 through 140 {
|
.w-#{$i * 5} {
|
width: #{$i * 5}rpx;
|
}
|
|
.h-#{$i * 5} {
|
height: #{$i * 5}rpx;
|
}
|
|
.size-#{$i * 5} {
|
width: #{$i * 5}rpx;
|
height: #{$i * 5}rpx;
|
}
|
|
.m-#{$i * 5} {
|
margin: #{$i * 5}rpx !important;
|
}
|
|
.mx-#{$i * 5} {
|
margin-left: #{$i * 5}rpx !important;
|
margin-right: #{$i * 5}rpx !important;
|
}
|
|
.my-#{$i * 5} {
|
margin-top: #{$i * 5}rpx !important;
|
margin-bottom: #{$i * 5}rpx !important;
|
}
|
|
.mt-#{$i * 5} {
|
margin-top: #{$i * 5}rpx !important;
|
}
|
|
.mr-#{$i * 5} {
|
margin-right: #{$i * 5}rpx !important;
|
}
|
|
.mb-#{$i * 5} {
|
margin-bottom: #{$i * 5}rpx !important;
|
}
|
|
.ml-#{$i * 5} {
|
margin-left: #{$i * 5}rpx !important;
|
}
|
|
.p-#{$i * 5} {
|
padding: #{$i * 5}rpx !important;
|
}
|
|
.px-#{$i * 5} {
|
padding-left: #{$i * 5}rpx !important;
|
padding-right: #{$i * 5}rpx !important;
|
}
|
|
.py-#{$i * 5} {
|
padding-top: #{$i * 5}rpx !important;
|
padding-bottom: #{$i * 5}rpx !important;
|
}
|
|
.pt-#{$i * 5} {
|
padding-top: #{$i * 5}rpx !important;
|
}
|
|
.pr-#{$i * 5} {
|
padding-right: #{$i * 5}rpx !important;
|
}
|
|
.pb-#{$i * 5} {
|
padding-bottom: #{$i * 5}rpx !important;
|
}
|
|
.pl-#{$i * 5} {
|
padding-left: #{$i * 5}rpx !important;
|
}
|
|
.top-#{$i * 5} {
|
top: #{$i * 5}rpx !important;
|
}
|
|
.left-#{$i * 5} {
|
left: #{$i * 5}rpx !important;
|
}
|
|
.right-#{$i * 5} {
|
right: #{$i * 5}rpx !important;
|
}
|
|
.bottom-#{$i * 5} {
|
bottom: #{$i * 5}rpx !important;
|
}
|
|
|
.-top-#{$i * 5} {
|
top:- #{$i * 5}rpx !important;
|
}
|
|
.-left-#{$i * 5} {
|
left: -#{$i * 5}rpx !important;
|
}
|
|
.-right-#{$i * 5} {
|
right: -#{$i * 5}rpx !important;
|
}
|
|
.-bottom-#{$i * 5} {
|
bottom: -#{$i * 5}rpx !important;
|
}
|
}
|
