git.roojs.org Git - bootswatch/blob - bower_components/font-awesome/src/assets/less/bootstrap-3.0.0/modals.less

   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   // Account for hiding of scrollbar
  16   body&,
  17   .navbar-fixed-top,
  18   .navbar-fixed-bottom {
  19     margin-right: 15px
  20   }
  21 }
  22
  23 // Container that the modal scrolls within
  24 .modal {
  25   display: none;
  26   overflow: auto;
  27   overflow-y: scroll;
  28   position: fixed;
  29   top: 0;
  30   right: 0;
  31   bottom: 0;
  32   left: 0;
  33   z-index: @zindex-modal-background;
  34
  35   // When fading in the modal, animate it to slide down
  36   &.fade .modal-dialog {
  37     .translate(0, -25%);
  38     .transition-transform(~"0.3s ease-out");
  39   }
  40   &.in .modal-dialog { .translate(0, 0)}
  41 }
  42
  43 // Shell div to position the modal with bottom padding
  44 .modal-dialog {
  45   margin-left: auto;
  46   margin-right: auto;
  47   width: auto;
  48   padding: 10px;
  49   z-index: (@zindex-modal-background + 10);
  50 }
  51
  52 // Actual modal
  53 .modal-content {
  54   position: relative;
  55   background-color: @modal-content-bg;
  56   border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
  57   border: 1px solid @modal-content-border-color;
  58   border-radius: @border-radius-large;
  59   .box-shadow(0 3px 9px rgba(0,0,0,.5));
  60   background-clip: padding-box;
  61   // Remove focus outline from opened modal
  62   outline: none;
  63 }
  64
  65 // Modal background
  66 .modal-backdrop {
  67   position: fixed;
  68   top: 0;
  69   right: 0;
  70   bottom: 0;
  71   left: 0;
  72   z-index: (@zindex-modal-background - 10);
  73   background-color: @modal-backdrop-bg;
  74   // Fade for backdrop
  75   &.fade { .opacity(0); }
  76   &.in { .opacity(.5); }
  77 }
  78
  79 // Modal header
  80 // Top section of the modal w/ title and dismiss
  81 .modal-header {
  82   padding: @modal-title-padding;
  83   border-bottom: 1px solid @modal-header-border-color;
  84   min-height: (@modal-title-padding + @modal-title-line-height);
  85 }
  86 // Close icon
  87 .modal-header .close {
  88   margin-top: -2px;
  89 }
  90
  91 // Title text within header
  92 .modal-title {
  93   margin: 0;
  94   line-height: @modal-title-line-height;
  95 }
  96
  97 // Modal body
  98 // Where all modal content resides (sibling of .modal-header and .modal-footer)
  99 .modal-body {
 100   position: relative;
 101   padding: @modal-inner-padding;
 102 }
 103
 104 // Footer (for actions)
 105 .modal-footer {
 106   margin-top: 15px;
 107   padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
 108   text-align: right; // right align buttons
 109   border-top: 1px solid @modal-footer-border-color;
 110   .clearfix(); // clear it in case folks use .pull-* classes on buttons
 111
 112   // Properly space out buttons
 113   .btn + .btn {
 114     margin-left: 5px;
 115     margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
 116   }
 117   // but override that for button groups
 118   .btn-group .btn + .btn {
 119     margin-left: -1px;
 120   }
 121   // and override it for block buttons as well
 122   .btn-block + .btn-block {
 123     margin-left: 0;
 124   }
 125 }
 126
 127 // Scale up the modal
 128 @media screen and (min-width: @screen-tablet) {
 129
 130   .modal-dialog {
 131     left: 50%;
 132     right: auto;
 133     width: 600px;
 134     padding-top: 30px;
 135     padding-bottom: 30px;
 136   }
 137   .modal-content {
 138     .box-shadow(0 5px 15px rgba(0,0,0,.5));
 139   }
 140
 141 }