IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 10:20:58 -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 {
--d-sidebar-section-link-prefix-margin-right: 0.5rem;
--d-sidebar-section-link-prefix-width: 20px;
--d-sidebar-section-link-prefix-margin-right: 0.35rem;
--d-sidebar-section-link-prefix-width: 1.35rem;
}
.sidebar-section-link-wrapper {
@ -22,12 +22,12 @@
}
&.active {
color: var(--primary);
color: var(--primary-800);
background: var(--d-sidebar-highlight-color);
.sidebar-section-link-prefix {
&.icon {
color: var(--primary-high);
&.icon svg {
color: var(--primary-medium);
}
}
}
@ -38,7 +38,7 @@
padding-right: 0.1em; // avoids some overflow cropping
text-align: right;
color: var(--primary-700);
font-size: var(--font-down-1);
font-size: var(--font-down-2);
font-weight: normal;
margin-left: auto;
}
@ -120,17 +120,17 @@
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-1);
font-size: var(--font-down-2);
}
}
&.icon,
&.span {
position: relative;
color: var(--primary-medium);
color: var(--primary-500);
svg {
font-size: var(--font-down-1);
font-size: 0.8em;
}
.prefix-badge {
@ -147,8 +147,8 @@
}
}
.prefix-span {
width: 0.87em;
height: 0.87em;
width: 0.8em;
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 {
.discourse-no-touch & {
&:hover {
@ -16,7 +12,6 @@
.sidebar-section-header-wrapper {
display: flex;
font-size: var(--d-sidebar-section-header-text-font-size);
.discourse-no-touch & {
&:hover {
@ -141,7 +136,7 @@
}
.sidebar-section-content {
padding-bottom: 1.25em;
padding-bottom: 0.875em;
margin: 0;
hr {
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
--d-sidebar-row-horizontal-padding: 1.25rem;
// ems so height is variable along with font size
--d-sidebar-row-height: 2.15em;
--d-sidebar-row-height: 2.1em;
}
.sidebar-row {

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

@ -11,7 +11,7 @@
// Sidebar-hamburger hybrid
.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-height: 30px;
// 1.25rem gets text left-aligned with the hamburger icon
@ -30,8 +30,7 @@
.sidebar-section-link.active {
font-weight: normal;
color: var(--primary-high);
background: var(--tertiary-low);
background: var(--d-hover);
}
.sidebar-section-header-wrapper .select-kit .btn:hover {