Skip to content
Permalink
Browse files

Episode 36

  • Loading branch information...
JeffreyWay committed Mar 27, 2019
1 parent 3d69a16 commit c5b7ae177358e76427129c6bf2f66174ff11ab7d

Large diffs are not rendered by default.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.
@@ -1,78 +1,18 @@
// Variables
@import 'variables';

/**
* This injects Tailwind's base styles, which is a combination of
* Normalize.css and some additional base styles.
*
* You can see the styles here:
* https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
*
* If using `postcss-import`, use this import instead:
*
* @import "tailwindcss/preflight";
*/
@tailwind preflight;

/**
* This injects any component classes registered by plugins.
*
* If using `postcss-import`, use this import instead:
*
* @import "tailwindcss/components";
*/
@tailwind components;

/**
* Here you would add any of your custom component classes; stuff that you'd
* want loaded *before* the utilities so that the utilities could still
* override them.
*
* Example:
*
* .btn { ... }
* .form-input { ... }
*
* Or if using a preprocessor or `postcss-import`:
*
* @import "components/buttons";
* @import "components/forms";
*/
@import 'themes/light';
@import 'themes/dark';

.section {
@apply .px-4;
}
@import 'components/button';
@import 'components/card';

.button {
@apply .bg-blue .text-white .no-underline .rounded-lg .text-sm .py-2 .px-5;
box-shadow: 0 2px 7px 0 #b0eaff;
body,
button {
@apply .text-default;
}

.card {
@apply .bg-white .p-5 .rounded-lg .shadow;
.section {
@apply .px-8;
}

/**
* This injects all of Tailwind's utility classes, generated based on your
* config file.
*
* If using `postcss-import`, use this import instead:
*
* @import "tailwindcss/utilities";
*/
@tailwind utilities;

/**
* Here you would add any custom utilities you need that don't come out of the
* box with Tailwind.
*
* Example :
*
* .bg-pattern-graph-paper { ... }
* .skew-45 { ... }
*
* Or if using a preprocessor or `postcss-import`:
*
* @import "utilities/background-patterns";
* @import "utilities/skew-transforms";
*/
@@ -0,0 +1,12 @@
.button {
@apply .bg-button .no-underline .rounded-lg .text-sm .py-2 .px-5;
color: white;

.theme-light & {
box-shadow: 0 2px 7px 0 #b0eaff;
}

.theme-dark & {
box-shadow: 0 2px 7px 0 #00658b;
}
}
@@ -0,0 +1,3 @@
.card {
@apply .bg-card .p-5 .rounded-lg .shadow;
}
@@ -0,0 +1,12 @@
.theme-dark {
--page-background-color: #17181e;
--card-background-color: #1f2027;
--button-background-color: #59b6f9;
--header-background-color: #1f2027;

--text-default-color: #fff;
--text-muted-color: rgba(255, 255, 255, 0.5);
--text-muted-light-color: rgba(255, 255, 255, 0.3);
--text-accent-color: #47cdff;
--text-accent-light-color: #8ae2fe;
}
@@ -0,0 +1,13 @@
.theme-light {
--page-background-color: #f5f6f9;
--card-background-color: white;
--button-background-color: #47cdff;
--header-background-color: white;

--text-default-color: #222;
--text-accent-color: #47cdff;
--text-accent-light-color: #8ae2fe;
--text-muted-color: rgba(0, 0, 0, 0.3);
--text-muted-light-color: rgba(255, 255, 255, 0.1);
--text-muted-light-color: #e1e6e8;
}
@@ -2,7 +2,7 @@

@section('content')
<form method="POST" action="{{ route('login') }}"
class="lg:w-1/2 lg:mx-auto bg-white py-12 px-16 rounded shadow"
class="lg:w-1/2 lg:mx-auto bg-card py-12 px-16 rounded shadow"
>
@csrf

@@ -14,7 +14,7 @@ class="lg:w-1/2 lg:mx-auto bg-white py-12 px-16 rounded shadow"
<div class="control">
<input id="email"
type="email"
class="input bg-transparent border border-grey-light rounded p-2 text-xs w-full{{ $errors->has('email') ? ' is-invalid' : '' }}"
class="input bg-transparent border border-muted-light rounded p-2 text-xs w-full{{ $errors->has('email') ? ' is-invalid' : '' }}"
name="email"
value="{{ old('email') }}"
required>
@@ -27,7 +27,7 @@ class="input bg-transparent border border-grey-light rounded p-2 text-xs w-full{
<div class="control">
<input id="password"
type="password"
class="input bg-transparent border border-grey-light rounded p-2 text-xs w-full{{ $errors->has('password') ? ' is-invalid' : '' }}"
class="input bg-transparent border border-muted-light rounded p-2 text-xs w-full{{ $errors->has('password') ? ' is-invalid' : '' }}"
name="password"
required>
</div>
@@ -54,7 +54,7 @@ class="input bg-transparent border border-grey-light rounded p-2 text-xs w-full{
</button>

@if (Route::has('password.request'))
<a class="text-grey text-sm" href="{{ route('password.request') }}">
<a class="text-default text-sm" href="{{ route('password.request') }}">
Forgot Your Password?
</a>
@endif
@@ -2,7 +2,7 @@

@section('content')
<form method="POST" action="{{ route('register') }}"
class="lg:w-1/2 lg:mx-auto bg-white py-12 px-16 rounded shadow"
class="lg:w-1/2 lg:mx-auto bg-card py-12 px-16 rounded shadow"
>
@csrf

@@ -14,7 +14,7 @@ class="lg:w-1/2 lg:mx-auto bg-white py-12 px-16 rounded shadow"
<div class="control">
<input id="name"
type="text"
class="input bg-transparent border border-grey-light rounded p-2 text-xs w-full{{ $errors->has('name') ? ' is-invalid' : '' }}"
class="input bg-transparent border border-muted-light rounded p-2 text-xs w-full{{ $errors->has('name') ? ' is-invalid' : '' }}"
name="name"
value="{{ old('name') }}"
required
@@ -28,7 +28,7 @@ class="input bg-transparent border border-grey-light rounded p-2 text-xs w-full{
<div class="control">
<input id="email"
type="email"
class="input bg-transparent border border-grey-light rounded p-2 text-xs w-full{{ $errors->has('email') ? ' is-invalid' : '' }}"
class="input bg-transparent border border-muted-light rounded p-2 text-xs w-full{{ $errors->has('email') ? ' is-invalid' : '' }}"
name="email"
value="{{ old('email') }}"
required>
@@ -41,7 +41,7 @@ class="input bg-transparent border border-grey-light rounded p-2 text-xs w-full{
<div class="control">
<input id="password"
type="password"
class="input bg-transparent border border-grey-light rounded p-2 text-xs w-full{{ $errors->has('password') ? ' is-invalid' : '' }}"
class="input bg-transparent border border-muted-light rounded p-2 text-xs w-full{{ $errors->has('password') ? ' is-invalid' : '' }}"
name="password"
required>
</div>
@@ -53,7 +53,7 @@ class="input bg-transparent border border-grey-light rounded p-2 text-xs w-full{
<div class="control">
<input id="password-confirmation"
type="password"
class="input bg-transparent border border-grey-light rounded p-2 text-xs w-full"
class="input bg-transparent border border-muted-light rounded p-2 text-xs w-full"
name="password_confirmation"
required>
</div>
Oops, something went wrong.

0 comments on commit c5b7ae1

Please sign in to comment.
You can’t perform that action at this time.