2023-05-16 23:17:12 +08:00
|
|
|
.chat-composer-button {
|
|
|
|
box-sizing: border-box;
|
2023-05-31 21:12:35 +08:00
|
|
|
width: 50px;
|
|
|
|
border: 0;
|
|
|
|
height: 50px;
|
|
|
|
background: none;
|
2023-05-16 23:17:12 +08:00
|
|
|
|
2023-05-31 21:12:35 +08:00
|
|
|
.is-disabled & {
|
|
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__wrapper {
|
2023-05-16 23:17:12 +08:00
|
|
|
box-sizing: border-box;
|
2023-05-31 21:12:35 +08:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2023-05-31 22:58:31 +08:00
|
|
|
align-self: flex-end;
|
2023-05-31 21:12:35 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.d-icon {
|
|
|
|
color: var(--primary-low-mid);
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: var(--primary-low-mid);
|
|
|
|
}
|
|
|
|
|
2023-06-06 17:18:50 +08:00
|
|
|
.is-focused & {
|
2023-05-31 21:12:35 +08:00
|
|
|
color: var(--primary-high);
|
|
|
|
}
|
|
|
|
|
|
|
|
.is-disabled & {
|
|
|
|
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 & {
|
|
|
|
animation: sendingScales 1s infinite linear;
|
|
|
|
}
|
|
|
|
|
|
|
|
.d-icon {
|
|
|
|
.is-send-enabled.is-focused & {
|
|
|
|
color: var(--tertiary);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
2023-05-31 22:58:31 +08:00
|
|
|
.d-icon {
|
|
|
|
.is-send-enabled & {
|
|
|
|
transform: scale(1.2);
|
|
|
|
}
|
2023-05-31 21:12:35 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.-emoji {
|
2023-05-31 22:58:31 +08:00
|
|
|
.d-icon {
|
|
|
|
.is-focused & {
|
|
|
|
color: var(--tertiary);
|
|
|
|
}
|
2023-05-31 21:12:35 +08:00
|
|
|
}
|
2023-05-16 23:17:12 +08:00
|
|
|
}
|
|
|
|
}
|