shineout/lib/Modal/styles/modal.less

Shein 前端组件库

@import '../../styles/variables.less';
@import '../../styles/themes/@{so-theme}.less';
@modal-prefix: ~'@{so-prefix}-modal';
@card-prefix: ~'@{so-prefix}-card';
@moveable-prefix: ~'@{so-prefix}-moveable';

@keyframes scale-in {
  0% {
    transform: scale(.2);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}

@keyframes scale-out {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(.2);
  }
}

.@{modal-prefix} {
  position: fixed;
  z-index: @zindex-modal;
  top: 0;
  left: 0;
  overflow: auto;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
  &-hide-mask {
    pointer-events: none;
    background-color: transparent;
    .@{modal-prefix}-mask {
      pointer-events: none;
      background-color: transparent;
    }
    .@{modal-prefix}-panel {
      pointer-events: all;
    }
  }
  &-rtl {
    direction: rtl;
  }

  &-panel {
    // max-width: 90%;
    padding: @modal-panel-padding;
    text-align: left;
    margin: 0 auto;
    transform: translateY(-100px);
    .@{modal-prefix}-rtl & {
      text-align: right;
    }
  }

  &-zoom {
    transform: none;
  }

  &-title {
    color: @modal-title-color;
    font-size: @modal-title-font-size;
    font-weight: 500;
    font-family: @modal-title-font;
    line-height: 1.5;
    padding-right: @modal-title-distance-to-right;
    .@{modal-prefix}-rtl &{
      padding-right: 0;
      padding-left: @modal-title-distance-to-right;;
    }

    &.@{modal-prefix}-with-icon {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .@{modal-prefix}-icon{
      margin-right: 8px;
      width: @modal-default-title-icon-size;
      height: @modal-default-title-icon-size;
      display: flex;
      .@{modal-prefix}-rtl &{
        margin-left: 8px;
        margin-right: 0;
      }

      svg {
        width: @modal-default-title-icon-size;
        height: @modal-default-title-icon-size;
        font-size: @modal-default-title-icon-size;
      }
    }
  }

  &-method-title {
    padding-right: @modal-method-header-padding-right;
    .@{modal-prefix}-rtl & {
      padding-right: 0;
      padding-left: @modal-method-header-padding-right;
    }
  }

  & &-body {
    padding: 40px 40px 20px 70px;
    .@{modal-prefix}-rtl & {
      padding: 40px 70px 20px 40px;
    }

    .@{modal-prefix}-title {
      margin-bottom: 8px;
    }

    .@{modal-prefix}-icon {
      position: absolute;
      top: @modal-icon-top;
      left: @modal-icon-left;
      width: @modal-icon-size;
      height: @modal-icon-size;
      .@{modal-prefix}-rtl& {
        left: auto;
        right: @modal-icon-left;
      }
    }
  }

  &-position {
    overflow-x: hidden;
    overflow-y: hidden;
    transition: opacity .3s @zoom-out;
    .@{modal-prefix}-mask > .@{modal-prefix}-panel {
      transition: transform .3s @zoom-out;
      border-radius: 0;
      padding: 0;
      > .@{modal-prefix}-title {
        border-radius: 0;
        background: @gray-100;
        padding: @modal-drawer-header-vertical-padding @modal-drawer-padding;
        padding-right: @modal-drawer-padding + 30;
        .@{modal-prefix}-rtl& {
          padding-right: @modal-drawer-padding;
          padding-left: @modal-drawer-padding + 30;
        }
      }
      > .@{card-prefix}-body {
        border-radius: 0;
        padding: @modal-drawer-padding;
        .@{modal-prefix}-rtl& {
          padding: @modal-drawer-padding;
        }
      }
      > .@{card-prefix}-footer {
        border-radius: 0;
        padding: @modal-drawer-padding;
      }
      > .@{modal-prefix}-close {
        top: 0;
        right: 0;
        margin-top: @modal-drawer-header-vertical-padding;
        margin-right: @modal-drawer-header-vertical-padding;
        .@{modal-prefix}-rtl& {
          left: 0;
          right: auto;
          margin-right: auto;
          margin-left: @modal-drawer-header-vertical-padding;
        }
      }
    }
  }

  &-end {
    opacity: 0;
    transition: opacity .3s @zoom-out;
    .@{modal-prefix}-panel {
      transition: transform .3s @zoom-out;
    }
    .@{modal-prefix}-panel.@{modal-prefix}-zoom {
      animation: scale-out .3s @zoom-out;
    }
  }

  &-show {
    opacity: 1;
    transition: opacity .3s @zoom-in;
    .@{modal-prefix}-panel {
      transition: transform .3s @zoom-in;
      transform: scale(1) translate(0, 0);
    }
  }

  &-start {
    .@{modal-prefix}-panel.@{modal-prefix}-zoom {
      animation: scale-in .3s @zoom-in;
    }
  }

  &-right {
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    transform: translate(100%, 0);
  }

  &-left {
    top: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    transform: translate(-100%, 0);
  }

  &-top {
    top: 0;
    right: 0;
    left: 0;
    margin: 0;
    transform: translate(0, -100%);
  }

  &-bottom {
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    transform: translate(0, 100%);
  }

  &-top,
  &-bottom {
    max-width: 100%;
  }

  &-success &-icon path {
    fill: @colors-success;
  }

  &-info &-icon path {
    fill: @colors-info;
  }

  &-warning &-icon path,
  &-confirm &-icon path {
    fill: @colors-warning;
  }

  &-error &-icon path {
    fill: @colors-danger;
  }

  &-info,
  &-success,
  &-warning,
  &-error,
  &-normal,
  &-confirm {
    .@{modal-prefix}-footer.@{modal-prefix}-method {
      &:after {
        display: none;
      }
    }
  }

  &-close {
    position: absolute;
    z-index: 100;
    top: @modal-close-top-margin;
    right: @modal-close-right-margin;
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    margin-top: @modal-panel-padding;
    margin-right: @modal-panel-padding;
    .@{modal-prefix}-rtl & {
      left: 0;
      right: auto;
      margin-right: 0;
      margin-left: @modal-panel-padding;
    }

    &:hover > svg {
      fill: @modal-close-icon-hover-color;
    }

    > svg {
      fill: @modal-close-icon-color;
    }
  }

  .@{moveable-prefix} {
    .@{modal-prefix}-title {
      cursor: move;
    }
  }

  &-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;

    > .@{card-prefix} {
      font-size: @modal-font-size;
      border-radius: @modal-border-radius;
      border: @modal-border-width solid @modal-border-color;
      color:  @modal-color;
      &-hover:hover,
      &-shadow {
        box-shadow: @modal-box-shadow;
      }
      > .@{card-prefix}-header {
        padding-top: @modal-header-padding-top;
        padding-right: @modal-header-padding-right;
        padding-bottom: @modal-header-padding-bottom;
        padding-left: @modal-header-padding-left;
        border-radius: @modal-border-radius @modal-border-radius 0 0;
        background: @modal-header-bg;
        .@{modal-prefix}-rtl & {
          padding-right: @modal-header-padding-left;
          padding-left: @modal-header-padding-right;
        }
      }
      > .@{card-prefix}-body {
        padding-top: @modal-body-padding-top;
        padding-right: @modal-body-padding-right;
        padding-bottom: @modal-body-padding-bottom;
        padding-left: @modal-body-padding-left;
        .@{modal-prefix}-rtl & {
          padding-right: @modal-body-padding-left;
          padding-left: @modal-body-padding-right;
        }
      }
      .@{modal-prefix}-body {
        padding-top: @modal-icon-body-padding-top;
        padding-right: @modal-icon-body-padding-right;
        padding-bottom: @modal-icon-body-padding-bottom;
        padding-left: @modal-icon-body-padding-left;
        .@{modal-prefix}-rtl & {
          padding-right: @modal-icon-body-padding-left;
          padding-left: @modal-icon-body-padding-right;
        }
      }
      > .@{card-prefix}-footer {
        padding: @modal-footer-padding;
        border-radius: 0 0 @modal-border-radius @modal-border-radius;
        background: @modal-footer-bg;
        .@{modal-prefix}-rtl & {
          text-align: left;
        }
      }
      > .@{card-prefix}-header, > .@{card-prefix}-footer {
        &:after {
          height: @modal-divider-height;
          width: @modal-divider-width;
          background: @modal-divider-color;
        }
      }
    }
    > .@{card-prefix}.@{modal-prefix}-normal {
      .@{modal-prefix}-body {
          padding-left: @modal-icon-body-padding-right;
          .@{modal-prefix}-rtl & {
            padding-right: @modal-icon-body-padding-right;
          }
        }
    }
  }

  &-full-screen {
    .@{modal-prefix}-panel {
      border-radius: 0;
      overflow: auto;
    }
    &.@{modal-prefix}-position {
      .@{modal-prefix}-panel {
        width: 100vw;
        height: 100vh;
      }
    }
  }
}