.purple {
color: $purple-rain; &.icon { fill: $purple-rain; }
}
.bg–purple {
background: $purple-rain; color: $white;
}
a.bg–purple:hover {
background: darken($purple-rain, $darken--button);
}
.gray {
color: $jumbo-gray; &.icon { fill: $jumbo-gray; }
}
.bg–gray {
background: $jumbo-gray; color: $white;
}
a.bg–gray:hover {
background: darken($jumbo-gray, $darken--button);
}
.green {
color: $dark-sea-green; &.icon { fill: $dark-sea-green; }
}
.bg–green {
background: $dark-sea-green; color: $white;
}
a.bg–green:hover {
background: darken($dark-sea-green, $darken--button);
}
.pink {
color: $sea-pink; &.icon { fill: $sea-pink; }
}
.bg–pink {
background: $sea-pink; color: $white;
}
a.bg–pink:hover {
background: darken($sea-pink, $darken--button);
}
.orange {
color: $channel-orange; &.icon { fill: $channel-orange; }
}
.bg–orange {
background: $channel-orange; color: $white;
}
a.bg–orange:hover {
background: darken($channel-orange, $darken--button);
}
.bittersweet {
color: $bittersweet; &.icon { fill: $bittersweet; }
}
.bg–bittersweet {
background: $bittersweet; color: $white;
}
a.bg–bittersweet:hover {
background: darken($bittersweet, $darken--button);
}