Fix .clearfix on .dl-horizontal dd (#12753)

[dairiki]

See #12753 for details.

[cvrebert]

Filed an upstream less.js bug regarding the duplication: less/less.js#1886

[cvrebert]

@mdo We're gonna need some kind of workaround here to avoid duplication.

[dairiki]

Omitting the parenthesis on the declaration of the .clearfix mixin and dropping the then-redundant .clearfix { .clearfix(); } from utilities.less seems to work. I.e.

.clearfix {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

.goober {
  .clearfix();
}

appears to behave as desired.

(On the other hand, the duplicate rules aren't the end of the world.)

[mdo]

Something like this should be fine I think:

// Horizontal description lists
//
// Defaults to being stacked without any of the below styles applied, until the
// grid breakpoint is reached (default of ~768px).

.dl-horizontal {
  dd {
    &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
  }

  @media (min-width: @grid-float-breakpoint) {
    dt {
      float: left;
      width: (@component-offset-horizontal - 20);
      clear: left;
      text-align: right;
      .text-overflow();
    }
    dd {
      margin-left: @component-offset-horizontal;
    }
  }
}

We don't need to change the way we clearfix, just where the clearfix is. This shouldn't change much really since it's just a clearfix.

[dairiki]

Yes, I suspect that's fine, too.

Do you want me to update this PR accordingly? (I.e. are you going to merge it if I do?)

[dairiki]

Thanks!

[mdo]

<3