IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: more style adjustments for larger sidebar font (#21751)

Browse Source
This commit is contained in:
Kris 2023-05-25 11:21:30 -04:00 committed by GitHub
parent d52198356c
commit 442b5538bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/assets/stylesheets/common/base/sidebar-section-link.scss
View File

@ -1,6 +1,6 @@
:root { :root {
--d-sidebar-section-link-prefix-margin-right: 0.5rem; --d-sidebar-section-link-prefix-margin-right: 0.35rem;
--d-sidebar-section-link-prefix-width: 20px; --d-sidebar-section-link-prefix-width: 1.35rem;
} }
.sidebar-section-link-wrapper { .sidebar-section-link-wrapper {
@ -22,12 +22,12 @@
} }
&.active { &.active {
color: var(--primary); color: var(--primary-800);
background: var(--d-sidebar-highlight-color); background: var(--d-sidebar-highlight-color);
.sidebar-section-link-prefix { .sidebar-section-link-prefix {
&.icon { &.icon svg {
color: var(--primary-high); color: var(--primary-medium);
} }
} }
} }
@ -38,7 +38,7 @@
padding-right: 0.1em; // avoids some overflow cropping padding-right: 0.1em; // avoids some overflow cropping
text-align: right; text-align: right;
color: var(--primary-700); color: var(--primary-700);
font-size: var(--font-down-1); font-size: var(--font-down-2);
font-weight: normal; font-weight: normal;
margin-left: auto; margin-left: auto;
} }
@ -120,17 +120,17 @@
background: rgba(var(--primary-rgb), 0.1); background: rgba(var(--primary-rgb), 0.1);
width: calc(var(--d-sidebar-section-link-prefix-width) - 2px); width: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
height: calc(var(--d-sidebar-section-link-prefix-width) - 2px); height: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
font-size: var(--font-down-1); font-size: var(--font-down-2);
} }
} }
&.icon, &.icon,
&.span { &.span {
position: relative; position: relative;
color: var(--primary-medium); color: var(--primary-500);
svg { svg {
font-size: var(--font-down-1); font-size: 0.8em;
} }
.prefix-badge { .prefix-badge {
@ -147,8 +147,8 @@
} }
} }
.prefix-span { .prefix-span {
width: 0.87em; width: 0.8em;
height: 0.87em; height: 0.8em;
} }
} }

7
app/assets/stylesheets/common/base/sidebar-section.scss
View File

@ -1,7 +1,3 @@
:root {
--d-sidebar-section-header-text-font-size: var(--font-up-1);
}
.sidebar-section-wrapper { .sidebar-section-wrapper {
.discourse-no-touch & { .discourse-no-touch & {
&:hover { &:hover {
@ -16,7 +12,6 @@
.sidebar-section-header-wrapper { .sidebar-section-header-wrapper {
display: flex; display: flex;
font-size: var(--d-sidebar-section-header-text-font-size);
.discourse-no-touch & { .discourse-no-touch & {
&:hover { &:hover {
@ -141,7 +136,7 @@
} }
.sidebar-section-content { .sidebar-section-content {
padding-bottom: 1.25em; padding-bottom: 0.875em;
margin: 0; margin: 0;
hr { hr {
margin: 0em 1.5em; margin: 0em 1.5em;

2
app/assets/stylesheets/common/base/sidebar.scss
View File

@ -8,7 +8,7 @@
// 1.25rem gets text left-aligned with the hamburger icon // 1.25rem gets text left-aligned with the hamburger icon
--d-sidebar-row-horizontal-padding: 1.25rem; --d-sidebar-row-horizontal-padding: 1.25rem;
// ems so height is variable along with font size // ems so height is variable along with font size
--d-sidebar-row-height: 2.15em; --d-sidebar-row-height: 2.1em;
} }
.sidebar-row { .sidebar-row {

5
app/assets/stylesheets/desktop/menu-panel.scss
View File

@ -11,7 +11,7 @@
// Sidebar-hamburger hybrid // Sidebar-hamburger hybrid
.hamburger-panel .revamped { .hamburger-panel .revamped {
--d-sidebar-highlight-color: var(--highlight-medium); --d-sidebar-highlight-color: var(--d-hover);
--d-sidebar-row-horizontal-padding: 0.5rem; --d-sidebar-row-horizontal-padding: 0.5rem;
--d-sidebar-row-height: 30px; --d-sidebar-row-height: 30px;
// 1.25rem gets text left-aligned with the hamburger icon // 1.25rem gets text left-aligned with the hamburger icon
@ -30,8 +30,7 @@
.sidebar-section-link.active { .sidebar-section-link.active {
font-weight: normal; font-weight: normal;
color: var(--primary-high); background: var(--d-hover);
background: var(--tertiary-low);
} }
.sidebar-section-header-wrapper .select-kit .btn:hover { .sidebar-section-header-wrapper .select-kit .btn:hover {