293be5d9f6
The :before technique for adding the icon was removed, because it resulted in some rendering issues when the layout pressure in the message bubble got too high - you would see a partial icon. This solution shrinks the icon a bit when the filename wants to expand to take its space. The iOS bubble width also needed special care to ensure it didn't expand to accommodate the very wide filenames. Beyond that, overflow: hidden needed to be applied at several levels to make everything behave as expected. FREEBIE
74 lines
1.4 KiB
SCSS
74 lines
1.4 KiB
SCSS
.android {
|
|
#header {
|
|
background-color: $blue;
|
|
color: white;
|
|
transition: background-color 0.5s;
|
|
|
|
&.inactive {
|
|
background-color: $grey_l;
|
|
color: $grey_d;
|
|
}
|
|
}
|
|
.contact-details .name {
|
|
font-weight: 400;
|
|
}
|
|
.conversation.placeholder .conversation-header {
|
|
display: none;
|
|
}
|
|
.conversation-header, .bubble {
|
|
@include avatar-colors;
|
|
}
|
|
.bottom-bar {
|
|
min-height: 10px;
|
|
}
|
|
.bubble {
|
|
padding: 9px 12px;
|
|
border-radius: $border-radius;
|
|
box-shadow: 0 3px 3px -4px black;
|
|
}
|
|
|
|
.outgoing .bubble {
|
|
background-color: white;
|
|
}
|
|
.outgoing .hourglass {
|
|
@include hourglass(#999);
|
|
}
|
|
.incoming .hourglass {
|
|
@include hourglass(#fff);
|
|
}
|
|
|
|
.incoming .bubble {
|
|
.sender, .content, .body, .meta, a, .fileView {
|
|
@include invert-text-color;
|
|
}
|
|
.attachments, .content {
|
|
a {
|
|
color: $grey_l;
|
|
}
|
|
}
|
|
}
|
|
|
|
.incoming .bubble .fileView .icon {
|
|
@include color-svg('/images/file.svg', white);
|
|
}
|
|
|
|
button.clock {
|
|
@include header-icon-white('/images/clock.svg');
|
|
}
|
|
.inactive button.clock {
|
|
@include header-icon-black('/images/clock.svg');
|
|
}
|
|
button.hamburger {
|
|
@include header-icon-white('/images/menu.svg');
|
|
}
|
|
.inactive button.hamburger {
|
|
@include header-icon-black('/images/menu.svg');
|
|
}
|
|
button.back {
|
|
@include header-icon-white('/images/back.svg');
|
|
}
|
|
.inactive button.back {
|
|
@include header-icon-black('/images/back.svg');
|
|
}
|
|
|
|
}
|