BHV-10659: Replace ContextualPopupNub with pure CSS

### Objective/Issues
1. Popup nub above has problem (the nub was 5px off) See attachment screenshot
2. Replace contextual popup nub images with CSS2 shape.
3. Refractor/Simplify the code to make it more readable and concise.

### Approaches
1. Create mixing classes of 4 nubs classes (above, right, below, left) and 1 nub position class
2. Remove .horizontal and .vertical on the nub classes as they are more a specificity class to the contextual popup position (not popup nub position)

### Challenges remain
1. It seems to work for the given samples situations (context popups in ContextualPopupSample.html, VideoPlayerSample.html, DataGridListSample.html)
problems still remains, we did not position the nub against activating control
2. It gets a little complicated if we decide to position it against activating control, and how to deal with RTL situations
3. I think we need define a max width and max-length for the popup, probably need to discuses with Visual