Sha256: d92b8134c068a1c890488246426e00fdcfd70afe311e67a601413b64c7af1a63
Contents?: true
Size: 1.13 KB
Versions: 17
Compression:
Stored size: 1.13 KB
Contents
/* CentOS Links
*
* Thanks Harshil Patel for sharing the code used as reference.
* https://css-tricks.com/css-link-hover-effects/
*/
a {
position: relative;
padding-bottom: 5px;
&::before {
content: '';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform .1s ease-in-out;
background-color: var(--bs-primary);
}
&:hover{
color: var(--bs-primary);
}
&:hover::before {
transform-origin: left;
transform: scaleX(1);
}
}
// --------------------------------------------------------------------------------
// Exceptions
//
// By default, the link effects defined above are applied to all anchor
// elements. This is the desired behavior in most of cases. However there are
// some elements in which we don't what to apply the link effect. Such
// elements/classes are specified below.
// --------------------------------------------------------------------------------
.navbar, .rollers {
a {
&::before {
content: none;
}
}
}
.btn, .navbar-brand {
&::before {
content: none;
}
}
Version data entries
17 entries across 17 versions & 1 rubygems