FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 19:15:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Implement rich text area

Browse Source
This commit is contained in:
denis0001-dev
2025-09-17 00:07:55 +03:00
Unverified
parent a22c53d225
commit a2ba33edb6
5 changed files with 303 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/resources/css/_chat.scss
+35 -26
View File
@@ -260,6 +260,7 @@
.chat-input-wrapper {
position: relative;
margin: 0 20px 20px 20px;
&::before {
$height: 20px;
@@ -278,43 +279,51 @@
);
}
.chat-input {
margin: 0 20px 20px 20px;
background-color: $color-dark-surface-container;
border-radius: 40px;
.input-group {
.input-group {
display: flex;
.chat-input {
background-color: $color-dark-surface-container;
border-radius: 30px;
flex: 1;
display: flex;
flex-direction: row;
.message-input {
flex: 1;
padding: 10px 20px;
padding: 20px 20px;
padding-right: 0;
border: none;
border-radius: 25px;
font-size: 1rem;
outline: none;
background-color: inherit;
caret-color: $color-dark-primary;
color: $color-dark-on-surface;
}
.send-btn {
margin: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: $color-dark-primary;
color: $color-dark-on-primary;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.25s ease;
@include hoverStateLayer($background: $color-dark-primary);
resize: none;
font: inherit;
font-size: 13pt;
height: 100%;
width: 100%;
}
}
.send-btn {
margin: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: $color-dark-primary;
color: $color-dark-on-primary;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.25s ease;
align-self: flex-end;
@include hoverStateLayer($background: $color-dark-primary);
}
}
}
}
frontend/src/resources/css/common/_components.scss
+9
View File
@@ -114,4 +114,13 @@ button, input {
justify-content: flex-end;
margin-top: 1rem;
}
}
.rich-text-area {
width: 100%;
resize: none;
transition: height 0.2s ease;
overflow-y: hidden;
background-color: transparent;
display: block;
}