Add subtle shadows to inputs on login and register pages
MODIFY
resources/assets/sass/components/input.scss
resources/assets/sass/components/input.scss
@@ -157,3 +157,7 @@ button.button {
font-weight: 600;
color: #FFF;
}
+
+.shadow {
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}

MODIFY
resources/views/login.blade.php
resources/views/login.blade.php
{{ csrf_field() }}
<div class="input">
<label>E-mail</label>
- <input type="email" name="email" value="{{ old('email') }}" />
+ <input type="email" name="email" value="{{ old('email') }}" class="shadow" />
</div>
<div class="input">
<label>Password</label>
- <input type="password" name="password" />
+ <input type="password" name="password" class="shadow" />
</div>
<button class="button button--wide">Log in</button>
<div class="mt-2 text-right">

MODIFY
resources/views/register.blade.php
resources/views/register.blade.php
{{ csrf_field() }}
<div class="input">
<label>Name</label>
- <input type="text" name="name" value="{{ old('name') }}" />
+ <input type="text" name="name" value="{{ old('name') }}" class="shadow" />
@include('partials.validation_error', ['payload' => 'name'])
</div>
<div class="input">
<label>E-mail</label>
- <input type="email" name="email" value="{{ old('email') }}" />
+ <input type="email" name="email" value="{{ old('email') }}" class="shadow" />
@include('partials.validation_error', ['payload' => 'email'])
</div>
<div class="input">
<label>Password</label>
- <input type="password" name="password" />
+ <input type="password" name="password" class="shadow" />
@include('partials.validation_error', ['payload' => 'password'])
</div>
<div class="input">
<label>Verify Password</label>
- <input type="password" name="password_confirmation" />
+ <input type="password" name="password_confirmation" class="shadow" />
@include('partials.validation_error', ['payload' => 'password_confirmation'])
</div>
<div class="input">
<label>Currency</label>
<searchable
+ class="shadow"
name="currency"
size="2"
:items='@json($currencies)'

MODIFY
resources/views/reset_password.blade.php
resources/views/reset_password.blade.php
<input type="hidden" name="token" value="{{ $token }}" />
<div class="input">
<label>Password</label>
- <input type="password" name="password" />
+ <input type="password" name="password" class="shadow" />
</div>
<div class="input">
<label>Verify Password</label>
- <input type="password" name="password_confirmation" />
+ <input type="password" name="password_confirmation" class="shadow" />
</div>
@else
<div class="input">
<label>E-mail</label>
- <input type="email" name="email" />
+ <input type="email" name="email" class="shadow" />
</div>
@endif
<button class="button button--wide">Submit</button>

Add subtle shadows to inputs on login and register pages