From 3117fc979db9f678fa1782c6a9d0d1428b4894f8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 1 Jul 2011 23:10:39 -0700 Subject: getting popovers in --- bootstrap-1.0.0.css | 169 +++++++++++++++++++++++++++++++++++++++- bootstrap-1.0.0.min.css | 26 ++++++- docs/assets/css/docs.css | 17 +++++ docs/index.html | 56 +++++++++++++- lib/patterns.less | 195 +++++++++++++++++++++++++++++++++++++---------- 5 files changed, 411 insertions(+), 52 deletions(-) diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css index 71a3cc9e74..53e0b6a649 100644 --- a/bootstrap-1.0.0.css +++ b/bootstrap-1.0.0.css @@ -1617,7 +1617,7 @@ div.twipsy.above .twipsy-arrow { margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-top: 5px solid #000; + border-top: 5px solid #000000; } div.twipsy.left .twipsy-arrow { top: 50%; @@ -1625,7 +1625,7 @@ div.twipsy.left .twipsy-arrow { margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; - border-left: 5px solid #000; + border-left: 5px solid #000000; } div.twipsy.below .twipsy-arrow { top: 0; @@ -1633,7 +1633,7 @@ div.twipsy.below .twipsy-arrow { margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-bottom: 5px solid #000; + border-bottom: 5px solid #000000; } div.twipsy.right .twipsy-arrow { top: 50%; @@ -1641,7 +1641,7 @@ div.twipsy.right .twipsy-arrow { margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; - border-right: 5px solid #000; + border-right: 5px solid #000000; } div.twipsy .twipsy-inner { padding: 3px 8px; @@ -1659,3 +1659,164 @@ div.twipsy .twipsy-arrow { width: 0; height: 0; } +.popover-wrapper { + position: relative; +} +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 10000; + display: none; +} +.popover-border { + background: rgba(0, 0, 0, 0.8); + padding: 5px; + overflow: hidden; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); +} +.popover-title { + padding: 5px 15px 10px; + color: #fff; + line-height: 1; +} +.popover-inner { + background-color: #fff; + overflow: hidden; + padding: 15px; + width: 200px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.popover-inner p, .popover-inner ul, .popover-inner ol { + margin-bottom: 0; +} +.popover2 { + padding: 5px; +} +.popover2 .inner { + -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); + width: 280px; +} +.popover2.above .arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #000000; +} +.popover2.right .arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 5px solid #000000; +} +.popover2.below .arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 5px solid #000000; +} +.popover2.left .arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid #000000; +} +.popover2 .arrow { + position: absolute; + width: 0; + height: 0; +} +.popover2 .title { + background-color: #222222; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#444444), to(#222222)); + background-image: -moz-linear-gradient(#444444, #222222); + background-image: -ms-linear-gradient(#444444, #222222); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #222222)); + background-image: -webkit-linear-gradient(#444444, #222222); + background-image: -o-linear-gradient(#444444, #222222); + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0)"; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0); + background-image: linear-gradient(#444444, #222222); + padding: 9px 15px; + color: #fff; + line-height: 1; + -webkit-border-radius: 6px 6px 0 0; + -moz-border-radius: 6px 6px 0 0; + border-radius: 6px 6px 0 0; +} +.popover2 .content { + background-color: #ffffff; + padding: 14px; + border: 1px solid #000000; + border-top: 0; + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; + -webkit-background-clip: padding; + -moz-background-clip: padding; + background-clip: padding; +} +.popover2 .content p, .popover2 .content ul, .popover2 .content ol { + margin-bottom: 0; +} +.popover-menu { + position: absolute; + top: 0; + left: 0; + display: none; + z-index: 10000; + background: none; +} +.popover-menu .popover-arrow { + width: 100%; + height: 14px; + background: url(/blueprint/images/popover-menu-bottom.png) no-repeat bottom center; +} +.popover-menu .popover-border { + margin: 0 0 -3px; + padding: 2px; + background: rgba(255, 255, 255, 0.75); + border: 1px solid rgba(0, 0, 0, 0.5); + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + overflow: hidden; + -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); + -webkit-background-clip: padding; +} +.popover-menu .popover-inner { + background: #222; + padding: 7px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + width: 150px; +} +.popover-menu a { + color: #fff; + font-weight: bold; + padding: 5px 8px; +} diff --git a/bootstrap-1.0.0.min.css b/bootstrap-1.0.0.min.css index fbc3b86df1..11fe0bcc8f 100644 --- a/bootstrap-1.0.0.min.css +++ b/bootstrap-1.0.0.min.css @@ -199,9 +199,27 @@ div.modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-280px div.modal .modal-body{padding:20px;} div.modal .modal-footer{background-color:#eee;padding:14px 20px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}div.modal .modal-footer:after{display:block;visibility:hidden;height:0;clear:both;content:".";} div.modal .modal-footer .btn{float:right;margin-left:10px;} -div.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:100000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}div.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000;} -div.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000;} -div.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000;} -div.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000;} +div.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:11px;z-index:100000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}div.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} +div.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} +div.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} +div.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} div.twipsy .twipsy-inner{padding:3px 8px;background-color:#000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} div.twipsy .twipsy-arrow{position:absolute;width:0;height:0;} +.popover-wrapper{position:relative;} +.popover{position:absolute;top:0;left:0;z-index:10000;display:none;} +.popover-border{background:rgba(0, 0, 0, 0.8);padding:5px;overflow:hidden;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);-moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);} +.popover-title{padding:5px 15px 10px;color:#fff;line-height:1;} +.popover-inner{background-color:#fff;overflow:hidden;padding:15px;width:200px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}.popover-inner p,.popover-inner ul,.popover-inner ol{margin-bottom:0;} +.popover2{padding:5px;}.popover2 .inner{-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);width:280px;} +.popover2.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} +.popover2.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} +.popover2.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} +.popover2.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} +.popover2 .arrow{position:absolute;width:0;height:0;} +.popover2 .title{background-color:#222222;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#444444), to(#222222));background-image:-moz-linear-gradient(#444444, #222222);background-image:-ms-linear-gradient(#444444, #222222);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #222222));background-image:-webkit-linear-gradient(#444444, #222222);background-image:-o-linear-gradient(#444444, #222222);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#222222', GradientType=0);background-image:linear-gradient(#444444, #222222);padding:9px 15px;color:#fff;line-height:1;-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0;} +.popover2 .content{background-color:#ffffff;padding:14px;border:1px solid #000000;border-top:0;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding;}.popover2 .content p,.popover2 .content ul,.popover2 .content ol{margin-bottom:0;} +.popover-menu{position:absolute;top:0;left:0;display:none;z-index:10000;background:none;} +.popover-menu .popover-arrow{width:100%;height:14px;background:url(/blueprint/images/popover-menu-bottom.png) no-repeat bottom center;} +.popover-menu .popover-border{margin:0 0 -3px;padding:2px;background:rgba(255, 255, 255, 0.75);border:1px solid rgba(0, 0, 0, 0.5);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;overflow:hidden;-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);-moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);-webkit-background-clip:padding;} +.popover-menu .popover-inner{background:#222;padding:7px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;width:150px;} +.popover-menu a{color:#fff;font-weight:bold;padding:5px 8px;} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 4a93d754b3..93c4f5b32a 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -224,4 +224,21 @@ div.topbar-wrapper div.topbar { padding-right: 20px; -moz-border-radius: 4px; border-radius: 4px; +} + +/* Popover docs +-------------------------------------------------- */ +div.popover-well { + min-height: 160px; +} +div.popover-well div.popover { + display: block; +} +div.popover-well div.popover-wrapper { + width: 50%; + height: 160px; + float: left; +} +div.popover-well div.popover-menu-wrapper { + height: 80px; } \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index ef5c7372a8..e5bb776e46 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1062,7 +1062,7 @@
-

Example modal

+

Modals

Modals—dialogs or lightboxes—are great for contextual actions in situations where it's important that the background context be maintained.

@@ -1081,7 +1081,7 @@
- +

Tool Tips

@@ -1113,7 +1113,57 @@ Lorem ipsum dolar sit amet illo error ipsum verita
- + + +
+
+

Popovers

+
+
+
+ +
+
+
+

Popover title

+
+

Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+
+
+
+
+ +
+
+
+
+

Popover title

+
+

Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

+
+
+
+
+ +
+
+
+
+
+
+ View + Edit + Delete +
+
+
+
+
+
+
+
+ + diff --git a/lib/patterns.less b/lib/patterns.less index e966253f11..b264cb3c74 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -507,6 +507,45 @@ div.modal { } } + +// Popover Arrows +// -------------- + +#popoverArrow { + .above(@arrowWidth: 5px) { + bottom: 0; + left: 50%; + margin-left: -@arrowWidth; + border-left: @arrowWidth solid transparent; + border-right: @arrowWidth solid transparent; + border-top: @arrowWidth solid #000; + } + .left(@arrowWidth: 5px) { + top: 50%; + right: 0; + margin-top: -@arrowWidth; + border-top: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid transparent; + border-left: @arrowWidth solid #000; + } + .below(@arrowWidth: 5px) { + top: 0; + left: 50%; + margin-left: -@arrowWidth; + border-left: @arrowWidth solid transparent; + border-right: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid #000; + } + .right(@arrowWidth: 5px) { + top: 50%; + left: 0; + margin-top: -@arrowWidth; + border-top: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid transparent; + border-right: @arrowWidth solid #000; + } +} + // Twipsy // ------ @@ -518,46 +557,10 @@ div.twipsy { font-size: 11px; z-index: 100000; .opacity(80); - &.above { - .twipsy-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #000; - } - } - &.left { - .twipsy-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #000; - } - } - &.below { - .twipsy-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #000; - } - } - &.right { - .twipsy-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-right: 5px solid #000; - } - } + &.above .twipsy-arrow { #popoverArrow > .above(); } + &.left .twipsy-arrow { #popoverArrow > .left(); } + &.below .twipsy-arrow { #popoverArrow > .below(); } + &.right .twipsy-arrow { #popoverArrow > .right(); } .twipsy-inner { padding: 3px 8px; background-color: #000; @@ -572,4 +575,114 @@ div.twipsy { width: 0; height: 0; } -} \ No newline at end of file +} + + +// Popovers +// -------- + +.popover-wrapper { + position: relative; +} +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 10000; + display: none; +} +.popover-border { + background: rgba(0,0,0,.8); + padding: 5px; + overflow: hidden; + .border-radius(6px); + .box-shadow(0 3px 6px rgba(0,0,0,.25)); +} +.popover-title { + padding: 5px 15px 10px; + color: #fff; + line-height: 1; +} +.popover-inner { + background-color: #fff; + overflow: hidden; + padding: 15px; + width: 200px; + .border-radius(3px); + p, ul, ol { + margin-bottom: 0; + } +} + +.popover2 { + padding: 5px; + .inner { + .border-radius(6px); + .box-shadow(0 3px 7px rgba(0,0,0,0.3)); + width: 280px; + } + &.above .arrow { #popoverArrow > .above(); } + &.right .arrow { #popoverArrow > .right(); } + &.below .arrow { #popoverArrow > .below(); } + &.left .arrow { #popoverArrow > .left(); } + .arrow { + position: absolute; + width: 0; + height: 0; + } + .title { + #gradient > .vertical(#444, #222); + padding: 9px 15px; + color: #fff; + line-height: 1; + .border-radius(6px 6px 0 0); + } + .content { + background-color: @white; + padding: 14px; + border: 1px solid rgba(0,0,0,1); + border-top: 0; + .border-radius(0 0 6px 6px); + .background-clip(padding); + p, ul, ol { + margin-bottom: 0; + } + } +} + +// Alt popover for menus +.popover-menu { + position: absolute; + top: 0; + left: 0; + display: none; + z-index: 10000; + background: none; +} +.popover-menu .popover-arrow { + width: 100%; + height: 14px; + background: url(/blueprint/images/popover-menu-bottom.png) no-repeat bottom center; +} +.popover-menu .popover-border { + margin: 0 0 -3px; + padding: 2px; + background: rgba(255,255,255,.75); + border: 1px solid rgba(0,0,0,.5); + .border-radius(6px); + overflow: hidden; + .box-shadow(0 3px 6px rgba(0,0,0,.25)); + -webkit-background-clip: padding; +} +.popover-menu .popover-inner { + background: #222; + padding: 7px; + .border-radius(4px); + width: 150px; +} + +.popover-menu a { + color: #fff; + font-weight: bold; + padding: 5px 8px; +} -- cgit v1.2.3