scss公共样式

// 颜色
$fault: #F8B62D;
$alarm: #8D6DFF;
$fire: #E74E4E;
$normal: #C0C4CC;
$online: #39B54A;
$offline: #999999;
$highlight: #4A79EE;

// 宽度
$px0: 0px;
$px1: 1px;
$px2: 2px;
$px3: 3px;
$px4: 4px;
$px5: 5px;
$px6: 6px;
$px7: 7px;
$px8: 8px;
$px9: 9px;
$px10: 10px;
$px12: 12px;
$px13: 13px;
$px14: 14px;
$px15: 15px;
$px16: 16px;
$px17: 17px;
$px18: 18px;
$px19: 19px;
$px20: 20px;
$px21: 21px;
$px22: 22px;
$px23: 23px;
$px24: 24px;
$px25: 25px;
$px26: 26px;
$px27: 27px;
$px28: 28px;
$px29: 29px;
$px30: 30px;
$px31: 31px;
$px32: 32px;
$px33: 33px;
$px34: 34px;
$px35: 35px;
$px36: 36px;
$px37: 37px;
$px38: 38px;
$px39: 39px;
$px40: 40px;
$px50: 50px;
$px100: 100px;
$px200: 200px;
$px300: 300px;
$px400: 400px;
$px500: 500px;
$px1000: 1000px;

$dashed: "dashed";
$solid: "solid";

// 边距 margin
.margin-0 {
    margin: $px0;
}

.margin-5 {
    margin: $px5;
}

.margin-10 {
    margin: $px10
}

.margin-12 {
    margin: $px12
}

.margin-15 {
    margin: $px15
}

.margin-20 {
    margin: $px20
}

// margin-top
.margin-top-5 {
    margin-top: $px5;
}

.margin-top-10 {
    margin-top: $px10
}

.margin-top-12 {
    margin-top: $px12
}

.margin-top-15 {
    margin-top: $px15
}

.margin-top-20 {
    margin-top: $px20
}

// margin-right
.margin-right-5 {
    margin-right: $px5;
}

.margin-right-10 {
    margin-right: $px10
}

.margin-right-12 {
    margin-right: $px12
}

.margin-right-15 {
    margin-right: $px15
}

.margin-right-20 {
    margin-right: $px20
}

// margin-bottom
.margin-bottom-5 {
    margin-bottom: $px5;
}

.margin-bottom-10 {
    margin-bottom: $px10
}

.margin-bottom-12 {
    margin-bottom: $px12
}

.margin-bottom-15 {
    margin-bottom: $px15
}

.margin-bottom-20 {
    margin-bottom: $px20
}

// margin-left
.margin-left-5 {
    margin-left: $px5;
}

.margin-left-10 {
    margin-left: $px10
}

.margin-left-12 {
    margin-left: $px12
}

.margin-left-15 {
    margin-left: $px15
}

.margin-left-20 {
    margin-left: $px20
}

// 边距 padding
.padding-0 {
    padding: $px0;
}

.padding-5 {
    padding: $px5;
}

.padding-10 {
    padding: $px10
}

.padding-12 {
    padding: $px12
}

.padding-15 {
    padding: $px15
}

.padding-20 {
    padding: $px20
}

// padding-top
.padding-top-5 {
    padding-top: $px5;
}

.padding-top-10 {
    padding-top: $px10
}

.padding-top-12 {
    padding-top: $px12
}

.padding-top-15 {
    padding-top: $px15
}

.padding-top-20 {
    padding-top: $px20
}

// padding-right
.padding-right-5 {
    padding-right: $px5;
}

.padding-right-10 {
    padding-right: $px10
}

.padding-right-12 {
    padding-right: $px12
}

.padding-right-15 {
    padding-right: $px15
}

.padding-right-20 {
    padding-right: $px20
}

// padding-bottom
.padding-bottom-5 {
    padding-bottom: $px5;
}

.padding-bottom-10 {
    padding-bottom: $px10
}

.padding-bottom-12 {
    padding-bottom: $px12
}

.padding-bottom-15 {
    padding-bottom: $px15
}

.padding-bottom-20 {
    padding-bottom: $px20
}

// padding-left
.padding-left-5 {
    padding-left: $px5;
}

.padding-left-10 {
    padding-left: $px10
}

.padding-left-12 {
    padding-left: $px12
}

.padding-left-15 {
    padding-left: $px15
}

.padding-left-20 {
    padding-left: $px20
}

// 对齐方式
.text-align-left {
    text-align: left;
}

.text-align-center {
    text-align: center;
}

.text-align-right {
    text-align: right;
}

.vertical-align-top {
    vertical-align: top;
}

.vertical-align-middle {
    vertical-align: middle;
}

.vertical-align-bottom {
    vertical-align: bottom;
}



/* 字体大小 */
.font-size-12 {
    font-size: $px12;
}

.font-size-14 {
    font-size: $px14;
}

.font-size-16 {
    font-size: $px16;
}

.font-size-18 {
    font-size: $px18;
}

.font-size-20 {
    font-size: $px20;
}

.font-size-22 {
    font-size: $px22;
}

.font-size-24 {
    font-size: $px24;
}

/* 字体颜色 */
.color-fault {
    color: $fault;
}

