add .input class to all inputs

This commit is contained in:
Henry Jameson 2024-02-07 15:53:49 +02:00
parent c34590c439
commit d2a74ea1a2
41 changed files with 108 additions and 98 deletions

View File

@ -3,7 +3,7 @@
<textarea
ref="textarea"
v-model="announcement.content"
class="post-textarea"
class="input post-textarea"
rows="1"
cols="1"
:placeholder="$t('announcements.post_placeholder')"
@ -13,6 +13,7 @@
<label for="announcement-start-time">{{ $t('announcements.start_time_prompt') }}</label>
<input
id="announcement-start-time"
class="input"
v-model="announcement.startsAt"
:type="announcement.allDay ? 'date' : 'datetime-local'"
:disabled="disabled"
@ -22,6 +23,7 @@
<label for="announcement-end-time">{{ $t('announcements.end_time_prompt') }}</label>
<input
id="announcement-end-time"
class="input"
v-model="announcement.endsAt"
:type="announcement.allDay ? 'date' : 'datetime-local'"
:disabled="disabled"

View File

@ -6,7 +6,7 @@
<input
v-model="term"
:placeholder="placeholder"
class="autosuggest-input"
class="input autosuggest-input"
@click="onInputClick"
>
<div

View File

@ -24,6 +24,7 @@
/>
</div>
<input
class="input"
ref="search"
v-model="query"
placeholder="Search people"

View File

