spee.ch/client/scss/link/_link.scss
2018-10-26 18:40:48 +01:00

78 lines
1.3 KiB
SCSS

a, a:visited {
text-decoration: none;
}
.link--primary, .link--primary:visited {
color: $interactive-color;
}
.link--brand, .link--brand:visited {
color: $brand-color;
}
.link--secondary, .link--secondary:visited {
margin: 0px;
padding: 0.3em;
color: $secondary-color;
}
.link--nav {
color: $primary-color;
border-bottom: 2px solid white;
}
.link--nav:hover {
color: $interactive-color;
}
.link--nav-active {
color: $interactive-color;
border-bottom: 2px solid $interactive-color;
}
.link--icon, .link--icon:visited {
display: flex;
align-items: center;
.link-text {
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: all 0.2s ease;
}
.icon-wrap {
margin-left: 5px;
padding-top: 0px;
align-items: center;
svg {
width: 16px;
height: 16px;
stroke: $grey;
transition: all 0.2s ease;
}
@media (max-width: $break-point-x-small) {
padding-top: 0;
}
}
&:hover {
.link-text {
border-bottom: 1px solid $brand-color;
}
svg {
stroke: $brand-color;
}
}
}
.link--hover {
display: inline-block;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: all 0.2s ease;
&:hover {
border-bottom: 1px solid $brand-color;
}
}