diff options
author | Arun Persaud <arun@nubati.net> | 2014-03-08 22:02:34 -0800 |
---|---|---|
committer | Arun Persaud <arun@nubati.net> | 2014-03-08 22:26:07 -0800 |
commit | 72bdb543759b5ffbdf5c2cc71294ad4f1f2996b2 (patch) | |
tree | af2457b688e17c1709b5d2d45826a8379393abf1 /css/bootstrap/modals.less | |
parent | 742ba18eaf36386d2d0e0936975b3f2545afc59e (diff) | |
download | e-DoKo-72bdb543759b5ffbdf5c2cc71294ad4f1f2996b2.tar.gz e-DoKo-72bdb543759b5ffbdf5c2cc71294ad4f1f2996b2.tar.bz2 e-DoKo-72bdb543759b5ffbdf5c2cc71294ad4f1f2996b2.zip |
updated css/js libraries
* bootstrap 3.1.1
* jquery 2.1.0
* less 1.7.0
mostly bootstrap had to be adjusted, e.g. different names like hero-unit->jumbotron, etc.
Diffstat (limited to 'css/bootstrap/modals.less')
-rw-r--r-- | css/bootstrap/modals.less | 161 |
1 files changed, 101 insertions, 60 deletions
diff --git a/css/bootstrap/modals.less b/css/bootstrap/modals.less index 81cacb7..21cdee0 100644 --- a/css/bootstrap/modals.less +++ b/css/bootstrap/modals.less @@ -2,89 +2,107 @@ // Modals // -------------------------------------------------- +// .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 -// Recalculate z-index where appropriate, -// but only apply to elements within modal -.modal-open .modal { - .dropdown-menu { z-index: @zindexDropdown + @zindexModal; } - .dropdown.open { *z-index: @zindexDropdown + @zindexModal; } - .popover { z-index: @zindexPopover + @zindexModal; } - .tooltip { z-index: @zindexTooltip + @zindexModal; } +// Kill the scroll on the body +.modal-open { + overflow: hidden; } -// Background -.modal-backdrop { +// 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: @zindexModalBackdrop; - background-color: @black; - // Fade for backdrop - &.fade { opacity: 0; } + z-index: @zindex-modal; + -webkit-overflow-scrolling: touch; + + // Prevent Chrome on Windows from adding a focus outline. For details, see + // https://github.com/twbs/bootstrap/pull/10951. + outline: 0; + + // When fading in the modal, animate it to slide down + &.fade .modal-dialog { + .translate(0, -25%); + .transition-transform(~"0.3s ease-out"); + } + &.in .modal-dialog { .translate(0, 0)} } -.modal-backdrop, -.modal-backdrop.fade.in { - .opacity(80); +// Shell div to position the modal with bottom padding +.modal-dialog { + position: relative; + width: auto; + margin: 10px; } -// Base modal -.modal { +// Actual modal +.modal-content { + position: relative; + background-color: @modal-content-bg; + border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc) + border: 1px solid @modal-content-border-color; + border-radius: @border-radius-large; + .box-shadow(0 3px 9px rgba(0,0,0,.5)); + background-clip: padding-box; + // Remove focus outline from opened modal + outline: none; +} + +// Modal background +.modal-backdrop { position: fixed; - top: 50%; - left: 50%; - z-index: @zindexModal; - overflow: auto; - width: 560px; - margin: -250px 0 0 -280px; - background-color: @white; - border: 1px solid #999; - border: 1px solid rgba(0,0,0,.3); - *border: 1px solid #999; /* IE6-7 */ - .border-radius(6px); - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); - .background-clip(padding-box); - &.fade { - .transition(e('opacity .3s linear, top .3s ease-out')); - top: -25%; - } - &.fade.in { top: 50%; } + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: @zindex-modal-background; + background-color: @modal-backdrop-bg; + // Fade for backdrop + &.fade { .opacity(0); } + &.in { .opacity(@modal-backdrop-opacity); } } + +// 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; - } + padding: @modal-title-padding; + border-bottom: 1px solid @modal-header-border-color; + min-height: (@modal-title-padding + @modal-title-line-height); +} +// Close icon +.modal-header .close { + margin-top: -2px; } -// Body (where all modal content resides) -.modal-body { - overflow-y: auto; - max-height: 400px; - padding: 15px; +// Title text within header +.modal-title { + margin: 0; + line-height: @modal-title-line-height; } -// Remove bottom margin if need be -.modal-form { - margin-bottom: 0; + +// Modal body +// Where all modal content resides (sibling of .modal-header and .modal-footer) +.modal-body { + position: relative; + padding: @modal-inner-padding; } // Footer (for actions) .modal-footer { - padding: 14px 15px 15px; - margin-bottom: 0; + margin-top: 15px; + padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding; 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 @white); - .clearfix(); // clear it in case folks use .pull-* classes on buttons + border-top: 1px solid @modal-footer-border-color; + &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons // Properly space out buttons .btn + .btn { @@ -95,4 +113,27 @@ .btn-group .btn + .btn { margin-left: -1px; } + // and override it for block buttons as well + .btn-block + .btn-block { + margin-left: 0; + } +} + +// Scale up the modal +@media (min-width: @screen-sm-min) { + // Automatically set modal's width for larger viewports + .modal-dialog { + width: @modal-md; + margin: 30px auto; + } + .modal-content { + .box-shadow(0 5px 15px rgba(0,0,0,.5)); + } + + // Modal sizes + .modal-sm { width: @modal-sm; } +} + +@media (min-width: @screen-md-min) { + .modal-lg { width: @modal-lg; } } |