bootstrap-source/bootstrap-3.0.3/less/modals.less
changeset 115 a9d04f5f5650
parent 114 6093dda9fe38
child 116 00287f05dc6a
     1.1 --- a/bootstrap-source/bootstrap-3.0.3/less/modals.less	Sat Jan 18 12:34:36 2014 +0100
     1.2 +++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.3 @@ -1,129 +0,0 @@
     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 -}
Impressum Datenschutzerklärung