Commit 8ca44652 by gzhihao

Upgrade to Tailwind v1.0 - preserve colors settings

1 parent 6419ed3a
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
"postcss-import": "^12.0.1", "postcss-import": "^12.0.1",
"postcss-nesting": "^7.0.0", "postcss-nesting": "^7.0.0",
"resolve-url-loader": "^2.3.1", "resolve-url-loader": "^2.3.1",
"tailwindcss": "^0.7.4", "tailwindcss": "^1.0.1",
"vue": "^2.6.6", "vue": "^2.6.6",
"vue-template-compiler": "^2.6.6" "vue-template-compiler": "^2.6.6"
} }
......
/* Reset */ /* Reset */
@import "tailwindcss/preflight"; @import "tailwindcss/base";
@import "reset"; @import "reset";
/* Components */ /* Components */
@import "buttons"; @import "buttons";
@import "form"; @import "form";
@import "nprogress"; @import "nprogress";
@import "tailwindcss/components";
/* Utilities */ /* Utilities */
@import "tailwindcss/utilities"; @import "tailwindcss/utilities";
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
&:focus, &:focus,
&.focus { &.focus {
@apply .border-indigo; @apply .border-indigo;
box-shadow: 0 0 0 1px config('colors.indigo'); box-shadow: 0 0 0 1px theme('colors.indigo');
} }
&::placeholder { &::placeholder {
...@@ -41,6 +41,6 @@ ...@@ -41,6 +41,6 @@
@apply .border-red-light; @apply .border-red-light;
&:focus { &:focus {
box-shadow: 0 0 0 1px config('colors.red'); box-shadow: 0 0 0 1px theme('colors.red');
} }
} }
a { html {
color: inherit; line-height: 1.15;
text-decoration: none;
} }
input, select, textarea, button, div, a { input, select, textarea, button, div, a {
......
<template> <template>
<div class="p-6 bg-indigo-darker min-h-screen flex justify-center items-center"> <div class="p-6 bg-indigo-darker min-h-screen flex justify-center items-center">
<div class="w-full max-w-sm"> <div class="w-full max-w-md">
<logo class="block mx-auto w-full max-w-xs fill-white" height="50" /> <logo class="block mx-auto w-full max-w-xs fill-white" height="50" />
<form class="mt-8 bg-white rounded-lg shadow-lg overflow-hidden" @submit.prevent="submit"> <form class="mt-8 bg-white rounded-lg shadow-xl overflow-hidden" @submit.prevent="submit">
<div class="px-10 py-12"> <div class="px-10 py-12">
<h1 class="text-center font-bold text-3xl">Welcome Back!</h1> <h1 class="text-center font-bold text-3xl">Welcome Back!</h1>
<div class="mx-auto mt-6 w-24 border-b-2" /> <div class="mx-auto mt-6 w-24 border-b-2" />
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link> <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('contacts')">Contacts</inertia-link>
<span class="text-indigo-light font-medium">/</span> Create <span class="text-indigo-light font-medium">/</span> Create
</h1> </h1>
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap"> <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" /> <text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore"> <trashed-message v-if="contact.deleted_at" class="mb-6" @restore="restore">
This contact has been deleted. This contact has been deleted.
</trashed-message> </trashed-message>
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap"> <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" /> <text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<layout title="Contacts"> <layout title="Contacts">
<h1 class="mb-8 font-bold text-3xl">Contacts</h1> <h1 class="mb-8 font-bold text-3xl">Contacts</h1>
<div class="mb-6 flex justify-between items-center"> <div class="mb-6 flex justify-between items-center">
<search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset"> <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
<label class="block text-grey-darkest">Trashed:</label> <label class="block text-grey-darkest">Trashed:</label>
<select v-model="form.trashed" class="mt-1 w-full form-select"> <select v-model="form.trashed" class="mt-1 w-full form-select">
<option :value="null" /> <option :value="null" />
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<td class="border-t"> <td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('contacts.edit', contact.id)"> <inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('contacts.edit', contact.id)">
{{ contact.name }} {{ contact.name }}
<icon v-if="contact.deleted_at" name="trash" class="flex-no-shrink w-3 h-3 fill-grey ml-2" /> <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-grey ml-2" />
</inertia-link> </inertia-link>
</td> </td>
<td class="border-t"> <td class="border-t">
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link> <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('organizations')">Organizations</inertia-link>
<span class="text-indigo-light font-medium">/</span> Create <span class="text-indigo-light font-medium">/</span> Create
</h1> </h1>
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap"> <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.name" :errors="errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" /> <text-input v-model="form.name" :errors="errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<trashed-message v-if="organization.deleted_at" class="mb-6" @restore="restore"> <trashed-message v-if="organization.deleted_at" class="mb-6" @restore="restore">
This organization has been deleted. This organization has been deleted.
</trashed-message> </trashed-message>
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap"> <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.name" :errors="errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" /> <text-input v-model="form.name" :errors="errors.name" class="pr-6 pb-8 w-full lg:w-1/2" label="Name" />
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<td class="border-t"> <td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('contacts.edit', contact.id)"> <inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('contacts.edit', contact.id)">
{{ contact.name }} {{ contact.name }}
<icon v-if="contact.deleted_at" name="trash" class="flex-no-shrink w-3 h-3 fill-grey ml-2" /> <icon v-if="contact.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-grey ml-2" />
</inertia-link> </inertia-link>
</td> </td>
<td class="border-t"> <td class="border-t">
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<layout title="Organizations"> <layout title="Organizations">
<h1 class="mb-8 font-bold text-3xl">Organizations</h1> <h1 class="mb-8 font-bold text-3xl">Organizations</h1>
<div class="mb-6 flex justify-between items-center"> <div class="mb-6 flex justify-between items-center">
<search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset"> <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
<label class="block text-grey-darkest">Trashed:</label> <label class="block text-grey-darkest">Trashed:</label>
<select v-model="form.trashed" class="mt-1 w-full form-select"> <select v-model="form.trashed" class="mt-1 w-full form-select">
<option :value="null" /> <option :value="null" />
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<td class="border-t"> <td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('organizations.edit', organization.id)"> <inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('organizations.edit', organization.id)">
{{ organization.name }} {{ organization.name }}
<icon v-if="organization.deleted_at" name="trash" class="flex-no-shrink w-3 h-3 fill-grey ml-2" /> <icon v-if="organization.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-grey ml-2" />
</inertia-link> </inertia-link>
</td> </td>
<td class="border-t"> <td class="border-t">
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link> <inertia-link class="text-indigo-light hover:text-indigo-dark" :href="route('users')">Users</inertia-link>
<span class="text-indigo-light font-medium">/</span> Create <span class="text-indigo-light font-medium">/</span> Create
</h1> </h1>
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap"> <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" /> <text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<trashed-message v-if="user.deleted_at" class="mb-6" @restore="restore"> <trashed-message v-if="user.deleted_at" class="mb-6" @restore="restore">
This user has been deleted. This user has been deleted.
</trashed-message> </trashed-message>
<div class="bg-white rounded shadow overflow-hidden max-w-lg"> <div class="bg-white rounded shadow overflow-hidden max-w-3xl">
<form @submit.prevent="submit"> <form @submit.prevent="submit">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap"> <div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" /> <text-input v-model="form.first_name" :errors="errors.first_name" class="pr-6 pb-8 w-full lg:w-1/2" label="First name" />
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<layout title="Users"> <layout title="Users">
<h1 class="mb-8 font-bold text-3xl">Users</h1> <h1 class="mb-8 font-bold text-3xl">Users</h1>
<div class="mb-6 flex justify-between items-center"> <div class="mb-6 flex justify-between items-center">
<search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset"> <search-filter v-model="form.search" class="w-full max-w-md mr-4" @reset="reset">
<label class="block text-grey-darkest">Role:</label> <label class="block text-grey-darkest">Role:</label>
<select v-model="form.role" class="mt-1 w-full form-select"> <select v-model="form.role" class="mt-1 w-full form-select">
<option :value="null" /> <option :value="null" />
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<td class="border-t"> <td class="border-t">
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('users.edit', user.id)"> <inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('users.edit', user.id)">
{{ user.name }} {{ user.name }}
<icon v-if="user.deleted_at" name="trash" class="flex-no-shrink w-3 h-3 fill-grey ml-2" /> <icon v-if="user.deleted_at" name="trash" class="flex-shrink-0 w-3 h-3 fill-grey ml-2" />
</inertia-link> </inertia-link>
</td> </td>
<td class="border-t"> <td class="border-t">
......
...@@ -4,18 +4,18 @@ ...@@ -4,18 +4,18 @@
<div class="flex flex-col"> <div class="flex flex-col">
<div class="min-h-screen flex flex-col" @click="hideDropdownMenus"> <div class="min-h-screen flex flex-col" @click="hideDropdownMenus">
<div class="md:flex"> <div class="md:flex">
<div class="bg-indigo-darkest md:flex-no-shrink md:w-56 px-6 py-4 flex items-center justify-between md:justify-center"> <div class="bg-indigo-darkest md:flex-shrink-0 md:w-56 px-6 py-4 flex items-center justify-between md:justify-center">
<inertia-link class="mt-1" href="/"> <inertia-link class="mt-1" href="/">
<logo class="fill-white" width="120" height="28" /> <logo class="fill-white" width="120" height="28" />
</inertia-link> </inertia-link>
<dropdown class="md:hidden" placement="bottom-end"> <dropdown class="md:hidden" placement="bottom-end">
<svg class="fill-white w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg> <svg class="fill-white w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg>
<div slot="dropdown" class="mt-2 px-8 py-4 shadow-lg bg-indigo-darker rounded"> <div slot="dropdown" class="mt-2 px-8 py-4 shadow-xl bg-indigo-darker rounded">
<main-menu /> <main-menu />
</div> </div>
</dropdown> </dropdown>
</div> </div>
<div class="bg-white border-b w-full p-4 md:py-0 md:px-12 text-sm md:text-base flex justify-between items-center"> <div class="bg-white border-b w-full p-4 md:py-0 md:px-12 text-sm md:text-md flex justify-between items-center">
<div class="mt-1 mr-4">{{ $page.auth.user.account.name }}</div> <div class="mt-1 mr-4">{{ $page.auth.user.account.name }}</div>
<dropdown class="mt-1" placement="bottom-end"> <dropdown class="mt-1" placement="bottom-end">
<div class="flex items-center cursor-pointer select-none group"> <div class="flex items-center cursor-pointer select-none group">
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</div> </div>
<icon class="w-5 h-5 group-hover:fill-indigo-dark fill-grey-darkest focus:fill-indigo-dark" name="cheveron-down" /> <icon class="w-5 h-5 group-hover:fill-indigo-dark fill-grey-darkest focus:fill-indigo-dark" name="cheveron-down" />
</div> </div>
<div slot="dropdown" class="mt-2 py-2 shadow-lg bg-white rounded text-sm"> <div slot="dropdown" class="mt-2 py-2 shadow-xl bg-white rounded text-sm">
<inertia-link class="block px-6 py-2 hover:bg-indigo hover:text-white" :href="route('users.edit', $page.auth.user.id)">My Profile</inertia-link> <inertia-link class="block px-6 py-2 hover:bg-indigo hover:text-white" :href="route('users.edit', $page.auth.user.id)">My Profile</inertia-link>
<inertia-link class="block px-6 py-2 hover:bg-indigo hover:text-white" :href="route('users')">Manage Users</inertia-link> <inertia-link class="block px-6 py-2 hover:bg-indigo hover:text-white" :href="route('users')">Manage Users</inertia-link>
<inertia-link class="block px-6 py-2 hover:bg-indigo hover:text-white" :href="route('logout')" method="post">Logout</inertia-link> <inertia-link class="block px-6 py-2 hover:bg-indigo hover:text-white" :href="route('logout')" method="post">Logout</inertia-link>
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
</div> </div>
</div> </div>
<div class="flex flex-grow"> <div class="flex flex-grow">
<div class="bg-indigo-darker flex-no-shrink w-56 p-12 hidden md:block"> <div class="bg-indigo-darker flex-shrink-0 w-56 p-12 hidden md:block">
<main-menu /> <main-menu />
</div> </div>
<div class="w-full overflow-hidden px-4 py-8 md:p-12"> <div class="w-full overflow-hidden px-4 py-8 md:p-12">
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<path d="M239.998 239.999L0 0h961.243L721.246 240c-131.999 132-240.28 240-240.624 239.999-.345-.001-108.625-108.001-240.624-240z" /> <path d="M239.998 239.999L0 0h961.243L721.246 240c-131.999 132-240.28 240-240.624 239.999-.345-.001-108.625-108.001-240.624-240z" />
</svg> </svg>
</div> </div>
<div slot="dropdown" class="mt-2 px-4 py-6 w-screen shadow-lg bg-white rounded" :style="{ maxWidth: `${maxWidth}px` }"> <div slot="dropdown" class="mt-2 px-4 py-6 w-screen shadow-xl bg-white rounded" :style="{ maxWidth: `${maxWidth}px` }">
<slot /> <slot />
</div> </div>
</dropdown> </dropdown>
......
<template> <template>
<div class="p-4 bg-yellow-light rounded border border-yellow-dark flex items-center justify-between"> <div class="p-4 bg-yellow-light rounded border border-yellow-dark flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<icon name="trash" class="flex-no-shrink w-4 h-4 fill-yellow-darker mr-2" /> <icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-darker mr-2" />
<div class="text-yellow-darker"> <div class="text-yellow-darker">
<slot /> <slot />
</div> </div>
......
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
fontFamily: {
sans: [
'Cerebri Sans',
...defaultTheme.fontFamily.sans,
],
},
colors: {
'transparent': 'transparent',
'black': '#22292f',
'grey-darkest': '#3d4852',
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
'grey': '#b8c2cc',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
'grey-lightest': '#f8fafc',
'white': '#ffffff',
'red-darkest': '#3b0d0c',
'red-darker': '#621b18',
'red-dark': '#cc1f1a',
'red': '#e3342f',
'red-light': '#ef5753',
'red-lighter': '#f9acaa',
'red-lightest': '#fcebea',
'orange-darkest': '#462a16',
'orange-darker': '#613b1f',
'orange-dark': '#de751f',
'orange': '#f6993f',
'orange-light': '#faad63',
'orange-lighter': '#fcd9b6',
'orange-lightest': '#fff5eb',
'yellow-darkest': '#453411',
'yellow-darker': '#684f1d',
'yellow-dark': '#f2d024',
'yellow': '#ffed4a',
'yellow-light': '#fff382',
'yellow-lighter': '#fff9c2',
'yellow-lightest': '#fcfbeb',
'green-darkest': '#0f2f21',
'green-darker': '#1a4731',
'green-dark': '#1f9d55',
'green': '#38c172',
'green-light': '#51d88a',
'green-lighter': '#a2f5bf',
'green-lightest': '#e3fcec',
'teal-darkest': '#0d3331',
'teal-darker': '#20504f',
'teal-dark': '#38a89d',
'teal': '#4dc0b5',
'teal-light': '#64d5ca',
'teal-lighter': '#a0f0ed',
'teal-lightest': '#e8fffe',
'blue-darkest': '#12283a',
'blue-darker': '#1c3d5a',
'blue-dark': '#2779bd',
'blue': '#3490dc',
'blue-light': '#6cb2eb',
'blue-lighter': '#bcdefa',
'blue-lightest': '#eff8ff',
'indigo-darkest': '#191e38',
'indigo-darker': '#2f365f',
'indigo-dark': '#5661b3',
'indigo': '#6574cd',
'indigo-light': '#7886d7',
'indigo-lighter': '#b2b7ff',
'indigo-lightest': '#e6e8ff',
'purple-darkest': '#21183c',
'purple-darker': '#382b5f',
'purple-dark': '#794acf',
'purple': '#9561e2',
'purple-light': '#a779e9',
'purple-lighter': '#d6bbfc',
'purple-lightest': '#f3ebff',
'pink-darkest': '#451225',
'pink-darker': '#6f213f',
'pink-dark': '#eb5286',
'pink': '#f66d9b',
'pink-light': '#fa7ea8',
'pink-lighter': '#ffbbca',
'pink-lightest': '#ffebef',
},
boxShadow: theme => ({
'outline': '0 0 0 2px ' + theme('colors.indigo'),
}),
fill: theme => theme('colors'),
},
},
variants: {
fill: ['responsive', 'hover', 'focus', 'group-hover'],
textColor: ['responsive', 'hover', 'focus', 'group-hover'],
zIndex: ['responsive', 'focus'],
},
plugins: [],
}
\ No newline at end of file
...@@ -19,7 +19,7 @@ mix.js('resources/js/app.js', 'public/js') ...@@ -19,7 +19,7 @@ mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [ .postCss('resources/css/app.css', 'public/css', [
cssImport(), cssImport(),
cssNesting(), cssNesting(),
tailwindcss('tailwind.js'), require('tailwindcss')
]) ])
.webpackConfig({ .webpackConfig({
output: { chunkFilename: 'js/[name].[contenthash].js' }, output: { chunkFilename: 'js/[name].[contenthash].js' },
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!