Foundation-sites: Fix input-group-label's border-radius when input-group-label is the last child

[johnbacon]

Foundation properly applies border-radius to an input-group-label as the first child of input-group-field, but when input-group-label is the last child of input-group, no border-radius is applied.

Working properly as :first-child:

Working improperly as :last-child:

Intended behavior as :last-child:

HTML used as :last-child:

<div class="input-group">
    <input type="number" class="input-group-field">
    <span class="input-group-label">%</span>
</div>

This issue is caused by line 41 of _input-group.scss:

> :last-child {
    > * {
        border-radius: if($global-text-direction == rtl, $global-radius 0 0 $global-radius, 0 $global-radius $global-radius 0);
    }
}

That line is targeting only children of input-group's last child (rather than the last child itself). This solution seems to be implemented to support input-group-button as the last child, as seen in the Forms documentation.

A dirty hack that will solve both cases while not causing visual artifacts is as follows:

> :last-child {
    border-radius: if($global-text-direction == rtl, $global-radius 0 0 $global-radius, 0 $global-radius $global-radius 0);
    > * {
        border-radius: if($global-text-direction == rtl, $global-radius 0 0 $global-radius, 0 $global-radius $global-radius 0);
    }
}

I'm sure there's a more elegant solution to allow input-group-label to be used as the last child.

[johnbacon]

After re-reading, I now notice the Working properly as :first-child example actually isn't applying the proper border-radius to the top-right and bottom-right either.

[kball]

@andycochran I know you have opinions about button/input/etc groups... can you take a look at this one?

[brettsmason]

@andycochran Any ideas if this is still an issue or not?

[andycochran]

I've found a solution that works for all four cases (input-group-button on right or left, input-group-label on right or left).

    > :first-child {
      &:not(.input-group-button){
        border-radius: if($global-text-direction == rtl, 0 $input-radius $input-radius 0, $input-radius 0 0 $input-radius);
      }

      &.input-group-button > * {
        border-radius: if($global-text-direction == rtl, 0 $input-radius $input-radius 0, $input-radius 0 0 $input-radius);
      }
    }

    > :last-child {
      &:not(.input-group-button){
        border-radius: if($global-text-direction == rtl, $input-radius 0 0 $input-radius, 0 $input-radius $input-radius 0);
      }

      &.input-group-button > * {
        border-radius: if($global-text-direction == rtl, $input-radius 0 0 $input-radius, 0 $input-radius $input-radius 0);
      }
    }

Working on a PR…