mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 09:42:07 +08:00
da3e72c2b4
This commits introduces a new SiteSetting.enable_new_user_profile_nav_groups feature flag. When configured, users of the configured groups will see the new user page navigation links. As of this commit, only the user activity navigation link has been converted to the newly proposed dropdown of navigation links. Mobile support has not been considered.
127 lines
2.3 KiB
SCSS
127 lines
2.3 KiB
SCSS
// --------------------------------------------------
|
|
// Navigation menus
|
|
// --------------------------------------------------
|
|
|
|
// Base
|
|
// --------------------------------------------------
|
|
|
|
%nav {
|
|
margin-left: 0;
|
|
list-style: none;
|
|
li a {
|
|
display: block;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
// Pill nav
|
|
// --------------------------------------------------
|
|
|
|
.nav-pills {
|
|
@extend %nav;
|
|
@extend .clearfix;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
|
|
> li {
|
|
display: flex;
|
|
margin-right: 0.5em;
|
|
|
|
> a,
|
|
button {
|
|
border: none;
|
|
padding: 6px 12px;
|
|
color: var(--primary);
|
|
font-size: $font-up-1;
|
|
line-height: $line-height-small;
|
|
box-sizing: border-box;
|
|
min-height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: background-color 0.2s, color 0.2s;
|
|
|
|
.d-icon {
|
|
margin-right: 5px;
|
|
opacity: 0.65;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--quaternary);
|
|
background-color: var(--quaternary-low);
|
|
}
|
|
}
|
|
|
|
a.active,
|
|
button.active {
|
|
color: var(--secondary);
|
|
background-color: var(--quaternary);
|
|
|
|
.d-icon {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Stacked nav
|
|
// --------------------------------------------------
|
|
|
|
.nav-stacked {
|
|
@extend %nav;
|
|
padding: 0;
|
|
background: var(--primary-low);
|
|
|
|
li {
|
|
border-bottom: 1px solid var(--primary-low-mid-or-secondary-high);
|
|
|
|
&:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
&.indent {
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
a {
|
|
margin: 0;
|
|
padding: 0.75em;
|
|
font-size: $font-up-1;
|
|
line-height: $line-height-small;
|
|
cursor: pointer;
|
|
color: var(--primary);
|
|
@include ellipsis;
|
|
|
|
&.active {
|
|
color: var(--secondary);
|
|
background-color: var(--quaternary);
|
|
position: relative;
|
|
|
|
--arrow-thickness: 8px;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(50% - var(--arrow-thickness));
|
|
content: " ";
|
|
border: var(--arrow-thickness) solid transparent;
|
|
border-left-color: var(--secondary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.count {
|
|
font-size: $font-down-1;
|
|
}
|
|
|
|
.glyph {
|
|
font-size: $font-down-1;
|
|
width: 1.25em;
|
|
text-align: center;
|
|
margin-right: 0.25em;
|
|
line-height: $line-height-large;
|
|
}
|
|
}
|