antd-mobile/lib/action-sheet/style/index.less

基于 React 的移动设计规范实现

@import '../../style/mixins';
@import '../../style/themes/default';
@ActionSheetPrefixCls: am-action-sheet;

@import './base';

.@{ActionSheetPrefixCls} {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: @fill-base;
  &&-share {
    background-color: @fill-body;
  }

  &-title,
  &-message {
    margin: @h-spacing-lg auto;
    padding: 0 @h-spacing-lg;
    text-align: center;
  }
  &-title {
    font-size: @font-size-heading;
  }
  &-message {
    color: @color-text-caption;
    font-size: @font-size-base;
  }
  &-button-list {
    text-align: center;
    color: @color-text-base;
    > li {
      font-size: @font-size-heading;
      list-style: none;
      padding: 0;
      margin: 0;
      position: relative;
      height: @button-height;
      line-height: @button-height;
      .hairline-top(@border-color-base);
      // border-top: @border-width-sm solid @border-color-base;
      &:active {
        background-color: @fill-tap;
      }
    }
    .@{ActionSheetPrefixCls}-cancel-button {
      margin-top: @v-spacing-md;
      position: relative;
      &-mask {
        position: absolute;
        top: -@v-spacing-md;
        left: 0;
        width: 100%;
        height: @v-spacing-md;
        background-color: #F7F7F7;
        .hairline-top(@border-color-base);
        .hairline-bottom(@border-color-base);
        // border-top: @border-width-sm solid @border-color-base;
        // border-bottom: @border-width-sm solid @border-color-base;
      }
    }
    .@{ActionSheetPrefixCls}-destructive-button {
      color: @brand-error;
    }
  }

  &-share {
    &-list {
      display: flex;
      position: relative;
      .hairline-top(@border-color-base);
      padding: @v-spacing-xl 0 @v-spacing-xl @h-spacing-lg;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      &-item {
        flex: none;
        margin: 0 24px 0 0;
        &-icon {
          margin-bottom: @v-spacing-md;
          width: 120px;
          height: 120px;
          background-color: @fill-base;
          border-radius: @radius-sm;
          display: flex;
          justify-content: center;
          align-items: center;
          .anticon {
            font-size: @font-size-display-xl;
          }
        }
        &-title {
          color: @color-text-caption;
          font-size: @font-size-icontext;
          text-align: center;
        }
      }
    }
    &-cancel-button {
      height: @button-height;
      line-height: @button-height;
      text-align: center;
      background-color: @fill-base;
      color: @color-text-base;
      font-size: @button-font-size;
      position: relative;
      .hairline-top(@border-color-base);
    }
  }
}