mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-27 08:42:09 +08:00
b47e429b26
A follow-up to #31343. ``` WARNING: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in `& {}`. More info: https://sass-lang.com/d/mixed-decls ```
120 lines
2.4 KiB
SCSS
Vendored
120 lines
2.4 KiB
SCSS
Vendored
body.composer-open .chat-drawer-outlet-container {
|
|
bottom: 11px; // prevent height of grippie from obscuring ...is typing indicator
|
|
}
|
|
|
|
.chat-drawer-resizer {
|
|
position: absolute;
|
|
top: -5px;
|
|
width: 15px;
|
|
height: 15px;
|
|
z-index: z("composer", "content");
|
|
|
|
.is-collapsed & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
html:not(.rtl) {
|
|
.chat-drawer-resizer {
|
|
cursor: nwse-resize;
|
|
left: -5px;
|
|
}
|
|
}
|
|
|
|
html.rtl {
|
|
.chat-drawer-resizer {
|
|
cursor: nesw-resize;
|
|
right: -5px;
|
|
}
|
|
}
|
|
|
|
.chat-drawer-outlet-container {
|
|
// higher than timeline, lower than composer, dropdown, and user card
|
|
z-index: z("chat-drawer");
|
|
position: fixed;
|
|
right: var(--composer-right, 20px);
|
|
left: 0;
|
|
max-height: calc(100% - var(--header-offset) - 15px);
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
pointer-events: none !important;
|
|
bottom: 0;
|
|
box-sizing: border-box;
|
|
padding-bottom: var(--composer-height, 0);
|
|
transition: all 100ms ease-in;
|
|
transition-property: bottom, padding-bottom;
|
|
|
|
.rtl & {
|
|
left: var(--composer-right, 20px);
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.chat-drawer {
|
|
pointer-events: auto;
|
|
align-self: flex-end;
|
|
width: 400px;
|
|
min-width: 250px !important; // important to override inline styles
|
|
max-width: calc(100% - var(--composer-right));
|
|
min-height: 300px !important; // important to override inline styles
|
|
|
|
.chat-drawer-container {
|
|
background: var(--secondary);
|
|
border: 1px solid var(--primary-low);
|
|
border-bottom: 0;
|
|
border-top-left-radius: var(--d-border-radius-large);
|
|
border-top-right-radius: var(--d-border-radius-large);
|
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.125);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&.is-expanded {
|
|
.chat-drawer-container {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
&.is-collapsed {
|
|
min-height: 0 !important;
|
|
height: auto !important;
|
|
max-width: 25vw;
|
|
}
|
|
|
|
.chat-channel,
|
|
.chat-thread,
|
|
.chat-thread-list {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.chat-drawer-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
min-height: 1px;
|
|
position: relative;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
|
|
@include chat-scrollbar;
|
|
|
|
.c-channel-settings {
|
|
flex-grow: 1;
|
|
|
|
.chat-form {
|
|
height: 100%;
|
|
}
|
|
|
|
.chat-form__section.--leave-channel {
|
|
margin-top: auto;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
