spee.ch/client/scss/link/_link.scss

77 lines
1.3 KiB
SCSS
Raw Normal View History

2018-05-31 00:00:09 +02:00
a, a:visited {
text-decoration: none;
}
.link--primary, .link--primary:visited {
2018-06-08 17:50:25 +02:00
color: $interactive-color;
2018-05-31 00:00:09 +02:00
}
.link--brand, .link--brand:visited {
color: $brand-color;
}
2018-05-31 00:00:09 +02:00
.link--secondary, .link--secondary:visited {
margin: 0px;
padding: 0.3em;
2018-06-08 17:50:25 +02:00
color: $secondary-color;
2018-05-31 00:00:09 +02:00
}
.link--nav {
2018-06-08 17:50:25 +02:00
color: $primary-color;
2018-05-31 00:00:09 +02:00
border-bottom: 2px solid white;
}
.link--nav:hover {
2018-06-08 17:50:25 +02:00
color: $interactive-color;
2018-05-31 00:00:09 +02:00
}
.link--nav-active {
2018-06-08 17:50:25 +02:00
color: $interactive-color;
border-bottom: 2px solid $interactive-color;
2018-05-31 00:00:09 +02:00
}
.link--icon, .link--icon:visited {
display: flex;
.link-text {
padding-bottom: 2px;
border-bottom: 1px solid transparent;
transition: all 0.2s ease;
}
.icon-wrap {
margin-left: 5px;
padding-top: 3px;
align-items: center;
svg {
width: 16px;
height: 16px;
stroke: $grey;
transition: all 0.2s ease;
}
2018-10-22 21:51:27 +02:00
@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;
}
}