From 7f99892b864295eef23bf24bd8c6c9b231d0c684 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 28 Jul 2011 17:50:38 -0700 Subject: change popover stufff --- Makefile | 4 +- bootstrap-1.0.0.css | 142 ++++++++++------------------------------------- bootstrap-1.0.0.min.css | 26 +++------ docs/.DS_Store | Bin 0 -> 6148 bytes docs/assets/.DS_Store | Bin 0 -> 6148 bytes docs/assets/css/docs.css | 10 ++++ docs/assets/img/bird.png | Bin 0 -> 4434 bytes docs/index.html | 39 +++---------- lib/patterns.less | 100 ++++++--------------------------- 9 files changed, 75 insertions(+), 246 deletions(-) create mode 100644 docs/.DS_Store create mode 100644 docs/assets/.DS_Store create mode 100644 docs/assets/img/bird.png diff --git a/Makefile b/Makefile index 74ab90d023..f275d7ce96 100644 --- a/Makefile +++ b/Makefile @@ -18,11 +18,11 @@ build: fi watch: - @@if test ! -z ${LESS_COMPESSOR}; then \ + @@if test ! -z ${WATCHR}; then \ echo "Watching less files..."; \ watchr -e "watch('lib/.*\.less') { system 'make' }"; \ else \ - echo "You must have the WATCHR installed in order to build Bootstrap."; \ + echo "You must have the watchr installed in order to watch Bootstrap less files."; \ echo "You can install it by running: gem install watchr"; \ fi diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css index 2f592d3579..126e8a1844 100644 --- a/bootstrap-1.0.0.css +++ b/bootstrap-1.0.0.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: Sat Jul 2 15:34:02 PDT 2011 + * Date: Thu Jul 28 17:49:29 PDT 2011 */ /* * Reset.less @@ -1703,57 +1703,15 @@ div.twipsy .twipsy-arrow { width: 0; height: 0; } -.popover-wrapper { - position: relative; -} .popover { position: absolute; top: 0; left: 0; z-index: 1000; - 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; + display: none; } -.popover2.above .arrow { +.popover.above .arrow { bottom: 0; left: 50%; margin-left: -5px; @@ -1761,7 +1719,7 @@ div.twipsy .twipsy-arrow { border-right: 5px solid transparent; border-top: 5px solid #000000; } -.popover2.right .arrow { +.popover.right .arrow { top: 50%; left: 0; margin-top: -5px; @@ -1769,7 +1727,7 @@ div.twipsy .twipsy-arrow { border-bottom: 5px solid transparent; border-right: 5px solid #000000; } -.popover2.below .arrow { +.popover.below .arrow { top: 0; left: 50%; margin-left: -5px; @@ -1777,7 +1735,7 @@ div.twipsy .twipsy-arrow { border-right: 5px solid transparent; border-bottom: 5px solid #000000; } -.popover2.left .arrow { +.popover.left .arrow { top: 50%; right: 0; margin-top: -5px; @@ -1785,82 +1743,42 @@ div.twipsy .twipsy-arrow { border-bottom: 5px solid transparent; border-left: 5px solid #000000; } -.popover2 .arrow { +.popover .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); +.popover .inner { + background: rgba(0, 0, 0, 0.8); + 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: #f5f5f5; 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; + -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; } -.popover2 .content { +.popover .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-border-radius: 0 0 3px 3px; + -moz-border-radius: 0 0 3px 3px; + border-radius: 0 0 3px 3px; -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding; } -.popover2 .content p, .popover2 .content ul, .popover2 .content ol { +.popover .content p, .popover .content ul, .popover .content ol { margin-bottom: 0; } -.popover-menu { - position: absolute; - top: 0; - left: 0; - display: none; - z-index: 1000; - 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 1bedb844ba..bfe372ca6b 100644 --- a/bootstrap-1.0.0.min.css +++ b/bootstrap-1.0.0.min.css @@ -205,21 +205,11 @@ div.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px s 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:1000;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:1000;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;} +.popover{position:absolute;top:0;left:0;z-index:1000;padding:5px;display:none;}.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.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.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{background:rgba(0, 0, 0, 0.8);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:#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;-moz-background-clip:padding;background-clip:padding;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;} diff --git a/docs/.DS_Store b/docs/.DS_Store new file mode 100644 index 0000000000..f199fc7b18 Binary files /dev/null and b/docs/.DS_Store differ diff --git a/docs/assets/.DS_Store b/docs/assets/.DS_Store new file mode 100644 index 0000000000..57b2f456a7 Binary files /dev/null and b/docs/assets/.DS_Store differ diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 93c4f5b32a..13868fdd91 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -231,14 +231,24 @@ div.topbar-wrapper div.topbar { 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; + margin-left: 55px; + position:relative; } + div.popover-well div.popover-menu-wrapper { height: 80px; +} + +img.large-bird { + margin: 5px 0 0 310px; + opacity:.1; } \ No newline at end of file diff --git a/docs/assets/img/bird.png b/docs/assets/img/bird.png new file mode 100644 index 0000000000..f0e6fcb51b Binary files /dev/null and b/docs/assets/img/bird.png differ diff --git a/docs/index.html b/docs/index.html index 41be6b5ece..358642e2be 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1114,55 +1114,30 @@ Lorem ipsum dolar sit amet illo error ipsum verita - +

Popovers

+

Use popovers to provide subtextual information to a page without effecting layout.

- -
-
-
-

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

+

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 b79438dea3..8e21655586 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -583,108 +583,44 @@ div.twipsy { // Popovers // -------- -.popover-wrapper { - position: relative; -} .popover { position: absolute; top: 0; left: 0; z-index: 1000; - 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(); } + display: none; + &.above .arrow { #popoverArrow > .above(); } + &.right .arrow { #popoverArrow > .right(); } + &.below .arrow { #popoverArrow > .below(); } + &.left .arrow { #popoverArrow > .left(); } .arrow { position: absolute; width: 0; height: 0; } + .inner { + background: rgba(0,0,0,.8); + padding: 3px; + overflow: hidden; + width: 280px; + .border-radius(6px); + .box-shadow(0 3px 7px rgba(0,0,0,0.3)); + } .title { - #gradient > .vertical(#444, #222); + background: #f5f5f5; padding: 9px 15px; - color: #fff; line-height: 1; - .border-radius(6px 6px 0 0); + .border-radius(3px 3px 0 0); + border-bottom:1px solid #eee; } .content { background-color: @white; padding: 14px; - border: 1px solid rgba(0,0,0,1); - border-top: 0; - .border-radius(0 0 6px 6px); + .border-radius(0 0 3px 3px); .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: 1000; - 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; -} +} \ No newline at end of file -- cgit v1.2.3