[fa375fe] | 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 | position: fixed;
|
---|
| 18 | top: 0;
|
---|
| 19 | right: 0;
|
---|
| 20 | bottom: 0;
|
---|
| 21 | left: 0;
|
---|
| 22 | z-index: @zindex-modal;
|
---|
| 23 | display: none;
|
---|
| 24 | overflow: hidden;
|
---|
| 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 | .translate(0, -25%);
|
---|
| 34 | .transition-transform(~"0.3s ease-out");
|
---|
| 35 | }
|
---|
| 36 | &.in .modal-dialog { .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 | background-clip: padding-box;
|
---|
| 55 | border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
|
---|
| 56 | border: 1px solid @modal-content-border-color;
|
---|
| 57 | border-radius: @border-radius-large;
|
---|
| 58 | .box-shadow(0 3px 9px rgba(0, 0, 0, .5));
|
---|
| 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 { .opacity(0); }
|
---|
| 74 | &.in { .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 | &:extend(.clearfix all);
|
---|
| 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 | &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
|
---|
| 108 |
|
---|
| 109 | // Properly space out buttons
|
---|
| 110 | .btn + .btn {
|
---|
| 111 | margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
|
---|
| 112 | margin-left: 5px;
|
---|
| 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 | .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 | }
|
---|