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

278 lines
4.8 KiB
SCSS
Raw Normal View History

2020-08-11 22:32:03 +02:00
.navigation__wrapper {
2019-06-11 20:10:58 +02:00
width: var(--side-nav-width);
2020-08-11 22:32:03 +02:00
height: calc(100vh - var(--header-height));
}
.navigation__wrapper--micro {
width: var(--side-nav-width--micro);
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
2020-08-11 22:32:03 +02:00
width: 0;
}
}
2020-08-11 22:32:03 +02:00
.navigation__wrapper--absolute {
&:not(.navigation__wrapper--micro) {
width: 0;
}
}
.navigation {
2020-08-10 22:47:39 +02:00
position: fixed;
left: 0;
overflow-y: auto;
2020-08-11 22:32:03 +02:00
top: var(--header-height);
width: var(--side-nav-width);
2020-08-10 22:47:39 +02:00
height: calc(100vh - var(--header-height));
2020-08-11 22:32:03 +02:00
border-right: 1px solid var(--color-border);
padding-top: var(--spacing-l);
2021-04-26 21:19:17 +02:00
padding-bottom: var(--spacing-l);
overflow-y: auto;
display: flex;
flex-direction: column;
@media (min-width: $breakpoint-small) {
overflow-y: hidden;
2021-04-26 21:19:17 +02:00
justify-content: space-between;
&:hover {
overflow-y: auto;
}
}
2020-08-11 22:32:03 +02:00
}
.navigation--mac {
top: calc(var(--header-height) + var(--mac-titlebar-height));
}
.navigation--absolute {
2020-08-11 22:32:03 +02:00
@extend .navigation;
z-index: 4;
width: var(--side-nav-width);
2020-08-11 22:32:03 +02:00
padding-top: 0;
2020-08-10 22:47:39 +02:00
background-color: var(--color-card-background);
2020-08-11 22:32:03 +02:00
border-top: 1px solid var(--color-border);
2020-08-10 22:47:39 +02:00
box-shadow: var(--card-box-shadow);
2020-01-02 17:30:27 +01:00
2020-08-10 22:47:39 +02:00
.navigation-link {
padding-left: var(--spacing-m);
}
2019-07-21 23:31:22 +02:00
}
2020-08-10 22:47:39 +02:00
.navigation--micro {
2020-08-11 22:32:03 +02:00
@extend .navigation;
2020-08-10 22:47:39 +02:00
width: var(--side-nav-width--micro);
2020-08-11 22:32:03 +02:00
@media (max-width: $breakpoint-small) {
display: none;
}
2019-09-27 20:56:15 +02:00
}
2020-08-10 22:47:39 +02:00
.navigation__secondary {
margin-top: var(--spacing-m);
.button__content {
align-items: flex-start;
}
2019-03-28 17:53:13 +01:00
}
.navigation__tertiary {
margin-top: var(--spacing-m);
}
2019-07-21 23:31:22 +02:00
.navigation-link {
display: block;
position: relative;
2019-06-11 20:10:58 +02:00
overflow: hidden;
white-space: nowrap;
2019-06-11 20:10:58 +02:00
text-overflow: ellipsis;
width: 100%;
2019-11-22 22:13:00 +01:00
color: var(--color-navigation-link);
2020-08-10 22:47:39 +02:00
padding-left: var(--spacing-s);
2020-08-11 22:32:03 +02:00
font-size: var(--font-body);
font-weight: var(--font-weight-bold);
2019-06-19 07:05:43 +02:00
2019-07-22 04:05:37 +02:00
.icon {
2020-08-10 22:47:39 +02:00
height: 1.5rem;
width: 1.5rem;
2020-08-11 22:32:03 +02:00
stroke: var(--color-navigation-icon);
}
2020-08-10 22:47:39 +02:00
.button__content {
padding: var(--spacing-s);
justify-content: flex-start;
flex-direction: column;
}
2020-08-11 22:32:03 +02:00
&:hover:not(.navigation-link--active),
&:focus {
@extend .navigation-link--highlighted;
2020-08-10 22:47:39 +02:00
}
@media (min-width: $breakpoint-medium) {
text-align: left;
margin-bottom: 0;
.icon {
height: 1rem;
width: 1rem;
}
.button__content {
flex-direction: row;
}
.button__label {
margin-top: 0;
}
&:focus {
box-shadow: none;
}
}
2020-08-10 22:47:39 +02:00
}
2020-08-10 22:47:39 +02:00
.navigation-link--active {
2020-08-11 22:32:03 +02:00
background-color: var(--color-navigation-active);
color: var(--color-navigation-active-text);
2020-08-10 22:47:39 +02:00
.icon {
2020-08-11 22:32:03 +02:00
stroke: var(--color-navigation-active-text);
}
}
2020-05-21 17:38:28 +02:00
.navigation-link--pulse {
overflow: visible;
.icon {
animation: shadow-pulse 2.5s infinite;
}
}
2020-08-11 22:32:03 +02:00
.navigation-link--highlighted {
background-color: var(--color-navigation-hover);
color: var(--color-navigation-hover-text);
.icon {
stroke: var(--color-navigation-hover-text);
}
2020-08-10 22:47:39 +02:00
}
.navigation-links {
@extend .ul--no-style;
flex-direction: column;
align-items: flex-start;
list-style: none;
}
.navigation-links--micro {
.icon {
height: 1.5rem;
width: 1.5rem;
2020-05-21 17:38:28 +02:00
}
2020-08-10 22:47:39 +02:00
.button__content {
padding: var(--spacing-s);
justify-content: flex-start;
flex-direction: column;
width: var(--side-nav-width--micro);
2020-08-10 22:47:39 +02:00
}
.button__label {
font-size: var(--font-xsmall);
margin-left: 0;
margin-top: var(--spacing-xs);
}
.navigation-link {
padding-left: 0;
2020-05-21 17:38:28 +02:00
}
2020-08-10 22:47:39 +02:00
@media (max-width: $breakpoint-small) {
display: none;
}
}
.navigation-links--absolute {
@extend .navigation-links;
margin-top: 0;
2020-08-10 22:47:39 +02:00
.navigation-link {
margin-bottom: 0;
.icon {
height: 1rem;
width: 1rem;
}
.button__content {
flex-direction: row;
}
.button__label {
margin-top: 0;
font-size: var(--font-body);
font-weight: var(--font-weight-bold);
}
&:focus {
box-shadow: none;
}
}
}
.navigation-links--small {
@extend .navigation-links;
margin-right: 0;
padding-right: 0;
2021-04-26 21:19:17 +02:00
margin-top: var(--spacing-xl);
margin-bottom: 0;
.navigation-link {
font-size: var(--font-small);
}
.button__label {
color: var(--color-text-help);
}
2020-08-10 22:47:39 +02:00
.button__content {
align-items: flex-start;
}
}
.navigation__overlay {
position: fixed;
width: 100vw;
height: 100vh;
2020-10-01 22:59:11 +02:00
background-color: var(--color-background-overlay);
2020-08-10 22:47:39 +02:00
z-index: 3;
left: 0;
top: var(--header-height);
&.navigation__overlay--mac {
top: calc(var(--header-height) + var(--mac-titlebar-height));
}
2020-05-21 17:38:28 +02:00
}
2020-11-10 06:21:04 +01:00
.navigation__auth-nudge {
@extend .card;
margin: var(--spacing-s);
margin-top: var(--spacing-l);
padding: var(--spacing-xs);
display: flex;
flex-direction: column;
.button {
margin-top: var(--spacing-s);
}
.button__content {
justify-content: center;
}
.icon {
margin-bottom: -2px;
}
}