github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-16 03:52:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: fix and improve sidebar CSS variables (#30673)

Browse Source
This commit is contained in:
Kris 2025-01-09 14:18:05 -05:00 committed by GitHub
parent fa8e2b4af8
commit c39893364b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 51 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/stylesheets/common/base/sidebar-footer.scss
View File

@ -24,8 +24,8 @@
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
transparent,
var(--d-sidebar-footer-fade)
);
}
}

4
app/assets/stylesheets/common/base/sidebar-more-section-links.scss
View File

@ -2,7 +2,7 @@
background-color: var(--d-sidebar-background);
transition: background-color 0.25s;
box-shadow: var(--shadow-card);
border: 1px solid var(--primary-low);
border: 1px solid var(--d-sidebar-border-color);
margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);
.sidebar-row {
@ -16,7 +16,7 @@
}
.sidebar-more-section-links-details-content-footer {
border-top: 2px solid var(--primary-low);
border-top: 2px solid var(--d-sidebar-border-color);
display: flex;
width: 100%;

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

@ -34,24 +34,33 @@
&:focus,
&:hover {
background: var(--d-sidebar-highlight-background);
color: var(--d-sidebar-highlight-color);
outline: none;
.prefix-text {
background: var(--d-sidebar-highlight-prefix-background);
}
.sidebar-section-link-suffix.icon.unread svg {
color: var(--d-sidebar-highlight-suffix-color);
}
}
&--active,
&.active {
background: var(--d-selected);
background: var(--d-sidebar-active-background);
color: var(--d-sidebar-active-color);
font-weight: bold;
.sidebar-section-link-prefix {
&.icon {
color: var(--d-sidebar-highlight-color);
color: var(--d-sidebar-active-color);
}
}
.sidebar-section-link-content-badge,
.sidebar-section-link-suffix.icon.unread svg {
color: var(--d-sidebar-active-suffix-color);
}
.sidebar-section-link-hover:hover .sidebar-section-hover-button {
background-color: var(--d-selected);
background-color: var(--d-sidebar-active-background);
}
}
@ -87,7 +96,7 @@
}
&.unread svg {
color: var(--tertiary-med-or-tertiary);
color: var(--d-sidebar-suffix-color);
}
}
}
@ -196,6 +205,7 @@
justify-content: center;
border-radius: 100%;
background: var(--d-sidebar-prefix-background);
color: var(--d-sidebar-prefix-color);
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-2);
@ -206,7 +216,7 @@
.sidebar-section-hover-button {
display: none;
color: var(--d-sidebar-link-icon-color);
color: var(--d-sidebar-highlight-color);
border: none;
background: transparent;
padding: 0 0 0 0.5em;

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

@ -66,7 +66,7 @@
min-width: 0;
padding: 0;
font-size: var(--font-down-2-rem);
color: var(--primary-medium);
color: var(--d-sidebar-header-color);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.05em;
@ -75,7 +75,10 @@
justify-content: flex-start;
&:hover {
color: var(--primary-medium);
color: var(--d-sidebar-header-color);
.d-icon {
color: var(--d-sidebar-header-icon-color);
}
}
&:focus {

33
app/assets/stylesheets/common/base/sidebar.scss
View File

@ -3,35 +3,54 @@
@include breakpoint(large) {
--d-sidebar-width: #{$d-sidebar-narrow-width};
}
--d-sidebar-animation-time: 0.25s;
--d-sidebar-animation-ease: ease-in-out;
// 1.25rem gets text left-aligned with the hamburger icon
--d-sidebar-row-horizontal-padding: 1rem;
// ems so height is variable along with font size
--d-sidebar-row-height: 2.2em;
--d-sidebar-animation-time: 0.25s;
--d-sidebar-animation-ease: ease-in-out;
--d-sidebar-background: var(--secondary);
--d-sidebar-admin-background: var(--primary-very-low);
--d-sidebar-prefix-background: var(
--primary-low
); // example: chat participant count
--d-sidebar-header-color: var(--primary);
// must be rgba for gradient
--d-sidebar-footer-fade: rgba(var(--secondary-rgb), 1);
--d-sidebar-header-color: var(--primary-medium);
--d-sidebar-header-icon-color: var(--primary-medium);
--d-sidebar-border-color: var(--primary-low);
--d-sidebar-link-color: var(--primary-high);
--d-sidebar-link-icon-color: var(--primary-500);
--d-sidebar-link-badge-color: var(--primary-700); // example: new count
// example: chat participant count
--d-sidebar-prefix-background: var(--primary-low);
--d-sidebar-prefix-color: var(--d-sidebar-link-color);
// example: unread dot
--d-sidebar-suffix-color: var(--tertiary-med-or-tertiary);
// highlight applies to both hover and focus states
--d-sidebar-highlight-background: var(--primary-low);
--d-sidebar-highlight-color: var(--primary-high);
--d-sidebar-highlight-prefix-background: var(--primary-300);
--d-sidebar-highlight-prefix-color: var(--d-sidebar-highlight-color);
--d-sidebar-highlight-suffix-color: var(--tertiary-med-or-tertiary);
--d-sidebar-highlight-hover-background: var(
--primary-medium
); // example: hovering a button within a highlighted section
--d-sidebar-highlight-hover-icon: var(
--primary-very-low
); // example: hovering a button within a highlighted section
--d-sidebar-active-background: var(--d-selected);
--d-sidebar-active-color: var(--d-sidebar-link-color);
--d-sidebar-active-icon-color: var(--d-sidebar-link-color);
--d-sidebar-active-prefix-background: var(--primary-300);
--d-sidebar-active-suffix-color: var(--tertiary-med-or-tertiary);
}
.sidebar-row {

2
app/assets/stylesheets/desktop/components/sidebar/sidebar-section.scss
View File

@ -1,6 +1,6 @@
.sidebar-section-wrapper {
padding-block: 0.35rem;
border-bottom: 1px solid var(--secondary-very-high);
border-bottom: 1px solid var(--d-sidebar-border-color);
&:first-child {
padding-top: 0;
}