pfFilterPanel: responsiveness and accesibility

[dtaylor113]

Some issues with margins/padding at mobile:

1. Active Filters / Clear All Filters text is not left aligned with the filter values
2. No top padding between filter values that wrap
3. Attempted to import Bootstrap's variables.less file and use @media(max-width: @screen-md-min) to address responsiveness layout in the pfFilterPanel. A concern was: "if someone overrides bootstrap variables then includes a-pf less files, they will lose their overrides" We need to figure out, in general, how to address responsiveness in angular-patternfly.

In addition, the pfFilterPanel needs to updated to handle resposiveness.

The clear button on the filter value is not accessible because the a doesn't have an href

[dtaylor113]

Attempted to import Bootstrap's variables.less file and use @media(max-width: @screen-md-min) to address responsiveness layout in the pfFilterPanel. A concern was: "if someone overrides bootstrap variables then includes a-pf less files, they will lose their overrides" We need to figure out, in general, how to address responsiveness in angular-patternfly.

@jeff-phillips-18, @andresgalante so looking at Patternfly core, I see may instances of using Bootstrap's @screen variables:

@media (max-width: @screen-sm-max) and @media (min-width: @screen-md-min)

Do we want to introduce patternfly @screen variables, ie: @pf-screen-md-min which will have less of a chance of being overwritten?

[jeff-phillips-18]

@dtaylor113 I'd say just include the bootstrap less files. Adopters can include the less files in the order of their choice.