ershisan99/home-works
1
0
Fork 0
mirror of https://github.com/IgnatZakalinsky/home-works.git synced 2026-01-22 12:32:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

hw1

Browse Source
This commit is contained in:
Andres
2022-06-22 20:39:35 +02:00
parent e1642e5f26
commit b590d5b197
8 changed files with 255 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/s2-homeworks/hw01/Message.module.css
View File

@@ -1,26 +1,176 @@
.message {
display: flex;
justify-content: right;
border: 1px solid lime;
margin: 10px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
margin: 24px 0 23px;
}
.friendMessage {
display: flex;
border: 1px solid red;
margin: 10px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin: 24px 0 23px;
}
.imageAndMessage {
display: flex;
flex-direction: row-reverse;
align-items: flex-end;
}
.friendImageAndMessage {
display: flex;
align-items: flex-end;
}
.friendName {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 22px;
text-align: start;
}
.name {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 22px;
color: white;
text-align: end;
}
.text {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: white;
}
.friendText {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 20px;
}
.messageText {
position: relative;
width: 100%;
max-width: 70%;
height: 100%;
background-color: #06c;
box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03), 0 1px 2px rgba(29, 33, 38, 0.1);
display: flex;
flex-direction: column;
margin-right: 20px;
padding: 7px 25px 8px 13px;
border-radius: 10px;
}
.messageText:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -15px;
left: auto;
top: auto;
bottom: 0;
border: 16px solid;
border-color: transparent transparent #06c transparent;
}
.friendMessageText {
position: relative;
width: 100%;
max-width: 70%;
height: 100%;
background-color: #f5f7fb;
display: flex;
flex-direction: column;
margin-left: 20px;
padding: 7px 25px 8px 13px;
border-radius: 10px;
}
.friendMessageText:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
right: auto;
left: -15px;
top: auto;
bottom: 0;
border: 16px solid;
border-color: transparent transparent #f5f7fb transparent;
}
.sendForm {
display: flex;
justify-content: right;
margin: 10px;
gap: 44px;
}
.textarea {
box-sizing: border-box;
background: #f5f7fb;
box-shadow: 0 5px 20px rgba(29, 33, 38, 0.03), 0 1px 2px rgba(29, 33, 38, 0.1);
border-radius: 20px;
width: 100%;
border: none;
resize: none;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 16px;
padding: 12px 25px;
}
.button {
width: 120px;
height: 40px;
background: #06c;
border-radius: 20px;
border: none;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: white;
}
.button:hover {
cursor: pointer;
}
.time {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 10px;
line-height: 12px;
margin-top: 5px;
width: 48px;
text-align: center;
}
img {
border-radius: 50%;
width: 48px;
height: 48px;
}
.friendTime {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 10px;
line-height: 12px;
margin-top: 5px;
width: 48px;
text-align: center;
}
}