framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
89 lines (88 loc) • 2.1 kB
text/less
.ios {
.messagebar {
a.link.icon-only:first-child {
margin-left: -8px;
}
a.link.icon-only:last-child {
margin-right: -8px;
}
a.link:not(.icon-only) + .messagebar-area {
margin-left: 8px;
}
.messagebar-area + a.link:not(.icon-only) {
margin-left: 8px;
}
}
.messagebar-area {
margin-top: 5px;
margin-bottom: 5px;
}
.messagebar-attachments {
padding: 5px;
border-radius: var(--f7-messagebar-textarea-border-radius)
var(--f7-messagebar-textarea-border-radius) 0 0;
border: 1px solid var(--f7-messagebar-attachments-border-color);
border-bottom: none;
}
.messagebar-attachments-visible {
.messagebar-attachments + textarea {
border-radius: 0 0 var(--f7-messagebar-textarea-border-radius)
var(--f7-messagebar-textarea-border-radius);
}
}
.messagebar-attachment {
font-size: 14px;
+ .messagebar-attachment {
.ltr({
margin-left: 8px;
});
.rtl({
margin-right: 8px;
});
}
}
.messagebar-attachment-delete {
right: 5px;
top: 5px;
width: 20px;
height: 20px;
background: #7d7e80;
border: 2px solid #fff;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
&:after,
&:before {
width: 10px;
height: 2px;
background: #fff;
margin-left: -5px;
margin-top: -1px;
}
}
.messagebar-sheet-image,
.messagebar-sheet-item {
box-sizing: border-box;
flex-shrink: 0;
margin-top: 1px;
position: relative;
overflow: hidden;
height: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
width: calc((var(--f7-messagebar-sheet-height) - 2px) / 2);
.ltr({
margin-left: 1px;
});
.rtl({
margin-right: 1px;
});
@media (orientation: landscape) {
width: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
height: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
}
.icon-checkbox,
.icon-radio {
position: absolute;
right: 8px;
bottom: 8px;
z-index: 1;
}
}
}