diff options
author | Petr Vobornik <pvoborni@redhat.com> | 2014-01-27 18:15:12 +0100 |
---|---|---|
committer | Petr Vobornik <pvoborni@redhat.com> | 2014-02-11 18:02:16 +0100 |
commit | 62cb2b3439b300840b0edfcd826d6bcdeef11c55 (patch) | |
tree | 398cd64ee3d78fcbd9876ca73b3443be9726ccce /less/bootstrap/modals.less | |
parent | 630b85e06018fb3d9f8c34685a406b3770d58b54 (diff) | |
download | ipsilon-62cb2b3439b300840b0edfcd826d6bcdeef11c55.tar.gz ipsilon-62cb2b3439b300840b0edfcd826d6bcdeef11c55.tar.xz ipsilon-62cb2b3439b300840b0edfcd826d6bcdeef11c55.zip |
Add Boostrap files
Signed-off-by: Petr Vobornik <pvoborni@redhat.com>
Diffstat (limited to 'less/bootstrap/modals.less')
-rw-r--r-- | less/bootstrap/modals.less | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/less/bootstrap/modals.less b/less/bootstrap/modals.less new file mode 100644 index 0000000..e7f3d72 --- /dev/null +++ b/less/bootstrap/modals.less @@ -0,0 +1,138 @@ +// +// Modals +// -------------------------------------------------- + +// .modal-open - body class for killing the scroll +// .modal - container to scroll within +// .modal-dialog - positioning shell for the actual modal +// .modal-content - actual modal w/ bg and corners and shit + +// Kill the scroll on the body +.modal-open { + overflow: hidden; +} + +// Container that the modal scrolls within +.modal { + display: none; + overflow: auto; + overflow-y: scroll; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: @zindex-modal; + -webkit-overflow-scrolling: touch; + + // Prevent Chrome on Windows from adding a focus outline. For details, see + // https://github.com/twbs/bootstrap/pull/10951. + outline: 0; + + // When fading in the modal, animate it to slide down + &.fade .modal-dialog { + .translate(0, -25%); + .transition-transform(~"0.3s ease-out"); + } + &.in .modal-dialog { .translate(0, 0)} +} + +// Shell div to position the modal with bottom padding +.modal-dialog { + position: relative; + width: auto; + margin: 10px; +} + +// Actual modal +.modal-content { + position: relative; + background-color: @modal-content-bg; + border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc) + border: 1px solid @modal-content-border-color; + border-radius: @border-radius-large; + .box-shadow(0 3px 9px rgba(0,0,0,.5)); + background-clip: padding-box; + // Remove focus outline from opened modal + outline: none; +} + +// Modal background +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: @zindex-modal-background; + background-color: @modal-backdrop-bg; + // Fade for backdrop + &.fade { .opacity(0); } + &.in { .opacity(@modal-backdrop-opacity); } +} + +// Modal header +// Top section of the modal w/ title and dismiss +.modal-header { + padding: @modal-title-padding; + border-bottom: 1px solid @modal-header-border-color; + min-height: (@modal-title-padding + @modal-title-line-height); +} +// Close icon +.modal-header .close { + margin-top: -2px; +} + +// Title text within header +.modal-title { + margin: 0; + line-height: @modal-title-line-height; +} + +// Modal body +// Where all modal content resides (sibling of .modal-header and .modal-footer) +.modal-body { + position: relative; + padding: @modal-inner-padding; +} + +// Footer (for actions) +.modal-footer { + margin-top: 15px; + padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding; + text-align: right; // right align buttons + border-top: 1px solid @modal-footer-border-color; + &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons + + // Properly space out buttons + .btn + .btn { + margin-left: 5px; + margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs + } + // but override that for button groups + .btn-group .btn + .btn { + margin-left: -1px; + } + // and override it for block buttons as well + .btn-block + .btn-block { + margin-left: 0; + } +} + +// Scale up the modal +@media (min-width: @screen-sm-min) { + + // Automatically set modal's width for larger viewports + .modal-dialog { + width: @modal-md; + margin: 30px auto; + } + .modal-content { + .box-shadow(0 5px 15px rgba(0,0,0,.5)); + } + + // Modal sizes + .modal-sm { width: @modal-sm; } + .modal-lg { width: @modal-lg; } + +} |