Permalink
Browse files

talk bubbles

took out all the colors, created "mid"
  • Loading branch information...
lauramillan committed May 18, 2012
1 parent 6e481bc commit 8c0500b6ec6936756d3af185fd20afc67e065678
Showing with 119 additions and 68 deletions.
  1. +21 −19 plugins/talk/talk.css
  2. +80 −47 plugins/talk/talk_doc.html
  3. +18 −2 plugins/talk/talk_skins.css
View
@@ -1,20 +1,22 @@
/* **************** TALK BUBBLE ***************** */
-.bubble{overflow:hidden;_overflow:visible;_zoom:1;margin:10px;}
-.bubble b b{position:absolute;height:0;width:0;border: solid 7px transparent;_border: 7px solid #fff /* set color to match background color for IE6 */;}
-.bubble .bottom{visibility:hidden;}
-/* top bubbles */
-.bubbleTop .inner{margin-top:7px;}
-.bubbleTop b b{top:0;left:10px;border-top-style:none;}
-/* left bubbles */
-.bubbleLeft .inner{margin-left:7px;}
-.bubbleLeft b b{top:10px;left:0;border-left-style:none;}
-/* right bubbles */
-.bubbleRight .inner{margin-right:7px;}
-.bubbleRight b b{top:10px;right:0;border-right-style:none;}
-/* bottom bubbles */
-.bubbleBottom .inner{margin-bottom:7px;}
-.bubbleBottom b b{bottom:0;left:10px;border-bottom-style:none;}
-.bubbleBottom .bottom{visibility:visible;}
-/* extensions (swaps alignment of talk bubble) */
-.bubbleHorizontalExt b b{top:auto; bottom:10px;visibility:visible;} /* apply to bubbleLeft or bubbleRight */
-.bubbleVerticalExt b b{right:10px;left:auto;} /* apply to bubbleTop or bubbleBottom */
+.bubble {position: relative;}
+.bubble:after, .bubble:before {border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
+
+/* top & bottom */
+.bubbleTop:after, .bubbleTop:before {bottom:100%; left:10%;}
+.bubbleBottom:after, .bubbleBottom:before {top: 100%; left:10%;}
+.bubbleTop:after, .bubbleBottom:after {border-width: 10px; margin-left: -10px;}
+.bubbleTop:before, .bubbleBottom:before {border-width: 14px; margin-left: -14px;}
+
+/*left & right*/
+.bubbleLeft:after, .bubbleLeft:before {right: 100%; top: 10%;}
+.bubbleRight:after, .bubbleRight:before { left: 100%; top: 10%;}
+.bubbleLeft:after, .bubbleRight:after {border-width: 10px; margin-top: -10px;}
+.bubbleLeft:before, .bubbleRight:before {border-width: 14px; margin-top: -14px;}
+
+/* horizMid & horizExt - extend bubbleTop and bubbleBottom */
+.horizMid:after, .horizMid:before {left: 50%;}
+.horizExt:after, .horizExt:before {left: 90%;}
+/* vertMid & vertExt - extend bubbleRight and bubbleLeft */
+.vertMid:before, .vertMid:after {top: 50%;}
+.vertExt:before, .vertExt:after{top: 90%;}
View
@@ -12,136 +12,169 @@ <h1>Talk Bubbles</h1>
<p>Talk bubbles allow you to have cartoon-like talk bubbles with zero images. For now, they are based on standard module format.</p>
<div class="line">
<div class=" unit size1of4">
- <div class="mod bubble bubbleTop yowza">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleTop">
<div class="inner">
- <div class="hd fire">
- <h3>yowza</h3>
+ <div class="hd">
+ <h4>bubbleTop</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of4">
- <div class="mod bubble bubbleLeft lol">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleLeft">
<div class="inner">
- <div class="hd fire">
- <h3>lol</h3>
+ <div class="hd">
+ <h4>bubbleLeft</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of4">
- <div class="mod bubble bubbleRight meep">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleRight">
<div class="inner">
- <div class="hd fire">
- <h3>meep</h3>
+ <div class="hd">
+ <h4>bubbleRight</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of4 lastUnit">
- <div class="mod bubble bubbleBottom yoyo">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleBottom">
<div class="inner">
- <div class="hd fire">
- <h3>Yoyo</h3>
+ <div class="hd">
+ <h4>bubbleBottom</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
</div>
<h2>Extending the talk bubbles</h2>
<div class="line">
<div class=" unit size1of4">
- <div class="mod bubble bubbleTop yowza bubbleVerticalExt">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleTop horizExt">
<div class="inner">
- <div class="hd fire">
- <h3>yowza + bubbleVerticalExt</h3>
+ <div class="hd">
+ <h4>bubbleTop + horizExt</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of4">
- <div class="mod bubble bubbleLeft lol bubbleHorizontalExt">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleLeft vertExt">
<div class="inner">
- <div class="hd fire">
- <h3>lol + bubbleHorizontalExt</h3>
+ <div class="hd">
+ <h4>bubbleLeft + vertExt</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of4">
- <div class="mod bubble bubbleRight meep bubbleHorizontalExt">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleRight vertExt">
<div class="inner">
- <div class="hd fire">
- <h3>meep + bubbleHorizontalExt</h3>
+ <div class="hd">
+ <h4>bubbleRight + vertExt</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
<div class=" unit size1of4 lastUnit">
- <div class="mod bubble bubbleBottom yoyo bubbleVerticalExt">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="mod bubble bubbleBottom horizExt">
<div class="inner">
- <div class="hd fire">
- <h3>Yoyo + bubbleVerticalExt</h3>
+ <div class="hd">
+ <h4>bubbleBottom + horizExt</h4>
+ </div>
+ <div class="bd">
+ <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <h2>Talk bubbles in the middle</h2>
+ <div class="line">
+ <div class=" unit size1of4">
+ <div class="mod bubble bubbleTop horizMid">
+ <div class="inner">
+ <div class="hd">
+ <h4>bubbleTop + horizMid</h4>
+ </div>
+ <div class="bd">
+ <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class=" unit size1of4">
+ <div class="mod bubble bubbleLeft vertMid">
+ <div class="inner">
+ <div class="hd">
+ <h4>bubbleLeft + vertMid</h4>
+ </div>
+ <div class="bd">
+ <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class=" unit size1of4">
+ <div class="mod bubble bubbleRight vertMid">
+ <div class="inner">
+ <div class="hd">
+ <h4>bubbleRight + vertMid</h4>
+ </div>
+ <div class="bd">
+ <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="unit size1of4 lastUnit">
+ <div class="mod bubble bubbleBottom horizMid">
+ <div class="inner">
+ <div class="hd">
+ <h4>bubbleBottom + horizMid</h4>
</div>
<div class="bd">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
</div>
<h2>Suggested use:</h2>
<div class="line">
- <div class=" unit size1of3">
- <div class="mod bubble bubbleBottom discuss">
- <b class="top"><b class="tl"></b><b class="tr"></b></b>
+ <div class="unit size1of3">
+ <div class="mod bubble bubbleBottom">
<div class="inner">
<div class="bd">
<p>“At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.”</p>
</div>
</div>
- <b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
- <div class="media attribution">
- <a href="http://twitter.com/stubbornella" class="img"><img src="http://a3.twimg.com/profile_images/72157651/tattoo_pink_bkg_square_mini.jpg" alt="Stubbornella" /></a>
- <div class="bd"><a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 minutes ago</span></div>
+ <div class="media attribution pts">
+ <a href="http://twitter.com/stubbornella" class="img"><img src="http://a3.twimg.com/profile_images/72157651/tattoo_pink_bkg_square_mini.jpg" alt="Stubbornella"/></a>
+ <div class="bd pls"><a href="http://twitter.com/stubbornella">@Stubbornella</a> <span class="detail">14 minutes ago</span></div>
</div>
</div>
</div>
@@ -14,5 +14,21 @@
.yoyo .inner{background-color:#52a583;}
.yoyo b b{border-top-color:#52a583;}
/* header */
-.fire, .fire *{color: #000; font-size:18px; border-bottom: 1px dashed #fff;}
-.attribution{margin-left:27px;}
+.fire, .fire *{color: #000; font-size:18px; border-bottom: 1px dashed #b7c8c9;}
+.attribution{margin-left:30px;}
+
+
+/* default style - white with light 3px border */
+.bubble {background: #fff; border: 3px solid #b7c8c9;}
+/* top */
+.bubbleTop:after {border-bottom-color: #fff;}
+.bubbleTop:before {border-bottom-color: #b7c8c9;}
+/* bottom */
+.bubbleBottom:after {border-top-color: #fff;}
+.bubbleBottom:before {border-top-color: #b7c8c9;}
+/* left */
+.bubbleLeft:after {border-right-color: #ffffff;}
+.bubbleLeft:before {border-right-color: #b7c8c9;}
+/* right */
+.bubbleRight:after {border-left-color: #ffffff;}
+.bubbleRight:before {border-left-color: #b7c8c9;}

0 comments on commit 8c0500b

Please sign in to comment.