github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-26 09:53:44 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity
b6dfe5e394
discourse/app/assets/stylesheets/desktop/menu-panel.scss

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

62 lines
1.2 KiB
SCSS
Raw Normal View History

DEV: Introduce a basic version of the new notifications menu behind a feature flag (#17492)
2022-07-19 10:35:02 +08:00
.menu-panel {
&.user-menu.revamped {
width: unset;
}
.panel-body {
max-height: calc(100vh - 100px);
}
FIX: ensure menu not too tall on desktop only Followup to af65809e, menu-panel shorter than 100vh does not look good on mobile.
2019-11-04 07:47:53 +08:00
}
UX: Make Sidebar more consistent with user menu on mobile (#17940) Before this commit, we carried custom code and styles for the sidebar on mobile. This meant the look and feel of bringing up the sidebar on mobile was very different from the user menu resulting in a very inconsistent experience on mobile. Also, we could not leverage on the existing swipe to close support on mobile. In this commit, we made it such that the sidebar dropdown is always rendered on mobile and made the interaction with the dropdown more consistent with the user menu. There is also more parity with the old hamburger dropdown when the experimental sidebar is disabled.
2022-08-16 13:45:32 +08:00
// Sidebar-hamburger hybrid
.hamburger-panel .revamped {
--d-sidebar-highlight-color: var(--highlight-medium);
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
--d-sidebar-row-horizontal-padding: 0.5rem;
UX: Make Sidebar more consistent with user menu on mobile (#17940) Before this commit, we carried custom code and styles for the sidebar on mobile. This meant the look and feel of bringing up the sidebar on mobile was very different from the user menu resulting in a very inconsistent experience on mobile. Also, we could not leverage on the existing swipe to close support on mobile. In this commit, we made it such that the sidebar dropdown is always rendered on mobile and made the interaction with the dropdown more consistent with the user menu. There is also more parity with the old hamburger dropdown when the experimental sidebar is disabled.
2022-08-16 13:45:32 +08:00
width: var(--d-sidebar-width);
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
.sidebar-row {
padding: 0.25rem var(--d-sidebar-row-horizontal-padding);
height: 27px;
align-items: center;
font-size: var(--font-down-1);
}
UX: Make Sidebar more consistent with user menu on mobile (#17940) Before this commit, we carried custom code and styles for the sidebar on mobile. This meant the look and feel of bringing up the sidebar on mobile was very different from the user menu resulting in a very inconsistent experience on mobile. Also, we could not leverage on the existing swipe to close support on mobile. In this commit, we made it such that the sidebar dropdown is always rendered on mobile and made the interaction with the dropdown more consistent with the user menu. There is also more parity with the old hamburger dropdown when the experimental sidebar is disabled.
2022-08-16 13:45:32 +08:00
.panel-body-content {
width: 100%;
min-width: 0; // prevent content blowing out width
}
.sidebar-section-wrapper {
.sidebar-section-header-button {
opacity: 1;
}
.sidebar-section-link.active {
font-weight: normal;
color: var(--primary-high);
background: var(--tertiary-low);
}
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-24 09:33:15 +08:00
.sidebar-section-header-wrapper .select-kit .btn:hover {
background: transparent;
}
}
.sidebar-section-link-wrapper
.sidebar-section-link-hover:hover
.sidebar-section-hover-button {
background: transparent;
UX: Make Sidebar more consistent with user menu on mobile (#17940) Before this commit, we carried custom code and styles for the sidebar on mobile. This meant the look and feel of bringing up the sidebar on mobile was very different from the user menu resulting in a very inconsistent experience on mobile. Also, we could not leverage on the existing swipe to close support on mobile. In this commit, we made it such that the sidebar dropdown is always rendered on mobile and made the interaction with the dropdown more consistent with the user menu. There is also more parity with the old hamburger dropdown when the experimental sidebar is disabled.
2022-08-16 13:45:32 +08:00
}
.sidebar-footer-wrapper {
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-24 09:33:15 +08:00
padding: 0;
.sidebar-footer-container {
padding: 0;
&:before {
top: calc(-100% + 2px);
}
}
UX: Make Sidebar more consistent with user menu on mobile (#17940) Before this commit, we carried custom code and styles for the sidebar on mobile. This meant the look and feel of bringing up the sidebar on mobile was very different from the user menu resulting in a very inconsistent experience on mobile. Also, we could not leverage on the existing swipe to close support on mobile. In this commit, we made it such that the sidebar dropdown is always rendered on mobile and made the interaction with the dropdown more consistent with the user menu. There is also more parity with the old hamburger dropdown when the experimental sidebar is disabled.
2022-08-16 13:45:32 +08:00
}
}
Reference in New Issue Copy Permalink