aboutsummaryrefslogtreecommitdiff
path: root/less
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2013-02-06 02:07:40 -0800
committerMark Otto <[email protected]>2013-02-06 02:07:40 -0800
commit8ca70bd83a92c0fdc1759b1d55b699e4162cf865 (patch)
tree80661279c49d2f640b4ba1fc6c3a115add4b34bd /less
parent0b4668368bb3ffd7800e6cb7c49366d78b156167 (diff)
downloadbootstrap-8ca70bd83a92c0fdc1759b1d55b699e4162cf865.tar.xz
bootstrap-8ca70bd83a92c0fdc1759b1d55b699e4162cf865.zip
Overhaul modal to make it responsive and not super lame
Diffstat (limited to 'less')
-rw-r--r--less/modals.less117
-rw-r--r--less/tests/new-modal.html135
2 files changed, 215 insertions, 37 deletions
diff --git a/less/modals.less b/less/modals.less
index 7a233091d..326d7111b 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -2,33 +2,44 @@
// Modals
// --------------------------------------------------
-// Background
-.modal-backdrop {
+// .modal-open - body class for killing the scroll
+// .modal - container to scroll within
+// .modal-dialog - positioning shell for the actual modal
+// .modal-content - actual modal w/ bg and corners and shit
+
+// Kill the scroll on the body
+.modal-open {
+ overflow: hidden;
+}
+
+// Container that the modal scrolls within
+.modal {
+ display: none;
+ overflow: auto;
+ overflow-y: scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
- background-color: #000;
- // Fade for backdrop
- &.fade { opacity: 0; }
+ -webkit-overflow-scrolling: touch;
}
-.modal-backdrop,
-.modal-backdrop.fade.in {
- .opacity(80);
+// Shell div to position the modal with bottom padding
+.modal-dialog {
+ position: relative;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: auto;
+ padding: 10px;
+ z-index: @zindex-modal-background + 10;
}
-// Base modal
-.modal {
- position: fixed;
- top: 10%;
- left: 50%;
- z-index: @zindex-modal;
- display: none;
- width: 560px;
- margin-left: -280px;
+// Actual modal
+.modal-content {
+ position: relative;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
@@ -43,40 +54,58 @@
top: -25%;
}
&.fade.in { top: 10%; }
+
}
+
+// Modal background
+.modal-backdrop {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: @zindex-modal-background - 10;
+ background-color: #fff;
+ // Fade for backdrop
+ &.fade { opacity: 0; }
+}
+.modal-backdrop,
+.modal-backdrop.fade.in {
+ .opacity(75);
+}
+
+// Modal header
+// -------------------------
+// Top section of the modal w/ title and dismiss
.modal-header {
padding: 9px 15px;
- border-bottom: 1px solid #eee;
- // Close icon
- .close { margin-top: 2px; }
- // Heading
- h3 {
- margin: 0;
- line-height: 30px;
- }
+ border-bottom: 1px solid #e5e5e5;
+}
+// Close icon
+.modal-header .close {
+ margin-top: 2px;
+}
+
+// Title text within header
+.modal-title {
+ margin: 0;
+ line-height: 30px; // effectively set a min-height for the header
}
-// Body (where all modal content resides)
+// Modal body
+// -------------------------
+// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
position: relative;
- overflow-y: auto;
- max-height: 400px;
padding: 15px;
}
-// Remove bottom margin if need be
-.modal-form {
- margin-bottom: 0;
-}
// Footer (for actions)
.modal-footer {
+ margin-top: 15px;
padding: 14px 15px 15px;
- margin-bottom: 0;
text-align: right; // right align buttons
- background-color: #f5f5f5;
- border-top: 1px solid #ddd;
- border-radius: 0 0 6px 6px;
- .box-shadow(inset 0 1px 0 #fff);
+ border-top: 1px solid #e5e5e5;
.clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
@@ -93,3 +122,17 @@
margin-left: 0;
}
}
+
+
+@media screen and (min-width: 768px) {
+
+ .modal-dialog {
+ left: 50%;
+ right: auto;
+ width: 560px;
+ margin-left: -280px;
+ padding-top: 30px;
+ padding-bottom: 30px;
+ }
+
+}
diff --git a/less/tests/new-modal.html b/less/tests/new-modal.html
new file mode 100644
index 000000000..1ede8bb6a
--- /dev/null
+++ b/less/tests/new-modal.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>New modal demo ยท Twitter Bootstrap</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Le styles -->
+ <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
+
+ <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <!-- Le fav and touch icons -->
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
+ <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
+ <link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
+ </head>
+
+ <body class="modal-open">
+
+
+ <!-- Navbar
+ ================================================== -->
+ <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar-inner">
+ <div class="container">
+ <a class="brand" href="../../docs/index.html">Bootstrap</a>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+
+
+
+ <div class="modal" style="display: block;">
+
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+ <h3 class="modal-title">Modal title</h3>
+ </div>
+ <div class="modal-body">
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ <p>Body</p>
+ </div>
+ <div class="modal-footer">
+ <a class="btn btn-primary" href="#">Save changes</a>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+
+ </div>
+ <div class="modal-backdrop"></div>
+
+
+ </div><!-- /container -->
+
+
+
+ <!-- Le javascript
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+ <script src="../../docs/assets/js/jquery.js"></script>
+ <script src="../../docs/assets/js/google-code-prettify/prettify.js"></script>
+ <script src="../../docs/assets/js/bootstrap-transition.js"></script>
+ <script src="../../docs/assets/js/bootstrap-alert.js"></script>
+ <script src="../../docs/assets/js/bootstrap-modal.js"></script>
+ <script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
+ <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
+ <script src="../../docs/assets/js/bootstrap-tab.js"></script>
+ <script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
+ <script src="../../docs/assets/js/bootstrap-popover.js"></script>
+ <script src="../../docs/assets/js/bootstrap-button.js"></script>
+ <script src="../../docs/assets/js/bootstrap-collapse.js"></script>
+ <script src="../../docs/assets/js/bootstrap-carousel.js"></script>
+ <script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
+ <script src="../../docs/assets/js/application.js"></script>
+
+
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 19:30:37 +0000