Skip to content

Commit

Permalink
Form & table styling + demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@dazecoop
dazecoop committed Oct 20, 2021
1 parent aa7b6db commit ffc66f0
Show file tree
Hide file tree
Showing 3 changed files with 196 additions and 57 deletions.
108 changes: 91 additions & 17 deletions src/assets/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,53 +2,127 @@
@tailwind components;
@tailwind utilities;

label {
@apply text-gray-800 block pb-1;
}

h1,h2,h3,h4,h5,h6 {
@apply pb-3;
@mixin text {
@apply text-gray-600
}

p {
@apply text-gray-600 pb-4;
@include text;
@apply pb-4;
}

.container {
@apply mx-auto px-6;
}

input {

/**
* Headers
*/
h1,h2,h3,h4,h5,h6 {
@apply pb-3;
}
h1 {
@apply text-3xl pb-5;
}
h2 {
@include text;
@apply text-lg font-medium;
}

/**
* Alerts
*/
.alert {
@apply text-sm;
&.error {
@apply border-red-500;
@apply text-red-600;
}
}

/**
* Button's
* Forms
*/
.btn {
form {
fieldset {
@apply pb-6;
}
label {
@include text;
@apply block font-medium text-gray-700 pb-2;
}
[type='text'],
[type='email'],
[type='url'],
[type='password'],
[type='number'],
[type='date'],
[type='datetime-local'],
[type='month'],
[type='search'],
[type='tel'],
[type='time'],
[type='week'],
// [multiple],
textarea,
select {
@apply flex-1 block w-full rounded-md shadow-sm border-gray-300 focus:ring-indigo-500 focus:border-indigo-500;
&.error {
@apply border-red-500;
}
}

.prepend {
@apply flex rounded-md shadow-sm;
span {
@apply inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500;
}
input {
@apply rounded-l-none;
}
}
}

/**
* Buttons
*/
button {
&.loading {
@apply relative;
color: transparent;
@apply relative text-transparent cursor-wait;
&:after {
content: '';
left: calc(50% - 0.75rem);
@apply absolute w-6 h-6 border-b-2 border-white rounded-full animate-spin;
@apply absolute w-5 h-5 border-b-2 border-white rounded-full animate-spin;
}
}
&.btn-lg {
@apply py-6 px-8 text-2xl;
}
&:disabled {
@apply bg-gray-300;
&:hover {
@apply bg-gray-300;
}
}
}

/**
* Table's
* Tables
*/
table {
&.table {
@apply w-full;
td, th {
@apply px-6 py-4 border-b;
@include text;
@apply px-4 py-2 border-b text-left;
}
&.stripe {
tbody {
tr {
&:nth-child(even) {
@apply bg-gray-100;
}
}
}
}
}
}
Expand Down
22 changes: 0 additions & 22 deletions src/modules/tailwind.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,40 +26,18 @@ import {
// TDialog,
} from 'vue-tailwind/dist/components'

// Class's applied to any interactive element
const interactiveFocus = 'focus:outline-none focus:ring focus:border-blue-300';

// Generic class's for all form elements
const formClasses = 'w-full rounded border-gray-400' +
' focus:outline-none focus:ring focus:border-blue-300' +
interactiveFocus

const settings = {
't-button': {
component: TButton,
props: {
classes: 'btn bg-red-500 hover:bg-red-700 text-white font-bold py-3' +
' px-4 w-100 rounded w-full uppercase drop-shadow-md ' +
interactiveFocus,
}
},
't-input': {
component: TInput,
props: {
classes: formClasses
}
},
't-textarea': {
component: TTextarea,
props: {
classes: formClasses
}
},
't-select': {
component: TSelect,
props: {
classes: formClasses
}
}
}

Expand Down
123 changes: 105 additions & 18 deletions src/views/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,110 @@
<template>
<div class="text-center p-8">
<h1 class="text-3xl pb-5">
{{ $t(`${localePath}.intro.title`, { siteName: $siteName }) }}
</h1>
<p>
{{ $t(`${localePath}.intro.p-1`) }}
</p>
<p>
<a
:href="$siteDomain"
class="hover:text-blue-500"
>
<font-awesome-icon
:icon="['fab', 'github']"
class="mr-1"
<!-- eslint-disable max-len -->
<div class="p-8">
<div class="text-center">
<h1>
{{ $t(`${localePath}.intro.title`, { siteName: $siteName }) }}
</h1>
<p class="text-lg font-light">
{{ $t(`${localePath}.intro.p-1`) }}
</p>
<p class="text-sm">
<a
:href="$siteDomain"
class="hover:text-blue-500 p-2"
>
<font-awesome-icon
:icon="['fab', 'github']"
class="mr-1"
/>
{{ $siteDomain }}
</a>
</p>
</div>

<hr class="my-8" />

<form class="max-w-md mx-auto">
<h2>Form example</h2>

<fieldset>
<label for="example-1">
Regular input
</label>
<t-input
id="example-1"
placeholder="Input placeholder"
/>
</fieldset>

<fieldset>
<label for="example-2">
Has an error
</label>
<t-input
id="example-2"
class="error"
placeholder="Input placeholder"
/>
{{ $siteDomain }}
</a>
</p>
<div class="alert error mt-1">
Please enter a value
</div>
</fieldset>

<fieldset>
<label for="example-3">
Input with prepend
</label>
<div class="prepend">
<span>
http://
</span>
<t-input
id="example-3"
placeholder="Input placeholder"
class="rounded-l-none"
/>
</div>
</fieldset>

<fieldset>
<div class="grid sm:grid-cols-3 gap-4">
<t-button>
Submit
</t-button>
<t-button
class="loading"
disabled
>
Loading
</t-button>
</div>
</fieldset>
</form>

<hr class="my-8" />

<div class="max-w-md mx-auto">
<h2>Table example</h2>
<table class="table stripe">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val 1</td>
<td>Val 2</td>
</tr>
<tr>
<td>Val 1.1</td>
<td>Val 2.1</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>

Expand Down

0 comments on commit ffc66f0

Please sign in to comment.