@ -12,7 +12,7 @@
@change="$emit('update:modelValue', $event.target.checked)"
>
<i
class="checkbox-indicator"
class="input checkbox-indicator"
:aria-hidden="true"
@transitionend.capture="onTransitionEnd"
/>
@ -62,9 +62,15 @@ export default {
display: inline-block;
min-height: 1.2em;
&-indicator {
& > &-indicator {
/* Reset .input stuff */
padding: 0;
margin: 0;
position: relative;
line-height: inherit;
display: inline;
padding-left: 1.2em;
box-shadow: none;
}
&-indicator::before {
@ -78,10 +84,8 @@ export default {
height: 1.1em;
border-radius: $fallback--checkboxRadius;
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow);
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
box-shadow: var(--shadow);
background-color: var(--background);
vertical-align: top;
text-align: center;
line-height: 1.1em;
@ -98,21 +102,18 @@ export default {
}
.label {
color: $fallback--faint;
color: var(--faint, $fallback--faint);
color: var(--text);
}
}
input[type="checkbox"] {
&:checked + .checkbox-indicator::before {
color: $fallback--text;
color: var(--inputText, $fallback--text);
color: var(--text);
}
&:indeterminate + .checkbox-indicator::before {
content: "";
color: $fallback--text;
color: var(--inputText, $fallback--text);
color: var(--text);
}
}

View File

@ -9,7 +9,7 @@
}
a {
color: var(--topBarLink, $fallback--link);
color: var(--link);
}
.inner-nav {
@ -54,27 +54,7 @@
.button-default {
&,
svg {
color: $fallback--text;
color: var(--btnTopBarText, $fallback--text);
}
&:active {
background-color: $fallback--fg;
background-color: var(--btnPressedTopBar, $fallback--fg);
color: $fallback--text;
color: var(--btnPressedTopBarText, $fallback--text);
}
&:disabled {
color: $fallback--text;
color: var(--btnDisabledTopBarText, $fallback--text);
}
&.toggled {
color: $fallback--text;
color: var(--btnToggledTopBarText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btnToggledTopBar, $fallback--fg);
color: var(--text);
}
}
@ -94,8 +74,7 @@
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
background-color: $fallback--fg;
background-color: var(--topBarText, $fallback--fg);
background-color: var(--text);
position: absolute;
top: 0;
bottom: 0;
@ -116,8 +95,7 @@
text-align: center;
.svg-inline--fa {
color: $fallback--link;
color: var(--topBarLink, $fallback--link);
color: var(--link);
}
}

View File

@ -112,7 +112,7 @@
<style lang="scss">
@import "../../variables";
.emoji-input {
.input.emoji-input {
display: flex;
flex-direction: column;
position: relative;
@ -127,8 +127,7 @@
line-height: 24px;
&:hover i {
color: $fallback--text;
color: var(--text, $fallback--text);
color: var(--text);
}
}
@ -145,6 +144,10 @@
input,
textarea {
flex: 1 0 auto;
color: inherit;
background: none;
border: none;
outline: none;
}
&.with-picker input {

View File

@ -77,7 +77,7 @@
ref="search"
v-model="keyword"
type="text"
class="form-control"
class="input form-control"
:placeholder="$t('emoji.search_emoji')"
@input="$event.target.composing = false"
>

View File

@ -14,7 +14,7 @@
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
:aria-labelledby="name + '-label'"
class="opt exlcude-disabled visible-for-screenreader-only"
class="input opt exlcude-disabled visible-for-screenreader-only"
type="checkbox"
:checked="present"
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
@ -44,7 +44,7 @@
v-if="isCustom"
:id="name"
v-model="family"
class="custom-font"
class="input custom-font"
type="text"
>
</div>

View File

@ -41,7 +41,7 @@
<input
ref="input"
type="file"
class="image-cropper-img-input"
class="input image-cropper-img-input"
:accept="mimes"
>
</div>

View File

@ -2,6 +2,7 @@
<div class="importer">
<form>
<input
class="input"
ref="input"
type="file"
@change="change"

View File

@ -33,6 +33,7 @@
<label for="list-edit-title">{{ $t('lists.title') }}</label>
{{ ' ' }}
<input
class="input"
id="list-edit-title"
ref="title"
v-model="titleDraft"

View File

@ -8,6 +8,7 @@
/>
</div>
<input
class="input"
ref="search"
v-model="query"
:placeholder="$t('lists.search')"

View File

@ -18,7 +18,7 @@
id="username"
v-model="user.username"
:disabled="loggingIn"
class="form-control"
class="input form-control"
:placeholder="$t('login.placeholder')"
>
</div>
@ -29,7 +29,7 @@
ref="passwordInput"
v-model="user.password"
:disabled="loggingIn"
class="form-control"
class="input form-control"
type="password"
>
</div>

View File

@ -22,7 +22,7 @@
:class="classnames"
>
<a
class="short button-unstyled"
class="short"
:class="{ '-with-tooltip': shouldShowTooltip }"
:href="url"
@click.prevent="onClick"

View File

@ -16,7 +16,7 @@
<input
id="code"
v-model="code"
class="form-control"
class="input form-control"
>
</div>

View File

@ -18,7 +18,7 @@
<input
id="code"
v-model="code"
class="form-control"
class="input form-control"
>
</div>

View File

@ -137,7 +137,7 @@
box-sizing: border-box;
a {
color: var(--topBarLink, $fallback--link);
color: var(--link);
}
}

View File

@ -18,7 +18,7 @@
/>
<input
:id="name"
class="input-number"
class="input input-number"
type="number"
:value="modelValue || fallback"
:disabled="!present || disabled"

View File

@ -43,7 +43,7 @@
v-model="user.email"
:disabled="isPending"
:placeholder="$t('password_reset.placeholder')"
class="form-control"
class="input form-control"
type="input"
>
</div>

View File

@ -39,10 +39,11 @@
:aria-checked="choices[index]"
@click="activateOption(index)"
>
<!-- TODO: USE CHECKBOX -->
<input
v-if="poll.multiple"
type="checkbox"
class="poll-checkbox"
class="input poll-checkbox"
:disabled="loading"
:value="index"
>
@ -51,6 +52,7 @@
type="radio"
:disabled="loading"
:value="index"
class="input"
>
<label class="option-vote">
<RichContent

View File

@ -13,7 +13,7 @@
:id="`poll-${index}`"
v-model="options[index]"
size="1"
class="poll-option-input"
class="input poll-option-input"
type="text"
:placeholder="$t('polls.option')"
:maxlength="maxLength"
@ -67,7 +67,7 @@
<input
v-model="expiryAmount"
type="number"
class="expiry-amount hide-number-spinner"
class="input expiry-amount hide-number-spinner"
:min="minExpirationInCurrentUnit"
:max="maxExpirationInCurrentUnit"
@change="expiryAmountChange"

View File

@ -161,7 +161,7 @@
v-model="newStatus.spoilerText"
enable-emoji-picker
:suggest="emojiSuggestor"
class="form-control"
class="input form-control"
>
<template #default="inputProps">
<input
@ -180,7 +180,7 @@
v-model="newStatus.status"
:suggest="emojiUserSuggestor"
:placement="emojiPickerPlacement"
class="form-control main-input"
class="input form-control main-input"
enable-emoji-picker
hide-emoji-button
:newline-on-ctrl-enter="submitOnEnter"
@ -237,7 +237,7 @@
<Select
id="post-content-type"
v-model="newStatus.contentType"
class="form-control"
class="input form-control"
:attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
>
<option
@ -591,6 +591,8 @@
height: calc(var(--post-line-height) * 1em);
min-height: calc(var(--post-line-height) * 1em);
resize: none;
text: inherit;
background: transparent;
&.scrollable-form {
overflow-y: auto;

View File

@ -14,7 +14,7 @@
v-if="typeof fallback !== 'undefined'"
:id="name + '-o'"
:aria-labelledby="name + '-label'"
class="opt visible-for-screenreader-only"
class="input opt visible-for-screenreader-only"
type="checkbox"
:checked="present"
@change="$emit('update:modelValue', !present ? fallback : undefined)"
@ -27,7 +27,7 @@
/>
<input
:id="name"
class="input-number"
class="input input-number"
type="range"
:value="modelValue || fallback"
:disabled="!present || disabled"
@ -38,7 +38,7 @@
>
<input
:id="name + '-numeric'"
class="input-number"
class="input input-number"
type="number"
:aria-labelledby="name + '-label'"
:value="modelValue || fallback"

View File

@ -22,7 +22,7 @@
id="sign-up-username"
v-model.trim="v$.user.username.$model"
:disabled="isPending"
class="form-control"
class="input form-control"
:aria-required="true"
:placeholder="$t('registration.username_placeholder')"
>
@ -50,7 +50,7 @@
id="sign-up-fullname"
v-model.trim="v$.user.fullname.$model"
:disabled="isPending"
class="form-control"
class="input form-control"
:aria-required="true"
:placeholder="$t('registration.fullname_placeholder')"
>
@ -78,7 +78,7 @@
id="email"
v-model="v$.user.email.$model"
:disabled="isPending"
class="form-control"
class="input form-control"
type="email"
:aria-required="accountActivationRequired"
>
@ -103,7 +103,7 @@
id="bio"
v-model="user.bio"
:disabled="isPending"
class="form-control"
class="input form-control"
:placeholder="bioPlaceholder"
/>
</div>
@ -120,7 +120,7 @@
id="sign-up-password"
v-model="user.password"
:disabled="isPending"
class="form-control"
class="input form-control"
type="password"
:aria-required="true"
>
@ -148,7 +148,7 @@
id="sign-up-password-confirmation"
v-model="user.confirm"
:disabled="isPending"
class="form-control"
class="input form-control"
type="password"
:aria-required="true"
>
@ -181,7 +181,7 @@
id="sign-up-birthday"
v-model="user.birthday"
:disabled="isPending"
class="form-control"
class="input form-control"
type="date"
:max="birthdayRequired ? birthdayMinAttr : undefined"
:aria-required="birthdayRequired"
@ -226,7 +226,7 @@
id="reason"
v-model="user.reason"
:disabled="isPending"
class="form-control"
class="input form-control"
:placeholder="reasonPlaceholder"
/>
</div>
@ -253,7 +253,7 @@
id="captcha-answer"
v-model="captcha.solution"
:disabled="isPending"
class="form-control"
class="input form-control"
type="text"
autocomplete="off"
autocorrect="off"
@ -272,7 +272,7 @@
id="token"
v-model="token"
disabled="true"
class="form-control"
class="input form-control"
type="text"
>
</div>

View File

@ -17,7 +17,7 @@
<Select
:id="report-state"
v-model="state"
class="form-control"
class="input form-control"
>
<option
v-for="state in ['open', 'closed', 'resolved']"

View File

@ -9,7 +9,7 @@
<input
ref="searchInput"
v-model="searchTerm"
class="search-input"
class="input search-input"
:placeholder="$t('nav.search')"
@keyup.enter="newQuery(searchTerm)"
>

View File

@ -22,7 +22,7 @@
id="search-bar-input"
ref="searchInput"
v-model="searchTerm"
class="search-bar-input"
class="input search-bar-input"
:placeholder="$t('nav.search')"
type="text"
@keyup.enter="find(searchTerm)"

View File

@ -29,7 +29,7 @@
<label for="path">{{ $t('settings.url') }}</label>
<input
:id="path"
class="string-input"
class="input string-input"
:disabled="shouldBeDisabled"
:value="realDraftMode ? draft : state"
@change="update"

View File

@ -17,7 +17,7 @@
</label>
<input
:id="path"
class="number-input"
class="input number-input"
type="number"
:step="step || 1"
:disabled="shouldBeDisabled"

View File

@ -11,7 +11,7 @@
</label>
<input
:id="path"
class="number-input"
class="input number-input"
type="number"
step="1"
:disabled="disabled"

View File

@ -17,7 +17,7 @@
</label>
<input
:id="path"
class="string-input"
class="input string-input"
:disabled="shouldBeDisabled"
:value="realDraftMode ? draft : state"
@change="update"

View File

@ -67,7 +67,7 @@
<textarea
id="muteWords"
v-model="muteWordsString"
class="resize-height"
class="input resize-height"
/>
<div>{{ $t('settings.filtering_explanation') }}</div>
</li>

View File

@ -12,7 +12,7 @@
<input
id="username"
v-model="newName"
class="name-changer"
class="input name-changer"
v-bind="propsToNative(inputProps)"
>
</template>
@ -26,7 +26,7 @@
<template #default="inputProps">
<textarea
v-model="newBio"
class="bio resize-height"
class="input bio resize-height"
v-bind="propsToNative(inputProps)"
/>
</template>
@ -47,7 +47,7 @@
id="birthday"
v-model="newBirthday"
type="date"
class="birthday-input"
class="input birthday-input"
>
<Checkbox v-model="showBirthday">
{{ $t('settings.birthday.show_birthday') }}
@ -71,6 +71,7 @@
v-model="newFields[i].name"
:placeholder="$t('settings.profile_fields.name')"
v-bind="propsToNative(inputProps)"
class="input"
>
</template>
</EmojiInput>
@ -85,6 +86,7 @@
v-model="newFields[i].value"
:placeholder="$t('settings.profile_fields.value')"
v-bind="propsToNative(inputProps)"
class="input"
>
</template>
</EmojiInput>
@ -192,6 +194,7 @@
<input
type="file"
@change="uploadFile('banner', $event)"
class="input"
>
</div>
<FAIcon
@ -234,6 +237,7 @@
<input
type="file"
@change="uploadFile('background', $event)"
class="input"
>
</div>
<FAIcon

View File

@ -99,12 +99,14 @@
<input
v-model="otpConfirmToken"
type="text"
class="input"
>
<p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
<input
v-model="currentPassword"
type="password"
class="input"
>
<div class="confirm-otp-actions">
<button

View File

@ -30,6 +30,7 @@
<input
v-model="currentPassword"
type="password"
class="input"
>
</confirm>
<div

View File

@ -8,6 +8,7 @@
v-model="newEmail"
type="email"
autocomplete="email"
class="input"
>
</div>
<div>
@ -16,6 +17,7 @@
v-model="changeEmailPassword"
type="password"
autocomplete="current-password"
class="input"
>
</div>
<button
@ -40,6 +42,7 @@
<input
v-model="changePasswordInputs[0]"
type="password"
class="input"
>
</div>
<div>
@ -47,6 +50,7 @@
<input
v-model="changePasswordInputs[1]"
type="password"
class="input"
>
</div>
<div>
@ -54,6 +58,7 @@
<input
v-model="changePasswordInputs[2]"
type="password"
class="input"
>
</div>
<button
@ -155,6 +160,7 @@
</i18n-t>
<input
v-model="addAliasTarget"
class="input"
>
</div>
<button
@ -187,6 +193,7 @@
</i18n-t>
<input
v-model="moveAccountTarget"
class="input"
>
</div>
<div>
@ -195,6 +202,7 @@
v-model="moveAccountPassword"
type="password"
autocomplete="current-password"
class="input"
>
</div>
<button
@ -222,6 +230,7 @@
<input
v-model="deleteAccountConfirmPasswordInput"
type="password"
class="input"
>
<button
class="btn button-default"

View File

@ -95,6 +95,7 @@
<input
:value="$t('settings.style.preview.input')"
type="text"
class="input"
>
<div class="actions">
@ -103,6 +104,7 @@
id="preview_checkbox"
checked="very yes"
type="checkbox"
class="input"
>
<label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
</span>

View File

@ -11,14 +11,14 @@
<input
v-model="selected.y"
:disabled="!present"
class="input-number"
class="input input-number"
type="number"
>
<div class="wrap">
<input
v-model="selected.y"
:disabled="!present"
class="input-range"
class="input input-range"
type="range"
max="20"
min="-20"
@ -38,14 +38,14 @@
<input
v-model="selected.x"
:disabled="!present"
class="input-number"
class="input input-number"
type="number"
>
<div class="wrap">
<input
v-model="selected.x"
:disabled="!present"
class="input-range"
class="input input-range"
type="range"
max="20"
min="-20"
@ -129,7 +129,7 @@
v-model="selected.inset"
:disabled="!present"
name="inset"
class="input-inset visible-for-screenreader-only"
class="input input-inset visible-for-screenreader-only"
type="checkbox"
>
<label
@ -153,7 +153,7 @@
v-model="selected.blur"
:disabled="!present"
name="blur"
class="input-range"
class="input input-range"
type="range"
max="20"
min="0"
@ -161,7 +161,7 @@
<input
v-model="selected.blur"
:disabled="!present"
class="input-number"
class="input input-number"
type="number"
min="0"
>
@ -181,7 +181,7 @@
v-model="selected.spread"
:disabled="!present"
name="spread"
class="input-range"
class="input input-range"
type="range"
max="20"
min="-20"
@ -189,7 +189,7 @@
<input
v-model="selected.spread"
:disabled="!present"
class="input-number"
class="input input-number"
type="number"
>
</div>

View File

@ -160,14 +160,14 @@
v-if="userHighlightType !== 'disabled'"
:id="'userHighlightColorTx'+user.id"
v-model="userHighlightColor"
class="userHighlightText"
class="input userHighlightText"
type="text"
>
<input
v-if="userHighlightType !== 'disabled'"
:id="'userHighlightColor'+user.id"
v-model="userHighlightColor"
class="userHighlightCl"
class="input userHighlightCl"
type="color"
>
{{ ' ' }}

View File

@ -33,7 +33,7 @@
<textarea
v-show="editing"
v-model="localNote"
class="note-text"
class="input note-text"
/>
<span
v-show="!editing"

View File

@ -19,7 +19,7 @@
<p>{{ $t('user_reporting.add_comment_description') }}</p>
<textarea
v-model="comment"
class="form-control"
class="input form-control"
:placeholder="$t('user_reporting.additional_comments')"
rows="1"
@input="resize"