From 8ca70bd83a92c0fdc1759b1d55b699e4162cf865 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 6 Feb 2013 02:07:40 -0800 Subject: Overhaul modal to make it responsive and not super lame --- docs/assets/css/bootstrap.css | 90 +++++++++++++++++++++++++++---------------- 1 file changed, 56 insertions(+), 34 deletions(-) (limited to 'docs/assets/css/bootstrap.css') diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 83b3c29c2..d823e8d2a 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3720,34 +3720,35 @@ button.close { background-color: #fff; } -.modal-backdrop { +.modal-open { + overflow: hidden; +} + +.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; - background-color: #000; -} - -.modal-backdrop.fade { - opacity: 0; + display: none; + overflow: auto; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; } -.modal-backdrop, -.modal-backdrop.fade.in { - opacity: 0.8; - filter: alpha(opacity=80); +.modal-dialog { + position: relative; + top: 0; + right: 0; + left: 0; + z-index: 1050; + width: auto; + padding: 10px; } -.modal { - position: fixed; - top: 10%; - left: 50%; - z-index: 1050; - display: none; - width: 560px; - margin-left: -280px; +.modal-content { + position: relative; background-color: #fff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); @@ -3760,7 +3761,7 @@ button.close { background-clip: padding-box; } -.modal.fade { +.modal-content.fade { top: -25%; -webkit-transition: opacity 0.3s linear, top 0.3s ease-out; -moz-transition: opacity 0.3s linear, top 0.3s ease-out; @@ -3768,44 +3769,54 @@ button.close { transition: opacity 0.3s linear, top 0.3s ease-out; } -.modal.fade.in { +.modal-content.fade.in { top: 10%; } +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1030; + background-color: #fff; +} + +.modal-backdrop.fade { + opacity: 0; +} + +.modal-backdrop, +.modal-backdrop.fade.in { + opacity: 0.75; + filter: alpha(opacity=75); +} + .modal-header { padding: 9px 15px; - border-bottom: 1px solid #eee; + border-bottom: 1px solid #e5e5e5; } .modal-header .close { margin-top: 2px; } -.modal-header h3 { +.modal-title { margin: 0; line-height: 30px; } .modal-body { position: relative; - max-height: 400px; padding: 15px; - overflow-y: auto; -} - -.modal-form { - margin-bottom: 0; } .modal-footer { padding: 14px 15px 15px; - margin-bottom: 0; + margin-top: 15px; text-align: right; - background-color: #f5f5f5; - border-top: 1px solid #ddd; - border-radius: 0 0 6px 6px; - -webkit-box-shadow: inset 0 1px 0 #ffffff; - box-shadow: inset 0 1px 0 #ffffff; + border-top: 1px solid #e5e5e5; } .modal-footer:before, @@ -3831,6 +3842,17 @@ button.close { margin-left: 0; } +@media screen and (min-width: 768px) { + .modal-dialog { + right: auto; + left: 50%; + width: 560px; + padding-top: 30px; + padding-bottom: 30px; + margin-left: -280px; + } +} + .tooltip { position: absolute; z-index: 1030; -- cgit v1.2.3