antd-mobile/es/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: #f2f2f2;
  }

  &-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;

    &-item {
      font-size: @actionsheet-item-font-size;
      padding: 0;
      margin: 0;
      position: relative;
      height: @actionsheet-item-height;
      line-height: @actionsheet-item-height;
      box-sizing: border-box;
      .hairline-top(@border-color-base);
      // border-top: @border-width-sm solid @border-color-base;
      // &:active {
      &&-active {
        background-color: @fill-tap;
      }
    }

    .@{ActionSheetPrefixCls}-cancel-button {
      margin-top: @v-spacing-sm;
      position: relative;

      &-mask {
        position: absolute;
        top: -@v-spacing-sm;
        left: 0;
        width: 100%;
        height: @v-spacing-sm;
        background-color: #e7e7ed;
        .hairline-top(@border-color-base);
        .hairline-bottom(@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: @actionsheet-item-height;
      line-height: @actionsheet-item-height;
      text-align: center;
      background-color: @fill-base;
      color: @color-text-base;
      font-size: @button-font-size;
      position: relative;
      .hairline-top(@border-color-base);
      box-sizing: border-box;

      // &:active {
      &&-active {
        background-color: @fill-tap;
      }
    }
  }
}