diff --git a/Makefile b/Makefile index e5c083ae6f..3d24eb1c52 100644 --- a/Makefile +++ b/Makefile @@ -1,5 +1,4 @@ VERSION=2.0.0 -DATE=$(shell DATE) BOOTSTRAP = ./bootstrap.css BOOTSTRAP_MIN = ./bootstrap.min.css BOOTSTRAP_LESS = ./lib/bootstrap.less @@ -9,7 +8,7 @@ WATCHR ?= `which watchr` build: @@if test ! -z ${LESS_COMPESSOR}; then \ - sed -e 's/@VERSION/'"v${VERSION}"'/' -e 's/@DATE/'"${DATE}"'/' <${BOOTSTRAP_LESS} >${BOOTSTRAP_LESS}.tmp; \ + sed -e 's/@VERSION/'"v${VERSION}"'/' -e 's/@DATE/'"`date`"'/' <${BOOTSTRAP_LESS} >${BOOTSTRAP_LESS}.tmp; \ lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP}; \ lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP_MIN} --compress; \ rm -f ${BOOTSTRAP_LESS}.tmp; \ @@ -22,15 +21,16 @@ build: uglify: @@if test ! -z ${UGLIFY_JS}; then \ mkdir -p js/min; \ - uglifyjs -o js/min/bootstrap-accordion.js js/bootstrap-accordion.js;\ - uglifyjs -o js/min/bootstrap-alerts.js js/bootstrap-alerts.js;\ - uglifyjs -o js/min/bootstrap-buttons.js js/bootstrap-buttons.js;\ + uglifyjs -o js/min/bootstrap-alerts.js js/bootstrap-alert.js;\ + uglifyjs -o js/min/bootstrap-buttons.js js/bootstrap-button.js;\ + uglifyjs -o js/min/bootstrap-carousel.js js/bootstrap-carousel.js;\ + uglifyjs -o js/min/bootstrap-collapse.js js/bootstrap-collapse.js;\ uglifyjs -o js/min/bootstrap-dropdown.js js/bootstrap-dropdown.js;\ uglifyjs -o js/min/bootstrap-modal.js js/bootstrap-modal.js;\ uglifyjs -o js/min/bootstrap-popover.js js/bootstrap-popover.js;\ uglifyjs -o js/min/bootstrap-scrollspy.js js/bootstrap-scrollspy.js;\ - uglifyjs -o js/min/bootstrap-tabs.js js/bootstrap-tabs.js;\ - uglifyjs -o js/min/bootstrap-transitions.js js/bootstrap-transitions.js;\ + uglifyjs -o js/min/bootstrap-tabs.js js/bootstrap-tab.js;\ + uglifyjs -o js/min/bootstrap-transitions.js js/bootstrap-transition.js;\ uglifyjs -o js/min/bootstrap-twipsy.js js/bootstrap-twipsy.js;\ else \ echo "You must have the UGLIFYJS minifier installed in order to minify Bootstrap's js."; \ diff --git a/bootstrap.css b/bootstrap.css index 2ea7a8fbe3..5e22415ddd 100644 --- a/bootstrap.css +++ b/bootstrap.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: Wed Dec 21 19:31:39 CST 2011 + * Date: Mon Dec 26 16:47:02 CST 2011 */ html, body { margin: 0; @@ -2451,19 +2451,19 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-opacity: 0.8; opacity: 0.8; } -.twipsy.above { +.twipsy.top { margin-top: -2px; } .twipsy.right { margin-left: 2px; } -.twipsy.below { +.twipsy.bottom { margin-top: 2px; } .twipsy.left { margin-left: -2px; } -.twipsy.above .twipsy-arrow { +.twipsy.top .twipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; @@ -2479,7 +2479,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { border-bottom: 5px solid transparent; border-left: 5px solid #000000; } -.twipsy.below .twipsy-arrow { +.twipsy.bottom .twipsy-arrow { top: 0; left: 50%; margin-left: -5px; @@ -2519,19 +2519,19 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { display: none; padding: 5px; } -.popover.above { +.popover.top { margin-top: -5px; } .popover.right { margin-left: 5px; } -.popover.below { +.popover.bottom { margin-top: 5px; } .popover.left { margin-left: -5px; } -.popover.above .arrow { +.popover.top .arrow { bottom: 0; left: 50%; margin-left: -5px; @@ -2547,7 +2547,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { border-bottom: 5px solid transparent; border-right: 5px solid #000000; } -.popover.below .arrow { +.popover.bottom .arrow { top: 0; left: 50%; margin-left: -5px; diff --git a/bootstrap.min.css b/bootstrap.min.css index f6587dd878..aa277ddb8c 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -317,23 +317,23 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .modal-footer:after{clear:both;} .modal-footer .btn{float:right;margin-left:5px;} .twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} -.twipsy.above{margin-top:-2px;} +.twipsy.top{margin-top:-2px;} .twipsy.right{margin-left:2px;} -.twipsy.below{margin-top:2px;} +.twipsy.bottom{margin-top:2px;} .twipsy.left{margin-left:-2px;} -.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 #000000;} +.twipsy.top .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .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 #000000;} -.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 #000000;} +.twipsy.bottom .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .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 #000000;} .twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} .twipsy-arrow{position:absolute;width:0;height:0;} -.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.above{margin-top:-5px;} +.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.top{margin-top:-5px;} .popover.right{margin-left:5px;} -.popover.below{margin-top:5px;} +.popover.bottom{margin-top:5px;} .popover.left{margin-left:-5px;} -.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} +.popover.top .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} .popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} -.popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} +.popover.bottom .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} .popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} .popover .arrow{position:absolute;width:0;height:0;} .popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-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);} diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 724daf9ebd..eae84b138f 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -1,83 +1,76 @@ $(function(){ + // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT + // IT'S ALL JUST JUNK FOR OUR DOCS! + // ++++++++++++++++++++++++++++++++++++++++++ + // Hide the Mobile Safari address bar once loaded // ============================================== - window.addEventListener("load",function() { - // Set a timeout... - setTimeout(function(){ - // Hide the address bar! - window.scrollTo(0, 1); - }, 0); - }); - - - // Docs topbar nav - // =============== - - $('.nav .active').click(function(e) { - e.preventDefault(); - $(this).siblings().toggle(); - }); - - - // Show grid dimensions on hover - // ============================= - - $('.show-grid > div').hover(function() { - var width = $(this).width(); - $(this).attr('title', width); - $(this).twipsy(); - }); - + // Set a timeout... + setTimeout(function(){ + // Hide the address bar! + window.scrollTo(0, 1); + }, 0); // table sort example // ================== - $("#sortTableExample").tablesorter( { sortList: [[ 1, 0 ]] } ) + // make code pretty + window.prettyPrint && prettyPrint() + // table sort example + if ($.fn.tableSorter) { + $("#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') - } + $('.add-on :checkbox').on('click', function () { + var $this = $(this) + , method = $this.attr('checked') ? 'addClass' : 'removeClass' + $(this).parents('.add-on')[method]('active') }) - // Disable certain links in docs - // ============================= - // Please do not carry these styles over to your projects, it's merely here to prevent button clicks form taking you away from your spot on page + // Please do not carry these styles over to your projects + // it's merely here to prevent button clicks form taking you + // away from your spot on page!! - $('ul.tabs a, ul.pills a, .pagination a, .well .btn, .actions .btn, .alert-message .btn, a.close').click(function (e) { + $('[href^=#]').click(function (e) { e.preventDefault() }) // Copy code blocks in docs - $(".copy-code").focus(function () { - var el = this; - // push select to event loop for chrome :{o - setTimeout(function () { $(el).select(); }, 1); - }); - - - // POSITION STATIC TWIPSIES - // ======================== - - $(window).on('load resize', function () { - $(".twipsies a").each(function () { - $(this) - .twipsy({ - live: false - , placement: $(this).attr('title') - , trigger: 'manual' - , offset: 2 - }) - .twipsy('show') - }) + $(".copy-code").on('focus', function () { + var el = this + setTimeout(function () { $(el).select() }, 0) }) -}); + + if ($.fn.twipsy) { + + // position static twipsies for components page + if ($(".twipsies a").length) { + $(window).on('load resize', function () { + $(".twipsies a").each(function () { + $(this) + .twipsy({ + placement: $(this).attr('title') + , trigger: 'manual' + }) + .twipsy('show') + }) + }) + } + + // add tipsies to grid for scaffolding + if ($('#grid-system').length) { + + $('#grid-system').twipsy({ + selector: '.show-grid > div' + , title: function () { return $(this).width() + 'px' } + }) + + } + } + +}) diff --git a/docs/base-css.html b/docs/base-css.html index bb54b0c511..dad42381de 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1179,13 +1179,7 @@ Form states - - - - - - diff --git a/docs/components.html b/docs/components.html index 2f359ab57f..c6a349ff49 100644 --- a/docs/components.html +++ b/docs/components.html @@ -22,18 +22,6 @@ - - - - - - - - - - - - @@ -242,7 +230,7 @@

Navbar

Fixed navbar

-
+
Project Name @@ -321,8 +309,8 @@
  • Messages
  • Settings
  • Contact
    • -
  • - Dropdown +
  • + Dropdown
    • Secondary link
    • Something else here
      • @@ -344,11 +332,11 @@

      As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.

      -
        -
      • Section 1
        • -
      • Section 2
        • -
      • Section 3
        • -
      • Section 4
        • +
        @@ -369,21 +357,21 @@
        -
          -
        • Section 1
          • -
        • Section 2
          • -
        • Section 3
          • +
          -
          +

          Section 1

          Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

          -
          +

          Section 2

          Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

          -
          +

          Section 3

          Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

          @@ -392,21 +380,21 @@
          -
            -
          • Section 1
            • -
          • Section 2
            • -
          • Section 3
            • +
            -
            +

            Section 1

            Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

            -
            +

            Section 2

            Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

            -
            +

            Section 3

            Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

            @@ -417,24 +405,24 @@
            -
            +

            Oh hai #1!

            -
            +

            Oh hai #2!

            -
            +

            Oh hai #3!

            -
            +

            Oh hai #4!

            -
            @@ -768,7 +756,7 @@

            -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. +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.

            @@ -811,9 +799,6 @@ Lorem ipsum dolar sit amet illo error ipsum verita
            - - -
            + + + + + + + + + + + diff --git a/docs/index.html b/docs/index.html index 9cad062714..0d340fa1ab 100644 --- a/docs/index.html +++ b/docs/index.html @@ -97,10 +97,10 @@
          • ·
          • - +
          @@ -217,8 +217,8 @@ + - diff --git a/docs/javascript.html b/docs/javascript.html index bf27dd7f17..d5aebbacdc 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -23,38 +23,6 @@ - - - - - - - - - - - - - - - - - - @@ -576,8 +544,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) { placement string - 'above' - how to position the tooltip - above | below | left | right + 'top' + how to position the tooltip - top | bottom | left | right selector @@ -667,7 +635,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { placement string 'right' - how to position the popover - above | below | left | right + how to position the popover - top | bottom | left | right selector @@ -750,6 +718,30 @@ $('a[data-toggle="tab"]').on('shown', function (e) {

          .alert('close')

          Closes an alert.

          $(".alert-message").alert('close')
          +

          Events

          +

          Bootstrap's alert class exposes a few events for hooking into alert functionality.

          + + + + + + + + + + + + + + + + + +
          EventDescription
          closeThis event fires immediately when the close instance method is called.
          closedThis event is fired when the alert has been closed (will wait for css transitions to complete).
          +
          +$('#my-alert').bind('closed', function () {
+  // do something ...
+})

          Demo

          × @@ -828,16 +820,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) { - @@ -1029,5 +1011,47 @@ $('#myCollapsible').on('hidden', function () {

          Icons from Glyphicons Free, licensed under CC BY 3.0.

          + + + + + + + + + + + + + + + + + + + diff --git a/docs/less.html b/docs/less.html index e004bc24c2..7d3efd296c 100644 --- a/docs/less.html +++ b/docs/less.html @@ -467,13 +467,7 @@ - - - - - - diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 4735534129..0a46252ddb 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -64,34 +64,34 @@

          Default 940px grid

          -
          1
          -
          1
          -
          1
          -
          1
          -
          1
          -
          1
          -
          1
          -
          1
          -
          1
          -
          1
          -
          1
          -
          1
          +
          1
          +
          1
          +
          1
          +
          1
          +
          1
          +
          1
          +
          1
          +
          1
          +
          1
          +
          1
          +
          1
          +
          1
          -
          4
          -
          4
          -
          4
          +
          4
          +
          4
          +
          4
          -
          4
          -
          8
          +
          4
          +
          8
          -
          6
          -
          6
          +
          6
          +
          6
          -
          12
          +
          12
          @@ -358,7 +358,6 @@ -
          @@ -372,13 +371,10 @@ - - - - + - + diff --git a/docs/upgrading.html b/docs/upgrading.html index 3e5a14a8ab..7be1fd7089 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -99,6 +99,7 @@
        • Added button bar options
        +
      - - - - - - - - - - - diff --git a/js/README.md b/js/README.md index 0d8d163a28..2f8e1716f5 100644 --- a/js/README.md +++ b/js/README.md @@ -49,7 +49,7 @@ examples: backdrop: true keyboard: false - placement: 'above' + placement: 'top' --- diff --git a/js/bootstrap-alert.js b/js/bootstrap-alert.js index 90961cdd39..1ce8f01bff 100644 --- a/js/bootstrap-alert.js +++ b/js/bootstrap-alert.js @@ -39,6 +39,8 @@ , selector = $this.attr('data-target') || $this.attr('href') , $parent = $(selector) + $parent.trigger('close') + e && e.preventDefault() $parent.length || ($parent = $this.hasClass('alert-message') ? $this : $this.parent()) @@ -47,6 +49,8 @@ function removeElement() { $parent.remove() + + $parent.trigger('closed') } $.support.transition && $parent.hasClass('fade') ? diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js index 313c0abcab..9301c7309d 100644 --- a/js/bootstrap-collapse.js +++ b/js/bootstrap-collapse.js @@ -17,7 +17,7 @@ * limitations under the License. * ============================================================ */ -(function( $ ){ +!function( $ ){ "use strict" @@ -132,4 +132,4 @@ }) }) -})( window.jQuery ) \ No newline at end of file +}( window.jQuery ) \ No newline at end of file diff --git a/js/bootstrap-transition.js b/js/bootstrap-transition.js index 25f8b111f1..29fa1bdebc 100644 --- a/js/bootstrap-transition.js +++ b/js/bootstrap-transition.js @@ -19,6 +19,8 @@ $(function () { + "use strict" + /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) * ======================================================= */ diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index 018edb97e5..a176f09088 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -99,6 +99,7 @@ , show: function () { var $tip + , inside , pos , actualWidth , actualHeight @@ -113,26 +114,27 @@ $tip.addClass('fade') } + placement = typeof this.options.placement == 'function' ? + thing.call(this, $tip[0], this.$element[0]) : + this.options.placement + + inside = /in/.test(placement) + $tip .remove() .css({ top: 0, left: 0, display: 'block' }) - .prependTo(document.body) + .prependTo(inside ? this.$element : document.body) - pos = $.extend({}, this.$element.offset(), { - width: this.$element[0].offsetWidth - , height: this.$element[0].offsetHeight - }) + pos = this.getPosition(inside) actualWidth = $tip[0].offsetWidth actualHeight = $tip[0].offsetHeight - placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ]) - - switch (placement) { - case 'below': + switch (inside ? placement.split(' ')[1] : placement) { + case 'bottom': tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2} break - case 'above': + case 'top': tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2} break case 'left': @@ -162,13 +164,20 @@ $tip.removeClass('in') - function removeElement () { - $tip.remove() + function removeWithAnimation() { + var timeout = setTimeout(function () { + $tip.off($.support.transition.end).remove() + }, 500) + + $tip.one($.support.transition.end, function () { + clearTimeout(timeout) + $tip.remove() + }) } $.support.transition && this.$tip.hasClass('fade') ? - $tip.on($.support.transition.end, removeElement) : - removeElement() + removeWithAnimation() : + $tip.remove() } , fixTitle: function () { @@ -182,6 +191,13 @@ return this.getTitle() } + , getPosition: function (inside) { + return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), { + width: this.$element[0].offsetWidth + , height: this.$element[0].offsetHeight + }) + } + , getTitle: function () { var title , $e = this.$element @@ -226,14 +242,6 @@ } - /* TWIPSY PRIVATE METHODS - * ====================== */ - - function maybeCall ( thing, ctx, args ) { - return typeof thing == 'function' ? thing.apply(ctx, args) : thing - } - - /* TWIPSY PLUGIN DEFINITION * ======================== */ @@ -253,7 +261,7 @@ animation: true , delay: 0 , selector: false - , placement: 'above' + , placement: 'top' , trigger: 'hover' , title: '' , template: '
      ' diff --git a/js/tests/unit/bootstrap-twipsy.js b/js/tests/unit/bootstrap-twipsy.js index 7a88ab2f13..6623fc026e 100644 --- a/js/tests/unit/bootstrap-twipsy.js +++ b/js/tests/unit/bootstrap-twipsy.js @@ -30,10 +30,10 @@ $(function () { $.support.transition = false var twipsy = $('') .appendTo('#qunit-fixture') - .twipsy({placement: 'below'}) + .twipsy({placement: 'bottom'}) .twipsy('show') - ok($(".twipsy").hasClass('fade below in'), 'has correct classes applied') + ok($(".twipsy").hasClass('fade bottom in'), 'has correct classes applied') twipsy.twipsy('hide') }) diff --git a/lib/mixins.less b/lib/mixins.less index 251173fced..e8b5cdd2f5 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -282,7 +282,7 @@ // Popover arrows // For tipsies and popovers #popoverArrow { - .above(@arrowWidth: 5px) { + .top(@arrowWidth: 5px) { bottom: 0; left: 50%; margin-left: -@arrowWidth; @@ -298,7 +298,7 @@ border-bottom: @arrowWidth solid transparent; border-left: @arrowWidth solid @black; } - .below(@arrowWidth: 5px) { + .bottom(@arrowWidth: 5px) { top: 0; left: 50%; margin-left: -@arrowWidth; diff --git a/lib/popovers.less b/lib/popovers.less index ff875eaffb..5ecde09233 100644 --- a/lib/popovers.less +++ b/lib/popovers.less @@ -8,14 +8,14 @@ z-index: 1000; display: none; padding: 5px; - &.above { margin-top: -5px; } - &.right { margin-left: 5px; } - &.below { margin-top: 5px; } - &.left { margin-left: -5px; } - &.above .arrow { #popoverArrow > .above(); } - &.right .arrow { #popoverArrow > .right(); } - &.below .arrow { #popoverArrow > .below(); } - &.left .arrow { #popoverArrow > .left(); } + &.top { margin-top: -5px; } + &.right { margin-left: 5px; } + &.bottom { margin-top: 5px; } + &.left { margin-left: -5px; } + &.top .arrow { #popoverArrow > .top(); } + &.right .arrow { #popoverArrow > .right(); } + &.bottom .arrow { #popoverArrow > .bottom(); } + &.left .arrow { #popoverArrow > .left(); } .arrow { position: absolute; width: 0; diff --git a/lib/twipsy.less b/lib/twipsy.less index 05f121a5dd..abd0599f4e 100644 --- a/lib/twipsy.less +++ b/lib/twipsy.less @@ -9,15 +9,15 @@ padding: 5px; font-size: 11px; .opacity(0); - &.in { .opacity(80); } - &.above { margin-top: -2px; } - &.right { margin-left: 2px; } - &.below { margin-top: 2px; } - &.left { margin-left: -2px; } - &.above .twipsy-arrow { #popoverArrow > .above(); } - &.left .twipsy-arrow { #popoverArrow > .left(); } - &.below .twipsy-arrow { #popoverArrow > .below(); } - &.right .twipsy-arrow { #popoverArrow > .right(); } + &.in { .opacity(80); } + &.top { margin-top: -2px; } + &.right { margin-left: 2px; } + &.bottom { margin-top: 2px; } + &.left { margin-left: -2px; } + &.top .twipsy-arrow { #popoverArrow > .top(); } + &.left .twipsy-arrow { #popoverArrow > .left(); } + &.bottom .twipsy-arrow { #popoverArrow > .bottom(); } + &.right .twipsy-arrow { #popoverArrow > .right(); } } .twipsy-inner { max-width: 200px;