resources/scss/bootstrap/_modals.scss

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