IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-29 04:03:57 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: more apparent focus styles for sidebar headers (#18078)

Browse Source
This commit is contained in:
Kris 2022-08-24 14:13:26 -04:00 committed by GitHub
parent 03a599f457
commit ba4a4d3297
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {

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

@ -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);
}