github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-02 19:35:20 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
c7cebbfe38
discourse/plugins/chat/assets/stylesheets/mixins/chat-scrollbar.scss

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

44 lines
1.0 KiB
SCSS
Raw Normal View History

UX: multiple minor improvements (#20917) - Raises the scroll distance to 250px instead of 100px to show the arrow down button - Always have a margin on drawer when showing channel list, removes this margin when the scrollbar is apparent - Makes all scrollbar used in chat look the same through the chat-scrollbar mixin - Ensures hover state is not persistent on channel row in mobile - Makes the channel row full width on mobile
2023-04-03 16:46:38 +08:00
@mixin chat-scrollbar() {
DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +08:00
--scrollbarBg: transparent;
--scrollbarThumbBg: var(--primary-low);
UX: multiple minor improvements (#20917) - Raises the scroll distance to 250px instead of 100px to show the arrow down button - Always have a margin on drawer when showing channel list, removes this margin when the scrollbar is apparent - Makes all scrollbar used in chat look the same through the chat-scrollbar mixin - Ensures hover state is not persistent on channel row in mobile - Makes the channel row full width on mobile
2023-04-03 16:46:38 +08:00
--scrollbarWidth: 10px;
DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +08:00
scrollbar-color: transparent var(--scrollbarBg);
transition: scrollbar-color 0.25s ease-in-out;
FIX: show scrollbars under firefox in chat (#21587)
2023-05-16 22:44:15 +08:00
// chrome, safari
DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +08:00
&::-webkit-scrollbar-thumb {
UX: multiple minor improvements (#20917) - Raises the scroll distance to 250px instead of 100px to show the arrow down button - Always have a margin on drawer when showing channel list, removes this margin when the scrollbar is apparent - Makes all scrollbar used in chat look the same through the chat-scrollbar mixin - Ensures hover state is not persistent on channel row in mobile - Makes the channel row full width on mobile
2023-04-03 16:46:38 +08:00
background-color: var(--scrollbarThumbBg);
DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +08:00
border-radius: calc(var(--scrollbarWidth) / 2);
UX: multiple minor improvements (#20917) - Raises the scroll distance to 250px instead of 100px to show the arrow down button - Always have a margin on drawer when showing channel list, removes this margin when the scrollbar is apparent - Makes all scrollbar used in chat look the same through the chat-scrollbar mixin - Ensures hover state is not persistent on channel row in mobile - Makes the channel row full width on mobile
2023-04-03 16:46:38 +08:00
border: calc(var(--scrollbarWidth) / 4) solid var(--secondary);
DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +08:00
}
UX: multiple minor improvements (#20917) - Raises the scroll distance to 250px instead of 100px to show the arrow down button - Always have a margin on drawer when showing channel list, removes this margin when the scrollbar is apparent - Makes all scrollbar used in chat look the same through the chat-scrollbar mixin - Ensures hover state is not persistent on channel row in mobile - Makes the channel row full width on mobile
2023-04-03 16:46:38 +08:00
&::-webkit-scrollbar-track {
background-color: transparent;
DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +08:00
}
UX: multiple minor improvements (#20917) - Raises the scroll distance to 250px instead of 100px to show the arrow down button - Always have a margin on drawer when showing channel list, removes this margin when the scrollbar is apparent - Makes all scrollbar used in chat look the same through the chat-scrollbar mixin - Ensures hover state is not persistent on channel row in mobile - Makes the channel row full width on mobile
2023-04-03 16:46:38 +08:00
DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +08:00
&::-webkit-scrollbar {
width: var(--scrollbarWidth);
}
FIX: show scrollbars under firefox in chat (#21587)
2023-05-16 22:44:15 +08:00
// firefox
& {
scrollbar-color: var(--scrollbarThumbBg) var(--scrollbarBg);
scrollbar-width: thin;
}
&::-moz-scrollbar-thumb {
background-color: var(--scrollbarThumbBg);
border-radius: calc(var(--scrollbarWidth) / 2);
border: calc(var(--scrollbarWidth) / 4) solid var(--secondary);
}
&::-moz-scrollbar-track {
background-color: transparent;
}
&::-moz-scrollbar {
width: var(--scrollbarWidth);
}
DEV: Move `discourse-chat` to the core repo. (#18776) As part of this move, we are also renaming `discourse-chat` to `chat`.
2022-11-02 21:41:30 +08:00
}
Reference in New Issue Copy Permalink