Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 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 | } |