info@53: // info@53: // Modals info@53: // -------------------------------------------------- info@53: info@53: // .modal-open - body class for killing the scroll info@53: // .modal - container to scroll within info@53: // .modal-dialog - positioning shell for the actual modal info@53: // .modal-content - actual modal w/ bg and corners and shit info@53: info@53: // Kill the scroll on the body info@53: .modal-open { info@53: overflow: hidden; info@53: } info@53: info@53: // Container that the modal scrolls within info@53: .modal { info@53: display: none; info@53: overflow: auto; info@53: overflow-y: scroll; info@53: position: fixed; info@53: top: 0; info@53: right: 0; info@53: bottom: 0; info@53: left: 0; info@53: z-index: @zindex-modal-background; info@53: info@53: // When fading in the modal, animate it to slide down info@53: &.fade .modal-dialog { info@53: .translate(0, -25%); info@53: .transition-transform(~"0.3s ease-out"); info@53: } info@53: &.in .modal-dialog { .translate(0, 0)} info@53: } info@53: info@53: // Shell div to position the modal with bottom padding info@53: .modal-dialog { info@53: position: relative; info@53: width: auto; info@53: margin: 10px; info@53: z-index: (@zindex-modal-background + 10); info@53: } info@53: info@53: // Actual modal info@53: .modal-content { info@53: position: relative; info@53: background-color: @modal-content-bg; info@53: border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc) info@53: border: 1px solid @modal-content-border-color; info@53: border-radius: @border-radius-large; info@53: .box-shadow(0 3px 9px rgba(0,0,0,.5)); info@53: background-clip: padding-box; info@53: // Remove focus outline from opened modal info@53: outline: none; info@53: } info@53: info@53: // Modal background info@53: .modal-backdrop { info@53: position: fixed; info@53: top: 0; info@53: right: 0; info@53: bottom: 0; info@53: left: 0; info@53: z-index: (@zindex-modal-background - 10); info@53: background-color: @modal-backdrop-bg; info@53: // Fade for backdrop info@53: &.fade { .opacity(0); } info@53: &.in { .opacity(.5); } info@53: } info@53: info@53: // Modal header info@53: // Top section of the modal w/ title and dismiss info@53: .modal-header { info@53: padding: @modal-title-padding; info@53: border-bottom: 1px solid @modal-header-border-color; info@53: min-height: (@modal-title-padding + @modal-title-line-height); info@53: } info@53: // Close icon info@53: .modal-header .close { info@53: margin-top: -2px; info@53: } info@53: info@53: // Title text within header info@53: .modal-title { info@53: margin: 0; info@53: line-height: @modal-title-line-height; info@53: } info@53: info@53: // Modal body info@53: // Where all modal content resides (sibling of .modal-header and .modal-footer) info@53: .modal-body { info@53: position: relative; info@53: padding: @modal-inner-padding; info@53: } info@53: info@53: // Footer (for actions) info@53: .modal-footer { info@53: margin-top: 15px; info@53: padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding; info@53: text-align: right; // right align buttons info@53: border-top: 1px solid @modal-footer-border-color; info@53: .clearfix(); // clear it in case folks use .pull-* classes on buttons info@53: info@53: // Properly space out buttons info@53: .btn + .btn { info@53: margin-left: 5px; info@53: margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs info@53: } info@53: // but override that for button groups info@53: .btn-group .btn + .btn { info@53: margin-left: -1px; info@53: } info@53: // and override it for block buttons as well info@53: .btn-block + .btn-block { info@53: margin-left: 0; info@53: } info@53: } info@53: info@53: // Scale up the modal info@53: @media screen and (min-width: @screen-sm-min) { info@53: info@53: .modal-dialog { info@53: width: 600px; info@53: margin: 30px auto; info@53: } info@53: .modal-content { info@53: .box-shadow(0 5px 15px rgba(0,0,0,.5)); info@53: } info@53: info@53: }