| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | @modal-footer-border: #E4E9EE; |
| A | 2 | @modal-footer-bg: #EFF3F8; |
| 3 | ||
| 4 | ||
| 5 | //modals | |
| 6 | .modal-content { | |
| 7 | .border-radius(0); | |
| 8 | .box-shadow(none); | |
| 9 | } | |
| 10 | .modal-footer { | |
| 11 | padding-top: 12px; | |
| 12 | padding-bottom: 14px; | |
| 13 | ||
| 14 | border-top-color: @modal-footer-border; | |
| 15 | .box-shadow(none); | |
| 16 | background-color: @modal-footer-bg; | |
| 17 | } | |
| 18 | .modal-header .close { | |
| 19 | font-size: @font-size-moda-close; | |
| 20 | } | |
| 21 | ||
| 22 | .modal-body.padding-25 { | |
| 23 | padding-left: 25px; | |
| 24 | padding-right: 25px; | |
| 25 | } | |
| 26 | ||
| 27 | ||
| 28 | ||
| 29 | ||
| 30 | .modal.aside-dark .modal-content { | |
| 31 | background-color: rgba(0,0,0,0.85); | |
| 32 | filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#D8000000', endColorstr='#D8000000',GradientType=0 )"; | |
| 33 | } | |
| 34 | .modal.aside { | |
| 35 | z-index: @zindex-dropdown - 1;//to be below user dropdowns | |
| 36 | position: absolute; | |
| 37 | } | |
| 38 | ||
| 39 | .navbar-fixed-top ~ .modal.aside-vc { | |
| 40 | z-index: @zindex-breadcrumbs-fixed + 1;//to be at least above fixed breadcrumbs? | |
| 41 | } | |
| 42 | ||
| 43 | .modal.aside-fixed.aside-hz, | |
| 44 | .navbar-fixed-top ~ .modal.aside-hz, | |
| 45 | .navbar-fixed-bottom ~ .modal.aside-hz { | |
| 46 | position: fixed; | |
| 47 | z-index: @zindex-modal - 1; | |
| 48 | } | |
| 49 | .modal.aside-fixed.aside-vc { | |
| 50 | position: fixed; | |
| 51 | //z-index: 99;//? | |
| 52 | } | |
| 53 | ||
| 54 | ||
| 55 | ||
| 56 | .modal.aside.in { | |
| 57 | z-index: @zindex-modal; | |
| 58 | position: fixed; | |
| 59 | } | |
| 60 | ||
| 61 | ||
| 62 | .aside.aside-contained { | |
| 63 | position: fixed; | |
| 64 | } | |
| 65 | ||
| 66 | ||
| 67 | //.aside-right & .aside-left | |
| 68 | .modal.aside-vc { | |
| 69 | margin: auto; | |
| 70 | width: 0; | |
| 71 | ||
| 72 | left: auto; | |
| 73 | right: auto; | |
| 74 | top: 0; | |
| 75 | bottom: 0; | |
| 76 | ||
| 77 | display: block !important; | |
| 78 | overflow: visible; | |
| 79 | } | |
| 80 | .modal.in.aside-vc { | |
| 81 | width: 100%; | |
| 82 | } | |
| 83 | ||
| 84 | .modal.aside-vc .modal-dialog { | |
| 85 | margin: inherit; | |
| 86 | overflow: inherit; | |
| 87 | ||
| 88 | width: 250px; | |
| 89 | max-width: 66%; | |
| 90 | height: inherit; | |
| 91 | ||
| 92 | position: inherit; | |
| 93 | right: inherit; | |
| 94 | top: inherit; | |
| 95 | bottom: inherit; | |
| 96 | left: inherit; | |
| 97 | ||
| 98 | opacity: 1; | |
| 99 | ||
| 100 | transition: transform 0.3s ease-out 0s; | |
| 101 | -webkit-transition: -webkit-transform 0.3s ease-out 0s; | |
| 102 | } | |
| 103 | ||
| 104 | ||
| 105 | @media only screen and (max-width: @screen-mini-max) {//319px | |
| 106 | .modal.aside-vc .modal-dialog { | |
| 107 | max-width: none; | |
| 108 | width: 200px; | |
| 109 | } | |
| 110 | .aside-contained.aside-vc .modal-dialog { | |
| 111 | width: 180px; | |
| 112 | } | |
| 113 | } | |
| 114 | @media only screen and (max-width: @screen-mini) {//240px | |
| 115 | .modal.aside-vc .modal-dialog { | |
| 116 | max-width: none; | |
| 117 | width: 160px; | |
| 118 | } | |
| 119 | .aside-contained.aside-vc .modal-dialog { | |
| 120 | width: 140px; | |
| 121 | } | |
| 122 | } | |
| 123 | ||
| 124 | ||
| 125 | ||
| 126 | .modal.aside-vc .modal-content { | |
| 127 | height: 100%; | |
| 128 | overflow: hidden; | |
| 129 | } | |
| 130 | ||
| 131 | ||
| 132 | ||
| 133 | .modal.in.aside-vc .modal-dialog { | |
| 134 | transform: none; | |
| 135 | -webkit-transform: none; | |
| 136 | height: auto; | |
| 137 | } | |
| 138 | ||
| 139 | .modal.aside-vc .aside-trigger { | |
| 140 | position: absolute; | |
| 141 | top: 155px; | |
| 142 | right: auto; | |
| 143 | left: auto; | |
| 144 | bottom: auto; | |
| 145 | margin-top: -1px; | |
| 146 | ||
| 147 | width: 37px; | |
| 148 | ||
| 149 | outline: none; | |
| 150 | } | |
| 151 | .modal.aside-vc .aside-trigger.ace-settings-btn { | |
| 152 | width: 42px; | |
| 153 | } | |
| 154 | ||
| 155 | .modal.in.aside-vc .aside-trigger { | |
| 156 | z-index: -1; | |
| 157 | } | |
| 158 | .aside.modal.in .modal-backdrop.in + .modal-dialog .aside-trigger { | |
| 159 | z-index: auto; | |
| 160 | } | |
| 161 | ||
| 162 | @media only screen and (max-height: @screen-mini) {//240px | |
| 163 | .modal.aside-vc .aside-trigger { | |
| 164 | top: 130px; | |
| 165 | } | |
| 166 | } | |
| 167 | ||
| 168 | ||
| 169 | ||
| 170 | .modal.aside-vc.navbar-offset .modal-dialog { | |
| 171 | top: @navbar-min-height; | |
| 172 | ||
| 173 | .aside-trigger { | |
| 174 | top: (155px - @navbar-min-height); | |
| 175 | } | |
| 176 | } | |
| 177 | @media (max-width: @screen-topbar-down) { | |
| 178 | .navbar:not(.navbar-collapse) ~ .modal.aside-vc.navbar-offset .modal-dialog { | |
| 179 | top: (@navbar-min-height * 2); | |
| 180 | } | |
| 181 | //.navbar ~ .modal.aside-vc.navbar-offset .modal-dialog { | |
| 182 | //top: (@navbar-min-height); | |
| 183 | //} | |
| 184 | } | |
| 185 | ||
| 186 | ||
| 187 | ||
| 188 | .modal.aside-right { | |
| 189 | right: 0; | |
| 190 | } | |
| 191 | .modal.aside-right .modal-content { | |
| 192 | border-width: 0 0 0 1px; | |
| 193 | box-shadow: -2px 1px 2px 0 rgba(0, 0, 0, 0.15); | |
| 194 | } | |
| 195 | .modal.aside-right .aside-trigger { | |
| 196 | right: 100%; | |
| 197 | } | |
| 198 | .modal.aside-right .modal-dialog { | |
| 199 | transform: translateX(100%); | |
| 200 | -webkit-transform: translateX(100%); | |
| 201 | } | |
| 202 | ||
| 203 | ||
| 204 | ||
| 205 | .modal.aside-left { | |
| 206 | left: 0; | |
| 207 | } | |
| 208 | .modal.aside-left .modal-content { | |
| 209 | border-width: 0 1px 0 0; | |
| 210 | box-shadow: 2px -1px 2px 0 rgba(0, 0, 0, 0.15); | |
| 211 | } | |
| 212 | .modal.aside-left .aside-trigger { | |
| 213 | left: 100%; | |
| 214 | } | |
| 215 | .modal.aside-right .aside-trigger.btn.ace-settings-btn { | |
| 216 | border-radius: 6px 0 0 6px; | |
| 217 | } | |
| 218 | .modal.aside-left .aside-trigger.btn.ace-settings-btn { | |
| 219 | border-radius: 0 6px 6px 0; | |
| 220 | } | |
| 221 | .modal.aside-left .modal-dialog { | |
| 222 | transform: translateX(-100%); | |
| 223 | -webkit-transform: translateX(-100%); | |
| 224 | } | |
| 225 | ||
| 226 | ||
| 227 | ||
| 228 | ||
| 229 | ||
| 230 | ||
| 231 | ||
| 232 | ||
| 233 | ||
| 234 | ||
| 235 | ||
| 236 | ||
| 237 | ||
| 238 | ||
| 239 | ||
| 240 | .modal.aside-hz { | |
| 241 | margin: auto; | |
| 242 | height: 0; | |
| 243 | ||
| 244 | left: 0; | |
| 245 | right: 0; | |
| 246 | top: auto; | |
| 247 | bottom: auto; | |
| 248 | ||
| 249 | display: block !important; | |
| 250 | overflow: visible; | |
| 251 | } | |
| 252 | .modal.in.aside-hz { | |
| 253 | height: 100%; | |
| 254 | } | |
| 255 | ||
| 256 | ||
| 257 | .modal.aside-hz .modal-dialog { | |
| 258 | margin: inherit; | |
| 259 | height: auto; | |
| 260 | overflow: inherit; | |
| 261 | max-height: 50%; | |
| 262 | width: inherit; | |
| 263 | ||
| 264 | position: inherit; | |
| 265 | right: inherit; | |
| 266 | top: inherit; | |
| 267 | bottom: inherit; | |
| 268 | left: inherit; | |
| 269 | ||
| 270 | opacity: 1; | |
| 271 | ||
| 272 | transition: transform 0.3s ease-out 0s; | |
| 273 | -webkit-transition: -webkit-transform 0.3s ease-out 0s; | |
| 274 | } | |
| 275 | @media only screen and (max-height: @screen-tiny) {//320px | |
| 276 | .modal.aside-hz .modal-dialog { | |
| 277 | max-height: 66%; | |
| 278 | } | |
| 279 | } | |
| 280 | ||
| 281 | ||
| 282 | ||
| 283 | .modal.aside-hz .modal-content { | |
| 284 | width: 100%; | |
| 285 | overflow: hidden; | |
| 286 | } | |
| 287 | ||
| 288 | ||
| 289 | .modal.in.aside-hz .modal-dialog { | |
| 290 | transform: none; | |
| 291 | -webkit-transform: none; | |
| 292 | height: auto; | |
| 293 | } | |
| 294 | ||
| 295 | ||
| 296 | ||
| 297 | .modal.aside-hz .aside-trigger { | |
| 298 | position: absolute; | |
| 299 | top: auto; | |
| 300 | right: auto; | |
| 301 | bottom: auto; | |
| 302 | margin-top: -1px; | |
| 303 | z-index: auto; | |
| 304 | ||
| 305 | outline: none; | |
| 306 | ||
| 307 | margin-left: -15px; | |
| 308 | left: 50%; | |
| 309 | } | |
| 310 | .modal.aside-hz .aside-trigger.ace-settings-btn { | |
| 311 | margin-left: -20px; | |
| 312 | } | |
| 313 | ||
| 314 | ||
| 315 | .modal.in.aside-hz .aside-trigger { | |
| 316 | z-index: -1; | |
| 317 | } | |
| 318 | ||
| 319 | ||
| 320 | ||
| 321 | .modal.aside-top { | |
| 322 | top: 0; | |
| 323 | } | |
| 324 | ||
| 325 | .modal.aside-top .modal-dialog { | |
| 326 | transform: translateY(-100%); | |
| 327 | -webkit-transform: translateY(-100%); | |
| 328 | } | |
| 329 | ||
| 330 | .modal.aside-top .modal-content { | |
| 331 | //border-width: 0 0 1px 0; | |
| 332 | border-width: 0; | |
| 333 | box-shadow: 1px 2px 2px 0 rgba(0, 0, 0, 0.15); | |
| 334 | } | |
| 335 | ||
| 336 | ||
| 337 | .modal.aside-bottom { | |
| 338 | bottom: 0; | |
| 339 | } | |
| 340 | ||
| 341 | .modal.aside-bottom .modal-dialog { | |
| 342 | transform: translateY(100%); | |
| 343 | -webkit-transform: translateY(100%); | |
| 344 | } | |
| 345 | ||
| 346 | .modal.aside-bottom .modal-content { | |
| 347 | //border-width: 1px 0 0 0; | |
| 348 | border-width: 0; | |
| 349 | box-shadow: -1px 2px 2px 0 rgba(0, 0, 0, 0.15); | |
| 350 | } | |
| 351 | .modal.aside-bottom .aside-trigger { | |
| 352 | bottom: 100%; | |
| 353 | margin-top: auto; | |
| 354 | margin-bottom: -1px; | |
| 355 | } | |
| 356 | ||
| 357 | ||
| 358 | ||
| 359 | .modal.aside-top .aside-trigger.ace-settings-btn { | |
| 360 | border-radius: 0 0 6px 6px !important; | |
| 361 | } | |
| 362 | .modal.aside-bottom .aside-trigger.ace-settings-btn { | |
| 363 | border-radius: 6px 6px 0 0 !important; | |
| 364 | } | |
| 365 | ||
| 366 | ||
| 367 | ||
| 368 | .aside.aside-hidden .modal-content { | |
| 369 | display: none; | |
| 370 | } | |
| 371 | ||
| 372 | ||
| 373 | .enable_container_aside_modal() when(@enable-container = true) { | |
| 374 | //maybe disable transition when it is not good enough! | |
| 375 | @media only screen and (min-width: @screen-sm-min) { | |
| 376 | //to disable transition animation | |
| 377 | .container.main-container ~ .modal.aside-vc .modal-dialog { | |
| 378 | transition: none; | |
| 379 | -webkit-transition: none; | |
| 380 | } | |
| 381 | .container.main-container ~ .modal.aside-vc:not(.in) .modal-content { | |
| 382 | display: none; | |
| 383 | } | |
| 384 | } | |
| 385 | } | |
| 386 | .enable_container_aside_modal(); | |
| 387 | //// | |
| 388 | ||
| 389 | ||
| 390 | ||
| 391 | ||
| 392 | ||
| 393 | .aside-vc.in.no-backdrop { | |
| 394 | width: auto;//otherwise modal will be as big as window, and will have the same effect as backdrop | |
| 395 | } | |
| 396 | .aside-hz.in.no-backdrop { | |
| 397 | height: auto; | |
| 398 | } | |
| 399 | ||
| 400 | .modal.aside .modal-backdrop { | |
| 401 | position: fixed; | |
| 402 | bottom: 0; | |
| 403 | height: auto !important;//to override inline value set by BS | |
| 404 | } | |
| 405 | ||
| 406 | ||
| 407 | ||
| 408 | .modal.aside-hz .aside-trigger.align-left { | |
| 409 | left: 15px; | |
| 410 | margin-left: auto; | |
| 411 | text-align: center; | |
| 412 | } | |
| 413 | .modal.aside-hz .aside-trigger.align-right { | |
| 414 | text-align: center; | |
| 415 | left: auto; | |
| 416 | margin-left: auto; | |
| 417 | right: 15px; | |
| 418 | } | |
| 419 | ||
| 420 | ||
| 421 | ||
| 422 | ||
| 423 | .modal.transition-off .modal-dialog { | |
| 424 | transition: none; | |
| 425 | -webkit-transition: none; | |
| 426 | } | |
