Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+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 @@
Modals—dialogs or lightboxes—are great for contextual actions in situations where it's important that the background context be maintained.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+