diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss index e3d0cbd5949..906d3bc611d 100644 --- a/app/assets/stylesheets/common/base/sidebar-section-link.scss +++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss @@ -90,12 +90,16 @@ } &.text { - border-radius: 3px; + border-radius: 100%; background: rgba(var(--primary-rgb), 0.1); text-align: center; font-size: var(--font-down-1); - padding: 0.2em 0.5em; + padding: 0.2em 0.47em; margin-right: 0.25em; + position: absolute; + + .sidebar-section-link-content-text { + margin-left: calc(20px + 0.5em); + } } &.icon { diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss index 29915bbf1bf..6b787f0c000 100644 --- a/app/assets/stylesheets/common/base/sidebar-section.scss +++ b/app/assets/stylesheets/common/base/sidebar-section.scss @@ -7,13 +7,6 @@ box-sizing: border-box; padding: 0; - .discourse-no-touch & { - &:hover, - &:focus-within { - background: var(--d-sidebar-highlight-color); - } - } - .select-kit { .btn { background: transparent; @@ -58,9 +51,13 @@ &.sidebar-section-header-collapsable { justify-content: flex-start; - + .discourse-no-touch & { + &:hover { + background: var(--primary-200); + } + } &:focus { - background: transparent; + background: var(--primary-200); } } } @@ -80,11 +77,12 @@ } .sidebar-section-header-button { - background: none; + background: transparent; border: none; - padding: 0 var(--d-sidebar-row-horizontal-padding) 0 + padding: calc(var(--d-sidebar-row-horizontal-padding) / 4) + var(--d-sidebar-row-horizontal-padding) + calc(var(--d-sidebar-row-horizontal-padding) / 4) calc(var(--d-sidebar-row-horizontal-padding) / 2); - .d-icon { font-size: var(--font-down-1); color: var(--primary-medium); @@ -94,6 +92,7 @@ &:hover, &:focus { outline: none; + background: var(--primary-200); .d-icon { color: var(--primary); }