You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
2.0 KiB
122 lines
2.0 KiB
//===高度
|
|
$heightObj: (
|
|
basic: 45px
|
|
);
|
|
|
|
//===間距
|
|
$gutter: (
|
|
basic: 20px,
|
|
double: 40px
|
|
);
|
|
|
|
//圓角
|
|
$radius: (
|
|
basic: 3px
|
|
);
|
|
|
|
$cisColor: (
|
|
master:#64aeff,
|
|
second:#355785,
|
|
third:#2c2d3b,
|
|
fourth:#a5a5a5,
|
|
);
|
|
// $cisColor: (
|
|
// master:#e54b4b,
|
|
// second:#493435,
|
|
// third:#674a54,
|
|
// fourth:#efe8d8,
|
|
// );
|
|
|
|
//字體顏色
|
|
$basicColor: (
|
|
skyBlue:#009fe7,
|
|
moBlue:#486499,
|
|
pink:#fdebeb,
|
|
cherry:#E31D64,
|
|
limeGreen:#94ac5e,
|
|
tomatoRed:#e74210,
|
|
lightYellow:#fdecbe,
|
|
bananaYellow:#ffcf61,
|
|
silver:#eeeeee,
|
|
gray:#a5a5a5,
|
|
);
|
|
|
|
|
|
$textArr:
|
|
(skyBlue, map-get($basicColor, skyBlue)),
|
|
(moBlue, map-get($basicColor, moBlue)),
|
|
(pink, map-get($basicColor, pink)),
|
|
(cherry, map-get($basicColor, cherry)),
|
|
(limeGreen, map-get($basicColor, limeGreen)),
|
|
(tomatoRed, map-get($basicColor, tomatoRed)),
|
|
(lightYellow, map-get($basicColor, lightYellow)),
|
|
(bananaYellow, map-get($basicColor, bananaYellow)),
|
|
(silver, map-get($basicColor, silver)),
|
|
(gray, map-get($basicColor, gray)),
|
|
;
|
|
|
|
//一般button
|
|
@each $class, $color in $textArr {
|
|
.text-#{"" + $class} {
|
|
color: $color !important;
|
|
}
|
|
.bg-#{"" + $class} {
|
|
background-color: $color !important;
|
|
}
|
|
.bd-#{"" + $class} {
|
|
border-style: solid;
|
|
border-color: $color !important;
|
|
}
|
|
}
|
|
|
|
//======extand
|
|
%centerFlex {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
%bwtFlex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
%posCenter {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
%resetForm {
|
|
appearance: none;
|
|
}
|
|
|
|
%clearFix {
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
//========mixin
|
|
|
|
@mixin size($w, $h:$w) {
|
|
width: $w;
|
|
height: $h;
|
|
}
|
|
|
|
@mixin basicSize($w, $h) {
|
|
min-width: $w;
|
|
min-height: $h;
|
|
}
|
|
|
|
//指有margin padding能用
|
|
@mixin elGutter($key, $value) {
|
|
#{$key}: $value;
|
|
&:last-child {
|
|
#{$key}: 0;
|
|
}
|
|
} |