Skip to content

Instantly share code, notes, and snippets.

@tgedikli
Forked from felixdorn/_input.scss
Created June 21, 2020 19:52
Show Gist options
  • Save tgedikli/a64bdad1636b1f58daf313e2c0c79ecb to your computer and use it in GitHub Desktop.
Save tgedikli/a64bdad1636b1f58daf313e2c0c79ecb to your computer and use it in GitHub Desktop.
.input {
@apply bg-white rounded-lg w-full max-w-lg px-6 border border-gray-300 py-3 mt-2;
&::placeholder {
@apply text-gray-dark;
}
&:focus {
@apply border-opacity-0 outline-none shadow-outline-blue;
}
}
<div class="form-group" x-data="{ digits: '', date: '', cvc: '', isFocused: false }">
<span>{{ $name }}</span>
<div class="max-w-lg flex rounded-lg mt-2 border border-gray-300" @click.away="isFocused = false"
:class="isFocused ? 'border-opacity-0 shadow-outline' : ''">
<input @focus="isFocused = true" class="input border-none rounded-r-none min-w-0 w-full mt-0 focus:shadow-none"
type="text" placeholder="Card Number"
x-model="digits"
required
name="digits"
x-on:input="digits = $event.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim().slice(0, 19); if (digits.length === 19) $refs.date.focus()"/>
<input @focus="isFocused = true"
x-ref="date"
x-model="date"
required
x-on:input="date = $event.target.value.replace(/[^0-9 \/]/g, ''); if (date.length === 2) date += ' / ' ; if (date.length === 4 + 3) $refs.cvc.focus()"
name="date"
class="input border-none rounded-l-none rounded-r-none flex-grow-0 focus:shadow-none w-full mt-0 flex-1"
type="text" placeholder="MM / YY" style="min-width: 9rem" />
<input @focus="isFocused = true" class="input border-none rounded-l-none min-w-0 mt-0 focus:shadow-none flex-1"
required
x-ref="cvc" x-model="cvc"
name="cvc"
style="min-width: 7rem"
maxlength="3" type="text" placeholder="CVC"/>
</div>
@error(Str::slug($name))
<div role="alert" class="text-error-500 mt-1">{{ $message }}</div>
@enderror
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment