github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-01 18:18:33 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
2bcad12848
discourse/app/assets/stylesheets/common/base/sidebar-section.scss

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

93 lines
1.7 KiB
SCSS
Raw Normal View History

DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
.sidebar-section-wrapper {
margin-bottom: 1em;
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-section-header-wrapper {
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
display: flex;
align-items: stretch;
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
box-sizing: border-box;
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
.select-kit {
.btn {
background: transparent;
UX: sidebar transition and styling adjustments (#17678)
2022-07-27 11:16:34 +08:00
&:focus,
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
&:hover {
UX: sidebar transition and styling adjustments (#17678)
2022-07-27 11:16:34 +08:00
background: var(--d-sidebar-highlight-color);
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
}
}
.d-icon {
font-size: var(--font-down-1);
color: var(--primary-medium);
margin-right: 0;
}
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
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
summary {
padding: 0.25em 0.5em;
}
}
}
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-section-header {
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
@include ellipsis;
flex: 1 1 auto;
DEV: Use button for sidebar section header Buttons can be focused and action triggered via the enter key compared to a span.
2022-08-18 20:14:44 +08:00
text-transform: uppercase;
font-weight: bold;
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
font-size: var(--font-1);
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
color: var(--primary);
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
align-items: center;
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
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-section-header-collapsable {
DEV: Use button for sidebar section header Buttons can be focused and action triggered via the enter key compared to a span.
2022-08-18 20:14:44 +08:00
justify-content: flex-start;
padding: 0;
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
}
}
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-section-header-text {
font-weight: bold;
margin-right: 0.25em;
}
.sidebar-section-header-caret {
font-size: var(--font-down-2);
}
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
.sidebar-section-header-button {
background: none;
border: none;
padding: 0.25em 0.5em;
.d-icon {
FEATURE: Replace hamburger dropdown with Sidebar when undock (#17600) When the experimental Sidebar is enabled, the hamburger drop down is replaced by a sidebar drop down. A user is given the ability to dock and undock the sidebar depending on their personal preference. Do also note that the experimental sidebar is well, considered experimental at this point so I do not intend for the features here to be perfect. What I aim to do here is to ship the changes fast so that it can be used internally by the team to provide feedback. Custom links added by plugins and dark mode toggle has not been implemented as part of this commit as I aim to tackle it in another commit. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-07-22 13:06:47 +08:00
font-size: var(--font-down-1);
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
color: var(--primary-medium);
}
UX: sidebar transition and styling adjustments (#17678)
2022-07-27 11:16:34 +08:00
&:focus,
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
&:hover {
UX: sidebar transition and styling adjustments (#17678)
2022-07-27 11:16:34 +08:00
background: var(--d-sidebar-highlight-color);
DEV: Refactor sidebar components to prepare for integration into hamburger dropdown (#17566)
2022-07-19 14:37:07 +08:00
}
}
.select-kit-collection {
.texts {
font-size: var(--font-0);
text-transform: none;
line-height: var(--line-height-medium);
.name {
font-size: var(--font-0);
}
}
}
.sidebar-section-message-wrapper {
display: flex;
}
.sidebar-section-message {
color: var(--primary-high);
}
.sidebar-section-content {
hr {
margin: 0em 1.5em;
}
}
}
Reference in New Issue Copy Permalink