diff --git a/web/src/components/blocks/PageSection.tsx b/web/src/components/blocks/PageSection.tsx
index 6e96689..0bc04c3 100644
--- a/web/src/components/blocks/PageSection.tsx
+++ b/web/src/components/blocks/PageSection.tsx
@@ -59,7 +59,7 @@ export const PageSectionNavigationBlock = ({
return (
Meld deg på vårt nyhetsbrev og hold deg oppdatert på arrangementer og siste nytt!
diff --git a/web/src/components/layout/header.module.scss b/web/src/components/layout/header.module.scss
index b4fd736..871030c 100644
--- a/web/src/components/layout/header.module.scss
+++ b/web/src/components/layout/header.module.scss
@@ -221,7 +221,8 @@
.searchIcon {
position: absolute;
right: 1rem;
- bottom: .6rem;
+ top: 50%;
+ transform: translateY(-50%);
}
@media (max-width: 1200px) {
diff --git a/web/src/components/search/searchContainer.module.scss b/web/src/components/search/searchContainer.module.scss
index 5e76175..e3d46cc 100644
--- a/web/src/components/search/searchContainer.module.scss
+++ b/web/src/components/search/searchContainer.module.scss
@@ -32,7 +32,8 @@
.searchIcon {
position: absolute;
right: 1.2rem;
- bottom: .6rem;
+ top: 50%;
+ transform: translateY(-50%);
}
.resultItem {
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
index 487d8ed..caac937 100644
--- a/web/src/css/base.scss
+++ b/web/src/css/base.scss
@@ -131,12 +131,16 @@ input[type="text"] {
font-family: inherit;
font-size: var(--font-size-body);
font-weight: 500;
+ text-box-trim: trim-both;
+ text-box-edge: cap alphabetic;
transition: opacity var(--transition-easing);
&::placeholder {
font-weight: 400;
color: currentColor;
opacity: .6;
+ text-box-trim: trim-both;
+ text-box-edge: cap alphabetic;
}
&:focus, &:hover {
@@ -368,4 +372,4 @@ select {
.event-lead {
max-width: var(--size-width-lead);
margin: var(--spacing-l) auto;
-}
\ No newline at end of file
+}
diff --git a/web/src/css/button.scss b/web/src/css/button.scss
index 34d6e7c..b24dd3c 100644
--- a/web/src/css/button.scss
+++ b/web/src/css/button.scss
@@ -24,6 +24,26 @@ button,
text-decoration: none;
}
+ // Trim label leading for consistent text centering, re-add it as padding to keep height
+ @supports (text-box-trim: trim-both) {
+ & > span:not(:has(svg)) { // labels, not the icon (also a child
)
+ text-box-trim: trim-both;
+ text-box-edge: cap alphabetic;
+ }
+
+ &:has(svg) { // icon anchors height → re-add on the button
+ --trim-comp: 0.25em; // half of the leading removed
+ padding-block: calc(var(--spacing-xs) + var(--trim-comp));
+ &.cta { padding-block: calc(var(--spacing-xs) * 1.5 + var(--trim-comp)); }
+ &.tertiary { padding-block: calc(.2rem + var(--trim-comp)); }
+ &.toggler { padding-block: calc(.25rem + var(--trim-comp)); }
+ }
+
+ &.toggler:not(:has(svg)) { padding-block: calc(.25rem); } // icon anchors height
+
+ &:not(:has(svg)):not(.toggler) > span { padding-block: 0.4em; } // nothing → on the label
+ }
+
&.cta {
padding: calc(var(--spacing-xs)*1.5) calc(var(--spacing-s)*1.5);
display: inline-flex;
@@ -106,4 +126,4 @@ button,
}
}
}
-}
\ No newline at end of file
+}