我正在我的应用中构建聊天组件。
我有以下内容:
我想在时间的右边定位刻度线,并将刻度线设为蓝色。就像WhatsApp那样。
任何CSS建议都表示赞赏。
谢谢
HTML
<span class="time-tick">
<span class="message-timestamp">{{message.createdAt | amDateFormat: 'h:mm a'}}</span>
<div *ngIf="message.readByReceiver && senderId == message.senderId">
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
</div>
</span>
CSS
.messages-page-navbar {
.chat-picture {
width: 50px;
border-radius: 50%;
float: left;
}
.chat-title {
line-height: 50px;
float: left;
}
}
.messages-page-content {
> scroll-content {
padding: 0;
}
.messages {
height: 100%;
background-image: url(/assets/chat-background.jpg);
background-color: #E0DAD6;
background-repeat: no-repeat;
background-size: cover;
}
.message-wrapper {
margin-bottom: 9px;
&::after {
content: "";
display: table;
clear: both;
}
}
.message {
display: inline-block;
position: relative;
max-width: 236px;
border-radius: 7px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
&.message-mine {
float: right;
background-color: #DCF8C6;
&::before {
right: -11px;
background-image: url(/assets/message-mine.png)
}
}
&.message-other {
float: left;
background-color: #FFF;
&::before {
left: -11px;
background-image: url(/assets/message-other.png)
}
}
&.message-other::before, &.message-mine::before {
content: "";
position: absolute;
bottom: 3px;
width: 12px;
height: 19px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
}
.message-content {
padding: 5px 7px;
word-wrap: break-word;
&::after {
content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
display: inline;
}
}
.message-timestamp {
position: absolute;
bottom: 2px;
right: 7px;
font-size: 12px;
color: gray;
}
}
}
.message-datetime {
font-size: 11px;
color: grey;
}
.messages-page-footer {
padding-right: 0;
.message-editor {
margin-left: 2px;
padding-left: 5px;
background: white;
border-radius: 3px;
}
.message-editor-button {
background: color($colors, whatsapp);
box-shadow: none;
width: 50px;
height: 50px;
font-size: 17px;
margin: auto;
}
}
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.checkmark_stem {
position: absolute;
width:3px;
height:9px;
background-color:#ccc;
left:11px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:3px;
height:3px;
background-color:#ccc;
left:8px;
top:12px;
}
.time-tick {
display:inline-block;
}
答案 0 :(得分:2)
在CSS中的message-timestamp
下,将right
值从7px
增加到约15px
。
然后在.checkmark
下添加以下内容:
position: absolute;
bottom: 2px;
right: 7px;