Skip to content

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

New issue

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

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lauramillan wants to merge 2 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c0500b
talk bubbles
lauramillan May 18, 2012
2ac4440
updated "talk" to "callout", moved into core
lauramillan May 21, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions core/callout/callout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%;}
127 changes: 80 additions & 47 deletions plugins/talk/talk_doc.html → core/callout/callout_doc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
20 changes: 18 additions & 2 deletions plugins/talk/talk_skins.css → core/callout/callout_skins.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;}
3 changes: 3 additions & 0 deletions core/core.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Binary file added plugins/.DS_Store
View file
Open in desktop
Binary file not shown.
2 changes: 0 additions & 2 deletions plugins/plugins.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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");
20 changes: 0 additions & 20 deletions plugins/talk/talk.css
View file
Open in desktop

This file was deleted.