mirror of
https://github.com/discourse/discourse.git
synced 2026-08-12 05:37:26 +08:00
6bcb38f410This consolidates various empty states to use a single `EmptyState` component. I've also added a new state when there are no pending invites. I've moved the SVGs to stand-alone components in a `components/svg/` directory. I believe these need to be embedded (rather than separate `.svg` assets) because we're using color variables within. Most of the `EmptyState` component is optional so it should be flexible. An optional tip block is used for when we may need to utilize an action instead of a link (as invites do). The invite tip includes a prefix and suffix so translators can adjust as needed for their locale. The existing empty states should only change slightly... New  Unread  Chat channels  Plus the new invite state:  These simpler empty states are also using the component now, it will now be easy to enhance these with illustrations in the future as well.  
78 lines
1.5 KiB
SCSS
Vendored
78 lines
1.5 KiB
SCSS
Vendored
.btn-floating.open-new-message-btn {
|
|
position: fixed;
|
|
background: var(--tertiary);
|
|
bottom: 5rem;
|
|
right: 2rem;
|
|
border-radius: 50%;
|
|
font-size: var(--font-up-3);
|
|
padding: 0.5rem;
|
|
transition:
|
|
transform 0.25s ease,
|
|
box-shadow 0.25s ease;
|
|
z-index: z("usercard");
|
|
box-shadow: 0 5px 5px -1px rgb(0, 0, 0, 0.25);
|
|
|
|
.d-icon {
|
|
color: var(--primary-very-low);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 0 5px -1px rgb(0, 0, 0, 0.25);
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
&:focus {
|
|
@include default-focus;
|
|
border-color: var(--d-nav-color--active);
|
|
outline-color: var(--d-nav-color--active);
|
|
}
|
|
}
|
|
|
|
.channels-list,
|
|
.channels-list-container {
|
|
position: relative;
|
|
height: 100%;
|
|
padding-bottom: 1rem;
|
|
|
|
@include chat-scrollbar;
|
|
|
|
.open-browse-page-btn,
|
|
.open-draft-channel-page-btn,
|
|
.chat-channel-leave-btn {
|
|
position: relative;
|
|
padding: 0;
|
|
background: transparent;
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-0-rem);
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
}
|
|
|
|
&:hover {
|
|
background: transparent;
|
|
|
|
.d-icon {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-channel-divider {
|
|
padding: 0.5rem 1rem 0.5rem 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-family: var(--heading-font-family);
|
|
color: var(--primary);
|
|
|
|
.channel-title {
|
|
line-height: var(--line-height-medium);
|
|
}
|
|
}
|
