	New Styleguide page for "Loading"
	Introduce CDN links to all images
	Add Section with index-tiles to branding page
	New Styleguide page for "Branding"
	Extend ".wui-bs-alert" with all fruit-color-variantes
	Font-Awesome has been updated to version 5.12.0
	"Utils" has been extended with opacity, heights and colors

Do you have any design-related questions or suggestions? We'd love to hear from you.

Please contact Wuiman to discuss your ideas.

John Doe

Spacing

In Review

This component was thoroughly tested. However, it has not yet been applied in many cases in production. Maybe there will be changes due to case-related issues. If you want to use this component in production please let me know, so that we can talk about possible future changes and be sure that none of the changes will disrupt your work. Feel free to contact me via slack, email ( tjaeger@wescale.com) or personally.

Inline list

Horizontal arrangement. By using the .wui-inline-list different elements can be arranged next to each other and have the same predefined spacing.
Margins. To ensure that the spacing is not falsified from the inside out, the .wui-inline-list__item must not contain any margins.
Paddings. Normally the padding of an element can be untouched.

Size modifier

There are 4 modifiers to set the width of the gap between the wui-inline-list__items.

.wui-inline-list--lg
.wui-inline-list--md (default)
.wui-inline-list--sm
.wui-inline-list--zero

Due to the definition of inline-block elements, there will be a small gap between the elements by default. To work around this we manipulate the font sizes of the inline-lists. This should be considered if no font size is defined for the particular component.

We use the small-modifier, for example, whenever we use small Buttons. You can find them for instance at widgets or content-tiles. In these cases we would use the modifier .wui-inline-list--sm.

                      
                        <div class="wui-inline-list wui-inline-list--sm pull-right">
                            <div class="wui-inline-list__item">
                              <button class="wui-btn wui-btn--default wui-btn--sm wui-btn--outline">
                                <i class="fas fa-trash"></i>
                              </button>
                            </div>
                            <div class="wui-inline-list__item">
                              <button class="catalog-tile__toggle-button wui-btn wui-btn--default wui-btn--sm">
                                Default button sm
                              </button>
                            </div>
                          </div>

Sticky header

The sticky header is probably one of the most common examples how and when to use the .wui-inline-list

Cancel

Primary button

                      
                        <div class="wui-inline-list pull-right">
                          <div class="wui-inline-list__item">
                            <a href="#" class="wui-btn wui-btn--link">
                              Cancel
                            </a>
                          </div>
                          <div class="wui-inline-list__item">
                            <a title="Delete content source" class="wui-btn wui-btn--outline wui-btn--default">
                              <i class="fa fa-trash"></i>
                            </a>
                          </div>
                          <div class="wui-inline-list__item">
                            <a class="wui-btn wui-btn--primary">
                              Primary button
                            </a>
                          </div>
                          <div class="wui-inline-list__item">
                            <div class="fake-search" style="max-width:250px; position:relative;">
                              <input class="form-control" placeholder="Search placeholder">
                              <span style="position:absolute; right:7px; top:4px;">
                                <span class="fa fa-search" style="color:#888888;"></span>
                              </span>
                            </div>
                          </div>
                        </div>

Sections

The two buttons "previous" and "next" have no gap between each other. The pagination is a button group and counts as one element in itself and is therefore not divided into different wui-inline-list__items.

By the way, within a .wui-bs-panel the margins of a pagination should be the same to all sides. That's why we use a negative margin to the left or right.

                      
                        <div class="wui-inline-list pull-right">
                          <div class="wui-inline-list__item">
                            <button class="wui-btn wui-btn--outline wui-btn--primary">Secondary button</button>
                          </div>
                          <div class="wui-inline-list__item">
                            <div class="fake-search" style="max-width:250px; position:relative;">
                              <input class="form-control" placeholder="Search placeholder">
                              <span style="position:absolute; right:7px; top:4px;">
                                <span class="fa fa-search" style="color:#888888;"></span>
                              </span>
                            </div>
                          </div>
                          <div class="wui-inline-list__item">
                            <ul class="wui-pagination" role="navigation" aria-label="pagination">
                              <li class="wui-pagination__item wui-pagination__item--disabled">
                                <a href="#">
                                  <i class="fa fa-chevron-left" aria-hidden="true"></i>
                                </a>
                              </li>
                              <li class="wui-pagination__item">
                                <a href="#">
                                  <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                </a>
                              </li>
                            </ul>
                          </div>
                        </div>

Modal footer

Using the utils "pull-left" and "pull-right" the whole wui-inline-list is moved to the desired position. The individual elements of the wui-inline-list should not be floated.

When floating the wui-inline-list the parent element probably needs a .clearfix ;)

Cancel

Primary button

                        
                          <div class="wui-inline-list pull-left">
                            <div class="wui-inline-list__item">
                              <ul class="wui-pagination" role="navigation" aria-label="pagination">
                                <li class="wui-pagination__item wui-pagination__item--disabled">
                                  <a href="#" aria-label="Previous">
                                    <i class="fa fa-chevron-left" aria-hidden="true"></i>
                                  </a>
                                </li>
                                <li class="wui-pagination__item wui-pagination__item--active">
                                  <a href="#">1</a>
                                </li>
                                <li class="wui-pagination__item">
                                  <a href="#">2</a>
                                </li>
                                <li class="wui-pagination__item">
                                  <a href="#">3</a>
                                </li>
                                <li class="wui-pagination__item">
                                  <a href="#" aria-label="Next">
                                    <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                  </a>
                                </li>
                              </ul>
                            </div>
                            <div class="wui-inline-list__item">
                              <div class="fake-input" style="max-width:250px; position:relative;">
                                <input class="form-control" placeholder="Search placeholder">
                                <span style="position:absolute; right:7px; top:4px;">
                                  <span class="fa fa-search" style="color:#888888;"></span>
                                </span>
                              </div>
                            </div>
                          </div>
                          <div class="wui-inline-list pull-right">
                            <div class="wui-inline-list__item">
                              <a href="#" class="wui-btn wui-btn--link">
                                Cancel
                              </a>
                            </div>
                            <div class="wui-inline-list__item">
                              <a class="wui-btn wui-btn--primary">
                                Primary button
                              </a>
                            </div>
                          </div>