Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

modified talk, moved to core and changed it to callouts #106

Open
wants to merge 2 commits into
from
Jump to file or symbol
Failed to load files and symbols.
+123 −71
Split
View
@@ -0,0 +1,22 @@
+/* **************** TALK BUBBLE ***************** */
+.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%;}
@@ -12,136 +12,169 @@
<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;}
View
@@ -22,3 +22,6 @@
@import url("table/table.css");
@import url("table/table_skins.css");
/*@import url("table/table_debug.css");*/
+
+@import url("callout/callout.css");
+@import url("callout/callout_skins.css");
View
Binary file not shown.
View
@@ -1,7 +1,5 @@
/* plugins */
@import url("breadcrumb/breadcrumb.css");
@import url("tabs/tabs.css");
-@import url("talk/talk.css");
-@import url("talk/talk_skins.css");
@import url("color/color.css");
@import url("color/color_skins.css");
View
@@ -1,20 +0,0 @@
-/* **************** 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 */