diff options
Diffstat (limited to 'bower_components/bootstrap/less/modals.less')
| -rw-r--r-- | bower_components/bootstrap/less/modals.less | 139 | 
1 files changed, 139 insertions, 0 deletions
| diff --git a/bower_components/bootstrap/less/modals.less b/bower_components/bootstrap/less/modals.less new file mode 100644 index 0000000..21cdee0 --- /dev/null +++ b/bower_components/bootstrap/less/modals.less @@ -0,0 +1,139 @@ +// +// 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; } +} + +@media (min-width: @screen-md-min) { +  .modal-lg { width: @modal-lg; } +} | 
