redbadger/website-honestly

View on GitHub
site/css/_links.css

Summary

Maintainability
Test Coverage
@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;
}