Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
discourse/app/assets/stylesheets/common/base/sidebar-section-link.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

134 lines
2.8 KiB
SCSS
Raw Normal View History

DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 02:37:07 -04:00
.sidebar-section-link-wrapper {
display: flex;
align-items: center;
.sidebar-section-link {
FEATURE: Replace hamburger dropdown with Sidebar when undock (#17600) When the experimental Sidebar is enabled, the hamburger drop down is replaced by a sidebar drop down. A user is given the ability to dock and undock the sidebar depending on their personal preference. Do also note that the experimental sidebar is well, considered experimental at this point so I do not intend for the features here to be perfect. What I aim to do here is to ship the changes fast so that it can be used internally by the team to provide feedback. Custom links added by plugins and dark mode toggle has not been implemented as part of this commit as I aim to tackle it in another commit. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-07-22 01:06:47 -04:00
box-sizing: border-box;
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 02:37:07 -04:00
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;
}