github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-18 17:12:45 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

improve sidebar header sub-hovers (#18083)

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

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

@ -94,7 +94,7 @@
background: rgba(var(--primary-rgb), 0.1);
text-align: center;
font-size: var(--font-down-1);
padding: 0.2em 0.47em;
padding: 0.27em 0.47em;
margin-right: 0.25em;
position: absolute;
+ .sidebar-section-link-content-text {

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

@ -1,33 +1,41 @@
.sidebar-section-wrapper {
.sidebar-section-header-wrapper {
display: flex;
align-items: stretch;
box-sizing: border-box;
padding: 0;
.select-kit {
.btn {
background: transparent;
&:focus,
&:hover {
background: var(--d-sidebar-highlight-color);
}
.discourse-no-touch & {
&:hover {
background: var(--d-sidebar-highlight-color);
}
}
&:focus-within {
background: var(--d-sidebar-highlight-color);
}
.btn.dropdown-select-box-header,
.sidebar-section-header-button {
background: transparent;
border: none;
padding: calc(var(--d-sidebar-row-horizontal-padding) / 5)
calc(var(--d-sidebar-row-horizontal-padding) / 3);
margin-right: calc(var(--d-sidebar-row-horizontal-padding) / 1.5);
.d-icon {
font-size: var(--font-down-1);
color: var(--primary-medium);
margin-right: 0;
margin: 0;
}
summary {
height: 100%;
padding: 0 var(--d-sidebar-row-horizontal-padding) 0
calc(var(--d-sidebar-row-horizontal-padding) / 2);
&:focus,
&:focus {
outline: none;
background: var(--primary-medium);
.d-icon {
color: var(--primary-very-low);
}
}
.discourse-no-touch & {
&:hover {
border-color: transparent;
background: var(--primary-medium);
.d-icon {
color: var(--primary);
color: var(--primary-very-low);
}
}
}
@ -49,14 +57,6 @@
&.sidebar-section-header-collapsable {
justify-content: flex-start;
.discourse-no-touch & {
&:hover {
background: var(--primary-200);
}
}
&:focus {
background: var(--primary-200);
}
}
}
@ -74,30 +74,6 @@
flex: 0 0 auto;
}
.sidebar-section-header-button {
background: transparent;
border: none;
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);
}
.discourse-no-touch & {
&:hover,
&:focus {
outline: none;
background: var(--primary-200);
.d-icon {
color: var(--primary);
}
}
}
}
.select-kit-collection {
.texts {
font-size: var(--font-0);