discourse/app/assets/stylesheets/common/base/sidebar-section-link.scss

192 lines
4.3 KiB
SCSS

:root {
--d-sidebar-section-link-prefix-margin-right: 0.35rem;
--d-sidebar-section-link-prefix-width: 1.35rem;
}
.sidebar-section-link-wrapper {
display: flex;
align-items: center;
position: relative;
.sidebar-section-link {
display: inline-flex;
width: 100%;
align-items: center;
color: var(--primary-high);
transition: background-color 0.25s;
&:focus,
&:hover {
background: var(--d-sidebar-highlight-color);
outline: none;
}
&.active {
color: var(--primary-800);
background: var(--d-sidebar-highlight-color);
.sidebar-section-link-prefix {
&.icon {
color: var(--primary-medium);
}
}
}
.sidebar-section-link-content-badge {
@include ellipsis;
padding-left: 0.5em;
padding-right: 0.1em; // avoids some overflow cropping
text-align: right;
color: var(--primary-700);
font-size: var(--font-down-2);
font-weight: normal;
margin-left: auto;
}
.sidebar-section-link-suffix {
margin-left: 1em;
font-size: var(--font-down-4);
color: var(--tertiary-medium);
}
.sidebar-section-link-content-text {
@include ellipsis;
.emoji {
width: 15px;
height: 15px;
}
.badge-wrapper {
font-size: 100%;
width: 100%;
.category-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.sidebar-section-link[data-link-name="personal-messages-sent"],
.sidebar-section-link[data-link-name="personal-messages-new"],
.sidebar-section-link[data-link-name="personal-messages-archive"],
.sidebar-section-link[data-link-name="personal-messages-unread"],
.sidebar-section-link[data-link-name="group-messages-new"],
.sidebar-section-link[data-link-name="group-messages-unread"],
.sidebar-section-link[data-link-name="group-messages-archive"] {
.sidebar-section-link-content-text {
margin-left: calc(
var(--d-sidebar-section-link-prefix-margin-right) +
var(--d-sidebar-section-link-prefix-width)
);
}
}
.sidebar-section-link-review {
.sidebar-section-link-content-badge {
color: var(--danger);
}
}
.sidebar-section-link-prefix {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--d-sidebar-section-link-prefix-width);
height: var(--d-sidebar-section-link-prefix-width);
margin-right: var(--d-sidebar-section-link-prefix-margin-right);
&.image {
img {
border-radius: 100%;
aspect-ratio: auto 20 / 20;
width: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
height: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
}
}
&.text {
text-align: center;
.prefix-text {
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
background: rgba(var(--primary-rgb), 0.1);
width: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
height: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
font-size: var(--font-down-2);
}
}
&.icon,
&.span {
position: relative;
color: var(--primary-500);
svg {
font-size: 0.8em;
}
.prefix-badge {
position: absolute;
background-color: transparent;
border-radius: 50%;
padding: 2px 2px 3px;
color: var(--primary-high);
height: 0.5rem;
width: 0.5rem;
top: -0.2em;
right: 0;
margin-right: -0.2em;
}
}
.prefix-span {
width: 0.8em;
height: 0.8em;
}
}
.sidebar-section-link-hover {
margin-left: auto;
.sidebar-section-hover-button {
display: none;
color: var(--primary-medium);
border: none;
background: transparent;
padding: 0 0 0 0.5em;
height: 100%;
transition: background-color 0.25s;
&:focus,
.discourse-no-touch & {
&:hover {
color: var(--primary);
}
}
svg {
font-size: var(--font-down-1);
}
}
&:hover {
.sidebar-section-hover-button {
background: var(--primary-low);
}
}
}
&:hover {
.sidebar-section-hover-button {
display: block;
}
}
}