github.com/kayoticsully/syncthing@v0.8.9-0.20140724133906-c45a2fdc03f8/assets/bootstrap-3.1.1/less/modals.less (about)

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