mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-27 10:35:36 +08:00
d06c60ca7c
This feature allow admins to personalize their communities by associating emojis or icons with their site categories. There are now 3 style types for categories: - Square (the default) - Emoji - Icon ### How it looks 🎨 Adding an icon: <img width="502" alt="Category with an icon" src="https://github.com/user-attachments/assets/8f711340-166e-4781-a7b7-7267469dbabd" /> Adding an emoji: <img width="651" alt="Category with an emoji" src="https://github.com/user-attachments/assets/588c38ce-c719-4ed5-83f9-f1e1cb52c929" /> Sidebar: <img width="248" alt="Sidebar with emojis" src="https://github.com/user-attachments/assets/cd03d591-6170-4515-998c-0cec20118568" /> Category menus: <img width="621" alt="Screenshot 2025-03-13 at 10 32 30 AM" src="https://github.com/user-attachments/assets/7d89797a-f69f-45e5-bf64-a92d4cff8753" /> Within posts/topics: <img width="382" alt="Screenshot 2025-03-13 at 10 33 41 AM" src="https://github.com/user-attachments/assets/b7b1a951-44c6-4a4f-82ad-8ee31ddd6061" /> Chat messages: <img width="392" alt="Screenshot 2025-03-13 at 10 30 20 AM" src="https://github.com/user-attachments/assets/126f8076-0ea3-4f19-8452-1041fd2af29f" /> Autocomplete: <img width="390" alt="Screenshot 2025-03-13 at 10 29 53 AM" src="https://github.com/user-attachments/assets/cad75669-225f-4b8e-a7b5-ae5aa8f1bcad" /> --------- Co-authored-by: Martin Brennan <martin@discourse.org> Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
66 lines
1.1 KiB
SCSS
Vendored
66 lines
1.1 KiB
SCSS
Vendored
.form-kit__container {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
&.--column {
|
|
.form-kit__container-content {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
display: inline;
|
|
gap: 0.25em;
|
|
margin: 0;
|
|
font-size: var(--font-down-1-rem);
|
|
color: var(--primary-high);
|
|
font-weight: bold;
|
|
padding-bottom: 0.25em;
|
|
}
|
|
|
|
&-subtitle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
margin: 0;
|
|
font-size: var(--font-down-1-rem);
|
|
color: var(--primary-high);
|
|
padding-bottom: 0.25em;
|
|
|
|
> * {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&-optional {
|
|
font-size: var(--font-down-2-rem);
|
|
color: var(--primary-high-or-secondary-low);
|
|
font-weight: normal;
|
|
}
|
|
|
|
&-content {
|
|
display: flex;
|
|
gap: 0.25em;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
max-width: 100%;
|
|
|
|
&.--small {
|
|
width: var(--form-kit-small-input) !important;
|
|
}
|
|
|
|
&.--medium {
|
|
width: var(--form-kit-medium-input);
|
|
}
|
|
|
|
&.--large {
|
|
width: var(--form-kit-large-input);
|
|
}
|
|
|
|
&.--full {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
}
|
