site/css/_links.css
@value badgerRed, badgerWhite, badgerRedOnWhite, badgerBlack, scorpian from "./_colors.css";
@value inputHeight, linkSize from "./_sizes.css";
/*
### Example
.link {
composes: redUnderlineLink from "../../css/_links.css";
}
*/
.bodyLink {
color: badgerBlack;
transition: all 0.2s ease;
}
.bodyLink:hover {
color: badgerRedOnWhite;
}
.bodyUnderlineLink {
color: badgerBlack;
border-bottom: 1px solid badgerRedOnWhite;
transition: all 0.2s ease;
}
.bodyUnderlineLink:hover {
color: badgerRedOnWhite;
}
.redUnderlineLink {
border-bottom: 2px solid badgerRedOnWhite;
color: badgerWhite;
text-decoration: none;
}
.primaryButton {
composes: boldSansSerif from "./typography/_fonts.css";
font-size: linkSize;
background-color: badgerRed;
color: badgerWhite;
text-align: center;
padding: 0 20px;
text-decoration: none;
display: inline-block;
line-height: inputHeight;
height: inputHeight;
border: none;
}
.primaryButton:hover {
background-color: scorpian;
}
.smallButton {
composes: boldSansSerif from "./typography/_fonts.css";
font-size: 18px;
background-color: badgerRed;
color: badgerWhite;
text-align: center;
padding: 0 14px;
text-decoration: none;
display: inline-block;
line-height: 40px;
height: 40px;
border: none;
}
.smallButton:hover {
background-color: scorpian;
}