diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss index db265307ad7..e70816d4c71 100644 --- a/app/assets/stylesheets/common/base/sidebar-section-link.scss +++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss @@ -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; } } diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss index 5ae08441a64..6177a3c2bde 100644 --- a/app/assets/stylesheets/common/base/sidebar-section.scss +++ b/app/assets/stylesheets/common/base/sidebar-section.scss @@ -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; diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss index 6bd10f9df95..df39a9eb167 100644 --- a/app/assets/stylesheets/common/base/sidebar.scss +++ b/app/assets/stylesheets/common/base/sidebar.scss @@ -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 { diff --git a/app/assets/stylesheets/desktop/menu-panel.scss b/app/assets/stylesheets/desktop/menu-panel.scss index 4d96b94bc80..e074aed6115 100644 --- a/app/assets/stylesheets/desktop/menu-panel.scss +++ b/app/assets/stylesheets/desktop/menu-panel.scss @@ -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 {