1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/static/less/modals.less	Fri Dec 20 22:30:44 2013 +0100
     1.3 @@ -0,0 +1,129 @@
     1.4 +//
     1.5 +// Modals
     1.6 +// --------------------------------------------------
     1.7 +
     1.8 +// .modal-open      - body class for killing the scroll
     1.9 +// .modal           - container to scroll within
    1.10 +// .modal-dialog    - positioning shell for the actual modal
    1.11 +// .modal-content   - actual modal w/ bg and corners and shit
    1.12 +
    1.13 +// Kill the scroll on the body
    1.14 +.modal-open {
    1.15 +  overflow: hidden;
    1.16 +}
    1.17 +
    1.18 +// Container that the modal scrolls within
    1.19 +.modal {
    1.20 +  display: none;
    1.21 +  overflow: auto;
    1.22 +  overflow-y: scroll;
    1.23 +  position: fixed;
    1.24 +  top: 0;
    1.25 +  right: 0;
    1.26 +  bottom: 0;
    1.27 +  left: 0;
    1.28 +  z-index: @zindex-modal-background;
    1.29 +
    1.30 +  // When fading in the modal, animate it to slide down
    1.31 +  &.fade .modal-dialog {
    1.32 +    .translate(0, -25%);
    1.33 +    .transition-transform(~"0.3s ease-out");
    1.34 +  }
    1.35 +  &.in .modal-dialog { .translate(0, 0)}
    1.36 +}
    1.37 +
    1.38 +// Shell div to position the modal with bottom padding
    1.39 +.modal-dialog {
    1.40 +  position: relative;
    1.41 +  width: auto;
    1.42 +  margin: 10px;
    1.43 +  z-index: (@zindex-modal-background + 10);
    1.44 +}
    1.45 +
    1.46 +// Actual modal
    1.47 +.modal-content {
    1.48 +  position: relative;
    1.49 +  background-color: @modal-content-bg;
    1.50 +  border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
    1.51 +  border: 1px solid @modal-content-border-color;
    1.52 +  border-radius: @border-radius-large;
    1.53 +  .box-shadow(0 3px 9px rgba(0,0,0,.5));
    1.54 +  background-clip: padding-box;
    1.55 +  // Remove focus outline from opened modal
    1.56 +  outline: none;
    1.57 +}
    1.58 +
    1.59 +// Modal background
    1.60 +.modal-backdrop {
    1.61 +  position: fixed;
    1.62 +  top: 0;
    1.63 +  right: 0;
    1.64 +  bottom: 0;
    1.65 +  left: 0;
    1.66 +  z-index: (@zindex-modal-background - 10);
    1.67 +  background-color: @modal-backdrop-bg;
    1.68 +  // Fade for backdrop
    1.69 +  &.fade { .opacity(0); }
    1.70 +  &.in { .opacity(.5); }
    1.71 +}
    1.72 +
    1.73 +// Modal header
    1.74 +// Top section of the modal w/ title and dismiss
    1.75 +.modal-header {
    1.76 +  padding: @modal-title-padding;
    1.77 +  border-bottom: 1px solid @modal-header-border-color;
    1.78 +  min-height: (@modal-title-padding + @modal-title-line-height);
    1.79 +}
    1.80 +// Close icon
    1.81 +.modal-header .close {
    1.82 +  margin-top: -2px;
    1.83 +}
    1.84 +
    1.85 +// Title text within header
    1.86 +.modal-title {
    1.87 +  margin: 0;
    1.88 +  line-height: @modal-title-line-height;
    1.89 +}
    1.90 +
    1.91 +// Modal body
    1.92 +// Where all modal content resides (sibling of .modal-header and .modal-footer)
    1.93 +.modal-body {
    1.94 +  position: relative;
    1.95 +  padding: @modal-inner-padding;
    1.96 +}
    1.97 +
    1.98 +// Footer (for actions)
    1.99 +.modal-footer {
   1.100 +  margin-top: 15px;
   1.101 +  padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
   1.102 +  text-align: right; // right align buttons
   1.103 +  border-top: 1px solid @modal-footer-border-color;
   1.104 +  .clearfix(); // clear it in case folks use .pull-* classes on buttons
   1.105 +
   1.106 +  // Properly space out buttons
   1.107 +  .btn + .btn {
   1.108 +    margin-left: 5px;
   1.109 +    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
   1.110 +  }
   1.111 +  // but override that for button groups
   1.112 +  .btn-group .btn + .btn {
   1.113 +    margin-left: -1px;
   1.114 +  }
   1.115 +  // and override it for block buttons as well
   1.116 +  .btn-block + .btn-block {
   1.117 +    margin-left: 0;
   1.118 +  }
   1.119 +}
   1.120 +
   1.121 +// Scale up the modal
   1.122 +@media screen and (min-width: @screen-sm-min) {
   1.123 +
   1.124 +  .modal-dialog {
   1.125 +    width: 600px;
   1.126 +    margin: 30px auto;
   1.127 +  }
   1.128 +  .modal-content {
   1.129 +    .box-shadow(0 5px 15px rgba(0,0,0,.5));
   1.130 +  }
   1.131 +
   1.132 +}