Skip to content

Commit

Permalink
style(css): Update input text styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@botmaster
botmaster committed Mar 3, 2024
1 parent 134ebf7 commit 9508edf
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 65 deletions.
4 changes: 2 additions & 2 deletions assets/scss/vendors/_tailwindcss-form.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
.form-select, .form-multiselect {
@apply block w-full rounded-md border-0 py-1.5 text-body-txt shadow-sm ring-1 ring-inset ring-polarnight-nord-3
bg-white dark:bg-polarnight-nord-0 placeholder-body-txt
focus:ring-2 focus:ring-inset focus:ring-accent sm:text-sm sm:leading-6;
focus:ring-2 focus:ring-inset focus:ring-accent text-sm leading-6;
}

input[type="text"].form-input, .input-text {
@apply block w-full rounded-md border-0 py-1.5 text-body-txt shadow-sm ring-1 ring-inset ring-polarnight-nord-3
bg-white dark:bg-polarnight-nord-0 placeholder-body-txt
focus:ring-2 focus:ring-inset focus:ring-accent sm:text-sm sm:leading-6;
focus:ring-2 focus:ring-inset focus:ring-accent text-sm leading-6;
}

input[type="checkbox"] {
Expand Down
127 changes: 64 additions & 63 deletions components/app/readings/ArticleListActionBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,77 +58,78 @@ const mapSort = computed<Record<string, string>>(() => {

<template>
<div>
<div class="flex flex-col flex-wrap gap-x-4 gap-y-1.5 md:flex-row md:items-end">
<div class="flex-grow md:mr-auto lg:max-w-80">
<div class="flex flex-col gap-x-4 gap-y-2 lg:flex-row lg:items-end lg:justify-between">
<div class="flex-grow lg:max-w-80">
<input
v-model.lazy="search" autocomplete="search" name="search" type="text"
:placeholder="t('pages.readings.filters.searchPlaceHolder')" class="form-input min-w-64"
:placeholder="t('pages.readings.filters.searchPlaceHolder')" class="form-input"
>
</div>

<Transition name="fade">
<AppLoader v-if="pending" class="m-1 text-2xl" />
</Transition>
<div class="flex flex-wrap items-end gap-x-2 gap-y-1.5">
<Transition name="fade">
<AppLoader v-if="pending" class="m-1 text-2xl" />
</Transition>
<div>
<label class="mb-0.5 block" for="selectStatus">{{ t('pages.readings.filters.statusLabel') }}</label>
<select id="selectStatus" v-model="status" class="form-select">
<option value="">
{{ t('pages.readings.filters.status.all') }}
</option>
<option value="To read">
{{ mapStatus['To read'] }}
</option>
<option value="Read">
{{ mapStatus.Read }}
</option>
<option value="Reading">
{{ mapStatus.Reading }}
</option>
<option value="Canceled">
{{ mapStatus.Canceled }}
</option>
</select>
</div>

<div>
<label class="mb-1 block" for="selectStatus">{{ t('pages.readings.filters.statusLabel') }}</label>
<select id="selectStatus" v-model="status" class="form-select">
<option value="">
{{ t('pages.readings.filters.status.all') }}
</option>
<option value="To read">
{{ mapStatus['To read'] }}
</option>
<option value="Read">
{{ mapStatus.Read }}
</option>
<option value="Reading">
{{ mapStatus.Reading }}
</option>
<option value="Canceled">
{{ mapStatus.Canceled }}
</option>
</select>
</div>

<div>
<label class="mb-1 block" for="selectType">{{ t('pages.readings.filters.typeLabel') }}</label>
<select id="selectType" v-model="type" class="form-select">
<option value="">
{{ t('pages.readings.filters.type.all') }}
</option>
<option value="Article">
{{ mapType.Article }}
</option>
<option value="Video">
{{ mapType.Video }}
</option>
<option value="Podcast">
{{ mapType.Podcast }}
</option>
</select>
</div>
<div>
<label class="mb-0.5 block" for="selectType">{{ t('pages.readings.filters.typeLabel') }}</label>
<select id="selectType" v-model="type" class="form-select">
<option value="">
{{ t('pages.readings.filters.type.all') }}
</option>
<option value="Article">
{{ mapType.Article }}
</option>
<option value="Video">
{{ mapType.Video }}
</option>
<option value="Podcast">
{{ mapType.Podcast }}
</option>
</select>
</div>

<div>
<MultiSelectTag v-model="selectedOptions" :options="tags" :placeholder="t('pages.readings.filters.tagsPlaceHolder')" />
</div>
<div>
<MultiSelectTag v-model="selectedOptions" :options="tags" :placeholder="t('pages.readings.filters.tagsPlaceHolder')" />
</div>

<div>
<label class="mb-1 block" for="selectSort">{{ t('pages.readings.sort.sortLabel') }}</label>
<select id="selectSort" v-model="sort" class="form-select">
<option value="Created time">
{{ mapSort['Created time'] }}
</option>
<option value="Last edited time">
{{ mapSort['Last edited time'] }}
</option>
<option value="Name">
{{ mapSort.Name }}
</option>
<option value="Score">
{{ mapSort.Score }}
</option>
</select>
<div>
<label class="mb-0.5 block" for="selectSort">{{ t('pages.readings.sort.sortLabel') }}</label>
<select id="selectSort" v-model="sort" class="form-select">
<option value="Created time">
{{ mapSort['Created time'] }}
</option>
<option value="Last edited time">
{{ mapSort['Last edited time'] }}
</option>
<option value="Name">
{{ mapSort.Name }}
</option>
<option value="Score">
{{ mapSort.Score }}
</option>
</select>
</div>
</div>
</div>

Expand Down

0 comments on commit 9508edf

Please sign in to comment.