Skip to content

Commit

Permalink
Simplify button styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@JSn1nj4
JSn1nj4 committed Jul 5, 2024
1 parent 5da1540 commit a0f1262
Showing 1 changed file with 59 additions and 14 deletions.
73 changes: 59 additions & 14 deletions resources/views/vendor/livewire/tailwind.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,51 @@
(\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView()
JS
: '';
$selectableColors = implode(' ', [
'bg-white',
'dark:bg-black',
'text-caribbeanGreen-700',
'dark:text-caribbeanGreen-300',
'border-caribbeanGreen-700',
'dark:border-caribbeanGreen-300',
'hover:text-caribbeanGreen-500',
'dark:hover:text-caribbeanGreen-400',
'ring-caribbeanGreen-300',
'dark:ring-caribbeanGreen-700',
'focus:border-caribbeanGreen-300',
'dark:focus:border-caribbeanGreen-700',
'active:text-caribbeanGreen-700',
'dark:active:text-caribbeanGreen-300',
]);
$selectedColors = implode(' ', [
'bg-caribbeanGreen-500',
'dark:bg-caribbeanGreen-400',
'text-white',
'dark:text-black',
'border-caribbeanGreen-500',
'dark:border-caribbeanGreen-400',
]);
$disabledColors = implode(' ', [
'bg-white',
'dark:bg-black',
'text-caribbeanGreen-300',
'dark:text-caribbeanGreen-700',
'border-caribbeanGreen-300',
'dark:border-caribbeanGreen-700',
]);
@endphp
<div>
Expand All @@ -17,14 +62,14 @@
<span>
@if ($paginator->onFirstPage())
<span
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-caribbeanGreen-500 dark:text-caribbeanGreen-400 border border-caribbeanGreen-300 dark:border-caribbeanGreen-700 cursor-default leading-5 rounded-md">
class="relative inline-flex items-center px-4 py-2 text-sm font-medium border cursor-default leading-5 rounded-md {{ $disabledColors }}">
{!! __('pagination.previous') !!}
</span>
@else
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')"
x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled"
dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before"
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-caribbeanGreen-700 dark:text-caribbeanGreen-300 border border-caribbeanGreen-700 dark:border-caribbeanGreen-300 leading-5 rounded-md hover:text-caribbeanGreen-500 dark:hover:text-caribbeanGreen-400 focus:outline-none focus:ring ring-caribbeanGreen-300 dark:ring-caribbeanGreen-700 focus:border-caribbeanGreen-300 dark:focus:border-caribbeanGreen-700 active:text-caribbeanGreen-700 dark:active:text-caribbeanGreen-300 transition ease-in-out duration-150">
class="relative inline-flex items-center px-4 py-2 text-sm font-medium border leading-5 rounded-md focus:outline-none focus:ring transition ease-in-out duration-150 {{ $selectableColors }}">
{!! __('pagination.previous') !!}
</button>
@endif
Expand All @@ -35,12 +80,12 @@ class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-cari
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')"
x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled"
dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before"
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-caribbeanGreen-700 dark:text-caribbeanGreen-300 border border-caribbeanGreen-700 dark:border-caribbeanGreen-300 leading-5 rounded-md hover:text-caribbeanGreen-500 dark:hover:text-caribbeanGreen-400 focus:outline-none focus:ring ring-caribbeanGreen-300 dark:ring-caribbeanGreen-700 focus:border-caribbeanGreen-300 dark:focus:border-caribbeanGreen-700 active:text-caribbeanGreen-700 dark:active:text-caribbeanGreen-300 transition ease-in-out duration-150">
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium border leading-5 rounded-md focus:outline-none focus:ring transition ease-in-out duration-150 {{ $selectableColors }}">
{!! __('pagination.next') !!}
</button>
@else
<span
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-caribbeanGreen-500 dark:text-caribbeanGreen-400 border border-caribbeanGreen-300 dark:border-caribbeanGreen-700 cursor-default leading-5 rounded-md">
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium border cursor-default leading-5 rounded-md {{ $disabledColors }}">
{!! __('pagination.next') !!}
</span>
@endif
Expand All @@ -67,7 +112,7 @@ class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text
@if ($paginator->onFirstPage())
<span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
<span
class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-caribbeanGreen-300 dark:text-caribbeanGreen-700 bg-white dark:bg-black border border-caribbeanGreen-300 dark:border-caribbeanGreen-700 cursor-default rounded-l-md leading-5"
class="relative inline-flex items-center px-2 py-2 text-sm font-medium border cursor-default rounded-l-md leading-5 {{ $disabledColors }}"
aria-hidden="true">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
Expand All @@ -80,7 +125,7 @@ class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-cari
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')"
x-on:click="{{ $scrollIntoViewJsSnippet }}"
dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after"
class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-caribbeanGreen-500 dark:text-caribbeanGreen-400 bg-white dark:bg-black border border-caribbeanGreen-500 dark:border-caribbeanGreen-400 hover:border-caribbeanGreen-400 dark:hover:border-caribbeanGreen-600 rounded-l-md leading-5 hover:text-caribbeanGreen-400 dark:hover:text-caribbeanGreen-600 focus:z-10 focus:outline-none focus:ring ring-caribbeanGreen-700 dark:ring-caribbeanGreen-300 focus:border-caribbeanGreen-300 dark:focus:border-caribbeanGreen-700 active:text-caribbeanGreen-500 dark:active:text-caribbeanGreen-400 transition ease-in-out duration-150"
class="relative inline-flex items-center px-2 py-2 text-sm font-medium border rounded-l-md leading-5 focus:z-10 focus:outline-none focus:ring transition ease-in-out duration-150 {{ $selectableColors }}"
aria-label="{{ __('pagination.previous') }}">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
Expand All @@ -97,7 +142,7 @@ class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-cari
@if (is_string($element))
<span aria-disabled="true">
<span
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-caribbeanGreen-700 bg-white dark:bg-black border border-caribbeanGreen-300 cursor-default leading-5">{{ $element }}</span>
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium border cursor-default leading-5 {{ $disabledColors }}">{{ $element }}</span>
</span>
@endif
Expand All @@ -107,15 +152,15 @@ class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium te
<span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}">
@if ($page == $paginator->currentPage())
<span aria-current="page">
<span
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-caribbeanGreen-500 dark:text-caribbeanGreen-400 bg-white dark:bg-black border border-caribbeanGreen-700 dark:border-caribbeanGreen-300 cursor-default leading-5">{{ $page }}</span>
</span>
<span
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium border cursor-default leading-5 {{ $selectedColors }}">{{ $page }}</span>
</span>
@else
<button type="button"
wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')"
x-on:click="{{ $scrollIntoViewJsSnippet }}"
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-caribbeanGreen-500 dark:text-caribbeanGreen-400 bg-white dark:bg-black border border-caribbeanGreen-500 dark:border-caribbeanGreen-400 hover:border-caribbeanGreen-400 dark:hover:border-caribbeanGreen-600 leading-5 hover:text-caribbeanGreen-400 dark:hover:text-caribbeanGreen-600 focus:z-10 focus:outline-none focus:ring ring-caribbeanGreen-700 dark:ring-caribbeanGreen-300 focus:border-caribbeanGreen-300 dark:focus:border-caribbeanGreen-700 active:text-caribbeanGreen-500 dark:active:text-caribbeanGreen-400 transition ease-in-out duration-150"
aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium border leading-5 focus:z-10 focus:outline-none focus:ring transition ease-in-out duration-150 {{ $selectableColors }}"
aria-label="{{ __('Go to page :page', compact('page')) }}">
{{ $page }}
</button>
@endif
Expand All @@ -130,7 +175,7 @@ class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium te
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')"
x-on:click="{{ $scrollIntoViewJsSnippet }}"
dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after"
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-caribbeanGreen-500 dark:text-caribbeanGreen-400 bg-white dark:bg-black border border-caribbeanGreen-700 dark:border-caribbeanGreen-300 hover:border-caribbeanGreen-400 dark:hover:border-caribbeanGreen-600 rounded-r-md leading-5 hover:text-caribbeanGreen-400 dark:hover:text-caribbeanGreen-600 focus:z-10 focus:outline-none focus:ring ring-caribbeanGreen-300 dark:ring-caribbeanGreen-700 focus:border-caribbeanGreen-300 dark:focus:border-caribbeanGreen-700 active:text-caribbeanGreen-500 dark:active:text-caribbeanGreen-400 transition ease-in-out duration-150"
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium border rounded-r-md leading-5 focus:z-10 focus:outline-none focus:ring transition ease-in-out duration-150 {{ $selectableColors }}"
aria-label="{{ __('pagination.next') }}">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
Expand All @@ -141,7 +186,7 @@ class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium te
@else
<span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
<span
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-caribbeanGreen-300 dark:text-caribbeanGreen-700 bg-white dark:bg-black border border-caribbeanGreen-300 dark:border-caribbeanGreen-700 cursor-default rounded-r-md leading-5"
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium border cursor-default rounded-r-md leading-5 {{ $disabledColors }}"
aria-hidden="true">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd"
Expand Down

0 comments on commit a0f1262

Please sign in to comment.