Multiple input-group-addon support

[vicary]

Patch remade from v4-dev.

Fixes #17927, see this plunker for a live demo.

[cvrebert]

There seems to be a minor bug in your code regarding the :focus border of .form-controls in input groups:

Note the lack of blue border on the left in the area indicated by the red rectangle I added.

[cvrebert]

I don't quite understand why you're now doubling here.

[vicary]

Kind of a see-sawing situation, because the original .input-group-btn has double borders in your rectangle, while .input-group-addon does not.

[vicary]

This fix in fact presented an existing issue of double borders in another way, we could limit the PR to one single fix and make another PR for this one.

Further on the border issue:

I just came up with an alternative approach, look at the end of the file.

Basically I use negative left margin to create an overlap on the double borders.

But this introduce a counter-overlap when the mouse cursor hovers on a .form-control with an .input-group-btn on the left hand side is focused. Basically because of the following behavior.

@include hover-focus-active {
  z-index: 3;
}

At this point we are back to the original style, with the double border in .input-group-btn.

The second fix is specifically for .input-group-btn which involves the use of the siblings selector ~, not sure if the desired compatibility allows so.

[cvrebert]

Your "alternative approach" sounds reasonable to me.

[vicary]

After a some crunching I merged two fix into a more simple one, see this plunk.

Gist is also updated to reflect the change.

It does the work way better than the previous attempts.

[vicary]

Gave another check on the demo on another machine and found .input-group-btn still has double borders, that means the original patch is in fact necessary.

1. Double border on the left (Current situation)
   

2. Double border on the right
   
   This is done by adding

   .input-group-btn + .form-control {
     margin-left: -1px;
   }

3. Finally
   

   This, again, incorporates the double negative margin in my first commit.

   &:not(:first-child) {
     > .btn,
     > .btn-group {
       z-index: 2;
       // #18500 double this to cancel the trailing borders.
       margin-left: (-$input-btn-border-width) * 2;
       // Because specificity
       @include hover-focus-active {
         z-index: 3;
       }
     }
   }

This fix reduces all .input-group-btn by 1px, I would also suggest removing the margin-right: (-$input-btn-border-width); to retain original width.

[vicary]

@cvrebert I could use your comment regarding the negative margin fix.

[cvrebert]

CC: @mdo

[vicary]

@cvrebert @mdo More on this, it is in fact Webkit who make this ugly.

Namely Chrome 47.0 and Safari 9.0.1, if you horizontally resize the browser you'll notice the double border only occurs when viewport width is with pixels in odd numbers, while even numbers will render normally without issue.

Tested in Firefox 40.0.3 it renders no double borders at all.

[cvrebert]

You might be describing https://code.google.com/p/chromium/issues/detail?id=534750 and its WebKit cousin.
So I'd probably give up on trying to fix double-borders in WebKit/Chrome, and just focus on getting the border overlap working in Firefox and having it make theoretical sense.
(I don't recall any reports of such a problem in IE, off the top of my head.)

[vicary]

@cvrebert If we're gonna let google fix that, the current commit is good enough to merge.

[mdo]

Merged and added docs example in 9c3ba54.