Get rid of variable color props in components

These PHP-based variables preventing PostCSS from doing its thing.
This commit is contained in:
Christopher C. Wells 2021-04-03 00:20:44 -07:00
parent ee69ee7f7d
commit 367d242ced
12 changed files with 25 additions and 30 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,3 @@
@props(['color' => 'gray', 'textColor' => 'white'])
<button {{ $attributes->merge(['type' => 'submit', 'class' => "inline-flex items-center px-4 py-2 bg-{$color}-800 border border-transparent rounded-md font-semibold text-xs text-{$textColor} uppercase tracking-widest hover:bg-{$color}-700 active:bg-{$color}-900 focus:outline-none focus:border-{$color}-900 focus:ring ring-{$color}-300 disabled:opacity-25 transition ease-in-out duration-150"]) }}>
<button {{ $attributes->merge(['type' => 'submit', 'class' => "inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150"]) }}>
{{ $slot }}
</button>

View File

@ -1,5 +0,0 @@
@props(['color' => 'gray'])
<button {{ $attributes->merge(['type' => 'submit', 'class' => "inline-flex items-center border border-transparent rounded-md font-semibold text-xs text-{$color}-500 tracking-widest hover:text-{$color}-700 active:text-{$color}-900 focus:outline-none focus:border-{$color}-900 focus:ring ring-{$color}-300 disabled:opacity-25 transition ease-in-out duration-150"]) }}>
{{ $slot }}
</button>

View File

@ -0,0 +1,3 @@
<button {{ $attributes->merge(['type' => 'submit', 'class' => "inline-flex items-center border border-transparent rounded-md font-semibold text-xs text-green-500 tracking-widest hover:text-green-700 active:text-green-900 focus:outline-none focus:border-green-900 focus:ring ring-green-300 disabled:opacity-25 transition ease-in-out duration-150"]) }}>
{{ $slot }}
</button>

View File

@ -0,0 +1,3 @@
<button {{ $attributes->merge(['type' => 'submit', 'class' => "inline-flex items-center border border-transparent rounded-md font-semibold text-xs text-red-500 tracking-widest hover:text-red-700 active:text-red-900 focus:outline-none focus:border-red-900 focus:ring ring-red-300 disabled:opacity-25 transition ease-in-out duration-150"]) }}>
{{ $slot }}
</button>

View File

@ -37,8 +37,7 @@
</div>
<x-inputs.button
class="text-xl mt-4"
color="blue"
type="button"
class="bg-blue-800 hover:bg-blue-700 active:bg-blue-900 focus:border-blue-900 ring-blue-300"
x-show="morePages"
x-cloak
@click.prevent="loadMore()">

View File

@ -17,11 +17,11 @@
<div class="journal-entry-template hidden">
@include('journal-entries.partials.entry-item-input', ['default_date' => $default_date])
</div>
<x-inputs.icon-button type="button" color="green" class="add-entry-item" x-on:click="addEntryNode($el);">
<x-inputs.icon-green class="add-entry-item" x-on:click="addEntryNode($el);">
<svg class="h-10 w-10 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
</svg>
</x-inputs.icon-button>
</x-inputs.icon-green>
<div class="flex items-center justify-end mt-4 space-x-4">
<fieldset class="flex space-x-2">
<x-inputs.label for="groupEntries" value="Group entries by day and meal" />

View File

@ -57,13 +57,11 @@
</div>
</div>
<div class="flex-none">
<x-inputs.icon-button type="button"
color="red"
x-on:click="$event.target.parentNode.parentNode.remove();">
<x-inputs.icon-red x-on:click="$event.target.parentNode.parentNode.remove();">
<svg class="h-8 w-8 pointer-events-none m-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</x-inputs.icon-button>
</x-inputs.icon-red>
</div>
</div>

View File

@ -144,10 +144,12 @@
@include('recipes.partials.separator-input')
</div>
</div>
<x-inputs.button type="button" color="green" x-on:click="addNodeFromTemplate($el, 'ingredient');">
<x-inputs.button class="bg-green-800 hover:bg-green-700 active:bg-green-900 focus:border-green-900 ring-green-300"
x-on:click="addNodeFromTemplate($el, 'ingredient');">
Add Ingredient
</x-inputs.button>
<x-inputs.button type="button" color="blue" x-on:click="addNodeFromTemplate($el, 'separator');">
<x-inputs.button class="bg-blue-800 hover:bg-blue-700 active:bg-blue-900 focus:border-blue-900 ring-blue-300"
x-on:click="addNodeFromTemplate($el, 'separator');">
Add Separator
</x-inputs.button>
</div>
@ -165,7 +167,8 @@
@include('recipes.partials.step-input')
</div>
</div>
<x-inputs.button type="button" color="green" x-on:click="addNodeFromTemplate($el, 'step');">
<x-inputs.button class="bg-green-800 hover:bg-green-700 active:bg-green-900 focus:border-green-900 ring-green-300"
x-on:click="addNodeFromTemplate($el, 'step');">
Add Step
</x-inputs.button>
</div>

View File

@ -33,13 +33,11 @@
:value="$detail ?? null" />
</div>
<div class="flex-none">
<x-inputs.icon-button type="button"
color="red"
x-on:click="$event.target.parentNode.parentNode.parentNode.remove();">
<x-inputs.icon-red x-on:click="$event.target.parentNode.parentNode.parentNode.remove();">
<svg class="h-8 w-8 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</x-inputs.icon-button>
</x-inputs.icon-red>
</div>
</div>
</div>

View File

@ -17,13 +17,11 @@
:value="$text ?? null" />
</div>
<div class="flex-none">
<x-inputs.icon-button type="button"
color="red"
x-on:click="$event.target.parentNode.parentNode.parentNode.remove();">
<x-inputs.icon-red x-on:click="$event.target.parentNode.parentNode.parentNode.remove();">
<svg class="h-8 w-8 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</x-inputs.icon-button>
</x-inputs.icon-red>
</div>
</div>
</div>

View File

@ -7,10 +7,10 @@
</svg>
</div>
<x-inputs.textarea class="block mt-1 w-full" name="steps[step][]" :value="$step_default ?? null" />
<x-inputs.icon-button type="button" color="red" x-on:click="$event.target.parentNode.parentNode.remove();">
<x-inputs.icon-red x-on:click="$event.target.parentNode.parentNode.remove();">
<svg class="h-8 w-8 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</x-inputs.icon-button>
</x-inputs.icon-red>
</div>
</div>