Dialog.less 2.95 KB
Newer Older
liang ce committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133
@import './variables.less';

.clearfix() {
  &:before,
  &:after {
    content: ' '; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

.@{prefixCls} {
  // Container that the rc-dialog scrolls within
  &-wrap {
    position: fixed;
    overflow: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: @zindex-modal;
    -webkit-overflow-scrolling: touch;

    // Prevent Chrome on Windows from adding a focus outline. For details, see
    // https://github.com/twbs/bootstrap/pull/10951.
    outline: 0;
  }

  // Shell div to position the rc-dialog with bottom padding
  position: relative;
  width: auto;
  margin: 10px;

  // Actual rc-dialog
  &-content {
    position: relative;
    background-color: @modal-content-bg;
    border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
    border: 1px solid @modal-content-border-color;
    border-radius: @border-radius-large;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    // Remove focus outline from opened rc-dialog
    outline: 0;
  }

  // Modal header
  // Top section of the rc-dialog w/ title and dismiss
  &-header {
    padding: @modal-title-padding;
    border-bottom: 1px solid @modal-header-border-color;
    &:extend(.clearfix all);
  }

  &-close {
    cursor: pointer;
    border: 0;
    background: transparent;
    font-size: 21px;
    position: absolute;
    right: 20px;
    top: 12px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.2;
    text-decoration: none;

    &-x:after {
      content: '×';
    }

    &:hover {
      opacity: 1;
      filter: alpha(opacity=100);
      text-decoration: none;
    }
  }

  // Title text within header
  &-title {
    margin: 0;
    line-height: @modal-title-line-height;
  }

  // Modal body
  // Where all rc-dialog content resides (sibling of &-header and &-footer)
  &-body {
    position: relative;
    padding: @modal-inner-padding;
  }

  // Footer (for actions)
  &-footer {
    padding: @modal-inner-padding;
    text-align: right; // right align buttons
    border-top: 1px solid @modal-footer-border-color;
    &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons

    // Properly space out buttons
    .btn + .btn {
      margin-left: 5px;
      margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
    }
    // but override that for button groups
    .btn-group .btn + .btn {
      margin-left: -1px;
    }
    // and override it for block buttons as well
    .btn-block + .btn-block {
      margin-left: 0;
    }
  }
}

// Scale up the rc-dialog
@media (min-width: @screen-sm-min) {
  .@{prefixCls} {
    // Automatically set rc-dialog's width for larger viewports
    width: @modal-md;
    margin: 30px auto;

    &-content {
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }
  }
}

@import './effect.less';