ng-zorro-antd/button/style/space-compact.less

An enterprise-class UI components based on Ant Design and Angular

@import '../../style/mixins/index';

@btn-prefix-cls: ~'@{ant-prefix}-btn';

// Button in Space.Compact
.@{btn-prefix-cls} {
  .compact-item(@btn-prefix-cls);

  // make `btn-icon-only` not too narrow
  &-icon-only&-compact-item {
    flex: none;
  }

  // Special styles for Primary Button
  &-compact-item.@{btn-prefix-cls}-primary {
    &:not([disabled]) + &:not([disabled]):not([ant-click-animating-without-extra-node='true']) {
      position: relative;

      &::after {
        position: absolute;
        top: -@border-width-base;
        inset-inline-start: -@border-width-base;
        display: inline-block;
        width: @border-width-base;
        height: calc(100% + @border-width-base * 2);
        background-color: @btn-group-border;
        content: ' ';
      }
    }
  }

  // Button in Space.Compact when direction=vertical
  .compact-item-vertical(@btn-prefix-cls);

  // Special styles for Primary Button
  &-compact-vertical-item {
    &.@{btn-prefix-cls}-primary {
      &:not([disabled]) + &:not([disabled]):not([ant-click-animating-without-extra-node='true']) {
        position: relative;

        &::after {
          position: absolute;
          top: -@border-width-base;
          inset-inline-start: -@border-width-base;
          display: inline-block;
          width: calc(100% + @border-width-base * 2);
          height: @border-width-base;
          background-color: @btn-group-border;
          content: ' ';
        }
      }
    }
  }
}