a0df0a0e0a
## Issue 4708: Bring back tag list in side bar when Tags view selected ## Approach - Instead of displaying either Channels or Tags, both will now be displayed. - The tags will simply be a the same button component as the "channels", but with a "#" prefix. This simplifies the CSS-side changes, and looks better overall as well.
239 lines
4.2 KiB
SCSS
239 lines
4.2 KiB
SCSS
.navigation__wrapper {
|
|
width: var(--side-nav-width);
|
|
height: calc(100vh - var(--header-height));
|
|
}
|
|
|
|
.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;
|
|
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-l);
|
|
padding-bottom: var(--spacing-xl);
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
overflow-y: hidden;
|
|
|
|
&:hover {
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navigation--mac {
|
|
top: calc(var(--header-height) + var(--mac-titlebar-height));
|
|
}
|
|
|
|
.navigation--absolute {
|
|
@extend .navigation;
|
|
z-index: 4;
|
|
width: var(--side-nav-width);
|
|
padding-top: 0;
|
|
background-color: var(--color-card-background);
|
|
border-top: 1px solid var(--color-border);
|
|
box-shadow: var(--card-box-shadow);
|
|
|
|
.navigation-link {
|
|
padding-left: var(--spacing-m);
|
|
}
|
|
}
|
|
|
|
.navigation--micro {
|
|
@extend .navigation;
|
|
width: var(--side-nav-width--micro);
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.navigation__secondary {
|
|
margin-top: var(--spacing-l);
|
|
}
|
|
|
|
.navigation__secondary--tags {
|
|
@extend .navigation__secondary;
|
|
margin-left: var(--spacing-l);
|
|
}
|
|
|
|
.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 {
|
|
padding: var(--spacing-s);
|
|
justify-content: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&:hover:not(.navigation-link--active),
|
|
&:focus {
|
|
@extend .navigation-link--highlighted;
|
|
}
|
|
|
|
@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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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-links--micro {
|
|
.icon {
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
}
|
|
|
|
.button__content {
|
|
padding: var(--spacing-s);
|
|
justify-content: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.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: 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;
|
|
font-size: var(--font-small);
|
|
|
|
.button__content {
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
.navigation__overlay {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
opacity: 0.3;
|
|
background-color: black;
|
|
z-index: 3;
|
|
left: 0;
|
|
top: var(--header-height);
|
|
|
|
&.navigation__overlay--mac {
|
|
top: calc(var(--header-height) + var(--mac-titlebar-height));
|
|
}
|
|
}
|