Updated colorpicker css styles to remove extra pixels

[Blackbaud-TrevorBurch]

Resolves #1941

[codecov-io]

Codecov Report

Merging #1948 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff           @@
##           master   #1948   +/-   ##
======================================
  Coverage     100%    100%           
======================================
  Files         424     424           
  Lines        8968    8968           
  Branches     1326    1326           
======================================
  Hits         8968    8968

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5cd9ee3...8108219. Read the comment docs.

[Blackbaud-AlexKingman]

@Blackbaud-TrevorBurch your work definitely fixes the problem, but lets chat about the larger CSS structure of the colorpicker here for a sec. The markup looks something like this:

<sky-colorpicker>
    <div class="sky-input-group">
        <input> // the visual representation of the picker
        <sky-dropdown> // the hidden popup & the thing you actually click on!
            ... the dropdown button and some other dropdown stuff
        </sky-dropdown>
        <div *ngIf="toggleReset">
            <button> // reset
        </div>
    </div>
</sky-colorpicker>

The big trick to this whole thing is making it appear like the input is the clickable widget, when in fact, its not. We do that with some textbook positioning of a hidden element on top of the input to intercept the click. However, it looks like when this was originally written, we put the positioning code on children elements of the dropdown. In this case, sky-colorpicker .sky-dropdown-button, which is a child element of the actual dropdown. Then, we're doing some re-adjusting of its siblings: .sky-colorpicker-reset-button --> left: -25px; (which you found and correctly changed).

What I'm proposing is this: Setting positioning on deep children elements seems risky and takes more code. Would we have more control by setting styles on the parent instead of its children individually? For example, remove all the positioning rules to sky-colorpicker .sky-dropdown-button and ..sky-colorpicker-reset-button. Then, add the following to sky-colorpicker sky-dropdown --> position:absolute. This should always work because we have a sky-input-group in our template with position:relative. The absolutely-positioned sky-dropdown will know to always set its origin to that parent.

[Blackbaud-TrevorBurch]

@Blackbaud-AlexKingman I made some changes here to go with what you suggested. I also removed a /deep/ in favor of an ::ng-deep

[Blackbaud-AlexKingman]

This looks great. Nice work! 🚢 ahoy!