xp-dev.com Git - namibia/blob - public/css/vendor/bootstrap-modal.css

   1 /*!
   2  * Bootstrap Modal
   3  *
   4  * Copyright Jordan Schroter
   5  * Licensed under the Apache License v2.0
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9
  10 .modal-open {
  11         overflow: hidden;
  12 }
  13
  14
  15 /* add a scroll bar to stop page from jerking around */
  16 .modal-open.page-overflow .page-container,
  17 .modal-open.page-overflow .page-container .navbar-fixed-top,
  18 .modal-open.page-overflow .page-container .navbar-fixed-bottom,
  19 .modal-open.page-overflow .modal-scrollable {
  20         overflow-y: scroll;
  21 }
  22
  23 @media (max-width: 979px) {
  24         .modal-open.page-overflow .page-container .navbar-fixed-top,
  25         .modal-open.page-overflow .page-container .navbar-fixed-bottom  {
  26                 overflow-y: visible;
  27         }
  28 }
  29
  30
  31 .modal-scrollable {
  32         position: fixed;
  33         top: 0;
  34         bottom: 0;
  35         left: 0;
  36         right: 0;
  37         overflow: auto;
  38         z-index: 11000 !important;
  39 }
  40
  41 .modal {
  42         outline: none;
  43         position: absolute;
  44         margin-top: 0;
  45         top: 50%;
  46         overflow: visible; /* allow content to popup out (i.e tooltips) */
  47 }
  48
  49 .modal.fade {
  50         top: -100%;
  51         -webkit-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
  52            -moz-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
  53              -o-transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
  54                 transition: opacity 0.3s linear, top 0.3s ease-out, bottom 0.3s ease-out, margin-top 0.3s ease-out;
  55 }
  56
  57 .modal.fade.in {
  58         top: 50%;
  59 }
  60
  61 .modal-body {
  62         max-height: none;
  63         overflow: visible;
  64 }
  65
  66 .modal.modal-absolute {
  67         position: absolute;
  68         z-index: 950;
  69 }
  70
  71 .modal .loading-mask {
  72         position: absolute;
  73         top: 0;
  74         bottom: 0;
  75         left: 0;
  76         right: 0;
  77         background: #fff;
  78         border-radius: 6px;
  79 }
  80
  81 .modal-backdrop.modal-absolute{
  82         position: absolute;
  83         z-index: 940;
  84 }
  85
  86 .modal-backdrop,
  87 .modal-backdrop.fade.in{
  88         opacity: 0.7;
  89         filter: alpha(opacity=70);
  90         background: #fff;
  91 }
  92
  93 .modal.container {
  94   width: 940px;
  95   margin-left: -470px;
  96 }
  97
  98 /* Modal Overflow */
  99
 100 .modal-overflow.modal {
 101         top: 1%;
 102 }
 103
 104 .modal-overflow.modal.fade {
 105         top: -100%;
 106 }
 107
 108 .modal-overflow.modal.fade.in {
 109         top: 1%;
 110 }
 111
 112 .modal-overflow .modal-body {
 113         overflow: auto;
 114         -webkit-overflow-scrolling: touch;
 115 }
 116
 117 /* Responsive */
 118
 119 @media (min-width: 1200px) {
 120         .modal.container {
 121                 width: 1170px;
 122                 margin-left: -585px;
 123         }
 124 }
 125
 126 @media (max-width: 979px) {
 127         .modal,
 128         .modal.container,
 129         .modal.modal-overflow   {
 130                 top: 1%;
 131                 right: 1%;
 132                 left: 1%;
 133                 bottom: auto;
 134                 width: auto !important;
 135                 height: auto !important;
 136                 margin: 0 !important;
 137                 padding: 0 !important;
 138         }
 139
 140         .modal.fade.in,
 141         .modal.container.fade.in,
 142         .modal.modal-overflow.fade.in {
 143                 top: 1%;
 144                 bottom: auto;
 145         }
 146
 147         .modal-body,
 148         .modal-overflow .modal-body {
 149                 position: static;
 150                 margin: 0;
 151                 height: auto !important;
 152                 max-height: none !important;
 153                 overflow: visible !important;
 154         }
 155
 156         .modal-footer,
 157         .modal-overflow .modal-footer {
 158                 position: static;
 159         }
 160 }
 161
 162 .loading-spinner {
 163         position: absolute;
 164         top: 50%;
 165         left: 50%;
 166         margin: -12px 0 0 -12px;
 167 }
 168
 169 /*
 170 Animate.css - http://daneden.me/animate
 171 Licensed under the ☺ license (http://licence.visualidiot.com/)
 172
 173 Copyright (c) 2012 Dan Eden*/
 174
 175 .animated {
 176         -webkit-animation-duration: 1s;
 177            -moz-animation-duration: 1s;
 178              -o-animation-duration: 1s;
 179                 animation-duration: 1s;
 180         -webkit-animation-fill-mode: both;
 181            -moz-animation-fill-mode: both;
 182              -o-animation-fill-mode: both;
 183                 animation-fill-mode: both;
 184 }
 185
 186 @-webkit-keyframes shake {
 187         0%, 100% {-webkit-transform: translateX(0);}
 188         10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
 189         20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
 190 }
 191
 192 @-moz-keyframes shake {
 193         0%, 100% {-moz-transform: translateX(0);}
 194         10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
 195         20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
 196 }
 197
 198 @-o-keyframes shake {
 199         0%, 100% {-o-transform: translateX(0);}
 200         10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
 201         20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
 202 }
 203
 204 @keyframes shake {
 205         0%, 100% {transform: translateX(0);}
 206         10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
 207         20%, 40%, 60%, 80% {transform: translateX(10px);}
 208 }
 209
 210 .shake {
 211         -webkit-animation-name: shake;
 212         -moz-animation-name: shake;
 213         -o-animation-name: shake;
 214         animation-name: shake;
 215 }
 216
 217 @media (max-width: 767px) {
 218
 219   .row-fluid .span10 {
 220     width: 82.90598290598291%;
 221     *width: 82.8527914166212%;
 222   }
 223
 224
 225
 226   .modal-body {
 227         max-height: none;
 228         overflow: visible;
 229 }
 230 }
 231
 232 @media (max-width: 500px) {
 233
 234   .row-fluid .span10 {
 235     width: 82.90598290598291%;
 236     *width: 82.8527914166212%;
 237   }
 238
 239   .row-fluid .offset10 {
 240     margin-left: 88.03418803418803%;
 241     *margin-left: 87.92780505546462%;
 242   }
 243   .row-fluid .offset10:first-child {
 244     margin-left: 85.47008547008548%;
 245     *margin-left: 85.36370249136206%;
 246   }
 247
 248   .modal-body {
 249         max-height: none;
 250         overflow: visible;
 251 }
 252 }