l-hammer/YDTemplate

/** 
 * Created by LHammer on 18/03/04.
 * Dialog 对话框公共样式
 */

$dialog-prefix-cls: 'dialog';
.#{$dialog-prefix-cls} {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  &-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #25262d;
    opacity: .8;
    &:before {
      content: ".";
      display: block;
      width: 1px;
      height: 1px;
      background-color: rgba(0, 0, 0, .1);
      margin-left: -10px
    }
  }
  &-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  &-container {
    width: 8.16rem;
    text-align: center;
    border-radius: 2px;
    background-color: #fff;
    overflow: hidden;
    .#{$dialog-prefix-cls}-title {
      margin-top: 1.173333rem;
    }
    .#{$dialog-prefix-cls}-content {
      margin-top: .386667rem;
      margin-bottom: .8rem;
      color: #666;
      p {
        margin: {
          top: .213333rem;
          bottom: .213333rem;
        }
      }
    }
    .#{$dialog-prefix-cls}-btns {
      overflow: hidden;
      width: 100%;
      .dialog-btn {
        display: inline-block;
        width: 50%;
        float: left;
        padding: .48rem;
        text-align: center;
        text-decoration: none;
        color: #999;
        background-color: #fff;
        background-clip: padding-box;
        box-sizing: border-box;
        &:active {
          background-color: rgba(0, 0, 0, .03)
        }
        &_highlight {
          color: #ff8819;
          font-weight: 500;
          &:active {
            background-color: rgba(#ff8819, .08)
          }
        }
      }
      &.border-right-1px:after {
        right: 50%;
        border-color: #ebebeb
      }
    }
  }
}

/**
 * Html template e.g.
 *
<transition name="dialog-fade">
    <div class="dialog">
        <div class="dialog-mask"></div>
        <div class="dialog-main">
            <div class="dialog-container">
                <h2 class="dialog-title ft-16">我是标题</h2>
                <div class="dialog-content ft-14">
                    <p>我是内容</p>
                </div>
                <div class="dialog-btns border-right-1px">
                    <a href="javascript:;" class="dialog-btn border-top-1px dialog-btn_highlight ft-18">继续开启</a>
                    <a href="javascript:;" class="dialog-btn border-top-1px ft-18">取消</a>
                </div>
            </div>
        </div>
    </div>
</transition>
 */