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

Add searchbar styles

Browse Source
This commit is contained in:
Jakob Scheid
2026-05-06 20:37:32 +02:00
parent 4f8240457c
commit a4bc7698c7
2 changed files with 41 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/search/components/Searchbar.vue
+41 -1
View File
@@ -3,4 +3,44 @@
<input type="search" name="search" placeholder="Search..." required />
<button type="submit" class="search-button">Search</button>
</div>
</template>
</template>
<style>
.search-wrapper {
--submit-button-padding-y: 8px;
--submit-button-content-height: 18px;
--padding: 4px;
display: flex;
align-items: center;
width: 80%;
border: 1.5px solid #ccc;
box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25);
border-radius: calc(var(--submit-button-content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
padding: var(--padding);
padding-left: calc(var(--submit-button-content-height) + var(--padding));
}
.search-wrapper input {
border: none;
outline: none;
width: 100%;
font-size: 1rem;
background: transparent;
}
.search-button {
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;
padding: var(--submit-button-padding-y) 20px;
background: #4562BE;
color: white;
cursor: pointer;
white-space: nowrap;
}
.search-button:hover {
background: #374FA5;
}
</style>
src/styles/main.css
-38
View File
@@ -12,44 +12,6 @@ form {
width: 100%;
}
.search-wrapper {
--submit-button-padding-y: 8px;
--submit-button-content-height: 18px;
--padding: 4px;
display: flex;
align-items: center;
width: 80%;
border: 1.5px solid #ccc;
box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25);
border-radius: calc(var(--submit-button-content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
padding: var(--padding);
padding-left: calc(var(--submit-button-content-height) + var(--padding));
}
.search-wrapper input {
border: none;
outline: none;
width: 100%;
font-size: 1rem;
background: transparent;
}
.search-button {
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;
padding: var(--submit-button-padding-y) 20px;
background: #4562BE;
color: white;
cursor: pointer;
white-space: nowrap;
}
.search-button:hover {
background: #374FA5;
}
footer{
text-align: center;
margin-top: 20px;