mirror of
https://github.com/discourse/discourse.git
synced 2026-08-11 02:59:07 +08:00
2655f4673dThe new channel form was looking a little long in the tooth, and updating it to formkit makes a lot of general improvements. Before: <img width="350" alt="image" src="https://github.com/user-attachments/assets/20836a59-86e8-4989-a2c5-9c104208b2b9" /> After: <img width="350" alt="image" src="https://github.com/user-attachments/assets/f3bdec2f-49b2-4dbc-ba54-c6e3f51288c6" /> Also updated some general chat styles... we were missing a lot of general shared styles here before/after <img width="450" alt="image" src="https://github.com/user-attachments/assets/58bd6e4e-584f-49c9-9b61-ac36dac13626" /> <img width="450" alt="image" src="https://github.com/user-attachments/assets/82b9da42-854c-4829-a09d-3f258e846fb1" /> before/after <img width="450" alt="image" src="https://github.com/user-attachments/assets/5885866d-7955-4b0c-92f7-dad8a29dd7ca" /> <img width="450" alt="image" src="https://github.com/user-attachments/assets/1d6b6a47-d47e-4005-912d-a6108e15d2b3" /> before/after <img width="400" alt="image" src="https://github.com/user-attachments/assets/c948521c-7571-4281-975f-f2f41fe8bad5" /> <img width="400" alt="image" src="https://github.com/user-attachments/assets/a87df09c-0574-4f2f-95c1-afd06ad6f6e4" />
98 lines
1.5 KiB
SCSS
Vendored
98 lines
1.5 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
.chat-composer-button {
|
|
box-sizing: border-box;
|
|
border: 0;
|
|
height: 50px;
|
|
background: none;
|
|
padding-inline: 0.75rem;
|
|
|
|
@include viewport.until(sm) {
|
|
width: 50px;
|
|
}
|
|
|
|
.is-disabled & {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&__wrapper {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
|
|
&:hover {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.is-focused & {
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.is-disabled & {
|
|
color: var(--primary-low-mid);
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
&.-send {
|
|
will-change: scale;
|
|
|
|
@keyframes sendingScales {
|
|
0% {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
.is-send-disabled & {
|
|
cursor: default;
|
|
}
|
|
|
|
.chat-composer.is-sending & {
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
animation: sendingScales 1s infinite linear;
|
|
}
|
|
}
|
|
|
|
.d-icon {
|
|
.is-send-enabled.is-focused & {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.d-icon {
|
|
.is-send-enabled & {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.--emoji {
|
|
transition: transform 0.1s ease-in-out;
|
|
|
|
&:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.d-icon {
|
|
.is-focused & {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
}
|
|
}
|
