Skip to content

Commit 47a6077

Browse files
vikdieselvikdiesel
committed
upd: components to tailwind v4
1 parent 621cf55 commit 47a6077

File tree

15 files changed

+241
-88
lines changed

15 files changed

+241
-88
lines changed

‎src/colors.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export const gradientBgBase = 'bg-gradient-to-tr'
1+
export const gradientBgBase = 'bg-linear-to-tr'
22
export const gradientBgPurplePink = `${gradientBgBase} from-purple-400 via-pink-500 to-red-500`
33
export const gradientBgDark = `${gradientBgBase} from-slate-700 via-slate-900 to-slate-800`
44
export const gradientBgPinkRed = `${gradientBgBase} from-pink-400 via-red-500 to-yellow-500`
@@ -67,16 +67,16 @@ export const getButtonColor = (color, isOutlined, hasHover, isActive = false) =>
6767
},
6868
bgHover: {
6969
white: 'hover:bg-gray-100',
70-
whiteDark: 'hover:bg-gray-100 hover:dark:bg-slate-800',
71-
lightDark: 'hover:bg-gray-200 hover:dark:bg-slate-700',
72-
contrast: 'hover:bg-gray-700 hover:dark:bg-slate-100',
70+
whiteDark: 'hover:bg-gray-100 dark:hover:bg-slate-800',
71+
lightDark: 'hover:bg-gray-200 dark:hover:bg-slate-700',
72+
contrast: 'hover:bg-gray-700 dark:hover:bg-slate-100',
7373
success:
74-
'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600',
74+
'hover:bg-emerald-700 hover:border-emerald-700 dark:hover:bg-emerald-600 dark:hover:border-emerald-600',
7575
danger:
76-
'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
76+
'hover:bg-red-700 hover:border-red-700 dark:hover:bg-red-600 dark:hover:border-red-600',
7777
warning:
78-
'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
79-
info: 'hover:bg-blue-700 hover:border-blue-700 hover:dark:bg-blue-600 hover:dark:border-blue-600'
78+
'hover:bg-yellow-700 hover:border-yellow-700 dark:hover:bg-yellow-600 dark:hover:border-yellow-600',
79+
info: 'hover:bg-blue-700 hover:border-blue-700 dark:hover:bg-blue-600 dark:hover:border-blue-600'
8080
},
8181
borders: {
8282
white: 'border-white',
@@ -97,14 +97,14 @@ export const getButtonColor = (color, isOutlined, hasHover, isActive = false) =>
9797
},
9898
outlineHover: {
9999
contrast:
100-
'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
100+
'hover:bg-gray-800 hover:text-gray-100 dark:hover:bg-slate-100 dark:hover:text-black',
101101
success:
102-
'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-emerald-600',
102+
'hover:bg-emerald-600 hover:text-white hover:text-white dark:hover:text-white dark:hover:border-emerald-600',
103103
danger:
104-
'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
104+
'hover:bg-red-600 hover:text-white hover:text-white dark:hover:text-white dark:hover:border-red-600',
105105
warning:
106-
'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
107-
info: 'hover:bg-blue-600 hover:text-white hover:dark:text-white hover:dark:border-blue-600'
106+
'hover:bg-yellow-600 hover:text-white hover:text-white dark:hover:text-white dark:hover:border-yellow-600',
107+
info: 'hover:bg-blue-600 hover:text-white dark:hover:text-white dark:hover:border-blue-600'
108108
}
109109
}
110110

