seehoo-design-plus/src/styles/sh/table.less

An UI components for Seehoo Vuejs.3

@table-prefix-cls: ~'@{css-prefix}table';
@btn-prefix-cls: ~'@{css-prefix}btn';
@checkbox-prefix-cls: ~'@{css-prefix}checkbox';

@sh-table-prefix-cls: ~'@{sh-css-prefix}table';
@sh-search-prefix-cls: ~'@{sh-css-prefix}search';
@sh-table-toolbar-prefix-cls: ~'@{sh-css-prefix}table-toolbar';

.@{table-prefix-cls} {
  .@{btn-prefix-cls} {
    &-text {
      &:not(:last-child) {
        margin-right: 10px;
      }
    }
  }

  .@{checkbox-prefix-cls} {
    &-checked {
      .@{checkbox-prefix-cls}-inner {
        border-color: @primary-color;
        background-color: @primary-color;
      }
    }

    &-focus {
      box-shadow: none;
    }
  }
}

.@{sh-table-prefix-cls} {
  .@{sh-search-prefix-cls} {
    margin-bottom: @margin-sm;
  }

  &-container {
    padding: 20px;
    background-color: @white;
  }

  .table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: @margin-md;
  }

  .@{sh-table-toolbar-prefix-cls} {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    button:not(:first-child) {
      margin-left: @margin-md;
    }
  }

  &-action {
    display: flex;

    &-item:not(:first-child) {
      margin-left: @margin-sm;
    }
  }
}