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.

54 lines
2.3 KiB

$normalArr:
(skyBlue, #fff, map-get($basicColor, skyBlue), map-get($basicColor, skyBlue)),
(moBlue, #fff, map-get($basicColor, moBlue), map-get($basicColor, moBlue)),
(pink, #fff, map-get($basicColor, pink), map-get($basicColor, pink)),
(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)),
(lightYellow, #fff, map-get($basicColor, lightYellow), map-get($basicColor, lightYellow)),
(bananaYellow, #fff, map-get($basicColor, bananaYellow), map-get($basicColor, bananaYellow)),
(silver, #fff, map-get($basicColor, silver), map-get($basicColor, silver)),
(gray, #fff, map-get($basicColor, gray), map-get($basicColor, gray)),
;
$outlineArr:
(skyBlue, 1px, map-get($basicColor, skyBlue), transparent, map-get($basicColor, skyBlue)),
(moBlue, 1px, map-get($basicColor, moBlue), transparent, map-get($basicColor, moBlue)),
(pink, 1px, map-get($basicColor, pink), transparent, map-get($basicColor, pink)),
(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)),
(lightYellow, 1px, map-get($basicColor, lightYellow), transparent, map-get($basicColor, lightYellow)),
(bananaYellow, 1px, map-get($basicColor, bananaYellow), transparent, map-get($basicColor, bananaYellow)),
(silver, 1px, map-get($basicColor, silver), transparent, map-get($basicColor, silver)),
(gray, 1px, map-get($basicColor, gray), transparent, map-get($basicColor, gray)),
;
//一般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);
}
}
.btn-outline-limeGreen {
&.active {
color: #fff;
background-color: #b4d26c;
}
&.disabled {
cursor: not-allowed;
&:hover {
background-color: #fff;
color: #b4d26c;
}
}
}