lbry-desktop/ui/scss/component/_navigation.scss

88 lines
1.6 KiB
SCSS
Raw Normal View History

.navigation {
2019-06-11 20:10:58 +02:00
width: var(--side-nav-width);
2019-07-21 23:31:22 +02:00
font-size: var(--font-body);
2020-01-06 19:32:35 +01:00
margin-left: var(--spacing-main-padding);
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
display: none;
2020-01-08 20:20:30 +01:00
margin-left: 0;
}
}
.navigation + .ads-wrapper {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-l);
}
2020-01-02 17:30:27 +01:00
.navigation__secondary {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-l);
2020-01-02 17:30:27 +01:00
}
2019-07-21 23:31:22 +02:00
.navigation-links {
@extend .ul--no-style;
flex-direction: column;
align-items: flex-start;
list-style: none;
}
2019-07-21 23:31:22 +02:00
.navigation-links--small {
@extend .navigation-links;
2019-11-22 22:13:00 +01:00
font-size: var(--font-small);
2019-07-21 23:31:22 +02:00
}
2019-09-27 20:56:15 +02:00
.navigation-links__inline {
2020-06-01 19:03:19 +02:00
margin-left: calc(var(--spacing-m) + var(--spacing-s));
2019-09-27 20:56:15 +02:00
}
2019-07-21 23:31:22 +02:00
.navigation-link__wrapper {
2020-06-01 19:03:19 +02:00
margin: var(--spacing-xxs) 0;
2019-03-28 17:53:13 +01:00
}
2019-07-21 23:31:22 +02:00
.navigation-link {
display: block;
position: relative;
text-align: left;
transition: color 0.2s;
2019-06-11 20:10:58 +02:00
overflow: hidden;
white-space: nowrap;
2019-06-11 20:10:58 +02:00
text-overflow: ellipsis;
2019-11-22 22:13:00 +01:00
color: var(--color-navigation-link);
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-s);
2019-06-19 07:05:43 +02:00
2019-07-22 04:05:37 +02:00
.icon {
2019-11-22 22:13:00 +01:00
stroke: var(--color-link-icon);
}
2019-11-22 22:13:00 +01:00
&:hover,
2019-07-21 23:31:22 +02:00
&.navigation-link--active {
2019-11-22 22:13:00 +01:00
color: var(--color-link-active);
2019-06-11 20:10:58 +02:00
.icon {
2019-11-22 22:13:00 +01:00
stroke: var(--color-link-active);
}
}
2019-11-22 22:13:00 +01:00
&:focus {
box-shadow: none;
}
}
2020-05-21 17:38:28 +02:00
.navigation-link--pulse {
border-radius: var(--border-radius);
overflow: visible;
.icon {
border-radius: 50%;
animation: shadow-pulse 2.5s infinite;
}
}
@keyframes shadow-pulse {
0% {
background-color: rgba(37, 119, 97, 0.2);
box-shadow: 0 0 0 0px rgba(37, 119, 97, 0.2);
}
100% {
background-color: rgba(37, 119, 97, 0);
box-shadow: 0 0 0 35px rgba(37, 119, 97, 0);
}
}