‎src/components/BaseButton.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,13 @@ const componentClass = computed(() => {
8080
'justify-center',
8181
'items-center',
8282
'whitespace-nowrap',
83-
'focus:outline-none',
83+
'focus:outline-hidden',
8484
'transition-colors',
85-
'focus:ring',
85+
'focus:ring-3',
8686
'duration-150',
8787
'border',
8888
props.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
89-
props.roundedFull ? 'rounded-full' : 'rounded',
89+
props.roundedFull ? 'rounded-full' : 'rounded-sm',
9090
getButtonColor(props.color, props.outline, !props.disabled, props.active)
9191
]
9292

‎src/components/CardBoxComponentHeader.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const buttonClick = (event) => {
3131
</div>
3232
<button
3333
v-if="buttonIcon"
34-
class="flex items-center p-2 justify-center ring-blue-700 focus:ring"
34+
class="flex items-center p-2 justify-center ring-blue-700 focus:ring-3"
3535
@click="buttonClick"
3636
>
3737
<BaseIcon :path="buttonIcon" />

‎src/components/FormControl.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const computedValue = computed({
6161
6262
const inputElClass = computed(() => {
6363
const base = [
64-
'px-3 py-2 max-w-full focus:ring focus:outline-none border-gray-700 rounded w-full',
64+
'px-3 py-2 max-w-full focus:ring-3 focus:outline-hidden border-gray-700 rounded-sm w-full',
6565
'dark:placeholder-gray-400',
6666
computedType.value === 'textarea' ? 'h-24' : 'h-12',
6767
props.borderless ? 'border-0' : 'border',

‎src/components/FormFilePicker.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ const upload = (event) => {
9797
<input
9898
ref="root"
9999
type="file"
100-
class="absolute top-0 left-0 w-full h-full opacity-0 outline-none cursor-pointer -z-1"
100+
class="absolute top-0 left-0 w-full h-full opacity-0 outline-hidden cursor-pointer -z-1"
101101
:accept="accept"
102102
@input="upload"
103103
/>

‎src/components/OverlayLayer.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const overlayClick = (event) => {
3131
leave-to-class="opacity-0"
3232
>
3333
<div
34-
class="overlay absolute inset-0 bg-gradient-to-tr opacity-90 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700"
34+
class="overlay absolute inset-0 bg-linear-to-tr opacity-90 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700"
3535
@click="overlayClick"
3636
/>
3737
</transition>

‎src/css/_checkbox-radio-switch.css‎

Lines changed: 164 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,204 @@
1-
@layer components {
2-
.checkbox,
3-
.radio,
4-
.switch {
5-
@apply inline-flex items-center cursor-pointer relative;
1+
@utility checkbox {
2+
@apply inline-flex items-center cursor-pointer relative;
3+
4+
& input[type='checkbox'] {
5+
@apply absolute left-0 opacity-0 -z-1;
6+
}
7+
8+
& input[type='checkbox'] + .check {
9+
@apply border-gray-700 border transition-colors duration-200 dark:bg-slate-800;
10+
}
11+
12+
& input[type='checkbox']:focus + .check {
13+
@apply ring-3 ring-blue-700;
14+
}
15+
16+
& input[type='checkbox'] + .check {
17+
@apply block w-5 h-5;
18+
}
19+
20+
& input[type='checkbox'] + .check {
21+
@apply rounded-sm;
22+
}
23+
24+
& input[type='checkbox']:checked + .check {
25+
@apply bg-no-repeat bg-center border-4;
626
}
727

8-
.checkbox input[type='checkbox'],
9-
.radio input[type='radio'],
10-
.switch input[type='checkbox'] {
28+
& input[type='checkbox']:checked + .check {
29+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
30+
}
31+
32+
& input[type='checkbox']:checked + .check {
33+
@apply bg-blue-600 border-blue-600;
34+
}
35+
}
36+
37+
@utility radio {
38+
@apply inline-flex items-center cursor-pointer relative;
39+
40+
& input[type='radio'] {
1141
@apply absolute left-0 opacity-0 -z-1;
1242
}
1343

14-
.checkbox input[type='checkbox'] + .check,
15-
.radio input[type='radio'] + .check,
16-
.switch input[type='checkbox'] + .check {
44+
& input[type='radio'] + .check {
45+
@apply border-gray-700 border transition-colors duration-200 dark:bg-slate-800;
46+
}
47+
48+
& input[type='radio']:focus + .check {
49+
@apply ring-3 ring-blue-700;
50+
}
51+
52+
& input[type='radio'] + .check {
53+
@apply block w-5 h-5;
54+
}
55+
56+
& input[type='radio'] + .check {
57+
@apply rounded-full;
58+
}
59+
60+
& input[type='radio']:checked + .check {
61+
@apply bg-no-repeat bg-center border-4;
62+
}
63+
64+
& input[type='radio']:checked + .check {
65+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
66+
}
67+
68+
& input[type='radio']:checked + .check {
69+
@apply bg-blue-600 border-blue-600;
70+
}
71+
}
72+
73+
@utility switch {
74+
@apply inline-flex items-center cursor-pointer relative;
75+
76+
& input[type='checkbox'] {
77+
@apply absolute left-0 opacity-0 -z-1;
78+
}
79+
80+
& input[type='checkbox'] + .check {
81+
@apply border-gray-700 border transition-colors duration-200 dark:bg-slate-800;
82+
}
83+
84+
& input[type='checkbox']:focus + .check {
85+
@apply ring-3 ring-blue-700;
86+
}
87+
88+
& input[type='checkbox'] + .check {
89+
@apply flex items-center shrink-0 w-12 h-6 p-0.5 bg-gray-200;
90+
}
91+
92+
& input[type='checkbox'] + .check {
93+
@apply rounded-full;
94+
}
95+
96+
& input[type='checkbox'] + .check:before {
97+
@apply rounded-full;
98+
}
99+
100+
& input[type='checkbox']:checked + .check {
101+
@apply bg-blue-600 border-blue-600;
102+
}
103+
104+
& input[type='checkbox'] + .check:before {
105+
content: '';
106+
@apply block w-5 h-5 bg-white border border-gray-700;
107+
}
108+
109+
& input[type='checkbox']:checked + .check:before {
110+
transform: translate3d(110%, 0, 0);
111+
@apply border-blue-600;
112+
}
113+
}
114+
115+
@utility check {
116+
.checkbox input[type='checkbox'] + & {
17117
@apply border-gray-700 border transition-colors duration-200 dark:bg-slate-800;
18118
}
19119

20-
.checkbox input[type='checkbox']:focus + .check,
21-
.radio input[type='radio']:focus + .check,
22-
.switch input[type='checkbox']:focus + .check {
23-
@apply ring ring-blue-700;
120+
.radio input[type='radio'] + & {
121+
@apply border-gray-700 border transition-colors duration-200 dark:bg-slate-800;
24122
}
25123

26-
.checkbox input[type='checkbox'] + .check,
27-
.radio input[type='radio'] + .check {
124+
.switch input[type='checkbox'] + & {
125+
@apply border-gray-700 border transition-colors duration-200 dark:bg-slate-800;
126+
}
127+
128+
.checkbox input[type='checkbox']:focus + & {
129+
@apply ring-3 ring-blue-700;
130+
}
131+
132+
.radio input[type='radio']:focus + & {
133+
@apply ring-3 ring-blue-700;
134+
}
135+
136+
.switch input[type='checkbox']:focus + & {
137+
@apply ring-3 ring-blue-700;
138+
}
139+
140+
.checkbox input[type='checkbox'] + & {
28141
@apply block w-5 h-5;
29142
}
30143

31-
.checkbox input[type='checkbox'] + .check {
32-
@apply rounded;
144+
.radio input[type='radio'] + & {
145+
@apply block w-5 h-5;
146+
}
147+
148+
.checkbox input[type='checkbox'] + & {
149+
@apply rounded-sm;
33150
}
34151

35-
.switch input[type='checkbox'] + .check {
152+
.switch input[type='checkbox'] + & {
36153
@apply flex items-center shrink-0 w-12 h-6 p-0.5 bg-gray-200;
37154
}
38155

39-
.radio input[type='radio'] + .check,
40-
.switch input[type='checkbox'] + .check,
41-
.switch input[type='checkbox'] + .check:before {
156+
.radio input[type='radio'] + & {
157+
@apply rounded-full;
158+
}
159+
160+
.switch input[type='checkbox'] + & {
42161
@apply rounded-full;
43162
}
44163

45-
.checkbox input[type='checkbox']:checked + .check,
46-
.radio input[type='radio']:checked + .check {
164+
.switch input[type='checkbox'] + &:before {
165+
@apply rounded-full;
166+
}
167+
168+
.checkbox input[type='checkbox']:checked + & {
169+
@apply bg-no-repeat bg-center border-4;
170+
}
171+
172+
.radio input[type='radio']:checked + & {
47173
@apply bg-no-repeat bg-center border-4;
48174
}
49175

50-
.checkbox input[type='checkbox']:checked + .check {
176+
.checkbox input[type='checkbox']:checked + & {
51177
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
52178
}
53179

54-
.radio input[type='radio']:checked + .check {
180+
.radio input[type='radio']:checked + & {
55181
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
56182
}
57183

58-
.switch input[type='checkbox']:checked + .check,
59-
.checkbox input[type='checkbox']:checked + .check,
60-
.radio input[type='radio']:checked + .check {
184+
.switch input[type='checkbox']:checked + & {
185+
@apply bg-blue-600 border-blue-600;
186+
}
187+
188+
.checkbox input[type='checkbox']:checked + & {
189+
@apply bg-blue-600 border-blue-600;
190+
}
191+
192+
.radio input[type='radio']:checked + & {
61193
@apply bg-blue-600 border-blue-600;
62194
}
63195

64-
.switch input[type='checkbox'] + .check:before {
196+
.switch input[type='checkbox'] + &:before {
65197
content: '';
66198
@apply block w-5 h-5 bg-white border border-gray-700;
67199
}
68200

69-
.switch input[type='checkbox']:checked + .check:before {
201+
.switch input[type='checkbox']:checked + &:before {
70202
transform: translate3d(110%, 0, 0);
71203
@apply border-blue-600;
72204
}

‎src/css/_scrollbars.css‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
1+
@utility dark-scrollbars-compat {
2+
scrollbar-color: rgb(71, 85, 105) rgb(30, 41, 59);
3+
}
4+
5+
@utility dark-scrollbars {
6+
&::-webkit-scrollbar-track {
7+
@apply bg-slate-800;
8+
}
9+
10+
&::-webkit-scrollbar-thumb {
11+
@apply bg-slate-600;
12+
}
13+
14+
&::-webkit-scrollbar-thumb:hover {
15+
@apply bg-slate-500;
16+
}
17+
}
18+
119
@layer base {
220
html {
321
scrollbar-width: thin;
@@ -14,28 +32,10 @@
1432
}
1533

1634
body::-webkit-scrollbar-thumb {
17-
@apply bg-gray-400 rounded;
35+
@apply bg-gray-400 rounded-sm;
1836
}
1937

2038
body::-webkit-scrollbar-thumb:hover {
2139
@apply bg-gray-500;
2240
}
2341
}
24-
25-
@layer utilities {
26-
.dark-scrollbars-compat {
27-
scrollbar-color: rgb(71, 85, 105) rgb(30, 41, 59);
28-
}
29-
30-
.dark-scrollbars::-webkit-scrollbar-track {
31-
@apply bg-slate-800;
32-
}
33-
34-
.dark-scrollbars::-webkit-scrollbar-thumb {
35-
@apply bg-slate-600;
36-
}
37-
38-
.dark-scrollbars::-webkit-scrollbar-thumb:hover {
39-
@apply bg-slate-500;
40-
}
41-
}

0 commit comments

Comments
 (0)