.color-alarm {
    color: $alarm;
}

.color-fire {
    color: $fire;
}

.color-normal {
    color: $normal;
}

.color-online {
    color: $online;
}

.color-offline {
    color: $offline;
}

.color-highlight {
    color: $highlight;
}

/* 背景颜色 */
.background-fault {
    background-color: $fault;
}

.background-alarm {
    background-color: $alarm;
}

.background-fire {
    background-color: $fire;
}

.background-normal {
    background-color: $normal;
}

.background-online {
    background-color: $online;
}

.background-offline {
    background-color: $offline;
}

.background-highlight {
    background-color: $highlight;
}

// 边框宽度
.border-width-1 {
    border-width: $px1;
}

.border-width-2 {
    border-width: $px2;
}

.border-width-3 {
    border-width: $px13;
}

// 边框圆角
.border-radius-1 {
    border-radius: $px1;
}

.border-radius-2 {
    border-radius: $px2;
}

.border-radius-3 {
    border-radius: $px3;
}

.border-radius-5 {
    border-radius: $px5;
}

.border-radius-10 {
    border-radius: $px10;
}

// 边框颜色
.border-color-fault {
    color: $fault;
}

.border-color-alarm {
    color: $alarm;
}

.border-color-fire {
    color: $fire;
}

.border-color-normal {
    color: $normal;
}

.border-color-online {
    color: $online;
}

.border-color-offline {
    color: $offline;
}

.border-color-highlight {
    color: $highlight;
}

// 边框样式
.border-style-dashed {
    border-style: $dashed;
}

.border-style-solid {
    border-style: $solid;
}

// display
.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-3 {
    flex: 3;
}

.flex-4 {
    flex: 4;
}

.flex-5 {
    flex: 5;
}

// 
.direction-row {
    flex-direction: row;
}

.direction-row-reverse {
    flex-direction: row-reverse;
}

.direction-column {
    flex-direction: column;
}

.direction-column {
    flex-direction: column-reverse;
}

.wrap-nowrap {
    flex-wrap: nowrap;
}

.wrap-wrap {
    flex-wrap: wrap;
}

.wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-around {
    justify-content: space-around;
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-center {
    align-items: center;
}

.align-items-baseline {
    align-items: baseline;
}

.align-items-stretch {
    align-items: stretch;
}

.align-content-start {
    align-content: flex-start;
}

.align-content-end {
    align-content: flex-end;
}

.align-content-center {
    align-content: center;
}

.align-content-between {
    align-content: space-between;
}

.align-content-around {
    align-content: space-around;
}

.align-content-stretch {
    align-content: stretch;
}

// posotion
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

// top
.top-1 {
    top: $px1;
}

.top-2 {
    top: $px2;
}

.top-3 {
    top: $px3;
}

.top-4 {
    top: $px4;
}

.top-5 {
    top: $px5;
}

.top-6 {
    top: $px6;
}

.top-7 {
    top: $px7;
}

.top-8 {
    top: $px8;
}

.top-9 {
    top: $px9;
}

.top-10 {
    top: $px10;
}

.top-15 {
    top: $px15;
}

.top-20 {
    top: $px20;
}

.top-25 {
    top: $px25;
}

.top-30 {
    top: $px30;
}

// right
.right-1 {
    right: $px1;
}

.right-2 {
    right: $px2;
}

.right-3 {
    right: $px3;
}

.right-4 {
    right: $px4;
}

.right-5 {
    right: $px5;
}

.right-6 {
    right: $px6;
}

.right-7 {
    right: $px7;
}

.right-8 {
    right: $px8;
}

.right-9 {
    right: $px9;
}

.right-10 {
    right: $px10;
}

.right-15 {
    right: $px15;
}

.right-20 {
    right: $px20;
}

.right-25 {
    right: $px25;
}

.right-30 {
    right: $px30;
}

// bottom
.bottom-1 {
    bottom: $px1;
}

.bottom-2 {
    bottom: $px2;
}

.bottom-3 {
    bottom: $px3;
}

.bottom-4 {
    bottom: $px4;
}

.bottom-5 {
    bottom: $px5;
}

.bottom-6 {
    bottom: $px6;
}

.bottom-7 {
    bottom: $px7;
}

.bottom-8 {
    bottom: $px8;
}

.bottom-9 {
    bottom: $px9;
}

.bottom-10 {
    bottom: $px10;
}

.bottom-15 {
    bottom: $px15;
}

.bottom-20 {
    bottom: $px20;
}

.bottom-25 {
    bottom: $px25;
}

.bottom-30 {
    bottom: $px30;
}

// left
.left-1 {
    left: $px1;
}

.left-2 {
    left: $px2;
}

.left-3 {
    left: $px3;
}

.left-4 {
    left: $px4;
}

.left-5 {
    left: $px5;
}

.left-6 {
    left: $px6;
}

.left-7 {
    left: $px7;
}

.left-8 {
    left: $px8;
}

.left-9 {
    left: $px9;
}

.left-10 {
    left: $px10;
}

.left-15 {
    left: $px15;
}

.left-20 {
    left: $px20;
}

.left-25 {
    left: $px25;
}

.left-30 {
    left: $px30;
}