Modul Sleva v hlavičce stránky

Upozornění na bonus nebo speciální akci v šedivém buttonu hned vedle lajkovacího tlačítka nahoře v hlavičce stránky.

Třída .discount_in_head.

TODO

Vymanit ze zajetí #content – po přesunu všech barev do proměnných

Použití:

<div id="content">
  <div id="content_head">
    <div class="discount_in_head">
      <a href=
      "http://www.e-slovensko.cz/novinky/630/sleva-10-na-salasi-kozi-vrsok"><b>Akce</b><br>
      -10% v salaši<br>
      jen u nás!</a>
    </div>
  </div>
</div>

Varianta: s obrázkovou ikonou namísto textem

Třída .discount_in_head.with_image_icon.

<div id="content">
    <div id="content_head">
      <div class="discount_in_head with_image_icon">
        <a href="http://www.hotelyjeseniky.cz/sleva/"><img alt="Jeseníky - voucher"
        src=
        "http://www.ck-rekrea.cz/katalogy-data/images/bonusy/4/sleva_jeseniky.png"></a>
      </div>
    </div>
</div>

.discount_in_head {
    text-align: center;
    width: auto;
    margin: 0 auto @base-line-height auto;
    font-size: @smaller-font-size;
    line-height: @smaller-line-height;

    b {
      color: #444;
        font-weight: normal;
        font-size: 20px;
        line-height: 22px;
    }

    p {
      margin: 0;
    }
}

.discount_in_head a {
    display: inline-block;
    padding: 7px 10px 6px;
    color: #999;
    background: #ddd;
    .border-radius(5px);

    &:hover,
    &:focus,
    &:active {
        text-decoration: none;
        background: #444;
        color: #ddd;

        b {
            color: #ddd;
        }
    }
}

.discount_in_head {
    @media @large-start {
        position: absolute;
        top: -2px;
        right: 30px;
        margin-bottom: 0;
    }
}



.discount_in_head.with_image_icon {
    a,
    a:hover,
    a:focus,
    a:active {
        background: transparent;
        padding: 0;
    }

    img {
        max-height: 60px;
    }

    a:hover,
    a:focus,
    a:active {
      img {
        .opacity(.95);
      }
    }
}