Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-29 20:13:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

rewrite search form in flexbox

Browse Source
This commit is contained in:
Jimmy Cai 2022-03-03 21:27:47 +00:00 committed by GitHub
parent a3d914667e
commit dfc9beaa7d
3 changed files with 30 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
assets/scss/partials/layout/search.scss
View File

@ -1,64 +1,63 @@
.search-form { .search-form {
position: relative; position: relative;
border-radius: var(--card-border-radius);
background-color: var(--card-background);
box-shadow: var(--shadow-l1);
color: var(--card-text-color-main);
width: 100%;
--button-size: 80px; --button-size: 80px;
display: flex;
overflow: hidden;
flex-direction: row;
justify-content: stretch;
gap: 0;
&.widget { &.widget {
--button-size: 60px; --button-size: 60px;
label { label {
font-size: 1.3rem; font-size: 1.3rem;
top: 10px;
} }
input { input {
font-size: 1.5rem; font-size: 1.5rem;
padding: 30px 20px 15px 20px; }
.input-wrapper {
padding: 10px 20px 15px 20px;
} }
} }
p { .input-wrapper {
position: relative; display: flex;
margin: 0; flex-direction: column;
flex-grow: 1;
gap: 5px;
padding: 15px 20px 20px 20px;
} }
label { label {
position: absolute;
top: 15px;
left: 20px;
font-size: 1.4rem; font-size: 1.4rem;
color: var(--card-text-color-tertiary); color: var(--card-text-color-tertiary);
} }
input { input {
padding: 40px 20px 20px;
border-radius: var(--card-border-radius);
background-color: var(--card-background);
box-shadow: var(--shadow-l1);
color: var(--card-text-color-main);
width: 100%;
border: 0; border: 0;
-webkit-appearance: none; -webkit-appearance: none;
transition: box-shadow 0.3s ease;
font-size: 1.8rem; font-size: 1.8rem;
&:focus { &:focus {
outline: 0; outline: 0;
box-shadow: var(--shadow-l2);
} }
} }
button { button {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: var(--button-size); width: var(--button-size);
cursor: pointer; cursor: pointer;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
padding: 0 10px; padding: 0 10px;
&:focus { &:focus {

4
layouts/page/search.html
View File

@ -6,10 +6,10 @@
{{ end }} {{ end }}
{{ define "main" }} {{ define "main" }}
<form action="{{ .Permalink }}" class="search-form"{{ with .OutputFormats.Get "json" -}} data-json="{{ .Permalink }}"{{- end }}> <form action="{{ .Permalink }}" class="search-form"{{ with .OutputFormats.Get "json" -}} data-json="{{ .Permalink }}"{{- end }}>
<p> <div class="input-wrapper">
<label>{{ T "search.title" }}</label> <label>{{ T "search.title" }}</label>
<input name="keyword" placeholder="{{ T `search.placeholder` }}" /> <input name="keyword" placeholder="{{ T `search.placeholder` }}" />
</p> </div>
<button title="{{ T `search.title` }}"> <button title="{{ T `search.title` }}">
{{ partial "helper/icon" "search" }} {{ partial "helper/icon" "search" }}

11
layouts/partials/widget/search.html
View File

@ -2,14 +2,13 @@
{{- if $query -}} {{- if $query -}}
{{- $searchPage := index $query 0 -}} {{- $searchPage := index $query 0 -}}
<form action="{{ $searchPage.RelPermalink }}" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}> <form action="{{ $searchPage.RelPermalink }}" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}>
<p> <div class="input-wrapper">
<label>{{ T "search.title" }}</label> <label>{{ T "search.title" }}</label>
<input name="keyword" required placeholder="{{ T `search.placeholder` }}" /> <input name="keyword" required placeholder="{{ T `search.placeholder` }}" />
</div>
<button title="{{ T `search.title` }}"> <button title="{{ T `search.title` }}">
{{ partial "helper/icon" "search" }} {{ partial "helper/icon" "search" }}
</button> </button>
</p>
</form> </form>
{{- else -}} {{- else -}}
{{- warnf "Search page not found. Create a page with layout: search." -}} {{- warnf "Search page not found. Create a page with layout: search." -}}