kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

add boostrap-twipsy and bootstrap-alerts

This commit is contained in:
Jacob Thornton 2011-08-27 13:03:06 -07:00
parent b68b53dca2
commit 11721f376d
8 changed files with 534 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
bootstrap-1.1.1.css vendored
View File

@ -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;
}

13
bootstrap-1.1.1.min.css vendored
View File

@ -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;}

73
examples/assets/js/bootstrap-alerts.js vendored Normal file
View File

@ -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 )

34
examples/assets/js/bootstrap-modals.js → examples/assets/js/bootstrap-modal.js vendored
View File

@ -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 )

272
examples/assets/js/bootstrap-twipsy.js vendored Normal file
View File

@ -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 = $('<div class="twipsy" />').html('<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>')
}
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 )

183
examples/bootstrap-js.html
View File

@ -13,9 +13,9 @@
<!-- Le javascript -->
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="assets/js/bootstrap-modals.js"></script>
<!-- <script src="assets/js/bootstrap-alerts.js"></script> -->
<!-- <script src="assets/js/bootstrap-tips.js"></script> -->
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-alerts.js"></script>
<script src="assets/js/bootstrap-twipsy.js"></script>
<!-- <script src="assets/js/bootstrap-popovers.js"></script> -->
<!-- Le styles -->
@ -28,7 +28,7 @@
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body style="padding-top: 60px">
<body style="padding: 60px 0">
<!-- Topbar
================================================== -->
@ -37,8 +37,10 @@
<div class="container">
<h3><a href="#">Bootstrap JS</a></h3>
<ul>
<li class="active"><a href="#modal">Getting Started</a></li>
<li class="active"><a href="#javascript">Getting Started</a></li>
<li><a href="#modal">Modals</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#twipsy">Twipsy</a></li>
</ul>
</div>
</div>
@ -71,17 +73,18 @@
<!-- Modal
================================================== -->
<section id="javascript">
<section id="modal">
<div class="page-header">
<h1>Modals <small>bootstrap-modals.js</small></h1>
<h1>Modals <small>bootstrap-modal.js</small></h1>
</div>
<div class="row">
<div class="span4 columns">
<p>Our Modal plugin is <strong>super</strong> slim! We took special care to only include the bare functionality that we require at twitter, however we look forward to seeing all the cool stuff you do with it!</p>
<a href="assets/js/bootstrap-modal.js" class="btn primary">Download</a>
</div>
<div class="span12 columns">
<h2>Using bootstrap-modal</h2>
<pre class="prettyprint linenums">$('#modal-content').modal();</pre>
<pre class="prettyprint linenums">$('#modal-content').modal(options)</pre>
<h3>Options</h3>
<ul>
<li><strong>backdrop</strong> (<code>boolean</code>) - if true, it will include a modal-backdrop element.</li>
@ -89,23 +92,12 @@
<li><strong>content</strong> (<code>string</code>) - alternative way of supplying modal class with HTML content.</li>
</ul>
<h3>Methods</h3>
<h4>$.modal</h4>
<p>Returns an instance of the modal class. It accepts either a <code>string</code> or an options <code>object</code>.</p>
<pre class="prettyprint linenums">
// Accepts HTML string
$.modal(modalHTML)
// Accepts Options
$.modal({
backdrop: true
, content: modalHTML
})</pre>
<h4>$().modal</h4>
<p>Returns an instance of the modal class. Accepts an optional options <code>object</code>.</p>
<pre class="prettyprint linenums">
$('#modal-content').modal({
closeOnEscape: true
});</pre>
})</pre>
<h4>.toggle</h4>
<p>Returns an instance of the modal class. Toggle the modal open state.</p>
<pre class="prettyprint linenums">$('#modal-content').modal().toggle()</pre>
@ -118,7 +110,7 @@ $('#modal-content').modal({
<h3>Demo</h3>
<!-- sample modal content -->
<div id="modal-from-dom" style="display: none" class="modal">
<div id="modal-from-dom" class="modal hide">
<div class="modal-header">
<h3>Modal Heading</h3>
<a href="#" class="close">&times;</a>
@ -132,50 +124,17 @@ $('#modal-content').modal({
</div>
</div>
<button id="modal-basic" class="btn">Basic Modal</button>
<button id="modal-options" class="btn">Modal Options</button>
<button id="modal-from-element" class="btn">Modal From Element</button>
<button id="modal-from-element" class="btn">Launch Modal</button>
<script>
$(function () {
var modalHTML =
'<div class="modal">'
+ '<div class="modal-header">'
+ '<h3>Modal Heading</h3>'
+ '<a href="#" class="close">&times;</a>'
+ '</div>'
+ '<div class="modal-body">'
+ '<p>One fine body…</p>'
+ '</div>'
+ '<div class="modal-footer">'
+ '<a href="#" class="btn primary">Primary</a>'
+ '<a href="#" class="btn secondary">Secondary</a>'
+ '</div>'
+ '</div>'
var simpleModal = $.modal(modalHTML)
, optionModal = $.modal({
backdrop: true
, content: modalHTML
, closeOnEscape: true
})
, domModal = $("#modal-from-dom").modal({
backdrop: true
, content: modalHTML
, closeOnEscape: true
})
$('#modal-basic').click(function () {
simpleModal.toggle()
});
$('#modal-options').click(function () {
optionModal.toggle();
});
var domModal = $("#modal-from-dom").modal({
backdrop: true
, closeOnEscape: true
})
$('#modal-from-element').click(function () {
domModal.toggle();
domModal.toggle()
})
})
@ -184,6 +143,110 @@ $('#modal-content').modal({
</div>
</div>
</section>
<!-- Alerts
================================================== -->
<section id="alerts">
<div class="page-header">
<h1>Alerts <small>bootstrap-alerts.js</small></h1>
</div>
<div class="row">
<div class="span4 columns">
<p>The alert plugin is a super tiny class for adding close functionality to alerts.</p>
<a href="assets/js/bootstrap-alerts.js" class="btn primary">Download</a>
</div>
<div class="span12 columns">
<h2>Using bootstrap-alert</h2>
<pre class="prettyprint linenums">$(".alert-message").alert()</pre>
<h3>Methods</h3>
<h4>$().alert</h4>
<p>Wraps all alerts with close functionality.</p>
<h3>Demo</h3>
<div class="alert-message show warning">
<a class="close" href="#">&times;</a>
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
</div>
<div class="alert-message show block-message error">
<a class="close" href="#">&times;</a>
<p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<div class="alert-actions">
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
</div>
</div>
<script>
$(function () {
$(".alert-message").alert()
})
</script>
</div>
</div>
</section>
<!-- Tips
================================================== -->
<section id="twipsy">
<div class="page-header">
<h1>Twipsy <small>bootstrap-twipsy.js</small></h1>
</div>
<div class="row">
<div class="span4 columns">
<p>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!</p>
<a href="assets/js/bootstrap-twipsy.js" class="btn primary">Download</a>
</div>
<div class="span12 columns">
<h2>Using bootstrap-twipsy.js</h2>
<pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
<h3>Options</h3>
<ul>
<li><strong>delayIn</strong> (<code>number</code>) - delay before showing tooltip (ms).</li>
<li><strong>delayOut</strong> (<code>number</code>) - delay before hiding tooltip (ms).</li>
<li><strong>fallback</strong> (<code>string</code>) - fallback text to use when no tooltip text.</li>
<li><strong>placement</strong> (<code>string</code>) - position of tooltip - above | below | left | right.</li>
<li><strong>html</strong> (<code>boolean</code>) - is tooltip content HTML?</li>
<li><strong>live</strong> (<code>boolean</code>) - use live event support?</li>
<li><strong>offset</strong> (<code>number</code>) - pixel offset of tooltip from element.</li>
<li><strong>title</strong> (<code>string|function</code>) - attribute/callback containing tooltip text.</li>
<li><strong>trigger</strong> (<code>string</code>) - how tooltip is triggered - hover | focus | manual.</li>
</ul>
<h3>Methods</h3>
<h4>$().twipsy</h4>
<p>Attaches a twipsy handler to an element collection.</p>
<h3>Demo</h3>
<p>Mustache next level keffiyeh you <a href="#" rel='twipsy' title='Some title text'>probably</a> 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 <a href="#" rel='twipsy' title='i <3 cardigans'>cardigans</a> seitan tofu, mcsweeney's fixie sustainable quinoa 8-bit american apparel terry richardson vinyl chambray. Fap beard stumptown, <a href="#" rel='twipsy' title='Another twipsy'>williamsburg</a> 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 <a href="#" rel='twipsy' title='The last tip!'>PBR</a> banksy Austin freegan cred raw denim single-origin coffee viral.
</p>
<script>
$(function () {
$("a[rel=twipsy]").twipsy({
live: true
})
})
</script>
</div>
</div>
</section>
<!-- Section
================================================== -->
<!--
<section id="section">
<div class="page-header">
<h1></h1>
</div>
<div class="row">
<div class="span4 columns">
<p></p>
</div>
<div class="span12 columns">
<h3></h3>
<p></p>
</div>
</div>
</section>
-->
</div>
</body>
</html>

26
lib/patterns.less
View File

@ -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;
}
}

95
lib/scaffolding.less
View File

@ -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;
}
}
}