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