DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
This commit is contained in:
Alan Guo Xiang Tan
GitHub
parent
a1a960caba
commit
086fb6d6cf
|
|
@ -1,7 +1,5 @@
|
||||||
import GlimmerComponent from "discourse/components/glimmer";
|
import GlimmerComponent from "discourse/components/glimmer";
|
||||||
import { bind } from "discourse-common/utils/decorators";
|
import { bind } from "discourse-common/utils/decorators";
|
||||||
import { customSections as sidebarCustomSections } from "discourse/lib/sidebar/custom-sections";
|
|
||||||
import { cached } from "@glimmer/tracking";
|
|
||||||
|
|
||||||
export default class Sidebar extends GlimmerComponent {
|
export default class Sidebar extends GlimmerComponent {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
|
@ -38,11 +36,4 @@ export default class Sidebar extends GlimmerComponent {
|
||||||
document.removeEventListener("click", this.collapseSidebar);
|
document.removeEventListener("click", this.collapseSidebar);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@cached
|
|
||||||
get customSections() {
|
|
||||||
return sidebarCustomSections.map((customSection) => {
|
|
||||||
return new customSection({ sidebar: this });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import GlimmerComponent from "discourse/components/glimmer";
|
||||||
|
import { customSections as sidebarCustomSections } from "discourse/lib/sidebar/custom-sections";
|
||||||
|
|
||||||
|
export default class SidebarSections extends GlimmerComponent {
|
||||||
|
customSections;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super(...arguments);
|
||||||
|
this.customSections = this._customSections;
|
||||||
|
}
|
||||||
|
|
||||||
|
get _customSections() {
|
||||||
|
return sidebarCustomSections.map((customSection) => {
|
||||||
|
return new customSection({ sidebar: this });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,52 +1,5 @@
|
||||||
<DSection @pageClass="has-sidebar" @class="sidebar-container" @scrollTop={{false}}>
|
<DSection @pageClass="has-sidebar" @class="sidebar-container" @scrollTop={{false}}>
|
||||||
<div class="sidebar-scroll-wrap">
|
<div class="sidebar-scroll-wrap">
|
||||||
<Sidebar::TopicsSection />
|
<Sidebar::Sections />
|
||||||
<Sidebar::CategoriesSection />
|
|
||||||
|
|
||||||
{{#if this.siteSettings.tagging_enabled}}
|
|
||||||
<Sidebar::TagsSection />
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#if this.siteSettings.enable_personal_messages}}
|
|
||||||
<Sidebar::MessagesSection />
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#each this.customSections as |customSection|}}
|
|
||||||
<Sidebar::Section
|
|
||||||
@sectionName={{customSection.name}}
|
|
||||||
@headerRoute={{customSection.route}}
|
|
||||||
@headerLinkText={{customSection.text}}
|
|
||||||
@headerLinkTitle={{customSection.title}}
|
|
||||||
@headerActionsIcon={{customSection.actionsIcon}}
|
|
||||||
@headerActions={{customSection.actions}}
|
|
||||||
@willDestroy={{customSection.willDestroy}}>
|
|
||||||
|
|
||||||
{{#each customSection.links as |link|}}
|
|
||||||
<Sidebar::SectionLink
|
|
||||||
@linkName={{link.name}}
|
|
||||||
@route={{link.route}}
|
|
||||||
@model={{link.model}}
|
|
||||||
@title={{link.title}}
|
|
||||||
@prefixColor={{link.prefixColor}}
|
|
||||||
@prefixBadge={{link.prefixBadge}}
|
|
||||||
@prefixType={{link.prefixType}}
|
|
||||||
@prefixValue={{link.prefixValue}}
|
|
||||||
@prefixCSSClass={{link.prefixCSSClass}}
|
|
||||||
@suffixType={{link.suffixType}}
|
|
||||||
@suffixValue={{link.suffixValue}}
|
|
||||||
@suffixCSSClass={{link.suffixCSSClass}}
|
|
||||||
@hoverType={{link.hoverType}}
|
|
||||||
@hoverValue={{link.hoverValue}}
|
|
||||||
@hoverAction={{link.hoverAction}}
|
|
||||||
@hoverTitle={{link.hoverTitle}}
|
|
||||||
@currentWhen={{link.currentWhen}}
|
|
||||||
@content={{link.text}} />
|
|
||||||
{{/each}}
|
|
||||||
</Sidebar::Section>
|
|
||||||
{{/each}}
|
|
||||||
|
|
||||||
{{!-- DO NOT USE, this outlet is temporary and will be removed. --}}
|
|
||||||
{{!-- Outlet will be replaced with sidebar API. --}}
|
|
||||||
<PluginOutlet @name="after-sidebar" />
|
|
||||||
</div>
|
</div>
|
||||||
</DSection>
|
</DSection>
|
||||||
|
|
|
||||||
|
|
@ -12,17 +12,21 @@
|
||||||
{{#if (eq @prefixType "image")}}
|
{{#if (eq @prefixType "image")}}
|
||||||
<img src={{@prefixValue}} class="prefix-image">
|
<img src={{@prefixValue}} class="prefix-image">
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if (eq @prefixType "text")}}
|
{{#if (eq @prefixType "text")}}
|
||||||
{{@prefixValue}}
|
{{@prefixValue}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if (eq @prefixType "icon")}}
|
{{#if (eq @prefixType "icon")}}
|
||||||
{{d-icon @prefixValue class="prefix-icon"}}
|
{{d-icon @prefixValue class="prefix-icon"}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if @prefixBadge}}
|
{{#if @prefixBadge}}
|
||||||
{{d-icon @prefixBadge class="prefix-badge"}}
|
{{d-icon @prefixBadge class="prefix-badge"}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</span>
|
</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
<span class="sidebar-section-link-content-text">
|
<span class="sidebar-section-link-content-text">
|
||||||
{{@content}}
|
{{@content}}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -41,6 +45,7 @@
|
||||||
</span>
|
</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</Sidebar::SectionLinkTo>
|
</Sidebar::SectionLinkTo>
|
||||||
|
|
||||||
{{#if @hoverValue}}
|
{{#if @hoverValue}}
|
||||||
<span class="sidebar-section-link-hover">
|
<span class="sidebar-section-link-hover">
|
||||||
<button
|
<button
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
<div class="sidebar-sections">
|
||||||
|
<Sidebar::TopicsSection />
|
||||||
|
<Sidebar::CategoriesSection />
|
||||||
|
|
||||||
|
{{#if this.siteSettings.tagging_enabled}}
|
||||||
|
<Sidebar::TagsSection />
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if this.siteSettings.enable_personal_messages}}
|
||||||
|
<Sidebar::MessagesSection />
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{#each this.customSections as |customSection|}}
|
||||||
|
<Sidebar::Section
|
||||||
|
@sectionName={{customSection.name}}
|
||||||
|
@headerRoute={{customSection.route}}
|
||||||
|
@headerLinkText={{customSection.text}}
|
||||||
|
@headerLinkTitle={{customSection.title}}
|
||||||
|
@headerActionsIcon={{customSection.actionsIcon}}
|
||||||
|
@headerActions={{customSection.actions}}
|
||||||
|
@willDestroy={{customSection.willDestroy}}>
|
||||||
|
|
||||||
|
{{#each customSection.links as |link|}}
|
||||||
|
<Sidebar::SectionLink
|
||||||
|
@linkName={{link.name}}
|
||||||
|
@route={{link.route}}
|
||||||
|
@model={{link.model}}
|
||||||
|
@title={{link.title}}
|
||||||
|
@prefixColor={{link.prefixColor}}
|
||||||
|
@prefixBadge={{link.prefixBadge}}
|
||||||
|
@prefixType={{link.prefixType}}
|
||||||
|
@prefixValue={{link.prefixValue}}
|
||||||
|
@prefixCSSClass={{link.prefixCSSClass}}
|
||||||
|
@suffixType={{link.suffixType}}
|
||||||
|
@suffixValue={{link.suffixValue}}
|
||||||
|
@suffixCSSClass={{link.suffixCSSClass}}
|
||||||
|
@hoverType={{link.hoverType}}
|
||||||
|
@hoverValue={{link.hoverValue}}
|
||||||
|
@hoverAction={{link.hoverAction}}
|
||||||
|
@hoverTitle={{link.hoverTitle}}
|
||||||
|
@currentWhen={{link.currentWhen}}
|
||||||
|
@content={{link.text}} />
|
||||||
|
{{/each}}
|
||||||
|
</Sidebar::Section>
|
||||||
|
{{/each}}
|
||||||
|
|
||||||
|
{{!-- DO NOT USE, this outlet is temporary and will be removed. --}}
|
||||||
|
{{!-- Outlet will be replaced with sidebar API. --}}
|
||||||
|
<PluginOutlet @name="after-sidebar" />
|
||||||
|
</div>
|
||||||
|
|
@ -45,6 +45,8 @@
|
||||||
@import "share_link";
|
@import "share_link";
|
||||||
@import "shared-drafts";
|
@import "shared-drafts";
|
||||||
@import "sidebar";
|
@import "sidebar";
|
||||||
|
@import "sidebar-section";
|
||||||
|
@import "sidebar-section-link";
|
||||||
@import "tagging";
|
@import "tagging";
|
||||||
@import "tooltip";
|
@import "tooltip";
|
||||||
@import "topic-admin-menu";
|
@import "topic-admin-menu";
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
.sidebar-section-link-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.sidebar-section-link {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.35em 0.5em;
|
||||||
|
color: var(--primary-high);
|
||||||
|
font-size: var(--font-down-1);
|
||||||
|
transition: background-color 0.25s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--primary-low);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: var(--primary);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section-link-content-badge {
|
||||||
|
@include ellipsis;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
text-align: right;
|
||||||
|
color: var(--tertiary);
|
||||||
|
font-size: var(--font-down-1);
|
||||||
|
font-weight: normal;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section-link-content-text {
|
||||||
|
@include ellipsis;
|
||||||
|
|
||||||
|
.badge-wrapper {
|
||||||
|
font-size: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.category-name {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section-link-personal-messages-sent,
|
||||||
|
.sidebar-section-link-personal-messages-new,
|
||||||
|
.sidebar-section-link-personal-messages-archive,
|
||||||
|
.sidebar-section-link-personal-messages-unread,
|
||||||
|
.sidebar-section-link-group-messages-new,
|
||||||
|
.sidebar-section-link-group-messages-unread,
|
||||||
|
.sidebar-section-link-group-messages-archive {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section-link-prefix {
|
||||||
|
&.image {
|
||||||
|
img {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 20px;
|
||||||
|
aspect-ratio: auto 20 / 20;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 0.75em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.text {
|
||||||
|
border-radius: 3px;
|
||||||
|
background: rgba(var(--primary-rgb), 0.1);
|
||||||
|
text-align: center;
|
||||||
|
font-size: var(--font-down-1);
|
||||||
|
padding: 0.2em 0.5em;
|
||||||
|
margin-right: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon {
|
||||||
|
position: relative;
|
||||||
|
margin-right: 0.75em;
|
||||||
|
|
||||||
|
svg.prefix-badge {
|
||||||
|
position: absolute;
|
||||||
|
background-color: var(--secondary);
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 2px 2px 3px;
|
||||||
|
color: var(--primary-high);
|
||||||
|
height: 0.5rem;
|
||||||
|
width: 0.5rem;
|
||||||
|
margin-left: -0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section-link-suffix.icon {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section-link-hover {
|
||||||
|
.sidebar-section-hover-button {
|
||||||
|
display: none;
|
||||||
|
color: var(--primary-medium);
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0.35em 0.5em;
|
||||||
|
transition: background-color 0.25s;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
font-size: var(--font-down-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.sidebar-section-hover-button {
|
||||||
|
background: var(--primary-low);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.sidebar-section-hover-button {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-outlet-wrapper .sidebar-section-link-wrapper {
|
||||||
|
margin-left: 1.5em;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
.sidebar-section-wrapper {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
|
||||||
|
.sidebar-section-header {
|
||||||
|
display: flex;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
.select-kit {
|
||||||
|
.btn {
|
||||||
|
background: transparent;
|
||||||
|
&:hover {
|
||||||
|
background: var(--primary-low);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.d-icon {
|
||||||
|
font-size: var(--font-down-1);
|
||||||
|
color: var(--primary-medium);
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
summary {
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section-header-link,
|
||||||
|
.sidebar-section-header-text {
|
||||||
|
@include ellipsis;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
color: var(--primary);
|
||||||
|
font-size: var(--font-down-1);
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section-header-link {
|
||||||
|
&:visited {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--primary-low);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section-header-button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
|
||||||
|
.d-icon {
|
||||||
|
font-size: $font-down-1;
|
||||||
|
color: var(--primary-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--primary-low);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.select-kit-collection {
|
||||||
|
.texts {
|
||||||
|
font-size: var(--font-0);
|
||||||
|
text-transform: none;
|
||||||
|
line-height: var(--line-height-medium);
|
||||||
|
.name {
|
||||||
|
font-size: var(--font-0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section-message-wrapper {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section-message {
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
font-size: var(--font-down-1);
|
||||||
|
color: var(--primary-high);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section-header-caret {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 1.5em;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.25s;
|
||||||
|
transition-delay: 0.5s;
|
||||||
|
.discourse-no-touch & {
|
||||||
|
&:hover {
|
||||||
|
svg {
|
||||||
|
color: var(--primary-high);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
display: block;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
transition: color 0.25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-icon {
|
||||||
|
font-size: $font-down-1;
|
||||||
|
color: var(--primary-medium);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-section-content {
|
||||||
|
hr {
|
||||||
|
margin: 0em 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-outlet-wrapper .sidebar-section-wrapper {
|
||||||
|
.sidebar-section-message-wrapper {
|
||||||
|
margin-left: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -105,285 +105,4 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-section-wrapper {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-header {
|
|
||||||
display: flex;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: bold;
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
.select-kit {
|
|
||||||
.btn {
|
|
||||||
background: transparent;
|
|
||||||
&:hover {
|
|
||||||
background: var(--primary-low);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.d-icon {
|
|
||||||
font-size: var(--font-down-1);
|
|
||||||
color: var(--primary-medium);
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
summary {
|
|
||||||
padding: 0.25em 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-header-link,
|
|
||||||
.sidebar-section-header-text {
|
|
||||||
@include ellipsis;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
color: var(--primary);
|
|
||||||
font-size: var(--font-down-1);
|
|
||||||
padding: 0.25em 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-header-link {
|
|
||||||
&:visited {
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--primary-low);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-header-button {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
padding: 0.25em 0.5em;
|
|
||||||
|
|
||||||
.d-icon {
|
|
||||||
font-size: $font-down-1;
|
|
||||||
color: var(--primary-medium);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--primary-low);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.select-kit-collection {
|
|
||||||
.texts {
|
|
||||||
font-size: var(--font-0);
|
|
||||||
text-transform: none;
|
|
||||||
line-height: var(--line-height-medium);
|
|
||||||
.name {
|
|
||||||
font-size: var(--font-0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-link-wrapper {
|
|
||||||
margin-left: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-link {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.35em 0.5em;
|
|
||||||
color: var(--primary-high);
|
|
||||||
font-size: var(--font-down-1);
|
|
||||||
transition: background-color 0.25s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--primary-low);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
color: var(--primary);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-link-content-badge {
|
|
||||||
@include ellipsis;
|
|
||||||
padding-left: 0.5em;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-link-content-text {
|
|
||||||
@include ellipsis;
|
|
||||||
|
|
||||||
.badge-wrapper {
|
|
||||||
font-size: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.category-name {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-message-wrapper {
|
|
||||||
display: flex;
|
|
||||||
margin-left: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-message {
|
|
||||||
padding: 0.25em 0.5em;
|
|
||||||
font-size: var(--font-down-1);
|
|
||||||
color: var(--primary-high);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-link-content-badge {
|
|
||||||
color: var(--tertiary);
|
|
||||||
font-size: var(--font-down-1);
|
|
||||||
font-weight: normal;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-header-caret {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
width: 1.5em;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
padding: 0;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.25s;
|
|
||||||
transition-delay: 0.5s;
|
|
||||||
.discourse-no-touch & {
|
|
||||||
&:hover {
|
|
||||||
svg {
|
|
||||||
color: var(--primary-high);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
display: block;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
transition: color 0.25s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-icon {
|
|
||||||
font-size: $font-down-1;
|
|
||||||
color: var(--primary-medium);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-content {
|
|
||||||
hr {
|
|
||||||
margin: 0em 1.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-link-personal-messages-sent,
|
|
||||||
.sidebar-section-link-personal-messages-new,
|
|
||||||
.sidebar-section-link-personal-messages-archive,
|
|
||||||
.sidebar-section-link-personal-messages-unread,
|
|
||||||
.sidebar-section-link-group-messages-new,
|
|
||||||
.sidebar-section-link-group-messages-unread,
|
|
||||||
.sidebar-section-link-group-messages-archive {
|
|
||||||
margin-left: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#main-outlet-wrapper .sidebar-section-wrapper {
|
|
||||||
.sidebar-section-link-prefix {
|
|
||||||
&.image {
|
|
||||||
img {
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 20px;
|
|
||||||
aspect-ratio: auto 20 / 20;
|
|
||||||
height: 20px;
|
|
||||||
margin-right: 0.75em;
|
|
||||||
}
|
|
||||||
&.active img {
|
|
||||||
box-shadow: 0px 0px 0px 1px var(--success);
|
|
||||||
border: 1px solid var(--secondary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.text {
|
|
||||||
display: flex;
|
|
||||||
border-radius: 3px;
|
|
||||||
background: rgba(var(--primary-rgb), 0.1);
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: var(--font-down-1);
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
margin-right: 0.75em;
|
|
||||||
}
|
|
||||||
&.icon {
|
|
||||||
position: relative;
|
|
||||||
margin-right: 0.75em;
|
|
||||||
svg.prefix-badge {
|
|
||||||
position: absolute;
|
|
||||||
background-color: var(--secondary);
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: 2px 2px 3px;
|
|
||||||
color: var(--primary-high);
|
|
||||||
height: 0.5rem;
|
|
||||||
width: 0.5rem;
|
|
||||||
margin-left: -0.4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sidebar-section-link-suffix.icon {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
margin-left: 0.5em;
|
|
||||||
svg {
|
|
||||||
width: 0.75em;
|
|
||||||
height: 0.75em;
|
|
||||||
}
|
|
||||||
&.urgent svg {
|
|
||||||
color: $success;
|
|
||||||
}
|
|
||||||
&.unread svg {
|
|
||||||
color: var(--tertiary-med-or-tertiary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.sidebar-section-chat-dms {
|
|
||||||
.sidebar-section-content {
|
|
||||||
.sidebar-section-link-wrapper {
|
|
||||||
display: inline-flex;
|
|
||||||
.sidebar-section-hover-button {
|
|
||||||
display: none;
|
|
||||||
color: var(--primary-medium);
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
.sidebar-section-link-hover {
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sidebar-section-link-wrapper:hover {
|
|
||||||
background: var(--primary-low);
|
|
||||||
transition: background-color 0.25s;
|
|
||||||
padding-right: 0.5em;
|
|
||||||
.sidebar-section-hover-button {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
a.sidebar-section-link {
|
|
||||||
width: calc(var(--d-sidebar-width) - 50px);
|
|
||||||
&:hover {
|
|
||||||
background: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-hover-button {
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
padding-left: 0.25em;
|
|
||||||
padding-right: 0.25em;
|
|
||||||
margin-left: 0.25em;
|
|
||||||
svg {
|
|
||||||
height: 0.75em;
|
|
||||||
width: 0.75em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue