wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Make buttons generatable, add text hovers

Browse source
This commit is contained in:
Adam Wathan 2017-08-18 14:44:08 -04:00
parent b93b352faf
commit 1b048a1f10
5 changed files with 39 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

1
docs/config.php
View file

@ -4,4 +4,5 @@ return [
'baseUrl' => '',
'production' => false,
'collections' => [],
'colors' => ['red', 'orange', 'yellow', 'green', 'teal', 'blue', 'indigo', 'purple', 'pink']
];

155
docs/source/examples.blade.php
View file

@ -7,90 +7,21 @@
<h2 class="markdown">Alerts</h2>
<div class="bg-red-lightest border border-red-light rounded p-4 mb-4">
<div class="text-medium text-red-dark">
@foreach($page->colors as $color)
<div class="bg-{{$color}}-lightest border border-{{$color}}-light rounded p-4 mb-4">
<div class="text-medium text-{{$color}}-dark">
Alert message
</div>
<div class="text-red-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-orange-lightest border border-orange-light rounded p-4 mb-4">
<div class="text-medium text-orange-dark">
Alert message
</div>
<div class="text-orange-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-yellow-lightest border border-yellow-light rounded p-4 mb-4">
<div class="text-medium text-yellow-dark">
Alert message
</div>
<div class="text-yellow-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-green-lightest border border-green-light rounded p-4 mb-4">
<div class="text-medium text-green-dark">
Alert message
</div>
<div class="text-green-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-teal-lightest border border-teal-light rounded p-4 mb-4">
<div class="text-medium text-teal-dark">
Alert message
</div>
<div class="text-teal-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-blue-lightest border border-blue-light rounded p-4 mb-4">
<div class="text-medium text-blue-dark">
Alert message
</div>
<div class="text-blue-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-indigo-lightest border border-indigo-light rounded p-4 mb-4">
<div class="text-medium text-indigo-dark">
Alert message
</div>
<div class="text-indigo-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-purple-lightest border border-purple-light rounded p-4 mb-4">
<div class="text-medium text-purple-dark">
Alert message
</div>
<div class="text-purple-dark">
Some additional text to explain what happened.
</div>
</div>
<div class="bg-pink-lightest border border-pink-light rounded p-4 mb-4">
<div class="text-medium text-pink-dark">
Alert message
</div>
<div class="text-pink-dark">
<div class="text-{{$color}}-dark">
Some additional text to explain what happened.
</div>
</div>
@endforeach
<h2 class="markdown">Buttons</h2>
<h3 class="markdown">Solid</h3>
<div class="mb-4">
<button class="text-medium text-dark rounded py-2 px-4 bg-light mr-4">
Save
@ -113,78 +44,30 @@
Save
</button>
</div>
@foreach($page->colors as $color)
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-red hover-bg-red-dark mr-4">
<button class="text-medium text-light rounded py-2 px-4 bg-{{$color}} hover-bg-{{$color}}-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-red-light mr-4">
<button class="text-medium text-light rounded py-2 px-4 bg-{{$color}}-light mr-4">
Disabled
</button>
</div>
@endforeach
<h3 class="markdown">Outline</h3>
@foreach($page->colors as $color)
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-orange hover-bg-orange-dark mr-4">
<button class="text-medium text-light rounded py-2 px-4 text-{{$color}} hover-text-light border border-{{$color}} hover-bg-{{$color}} mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-orange-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-yellow hover-bg-yellow-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-yellow-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-green hover-bg-green-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-green-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-teal hover-bg-teal-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-teal-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-blue hover-bg-blue-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-blue-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-indigo hover-bg-indigo-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-indigo-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-purple hover-bg-purple-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-purple-light mr-4">
Disabled
</button>
</div>
<div class="mb-4">
<button class="text-medium text-light rounded py-2 px-4 bg-pink hover-bg-pink-dark mr-4">
Save
</button>
<button class="text-medium text-light rounded py-2 px-4 bg-pink-light mr-4">
<button class="text-medium text-light rounded py-2 px-4 text-{{$color}}-light border border-{{$color}}-light mr-4">
Disabled
</button>
</div>
@endforeach
<h2 class="markdown">Cards</h2>