From dfe57cd7389e0496f8c77654d5f73c7926eb674a Mon Sep 17 00:00:00 2001 From: dakur Date: Mon, 20 Jan 2025 20:23:49 +0100 Subject: [PATCH] button--primary -> action--primary/lg --- footer.php | 4 +- frontend/src/styles/components/action.scss | 54 ++++++++++++++----- frontend/src/styles/components/buttons.scss | 44 --------------- header.php | 2 +- template-parts/content/content-akce.php | 2 +- template-parts/content/content-english.php | 2 +- .../content/content-hlavni-stranka.php | 2 +- .../content/content-jak-to-u-nas-funguje.php | 2 +- .../content/content-jedu-poprve.php | 2 +- .../content/content-nase-uspechy.php | 2 +- template-parts/content/content-podpor-nas.php | 2 +- 11 files changed, 52 insertions(+), 66 deletions(-) diff --git a/footer.php b/footer.php index 27e156d..8160350 100644 --- a/footer.php +++ b/footer.php @@ -77,7 +77,7 @@ function runWhenAvailable(selector, callback) { } runWhenAvailable('.ec-v-form-submit button', (el) => { - el.classList.add('button', 'button--primary'); + el.classList.add('action', 'action--primary', 'action--lg'); }); @@ -130,7 +130,7 @@ class="gcse-searchbox-only" window.addEventListener('load', function () { document.getElementById('gsc-i-id2').placeholder = 'Prohledat web'; const searchButtonEl = document.getElementById('___gcse_1').querySelector('button.gsc-search-button'); - searchButtonEl.classList.add('button', 'button--primary'); + searchButtonEl.classList.add('action', 'action--primary', 'action--lg'); searchButtonEl.innerHTML = 'Hledat'; }); diff --git a/frontend/src/styles/components/action.scss b/frontend/src/styles/components/action.scss index befc1d2..453d20d 100644 --- a/frontend/src/styles/components/action.scss +++ b/frontend/src/styles/components/action.scss @@ -3,28 +3,28 @@ // Primary action, so called "CTA". .action--primary { - display: inline-flex; - align-items: center; - gap: 0.25rlh; border-radius: 2em; text-decoration: none; + background-color: var(--hb-colors-emphasizing); + color: var(--hb-colors-default-background) !important; // overwrite global link style transition: background-color 200ms ease-in-out, color 200ms ease-in-out; - - padding: - 0.25rlh - 0.5rlh - calc(0.25rlh - 0.15rem); - - background-color: var(--hb-colors-emphasizing); - color: var(--hb-colors-default-background) !important; // overwrite global link style } .action--primary:hover { background-color: #{color.adjust(settings.$colors-emphasizing, $lightness: -10%)}; color: inherit; } -.action--primary.action--paw::before { +.action--primary:not(.action--lg) { + display: inline-flex; + align-items: center; + gap: 0.25rlh; + padding: + 0.25rlh + 0.5rlh + calc(0.25rlh - 0.15rem); +} +.action--primary:not(.action--lg).action--paw::before { content: ""; display: block; height: 0.7em; @@ -37,6 +37,36 @@ mask-repeat: no-repeat; } +.action--primary.action--lg { + display: inline-block; + border: none; // ? + padding-inline: 1rlh calc(1rlh + 5px); + padding-block: calc(0.5rlh + 0.25em) 0.5rlh; + position: relative; + text-transform: uppercase; + //box-shadow: 4px 2px 8px 0 var(--hb-colors-default-background); // or 0 0 10px 3px +} +@media (min-width: 23.001em) { + .action--primary.action--lg { + padding-inline: 2rlh calc(2rlh + 5px); + } +} +@media (min-width: 20.001em) { + .action--primary.action--lg::after { + content: ""; + display: inline-block; + position: absolute; + right: 25px; + top: calc(50% - 9px); + width: 10px; + height: 17px; + background-image: url("../../../images/icons/icon-arrow.svg"); + background-repeat: no-repeat; + background-size: auto 100%; + } +} + + // When there are more possibilities to interact with. .action--possible {} // @todo: will be moved from .button--secondary diff --git a/frontend/src/styles/components/buttons.scss b/frontend/src/styles/components/buttons.scss index aaacab8..96b5759 100644 --- a/frontend/src/styles/components/buttons.scss +++ b/frontend/src/styles/components/buttons.scss @@ -1,11 +1,6 @@ @use "sass:color"; @use "../imports/settings"; -@mixin buttons-primary-hoverEffect () { - background-color: color.adjust(settings.$colors-emphasizing, $lightness: -10%); - color: var(--hb-colors-default-background); -} - // @todo: move to .action .button { @@ -18,51 +13,12 @@ color 200ms ease-in-out; } -.button--primary, .button--secondary { padding-block-start: calc(0.5rlh + 0.25em); padding-block-end: 0.5rlh; } -// used for call to action buttons/links - these should lead you to a concrete destination -// @todo: rename to action - -.button--primary { - background-color: var(--hb-colors-emphasizing); - border: none; // ? - color: var(--hb-colors-default-background) !important; // overwrite global link style - padding-inline-start: 1rlh; - padding-inline-end: calc(1rlh + 5px); - position: relative; - text-transform: uppercase; - //box-shadow: 4px 2px 8px 0 var(--hb-colors-default-background); // or 0 0 10px 3px -} -@media (min-width: 23.001em) { - .button--primary { - padding-inline-start: 2rlh; - padding-inline-end: calc(2rlh + 5px); - } -} -.button--primary:hover { - @include buttons-primary-hoverEffect(); -} -@media (min-width: 20.001em) { - .button--primary::after { - content: ""; - display: inline-block; - position: absolute; - right: 25px; - top: calc(50% - 9px); - width: 10px; - height: 17px; - background-image: url("../../../images/icons/icon-arrow.svg"); - background-repeat: no-repeat; - background-size: auto 100%; - } -} - - // option buttons/links - these should give you an option where you can go; used typically for in-block buttons/links // @todo rename to option diff --git a/header.php b/header.php index 0703936..ded0868 100644 --- a/header.php +++ b/header.php @@ -53,7 +53,7 @@ class="gcse-searchbox-only" window.addEventListener('load', function () { document.getElementById('gsc-i-id1').placeholder = 'Prohledat tento web'; const searchButtonEl = document.getElementById('___gcse_0').querySelector('button.gsc-search-button'); - searchButtonEl.classList.add('button', 'button--primary'); + searchButtonEl.classList.add('action', 'action--primary', 'action--lg'); searchButtonEl.innerHTML = 'Hledat'; }); diff --git a/template-parts/content/content-akce.php b/template-parts/content/content-akce.php index d3caf22..0798ff3 100644 --- a/template-parts/content/content-akce.php +++ b/template-parts/content/content-akce.php @@ -132,7 +132,7 @@ function hb_detail_application(EventDC $event, string $applicationUrlTemplate) ?> isRegistrationRequired): ?> diff --git a/template-parts/content/content-english.php b/template-parts/content/content-english.php index 5909fc1..02ceb38 100644 --- a/template-parts/content/content-english.php +++ b/template-parts/content/content-english.php @@ -46,7 +46,7 @@
- + international@brontosaurus.cz
diff --git a/template-parts/content/content-hlavni-stranka.php b/template-parts/content/content-hlavni-stranka.php index 8c505af..351570e 100644 --- a/template-parts/content/content-hlavni-stranka.php +++ b/template-parts/content/content-hlavni-stranka.php @@ -98,7 +98,7 @@ function hb_banner(): ?\stdCLass zobrazit další - + více informací o akcích
diff --git a/template-parts/content/content-jak-to-u-nas-funguje.php b/template-parts/content/content-jak-to-u-nas-funguje.php index 1c43af3..8dba818 100644 --- a/template-parts/content/content-jak-to-u-nas-funguje.php +++ b/template-parts/content/content-jak-to-u-nas-funguje.php @@ -32,7 +32,7 @@ - + Chci na akci diff --git a/template-parts/content/content-jedu-poprve.php b/template-parts/content/content-jedu-poprve.php index 2c61085..41373ea 100644 --- a/template-parts/content/content-jedu-poprve.php +++ b/template-parts/content/content-jedu-poprve.php @@ -79,7 +79,7 @@
- + Vybrat si akci
diff --git a/template-parts/content/content-nase-uspechy.php b/template-parts/content/content-nase-uspechy.php index 6d9c483..661517a 100644 --- a/template-parts/content/content-nase-uspechy.php +++ b/template-parts/content/content-nase-uspechy.php @@ -125,7 +125,7 @@ Adoptuj Brontosaura a podpoř naši péči přírodu a památky.

- Chci adoptovat Brontosaura + Chci adoptovat Brontosaura diff --git a/template-parts/content/content-podpor-nas.php b/template-parts/content/content-podpor-nas.php index 9db9bba..0ea42a1 100644 --- a/template-parts/content/content-podpor-nas.php +++ b/template-parts/content/content-podpor-nas.php @@ -272,7 +272,7 @@ Podpoř brontosauří tradici i v dalších 50 letech! Děkujeme. - + Chci podpořit Brontosaura