1// 2// Modals 3// -------------------------------------------------- 4 5// .modal-open - body class for killing the scroll 6// .modal - container to scroll within 7// .modal-dialog - positioning shell for the actual modal 8// .modal-content - actual modal w/ bg and corners and shit 9 10// Kill the scroll on the body 11.modal-open { 12 overflow: hidden; 13} 14 15// Container that the modal scrolls within 16.modal { 17 display: none; 18 overflow: auto; 19 overflow-y: scroll; 20 position: fixed; 21 top: 0; 22 right: 0; 23 bottom: 0; 24 left: 0; 25 z-index: $zindex-modal; 26 -webkit-overflow-scrolling: touch; 27 28 // Prevent Chrome on Windows from adding a focus outline. For details, see 29 // https://github.com/twbs/bootstrap/pull/10951. 30 outline: 0; 31 32 // When fading in the modal, animate it to slide down 33 &.fade .modal-dialog { 34 @include translate(0, -25%); 35 @include transition-transform(0.3s ease-out); 36 } 37 &.in .modal-dialog { @include translate(0, 0)} 38} 39 40// Shell div to position the modal with bottom padding 41.modal-dialog { 42 position: relative; 43 width: auto; 44 margin: 10px; 45} 46 47// Actual modal 48.modal-content { 49 position: relative; 50 background-color: $modal-content-bg; 51 border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc) 52 border: 1px solid $modal-content-border-color; 53 border-radius: $border-radius-large; 54 @include box-shadow(0 3px 9px rgba(0,0,0,.5)); 55 background-clip: padding-box; 56 // Remove focus outline from opened modal 57 outline: none; 58} 59 60// Modal background 61.modal-backdrop { 62 position: fixed; 63 top: 0; 64 right: 0; 65 bottom: 0; 66 left: 0; 67 z-index: $zindex-modal-background; 68 background-color: $modal-backdrop-bg; 69 // Fade for backdrop 70 &.fade { @include opacity(0); } 71 &.in { @include opacity($modal-backdrop-opacity); } 72} 73 74// Modal header 75// Top section of the modal w/ title and dismiss 76.modal-header { 77 padding: $modal-title-padding; 78 border-bottom: 1px solid $modal-header-border-color; 79 min-height: ($modal-title-padding + $modal-title-line-height); 80} 81// Close icon 82.modal-header .close { 83 margin-top: -2px; 84} 85 86// Title text within header 87.modal-title { 88 margin: 0; 89 line-height: $modal-title-line-height; 90} 91 92// Modal body 93// Where all modal content resides (sibling of .modal-header and .modal-footer) 94.modal-body { 95 position: relative; 96 padding: $modal-inner-padding; 97} 98 99// Footer (for actions) 100.modal-footer { 101 margin-top: 15px; 102 padding: ($modal-inner-padding - 1) $modal-inner-padding $modal-inner-padding; 103 text-align: right; // right align buttons 104 border-top: 1px solid $modal-footer-border-color; 105 @include clearfix(); // clear it in case folks use .pull-* classes on buttons 106 107 // Properly space out buttons 108 .btn + .btn { 109 margin-left: 5px; 110 margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs 111 } 112 // but override that for button groups 113 .btn-group .btn + .btn { 114 margin-left: -1px; 115 } 116 // and override it for block buttons as well 117 .btn-block + .btn-block { 118 margin-left: 0; 119 } 120} 121 122// Scale up the modal 123@media (min-width: $screen-sm-min) { 124 // Automatically set modal's width for larger viewports 125 .modal-dialog { 126 width: $modal-md; 127 margin: 30px auto; 128 } 129 .modal-content { 130 @include box-shadow(0 5px 15px rgba(0,0,0,.5)); 131 } 132 133 // Modal sizes 134 .modal-sm { width: $modal-sm; } 135} 136 137@media (min-width: $screen-md-min) { 138 .modal-lg { width: $modal-lg; } 139} 140