lbry-desktop/ui/scss/component/_navigation.scss
2022-02-01 10:20:00 -05:00

343 lines
6.4 KiB
SCSS

.navigation__wrapper {
width: var(--side-nav-width);
height: calc(100vh - var(--header-height));
@media (max-width: $breakpoint-small) {
height: calc(100vh - var(--header-height-mobile));
}
}
.navigation__wrapper--micro {
width: var(--side-nav-width--micro);
@media (max-width: $breakpoint-small) {
width: 0;
}
}
.navigation__wrapper--absolute {
&:not(.navigation__wrapper--micro) {
width: 0;
}
}
.navigation {
position: fixed;
left: 0;
overflow-y: auto;
overflow-x: hidden;
top: var(--header-height);
width: var(--side-nav-width);
height: calc(100vh - var(--header-height));
border-right: 1px solid var(--color-border);
padding-top: var(--spacing-m);
padding-bottom: var(--spacing-l);
display: flex;
flex-direction: column;
box-shadow: var(--card-box-shadow);
animation-timing-function: var(--resizing-animation-function);
transition: transform var(--resizing-animation-timing);
z-index: 4;
background-color: var(--color-card-background);
transform: translateX(0);
transform-origin: left;
@media (min-width: $breakpoint-small) {
overflow-y: hidden;
justify-content: space-between;
&:hover {
overflow-y: auto;
}
}
@media (max-width: $breakpoint-small) {
top: var(--header-height-mobile);
height: calc(100vh - var(--header-height-mobile));
}
ul {
padding-bottom: var(--spacing-s);
border-bottom: 1px solid var(--color-border);
}
}
.navigation--push-back {
transform: translateX(calc(var(--side-nav-width--micro) - var(--side-nav-width)));
}
.navigation--push {
transform: translateX(0);
}
.navigation--mac {
top: calc(var(--header-height) + var(--mac-titlebar-height));
}
.navigation-file-page-and-mobile {
transform: translateX(calc(-1 * var(--side-nav-width)));
}
.navigation--micro {
@extend .navigation;
transform: translateX(calc(var(--side-nav-width--micro) - var(--side-nav-width)));
@media (max-width: $breakpoint-small) {
display: none;
}
}
.navigation__secondary {
margin-top: var(--spacing-m);
.button__content {
align-items: flex-start;
}
}
.navigation__tertiary {
margin-top: var(--spacing-m);
}
.navigation-link {
display: block;
position: relative;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
color: var(--color-navigation-link);
padding-left: var(--spacing-s);
font-size: var(--font-body);
font-weight: var(--font-weight-bold);
.icon {
height: 1.5rem;
width: 1.5rem;
stroke: var(--color-navigation-icon);
}
.button__content {
margin-left: auto;
padding: var(--spacing-s);
justify-content: flex-start;
flex-direction: column;
}
&.navigation-link--with-thumbnail .button__content {
flex-direction: row;
.channel-thumbnail {
@include handleChannelGif(1.5rem);
flex-shrink: 0;
margin-right: var(--spacing-s);
}
.channel-staked__wrapper {
margin-bottom: 0.2rem;
left: -0.55rem;
.channel-staked__indicator {
height: 0.75rem;
width: 0.75rem;
margin-left: 0;
}
}
}
&:hover:not(.navigation-link--active),
&:focus {
@extend .navigation-link--highlighted;
}
@media (min-width: $breakpoint-medium) {
text-align: left;
margin-bottom: 0;
.icon {
height: 1.5rem;
width: 1.5rem;
}
.button__content {
flex-direction: row;
}
.button__label {
margin-top: 0;
}
&:focus {
box-shadow: none;
}
}
}
.navigation-link--active {
background-color: var(--color-navigation-active);
color: var(--color-navigation-active-text);
.icon {
stroke: var(--color-navigation-active-text);
}
}
.navigation-link--pulse {
overflow: visible;
.icon {
animation: shadow-pulse 2.5s infinite;
}
}
.navigation-link--highlighted {
background-color: var(--color-navigation-hover);
color: var(--color-navigation-hover-text);
.icon {
stroke: var(--color-navigation-hover-text);
}
}
.navigation-links {
@extend .ul--no-style;
flex-direction: column;
align-items: flex-start;
list-style: none;
}
.navigation-inner-container {
width: var(--side-nav-width);
}
.navigation-links--micro {
.icon {
height: 1.5rem;
width: 1.5rem;
}
.button__content {
padding: var(--spacing-s);
justify-content: flex-start;
flex-direction: column;
width: var(--side-nav-width--micro);
}
.button__label {
font-size: var(--font-xsmall);
margin-left: 0;
margin-top: var(--spacing-xs);
}
.navigation-link {
padding-left: 0;
}
@media (max-width: $breakpoint-small) {
display: none;
}
}
.navigation-links--absolute {
@extend .navigation-links;
.navigation-link {
margin-bottom: 0;
.icon {
height: 1.5rem;
width: 1.5rem;
}
.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;
margin-top: var(--spacing-xl);
margin-bottom: 0;
.navigation-link {
font-size: var(--font-small);
}
.button__label {
color: var(--color-text-help);
}
.button__content {
align-items: flex-start;
}
}
.navigation-item {
.empty {
padding: var(--spacing-s);
}
}
.navigation__overlay {
position: fixed;
width: 100vw;
height: 100vh;
background-color: var(--color-background-overlay);
z-index: 3;
left: 0;
top: var(--header-height);
visibility: hidden;
opacity: 0;
animation-timing-function: var(--resizing-animation-function);
transition: visibility var(--resizing-animation-timing), opacity var(--resizing-animation-timing);
&.navigation__overlay--mac {
top: calc(var(--header-height) + var(--mac-titlebar-height));
}
@media (max-width: $breakpoint-small) {
top: var(--header-height-mobile);
}
}
.navigation__overlay--active {
opacity: 1;
visibility: visible;
animation: fadeIn var(--resizing-animation-timing) var(--resizing-animation-function);
}
.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;
}
}