github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-02 12:03:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
d6d5eae16f
discourse/app/assets/stylesheets/common/base/sidebar-more-section-links.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

49 lines
1.3 KiB
SCSS
Raw Normal View History

FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
.btn-flat.sidebar-more-section-links-details-summary {
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-24 09:33:15 +08:00
&:focus-within,
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
&:active,
UX: Revamp styling of sidebar The following changes are made in this commit: 1. Move caret icon in sidebar section header to the right. 1. Each row in sidebar takes the full width which enables us to do a full width highlight on hover and when sidebar link is active. 1. Ensure each row in Sidebar is of the same height. Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 15:03:28 +08:00
&:hover {
background: var(--d-sidebar-highlight-color);
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
svg.d-icon {
color: var(--primary-medium);
UX: Reduce number of links displayed in Community by default (#17703) Additional links are hidden by default and can be accessed via the "more..." link.
2022-07-28 16:46:46 +08:00
}
}
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
height: var(--d-sidebar-row-height);
color: var(--primary-high);
display: flex;
list-style: none;
box-sizing: border-box;
width: 100%;
padding: var(--d-sidebar-row-vertical-padding)
var(--d-sidebar-row-horizontal-padding);
font-size: var(--d-sidebar-row-font-size);
justify-content: left;
UX: Reduce number of links displayed in Community by default (#17703) Additional links are hidden by default and can be accessed via the "more..." link.
2022-07-28 16:46:46 +08:00
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
svg.d-icon {
width: var(--d-sidebar-section-link-prefix-width);
margin-right: var(--d-sidebar-section-link-prefix-margin-right);
color: var(--primary-medium);
font-size: var(--font-down-1);
UX: Revamp styling of sidebar The following changes are made in this commit: 1. Move caret icon in sidebar section header to the right. 1. Each row in sidebar takes the full width which enables us to do a full width highlight on hover and when sidebar link is active. 1. Ensure each row in Sidebar is of the same height. Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 15:03:28 +08:00
}
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
}
.sidebar-more-section-links-details-content {
background-color: var(--secondary);
transition: background-color 0.25s;
box-shadow: shadow("dropdown");
margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);
UX: Revamp styling of sidebar The following changes are made in this commit: 1. Move caret icon in sidebar section header to the right. 1. Each row in sidebar takes the full width which enables us to do a full width highlight on hover and when sidebar link is active. 1. Ensure each row in Sidebar is of the same height. Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 15:03:28 +08:00
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
.sidebar-row {
padding: 0.33rem calc(var(--d-sidebar-row-horizontal-padding) / 3);
UX: Reduce number of links displayed in Community by default (#17703) Additional links are hidden by default and can be accessed via the "more..." link.
2022-07-28 16:46:46 +08:00
}
}
FIX: jumpy more sidebar section (#21430) Bug introduced in PR https://github.com/discourse/discourse/pull/21398 More section needs to be wrapped in div with position:relative to have sticky and absolute position.
2023-05-08 12:33:24 +08:00
.sidebar-more-section-links-details-content-main {
position: sticky;
}
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
.sidebar-more-section-links-details-content-wrapper {
position: absolute;
width: 100%;
z-index: z("modal", "content") + 1;
FIX: jumpy more sidebar section (#21430) Bug introduced in PR https://github.com/discourse/discourse/pull/21398 More section needs to be wrapped in div with position:relative to have sticky and absolute position.
2023-05-08 12:33:24 +08:00
}
.sidebar-more-section-links-details {
position: relative;
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
}
Reference in New Issue Copy Permalink