fsa-label: dismissable variation

[francisrupert]

Task

R&D, design, and develop version of fsa-label that allow for itself to be dismissed/closed/removed.

Source

Instantiated in SPAR, SPA Reference App

Presumptive

<span class="fsa-label fsa-label--dismissable">
  Label text
  <button class="fsa-label__dismiss" aria-label="Remove" title="Remove"></button>
</span>

[francisrupert]

From SPAR:

.fsa-label {

  $label-dismiss-width: 1.33em;

  &--dismissable {
    position: relative;
    padding-right: ($label-dismiss-width);
  }

  &__remove {
    @include reset-button();
    width: $label-dismiss-width;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background-image: url('#{$image-path}/close.svg');;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 48%;
  }

}