Footer sticky fix and menu with shadow

Footer

Footer has many sticky properties out of the --sticky modifier. Now, the footer can be used without absolute position and fixed on bottom, like the sticky effect does.

Menu

Menu has a box-shadow, to avoid a mixture with content when user scroll the page.

😘

Adding font-weight to strong

reset-css removes the font style to many elements, including <strong>.

This patch just adds font-weight to the tag.

Break changes on page-banner

Now, page-banner component has a --cover modifier and an element __picture, to avoid picture to have properties that not are from picture.

There is a selector, page-banner-over, that needs to have a siblings (page-banner) to moving margin-top up.

Fixing sass-lint on _card

Sorry.

Changing card specs and adding highlighted modifier to him

Card have a new spacement and shadow. We added --highlighted modifier to him too.

So card have this appear:

Refactor of thumbnail and added thumbnail--action

To use more than one type of thumbnail component, we are changing the old thumbnail and converting them to a modifier (thumbnail--action). The real thumbnail is this one:

The old continue to exist on modifier thumbnail--action:

Adding Price Tag and Price Variation components

Now, we have two new components: price-tag and price-variation. The result is:

New classes and fix some issues of dialog component

Now, the dialog component has flexbox layout and user elements are related to root class instead user element. So, the source is:

    <div class="dialog">
      <blockquote class="dialog__quote">
        <p>Precisava fazer um telhado no meu quintal, entrei no GetNinjas e fiz um pedido de pedreiro, eles entraram em contato comigo no mesmo dia, escolhi o que melhor me atendeu e fechei o serviço.</p>
      </blockquote>

      <div class="dialog__user space-box-medium">
        <picture class="dialog__user-photo picture picture--rounded">
          <img src="http://placehold.it/40x40" alt="Avatar for Silvia D." class="picture__image" height="40" width="40">
        </picture>
        <div class="wrap__dialog-itens">
          <div class="dialog__user-name">Silvia D.</div>
          <div class="dialog__user-location">São Paulo - SP</div>
        </div>
      </div>
    </div>

This change breaks the name of dialog classes and this is the motivation to bump major version.

Update component dialog

v4.0.2

Update component dialog

Fix z-index of menu

v4.0.1

Fix z-index of menu