Link style init
SCSS
a { transition: all .2s ease; color: $global-link-color; &:hover { color: $global-link-hover-color; } } .link-primary { &:hover, &:focus { color: $global-primary-background!important; svg { color: $global-primary-background; } } } .link-secondary { transition: all .2s ease; &:hover, &:focus { color: $global-secondary-background!important; } } .link-no-underline { &:hover { &:before { display: none; } text-decoration: none; } } .link-underline { text-decoration: underline; &:hover { text-decoration: none; color: #666; } } .link-underline-ani { position: relative; &:before { content: ''; @include pos-a('','',-3px,50%,100%,1px,5); background-color: $global-primary-background; transition: all .2s ease; transform-origin: 0 50%; transform: scaleX(0) translateX(-50%); } &:hover { text-decoration: none; color: #222; &:before { transform: scaleX(1) translateX(-50%); } } } .link-white { &:hover { color: #fff; } } .link-opacity { &>* { transition: all .2s ease; } &:hover, &>*:hover { opacity: .7; } }