Merge pull request #2698 from brkcvn/tailwind-3.2

Tailwind upgraded to 3.2.1 version
This commit is contained in:
Cüneyt Şentürk 2022-10-31 00:05:39 +03:00 committed by GitHub
commit bd45ee1ea1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 2314 additions and 1646 deletions

View File

@ -42,7 +42,7 @@ class Tr extends Component
$values = $self->getValue();
if (array_key_exists('App\View\Components\Table\Tbody', $values)) {
return 'relative flex items-center px-1 group border-b hover:bg-gray-100';
return 'relative flex items-center px-1 group/actions border-b hover:bg-gray-100';
}
else if (array_key_exists('App\View\Components\Table\Thead', $values)) {

View File

@ -14,7 +14,7 @@ class Menu extends Presenter
{
return PHP_EOL . '<div class="navbar-inner">
<!-- Collapse -->
<div class="collapse" id="sidenav-collapse-main">
<div id="sidenav-collapse-main">
<!-- Nav items -->
<ul class="flex flex-col justify-center">' . PHP_EOL;
}

View File

@ -37,7 +37,7 @@
"popper.js": "^1.16.1",
"swiper": "^7.3.1",
"tailwind": "^4.0.0",
"tailwindcss": "^3.0.23",
"tailwindcss": "^3.2.1",
"v-money": "^0.8.1",
"vee-validate": "^2.2.15",
"vue": "^2.6.10",

2
presets.js vendored
View File

@ -20,7 +20,7 @@ module.exports = {
safelist: [
{
pattern: /./,
pattern: /^[^/&]*$/,
},
{
pattern: /^p-/,

3797
public/css/app.css vendored

File diff suppressed because it is too large Load Diff

View File

@ -27,7 +27,7 @@
</thead>
<tbody data-table-body>
<tr v-for="(item, index) in currencies" :key="index" data-table-list class="relative flex items-center border-b hover:bg-gray-100 px-1 flex-wrap group">
<tr v-for="(item, index) in currencies" :key="index" data-table-list class="relative flex items-center border-b hover:bg-gray-100 px-1 flex-wrap group/actions">
<td :class="current_tab == index ? 'hidden' : ''" class="w-4/12 ltr:pr-6 rtl:pl-6 py-4 ltr:text-left rtl:text-right whitespace-nowrap text-sm font-medium text-black">
{{ item.name }}
@ -37,7 +37,7 @@
</span>
<div id="wizard-currency-default" role="tooltip"
class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm tooltip-content whitespace-normal opacity-0 invisible"
class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-normal opacity-0 invisible"
>
{{ translations.currencies.default }}
<div
@ -56,20 +56,20 @@
<td :class="current_tab == index ? 'hidden' : ''" class="w-4/12 relative ltr:pr-6 rtl:pl-6 py-4 ltr:text-right rtl:text-left whitespace-nowrap text-sm font-medium text-black">
{{ item.rate }}
<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions " @click="onEditItem(item, index)">
<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover/actions:flex">
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer group/tooltip index-actions" @click="onEditItem(item, index)">
<span class="material-icons-outlined text-purple text-lg">edit</span>
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap tooltip-content -top-10 -left-2" data-tooltip-placement="top">
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
<span>{{ translations.currencies.edit }}</span>
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
</div>
</button>
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions " @click="onClickDelete(item)">
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer group/tooltip index-actions" @click="onClickDelete(item)">
<span class="material-icons-outlined text-purple text-lg">delete</span>
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap tooltip-content -top-10 -left-2" data-tooltip-placement="top">
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
<span>{{ translations.currencies.delete }}</span>
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
</div>

View File

@ -6,6 +6,44 @@
@tailwind utilities;
@layer container {
.container {
@apply px-4 lg:px-0;
}
}
@layer utilities {
.max-h-0 {
max-height: 0;
}
/* index */
.index-actions {
@apply ltr:[&:nth-child(2)]:border-l ltr:[&:nth-child(3)]:border-l-0 rtl:[&:nth-child(2)]:border-r rtl:[&:nth-child(3)]:border-r-0 ltr:[&:first-child]:rounded-tl-lg ltr:[&:first-child]:rounded-bl-lg ltr:[&:first-child]:border-r-0 rtl:[&:first-child]:rounded-tr-lg rtl:[&:first-child]:rounded-br-lg rtl:[&:first-child]:border-l-0 ltr:[&:last-child]:rounded-tr-lg ltr:[&:last-child]:rounded-br-lg ltr:[&:last-child]:border-l-0 rtl:[&:last-child]:rounded-tl-lg rtl:[&:last-child]:rounded-bl-lg rtl:[&:last-child]:border-r-0;
}
[data-dropdown-actions] {
transform: unset !important;
}
table thead a {
@apply bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-black transition-backgroundSize;
}
table thead a:hover {
@apply border-black;
}
.tabs-link::before {
content: '';
@apply w-full h-0.5 absolute left-0 right-0 bottom-0 bg-purple rounded-tl-md rounded-tr-md opacity-0 invisible transition-all;
}
.tabs-link:hover::before {
@apply opacity-100 visible;
}
/* index */
}
@layer base {
/* form */
.has-error input, .has-error select, .has-error textarea {
@ -28,78 +66,9 @@
[type="radio"] {
@apply text-purple focus:outline-none focus:ring-purple focus:border-purple;
}
.container {
@apply px-4 lg:px-0;
}
.max-h-0 {
max-height: 0;
}
.h-0 {
height: auto;
}
/* form */
/* index */
.index-actions:hover .tooltip-content {
@apply opacity-100 visible;
}
html[dir='ltr'] .index-actions:first-child {
@apply rounded-tl-lg rounded-bl-lg border-r-0;
}
html[dir='rtl'] .index-actions:first-child {
@apply rounded-tr-lg rounded-br-lg border-l-0;
}
html[dir='ltr'] .index-actions:last-child {
@apply rounded-tr-lg rounded-br-lg border-l-0;
}
html[dir='rtl'] .index-actions:last-child {
@apply rounded-tl-lg rounded-bl-lg border-r-0;
}
html[dir='ltr'] .index-actions:nth-child(2) {
@apply border-l;
}
html[dir='rtl'] .index-actions:nth-child(2) {
@apply border-r;
}
html[dir='ltr'] .index-actions:nth-child(3) {
@apply border-l-0;
}
html[dir='rtl'] .index-actions:nth-child(3) {
@apply border-r-0;
}
[data-dropdown-actions] {
transform: unset !important;
}
table thead a {
@apply bg-no-repeat bg-0-2 bg-0-full hover:bg-full-2 bg-gradient-to-b from-transparent to-black transition-backgroundSize;
}
table thead a:hover {
@apply border-black;
}
.tabs-link::before {
content: '';
@apply w-full h-0.5 absolute left-0 right-0 bottom-0 bg-purple rounded-tl-md rounded-tr-md opacity-0 invisible transition-all;
}
.tabs-link:hover::before {
@apply opacity-100 visible;
}
.active-tabs {
border-color: transparent !important;
}
@ -216,6 +185,12 @@
@apply px-0 lg:pl-6 lg:pr-6;
}
/* widget container name will change as lg:px-12 on database. When container class name change on database, this code will clean */
/* after the upgrade tailwind 3.2.1, this tags font-weight changed. Added this block for now */
button, input, optgroup, select, textarea {
@apply font-normal;
}
/* after the upgrade tailwind 3.2.1, this tags font-weight changed. Added this block for now */
}
/* menu */

View File

@ -1,6 +1,6 @@
<x-button
type="button"
class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions"
class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer group/tooltip index-actions"
@click="onDeleteViaConfirmation('delete-{{ $modelTable }}-{{ $id }}')"
override="class"
{{ $attributes }}
@ -9,7 +9,7 @@
{!! $slot !!}
@else
<span class="material-icons-outlined text-purple text-lg pointer-events-none">delete</span>
<div class="inline-block absolute invisible z-10 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap tooltip-content -top-10 -left-2" data-tooltip-placement="top">
<div class="inline-block absolute invisible z-10 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
<span>{!! $label !!}</span>
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
</div>

View File

@ -1,4 +1,4 @@
<div id="{{ $id }}" role="tooltip" class="w-full lg:w-96 inline-block absolute left-0 z-10 text-sm font-medium rounded-lg border border-gray-200 shadow-sm whitespace-nowrap tooltip-content transition-visible bg-lilac-900 border-none text-black p-6 cursor-auto opacity-0 invisible information-content">
<div id="{{ $id }}" role="tooltip" class="w-full lg:w-96 inline-block absolute left-0 z-10 text-sm font-medium rounded-lg border border-gray-200 shadow-sm whitespace-nowrap transition-visible bg-lilac-900 border-none text-black p-6 cursor-auto opacity-0 invisible information-content">
<div class="absolute w-2 h-2 inset-y-1/2 -right-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-lilac-900 before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0 data-popper-arrow"></div>
<ul>

View File

@ -50,7 +50,7 @@
@endif
</div>
<div id="tooltip-profile" class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-nowrap tooltip-content opacity-0 invisible">
<div id="tooltip-profile" class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-nowrap opacity-0 invisible">
{{ trans('auth.profile') }}
<div class="absolute w-2 h-2 before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border -left-1 before:border-t-0 before:border-r-0 border-gray-200" data-popper-arrow></div>
</div>

View File

@ -34,7 +34,7 @@
@endif
</div>
<div id="tooltip-profile" class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-nowrap tooltip-content opacity-0 invisible">
<div id="tooltip-profile" class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-nowrap opacity-0 invisible">
{{ trans('auth.profile') }}
<div class="absolute w-2 h-2 before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border -left-1 before:border-t-0 before:border-r-0 border-gray-200" data-popper-arrow></div>
</div>

View File

@ -3,7 +3,7 @@
$more_actions = [];
@endphp
<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover/actions:flex">
@foreach ($actions as $action)
@if (! empty($action['permission']))
@can($action['permission'])
@ -19,12 +19,12 @@
@switch($type)
@case('button')
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group" {!! $action['attributes'] ?? null !!}>
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group/tooltip" {!! $action['attributes'] ?? null !!}>
<span class="material-icons-outlined text-purple text-lg pointer-events-none">
{{ $action['icon'] }}
</span>
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 tooltip-content -top-10 -left-2" data-tooltip-placement="top">
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
<span>{{ $action['title'] }}</span>
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
</div>
@ -42,12 +42,12 @@
@break
@default
<a href="{{ $action['url'] }}" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions" {!! $action['attributes'] ?? null !!}>
<a href="{{ $action['url'] }}" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group/tooltip" {!! $action['attributes'] ?? null !!}>
<span class="material-icons-outlined text-purple text-lg pointer-events-none">
{{ $action['icon'] }}
</span>
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 tooltip-content -top-10 -left-2" data-tooltip-placement="top">
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
<span>{{ $action['title'] }}</span>
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
</div>

View File

@ -20,7 +20,7 @@
$size,
'border',
$borderColor,
'shadow-sm opacity-0 tooltip-content',
'shadow-sm opacity-0',
$whitespace
])
>

View File

@ -13,12 +13,12 @@
</span>
@if ($pinned)
<div id="{{ $report->id }}-pin" role="tooltip" class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 tooltip-content">
<div id="{{ $report->id }}-pin" role="tooltip" class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0">
{{ trans('reports.pin_text.unpin_report') }}
<div class="absolute w-2 h-2 -top-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-b-0 before:border-r-0" data-popper-arrow></div>
</div>
@else
<div id="{{ $report->id }}-pin" role="tooltip" class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 tooltip-content">
<div id="{{ $report->id }}-pin" role="tooltip" class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0">
{{ trans('reports.pin_text.pin_report') }}
<div class="absolute w-2 h-2 -top-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-b-0 before:border-r-0" data-popper-arrow></div>
</div>

View File

@ -65,7 +65,7 @@
<x-table.tbody>
@foreach($categories as $item)
<x-table.tr href="{{ route('categories.edit', $item->id) }}" class="relative flex items-center border-b hover:bg-gray-100 px-1 group transition-all">
<x-table.tr href="{{ route('categories.edit', $item->id) }}">
<x-table.td kind="bulkaction">
<x-index.bulkaction.single id="{{ $item->id }}" name="{{ $item->name }}" />
</x-table.td>