linkmore-design/es/custom-table-option/style/index-pure.less

🌈 🚀lm组件库。🚀

@import '../../style/themes/index.less';

.lm_custom-table-option {
  // 没有按照规范来，但设计要如此

  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: @border-radius-base;
  }

  *::-webkit-scrollbar-thumb {
    background: @text-color-disable;
    border-radius: @border-radius-base;
  }

  &.lm_drawer {
    .ant-drawer-header {
      height: auto;
      border: none;
      padding: @padding-sm @padding-lg @padding-sm @padding-md;

      .ant-drawer-title {
        font-size: @font-size-lg;
        font-weight: 600;
      }
    }

    .ant-drawer-body {
      padding: 0;
      overflow: hidden;

      .ant-tabs {
        height: 100%;
      }

      .ant-tabs-nav {
        margin-bottom: calc(@margin-xss + 2px);
      }

      .ant-tabs-nav-wrap {
        padding: 0 @padding-lg;
      }

      .ant-tabs-content-holder {
        overflow-y: scroll;
        margin: 0 @margin-xs 8px @margin-xs;
        padding: calc(@padding-xs + 2px) @padding-xs 0 @padding-md;
      }

      .ant-tabs-tab {
        padding: calc(@padding-xs + 1px) 0;
      }
    }
  }
}

.lm_custom_option_columns {
  .group_title {
    font-weight: 600; // PingFang SC 应为500，但在微软字体中500显示的是400
    font-size: @font-size-base;
    line-height: 22px;
    color: @text-color;
    margin-bottom: @margin-xs;
  }

  // 全选、重置
  .global_setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid @text-color-border;
    padding: 0 @padding-sm @padding-xs;
    margin-bottom: @margin-xs;

    > span {
      font-size: @font-size-base;
      color: @primary-color;
      cursor: pointer;
    }
  }

  .custom_hiddle {
    display: none;
  }

  // 固定标题: 左侧、右侧、不固定
  .fixed_title {
    display: inline-block;
    font-size: @font-size-base;
    line-height: 22px;
    color: @text-color-secondary;
  }

  .drag_scroll {
    display: flex;
    flex-flow: column;
    gap: @gap-base;
    margin: @margin-xs 0;
  }

  .lm_custom_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: @font-size-base;
    min-height: @height-base;
    border-radius: @border-radius-base;
    background-color: @text-color-bg;
    padding: 0 @padding-sm;
    transition: 0.2s;

    .lm_custom_item_operate {
      display: flex;
      align-items: center;
      gap: @gap-base;

      .hover_show {
        opacity: 0;
      }

      .lm_custom_icon {
        font-size: @font-size-lg;
        color: @text-color-secondary-deep;
        cursor: pointer;

        &.sort_item {
          color: @text-color-secondary-deep;
        }

        &:hover {
          color: @text-color-new;
        }
      }
    }

    &:hover {
      background-color: @text-color-border;

      .lm_custom_item_operate .hover_show {
        opacity: 1;
        transition: 0.2s;
      }
    }

    &.drag {
      cursor: move;

      .lm_custom_icon {
        cursor: move;
      }
    }
  }

  &[aira-pressed] {
    .lm_custom_item .lm_custom_item_operate {
      cursor: move;
    }
  }

  .card_prompt {
    .anticon {
      font-size: @font-size-lg;
      color: @warning-color;
    }
  }
}

.lm_custom_option_group_size {
  margin-bottom: @margin-lg;
}

.lm_size_radio_group {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  // justify-content: space-between;
  gap: calc(@gap-base * 2);

  .lm_custom_size_warp {
    // flex: 1;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: @gap-base;
    cursor: pointer;

    > img {
      width: 100%;
    }
  }
}

.lm_custom_option_group_preview_size {
  margin-bottom: @margin-md;

  .lm_custom_preview_size_wrapper {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    gap: @padding-md;
    min-height: @height-base;

    .lm_custom_preview_size_prefix {
      font-size: @padding-md;
      color: @text-color-secondary;
    }
    .lm_custom_preview_size_suffix {
      font-size: @padding-lg;
      color: @text-color-secondary;
    }

    .lm_custom_preview_size_slider {
      flex: 1;
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}

.global_search {
  margin-bottom: @margin-md;

  .ant-input-prefix {
    color: @text-color-secondary-deep;
  }
}