Closes #25: Adjust vertical alignment of icons

[bberndt-uaz]

Description

Closes #25 by adding three CSS declarations in az-icons-styles.css to adjust the vertical alignment of icons.

Related issues

#25

How to test

You can test the new alignment of icons by enabling the Global Footer and/or adding Arizona branded icons (as shown on this page) in text paragraphs.

[trackleft]

Hmm, I am thinking that this PR could have unintended consequences downstream, but I am not sure.

[trackleft]

For this our options are:

Solution 1

1. Override in az_barrio

Disadvantages for above options

Doesn't help non-quickstart users

Advantages for above options

Fixed on az_barrio

Solution 2

Add additional classes in bootstrap to account for pseudo elements.

Disadvantages for above options

Doesn't help non-bootstrap users, We would possibly have to update bootstrap.

Advantages for above options

Wider use than just quickstart

Solution 3

Add additional classes to font az-icons-styles.css

Disadvantages for above options

We would have to update bootstrap and quickstart But could probably add something like

[class^="az-icon-"].icon-vertical-align::before, [class*=" az-icon-"].before-d-inline-block::before {
   display:inline-block;
   vertical-align: middle;
   margin-bottom: 3px;
}

or

.before-vertical-align::before {
   display:inline-block;
   vertical-align: middle;
   margin-bottom: 3px;
}

Advantages for above options

Even wider use than the above two options

Solution 4

Add sweeping change to existing selector ([class^="az-icon-"]::before, [class*=" az-icon-"]::before ) in az-icons-styles.css

Disadvantages for above options

Possible unintended downstream problems.

Advantages for above options

Probably OK.