Skip to content

Commit

Permalink
getting popovers in
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdo
mdo committed Jul 2, 2011
1 parent 5992b4e commit 3117fc9
Show file tree
Hide file tree
Showing 5 changed files with 411 additions and 52 deletions.
169 changes: 165 additions & 4 deletions bootstrap-1.0.0.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1617,31 +1617,31 @@ 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%;
right: 0;
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;
left: 50%;
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%;
left: 0;
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;
Expand All @@ -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;
}
26 changes: 22 additions & 4 deletions bootstrap-1.0.0.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

17 changes: 17 additions & 0 deletions docs/assets/css/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
56 changes: 53 additions & 3 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1062,7 +1062,7 @@ <h1>Popovers <small>Components for displaying content in modals, tooltips, and p
</div>
<div class="row">
<div class="span4 columns">
<h2>Example modal</h2>
<h2>Modals</h2>
<p>Modals&mdash;dialogs or lightboxes&mdash;are great for contextual actions in situations where it's important that the background context be maintained.</p>
</div>
<div class="span12 columns">
Expand All @@ -1081,7 +1081,7 @@ <h3>Modal Heading</h3>
</div>
</div>
</div>
</div>
</div> <!-- /row -->
<div class="row">
<div class="span4 columns">
<h2>Tool Tips</h2>
Expand Down Expand Up @@ -1113,7 +1113,57 @@ <h2>Tool Tips</h2>
</div>
</div>
</div>
</div>
</div> <!-- /row -->

<div class="row">
<div class="span4 columns">
<h2>Popovers</h2>
</div>
<div class="span12 columns">
<div class="well popover-well">

<div class="popover-wrapper">
<div class="popover above">
<div class="popover-border">
<h3 class="popover-title">Popover title</h3>
<div class="popover-inner">
<p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
</div>
</div>
</div>

<div class="popover-wrapper">
<div class="popover bottom popover2">
<div class="arrow"></div>
<div class="inner">
<h3 class="title">Popover title</h3>
<div class="content">
<p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
</div>
</div>
</div>

</div>
<div class="well popover-well popover-menu-well">
<div class="popover-wrapper">
<div class="popover popover-menu">
<div class="popover-border">
<div class="popover-inner">
<a href="">View</a>
<a href="">Edit</a>
<a href="">Delete</a>
</div>
</div>
<div class="popover-arrow"></div>
</div>
</div>
</div>
</div>
</div> <!-- /row -->


</section>


Expand Down
Loading

0 comments on commit 3117fc9

Please sign in to comment.