thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

iOS bubble tails

Browse source 
// FREEBIE
This commit is contained in:
lilia 2016-08-31 16:15:08 -07:00
parent 65cb7c0e9c
commit 6d0a535f4a
2 changed files with 64 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
stylesheets/_themes.scss
View file

@ -104,14 +104,37 @@ $ios-border-color: rgba(0,0,0,0.1);
} }
} }
.control .content { .control .content {
padding: 10px; padding: 10px;
} }
.bubble { .bubble {
.content .body { .content {
display: inline-block; margin-bottom: 5px;
padding: 10px; .body {
display: inline-block;
padding: 10px;
position: relative;
&:before, &:after {
content: '';
display: block;
border-radius: 20px;
position: absolute;
width: 10px;
}
&:before {
right: -1px;
bottom: -3px;
height: 10px;
border-radius: 20px;
background: $blue;
}
&:after {
height: 11px;
right: -6px;
bottom: -3px;
background: white;
}
}
} }
.content, .attachments img { .content, .attachments img {
border-radius: 15px; border-radius: 15px;
@ -125,6 +148,15 @@ $ios-border-color: rgba(0,0,0,0.1);
background-color: #e6e5ea; background-color: #e6e5ea;
color: black; color: black;
float: left; float: left;
.body {
&:before {
left: -1px;
background-color: #e6e5ea;
}
&:after {
left: -6px;
}
}
} }
.outgoing { .outgoing {
.content { .content {

31
stylesheets/manifest.css
View file

@ -1384,9 +1384,29 @@ li.entry .error-icon-container {
border: 1px solid rgba(0, 0, 0, 0.1); } border: 1px solid rgba(0, 0, 0, 0.1); }
.ios .control .content { .ios .control .content {
padding: 10px; } padding: 10px; }
.ios .bubble .content .body { .ios .bubble .content {
display: inline-block; margin-bottom: 5px; }
padding: 10px; } .ios .bubble .content .body {
display: inline-block;
padding: 10px;
position: relative; }
.ios .bubble .content .body:before, .ios .bubble .content .body:after {
content: '';
display: block;
border-radius: 20px;
position: absolute;
width: 10px; }
.ios .bubble .content .body:before {
right: -1px;
bottom: -3px;
height: 10px;
border-radius: 20px;
background: #2090ea; }
.ios .bubble .content .body:after {
height: 11px;
right: -6px;
bottom: -3px;
background: white; }
.ios .bubble .content, .ios .bubble .attachments img { .ios .bubble .content, .ios .bubble .attachments img {
border-radius: 15px; } border-radius: 15px; }
.ios .bubble .meta { .ios .bubble .meta {
@ -1396,6 +1416,11 @@ li.entry .error-icon-container {
background-color: #e6e5ea; background-color: #e6e5ea;
color: black; color: black;
float: left; } float: left; }
.ios .incoming .content .body:before {
left: -1px;
background-color: #e6e5ea; }
.ios .incoming .content .body:after {
left: -6px; }
.ios .outgoing .content { .ios .outgoing .content {
background-color: #2090ea; background-color: #2090ea;
float: right; } float: right; }