@import "./variables";
|
|
// 全局样式
|
* {
|
margin: 0;
|
padding: 0;
|
list-style-type: none;
|
outline: none;
|
box-sizing: border-box;
|
}
|
|
html {
|
margin: 0;
|
padding: 0;
|
}
|
|
body {
|
font-family: Arial, Helvetica, sans-serif;
|
line-height: 1.2em;
|
background-color: #f1f1f1;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
|
a {
|
color: #343440;
|
text-decoration: none;
|
}
|
|
.clearfix {
|
&::after {
|
content: "";
|
display: table;
|
height: 0;
|
line-height: 0;
|
visibility: hidden;
|
clear: both;
|
}
|
}
|
|
//浮动
|
.float-r {
|
float: right;
|
}
|
|
//浮动
|
.float-l {
|
float: left;
|
}
|
|
// 字体加粗
|
.fw-b {
|
font-weight: bold;
|
}
|
|
//文章一行显示，多余省略号显示
|
.title-item {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.bg-color-black {
|
background-color: rgba(19, 25, 47, 0.6);
|
}
|
|
.bg-color-blue {
|
background-color: #0f1325;
|
}
|
|
.colorBlack {
|
color: #272727 !important;
|
|
&:hover {
|
color: #272727 !important;
|
}
|
}
|
|
.colorGrass {
|
color: #33cea0;
|
|
&:hover {
|
color: #33cea0 !important;
|
}
|
}
|
|
.colorRed {
|
color: #ff5722;
|
|
&:hover {
|
color: #ff5722 !important;
|
}
|
}
|
|
.colorText {
|
color: #d3d6dd !important;
|
|
&:hover {
|
color: #d3d6dd !important;
|
}
|
}
|
|
.colorBlue {
|
color: #257dff !important;
|
|
&:hover {
|
color: #257dff !important;
|
}
|
}
|
|
//颜色
|
@each $colorkey, $color in $colors {
|
.text-#{$colorkey} {
|
color: $color;
|
}
|
|
.bg-#{$colorkey} {
|
background-color: $color;
|
}
|
}
|
|
//对齐
|
@each $var in (left, center, right) {
|
.text-#{$var} {
|
text-align: $var !important;
|
}
|
}
|
|
//flex
|
@each $key, $value in $flex-jc {
|
.jc-#{$key} {
|
justify-content: $value;
|
}
|
}
|
|
@each $key, $value in $flex-ai {
|
.ai-#{$key} {
|
align-items: $value;
|
}
|
}
|
|
//字体
|
@each $fontkey, $fontvalue in $font-sizes {
|
.fs-#{$fontkey} {
|
font-size: $fontvalue * $base-font-size;
|
}
|
}
|
|
//.mt-1 => margin top
|
//spacing
|
|
@each $typekey, $type in $spacing-types {
|
//.m-1
|
@each $sizekey, $size in $spacing-sizes {
|
.#{$typekey}-#{$sizekey} {
|
#{$type}: $size * $spacing-base-size;
|
}
|
}
|
|
//.mx-1
|
@each $sizekey, $size in $spacing-sizes {
|
.#{$typekey}x-#{$sizekey} {
|
#{$type}-left: $size * $spacing-base-size;
|
#{$type}-right: $size * $spacing-base-size;
|
}
|
|
.#{$typekey}y-#{$sizekey} {
|
#{$type}-top: $size * $spacing-base-size;
|
#{$type}-bottom: $size * $spacing-base-size;
|
}
|
}
|
|
//.mt-1
|
@each $directionkey, $direction in $spacing-directions {
|
@each $sizekey, $size in $spacing-sizes {
|
.#{$typekey}#{$directionkey}-#{$sizekey} {
|
#{$type}-#{$direction}: $size * $spacing-base-size;
|
}
|
}
|
}
|
|
.#{$typekey} {
|
#{$type}: 0;
|
}
|
}
|
