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.
53 lines
2.2 KiB
53 lines
2.2 KiB
$normalArr:
|
|
(lightBlue, #fff, map-get($basicColor, lightBlue), map-get($basicColor, lightBlue)),
|
|
(skyBlue, #fff, map-get($basicColor, skyBlue), map-get($basicColor, skyBlue)),
|
|
(moBlue, #fff, map-get($basicColor, moBlue), map-get($basicColor, moBlue)),
|
|
(darkBlue, #fff, map-get($basicColor, darkBlue), map-get($basicColor, darkBlue)),
|
|
(lightPink, #fff, map-get($basicColor, lightPink), map-get($basicColor, lightPink)),
|
|
(cherry, #fff, map-get($basicColor, cherry), map-get($basicColor, cherry)),
|
|
(limeGreen, #fff, map-get($basicColor, limeGreen), map-get($basicColor, limeGreen)),
|
|
(tomatoRed, #fff, map-get($basicColor, tomatoRed), map-get($basicColor, tomatoRed)),
|
|
(earthGold, #fff, map-get($basicColor, earthGold), map-get($basicColor, earthGold)),
|
|
;
|
|
|
|
$outlineArr:
|
|
(lightBlue, 1px, map-get($basicColor, lightBlue), transparent, map-get($basicColor, lightBlue)),
|
|
(skyBlue, 1px, map-get($basicColor, skyBlue), transparent, map-get($basicColor, skyBlue)),
|
|
(moBlue, 1px, map-get($basicColor, moBlue), transparent, map-get($basicColor, moBlue)),
|
|
(darkBlue, 1px, map-get($basicColor, darkBlue), transparent, map-get($basicColor, darkBlue)),
|
|
(lightPink, 1px, map-get($basicColor, lightPink), transparent, map-get($basicColor, lightPink)),
|
|
(cherry, 1px, map-get($basicColor, cherry), transparent, map-get($basicColor, cherry)),
|
|
(limeGreen, 1px, map-get($basicColor, limeGreen), transparent, map-get($basicColor, limeGreen)),
|
|
(tomatoRed, 1px, map-get($basicColor, tomatoRed), transparent, map-get($basicColor, tomatoRed)),
|
|
(earthGold, 1px, map-get($basicColor, earthGold), transparent, map-get($basicColor, earthGold)),
|
|
;
|
|
|
|
|
|
//一般button
|
|
@each $class, $color, $bgColor, $border in $normalArr {
|
|
.btn-#{"" + $class} {
|
|
@include normalBtn($color, $bgColor, $border);
|
|
}
|
|
}
|
|
|
|
//線條外框
|
|
@each $class, $bdWidth, $color, $bgColor, $bdColor in $outlineArr {
|
|
.btn-outline-#{"" + $class} {
|
|
@include outlineBtn($bdWidth, $color, $bgColor, $bdColor);
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
.btn-outline-limeGreen {
|
|
&.active {
|
|
color: #fff;
|
|
background-color: #b4d26c;
|
|
}
|
|
&.disabled {
|
|
cursor: not-allowed;
|
|
&:hover {
|
|
background-color: #fff;
|
|
color: #b4d26c;
|
|
}
|
|
}
|
|
} |