Skip to content

Commit aeb4b6e

Browse files
QuentinGabQuentinGab
committed
improve input and remove segments
1 parent 15b9286 commit aeb4b6e

File tree

7 files changed

+52
-55
lines changed

7 files changed

+52
-55
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ composer require elegantly/blade-kit
1818
To make it work with tailwindcss v4, you must add the following lines to your `app.css`.
1919

2020
```css
21-
@import "../../vendor/elegantly/blade-kit/styles.css";
21+
@import "../../vendor/elegantly/blade-kit/resources/css/styles.css";
2222
@source "../../vendor/elegantly/blade-kit/resources/views/**/*.blade.php";
2323
```
2424

‎resources/css/components/button.css‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
@layer components {
22
.el-button {
3-
@apply shrink-0 relative align-middle inline-flex items-center outline-offset-2 transition-colors cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 active:outline-2;
3+
@apply shrink-0 relative align-middle inline-flex items-center outline-offset-2 transition-colors cursor-pointer
4+
disabled:cursor-not-allowed disabled:opacity-50
5+
focus-visible:outline-2
6+
active:outline-2
7+
has-focus-visible:outline-2;
48

59
& input {
610
@apply pointer-events-none absolute left-0 top-0 size-full appearance-none opacity-0;
@@ -40,62 +44,62 @@
4044
}
4145

4246
&[data-color="black"] {
43-
@apply hover:bg-gray-700 hover:text-white dark:hover:bg-zinc-300 dark:hover:text-black has-checked:bg-black has-checked:text-white;
47+
@apply hover:bg-gray-700 hover:text-white dark:hover:bg-zinc-300 dark:hover:text-black;
4448
}
4549
&[data-color="white"] {
46-
@apply hover:bg-gray-100 hover:text-black dark:hover:bg-zinc-900 dark:hover:text-white has-checked:bg-white has-checked:text-black;
50+
@apply hover:bg-gray-100 hover:text-black dark:hover:bg-zinc-900 dark:hover:text-white;
4751
}
4852
&[data-color="gray"] {
4953
@apply hover:bg-gray-200 hover:text-gray-900;
5054
}
5155
&[data-color="sky"] {
52-
@apply hover:bg-sky-600 hover:text-white has-checked:bg-sky-500 has-checked:text-white;
56+
@apply hover:bg-sky-600 hover:text-white;
5357
}
5458
&[data-color="sky-light"] {
5559
@apply hover:bg-sky-400/40 hover:text-sky-800;
5660
}
5761
&[data-color="emerald"] {
58-
@apply hover:bg-emerald-600 hover:text-white has-checked:bg-emerald-500 has-checked:text-white;
62+
@apply hover:bg-emerald-600 hover:text-white;
5963
}
6064
&[data-color="emerald-light"] {
6165
@apply hover:bg-emerald-400/40 hover:text-emerald-800;
6266
}
6367
&[data-color="rose"] {
64-
@apply hover:bg-rose-600 hover:text-white has-checked:bg-rose-500 has-checked:text-white;
68+
@apply hover:bg-rose-600 hover:text-white;
6569
}
6670
&[data-color="rose-light"] {
6771
@apply hover:bg-rose-400/40 hover:text-rose-800;
6872
}
6973
&[data-color="purple"] {
70-
@apply hover:bg-purple-600 hover:text-white has-checked:bg-purple-500 has-checked:text-white;
74+
@apply hover:bg-purple-600 hover:text-white;
7175
}
7276
&[data-color="purple-light"] {
7377
@apply hover:bg-purple-400/40 hover:text-purple-800;
7478
}
7579
&[data-color="amber"] {
76-
@apply hover:bg-amber-600 hover:text-white has-checked:bg-amber-500 has-checked:text-white;
80+
@apply hover:bg-amber-600 hover:text-white;
7781
}
7882
&[data-color="amber-light"] {
7983
@apply hover:bg-amber-400/40 hover:text-amber-800;
8084
}
8185

8286
&[data-color-checked="black"] {
83-
@apply has-checked:bg-black has-checked:text-white;
87+
@apply has-checked:bg-black has-checked:text-white has-checked:ring-black has-checked:border-black;
8488
}
8589
&[data-color-checked="white"] {
8690
@apply has-checked:bg-white has-checked:text-black;
8791
}
8892
&[data-color-checked="sky"] {
89-
@apply has-checked:bg-sky-500 has-checked:text-white;
93+
@apply has-checked:bg-sky-500 has-checked:text-white has-checked:ring-sky-600 has-checked:border-sky-600;
9094
}
9195
&[data-color-checked="rose"] {
92-
@apply has-checked:bg-rose-500 has-checked:text-white;
96+
@apply has-checked:bg-rose-500 has-checked:text-white has-checked:ring-rose-600 has-checked:border-rose-600;
9397
}
9498
&[data-color-checked="amber"] {
95-
@apply has-checked:bg-amber-500 has-checked:text-white;
99+
@apply has-checked:bg-amber-500 has-checked:text-white has-checked:ring-amber-600 has-checked:border-amber-600;
96100
}
97101
&[data-color-checked="emerald"] {
98-
@apply has-checked:bg-emerald-500 has-checked:text-white;
102+
@apply has-checked:bg-emerald-500 has-checked:text-white has-checked:ring-emerald-600 has-checked:border-emerald-600;
99103
}
100104
}
101105
}

