Commit 35d339d2 authored by Thomas Park's avatar Thomas Park

styles popovers, fixes #126

parent d25d37af
......@@ -7326,6 +7326,10 @@ legend {
background-color: #13a0aa;
}
.popover {
color: #444444;
}
.clearfix:before,
.clearfix:after {
display: table;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -133,3 +133,7 @@ legend {
.list-group-item {
background-color: lighten(@body-bg, 5%);
}
.popover {
color: @gray-dark;
}
......@@ -6023,7 +6023,7 @@ body.modal-open,
.modal-content {
position: relative;
background-color: #131313;
background-color: #202020;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
......@@ -6281,8 +6281,8 @@ body.modal-open,
padding: 1px;
text-align: left;
white-space: normal;
background-color: #ffffff;
border: 1px solid #cccccc;
background-color: #202020;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
......@@ -6312,8 +6312,8 @@ body.modal-open,
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
background-color: #181818;
border-bottom: 1px solid #0b0b0b;
border-radius: 5px 5px 0 0;
}
......@@ -6352,7 +6352,7 @@ body.modal-open,
.popover.top .arrow:after {
bottom: 1px;
margin-left: -10px;
border-top-color: #ffffff;
border-top-color: #202020;
border-bottom-width: 0;
content: " ";
}
......@@ -6369,7 +6369,7 @@ body.modal-open,
.popover.right .arrow:after {
bottom: -10px;
left: 1px;
border-right-color: #ffffff;
border-right-color: #202020;
border-left-width: 0;
content: " ";
}
......@@ -6386,7 +6386,7 @@ body.modal-open,
.popover.bottom .arrow:after {
top: 1px;
margin-left: -10px;
border-bottom-color: #ffffff;
border-bottom-color: #202020;
border-top-width: 0;
content: " ";
}
......@@ -6403,7 +6403,7 @@ body.modal-open,
.popover.left .arrow:after {
right: 1px;
bottom: -10px;
border-left-color: #ffffff;
border-left-color: #202020;
border-right-width: 0;
content: " ";
}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -391,15 +391,15 @@
// Popovers
// -------------------------
@popover-bg: #fff;
@popover-bg: lighten(@body-bg, 10%);
@popover-max-width: 276px;
@popover-border-color: rgba(0,0,0,.2);
@popover-fallback-border-color: #ccc;
@popover-fallback-border-color: #999;
@popover-title-bg: darken(@popover-bg, 3%);
@popover-arrow-width: 10px;
@popover-arrow-color: #fff;
@popover-arrow-color: @popover-bg;
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@popover-arrow-outer-color: rgba(0,0,0,.25);
......@@ -427,7 +427,7 @@
@modal-title-padding: 15px;
@modal-title-line-height: @line-height-base;
@modal-content-bg: lighten(@body-bg, 5%);
@modal-content-bg: lighten(@body-bg, 10%);
@modal-content-border-color: rgba(0,0,0,.2);
@modal-content-fallback-border-color: #999;
......
......@@ -6279,8 +6279,8 @@ body.modal-open,
padding: 1px;
text-align: left;
white-space: normal;
background-color: #ffffff;
border: 1px solid #cccccc;
background-color: #2e3338;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
......@@ -6310,8 +6310,8 @@ body.modal-open,
font-size: 14px;
font-weight: normal;
line-height: 18px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
background-color: #2e3338;
border-bottom: 1px solid #22262a;
border-radius: 5px 5px 0 0;
}
......@@ -6350,7 +6350,7 @@ body.modal-open,
.popover.top .arrow:after {
bottom: 1px;
margin-left: -10px;
border-top-color: #ffffff;
border-top-color: #2e3338;
border-bottom-width: 0;
content: " ";
}
......@@ -6367,7 +6367,7 @@ body.modal-open,
.popover.right .arrow:after {
bottom: -10px;
left: 1px;
border-right-color: #ffffff;
border-right-color: #2e3338;
border-left-width: 0;
content: " ";
}
......@@ -6384,7 +6384,7 @@ body.modal-open,
.popover.bottom .arrow:after {
top: 1px;
margin-left: -10px;
border-bottom-color: #ffffff;
border-bottom-color: #2e3338;
border-top-width: 0;
content: " ";
}
......@@ -6401,7 +6401,7 @@ body.modal-open,
.popover.left .arrow:after {
right: 1px;
bottom: -10px;
border-left-color: #ffffff;
border-left-color: #2e3338;
border-right-width: 0;
content: " ";
}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -391,15 +391,15 @@
// Popovers
// -------------------------
@popover-bg: #fff;
@popover-bg: lighten(@body-bg, 3%);
@popover-max-width: 276px;
@popover-border-color: rgba(0,0,0,.2);
@popover-fallback-border-color: #ccc;
@popover-fallback-border-color: #999;
@popover-title-bg: darken(@popover-bg, 3%);
@popover-title-bg: @popover-bg;
@popover-arrow-width: 10px;
@popover-arrow-color: #fff;
@popover-arrow-color: @popover-bg;
@popover-arrow-outer-width: (@popover-arrow-width + 1);
@popover-arrow-outer-color: rgba(0,0,0,.25);
......
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootswatch: Default Bootstrap</title>
<title>Bootswatch: Components</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="../default/bootstrap.css" media="screen">
<link rel="stylesheet" href="../amelia/bootstrap.css" media="screen">
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../assets/css/bootswatch.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
......@@ -2640,55 +2640,69 @@
<!-- Modal
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="modals">Modals</h1>
</div>
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="modals">Modals</h1>
</div>
<h3>Live demo</h3>
<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
<!-- sample modal content -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<h3>Live demo</h3>
<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
<!-- sample modal content -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4>
<p>This <a href="#" role="button" class="btn btn-default popover-test" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p>
<h4>Popover in a modal</h4>
<p>This <a href="#" role="button" class="btn btn-default popover-test" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p>
<h4>Tooltips in a modal</h4>
<p><a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>
<h4>Tooltips in a modal</h4>
<p><a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>
<hr>
<hr>
<h4>Overflowing text to show scroll behavior</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<h4>Overflowing text to show scroll behavior</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="bs-example" style="padding-bottom: 24px;">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
</div><!-- /example -->
<div class="bs-example" style="padding-bottom: 24px;">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
</div><!-- /example -->
</div>
</div>
<!-- Popover
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="popovers">Popovers</h1>
</div>
<div class="bs-example" style="padding-bottom: 24px;">
<a class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>
</div>
</div>
<footer>
......@@ -2713,5 +2727,10 @@
<script src="../bower_components/jquery/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../assets/js/bootswatch.js"></script>
<script>
$('[data-toggle=popover]').popover();
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment