modules

card   

Copy
Edit
<!-- components/modules/card.php --> <article class="card"> <a href="<?php echo isset($card['link']) ? $card['link'] : '#'; ?>"> <div class="card__cover"> <img src="<?php echo isset($card['image']) ? $card['image'] : './img/events/1.jpg'; ?>" class="card__image" alt=""> <time class="card__date" datetime="<?php echo isset($card['date']) ? $card['date'] : '2020-03-06 16:00:00'; ?>"> <span class="date__day">6.</span> <span class="date__month">březen</span> <span class="date__time">středa &mdash; 16:00</span> </time> </div> <div class="card__description"> <h3 class="card__title"><?php echo isset($card['title']) ? $card['title'] : 'Kulinářská show se spotřebiči Bosch a Siemens'; ?></h3> <p class="card__event"><?php echo isset($card['event']) ? $card['event'] : 'Předváděcí vaření'; ?></p> <p class="card__badge"> <?php if (isset($card['badge'])) { foreach ($card['badge'] as $badge) { echo '<span class="badge badge--secondary">' . $badge . '</span>'; } } else { echo '<span class="badge badge--secondary">Siemens</span><span class="badge badge--secondary">Bosch</span>'; } ?> </p> </div> </a> <a href="<?php echo isset($card['link']) ? $card['link'] : '#'; ?>" class="button button--arrow">Detail</a> </article>
Copy
Copy
Edit
/* scss/modules/_card.scss */ .card { margin: 0 0 3rem; position: relative; &:hover { .card__cover .card__image { filter: grayscale(1); } .card__description { background-color: $grey-200-color; } } & > a { text-decoration: none; } } .card__cover { background-color: $white-color; box-shadow: 0 8px 29px rgba(0, 0, 0, 0.11); margin: 0 0 -5.5rem; width: calc(100% - 24px); height: 210px; position: relative; @include media-breakpoint-down(xs) { height: 170px; } &::before { content: ""; background-color: rgba($primary-color, 0.28); width: 100%; height: 100%; display: block; top: 0; bottom: 0; left: 0; right: 0; position: absolute; z-index: 10; } .card__image { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0); transition: filter 0.2s; position: relative; z-index: 5; } .card__date { color: $default-color; background-color: $white-color; box-shadow: 0 8px 29px rgba(0, 0, 0, 0.11); font-family: $font-family-headings; line-height: 1; padding: 1.125rem 1.5rem; left: 0; bottom: 0; position: absolute; z-index: 20; .date__day { font-size: 2.3125rem; font-weight: 800; display: block; } .date__month { font-size: 1rem; font-weight: 700; padding: 0.25rem 0 0.5rem; display: block; } .date__time { font-size: 0.75rem; display: block; } } } .card__description { color: $default-color; background-color: $grey-100-color; margin: 0; padding: 7.5rem 1.4375rem 2.25rem 1.4375rem; transition: background-color 0.2s, border-color 0.2s; position: relative; p { margin: 0; } a { text-decoration: none; } .card__title { color: $default-color; margin: 0 0 1.25rem; transition: color 0.2s; } .card__event { margin: 0 0 1.125rem; } .card__badge { color: $grey-400-color; text-transform: uppercase; font-size: 0.8125rem; margin: 0 0 0.5rem; transition: color 0.2s; .detail__label { margin-bottom: 0; } } .card__address { color: $grey-400-color; font-size: 0.8125rem; font-style: italic; line-height: 1.125; margin: 1rem 0 0 0; padding: 0 50px 0 21px; position: relative; transition: color 0.2s; svg { top: -1px; left: 0; position: absolute; } } .card__icon { background-color: $primary-color; fill: $white-color; justify-content: center; align-items: center; width: 48px; height: 48px; display: flex; right: 24px; bottom: 0; position: absolute; @include media-breakpoint-down(lg) { width: 37px; height: 37px; } svg { width: 25px; height: 25px; display: block; @include media-breakpoint-down(lg) { width: 20px; height: 20px; } } } } /* white card */ .card--white { padding: 2rem; position: relative; background-color: $white-color; @include media-breakpoint-down(sm) { padding: 1.5rem; } } .events { .event { display: none; } }

card-extra   

Copy
Edit
<!-- components/modules/card-extra.php --> <article class="card card--extra"> <a href="<?php echo isset($card['link']) ? $card['link'] : '#'; ?>"> <div class="card__cover"> <img src="<?php echo isset($card['image']) ? $card['image'] : './img/events/1.jpg'; ?>" class="card__image" alt=""> <time class="card__date" datetime="<?php echo isset($card['date']) ? $card['date'] : '2020-03-06 16:00:00'; ?>"> <span class="date__day">6.</span> <span class="date__month">březen</span> <span class="date__time">středa &mdash; 16:00</span> </time> </div> <div class="card__description"> <h3 class="card__title"><?php echo isset($card['title']) ? $card['title'] : 'Kulinářská show se spotřebiči Bosch a Siemens'; ?></h3> <p class="card__event"><?php echo isset($card['event']) ? $card['event'] : 'Předváděcí vaření'; ?></p> <p class="card__badge"> <?php if (isset($card['badge'])) { foreach ($card['badge'] as $badge) { echo '<span class="badge badge--secondary">' . $badge . '</span>'; } } else { echo '<span class="badge badge--secondary">Siemens</span><span class="badge badge--secondary">Bosch</span>'; } ?> </p> </div> </a> <a href="<?php echo isset($card['link']) ? $card['link'] : '#'; ?>" class="button button--arrow">Detail</a> </article>
Copy
Copy
Edit
/* scss/modules/_card-extra.scss */ .card--extra { &:hover { .card__description { background-color: darken($primary-color, 7%); } } .card__description { background-color: $primary-color; } .card__title { color: $white-color; } .card__badge { color: rgba($white-color, 0.75); .detail__label { color: rgba($white-color, 0.75); &:hover { color: rgba($white-color, 0.75); } } } .card__event .badge { background-color: $grey-100-color; border-color: $grey-100-color; color: $default-color; } .card__icon { background-color: $grey-100-color; fill: $default-color; } }

card-outline   

Již po generace jsou domácí spotřebiče Bosch synonymem spolehlivosti a kvality pro miliony...

Proč Bosch?
Copy
Edit
<!-- components/modules/card-outline.php --> <article class="card card--outline"> <div class="card__description"> <p><?php echo isset($card_outline['description']) ? $card_outline['description'] : 'Již po generace jsou domácí spotřebiče Bosch synonymem spolehlivosti a kvality pro miliony...'; ?></p> </div> <a href="<?php echo isset($card_outline['link']) ? $card_outline['link'] : '#'; ?>" class="button button--secondary button--arrow"><?php echo isset($card_outline['button']) ? $card_outline['button'] : 'Proč Bosch?'; ?></a> </article>
Copy
Copy
Edit
/* scss/modules/_card-outline.scss */ .card--outline { &:hover { .card__description { background-color: $white-color; } } .card__description { color: rgba($default-color, 0.6); background-color: $white-color; border: 1px solid $grey-200-color; padding: 2.0625rem 1.75rem; } .button { margin-top: -1px; } }

card-success   

Nenašli jste volný termín? Nevadí! Kupte si dárkový poukaz, který má platnost až 12 měsíců.

Koupit poukaz
Copy
Edit
<!-- components/modules/card-success.php --> <article class="card card--success"> <svg class="card__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 12 20 22 4 22 4 12"></polyline><rect x="2" y="7" width="20" height="5"></rect><line x1="12" y1="22" x2="12" y2="7"></line><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path></svg> <p class="card__desc"><?php echo isset($card['desc']) ? $card['desc'] : 'Nenašli jste volný termín? Nevadí! Kupte si dárkový poukaz, který má platnost až 12 měsíců.'; ?></p> <a href="<?php echo isset($card['link']) ? $card['link'] : '#'; ?>" class="button button--arrow button--success">Koupit poukaz</a> </article>
Copy
Copy
Edit
/* scss/modules/_card-success.scss */ .card--success { @extend .alert.alert--success; padding: 2rem; position: relative; .card__icon { fill: $white-color; margin: 0 0 1rem 0; width: 40px; height: 40px; top: -1.5rem; right: 2rem; position: absolute; } .card__desc { margin-bottom: 1.25rem; } }

card-photo   

Copy
Edit
<!-- components/modules/card-photo.php --> <a class="card__photo" href="./img/gallery/tmp.jpg" title="Lorem ipsum dolor"> <img src="./img/gallery/tmp.jpg" alt=""> </a>
Copy
Copy
Edit
/* scss/modules/_card-photo.scss */ .card__photo { margin: 0 0 2rem 0; width: 100%; height: 250px; overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; img { width: 100%; height: 100%; object-fit: cover; display: block; } @include media-breakpoint-down(md) { height: 300px; } @include media-breakpoint-down(sm) { margin-left: auto; margin-right: auto; max-width: 100%; width: 400px; height: 380px; } @include media-breakpoint-down(xs) { width: 300px; height: 280px; } }

card-voucher   

Voucher pro 2 osoby - ukázkové vaření se spotřebiči Bosch

2 600 Kč

Koupit
Copy
Edit
<!-- components/modules/card-voucher.php --> <article class="card card--voucher"> <div class="card__cover"> <img src="<?php echo isset($card['image']) ? $card['image'] : './img/events/1.jpg'; ?>" class="card__image" alt=""> </div> <div class="card__description"> <h3 class="card__title"><?php echo isset($card['title']) ? $card['title'] : 'Voucher pro 2 osoby - ukázkové vaření se spotřebiči Bosch'; ?></h3> <div class="row justify-content-between"> <div class="col"> <p class="card__price"><?php echo isset($card['price']) ? $card['price'] : '2 600 Kč'; ?></p> </div> <div class="col-auto"> <button type="button" class="link" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> <svg class="link__icon" enable-background="new 0 0 85 85" height="16" version="1.1" viewBox="0 0 85 85" width="16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentColor"><path d="M42.5,0.003C19.028,0.003,0,19.031,0,42.503s19.028,42.5,42.5,42.5S85,65.976,85,42.503S65.972,0.003,42.5,0.003z M42.288,66.27c0,0-1.972,1.311-3.32,1.305c-0.12,0.055-0.191,0.087-0.191,0.087l0.003-0.087c-0.283-0.013-0.568-0.053-0.855-0.125 l-0.426-0.105c-2.354-0.584-3.6-2.918-3.014-5.271l3.277-13.211l1.479-5.967c1.376-5.54-4.363,1.178-5.54-1.374 c-0.777-1.687,4.464-5.227,8.293-7.896c0,0,1.97-1.309,3.319-1.304c0.121-0.056,0.192-0.087,0.192-0.087l-0.005,0.087 c0.285,0.013,0.57,0.053,0.857,0.124l0.426,0.106c2.354,0.584,3.788,2.965,3.204,5.318l-3.276,13.212l-1.482,5.967 c-1.374,5.54,4.27-1.204,5.446,1.351C51.452,60.085,46.116,63.601,42.288,66.27z M50.594,24.976 c-0.818,3.295-4.152,5.304-7.446,4.486c-3.296-0.818-5.305-4.151-4.487-7.447c0.818-3.296,4.152-5.304,7.446-4.486 C49.403,18.346,51.411,21.68,50.594,24.976z"/></svg> <span>Co obsahuje?</span> </button> </div> </div> </div> <a href="#" class="button button--arrow">Koupit</a> </article>
Copy
Copy
Edit
/* scss/modules/_card-voucher.scss */ .card--voucher { &:hover { .card__description { background-color: $grey-100-color; } } } .card__price { color: $grey-400-color; font-size: 1.125rem; }

card-disabled   

Copy
Edit
<!-- components/modules/card-disabled.php --> <article class="card card--disabled"> <a href="<?php echo isset($card['link']) ? $card['link'] : '#'; ?>"> <div class="card__cover"> <img src="<?php echo isset($card['image']) ? $card['image'] : './img/events/1.jpg'; ?>" class="card__image" alt=""> <time class="card__date" datetime="<?php echo isset($card['date']) ? $card['date'] : '2020-03-06 16:00:00'; ?>"> <span class="date__day">6.</span> <span class="date__month">březen</span> <span class="date__time">středa &mdash; 16:00</span> </time> </div> <div class="card__description"> <h3 class="card__title"><?php echo isset($card['title']) ? $card['title'] : 'Kulinářská show se spotřebiči Bosch a Siemens'; ?></h3> <p class="card__event"><?php echo isset($card['event']) ? $card['event'] : 'Předváděcí vaření'; ?></p> <p class="card__badge"> <?php if (isset($card['badge'])) { foreach ($card['badge'] as $badge) { echo '<span class="badge badge--secondary">' . $badge . '</span>'; } } else { echo '<span class="badge badge--secondary">Siemens</span><span class="badge badge--secondary">Bosch</span>'; } ?> </p> </div> </a> <a href="<?php echo isset($card['link']) ? $card['link'] : '#'; ?>" class="button button--red"> <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg> Zrušeno </a> </article>
Copy
Copy
Edit
/* scss/modules/_card-disabled.scss */ .card--disabled { .card__cover { &::before { background-color: rgba($black-color,0.2); } .card__image { filter: grayscale(1); } .card__date { color: $grey-500-color; } } .card__description { .badge.badge--primary { border-color: $grey-300-color; background-color: $grey-300-color; } .card__icon { fill: $white-color; background-color: $grey-300-color; } .card__title { color: $grey-400-color; } } }

cart__steps   

Výběr platby a údaje
2 Shrnutí
Copy
Edit
<!-- components/modules/cart__steps.php --> <div class="steps"> <div class="container"> <div class="row row--steps"> <div class="col"> <div class="step <?php if ($current_step == 1) echo 'is--active'; ?>"> <span class="step__number"> <?php if ($current_step == 1) { echo '1'; } else { echo '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>'; } ?> </span> <span class="step__title">Výběr platby a údaje</span> </div> </div> <div class="col"> <div class="step step--last <?php if ($current_step == 2) echo 'is--active'; ?>"> <span class="step__number">2</span> <span class="step__title">Shrnutí</span> </div> </div> </div> </div> </div>
Copy
Copy
Edit
/* scss/modules/_cart__steps.scss */ .steps { background-color: $white-color; margin: 0 $doc-offset; padding: 1.5rem 0 3.25rem; @include media-breakpoint-down(md) { padding: 1.25rem 0 2.5rem; } @include media-breakpoint-down(sm) { padding-bottom: 2.125rem; } @include media-breakpoint-down(xs) { $doc-offset: 20px; margin: 0 $doc-offset; padding: 1.25rem 0 2rem; } .container { position: relative; } } .step { text-align: center; &::before { content: ''; background-color: $grey-200-color; width: 50%; height: 1px; display: block; top: 22px; right: 0; position: absolute; z-index: 0; @include media-breakpoint-down(sm) { top: 19px; } } &.step--last::before { right: auto; left: 0; } .step__number { color: $grey-300-color; border: 1px solid $grey-200-color; background-color: $white-color; font-size: 1.125rem; font-weight: 400; text-align: center; line-height: 43px; vertical-align: middle; border-radius: 50%; margin: 0 auto 1.125rem; display: block; width: 45px; height: 45px; position: relative; z-index: 10; @include media-breakpoint-down(sm) { line-height: 36px; margin: 0 auto 1.125rem; width: 38px; height: 38px; } @include media-breakpoint-down(xs) { } } .step__title { color: $grey-300-color; font-family: $font-family-headings; font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; line-height: 1.15; text-align: center; margin: 0; display: block; @include media-breakpoint-down(sm) { font-size: 0.875rem; line-height: 1.125; } } &.is--active { .step__number { color: $primary-color; } .step__title { color: $grey-500-color; } } }

cart__minicheckout   

Copy
Edit
<!-- components/modules/cart__minicheckout.php --> <aside class="mini-checkout"> <h3 class="mt-0">Vaše objednávka</h3> <table class="mini-checkout__table"> <tbody> <tr class="mini-checkout__item"> <td> <h3 class="mini-checkout__title">Kulinářská show se spotřebiči Bosch a Siemens</h3> <p class="mini-checkout__desc"> <svg class="mini-checkout__icon" data-toggle="tooltip" data-placement="top" title="Kurz vaření" enable-background="new 0 0 48 48" height="14" version="1.1" viewBox="0 0 48 48" width="14" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Expanded"><g><g><path d="M36,48H12c-0.522,0-0.957-0.402-0.997-0.923L9.07,21.946C5.095,21.484,2,18.097,2,14c0-4.419,3.678-8.151,8.032-8.151 c0.91,0,1.803,0.177,2.636,0.52C14.072,2.509,18.439,0,24,0c5.224,0,8.878,2.112,11.14,6.45c0.887-0.396,1.848-0.602,2.828-0.602 C42.322,5.849,46,9.581,46,14c0,4.097-3.095,7.484-7.07,7.946l-1.933,25.131C36.957,47.598,36.522,48,36,48z M12.926,46h22.147 l1.929-25.077C37.043,20.402,37.478,20,38,20c3.309,0,6-2.691,6-6c0-3.625-3.179-6.151-6.032-6.151 c-0.982,0-1.899,0.274-2.724,0.817c-0.245,0.161-0.551,0.207-0.832,0.123c-0.282-0.083-0.513-0.285-0.632-0.555 C31.898,3.981,28.791,2,24,2c-5.157,0-9.059,2.415-9.71,6.009c-0.06,0.33-0.281,0.608-0.59,0.74 c-0.308,0.134-0.663,0.102-0.943-0.083c-0.825-0.543-1.742-0.817-2.724-0.817C7.179,7.849,4,10.375,4,14c0,3.309,2.691,6,6,6 c0.522,0,0.957,0.402,0.997,0.923L12.926,46z"></path></g><g><path d="M36.625,40h-25.25c-0.552,0-1-0.447-1-1s0.448-1,1-1h25.25c0.552,0,1,0.447,1,1S37.177,40,36.625,40z"></path></g><g><path d="M19,40c-0.552,0-1-0.447-1-1v-8c0-0.553,0.448-1,1-1s1,0.447,1,1v8C20,39.553,19.552,40,19,40z"></path></g><g><path d="M24,40c-0.552,0-1-0.447-1-1V29c0-0.553,0.448-1,1-1s1,0.447,1,1v10C25,39.553,24.552,40,24,40z"></path></g><g><path d="M29,40c-0.552,0-1-0.447-1-1v-8c0-0.553,0.448-1,1-1s1,0.447,1,1v8C30,39.553,29.552,40,29,40z"></path></g></g></g></svg> 25. 6. 2020, 19:30 </p> </td> <td class="text-right mini-checkout__price"> 2&nbsp;590&nbsp;Kč <p class="mini-checkout__count">1&nbsp;ks</p> </td> </tr> </tbody> <tbody> <tr class="mini-checkout__setting"> <td> <h3 class="mini-checkout__label">Platba:</h3> <span class="mini-checkout__payment"> <span class="mini-checkout__payment-icon"><img src="./img/icons/pay-card.png" alt="Visa, Master card"></span> <span class="mini-checkout__payment-name">Kartou online</span> </span> </td> <td class="text-right mini-checkout__price"> <span class="text-green">Zdarma</span> </td> </tr> <tr class="mini-checkout__summary"> <td class="text-muted">Celkem bez DPH:</td> <td class="text-muted text-right">2&nbsp;046&nbsp;Kč</td> </tr> <tr class="mini-checkout__summary summary--vat"> <td>Celkem k úhradě:</td> <td class="text-right"><strong>2&nbsp;590&nbsp;Kč</strong></td> </tr> </tbody> </table> </aside>
Copy
Copy
Edit
/* scss/modules/_cart__minicheckout.scss */ .mini-checkout { padding: 0.675rem 0; top: 21px; position: sticky; } .mini-checkout__table { margin-bottom: 1.5rem; td { padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: 1rem; border-top: 1px solid $grey-200-color; border-bottom: none; background-color: $white-color; } } /* item */ .mini-checkout__item { vertical-align: top; } .mini-checkout__title { @extend h6; color: $default-color; margin: 0.2rem 0 0.125rem 0; } .mini-checkout__desc { color: $grey-400-color; font-size: 0.875rem; line-height: 1.35; margin: 0; } .mini-checkout__count { color: $grey-400-color; font-size: 0.875rem; line-height: 1.25; margin: 0; } .mini-checkout__icon { fill: $grey-400-color; margin: 0.125rem 0.25rem 0 0; vertical-align: top; width: 15px; height: 15px; } /* payment */ .mini-checkout__setting { td { /*background-color: rgba($white-color, 0.35);*/ vertical-align: bottom; } } .mini-checkout__label { color: $grey-500-color; font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; text-transform: uppercase; margin: 0; } .mini-checkout__payment-icon { width: 70px; max-width: 100%; display: inline-block; img { max-width: 100% } } .mini-checkout__payment-name { display: inline-block; } /* summary */ .mini-checkout__summary { td { color: $grey-500-color; background-color: $grey-200-color; padding-bottom: 0.125rem; } &.summary--vat td { color: $default-color; font-size: 1.25rem; border-top: none; padding-top: 0; padding-bottom: 1.15rem; } }

newsletter   

Copy
Edit
<!-- components/modules/newsletter.php --> <aside class="newsletter"> <fieldset class="container"> <div class="row"> <div class="col-sm"> <h3 class="newsletter__tit">Nenechte si utéct naše novinky!</h3> <p class="newsletter__desc">Přejete-li si dostávat naše novinky, stačí vyplnit váš e-mail.</p> </div> <div class="col-lg-5 col-md-7"> <div class="row no-gutters"> <div class="col"> <input type="email" class="form-control" placeholder="Vaše emailová adresa" name="newsletter_email"> </div> <div class="col-auto"> <button class="button" type="button">Odeslat</button> </div> </div> <p class="newsletter__confirm">Odesláním souhlasíte se <a href="#" target="_blank">zpracováním osobních údajů</a>.</p> </div> </div> </fieldset> </aside>
Copy
Copy
Edit
/* scss/modules/_newsletter.scss */ .newsletter { color: $white-color; background-color: $primary-color; border-left: $doc-offset solid $primary-color; border-right: $doc-offset solid $primary-color; margin-left: $doc-offset; padding: 3rem $doc-offset 3rem 0; @include media-breakpoint-down(sm) { padding: 2.25rem $doc-offset 2rem 0; } @include media-breakpoint-down(xs) { $doc-offset: 20px; border: none; margin-left: $doc-offset; padding: 1.75rem 25px 1.5rem 25px; } fieldset { background: none; margin: 0 auto; padding: 0 15px; @include media-breakpoint-down(xs) { padding: 0; } } .form-control { border-color: $white-color; &:focus { border-color: $white-color; } } /*label { font-family: Muli,sans-serif; line-height: 1.625; color: rgba(31,33,37,.65); font-size: .8125rem; display: inline-block; margin: 0 0 .6125rem 0; } input[name=gdpr] { position: relative; top: 2px; left: -1px; }*/ } .status-message { color: $white-color; font-size: 0.8125rem; font-style: italic; line-height: 1.25; margin-top: 1rem; padding: 0.375rem 0.5rem; display: none; &.error { background-color: $red-color; display: block; } &.success { background-color: $green-color; display: block; } } .newsletter__tit { @extend .h2; color: $white-color; margin: 0 0 0.25rem; @include media-breakpoint-down(sm) { margin-bottom: 1.25rem; } } .newsletter__desc { color: rgba($white-color, 0.8); margin: 0; @include media-breakpoint-down(md) { display: none; } } .newsletter__confirm { color: rgba($default-color, 0.65); font-size: 0.8125rem; margin: 0.4rem 0 0 0; a { color: rgba($default-color, 0.65); &:hover { color: $default-color; text-decoration: none; } } }

pages   

Copy
Edit
<!-- components/modules/pages.php --> <nav class="pages" aria-label="Page navigation"> <ul class="pages__list"> <li class="pages__item"> <a class="button button--white" href="#" aria-label="Předchozí"> <svg enable-background="new 0 0 32 32" height="11px" version="1.1" viewBox="0 0 32 32" width="11px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path clip-rule="evenodd" d="M31.106,15H3.278l8.325-8.293 c0.391-0.391,0.391-1.024,0-1.414c-0.391-0.391-1.024-0.391-1.414,0l-9.9,9.899c-0.385,0.385-0.385,1.029,0,1.414l9.9,9.9 c0.391,0.391,1.024,0.391,1.414,0c0.391-0.391,0.391-1.024,0-1.414L3.278,17h27.828c0.552,0,1-0.448,1-1 C32.106,15.448,31.658,15,31.106,15z" fill="currentColor" fill-rule="evenodd"/></svg> </a> </li> <li class="pages__item"><a class="button">1</a></li> <li class="pages__item"><a class="button button--secondary" href="#">2</a></li> <li class="pages__item"><a class="button button--secondary" href="#">3</a></li> <li class="pages__item px-3">&hellip;</li> <li class="pages__item"><a class="button button--secondary" href="#">9</a></li> <li class="pages__item"> <a class="button button--white" href="#" aria-label="Další"> <svg enable-background="new 0 0 32 32" height="11px" version="1.1" viewBox="0 0 32 32" width="11px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path clip-rule="evenodd" d="M32,16.009c0-0.267-0.11-0.522-0.293-0.714 l-9.899-9.999c-0.391-0.395-1.024-0.394-1.414,0c-0.391,0.394-0.391,1.034,0,1.428l8.193,8.275H1c-0.552,0-1,0.452-1,1.01 s0.448,1.01,1,1.01h27.586l-8.192,8.275c-0.391,0.394-0.39,1.034,0,1.428c0.391,0.394,1.024,0.394,1.414,0l9.899-9.999 C31.894,16.534,31.997,16.274,32,16.009z" fill="currentColor" fill-rule="evenodd"/></svg> </a> </li> </ul> </nav>
Copy
Copy
Edit
/* scss/modules/_pages.scss */ .pages { margin: 4rem 0 1rem 0; } .pages__list { text-align: center; margin: 0; padding: 0; .pages__item { margin: 0; padding: 0; display: inline-block; &::before { display: none; } } }

loader   

Načítání…

Vaše objednávka se odesílá. Vyčkejte prosím…

Copy
Edit
<!-- components/modules/loader.php --> <div class="overlayload"> <div class="overlayload__info"> <div class="overlayload__icon spinner-border" role="status"><span class="sr-only">Načítání…</span></div> <p class="overlayload__text">Vaše objednávka se odesílá. Vyčkejte prosím…</p> </div> </div>
Copy
Copy
Edit
/* scss/modules/_loader.scss */ .overlayload { background-color: rgba($secondary-color, 0.9); display: none; width: 100vw; height: 100vh; top: 0; left: 0; position: fixed; z-index: 999; &.show { display: block; } } .overlayload__info { padding: 0 2rem; width: 600px; max-width: 100%; text-align: center; transform: translateX(-50%); top: 30vh; left: 50%; position: absolute; } .overlayload__icon { border-width: 5px; color: rgba($white-color, 0.85); margin-bottom: 2.75rem; width: 100px; height: 100px; } .overlayload__icon::before { content: ""; border: 5px solid rgba($white-color, 0.15); border-radius: 50%; display: block; width: calc(100% + 10px); height: calc(100% + 10px); top: -5px; left: -5px; position: absolute; z-index: 0; } .overlayload__text { font-size: 0.875rem; font-weight: 400; line-height: 1rem; color: rgba($white-color, 0.475); margin-bottom: 2rem; }