562 lines
9.6 KiB
SCSS
562 lines
9.6 KiB
SCSS
// 溢出隐藏。
|
||
.overflow {
|
||
overflow: hidden;
|
||
}
|
||
.show{
|
||
visibility:visible;
|
||
}
|
||
.hidden{
|
||
visibility:hidden;
|
||
}
|
||
.none{
|
||
display:none;
|
||
}
|
||
$v_position: (
|
||
relative: relative,
|
||
absolute: absolute,
|
||
fixed: fixed,
|
||
// sticky: sticky,
|
||
// static : static ,
|
||
);
|
||
|
||
@each $name,$key in $v_position {
|
||
.#{$name} {
|
||
position: $key ;
|
||
}
|
||
}
|
||
.fulled{
|
||
width:100%;
|
||
}
|
||
.fulled-height {
|
||
flex: 1;
|
||
}
|
||
|
||
|
||
|
||
|
||
@for $i from 0 through 26 {
|
||
.zIndex-#{$i} {
|
||
z-index: #{$i * 1};
|
||
}
|
||
.zIndex-n#{$i} {
|
||
z-index: #{$i * 4};
|
||
}
|
||
}
|
||
|
||
.text-overflow {
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
@for $i from 1 to 5 {
|
||
.text-overflow-#{$i} {
|
||
text-overflow: ellipsis;
|
||
lines: $i;
|
||
}
|
||
}
|
||
|
||
|
||
// 文本大小 。text-size-xs大小名称,xxs,xs,s,n,g,lg,xl
|
||
@each $name,$key in (xxs: 20rpx, xs: 22rpx, s: 24rpx, m: 28rpx, n: 30rpx, g: 34rpx, lg: 36rpx, xl: 40rpx) {
|
||
.text-size-#{$name} {
|
||
font-size: $key;
|
||
}
|
||
}
|
||
|
||
// 文本加粗text-weight-s,n,b
|
||
@each $name,$key in (s: 400, n: 400, b: 700) {
|
||
.text-weight-#{$name} {
|
||
font-weight: $key;
|
||
}
|
||
}
|
||
|
||
// 文本对齐 。text-align-left,right,center
|
||
@each $name,$key in (left: left, right: right, center: center) {
|
||
.text-align-#{$name} {
|
||
text-align: $key;
|
||
}
|
||
}
|
||
|
||
// 圆角半径
|
||
// 圆角说明 round-方向-大小。
|
||
// tl，顶左，tr顶右。bt底左，br底右。a全部。t:顶左和顶右，b:底左和底右，l:顶左和底左，r:顶右，底右。
|
||
@each $name,$key in (tl: 'tl', tr: 'tr', bl: 'bl', br: 'br', a: 'a', t: 't', b: 'b', l: 'l', r: 'r') {
|
||
@for $i from 0 to 26 {
|
||
.round-#{$name}-#{$i} {
|
||
@if $key=='tl' {
|
||
border-top-left-radius: #{$i * 2}rpx;
|
||
}
|
||
|
||
@if $key=='tr' {
|
||
border-top-right-radius: #{$i * 2}rpx;
|
||
}
|
||
|
||
@if $key=='bl' {
|
||
border-bottom-left-radius: #{$i * 2}rpx;
|
||
}
|
||
|
||
@if $key=='br' {
|
||
border-bottom-right-radius: #{$i * 2}rpx;
|
||
}
|
||
|
||
@if $key=='t' {
|
||
border-top-left-radius: #{$i * 2}rpx;
|
||
border-top-right-radius: #{$i * 2}rpx;
|
||
}
|
||
|
||
@if $key=='b' {
|
||
border-bottom-left-radius: #{$i * 2}rpx;
|
||
border-bottom-right-radius: #{$i * 2}rpx;
|
||
}
|
||
|
||
@if $key=='l' {
|
||
border-top-left-radius: #{$i * 2}rpx;
|
||
border-bottom-left-radius: #{$i * 2}rpx;
|
||
}
|
||
|
||
@if $key=='r' {
|
||
border-top-right-radius: #{$i * 2}rpx;
|
||
border-bottom-right-radius: #{$i * 2}rpx;
|
||
}
|
||
|
||
@if $key=='a' {
|
||
border-radius: #{$i * 2}rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 从0-100的圆角round-数字
|
||
@for $i from 0 through 26 {
|
||
.round-#{$i} {
|
||
border-radius: #{$i * 2}rpx;
|
||
}
|
||
|
||
}
|
||
|
||
/** 0-20表示的是1.0~3.0之间的行高 */
|
||
@for $i from 0 through 21 {
|
||
.line-#{$i}{
|
||
line-height: #{$i / 10 + 1};
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// 透明度opacity-[1-10]
|
||
@for $i from 0 to 11 {
|
||
.opacity-#{$i} {
|
||
@if $i>0 and $i<10 {
|
||
opacity: $i / 10;
|
||
}
|
||
|
||
@if $i==0 {
|
||
opacity: 0;
|
||
}
|
||
|
||
@if $i==10 {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 添加边线 最大5
|
||
@for $i from 0 to 6 {
|
||
@if $i==0 {
|
||
.border-0 {
|
||
border:0rpx solid #f5f5f5;
|
||
}
|
||
|
||
.border {
|
||
border:2rpx solid #f5f5f5;
|
||
}
|
||
|
||
}
|
||
|
||
@if $i>0 {
|
||
.border-#{$i} {
|
||
border:#{$i * 2}rpx solid #f5f5f5;
|
||
}
|
||
|
||
.border-#{$i}-bk {
|
||
border:#{$i * 2}rpx solid #f5f5f5;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 边线格式1：border-方向t,r,l,b-宽度
|
||
@each $name,$key in (l: 'left', r: 'right', t: 'top', b: 'bottom', a: 'a') {
|
||
@for $i from 1 to 6 {
|
||
.border-#{$name}-#{$i} {
|
||
@if $key=='a' {
|
||
border:#{$i * 2}rpx solid opacify($color: #f5f5f5, $amount: 1);
|
||
}
|
||
|
||
@if $key !='a' {
|
||
border-#{$key}:#{$i * 2}rpx solid opacify($color: #f5f5f5, $amount: 1);
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
// 内间距。p[a,t,r,b,l,x,y]如：pa表示所有边距，px:左右，py:上下,pr:右边距
|
||
@each $name,$key in (a: 'padding', t: 'padding-top', r: 'padding-right', b: 'padding-bottom', l: 'padding-left', x: 'x', y: 'y') {
|
||
@for $i from 0 to 51 {
|
||
@if $key !='x' and $key !='y' {
|
||
.p#{$name}-#{$i} {
|
||
#{$key}: #{$i}rpx;
|
||
}
|
||
}
|
||
|
||
@if $key=='x' {
|
||
.px-#{$i} {
|
||
padding-left: #{$i}rpx;
|
||
padding-right: #{$i}rpx;
|
||
}
|
||
}
|
||
|
||
@if $key=='y' {
|
||
.py-#{$i} {
|
||
padding-top: #{$i}rpx;
|
||
padding-bottom: #{$i}rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
@for $i from 1 to 26 {
|
||
@if $key !='x' and $key !='y' {
|
||
.p#{$name}-n#{$i} {
|
||
#{$key}: #{$i * 4}rpx;
|
||
}
|
||
}
|
||
|
||
@if $key=='x' {
|
||
.px-n#{$i} {
|
||
padding-left: #{$i * 4}rpx;
|
||
padding-right: #{$i * 4}rpx;
|
||
}
|
||
}
|
||
|
||
@if $key=='y' {
|
||
.py-n#{$i} {
|
||
padding-top: #{$i * 4}rpx;
|
||
padding-bottom: #{$i * 4}rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 外间距。m[a,t,r,b,l,x,y]如：ma表示所有外边距，mx:左右，my:上下,mr:右边距
|
||
@each $name,$key in (a: 'margin', t: 'margin-top', r: 'margin-right', b: 'margin-bottom', l: 'margin-left', x: 'x', y: 'y') {
|
||
@for $i from 0 to 51 {
|
||
@if $key !='x' and $key !='y' {
|
||
.m#{$name}-#{$i} {
|
||
#{$key}: #{$i}rpx;
|
||
}
|
||
|
||
@if $key !='margin' {
|
||
.m#{$name}--#{$i} {
|
||
#{$key}: -#{$i}rpx;
|
||
}
|
||
}
|
||
}
|
||
@if $key=='x' {
|
||
.mx-#{$i} {
|
||
margin-left: #{$i}rpx;
|
||
margin-right: #{$i}rpx;
|
||
}
|
||
}
|
||
|
||
@if $key=='y' {
|
||
.my-#{$i} {
|
||
margin-top: #{$i}rpx;
|
||
margin-bottom: #{$i}rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
@for $i from 1 to 26 {
|
||
@if $key !='x' and $key !='y' {
|
||
.m#{$name}-n#{$i} {
|
||
#{$key}: #{$i * 4}rpx;
|
||
}
|
||
|
||
@if $key !='margin' {
|
||
.m#{$name}--n#{$i} {
|
||
#{$key}: -#{$i * 4}rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
@if $key=='x' {
|
||
.mx-n#{$i} {
|
||
margin-left: #{$i * 4}rpx;
|
||
margin-right: #{$i * 4}rpx;
|
||
}
|
||
}
|
||
|
||
@if $key=='y' {
|
||
.my-n#{$i} {
|
||
margin-top: #{$i * 4}rpx;
|
||
margin-bottom: #{$i * 4}rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 位置。
|
||
@each $name,$key in (t: 'top', r: 'right', b: 'bottom', l: 'left') {
|
||
@for $i from 0 to 51 {
|
||
.#{$name}-#{$i} {
|
||
#{$key}: #{$i}rpx;
|
||
}
|
||
|
||
.#{$name}--#{$i} {
|
||
#{$key}: -#{$i}rpx;
|
||
}
|
||
}
|
||
|
||
@for $i from 1 to 26 {
|
||
.#{$name}-n#{$i} {
|
||
#{$key}: #{$i * 4}rpx;
|
||
}
|
||
|
||
.#{$name}--n#{$i} {
|
||
#{$key}: -#{$i * 4}rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Flex辅助。
|
||
@mixin dsplay-flex($justify, $items, $content) {
|
||
justify-content: $justify;
|
||
align-items: $items ;
|
||
display: flex;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.flex-col {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.flex-wrap {
|
||
flex-flow: row wrap;
|
||
}
|
||
|
||
.flex-shrink {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.flex-row {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.flex-reverse {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
//row模式下，上左对齐
|
||
.flex-row-top-start {
|
||
@include dsplay-flex(flex-start, flex-start, center);
|
||
}
|
||
|
||
//row模式下，上中对齐
|
||
.flex-row-top-center {
|
||
@include dsplay-flex(center, flex-start, center);
|
||
}
|
||
|
||
//row模式下，上右对齐
|
||
.flex-row-top-end {
|
||
@include dsplay-flex(flex-end, flex-start, center);
|
||
}
|
||
|
||
//row模式下，中左对齐
|
||
.flex-row-center-start {
|
||
@include dsplay-flex(flex-start, center, center);
|
||
}
|
||
|
||
//row模式下，中中对齐
|
||
.flex-row-center-center {
|
||
@include dsplay-flex(center, center, center);
|
||
}
|
||
|
||
//row模式下，上右对齐
|
||
.flex-row-center-end {
|
||
@include dsplay-flex(flex-end, center, center);
|
||
}
|
||
|
||
//row模式下，下左对齐
|
||
.flex-row-bottom-start {
|
||
@include dsplay-flex(flex-start, flex-end, center);
|
||
}
|
||
|
||
//row模式下，下中对齐
|
||
.flex-row-bottom-center {
|
||
@include dsplay-flex(center, flex-end, center);
|
||
}
|
||
|
||
//row模式下，下右对齐
|
||
.flex-row-bottom-end {
|
||
@include dsplay-flex(flex-end, flex-end, center);
|
||
}
|
||
|
||
//上下居中，两边对齐。
|
||
.flex-row-center-between {
|
||
@include dsplay-flex(space-between, center, center);
|
||
}
|
||
|
||
//--------
|
||
//col模式下，上左对齐
|
||
.flex-col-top-start {
|
||
@include dsplay-flex(flex-start, flex-start, center);
|
||
}
|
||
|
||
//col模式下，上中对齐
|
||
.flex-col-top-center {
|
||
@include dsplay-flex(flex-start, center, center);
|
||
}
|
||
|
||
//col模式下，上右对齐
|
||
.flex-col-top-end {
|
||
@include dsplay-flex(flex-start, flex-end, center);
|
||
}
|
||
|
||
//col模式下，中左对齐
|
||
.flex-col-center-start {
|
||
@include dsplay-flex(center, flex-start, center);
|
||
}
|
||
|
||
//col模式下，中中对齐
|
||
.flex-col-center-center {
|
||
@include dsplay-flex(center, center, center);
|
||
}
|
||
|
||
//col模式下，上右对齐
|
||
.flex-col-center-end {
|
||
@include dsplay-flex(center, flex-end, center);
|
||
}
|
||
|
||
//col模式下，下左对齐
|
||
.flex-col-bottom-start {
|
||
@include dsplay-flex(flex-end, flex-start, center);
|
||
}
|
||
|
||
//col模式下，下中对齐
|
||
.flex-col-bottom-center {
|
||
@include dsplay-flex(flex-end, center, center);
|
||
}
|
||
|
||
//col模式下，下右对齐
|
||
.flex-col-bottom-end {
|
||
@include dsplay-flex(flex-end, flex-end, center);
|
||
}
|
||
|
||
//-----------
|
||
|
||
// row居中左对齐
|
||
.flex-start {
|
||
@include dsplay-flex(flex-start, center, center);
|
||
}
|
||
|
||
// row居中右对齐
|
||
.flex-end {
|
||
@include dsplay-flex(flex-end, center, center);
|
||
}
|
||
|
||
// col,row上下左右居中对齐
|
||
.flex-center {
|
||
@include dsplay-flex(center, center, center);
|
||
}
|
||
|
||
// col,row两端对齐
|
||
.flex-between {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
//横向的内容在col模式一睥100%宽，与flex-1中的flex-row是功能一样。
|
||
.flex-col-full {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
// col,row居中等分对齐
|
||
.flex-around {
|
||
justify-content: space-around;
|
||
}
|
||
|
||
@for $i from 0 through 12 {
|
||
.flex-#{$i} {
|
||
flex: $i ;
|
||
}
|
||
}
|
||
|
||
|
||
$colorsDefault: (
|
||
'grey': #9e9e9e,
|
||
'black': #000000,
|
||
'white': #ffffff,
|
||
'lighten-5': #fafafa,
|
||
'lighten-4': #f5f5f5,
|
||
'lighten-3': #eeeeee,
|
||
'lighten-2': #e0e0e0,
|
||
'lighten-1': #bdbdbd,
|
||
'darken-1': #757575,
|
||
'darken-2': #616161,
|
||
'darken-3': #424242,
|
||
'darken-4': #212121,
|
||
'darken-5': #131313,
|
||
'darken-6': #0a0a0a
|
||
);
|
||
$colors: (
|
||
'red': #f44336,
|
||
'pink': #e91e63,
|
||
'purple': #9c27b0,
|
||
'deep-purple': #673ab7,
|
||
'indigo': #3f51b5,
|
||
'blue': #2196f3,
|
||
'light-blue': #03a9f4,
|
||
'cyan': #00bcd4,
|
||
'teal': #009688,
|
||
'green': #4caf50,
|
||
'light-green': #8bc34a,
|
||
'lime': #cddc39,
|
||
'yellow': #ffeb3b,
|
||
'amber': #ffc107,
|
||
'orange': #ff9800,
|
||
'deep-orange': #ff5722,
|
||
'brown': #795548,
|
||
'blue-grey': #607d8b,
|
||
'primary':#0088ff,
|
||
'success': #34c759,
|
||
'danger': #ff8d28,
|
||
'warn': #F3BF12,
|
||
'error': #ff383c,
|
||
'info': #f2f2f7
|
||
);
|
||
|
||
// 文本颜色。text-颜色名
|
||
@each $name,$color in $colors {
|
||
.text-#{$name} {
|
||
color: $color ;
|
||
}
|
||
|
||
.#{$name} {
|
||
background-color: $color;
|
||
}
|
||
}
|
||
|
||
@each $name,$color in $colorsDefault {
|
||
.text-#{$name} {
|
||
color: $color ;
|
||
}
|
||
|
||
.#{$name} {
|
||
background-color: $color;
|
||
}
|
||
}
|
||
|
||
|