diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css index d8f75c386..45854bb45 100644 --- a/bootstrap-1.0.0.css +++ b/bootstrap-1.0.0.css @@ -1599,3 +1599,63 @@ div.modal .modal-footer .btn { float: right; margin-left: 10px; } +div.twipsy { + display: block; + position: absolute; + visibility: visible; + padding: 5px; + font-size: 10px; + z-index: 100000; + filter: alpha(opacity=80); + -khtml-opacity: 0.8; + -moz-opacity: 0.8; + opacity: 0.8; +} +div.twipsy.above .twipsy-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #000; +} +div.twipsy.left .twipsy-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid #000; +} +div.twipsy.below .twipsy-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid #000; +} +div.twipsy.right .twipsy-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 5px solid #000; +} +div.twipsy .twipsy-inner { + padding: 5px 8px 4px; + background-color: #000; + color: white; + text-align: center; + max-width: 200px; + text-decoration: none; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +div.twipsy .twipsy-arrow { + position: absolute; + width: 0; + height: 0; +} diff --git a/bootstrap-1.0.0.min.css b/bootstrap-1.0.0.min.css index b71e1ab34..ada1211a0 100644 --- a/bootstrap-1.0.0.min.css +++ b/bootstrap-1.0.0.min.css @@ -199,3 +199,9 @@ div.modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-280px div.modal .modal-body{padding:20px;} div.modal .modal-footer{background-color:#eee;padding:14px 20px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}div.modal .modal-footer:after{display:block;visibility:hidden;height:0;clear:both;content:".";} div.modal .modal-footer .btn{float:right;margin-left:10px;} +div.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:10px;z-index:100000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}div.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000;} +div.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000;} +div.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000;} +div.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000;} +div.twipsy .twipsy-inner{padding:5px 8px 4px;background-color:#000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} +div.twipsy .twipsy-arrow{position:absolute;width:0;height:0;} diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 4b377f704..82cf307e9 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -1,55 +1,8 @@ $(document).ready(function(){ - // Example dropdown for topbar nav - $("body").bind("click", function(e) { - $("ul.menu-dropdown").hide(); - $('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide(); - }); + // scroll spy logic + // ================ - $("a.menu").click(function(e) { - var $target = $(this); - var $parent = $target.parent("li"); - var $siblings = $target.siblings("ul.menu-dropdown"); - var $parentSiblings = $parent.siblings("li"); - if ($parent.hasClass("open")) { - $parent.removeClass("open"); - $siblings.hide(); - } else { - $parent.addClass("open"); - $siblings.show(); - } - $parentSiblings.children("ul.menu-dropdown").hide(); - $parentSiblings.removeClass("open"); - return false; - }); - - // table sort example - $("#sortTableExample").tablesorter( {sortList: [[1,0]]} ); - - // add on - $('.add-on :checkbox').click(function() { - if ($(this).attr('checked')) { - $(this).parents('.add-on').addClass('active'); - } else { - $(this).parents('.add-on').removeClass('active'); - } - }); - - // Disable certain links and buttons in docs - $('ul.tabs a, ul.pills a, .pagination a, .well .btn, .actions .btn, .alert-message .btn, a.close').click(function(e) { - e.preventDefault(); - }); - - // Copy code blocks in docs - $(".copy-code").focus(function() { - $(this).select(); - }); - $(".copy-code").mouseup(function(e) { - e.preventDefault(); - }); - - - // scroll spyer var activeTarget, $window = $(window), position = {}, @@ -84,4 +37,108 @@ $(document).ready(function(){ processScroll(); $window.scroll(processScroll); + + + // Dropdown example for topbar nav + // =============================== + + $("body").bind("click", function(e) { + $("ul.menu-dropdown").hide(); + $('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide(); + }); + + $("a.menu").click(function(e) { + var $target = $(this); + var $parent = $target.parent("li"); + var $siblings = $target.siblings("ul.menu-dropdown"); + var $parentSiblings = $parent.siblings("li"); + if ($parent.hasClass("open")) { + $parent.removeClass("open"); + $siblings.hide(); + } else { + $parent.addClass("open"); + $siblings.show(); + } + $parentSiblings.children("ul.menu-dropdown").hide(); + $parentSiblings.removeClass("open"); + return false; + }); + + + // table sort example + // ================== + + $("#sortTableExample").tablesorter( {sortList: [[1,0]]} ); + + + // add on logic + // ============ + + $('.add-on :checkbox').click(function() { + if ($(this).attr('checked')) { + $(this).parents('.add-on').addClass('active'); + } else { + $(this).parents('.add-on').removeClass('active'); + } + }); + + + // Disable certain links in docs + // ============================= + + $('ul.tabs a, ul.pills a, .pagination a, .well .btn, .actions .btn, .alert-message .btn, a.close').click(function(e) { + e.preventDefault(); + }); + + // Copy code blocks in docs + $(".copy-code").focus(function() { + $(this).select(); + }); + $(".copy-code").mouseup(function(e) { + e.preventDefault(); + }); + + + // POSITION TWIPSIES + // ================= + + $('.twipsies.well a').each(function () { + var type = this.title + , $anchor = $(this) + , $twipsy = $('.twipsy.' + type) + + , twipsy = { + width: $twipsy.width() + 10 + , height: $twipsy.height() + 10 + } + + , anchor = { + position: $anchor.position() + , width: $anchor.width() + , height: $anchor.height() + } + + , offset = { + above: { + top: anchor.position.top - twipsy.height + , left: anchor.position.left + (anchor.width/2) - (twipsy.width/2) + } + , below: { + top: anchor.position.top + anchor.height + , left: anchor.position.left + (anchor.width/2) - (twipsy.width/2) + } + , left: { + top: anchor.position.top + (anchor.height/2) - (twipsy.height/2) + , left: anchor.position.left - twipsy.width - 5 + } + , right: { + top: anchor.position.top + (anchor.height/2) - (twipsy.height/2) + , left: anchor.position.left + anchor.width + 5 + } + } + + $twipsy.css(offset[type]) + + }); + }); \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index d1b924181..1caea7c8f 100644 --- a/docs/index.html +++ b/docs/index.html @@ -265,8 +265,10 @@
h6. Heading 6
-

Example paragraph (body text)

+

Example paragraph

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

+

Example headingHas sub-heading...

+

You can also add subheadings with the <strong> and <em>

@@ -1080,6 +1082,37 @@ +
+
+

Tool Tips

+

Twipsies are super useful for aiding a confused user and pointing them in the right direction.

+
+
+
+
+

+Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae. +

+
+
+
below!
+
+
+
+
right!
+
+
+
+
left!
+
+
+
+
above!
+
+
+
+
+
diff --git a/lib/patterns.less b/lib/patterns.less index 7d330f6dd..76868e006 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -506,3 +506,70 @@ div.modal { } } } + +// Twipsy +// ------ + +div.twipsy { + display: block; + position: absolute; + visibility: visible; + padding: 5px; + font-size: 10px; + z-index: 100000; + .opacity(80); + &.above { + .twipsy-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #000; + } + } + &.left { + .twipsy-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid #000; + } + } + &.below { + .twipsy-arrow { + top:0; + left:50%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid #000; + } + } + &.right { + .twipsy-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 5px solid #000; + } + } + .twipsy-inner { + padding: 5px 8px 4px; + background-color: #000; + color: white; + text-align: center; + max-width: 200px; + text-decoration:none; + .border-radius(4px); + } + .twipsy-arrow { + position: absolute; + width: 0; + height: 0; + } +} \ No newline at end of file