// Rules for styling links // =========================================
.links__darker-link {
color: $darker-link;
}
.links__phone–span { // Phone # link in the navigation on landing pages like info.kcc.edu
color: $white; position: relative; // Needed to make pseudo-element underlining the right width text-decoration: none; &:visited { color: $white; } &:hover, &:focus { color: $white; // Remove the Bootstrap primary blue colour on a:hover text-decoration: none; // Prevent underlining }
}
.links__phone–span:focus:after, .links__phone–span:hover:after { // mouse-hover effect for phone # in landing pages
opacity: 1; // Make the underline fade in transform: translateY(-.2em); // Move the underline up (along the Y-axis) as it fades-in
}
.links__phone–span:after { // Pseudo-element to unerline the phone # on mouse-hover
background-color: $color-orange; bottom: - .325rem; content: ""; display: block; height: .1875rem; opacity: 0; position: absolute; transition: opacity .3s,transform .3s; // mouse-hover effect width: 100%;
}