‎resources/views/components/input/base.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@
44
'disabled' => false,
55
])
66

7-
<input {{ $attributes->class(['el-input el-bg el-outline el-ring']) }} data-color="{{ $color }}"
7+
<input {{ $attributes->class(['el-input el-text el-bg el-outline el-ring']) }} data-color="{{ $color }}"
88
data-size="{{ $size }}" @disabled($disabled) />

‎resources/views/components/segments/button.blade.php‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎resources/views/components/segments/index.blade.php‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎resources/views/components/textarea/index.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
'autosized' => false,
88
])
99

10-
<textarea {{ $attributes->class(['el-textarea el-spacing el-bg el-outline']) }} data-size="{{ $size }}"
10+
<textarea {{ $attributes->class(['el-textarea el-text el-spacing el-bg el-outline']) }} data-size="{{ $size }}"
1111
data-color="{{ $color }}" @if ($autosized) autosized @endif rows="{{ $rows }}"
1212
autocomplete="{{ $autocomplete }}" spellcheck="{{ $spellcheck }}"
1313
{{ when($autocomplete === 'off', 'data-1p-ignore data-bwignore data-lpignore="true" data-form-type="other"') }}

‎workbench/resources/views/demo.blade.php‎

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,29 @@ class="rounded-md ring-1 ring-inset">
123123
</div>
124124
</div>
125125

126+
<div class="isolate flex flex-col">
127+
<div class="p-3">
128+
<h1 class="font-semibold">Segments</h1>
129+
</div>
130+
<div class="flex grow items-center justify-center border-b border-gray-200">
131+
<div class="*:has-checked:shadow-sm flex rounded-lg bg-gray-100 p-1 *:rounded-md">
132+
<x-kit::button color-checked="white">
133+
<x-slot:input>
134+
<input type="radio" name="segment" value="1" checked />
135+
</x-slot:input>
136+
Home
137+
</x-kit::button>
138+
139+
<x-kit::button color-checked="white">
140+
<x-slot:input>
141+
<input type="radio" name="segment" value="2" />
142+
</x-slot:input>
143+
Settings
144+
</x-kit::button>
145+
</div>
146+
</div>
147+
</div>
148+
126149
<div class="isolate flex flex-col">
127150
<div class="p-3">
128151
<h1 class="font-semibold">Tag</h1>
@@ -355,11 +378,11 @@ class="rounded ring-1 ring-inset">
355378
<h1 class="font-semibold">Input</h1>
356379
</div>
357380
<div class="flex grow items-center justify-center border-b border-gray-200">
358-
<x-kit::input color="white" class="items-center rounded-md ring-1 ring-inset">
381+
<x-kit::input color="white" size="lg" class="items-center rounded-md ring-1 ring-inset">
359382

360383
<x-slot:start>
361-
<x-kit::tag size="xs" color="gray" class="ml-1 rounded">
362-
tag
384+
<x-kit::tag size="sm" color="gray" class="ml-1 rounded">
385+
EUR
363386
</x-kit::tag>
364387
</x-slot:start>
365388

@@ -374,8 +397,8 @@ class="rounded ring-1 ring-inset">
374397
</x-kit::input.icon>
375398

376399
<x-slot:end>
377-
<x-kit::button size="xs" color="black" class="mr-1 rounded">
378-
button
400+
<x-kit::button size="sm" color="black" class="mr-1 rounded">
401+
New
379402

380403
<x-slot:icon-right>
381404
<iconify-icon icon="heroicons:plus"></iconify-icon>
@@ -393,7 +416,8 @@ class="rounded ring-1 ring-inset">
393416
<h1 class="font-semibold">Input</h1>
394417
</div>
395418
<div class="flex grow items-center justify-center border-b border-gray-200">
396-
<x-kit::input.base class="rounded-md ring-1 ring-inset" color="white" placeholder="Placeholder" />
419+
<x-kit::input.base color="white" size="lg" class="rounded-md ring-1 ring-inset"
420+
placeholder="Placeholder" />
397421
</div>
398422
</div>
399423

@@ -403,7 +427,8 @@ class="rounded ring-1 ring-inset">
403427
<h1 class="font-semibold">Textarea</h1>
404428
</div>
405429
<div class="flex grow items-center justify-center border-b border-gray-200">
406-
<x-kit::textarea color="white" autosized class="w-1/2 rounded-md ring-1 ring-inset" />
430+
<x-kit::textarea color="white" size="lg" autosized
431+
class="w-1/2 rounded-md ring-1 ring-inset" />
407432
</div>
408433
</div>
409434

0 commit comments

Comments
 (0)