@mixin underline-on-hover($underline-color) {
text-decoration: underline; text-decoration-color: transparent; transition: 0.4s; -webkit-text-decoration-color: transparent; -moz-text-decoration-color: transparent; &:hover { text-decoration-color: $underline-color; -webkit-text-decoration-color: $underline-color; -moz-text-decoration-color: $underline-color; }
}
@mixin tooltip {
position: relative; &:hover .tooltip { visibility: visible; opacity: 1; } & .tooltip { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; font-size: 14px; &::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } }
}
@mixin hyperlink-convention {
a { cursor: pointer; @include underline-on-hover($hyperlink); color: $hyperlink; }
}