diff options
-rw-r--r-- | docs/assets/css/bootstrap.css | 218 | ||||
-rw-r--r-- | docs/assets/css/docs.css | 14 | ||||
-rw-r--r-- | docs/base-css.html | 3 | ||||
-rw-r--r-- | docs/javascript.html | 45 | ||||
-rw-r--r-- | docs/templates/pages/base-css.mustache | 3 | ||||
-rw-r--r-- | docs/templates/pages/javascript.mustache | 45 | ||||
-rw-r--r-- | less/mixins.less | 52 | ||||
-rw-r--r-- | less/popovers.less | 57 | ||||
-rw-r--r-- | less/variables.less | 5 | ||||
-rw-r--r-- | less/wells.less | 5 |
10 files changed, 335 insertions, 112 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index d4b1eb8942..715c49baa2 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2644,8 +2644,7 @@ table .span24 { padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; - border: 1px solid #eee; - border: 1px solid rgba(0, 0, 0, 0.05); + border: 1px solid #e3e3e3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; @@ -4531,39 +4530,75 @@ input[type="submit"].btn.btn-mini { } .tooltip.top .tooltip-arrow { - bottom: 0; + bottom: -10px; left: 50%; - margin-left: -5px; - border-top: 5px solid #000000; - border-right: 5px solid transparent; - border-left: 5px solid transparent; + margin-left: -10px; + border-top: 10px solid #cccccc; + border-top: 10px solid rgba(0, 0, 0, 0.2); + border-right: 10px solid transparent; + border-left: 10px solid transparent; +} + +.tooltip.top .tooltip-arrow:after { + bottom: 1px; + left: -9px; + border-top: 9px solid #ffffff; + border-right: 9px solid transparent; + border-left: 9px solid transparent; } .tooltip.left .tooltip-arrow { top: 50%; - right: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #000000; + right: -10px; + margin-top: -10px; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-left: 10px solid #cccccc; + border-left: 10px solid rgba(0, 0, 0, 0.2); +} + +.tooltip.left .tooltip-arrow:after { + right: 1px; + bottom: -9px; + border-top: 9px solid transparent; + border-bottom: 9px solid transparent; + border-left: 9px solid #ffffff; } .tooltip.bottom .tooltip-arrow { - top: 0; + top: -10px; left: 50%; - margin-left: -5px; - border-right: 5px solid transparent; - border-bottom: 5px solid #000000; - border-left: 5px solid transparent; + margin-left: -10px; + border-right: 10px solid transparent; + border-bottom: 10px solid #cccccc; + border-bottom: 10px solid rgba(0, 0, 0, 0.2); + border-left: 10px solid transparent; +} + +.tooltip.bottom .tooltip-arrow:after { + top: 1px; + left: -9px; + border-right: 9px solid transparent; + border-bottom: 9px solid #f5f5f5; + border-left: 9px solid transparent; } .tooltip.right .tooltip-arrow { top: 50%; - left: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-right: 5px solid #000000; - border-bottom: 5px solid transparent; + left: -10px; + margin-top: -10px; + border-top: 10px solid transparent; + border-right: 10px solid #cccccc; + border-right: 10px solid rgba(0, 0, 0, 0.2); + border-bottom: 10px solid transparent; +} + +.tooltip.right .tooltip-arrow:after { + bottom: -9px; + left: 1px; + border-top: 9px solid transparent; + border-right: 9px solid #ffffff; + border-bottom: 9px solid transparent; } .tooltip-inner { @@ -4590,59 +4625,107 @@ input[type="submit"].btn.btn-mini { left: 0; z-index: 1010; display: none; - padding: 5px; + width: 218px; + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.2); + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .popover.top { - margin-top: -5px; + margin-bottom: 10px; } .popover.right { - margin-left: 5px; + margin-left: 10px; } .popover.bottom { - margin-top: 5px; + margin-top: 10px; } .popover.left { - margin-left: -5px; + margin-right: 10px; } .popover.top .arrow { - bottom: 0; + bottom: -10px; left: 50%; - margin-left: -5px; - border-top: 5px solid #000000; - border-right: 5px solid transparent; - border-left: 5px solid transparent; + margin-left: -10px; + border-top: 10px solid #cccccc; + border-top: 10px solid rgba(0, 0, 0, 0.2); + border-right: 10px solid transparent; + border-left: 10px solid transparent; +} + +.popover.top .arrow:after { + bottom: 1px; + left: -9px; + border-top: 9px solid #ffffff; + border-right: 9px solid transparent; + border-left: 9px solid transparent; } .popover.right .arrow { top: 50%; - left: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-right: 5px solid #000000; - border-bottom: 5px solid transparent; + left: -10px; + margin-top: -10px; + border-top: 10px solid transparent; + border-right: 10px solid #cccccc; + border-right: 10px solid rgba(0, 0, 0, 0.2); + border-bottom: 10px solid transparent; +} + +.popover.right .arrow:after { + bottom: -9px; + left: 1px; + border-top: 9px solid transparent; + border-right: 9px solid #ffffff; + border-bottom: 9px solid transparent; } .popover.bottom .arrow { - top: 0; + top: -10px; left: 50%; - margin-left: -5px; - border-right: 5px solid transparent; - border-bottom: 5px solid #000000; - border-left: 5px solid transparent; + margin-left: -10px; + border-right: 10px solid transparent; + border-bottom: 10px solid #cccccc; + border-bottom: 10px solid rgba(0, 0, 0, 0.2); + border-left: 10px solid transparent; +} + +.popover.bottom .arrow:after { + top: 1px; + left: -9px; + border-right: 9px solid transparent; + border-bottom: 9px solid #f5f5f5; + border-left: 9px solid transparent; } .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; + right: -10px; + margin-top: -10px; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-left: 10px solid #cccccc; + border-left: 10px solid rgba(0, 0, 0, 0.2); +} + +.popover.left .arrow:after { + right: 1px; + bottom: -9px; + border-top: 9px solid transparent; + border-bottom: 9px solid transparent; + border-left: 9px solid #ffffff; } .popover .arrow { @@ -4651,39 +4734,28 @@ input[type="submit"].btn.btn-mini { height: 0; } -.popover-inner { - width: 280px; - padding: 3px; - overflow: hidden; - background: #000000; - background: 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); +.popover .arrow:after { + position: absolute; + display: inline-block; + width: 0; + height: 0; + content: ""; } .popover-title { - padding: 9px 15px; - line-height: 1; + padding: 8px 14px; + font-size: 14px; + font-weight: normal; + line-height: 18px; background-color: #f5f5f5; - border-bottom: 1px solid #eee; - -webkit-border-radius: 3px 3px 0 0; - -moz-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; + border-bottom: 1px solid #e5e5e5; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; } .popover-content { - padding: 14px; - background-color: #ffffff; - -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; + padding: 9px 14px; } .popover-content p, diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 9e6964a84d..a0f3546a4c 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -601,6 +601,20 @@ form.bs-docs-example { line-height: 18px; } +/* Popovers */ +.bs-docs-example-popover { + padding-bottom: 24px; + background-color: #f9f9f9; +} +.bs-docs-example-popover .popover { + position: relative; + display: block; + float: left; + width: 210px; + margin: 10px; +} + + /* Responsive table ------------------------- */ .responsive-utilities th small { diff --git a/docs/base-css.html b/docs/base-css.html index 2b679d994c..2b7c1ec712 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1555,6 +1555,9 @@ For example, <code>section</code> should be wrapped as inline. </div> </div> + <h3>Glyphicons attribution</h3> + <p><a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.</p> + <hr class="bs-docs-separator"> diff --git a/docs/javascript.html b/docs/javascript.html index bc82711fb9..7fb1448ec0 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -848,11 +848,52 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h1>Popovers <small>bootstrap-popover.js</small></h1> </div> - <h2>Example</h2> + <h2>Examples</h2> <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.</p> <p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltip</a> to be included</p> + + <h3>Static popover</h3> + <p>Four options are available: top, right, bottom, and left aligned.</p> + <div class="bs-docs-example bs-docs-example-popover"> + <div class="popover top"> + <div class="arrow"></div> + <h3 class="popover-title">Popover top</h3> + <div class="popover-content"> + <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> + </div> + </div> + + <div class="popover right"> + <div class="arrow"></div> + <h3 class="popover-title">Popover right</h3> + <div class="popover-content"> + <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> + </div> + </div> + + <div class="popover bottom"> + <div class="arrow"></div> + <h3 class="popover-title">Popover bottom</h3> + <div class="popover-content"> + <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> + </div> + </div> + + <div class="popover left"> + <div class="arrow"></div> + <h3 class="popover-title">Popover left</h3> + <div class="popover-content"> + <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> + </div> + </div> + + <div class="clearfix"></div> + </div> + <p>No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.</p> + + <h3>Live demo</h3> <div class="bs-docs-example" style="padding-bottom: 24px;"> - <a href="#" class="btn btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a> + <a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Hover for popover</a> </div> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 583d0709ee..9b79c3d9c5 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1486,6 +1486,9 @@ </div> </div> + <h3>Glyphicons attribution</h3> + <p>{{_i}}<a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at not cost to you as developers. As a thank you, we ask you to include an optional link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever practical.{{/i}}</p> + <hr class="bs-docs-separator"> diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache index cc1ecf1cbb..a73917f5e3 100644 --- a/docs/templates/pages/javascript.mustache +++ b/docs/templates/pages/javascript.mustache @@ -773,11 +773,52 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <h1>{{_i}}Popovers{{/i}} <small>bootstrap-popover.js</small></h1> </div> - <h2>{{_i}}Example{{/i}}</h2> + <h2>{{_i}}Examples{{/i}}</h2> <p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.{{/i}}</p> <p class="muted"><strong>*</strong> {{_i}}Requires <a href="#tooltips">Tooltip</a> to be included{{/i}}</p> + + <h3>{{_i}}Static popover{{/i}}</h3> + <p>{{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}</p> + <div class="bs-docs-example bs-docs-example-popover"> + <div class="popover top"> + <div class="arrow"></div> + <h3 class="popover-title">Popover top</h3> + <div class="popover-content"> + <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> + </div> + </div> + + <div class="popover right"> + <div class="arrow"></div> + <h3 class="popover-title">Popover right</h3> + <div class="popover-content"> + <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> + </div> + </div> + + <div class="popover bottom"> + <div class="arrow"></div> + <h3 class="popover-title">Popover bottom</h3> + <div class="popover-content"> + <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> + </div> + </div> + + <div class="popover left"> + <div class="arrow"></div> + <h3 class="popover-title">Popover left</h3> + <div class="popover-content"> + <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> + </div> + </div> + + <div class="clearfix"></div> + </div> + <p>{{_i}}No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.{{/i}}</p> + + <h3>Live demo</h3> <div class="bs-docs-example" style="padding-bottom: 24px;"> - <a href="#" class="btn btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}hover for popover{{/i}}</a> + <a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">{{_i}}Hover for popover{{/i}}</a> </div> diff --git a/less/mixins.less b/less/mixins.less index e1e06bd2a6..fd162a0491 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -509,37 +509,69 @@ // ------------------------- // For tipsies and popovers #popoverArrow { - .top(@arrowWidth: 5px, @color: @black) { - bottom: 0; + .top(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { + bottom: -@arrowWidth; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; + border-top: @arrowWidth solid #ccc; border-top: @arrowWidth solid @color; + &:after { + border-left: @arrowWidth - 1 solid transparent; + border-right: @arrowWidth - 1 solid transparent; + border-top: @arrowWidth - 1 solid #fff; + bottom: 1px; + left: -@arrowWidth + 1; + } } - .left(@arrowWidth: 5px, @color: @black) { + .right(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { top: 50%; - right: 0; + left: -@arrowWidth; margin-top: -@arrowWidth; border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; - border-left: @arrowWidth solid @color; + border-right: @arrowWidth solid #ccc; + border-right: @arrowWidth solid @color; + &:after { + border-top: @arrowWidth - 1 solid transparent; + border-bottom: @arrowWidth - 1 solid transparent; + border-right: @arrowWidth - 1 solid #fff; + bottom: -@arrowWidth + 1; + left: 1px; + } } - .bottom(@arrowWidth: 5px, @color: @black) { - top: 0; + .bottom(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { + top: -@arrowWidth; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid #ccc; border-bottom: @arrowWidth solid @color; + &:after { + border-left: @arrowWidth - 1 solid transparent; + border-right: @arrowWidth - 1 solid transparent; + border-bottom: @arrowWidth - 1 solid #f5f5f5; + top: 1px; + left: -@arrowWidth + 1; + } } - .right(@arrowWidth: 5px, @color: @black) { + .left(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { top: 50%; - left: 0; + right: -@arrowWidth; margin-top: -@arrowWidth; border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; - border-right: @arrowWidth solid @color; + border-left: @arrowWidth solid #ccc; + border-left: @arrowWidth solid @color; + &:after { + border-top: @arrowWidth - 1 solid transparent; + border-bottom: @arrowWidth - 1 solid transparent; + border-left: @arrowWidth - 1 solid #fff; + bottom: -@arrowWidth + 1; + right: 1px; + } } } diff --git a/less/popovers.less b/less/popovers.less index 558d99ec99..ca69ca8018 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -7,42 +7,55 @@ left: 0; z-index: @zindexPopover; display: none; - padding: 5px; - &.top { margin-top: -5px; } - &.right { margin-left: 5px; } - &.bottom { margin-top: 5px; } - &.left { margin-left: -5px; } + width: 218px; + background-color: #fff; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + border: 1px solid #ccc; + border: 1px solid rgba(0,0,0,.2); + .border-radius(6px); + .box-shadow(0 5px 10px rgba(0,0,0,.2)); + + // Offset the popover to account for the popover arrow + &.top { margin-bottom: 10px; } + &.right { margin-left: 10px; } + &.bottom { margin-top: 10px; } + &.left { margin-right: 10px; } + + // Call the mixin for the arrows &.top .arrow { #popoverArrow > .top(); } &.right .arrow { #popoverArrow > .right(); } &.bottom .arrow { #popoverArrow > .bottom(); } &.left .arrow { #popoverArrow > .left(); } + + // Common arrow styles .arrow { position: absolute; width: 0; height: 0; + &:after { + position: absolute; + display: inline-block; + width: 0; + height: 0; + content: ""; + } } } -.popover-inner { - padding: 3px; - width: 280px; - overflow: hidden; - background: @black; // has to be full background declaration for IE fallback - background: rgba(0,0,0,.8); - .border-radius(6px); - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); -} + .popover-title { - padding: 9px 15px; - line-height: 1; + padding: 8px 14px; + font-size: 14px; + font-weight: normal; + line-height: 18px; background-color: #f5f5f5; - border-bottom:1px solid #eee; - .border-radius(3px 3px 0 0); + border-bottom: 1px solid #e5e5e5; + .border-radius(5px 5px 0 0); } + .popover-content { - padding: 14px; - background-color: @white; - .border-radius(0 0 3px 3px); - .background-clip(padding-box); + padding: 9px 14px; p, ul, ol { margin-bottom: 0; } diff --git a/less/variables.less b/less/variables.less index 25a032781d..bd3a2905d0 100644 --- a/less/variables.less +++ b/less/variables.less @@ -148,6 +148,11 @@ @hrBorder: @grayLighter; +// Wells +// ------------------------- +@wellBackground: #f5f5f5; + + // Navbar // ------------------------- @navbarHeight: 40px; diff --git a/less/wells.less b/less/wells.less index 9300061a50..bac3715a7d 100644 --- a/less/wells.less +++ b/less/wells.less @@ -5,9 +5,8 @@ min-height: 20px; padding: 19px; margin-bottom: 20px; - background-color: #f5f5f5; - border: 1px solid #eee; - border: 1px solid rgba(0,0,0,.05); + background-color: @wellBackground; + border: 1px solid darken(@wellBackground, 7%); .border-radius(4px); .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); blockquote { |