Skip to content

Commit f3127e7

Browse files
ameer2468ameer2468
committed
fix responsivenesss of switch in bento
1 parent 076b415 commit f3127e7

File tree

4 files changed

+156
-46
lines changed

4 files changed

+156
-46
lines changed

‎apps/dashboard/components/ui/switch.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ function Switch({
1313
<SwitchPrimitive.Root
1414
data-slot="switch"
1515
className={cn(
16-
'peer inline-flex h-[1.15rem] overflow-hidden rounded-sm data-[state=checked]:border-blue-700 data-[state=unchecked]:badge-angled-rectangle-gradient data-[state=checked]:blue-angled-rectangle-gradient w-9 shrink-0 border border-accent-brighter items-center outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
16+
'peer inline-flex h-[1.15rem] overflow-hidden disabled:data-[state=checked]:border-foreground rounded-sm data-[state=checked]:border-blue-700 data-[state=unchecked]:badge-angled-rectangle-gradient data-[state=checked]:blue-angled-rectangle-gradient w-9 shrink-0 border border-accent-brighter items-center outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
1717
className
1818
)}
1919
{...props}

‎apps/docs/app/global.css‎

Lines changed: 150 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -212,86 +212,196 @@
212212
}
213213

214214

215-
216215
/* Angled Rectangle Gradient - Modal footer */
217-
218-
.dark .angled-rectangle-gradient {
219-
background-image: repeating-linear-gradient(-50deg, rgba(47, 47, 52, 0.5) 0px, rgba(47, 47, 52, 0.5) 1px, transparent 1px, transparent 5px);
220-
}
221-
222-
.angled-rectangle-gradient {
223-
background-image: repeating-linear-gradient(-50deg, rgba(50, 50, 50, 0.1) 0px, rgba(50, 50, 50, 0.1) 1px, transparent 1px, transparent 5px);
216+
@utility angled-rectangle-gradient {
217+
position: relative;
218+
isolation: isolate;
219+
}
220+
221+
.angled-rectangle-gradient::before {
222+
content: '';
223+
position: absolute;
224+
inset: 0;
225+
background-image: repeating-linear-gradient(
226+
-50deg,
227+
rgba(50, 50, 50, 0.1) 0px,
228+
rgba(50, 50, 50, 0.1) 1px,
229+
transparent 1px,
230+
transparent 5px
231+
);
232+
pointer-events: none;
233+
z-index: -1;
234+
border-radius: inherit;
235+
}
236+
237+
.dark .angled-rectangle-gradient::before {
238+
background-image: repeating-linear-gradient(
239+
-50deg,
240+
rgba(255, 255, 255, 0.08) 0px,
241+
rgba(255, 255, 255, 0.08) 1px,
242+
transparent 1px,
243+
transparent 5px
244+
);
224245
}
225246

226247
/* Notice banner Angled Rectangle Gradient */
227-
228-
.dark .notice-banner-angled-rectangle-gradient {
229-
background-image: repeating-linear-gradient(-50deg, rgba(255, 255, 255, 0.15) 0px, rgba(255, 255, 255, 0.15) 1px, transparent 1px, transparent 5px);
248+
@utility notice-banner-angled-rectangle-gradient {
249+
background-image: repeating-linear-gradient(
250+
-50deg,
251+
rgba(255, 255, 255, 0.09) 0px,
252+
rgba(255, 255, 255, 0.09) 1px,
253+
transparent 1px,
254+
transparent 5px
255+
);
230256
}
231257

232-
.notice-banner-angled-rectangle-gradient {
233-
background-image: repeating-linear-gradient(-50deg, rgba(255, 255, 255, 0.09) 0px, rgba(255, 255, 255, 0.09) 1px, transparent 1px, transparent 5px);
258+
.dark .notice-banner-angled-rectangle-gradient {
259+
background-image: repeating-linear-gradient(
260+
-50deg,
261+
rgba(255, 255, 255, 0.15) 0px,
262+
rgba(255, 255, 255, 0.15) 1px,
263+
transparent 1px,
264+
transparent 5px
265+
);
234266
}
235267

236268
/* Badge Angled Rectangle Gradient */
237-
238-
.dark-angled-rectangle-gradient {
239-
background-image: repeating-linear-gradient(-50deg, rgba(255, 255, 255, 0.15) 0px, rgba(255, 255, 255, 0.15) 1px, transparent 1px, transparent 5px);
269+
@utility dark-angled-rectangle-gradient {
270+
background-image: repeating-linear-gradient(
271+
-50deg,
272+
rgba(255, 255, 255, 0.15) 0px,
273+
rgba(255, 255, 255, 0.15) 1px,
274+
transparent 1px,
275+
transparent 5px
276+
);
240277
}
241278

242279
.dark .dark-angled-rectangle-gradient {
243-
background-image: repeating-linear-gradient(-50deg, rgba(255, 255, 255, 0.4) 0px, rgba(255, 255, 255, 0.4) 1px, transparent 1px, transparent 5px);
280+
background-image: repeating-linear-gradient(
281+
-50deg,
282+
rgba(255, 255, 255, 0.4) 0px,
283+
rgba(255, 255, 255, 0.4) 1px,
284+
transparent 1px,
285+
transparent 5px
286+
);
244287
}
245288

246-
.badge-angled-rectangle-gradient {
247-
background-image: repeating-linear-gradient(-50deg, rgba(105, 105, 105, 0.17) 0px, rgba(105, 105, 105, 0.17) 1px, transparent 1px, transparent 5px);
289+
@utility badge-angled-rectangle-gradient {
290+
background-image: repeating-linear-gradient(
291+
-50deg,
292+
rgba(105, 105, 105, 0.17) 0px,
293+
rgba(105, 105, 105, 0.17) 1px,
294+
transparent 1px,
295+
transparent 5px
296+
);
248297
}
249298

250299
.dark .badge-angled-rectangle-gradient {
251-
background-image: repeating-linear-gradient(-50deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 5px);
300+
background-image: repeating-linear-gradient(
301+
-50deg,
302+
rgba(255, 255, 255, 0.1) 0px,
303+
rgba(255, 255, 255, 0.1) 1px,
304+
transparent 1px,
305+
transparent 5px
306+
);
252307
}
253308

309+
/* Red Angled Rectangle Gradient */
310+
@utility red-angled-rectangle-gradient {
311+
background-image: repeating-linear-gradient(
312+
-50deg,
313+
rgba(121, 16, 16, 0.1) 0px,
314+
rgba(121, 16, 16, 0.1) 1px,
315+
transparent 1px,
316+
transparent 5px
317+
);
318+
}
254319

255-
/* Green Angled Rectangle Gradient */
320+
.dark .red-angled-rectangle-gradient {
321+
background-image: repeating-linear-gradient(
322+
-50deg,
323+
rgba(255, 176, 176, 0.3) 0px,
324+
rgba(255, 176, 176, 0.3) 1px,
325+
transparent 1px,
326+
transparent 5px
327+
);
328+
}
256329

257-
.green-angled-rectangle-gradient {
258-
background-image: repeating-linear-gradient(-50deg, rgba(11, 83, 11, 0.17) 0px, rgba(11, 83, 11, 0.17) 1px, transparent 1px, transparent 5px);
330+
/* Green Angled Rectangle Gradient */
331+
@utility green-angled-rectangle-gradient {
332+
background-image: repeating-linear-gradient(
333+
-50deg,
334+
rgba(11, 83, 11, 0.17) 0px,
335+
rgba(11, 83, 11, 0.17) 1px,
336+
transparent 1px,
337+
transparent 5px
338+
);
259339
}
260340

261341
.dark .green-angled-rectangle-gradient {
262-
background-image: repeating-linear-gradient(-50deg, rgba(55, 184, 55, 0.13) 0px, rgba(55, 184, 55, 0.13) 1px, transparent 1px, transparent 5px);
342+
background-image: repeating-linear-gradient(
343+
-50deg,
344+
rgba(55, 184, 55, 0.13) 0px,
345+
rgba(55, 184, 55, 0.13) 1px,
346+
transparent 1px,
347+
transparent 5px
348+
);
263349
}
264350

265351
/* Blue Angled Rectangle Gradient */
266-
267-
.blue-angled-rectangle-gradient {
268-
background-image: repeating-linear-gradient(-50deg, rgba(16, 16, 121, 0.1) 0px, rgba(16, 16, 121, 0.1) 1px, transparent 1px, transparent 5px);
352+
@utility blue-angled-rectangle-gradient {
353+
background-image: repeating-linear-gradient(
354+
-50deg,
355+
rgba(117, 117, 255, 0.2) 0px,
356+
rgba(117, 117, 255, 0.2) 1px,
357+
transparent 1px,
358+
transparent 5px
359+
);
269360
}
270361

271362
.dark .blue-angled-rectangle-gradient {
272-
background-image: repeating-linear-gradient(-50deg, rgba(104, 104, 255, 0.13) 0px, rgba(104, 104, 255, 0.13) 1px, transparent 1px, transparent 5px);
363+
background-image: repeating-linear-gradient(
364+
-50deg,
365+
rgba(104, 104, 255, 0.13) 0px,
366+
rgba(104, 104, 255, 0.13) 1px,
367+
transparent 1px,
368+
transparent 5px
369+
);
273370
}
274371

275-
/* Red Angled Rectangle Gradient */
276-
277-
.red-angled-rectangle-gradient {
278-
background-image: repeating-linear-gradient(-50deg, rgba(255, 141, 141, 0.4) 0px, rgba(255, 141, 141, 0.) 1px, transparent 1px, transparent 5px);
372+
/* Amber Angled Rectangle Gradient */
373+
@utility amber-angled-rectangle-gradient {
374+
background-image: repeating-linear-gradient(
375+
-50deg,
376+
rgba(91, 91, 6, 0.17) 0px,
377+
rgba(91, 91, 6, 0.17) 1px,
378+
transparent 1px,
379+
transparent 5px
380+
);
279381
}
280382

281-
.dark .red-angled-rectangle-gradient {
282-
background-image: repeating-linear-gradient(-50deg, rgba(255, 176, 176, 0.3) 0px, rgba(255, 176, 176, 0.3) 1px, transparent 1px, transparent 5px);
383+
.dark .amber-angled-rectangle-gradient {
384+
background-image: repeating-linear-gradient(
385+
-50deg,
386+
rgba(255, 255, 11, 0.13) 0px,
387+
rgba(255, 255, 11, 0.13) 1px,
388+
transparent 1px,
389+
transparent 5px
390+
);
283391
}
284392

285-
/* Amber Angled Rectangle Gradient */
286-
287-
.amber-angled-rectangle-gradient {
288-
background-image: repeating-linear-gradient(-50deg, rgba(91, 91, 6, 0.17) 0px, rgba(91, 91, 6, 0.17) 1px, transparent 1px, transparent 5px);
393+
/* Dotted background */
394+
@utility dotted-bg {
395+
background-image: radial-gradient(circle at center, #06060616 1px, transparent 1px);
396+
background-size: 8px 8px;
289397
}
290398

291-
.dark .amber-angled-rectangle-gradient {
292-
background-image: repeating-linear-gradient(-50deg, rgba(255, 255, 11, 0.13) 0px, rgba(255, 255, 11, 0.13) 1px, transparent 1px, transparent 5px);
399+
.dark .dotted-bg {
400+
background-image: radial-gradient(circle at center, #ffffff09 1px, transparent 1px);
401+
background-size: 8px 8px;
293402
}
294403

404+
295405
.dotted-bg {
296406
background-image: radial-gradient(circle at center, #06060616 1px, transparent 1px);
297407
background-size: 8px 8px;

‎apps/docs/components/bento.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -506,7 +506,7 @@ const FeatureFlagsFeature = () => {
506506
</div>
507507
<Switch
508508
checked={flag.enabled}
509-
className="shrink-0 transition-all duration-300 data-[state=checked]:bg-primary"
509+
className="min-h-0! min-w-0!"
510510
disabled
511511
/>
512512
</div>

‎apps/docs/components/ui/switch.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import * as SwitchPrimitive from '@radix-ui/react-switch';
3+
import { Switch as SwitchPrimitive } from 'radix-ui';
44
import type * as React from 'react';
55

66
import { cn } from '@/lib/utils';
@@ -11,16 +11,16 @@ function Switch({
1111
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
1212
return (
1313
<SwitchPrimitive.Root
14+
data-slot="switch"
1415
className={cn(
15-
'peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
16+
'peer inline-flex h-[1.15rem] disabled:data-[state=checked]:border-foreground overflow-hidden rounded-sm data-[state=checked]:border-blue-700 data-[state=unchecked]:badge-angled-rectangle-gradient data-[state=checked]:blue-angled-rectangle-gradient w-9 shrink-0 border border-accent-brighter items-center outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80',
1617
className
1718
)}
18-
data-slot="switch"
1919
{...props}
2020
>
2121
<SwitchPrimitive.Thumb
2222
className={cn(
23-
'pointer-events-none block size-4 rounded-full bg-background ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground'
23+
'pointer-events-none block w-4 h-full bg-background rounded-sm ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%+2px)] data-[state=checked]:rotate-90 data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground'
2424
)}
2525
data-slot="switch-thumb"
2626
/>

0 commit comments

Comments
 (0)