| // |
| // 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 |
| |
| // 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; |
| |
| // 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)} |
| } |
| |
| // Shell div to position the modal with bottom padding |
| .modal-dialog { |
| position: relative; |
| margin-left: auto; |
| margin-right: auto; |
| width: auto; |
| padding: 10px; |
| z-index: (@zindex-modal-background + 10); |
| } |
| |
| // 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: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| z-index: (@zindex-modal-background - 10); |
| background-color: @modal-backdrop-bg; |
| // Fade for backdrop |
| &.fade { .opacity(0); } |
| &.in { .opacity(.5); } |
| } |
| |
| // Modal header |
| // Top section of the modal w/ title and dismiss |
| .modal-header { |
| 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; |
| } |
| |
| // Title text within header |
| .modal-title { |
| margin: 0; |
| line-height: @modal-title-line-height; |
| } |
| |
| // 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 { |
| margin-top: 15px; |
| padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding; |
| text-align: right; // right align buttons |
| border-top: 1px solid @modal-footer-border-color; |
| .clearfix(); // clear it in case folks use .pull-* classes on buttons |
| |
| // Properly space out buttons |
| .btn + .btn { |
| margin-left: 5px; |
| margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs |
| } |
| // but override that for button groups |
| .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 screen and (min-width: @screen-sm-min) { |
| |
| .modal-dialog { |
| width: 600px; |
| padding-top: 30px; |
| padding-bottom: 30px; |
| } |
| .modal-content { |
| .box-shadow(0 5px 15px rgba(0,0,0,.5)); |
| } |
| |
| } |