button--primary -> action--primary/lg

hnuti-brontosaurus · Jan 20, 2025 · dfe57cd · dfe57cd
1 parent 2014366
commit dfe57cd
Show file tree

Hide file tree

Showing 11 changed files with 52 additions and 66 deletions.
diff --git 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');
 			});
 		</script>
 	</div>
@@ -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';
 					});
 				</script>

diff --git 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
@@ -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
@@ -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';
 						});
 					</script>

diff --git 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)
 ?>
 <?php if ($event->isRegistrationRequired): ?>
 	<a
-		class="registration__actionButton button button--primary"
+		class="registration__actionButton action action--primary action--lg"
 		href="<?php echo $url ?>"
 		rel="noopener"
 	>

diff --git a/template-parts/content/content-english.php b/template-parts/content/content-english.php
@@ -46,7 +46,7 @@
 
 		<div class="english__card hb-p-4">
 			<div>
-				<a class="button button--primary hb-tt-n" href="mailto:[email protected]">
+				<a class="action action--primary action--lg hb-tt-n" href="mailto:[email protected]">
 					[email protected]
 				</a>
 			</div>

diff --git 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ší
 		</a>
 
-		<a class="action hb-d-ib hb-fs-xs hb-td-u" href="/dobrovolnicke-akce#co-zazijes-na-dobrovolnicke-akci">
+		<a class="hb-d-ib hb-fs-xs hb-td-u" href="/dobrovolnicke-akce#co-zazijes-na-dobrovolnicke-akci">
 			více informací o akcích
 		</a>
 	</div>

diff --git 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 @@
 			</li>
 		</ul>
 
-		<a class="button button--primary [ hb-d-b hb-mi-auto hb-mw-mc ]" href="/dobrovolnicke-akce">
+		<a class="[ action action--primary action--lg ] [ hb-d-b hb-mi-auto hb-mw-mc ]" href="/dobrovolnicke-akce">
 			Chci na akci
 		</a>
 	</article>

diff --git a/template-parts/content/content-jedu-poprve.php b/template-parts/content/content-jedu-poprve.php
@@ -79,7 +79,7 @@
 		</ul>
 
 		<div class="hb-ta-c">
-			<a class="button button--primary" href="/dobrovolnicke-akce?jen=jedu-poprve#obsah">
+			<a class="action action--primary action--lg" href="/dobrovolnicke-akce?jen=jedu-poprve#obsah">
 				Vybrat si akci
 			</a>
 		</div>

diff --git 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.
 			</p>
 
-			<a class="[ button button--primary ][ hb-d-b hb-mw-mc hb-mi-auto ]" href="/podpor-nas">Chci adoptovat Brontosaura</a>
+			<a class="[ action action--primary action--lg ][ hb-d-b hb-mw-mc hb-mi-auto ]" href="/podpor-nas">Chci adoptovat Brontosaura</a>
 		</div>
 	</article>
 </main>
diff --git a/template-parts/content/content-podpor-nas.php b/template-parts/content/content-podpor-nas.php
@@ -272,7 +272,7 @@
 				<strong>Podpoř brontosauří tradici i v dalších 50 letech! Děkujeme.</strong>
 			</div>
 
-			<a class="button button--primary" href="https://www.darujme.cz/darovat/525?frequency=monthly&amount=500&widget=1203034" rel="noopener noreferrer" target="_blank">
+			<a class="action action--primary action--lg" href="https://www.darujme.cz/darovat/525?frequency=monthly&amount=500&widget=1203034" rel="noopener noreferrer" target="_blank">
 				Chci podpořit Brontosaura
 			</a>
 		</div>