Sha256: 090d6db48176197c93b2e9e0946e6dc805b76962903faa5077ac2e244b86cd80
Contents?: true
Size: 1.66 KB
Versions: 9
Compression:
Stored size: 1.66 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;
}
}
// --------------------------------------------------------------------------------
// Navbar and linked headings' correction.
//
// By default, when you access page headings from the page table of content
// (toc) links, the heading is hidden behind the navbar. This workaround fixes
// the linked headings visibility issue in the page.
// --------------------------------------------------------------------------------
h1,h2,h3,h4,h5,h6 {
padding-top: calc(#{$navbar-brand-height} * 2);
margin-top: calc(#{$navbar-brand-height} * -2);
}
Version data entries
9 entries across 9 versions & 2 rubygems