antd-mobile/es/grid/style/index.less

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

@import '../../style/mixins';
@import '../../style/themes/default';

@flexPrefixCls: am-flexbox;
@gridPrefixCls: am-grid;

/* flexbox */
.@{gridPrefixCls} {
  .@{flexPrefixCls} {
    background: @fill-base;

    .@{flexPrefixCls}-item {
      margin-left: 0;

      &.@{gridPrefixCls}-item {
        position: relative;

        &:active {
          background-color: @fill-tap;
        }
        &.@{gridPrefixCls}-null-item:active {
         background-color: @fill-base;
        }
      }

      &.@{gridPrefixCls}-item:before {
        display: block;
        content: ' ';
        padding-bottom: 100%;
      }

      .@{gridPrefixCls}-item-content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
        width: 100%;
        height: 100%;

        .@{gridPrefixCls}-item-inner-content {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .@{gridPrefixCls}-icon {
            margin-top: @v-spacing-md;
            width: 28%;
            height: 28%;
          }

          .@{gridPrefixCls}-text {
            margin-top: @v-spacing-md;
            font-size: @font-size-caption-sm;
            color: @color-text-base;
            text-align: center;
          }

          &.column-num-3 {
            .@{gridPrefixCls}-text {
              font-size: @font-size-caption;
            }
          }

          &.column-num-2 {
            .@{gridPrefixCls}-text {
              margin-top: @v-spacing-lg;
              font-size: @font-size-display-sm;
            }
          }
        }
      }
    }
  }

  &.@{gridPrefixCls}-line {
    .@{flexPrefixCls} {
      position: relative;
      .hairline-bottom(@border-color-base);

      &:last-child {
        .hairline-remove-right-bottom();
      }

      .@{flexPrefixCls}-item {
        position: relative;
        .hairline-right(@border-color-base);

        &:last-child {
          .hairline-remove-right-bottom();
        }
      }
    }

    .@{gridPrefixCls}-carousel-page {
      border-right: @border-width-sm solid @border-color-base;

      &:first-child {
        border-left: @border-width-sm solid @border-color-base;
      }
    }
  }

  .am-carousel {
    .am-carousel-wrap-dot > span {
      background: #dcdee3;
    }

    .am-carousel-wrap-dot-active > span {
      background: #0ae;
    }
  }
}