github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-29 01:08:34 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
53d861414d
discourse/app/assets/stylesheets/common/base/sidebar-footer.scss

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

98 lines
1.9 KiB
SCSS
Raw Normal View History

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
.sidebar-wrapper {
.sidebar-footer-wrapper {
.sidebar-footer-container {
margin-right: 0.15em;
UX: sidebar transition and styling adjustments (#17678)
2022-07-27 11:16:34 +08:00
margin-left: 1em;
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
}
}
}
.sidebar-footer-wrapper {
border-top: 1.5px solid var(--primary-low);
padding: 0.5em 0 0.5em 0.33em;
.sidebar-footer-container {
display: flex;
UX: sidebar transition and styling adjustments (#17678)
2022-07-27 11:16:34 +08:00
align-items: stretch;
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
}
.sidebar-footer-link {
UX: sidebar transition and styling adjustments (#17678)
2022-07-27 11:16:34 +08:00
display: inline-flex;
align-items: center;
height: 100%;
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);
color: var(--primary-high);
UX: sidebar transition and styling adjustments (#17678)
2022-07-27 11:16:34 +08:00
padding: 0 0.5em;
&:hover,
&:focus {
background: var(--d-sidebar-highlight-color);
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
}
}
UX: sidebar transition and styling adjustments (#17678)
2022-07-27 11:16:34 +08:00
.sidebar-footer-links-separator {
color: var(--primary-low-mid);
}
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
.sidebar-footer-actions {
margin-left: auto;
}
.sidebar-footer-actions-button.btn {
background: transparent;
border: none;
padding: 0.25em 0.4em;
.d-icon {
font-size: var(--font-down-1);
color: var(--primary-medium);
}
UX: sidebar transition and styling adjustments (#17678)
2022-07-27 11:16:34 +08:00
&:focus,
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
&:hover {
UX: sidebar transition and styling adjustments (#17678)
2022-07-27 11:16:34 +08:00
background: var(--d-sidebar-highlight-color);
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
}
}
}
.sidebar-footer-wrapper {
background: var(--primary-very-low);
.desktop-view & {
position: sticky;
bottom: 0;
.sidebar-footer-container {
position: relative;
&:before {
// fade to make scroll more apparent
position: absolute;
content: "";
display: block;
height: 1.5em;
top: calc(-2em - 1px);
left: -0.5em;
right: -0.5em;
pointer-events: none;
background: linear-gradient(
to bottom,
FIX: Linear gradient with stops makes R2 confused (#17650) Context: https://meta.discourse.org/t/the-theme-is-broken-in-right-to-left-languages-even-in-meta/233908 We use the R2 gem to do the magic RTL CSS conversion. There are cases where we feed it too much, and it gets confused. The issue here is that we use a linear gradient with CSS variables, an RGBA function, and we set the stops. This makes R2 choke and causes it to return jumbled CSS, which means that any CSS that comes after that rule is junk and doesn't apply. This PR removes the stops from the gradient. This shouldn't cause any visual changes since these are the default stops. More explanation of the issue here: https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268/6?u=johani
2022-07-26 03:03:02 +08:00
transparent,
rgba(var(--primary-very-low-rgb), 1)
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
);
}
}
}
}
.hamburger-menu.revamped {
.sidebar-footer-wrapper {
background: var(--secondary);
.sidebar-footer-container {
&:before {
// fade to make scroll more apparent
background: linear-gradient(
to bottom,
FIX: Linear gradient with stops makes R2 confused (#17650) Context: https://meta.discourse.org/t/the-theme-is-broken-in-right-to-left-languages-even-in-meta/233908 We use the R2 gem to do the magic RTL CSS conversion. There are cases where we feed it too much, and it gets confused. The issue here is that we use a linear gradient with CSS variables, an RGBA function, and we set the stops. This makes R2 choke and causes it to return jumbled CSS, which means that any CSS that comes after that rule is junk and doesn't apply. This PR removes the stops from the gradient. This shouldn't cause any visual changes since these are the default stops. More explanation of the issue here: https://meta.discourse.org/t/user-card-will-not-open-on-the-mobile/171268/6?u=johani
2022-07-26 03:03:02 +08:00
transparent,
rgba(var(--secondary-rgb), 1)
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
);
}
}
}
}
Reference in New Issue Copy Permalink