Seekra/frontend
3
2
Fork 0
generated from Seekra/repository-template
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Make CSS border-radius and padding properties values dynamic

Browse Source
This commit is contained in:
Jakob Scheid
2026-05-04 19:44:15 +02:00
parent 2fa206f866
commit c6559e478d
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/static/css/main.css
+11 -4
View File
@@ -1,6 +1,7 @@
body { body {
margin: 0; margin: 0;
background-color: #ffffff; background-color: #ffffff;
font-size: 16px;
} }
.hero { .hero {
background: background:
@@ -37,12 +38,16 @@ form {
} }
.search-wrapper { .search-wrapper {
--submit-button-padding-y: 8px;
--submit-button-content-height: 18px;
--padding: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
width: 80%; width: 80%;
border: 1.5px solid #ccc; border: 1.5px solid #ccc;
border-radius: 999px; border-radius: calc(var(--submit-button-content-height) + var(--padding));
padding: 4px 4px 4px 16px; padding: var(--padding);
padding-left: calc(var(--submit-button-content-height) + var(--padding));
} }
.search-wrapper input { .search-wrapper input {
@@ -54,9 +59,11 @@ form {
} }
.search-wrapper button { .search-wrapper button {
border-radius: 999px; font-size: 1rem;
height: calc(var(--submit-button-content-height) + 2 * var(--submit-button-padding-y));
border-radius: calc(var(--submit-button-content-height) * 0.5 + var(--submit-button-padding-y));
border: none; border: none;
padding: 8px 20px; padding: var(--submit-button-padding-y) 20px;
background: #4562BE; background: #4562BE;
color: white; color: white;
cursor: pointer; cursor: pointer;