From 11721f376d9bdb019f31d3bbb273160d45ff1266 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 27 Aug 2011 13:03:06 -0700 Subject: [PATCH] add boostrap-twipsy and bootstrap-alerts --- bootstrap-1.1.1.css | 145 ++-------- bootstrap-1.1.1.min.css | 13 +- examples/assets/js/bootstrap-alerts.js | 73 +++++ ...bootstrap-modals.js => bootstrap-modal.js} | 34 ++- examples/assets/js/bootstrap-twipsy.js | 272 ++++++++++++++++++ examples/bootstrap-js.html | 183 ++++++++---- lib/patterns.less | 26 +- lib/scaffolding.less | 95 +----- 8 files changed, 534 insertions(+), 307 deletions(-) create mode 100644 examples/assets/js/bootstrap-alerts.js rename examples/assets/js/{bootstrap-modals.js => bootstrap-modal.js} (85%) create mode 100644 examples/assets/js/bootstrap-twipsy.js diff --git a/bootstrap-1.1.1.css b/bootstrap-1.1.1.css index 778f4b6388..832af59a00 100644 --- a/bootstrap-1.1.1.css +++ b/bootstrap-1.1.1.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Sat Aug 27 00:28:54 PDT 2011 + * Date: Sat Aug 27 13:02:54 PDT 2011 */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -421,6 +421,12 @@ body { max-width: 1180px; margin-left: 240px; } +.hide { + display: none; +} +.show { + display: block; +} a { color: #0069d6; text-decoration: none; @@ -431,115 +437,6 @@ a:hover { color: #0050a3; text-decoration: underline; } -.btn { - display: inline-block; - background-color: #e6e6e6; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6)); - background-image: -webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); - background-image: -moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); - background-image: -ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); - background-image: -o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); - background-image: linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6); - padding: 4px 14px; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - color: #333; - font-size: 13px; - line-height: 18px; - border: 1px solid #ccc; - border-bottom-color: #bbb; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -} -.btn:hover { - background-position: 0 -15px; - color: #333; - text-decoration: none; -} -.primary { - background-color: #0064cd; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); - background-image: -moz-linear-gradient(top, #049cdb, #0064cd); - background-image: -ms-linear-gradient(top, #049cdb, #0064cd); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); - background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); - background-image: -o-linear-gradient(top, #049cdb, #0064cd); - background-image: linear-gradient(top, #049cdb, #0064cd); - color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border: 1px solid #004b9a; - border-bottom-color: #003f81; -} -.primary:hover { - color: #fff; -} -.btn { - -webkit-transition: 0.1s linear all; - -moz-transition: 0.1s linear all; - -ms-transition: 0.1s linear all; - -o-transition: 0.1s linear all; - transition: 0.1s linear all; -} -.btn.primary { - color: #fff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #0064cd #0064cd #003f81; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); -} -.btn.primary:hover { - color: #fff; -} -.btn.large { - font-size: 16px; - line-height: 28px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; -} -.btn.small { - padding-right: 9px; - padding-left: 9px; - font-size: 11px; -} -.btn.disabled { - background-image: none; - filter: alpha(opacity=65); - -khtml-opacity: 0.65; - -moz-opacity: 0.65; - opacity: 0.65; - cursor: default; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -.btn:disabled { - background-image: none; - filter: alpha(opacity=65); - -khtml-opacity: 0.65; - -moz-opacity: 0.65; - opacity: 0.65; - cursor: default; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; -} -.btn:disabled.primary { - color: #fff; -} -.btn:active { - -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -} -button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { - padding: 0; - border: 0; -} /* Typography.less * Headings, body text, lists, code, and more for a versatile and durable typography system * ---------------------------------------------------------------------------------------- */ @@ -1781,17 +1678,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } -.modal-backdrop, .modal { - -webkit-transition: opacity 0.15s linear; - -moz-transition: opacity 0.15s linear; - -ms-transition: opacity 0.15s linear; - -o-transition: opacity 0.15s linear; - transition: opacity 0.15s linear; - opacity: 0; -} -.modal-backdrop.open, .modal.open { - opacity: 1; -} .modal-backdrop { background-color: rgba(0, 0, 0, 0.5); position: fixed; @@ -2007,3 +1893,20 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .popover .content p, .popover .content ul, .popover .content ol { margin-bottom: 0; } +.modal-backdrop, +.modal, +.twipsy, +.alert-message { + -webkit-transition: opacity 0.15s linear; + -moz-transition: opacity 0.15s linear; + -ms-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; + opacity: 0; +} +.modal-backdrop.show, +.modal.show, +.twipsy.show, +.alert-message.show { + opacity: 1; +} diff --git a/bootstrap-1.1.1.min.css b/bootstrap-1.1.1.min.css index 68140d7091..7e9959d0c2 100644 --- a/bootstrap-1.1.1.min.css +++ b/bootstrap-1.1.1.min.css @@ -67,16 +67,9 @@ body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size: .container-fluid:after{clear:both;} .container-fluid .sidebar{float:left;width:220px;} .container-fluid .content{min-width:700px;max-width:1180px;margin-left:240px;} +.hide{display:none;} +.show{display:block;} a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#0050a3;text-decoration:underline;} -.btn{display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);padding:4px 14px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:18px;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;} -.primary{background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border:1px solid #004b9a;border-bottom-color:#003f81;}.primary:hover{color:#fff;} -.btn{-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn.primary{color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}.btn.primary:hover{color:#fff;} -.btn.large{font-size:16px;line-height:28px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;} -.btn.small{padding-right:9px;padding-left:9px;font-size:11px;} -.btn.disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} -.btn:disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.btn:disabled.primary{color:#fff;} -.btn:active{-webkit-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 3px 7px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);} -button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;} p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;} @@ -233,7 +226,6 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .pagination ul li.disabled a,.pagination ul li.disabled a:hover{background-color:transparent;color:#bfbfbf;} .pagination ul li.next a{border:0;} .well{background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);} -.modal-backdrop,.modal{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.modal-backdrop.open,.modal.open{opacity:1;} .modal-backdrop{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;} .modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-280px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .modal-header{border-bottom:1px solid #eee;padding:5px 20px;}.modal .modal-header .close{position:absolute;right:10px;top:10px;color:#999;line-height:10px;font-size:18px;} .modal .modal-body{padding:20px;} @@ -254,3 +246,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .popover .inner{background-color:#333;background-color:rgba(0, 0, 0, 0.8);*background-color:#333;padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);} .popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;} .popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} +.modal-backdrop,.modal,.twipsy,.alert-message{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.modal-backdrop.show,.modal.show,.twipsy.show,.alert-message.show{opacity:1;} diff --git a/examples/assets/js/bootstrap-alerts.js b/examples/assets/js/bootstrap-alerts.js new file mode 100644 index 0000000000..d1983d9f7f --- /dev/null +++ b/examples/assets/js/bootstrap-alerts.js @@ -0,0 +1,73 @@ +(function( $ ){ + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + return support + })() + + + /* SHARED VARS + * =========== */ + + var transitionEnd + + // set CSS transition event type + if ( $.support.transition ) { + transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + } + + + /* ALERT CLASS DEFINITION + * ====================== */ + + var Alert = function ( content ) { + var that = this + this.$element = $(content) + this.$element.delegate('.close', 'click', function (e) { + e.preventDefault() + that.close() + }) + } + + Alert.prototype = { + + close: function () { + var that = this + + function removeElement () { + that.$element.remove() + that.$element = null + } + + $.support.transition ? + this.$element.bind(transitionEnd, removeElement) : + removeElement() + + this.$element.removeClass('show') + } + + } + + + /* ALERT PLUGIN DEFINITION + * ======================= */ + + $.fn.alert = function ( options ) { + return this.each(function () { + new Alert(this) + }) + } + +})( jQuery || ender ) \ No newline at end of file diff --git a/examples/assets/js/bootstrap-modals.js b/examples/assets/js/bootstrap-modal.js similarity index 85% rename from examples/assets/js/bootstrap-modals.js rename to examples/assets/js/bootstrap-modal.js index e927bc4b3a..0b13fdf582 100644 --- a/examples/assets/js/bootstrap-modals.js +++ b/examples/assets/js/bootstrap-modal.js @@ -34,11 +34,7 @@ * ============================= */ var Modal = function ( options ) { - this.settings = { - backdrop: false - , closeOnEscape: false - , content: false - } + this.settings = $.extend({}, $.fn.modal.defaults) if ( typeof options == 'string' ) { this.settings.content = options @@ -59,8 +55,8 @@ var that = this this.isOpen = true - _private.escape.call(this) - _private.backdrop.call(this) + _.escape.call(this) + _.backdrop.call(this) this.$element = $(this.settings.content) .delegate('.close', 'click', function (e) { e.preventDefault(); that.close() }) @@ -68,8 +64,8 @@ .show() setTimeout(function () { - that.$element.addClass('open') - that.$backdrop && that.$backdrop.addClass('open') + that.$element.addClass('show') + that.$backdrop && that.$backdrop.addClass('show') }, 1) return this @@ -80,10 +76,10 @@ this.isOpen = false - _private.escape.call(this) - _private.backdrop.call(this) + _.escape.call(this) + _.backdrop.call(this) - this.$element.removeClass('open') + this.$element.removeClass('show') function removeElement () { that.$element.remove() @@ -103,7 +99,7 @@ /* MODAL PRIVATE METHODS * ===================== */ - var _private = { + var _ = { backdrop: function () { var that = this @@ -112,7 +108,7 @@ .click(function () { that.close() }) .appendTo(document.body) } else if ( !this.isOpen && this.$backdrop ) { - this.$backdrop.removeClass('open') + this.$backdrop.removeClass('show') function removeElement() { that.$backdrop.remove() @@ -144,14 +140,16 @@ /* MODAL PLUGIN DEFINITION * ======================= */ - $.modal = function ( options ) { - return new Modal(options) - } - $.fn.modal = function ( options ) { options = options || {} options.content = this return new Modal(options) } + $.fn.modal.defaults = { + backdrop: false + , closeOnEscape: false + , content: false + } + })( jQuery || ender ) \ No newline at end of file diff --git a/examples/assets/js/bootstrap-twipsy.js b/examples/assets/js/bootstrap-twipsy.js new file mode 100644 index 0000000000..7e33bf95cc --- /dev/null +++ b/examples/assets/js/bootstrap-twipsy.js @@ -0,0 +1,272 @@ +/* Based on the original tipsy by Jason Frame */ + +(function( $ ) { + + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) + * ======================================================= */ + + $.support.transition = (function () { + var thisBody = document.body || document.documentElement + , thisStyle = thisBody.style + , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined + return support + })() + + + /* SHARED VARS + * =========== */ + + var transitionEnd + + // set CSS transition event type + if ( $.support.transition ) { + transitionEnd = "TransitionEnd" + if ( $.browser.webkit ) { + transitionEnd = "webkitTransitionEnd" + } else if ( $.browser.mozilla ) { + transitionEnd = "transitionend" + } else if ( $.browser.opera ) { + transitionEnd = "oTransitionEnd" + } + } + + + /* TWIPSY PUBLIC CLASS DEFINITION + * ============================== */ + + var Twipsy = function ( element, options ) { + this.$element = $(element) + this.options = options + this.enabled = true + this.fixTitle() + } + + Twipsy.prototype = { + + show: function() { + var title = this.getTitle() + , pos + , actualWidth + , actualHeight + , placement + , $tip + , tp + + if (title && this.enabled) { + $tip = this.tip() + $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](title) + $tip[0].className = 'twipsy' + $tip + .remove() + .css({ top: 0, left: 0, display: 'block' }) + .prependTo(document.body) + + pos = $.extend({}, this.$element.offset(), { + width: this.$element[0].offsetWidth + , height: this.$element[0].offsetHeight + }) + + actualWidth = $tip[0].offsetWidth + actualHeight = $tip[0].offsetHeight + placement = _.maybeCall(this.options.placement, this.$element[0]) + + switch (placement) { + case 'below': + tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'above': + tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} + break + case 'left': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset} + break + case 'right': + tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset} + break + } + + $tip + .css(tp) + .addClass(placement) + .addClass('show') + } + } + + , hide: function() { + var that = this + , $tip = this.tip() + + $tip.removeClass('show') + + function removeElement () { + $tip.remove() + } + + $.support.transition ? + $tip.bind(transitionEnd, removeElement) : + removeElement() + } + + , fixTitle: function() { + var $e = this.$element + if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { + $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title') + } + } + + , getTitle: function() { + var title + , $e = this.$element + , o = this.options + + this.fixTitle() + + if (typeof o.title == 'string') { + title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title) + } else if (typeof o.title == 'function') { + title = o.title.call($e[0]) + } + + title = ('' + title).replace(/(^\s*|\s*$)/, "") + + return title || o.fallback + } + + , tip: function() { + if (!this.$tip) { + this.$tip = $('
').html('
') + } + return this.$tip + } + + , validate: function() { + if (!this.$element[0].parentNode) { + this.hide() + this.$element = null + this.options = null + } + } + + , enable: function() { + this.enabled = true + } + + , disable: function() { + this.enabled = false + } + + , toggleEnabled: function() { + this.enabled = !this.enabled + } + + } + + + /* TWIPSY PRIVATE METHODS + * ====================== */ + + var _ = { + + maybeCall: function ( thing, ctx ) { + return (typeof thing == 'function') ? (thing.call(ctx)) : thing + } + + } + + + /* MODAL PLUGIN DEFINITION + * ======================= */ + + $.fn.twipsy = function(options) { + + var twipsy + , binder + , eventIn + , eventOut + + if (options === true) { + return this.data('twipsy') + } else if (typeof options == 'string') { + twipsy = this.data('twipsy') + if (twipsy) { + twipsy[options]() + } + return this + } + + options = $.extend({}, $.fn.twipsy.defaults, options) + + function get(ele) { + var twipsy = $.data(ele, 'twipsy') + + if (!twipsy) { + twipsy = new Twipsy(ele, $.fn.twipsy.elementOptions(ele, options)) + $.data(ele, 'twipsy', twipsy) + } + + return twipsy + } + + function enter() { + var twipsy = get(this) + twipsy.hoverState = 'in' + + if (options.delayIn == 0) { + twipsy.show() + } else { + twipsy.fixTitle() + setTimeout(function() { + if (twipsy.hoverState == 'in') { + twipsy.show() + } + }, options.delayIn) + } + } + + function leave() { + var twipsy = get(this) + twipsy.hoverState = 'out' + if (options.delayOut == 0) { + twipsy.hide() + } else { + setTimeout(function() { + if (twipsy.hoverState == 'out') { + twipsy.hide() + } + }, options.delayOut) + } + } + + if (!options.live) { + this.each(function() { + get(this) + }) + } + + if (options.trigger != 'manual') { + binder = options.live ? 'live' : 'bind' + eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus' + eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur' + this[binder](eventIn, enter)[binder](eventOut, leave) + } + + return this + } + + $.fn.twipsy.defaults = { + delayIn: 0 + , delayOut: 0 + , fallback: '' + , placement: 'above' + , html: false + , live: false + , offset: 0 + , title: 'title' + , trigger: 'hover' + } + + $.fn.twipsy.elementOptions = function(ele, options) { + return $.metadata ? $.extend({}, options, $(ele).metadata()) : options + } + +})( jQuery || ender ) \ No newline at end of file diff --git a/examples/bootstrap-js.html b/examples/bootstrap-js.html index 37aea34648..13eb44a52f 100644 --- a/examples/bootstrap-js.html +++ b/examples/bootstrap-js.html @@ -13,9 +13,9 @@ - - - + + + @@ -28,7 +28,7 @@ - + @@ -37,8 +37,10 @@

Bootstrap JS

@@ -71,17 +73,18 @@ -
+ + + + +
+
+

Twipsy bootstrap-twipsy.js

+
+
+
+

Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!

+ Download +
+
+

Using bootstrap-twipsy.js

+ 
$('#example').twipsy(options)
+

Options

+
    +
  • delayIn (number) - delay before showing tooltip (ms).
    • +
  • delayOut (number) - delay before hiding tooltip (ms).
    • +
  • fallback (string) - fallback text to use when no tooltip text.
    • +
  • placement (string) - position of tooltip - above | below | left | right.
    • +
  • html (boolean) - is tooltip content HTML?
    • +
  • live (boolean) - use live event support?
    • +
  • offset (number) - pixel offset of tooltip from element.
    • +
  • title (string|function) - attribute/callback containing tooltip text.
    • +
  • trigger (string) - how tooltip is triggered - hover | focus | manual.
    • +
+

Methods

+

$().twipsy

+

Attaches a twipsy handler to an element collection.

+

Demo

+

Mustache next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown you probably haven't heard of them before they sold out. Farm-to-table cardigans seitan tofu, mcsweeney's fixie sustainable quinoa 8-bit american apparel terry richardson vinyl chambray. Fap beard stumptown, williamsburg banh mi lomo thundercats. DIY tofu biodiesel marfa, four loko mcsweeney's master cleanse vegan chambray. Etsy fap ethical, wes anderson farm-to-table +1 whatever bicycle rights mixtape portland readymade letterpress artisan. Four loko artisan whatever keytar, scenester farm-to-table PBR banksy Austin freegan cred raw denim single-origin coffee viral. +

+ +
+
+
+ + + + + \ No newline at end of file diff --git a/lib/patterns.less b/lib/patterns.less index b1be9a18cf..d722f6c982 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -291,7 +291,6 @@ footer { // BUTTON STYLES // ------------- - // Base .btn styles .btn { // Button Base @@ -422,7 +421,6 @@ input[type=submit].btn { padding: 14px; border-color: #fceec1; .box-shadow(none); - p { margin-right: 30px; } @@ -579,15 +577,6 @@ input[type=submit].btn { // MODALS // ------ -.modal-backdrop, -.modal { - .transition(opacity .15s linear); - opacity: 0; - &.open { - opacity: 1; - } -} - .modal-backdrop { background-color: rgba(0,0,0,.5); position: fixed; @@ -758,3 +747,18 @@ input[type=submit].btn { } } } + + +// Pattern Animations +// ------------------ + +.modal-backdrop, +.modal, +.twipsy, +.alert-message { + .transition(opacity .15s linear); + opacity: 0; + &.show { + opacity: 1; + } +} \ No newline at end of file diff --git a/lib/scaffolding.less b/lib/scaffolding.less index ded9a1e5f1..ab87567a0e 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -101,6 +101,13 @@ body { } } +.hide { + display: none; +} + +.show { + display: block; +} // BASE STYLES // ----------- @@ -115,90 +122,4 @@ a { color: @linkColorHover; text-decoration: underline; } -} - -// Buttons -.btn { - display: inline-block; - #gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%)); - padding: 4px 14px; - text-shadow: 0 1px 1px rgba(255,255,255,.75); - color: #333; - font-size: 13px; - line-height: @baseline; - border: 1px solid #ccc; - border-bottom-color: #bbb; - .border-radius(4px); - @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); - &:hover { - background-position: 0 -15px; - color: #333; - text-decoration: none; - } -} -.primary { - #gradient > .vertical(#049CDB, #0064CD); - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - border: 1px solid darken(#0064CD, 10%); - border-bottom-color: darken(#0064CD, 15%); - &:hover { - color: #fff; - } -} - -.btn { - //.button(#1174C6); - .transition(.1s linear all); - &.primary { - //#gradient > .vertical(@blue, @blueDark); - color: #fff; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - border-color: @blueDark @blueDark darken(@blueDark, 15%); - border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); - &:hover { - color: #fff; - } - } - &.large { - font-size: 16px; - line-height: 28px; - .border-radius(6px); - } - &.small { - padding-right: 9px; - padding-left: 9px; - font-size: 11px; - } - &.disabled { - background-image: none; - .opacity(65); - cursor: default; - .box-shadow(none); - } - - // this can't be included with the .disabled def because IE8 and below will drop it ;_; - &:disabled { - background-image: none; - .opacity(65); - cursor: default; - .box-shadow(none); - &.primary { - color: #fff; - } - } - &:active { - @shadow: inset 0 3px 7px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); - } -} - -// Help Firefox not be a jerk about adding extra padding to buttons -button.btn, -input[type=submit].btn { - &::-moz-focus-inner { - padding: 0; - border: 0; - } -} +} \ No newline at end of file