@kushagradhawan/kookie-ui 0.1.10 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.css +198 -98
- package/package.json +1 -1
- package/src/components/_internal/base-menu.css +60 -2
- package/src/components/button.css +8 -8
- package/src/components/icon-button.css +8 -8
- package/styles.css +198 -98
package/components.css
CHANGED
|
@@ -2337,8 +2337,8 @@
|
|
|
2337
2337
|
letter-spacing: var(--letter-spacing-1);
|
|
2338
2338
|
}
|
|
2339
2339
|
.rt-Button:where(.rt-r-size-1) :where(svg) {
|
|
2340
|
-
width:
|
|
2341
|
-
height:
|
|
2340
|
+
width: var(--space-4);
|
|
2341
|
+
height: var(--space-4);
|
|
2342
2342
|
}
|
|
2343
2343
|
.rt-Button:where(.rt-r-size-1):where(:not(.rt-variant-ghost)) {
|
|
2344
2344
|
padding-left: var(--space-2);
|
|
@@ -2356,8 +2356,8 @@
|
|
|
2356
2356
|
letter-spacing: var(--letter-spacing-2);
|
|
2357
2357
|
}
|
|
2358
2358
|
.rt-Button:where(.rt-r-size-2) :where(svg) {
|
|
2359
|
-
width:
|
|
2360
|
-
height:
|
|
2359
|
+
width: var(--space-4);
|
|
2360
|
+
height: var(--space-4);
|
|
2361
2361
|
}
|
|
2362
2362
|
.rt-Button:where(.rt-r-size-2):where(:not(.rt-variant-ghost)) {
|
|
2363
2363
|
padding-left: var(--space-3);
|
|
@@ -2375,8 +2375,8 @@
|
|
|
2375
2375
|
letter-spacing: var(--letter-spacing-3);
|
|
2376
2376
|
}
|
|
2377
2377
|
.rt-Button:where(.rt-r-size-3) :where(svg) {
|
|
2378
|
-
width:
|
|
2379
|
-
height:
|
|
2378
|
+
width: var(--space-5);
|
|
2379
|
+
height: var(--space-5);
|
|
2380
2380
|
}
|
|
2381
2381
|
.rt-Button:where(.rt-r-size-3):where(:not(.rt-variant-ghost)) {
|
|
2382
2382
|
padding-left: var(--space-4);
|
|
@@ -2394,8 +2394,8 @@
|
|
|
2394
2394
|
letter-spacing: var(--letter-spacing-4);
|
|
2395
2395
|
}
|
|
2396
2396
|
.rt-Button:where(.rt-r-size-4) :where(svg) {
|
|
2397
|
-
width:
|
|
2398
|
-
height:
|
|
2397
|
+
width: var(--space-5);
|
|
2398
|
+
height: var(--space-5);
|
|
2399
2399
|
}
|
|
2400
2400
|
.rt-Button:where(.rt-r-size-4):where(:not(.rt-variant-ghost)) {
|
|
2401
2401
|
padding-left: var(--space-5);
|
|
@@ -2414,8 +2414,8 @@
|
|
|
2414
2414
|
letter-spacing: var(--letter-spacing-1);
|
|
2415
2415
|
}
|
|
2416
2416
|
.rt-Button:where(.xs\:rt-r-size-1) :where(svg) {
|
|
2417
|
-
width:
|
|
2418
|
-
height:
|
|
2417
|
+
width: var(--space-4);
|
|
2418
|
+
height: var(--space-4);
|
|
2419
2419
|
}
|
|
2420
2420
|
.rt-Button:where(.xs\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
|
|
2421
2421
|
padding-left: var(--space-2);
|
|
@@ -2433,8 +2433,8 @@
|
|
|
2433
2433
|
letter-spacing: var(--letter-spacing-2);
|
|
2434
2434
|
}
|
|
2435
2435
|
.rt-Button:where(.xs\:rt-r-size-2) :where(svg) {
|
|
2436
|
-
width:
|
|
2437
|
-
height:
|
|
2436
|
+
width: var(--space-4);
|
|
2437
|
+
height: var(--space-4);
|
|
2438
2438
|
}
|
|
2439
2439
|
.rt-Button:where(.xs\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
|
|
2440
2440
|
padding-left: var(--space-3);
|
|
@@ -2452,8 +2452,8 @@
|
|
|
2452
2452
|
letter-spacing: var(--letter-spacing-3);
|
|
2453
2453
|
}
|
|
2454
2454
|
.rt-Button:where(.xs\:rt-r-size-3) :where(svg) {
|
|
2455
|
-
width:
|
|
2456
|
-
height:
|
|
2455
|
+
width: var(--space-5);
|
|
2456
|
+
height: var(--space-5);
|
|
2457
2457
|
}
|
|
2458
2458
|
.rt-Button:where(.xs\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
|
|
2459
2459
|
padding-left: var(--space-4);
|
|
@@ -2471,8 +2471,8 @@
|
|
|
2471
2471
|
letter-spacing: var(--letter-spacing-4);
|
|
2472
2472
|
}
|
|
2473
2473
|
.rt-Button:where(.xs\:rt-r-size-4) :where(svg) {
|
|
2474
|
-
width:
|
|
2475
|
-
height:
|
|
2474
|
+
width: var(--space-5);
|
|
2475
|
+
height: var(--space-5);
|
|
2476
2476
|
}
|
|
2477
2477
|
.rt-Button:where(.xs\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
|
|
2478
2478
|
padding-left: var(--space-5);
|
|
@@ -2492,8 +2492,8 @@
|
|
|
2492
2492
|
letter-spacing: var(--letter-spacing-1);
|
|
2493
2493
|
}
|
|
2494
2494
|
.rt-Button:where(.sm\:rt-r-size-1) :where(svg) {
|
|
2495
|
-
width:
|
|
2496
|
-
height:
|
|
2495
|
+
width: var(--space-4);
|
|
2496
|
+
height: var(--space-4);
|
|
2497
2497
|
}
|
|
2498
2498
|
.rt-Button:where(.sm\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
|
|
2499
2499
|
padding-left: var(--space-2);
|
|
@@ -2511,8 +2511,8 @@
|
|
|
2511
2511
|
letter-spacing: var(--letter-spacing-2);
|
|
2512
2512
|
}
|
|
2513
2513
|
.rt-Button:where(.sm\:rt-r-size-2) :where(svg) {
|
|
2514
|
-
width:
|
|
2515
|
-
height:
|
|
2514
|
+
width: var(--space-4);
|
|
2515
|
+
height: var(--space-4);
|
|
2516
2516
|
}
|
|
2517
2517
|
.rt-Button:where(.sm\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
|
|
2518
2518
|
padding-left: var(--space-3);
|
|
@@ -2530,8 +2530,8 @@
|
|
|
2530
2530
|
letter-spacing: var(--letter-spacing-3);
|
|
2531
2531
|
}
|
|
2532
2532
|
.rt-Button:where(.sm\:rt-r-size-3) :where(svg) {
|
|
2533
|
-
width:
|
|
2534
|
-
height:
|
|
2533
|
+
width: var(--space-5);
|
|
2534
|
+
height: var(--space-5);
|
|
2535
2535
|
}
|
|
2536
2536
|
.rt-Button:where(.sm\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
|
|
2537
2537
|
padding-left: var(--space-4);
|
|
@@ -2549,8 +2549,8 @@
|
|
|
2549
2549
|
letter-spacing: var(--letter-spacing-4);
|
|
2550
2550
|
}
|
|
2551
2551
|
.rt-Button:where(.sm\:rt-r-size-4) :where(svg) {
|
|
2552
|
-
width:
|
|
2553
|
-
height:
|
|
2552
|
+
width: var(--space-5);
|
|
2553
|
+
height: var(--space-5);
|
|
2554
2554
|
}
|
|
2555
2555
|
.rt-Button:where(.sm\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
|
|
2556
2556
|
padding-left: var(--space-5);
|
|
@@ -2570,8 +2570,8 @@
|
|
|
2570
2570
|
letter-spacing: var(--letter-spacing-1);
|
|
2571
2571
|
}
|
|
2572
2572
|
.rt-Button:where(.md\:rt-r-size-1) :where(svg) {
|
|
2573
|
-
width:
|
|
2574
|
-
height:
|
|
2573
|
+
width: var(--space-4);
|
|
2574
|
+
height: var(--space-4);
|
|
2575
2575
|
}
|
|
2576
2576
|
.rt-Button:where(.md\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
|
|
2577
2577
|
padding-left: var(--space-2);
|
|
@@ -2589,8 +2589,8 @@
|
|
|
2589
2589
|
letter-spacing: var(--letter-spacing-2);
|
|
2590
2590
|
}
|
|
2591
2591
|
.rt-Button:where(.md\:rt-r-size-2) :where(svg) {
|
|
2592
|
-
width:
|
|
2593
|
-
height:
|
|
2592
|
+
width: var(--space-4);
|
|
2593
|
+
height: var(--space-4);
|
|
2594
2594
|
}
|
|
2595
2595
|
.rt-Button:where(.md\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
|
|
2596
2596
|
padding-left: var(--space-3);
|
|
@@ -2608,8 +2608,8 @@
|
|
|
2608
2608
|
letter-spacing: var(--letter-spacing-3);
|
|
2609
2609
|
}
|
|
2610
2610
|
.rt-Button:where(.md\:rt-r-size-3) :where(svg) {
|
|
2611
|
-
width:
|
|
2612
|
-
height:
|
|
2611
|
+
width: var(--space-5);
|
|
2612
|
+
height: var(--space-5);
|
|
2613
2613
|
}
|
|
2614
2614
|
.rt-Button:where(.md\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
|
|
2615
2615
|
padding-left: var(--space-4);
|
|
@@ -2627,8 +2627,8 @@
|
|
|
2627
2627
|
letter-spacing: var(--letter-spacing-4);
|
|
2628
2628
|
}
|
|
2629
2629
|
.rt-Button:where(.md\:rt-r-size-4) :where(svg) {
|
|
2630
|
-
width:
|
|
2631
|
-
height:
|
|
2630
|
+
width: var(--space-5);
|
|
2631
|
+
height: var(--space-5);
|
|
2632
2632
|
}
|
|
2633
2633
|
.rt-Button:where(.md\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
|
|
2634
2634
|
padding-left: var(--space-5);
|
|
@@ -2648,8 +2648,8 @@
|
|
|
2648
2648
|
letter-spacing: var(--letter-spacing-1);
|
|
2649
2649
|
}
|
|
2650
2650
|
.rt-Button:where(.lg\:rt-r-size-1) :where(svg) {
|
|
2651
|
-
width:
|
|
2652
|
-
height:
|
|
2651
|
+
width: var(--space-4);
|
|
2652
|
+
height: var(--space-4);
|
|
2653
2653
|
}
|
|
2654
2654
|
.rt-Button:where(.lg\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
|
|
2655
2655
|
padding-left: var(--space-2);
|
|
@@ -2667,8 +2667,8 @@
|
|
|
2667
2667
|
letter-spacing: var(--letter-spacing-2);
|
|
2668
2668
|
}
|
|
2669
2669
|
.rt-Button:where(.lg\:rt-r-size-2) :where(svg) {
|
|
2670
|
-
width:
|
|
2671
|
-
height:
|
|
2670
|
+
width: var(--space-4);
|
|
2671
|
+
height: var(--space-4);
|
|
2672
2672
|
}
|
|
2673
2673
|
.rt-Button:where(.lg\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
|
|
2674
2674
|
padding-left: var(--space-3);
|
|
@@ -2686,8 +2686,8 @@
|
|
|
2686
2686
|
letter-spacing: var(--letter-spacing-3);
|
|
2687
2687
|
}
|
|
2688
2688
|
.rt-Button:where(.lg\:rt-r-size-3) :where(svg) {
|
|
2689
|
-
width:
|
|
2690
|
-
height:
|
|
2689
|
+
width: var(--space-5);
|
|
2690
|
+
height: var(--space-5);
|
|
2691
2691
|
}
|
|
2692
2692
|
.rt-Button:where(.lg\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
|
|
2693
2693
|
padding-left: var(--space-4);
|
|
@@ -2705,8 +2705,8 @@
|
|
|
2705
2705
|
letter-spacing: var(--letter-spacing-4);
|
|
2706
2706
|
}
|
|
2707
2707
|
.rt-Button:where(.lg\:rt-r-size-4) :where(svg) {
|
|
2708
|
-
width:
|
|
2709
|
-
height:
|
|
2708
|
+
width: var(--space-5);
|
|
2709
|
+
height: var(--space-5);
|
|
2710
2710
|
}
|
|
2711
2711
|
.rt-Button:where(.lg\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
|
|
2712
2712
|
padding-left: var(--space-5);
|
|
@@ -2726,8 +2726,8 @@
|
|
|
2726
2726
|
letter-spacing: var(--letter-spacing-1);
|
|
2727
2727
|
}
|
|
2728
2728
|
.rt-Button:where(.xl\:rt-r-size-1) :where(svg) {
|
|
2729
|
-
width:
|
|
2730
|
-
height:
|
|
2729
|
+
width: var(--space-4);
|
|
2730
|
+
height: var(--space-4);
|
|
2731
2731
|
}
|
|
2732
2732
|
.rt-Button:where(.xl\:rt-r-size-1):where(:not(.rt-variant-ghost)) {
|
|
2733
2733
|
padding-left: var(--space-2);
|
|
@@ -2745,8 +2745,8 @@
|
|
|
2745
2745
|
letter-spacing: var(--letter-spacing-2);
|
|
2746
2746
|
}
|
|
2747
2747
|
.rt-Button:where(.xl\:rt-r-size-2) :where(svg) {
|
|
2748
|
-
width:
|
|
2749
|
-
height:
|
|
2748
|
+
width: var(--space-4);
|
|
2749
|
+
height: var(--space-4);
|
|
2750
2750
|
}
|
|
2751
2751
|
.rt-Button:where(.xl\:rt-r-size-2):where(:not(.rt-variant-ghost)) {
|
|
2752
2752
|
padding-left: var(--space-3);
|
|
@@ -2764,8 +2764,8 @@
|
|
|
2764
2764
|
letter-spacing: var(--letter-spacing-3);
|
|
2765
2765
|
}
|
|
2766
2766
|
.rt-Button:where(.xl\:rt-r-size-3) :where(svg) {
|
|
2767
|
-
width:
|
|
2768
|
-
height:
|
|
2767
|
+
width: var(--space-5);
|
|
2768
|
+
height: var(--space-5);
|
|
2769
2769
|
}
|
|
2770
2770
|
.rt-Button:where(.xl\:rt-r-size-3):where(:not(.rt-variant-ghost)) {
|
|
2771
2771
|
padding-left: var(--space-4);
|
|
@@ -2783,8 +2783,8 @@
|
|
|
2783
2783
|
letter-spacing: var(--letter-spacing-4);
|
|
2784
2784
|
}
|
|
2785
2785
|
.rt-Button:where(.xl\:rt-r-size-4) :where(svg) {
|
|
2786
|
-
width:
|
|
2787
|
-
height:
|
|
2786
|
+
width: var(--space-5);
|
|
2787
|
+
height: var(--space-5);
|
|
2788
2788
|
}
|
|
2789
2789
|
.rt-Button:where(.xl\:rt-r-size-4):where(:not(.rt-variant-ghost)) {
|
|
2790
2790
|
padding-left: var(--space-5);
|
|
@@ -4161,7 +4161,9 @@
|
|
|
4161
4161
|
display: flex;
|
|
4162
4162
|
align-items: center;
|
|
4163
4163
|
gap: var(--space-2);
|
|
4164
|
-
height: var(--base-menu-item-height);
|
|
4164
|
+
min-height: var(--base-menu-item-height);
|
|
4165
|
+
padding-top: var(--base-menu-item-padding-y);
|
|
4166
|
+
padding-bottom: var(--base-menu-item-padding-y);
|
|
4165
4167
|
padding-left: var(--base-menu-item-padding-left);
|
|
4166
4168
|
padding-right: var(--base-menu-item-padding-right);
|
|
4167
4169
|
box-sizing: border-box;
|
|
@@ -4202,7 +4204,9 @@
|
|
|
4202
4204
|
.rt-BaseMenuLabel {
|
|
4203
4205
|
display: flex;
|
|
4204
4206
|
align-items: center;
|
|
4205
|
-
height: var(--base-menu-item-height);
|
|
4207
|
+
min-height: var(--base-menu-item-height);
|
|
4208
|
+
padding-top: var(--base-menu-item-padding-y);
|
|
4209
|
+
padding-bottom: var(--base-menu-item-padding-y);
|
|
4206
4210
|
padding-left: var(--base-menu-item-padding-left);
|
|
4207
4211
|
padding-right: var(--base-menu-item-padding-right);
|
|
4208
4212
|
box-sizing: border-box;
|
|
@@ -4221,6 +4225,7 @@
|
|
|
4221
4225
|
--base-menu-content-padding: var(--space-1);
|
|
4222
4226
|
--base-menu-item-padding-left: calc(var(--space-5) / 1.2);
|
|
4223
4227
|
--base-menu-item-padding-right: var(--space-2);
|
|
4228
|
+
--base-menu-item-padding-y: calc(var(--space-1) * 0.75);
|
|
4224
4229
|
--base-menu-item-height: var(--space-5);
|
|
4225
4230
|
border-radius: var(--radius-3);
|
|
4226
4231
|
}
|
|
@@ -4230,6 +4235,11 @@
|
|
|
4230
4235
|
letter-spacing: var(--letter-spacing-1);
|
|
4231
4236
|
border-radius: var(--radius-1);
|
|
4232
4237
|
}
|
|
4238
|
+
.rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
|
|
4239
|
+
width: var(--space-4);
|
|
4240
|
+
height: var(--space-4);
|
|
4241
|
+
flex-shrink: 0;
|
|
4242
|
+
}
|
|
4233
4243
|
.rt-BaseMenuContent:where(.rt-r-size-1) :where(.rt-BaseMenuLabel) {
|
|
4234
4244
|
font-size: var(--font-size-1);
|
|
4235
4245
|
line-height: var(--line-height-1);
|
|
@@ -4249,6 +4259,7 @@
|
|
|
4249
4259
|
--base-menu-content-padding: var(--space-2);
|
|
4250
4260
|
--base-menu-item-padding-left: var(--space-3);
|
|
4251
4261
|
--base-menu-item-padding-right: var(--space-3);
|
|
4262
|
+
--base-menu-item-padding-y: var(--space-1);
|
|
4252
4263
|
--base-menu-item-height: var(--space-6);
|
|
4253
4264
|
border-radius: var(--radius-4);
|
|
4254
4265
|
}
|
|
@@ -4258,6 +4269,11 @@
|
|
|
4258
4269
|
letter-spacing: var(--letter-spacing-2);
|
|
4259
4270
|
border-radius: var(--radius-2);
|
|
4260
4271
|
}
|
|
4272
|
+
.rt-BaseMenuContent:where(.rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
|
|
4273
|
+
width: var(--space-4);
|
|
4274
|
+
height: var(--space-4);
|
|
4275
|
+
flex-shrink: 0;
|
|
4276
|
+
}
|
|
4261
4277
|
.rt-BaseMenuContent:where(.rt-r-size-2) :where(.rt-BaseMenuLabel) {
|
|
4262
4278
|
font-size: var(--font-size-2);
|
|
4263
4279
|
line-height: var(--line-height-2);
|
|
@@ -4278,6 +4294,7 @@
|
|
|
4278
4294
|
--base-menu-content-padding: var(--space-1);
|
|
4279
4295
|
--base-menu-item-padding-left: calc(var(--space-5) / 1.2);
|
|
4280
4296
|
--base-menu-item-padding-right: var(--space-2);
|
|
4297
|
+
--base-menu-item-padding-y: calc(var(--space-1) * 0.75);
|
|
4281
4298
|
--base-menu-item-height: var(--space-5);
|
|
4282
4299
|
border-radius: var(--radius-3);
|
|
4283
4300
|
}
|
|
@@ -4287,6 +4304,11 @@
|
|
|
4287
4304
|
letter-spacing: var(--letter-spacing-1);
|
|
4288
4305
|
border-radius: var(--radius-1);
|
|
4289
4306
|
}
|
|
4307
|
+
.rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
|
|
4308
|
+
width: var(--space-4);
|
|
4309
|
+
height: var(--space-4);
|
|
4310
|
+
flex-shrink: 0;
|
|
4311
|
+
}
|
|
4290
4312
|
.rt-BaseMenuContent:where(.xs\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
|
|
4291
4313
|
font-size: var(--font-size-1);
|
|
4292
4314
|
line-height: var(--line-height-1);
|
|
@@ -4306,6 +4328,7 @@
|
|
|
4306
4328
|
--base-menu-content-padding: var(--space-2);
|
|
4307
4329
|
--base-menu-item-padding-left: var(--space-3);
|
|
4308
4330
|
--base-menu-item-padding-right: var(--space-3);
|
|
4331
|
+
--base-menu-item-padding-y: var(--space-1);
|
|
4309
4332
|
--base-menu-item-height: var(--space-6);
|
|
4310
4333
|
border-radius: var(--radius-4);
|
|
4311
4334
|
}
|
|
@@ -4315,6 +4338,11 @@
|
|
|
4315
4338
|
letter-spacing: var(--letter-spacing-2);
|
|
4316
4339
|
border-radius: var(--radius-2);
|
|
4317
4340
|
}
|
|
4341
|
+
.rt-BaseMenuContent:where(.xs\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
|
|
4342
|
+
width: var(--space-4);
|
|
4343
|
+
height: var(--space-4);
|
|
4344
|
+
flex-shrink: 0;
|
|
4345
|
+
}
|
|
4318
4346
|
.rt-BaseMenuContent:where(.xs\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
|
|
4319
4347
|
font-size: var(--font-size-2);
|
|
4320
4348
|
line-height: var(--line-height-2);
|
|
@@ -4336,6 +4364,7 @@
|
|
|
4336
4364
|
--base-menu-content-padding: var(--space-1);
|
|
4337
4365
|
--base-menu-item-padding-left: calc(var(--space-5) / 1.2);
|
|
4338
4366
|
--base-menu-item-padding-right: var(--space-2);
|
|
4367
|
+
--base-menu-item-padding-y: calc(var(--space-1) * 0.75);
|
|
4339
4368
|
--base-menu-item-height: var(--space-5);
|
|
4340
4369
|
border-radius: var(--radius-3);
|
|
4341
4370
|
}
|
|
@@ -4345,6 +4374,11 @@
|
|
|
4345
4374
|
letter-spacing: var(--letter-spacing-1);
|
|
4346
4375
|
border-radius: var(--radius-1);
|
|
4347
4376
|
}
|
|
4377
|
+
.rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
|
|
4378
|
+
width: var(--space-4);
|
|
4379
|
+
height: var(--space-4);
|
|
4380
|
+
flex-shrink: 0;
|
|
4381
|
+
}
|
|
4348
4382
|
.rt-BaseMenuContent:where(.sm\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
|
|
4349
4383
|
font-size: var(--font-size-1);
|
|
4350
4384
|
line-height: var(--line-height-1);
|
|
@@ -4364,6 +4398,7 @@
|
|
|
4364
4398
|
--base-menu-content-padding: var(--space-2);
|
|
4365
4399
|
--base-menu-item-padding-left: var(--space-3);
|
|
4366
4400
|
--base-menu-item-padding-right: var(--space-3);
|
|
4401
|
+
--base-menu-item-padding-y: var(--space-1);
|
|
4367
4402
|
--base-menu-item-height: var(--space-6);
|
|
4368
4403
|
border-radius: var(--radius-4);
|
|
4369
4404
|
}
|
|
@@ -4373,6 +4408,11 @@
|
|
|
4373
4408
|
letter-spacing: var(--letter-spacing-2);
|
|
4374
4409
|
border-radius: var(--radius-2);
|
|
4375
4410
|
}
|
|
4411
|
+
.rt-BaseMenuContent:where(.sm\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
|
|
4412
|
+
width: var(--space-4);
|
|
4413
|
+
height: var(--space-4);
|
|
4414
|
+
flex-shrink: 0;
|
|
4415
|
+
}
|
|
4376
4416
|
.rt-BaseMenuContent:where(.sm\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
|
|
4377
4417
|
font-size: var(--font-size-2);
|
|
4378
4418
|
line-height: var(--line-height-2);
|
|
@@ -4394,6 +4434,7 @@
|
|
|
4394
4434
|
--base-menu-content-padding: var(--space-1);
|
|
4395
4435
|
--base-menu-item-padding-left: calc(var(--space-5) / 1.2);
|
|
4396
4436
|
--base-menu-item-padding-right: var(--space-2);
|
|
4437
|
+
--base-menu-item-padding-y: calc(var(--space-1) * 0.75);
|
|
4397
4438
|
--base-menu-item-height: var(--space-5);
|
|
4398
4439
|
border-radius: var(--radius-3);
|
|
4399
4440
|
}
|
|
@@ -4403,6 +4444,11 @@
|
|
|
4403
4444
|
letter-spacing: var(--letter-spacing-1);
|
|
4404
4445
|
border-radius: var(--radius-1);
|
|
4405
4446
|
}
|
|
4447
|
+
.rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
|
|
4448
|
+
width: var(--space-4);
|
|
4449
|
+
height: var(--space-4);
|
|
4450
|
+
flex-shrink: 0;
|
|
4451
|
+
}
|
|
4406
4452
|
.rt-BaseMenuContent:where(.md\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
|
|
4407
4453
|
font-size: var(--font-size-1);
|
|
4408
4454
|
line-height: var(--line-height-1);
|
|
@@ -4422,6 +4468,7 @@
|
|
|
4422
4468
|
--base-menu-content-padding: var(--space-2);
|
|
4423
4469
|
--base-menu-item-padding-left: var(--space-3);
|
|
4424
4470
|
--base-menu-item-padding-right: var(--space-3);
|
|
4471
|
+
--base-menu-item-padding-y: var(--space-1);
|
|
4425
4472
|
--base-menu-item-height: var(--space-6);
|
|
4426
4473
|
border-radius: var(--radius-4);
|
|
4427
4474
|
}
|
|
@@ -4431,6 +4478,11 @@
|
|
|
4431
4478
|
letter-spacing: var(--letter-spacing-2);
|
|
4432
4479
|
border-radius: var(--radius-2);
|
|
4433
4480
|
}
|
|
4481
|
+
.rt-BaseMenuContent:where(.md\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
|
|
4482
|
+
width: var(--space-4);
|
|
4483
|
+
height: var(--space-4);
|
|
4484
|
+
flex-shrink: 0;
|
|
4485
|
+
}
|
|
4434
4486
|
.rt-BaseMenuContent:where(.md\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
|
|
4435
4487
|
font-size: var(--font-size-2);
|
|
4436
4488
|
line-height: var(--line-height-2);
|
|
@@ -4452,6 +4504,7 @@
|
|
|
4452
4504
|
--base-menu-content-padding: var(--space-1);
|
|
4453
4505
|
--base-menu-item-padding-left: calc(var(--space-5) / 1.2);
|
|
4454
4506
|
--base-menu-item-padding-right: var(--space-2);
|
|
4507
|
+
--base-menu-item-padding-y: calc(var(--space-1) * 0.75);
|
|
4455
4508
|
--base-menu-item-height: var(--space-5);
|
|
4456
4509
|
border-radius: var(--radius-3);
|
|
4457
4510
|
}
|
|
@@ -4461,6 +4514,11 @@
|
|
|
4461
4514
|
letter-spacing: var(--letter-spacing-1);
|
|
4462
4515
|
border-radius: var(--radius-1);
|
|
4463
4516
|
}
|
|
4517
|
+
.rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
|
|
4518
|
+
width: var(--space-4);
|
|
4519
|
+
height: var(--space-4);
|
|
4520
|
+
flex-shrink: 0;
|
|
4521
|
+
}
|
|
4464
4522
|
.rt-BaseMenuContent:where(.lg\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
|
|
4465
4523
|
font-size: var(--font-size-1);
|
|
4466
4524
|
line-height: var(--line-height-1);
|
|
@@ -4480,6 +4538,7 @@
|
|
|
4480
4538
|
--base-menu-content-padding: var(--space-2);
|
|
4481
4539
|
--base-menu-item-padding-left: var(--space-3);
|
|
4482
4540
|
--base-menu-item-padding-right: var(--space-3);
|
|
4541
|
+
--base-menu-item-padding-y: var(--space-1);
|
|
4483
4542
|
--base-menu-item-height: var(--space-6);
|
|
4484
4543
|
border-radius: var(--radius-4);
|
|
4485
4544
|
}
|
|
@@ -4489,6 +4548,11 @@
|
|
|
4489
4548
|
letter-spacing: var(--letter-spacing-2);
|
|
4490
4549
|
border-radius: var(--radius-2);
|
|
4491
4550
|
}
|
|
4551
|
+
.rt-BaseMenuContent:where(.lg\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
|
|
4552
|
+
width: var(--space-4);
|
|
4553
|
+
height: var(--space-4);
|
|
4554
|
+
flex-shrink: 0;
|
|
4555
|
+
}
|
|
4492
4556
|
.rt-BaseMenuContent:where(.lg\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
|
|
4493
4557
|
font-size: var(--font-size-2);
|
|
4494
4558
|
line-height: var(--line-height-2);
|
|
@@ -4510,6 +4574,7 @@
|
|
|
4510
4574
|
--base-menu-content-padding: var(--space-1);
|
|
4511
4575
|
--base-menu-item-padding-left: calc(var(--space-5) / 1.2);
|
|
4512
4576
|
--base-menu-item-padding-right: var(--space-2);
|
|
4577
|
+
--base-menu-item-padding-y: calc(var(--space-1) * 0.75);
|
|
4513
4578
|
--base-menu-item-height: var(--space-5);
|
|
4514
4579
|
border-radius: var(--radius-3);
|
|
4515
4580
|
}
|
|
@@ -4519,6 +4584,11 @@
|
|
|
4519
4584
|
letter-spacing: var(--letter-spacing-1);
|
|
4520
4585
|
border-radius: var(--radius-1);
|
|
4521
4586
|
}
|
|
4587
|
+
.rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuItem) :where(svg) {
|
|
4588
|
+
width: var(--space-4);
|
|
4589
|
+
height: var(--space-4);
|
|
4590
|
+
flex-shrink: 0;
|
|
4591
|
+
}
|
|
4522
4592
|
.rt-BaseMenuContent:where(.xl\:rt-r-size-1) :where(.rt-BaseMenuLabel) {
|
|
4523
4593
|
font-size: var(--font-size-1);
|
|
4524
4594
|
line-height: var(--line-height-1);
|
|
@@ -4538,6 +4608,7 @@
|
|
|
4538
4608
|
--base-menu-content-padding: var(--space-2);
|
|
4539
4609
|
--base-menu-item-padding-left: var(--space-3);
|
|
4540
4610
|
--base-menu-item-padding-right: var(--space-3);
|
|
4611
|
+
--base-menu-item-padding-y: var(--space-1);
|
|
4541
4612
|
--base-menu-item-height: var(--space-6);
|
|
4542
4613
|
border-radius: var(--radius-4);
|
|
4543
4614
|
}
|
|
@@ -4547,6 +4618,11 @@
|
|
|
4547
4618
|
letter-spacing: var(--letter-spacing-2);
|
|
4548
4619
|
border-radius: var(--radius-2);
|
|
4549
4620
|
}
|
|
4621
|
+
.rt-BaseMenuContent:where(.xl\:rt-r-size-2) :where(.rt-BaseMenuItem) :where(svg) {
|
|
4622
|
+
width: var(--space-4);
|
|
4623
|
+
height: var(--space-4);
|
|
4624
|
+
flex-shrink: 0;
|
|
4625
|
+
}
|
|
4550
4626
|
.rt-BaseMenuContent:where(.xl\:rt-r-size-2) :where(.rt-BaseMenuLabel) {
|
|
4551
4627
|
font-size: var(--font-size-2);
|
|
4552
4628
|
line-height: var(--line-height-2);
|
|
@@ -4570,6 +4646,9 @@
|
|
|
4570
4646
|
color: var(--gray-a8);
|
|
4571
4647
|
cursor: default;
|
|
4572
4648
|
}
|
|
4649
|
+
.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
|
|
4650
|
+
color: var(--gray-a10);
|
|
4651
|
+
}
|
|
4573
4652
|
.rt-BaseMenuItem:where([data-disabled], [data-highlighted]) :where(.rt-BaseMenuShortcut), .rt-BaseMenuSubTrigger:where([data-state='open']) :where(.rt-BaseMenuShortcut) {
|
|
4574
4653
|
color: inherit;
|
|
4575
4654
|
}
|
|
@@ -4583,6 +4662,12 @@
|
|
|
4583
4662
|
.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-BaseMenuSubTriggerIcon) {
|
|
4584
4663
|
color: var(--accent-contrast);
|
|
4585
4664
|
}
|
|
4665
|
+
.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-Text) {
|
|
4666
|
+
color: inherit !important;
|
|
4667
|
+
}
|
|
4668
|
+
.rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-BaseMenuItem[data-highlighted]) :where([data-accent-color='gray']) {
|
|
4669
|
+
color: inherit !important;
|
|
4670
|
+
}
|
|
4586
4671
|
.rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) {
|
|
4587
4672
|
background-color: var(--accent-12);
|
|
4588
4673
|
color: var(--accent-1);
|
|
@@ -4590,16 +4675,31 @@
|
|
|
4590
4675
|
.rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-BaseMenuSubTriggerIcon) {
|
|
4591
4676
|
color: var(--accent-1);
|
|
4592
4677
|
}
|
|
4678
|
+
.rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-Text) {
|
|
4679
|
+
color: inherit !important;
|
|
4680
|
+
}
|
|
4681
|
+
.rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]) :where([data-accent-color='gray']) {
|
|
4682
|
+
color: inherit !important;
|
|
4683
|
+
}
|
|
4593
4684
|
.rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]):where([data-accent-color]) {
|
|
4594
4685
|
background-color: var(--accent-9);
|
|
4595
4686
|
color: var(--accent-contrast);
|
|
4596
4687
|
}
|
|
4688
|
+
.rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]):where([data-accent-color]) :where(.rt-Text) {
|
|
4689
|
+
color: inherit !important;
|
|
4690
|
+
}
|
|
4691
|
+
.rt-BaseMenuContent:where(.rt-variant-solid):where(.rt-high-contrast) :where(.rt-BaseMenuItem[data-highlighted]):where([data-accent-color]) :where([data-accent-color='gray']) {
|
|
4692
|
+
color: inherit !important;
|
|
4693
|
+
}
|
|
4597
4694
|
.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuSubTrigger[data-state='open']) {
|
|
4598
4695
|
background-color: var(--accent-a3);
|
|
4599
4696
|
}
|
|
4600
4697
|
.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuItem[data-highlighted]) {
|
|
4601
4698
|
background-color: var(--accent-a4);
|
|
4602
4699
|
}
|
|
4700
|
+
.rt-BaseMenuContent:where(.rt-variant-soft) :where(.rt-BaseMenuItem[data-highlighted]) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
|
|
4701
|
+
color: var(--gray-11) !important;
|
|
4702
|
+
}
|
|
4603
4703
|
.rt-ContextMenuContent {
|
|
4604
4704
|
max-height: var(--radix-context-menu-content-available-height);
|
|
4605
4705
|
transform-origin: var(--radix-context-menu-content-transform-origin);
|
|
@@ -5794,20 +5894,20 @@
|
|
|
5794
5894
|
width: var(--base-button-height);
|
|
5795
5895
|
}
|
|
5796
5896
|
.rt-IconButton:where(.rt-r-size-1) :where(svg) {
|
|
5797
|
-
width:
|
|
5798
|
-
height:
|
|
5897
|
+
width: var(--space-4);
|
|
5898
|
+
height: var(--space-4);
|
|
5799
5899
|
}
|
|
5800
5900
|
.rt-IconButton:where(.rt-r-size-2) :where(svg) {
|
|
5801
|
-
width:
|
|
5802
|
-
height:
|
|
5901
|
+
width: var(--space-4);
|
|
5902
|
+
height: var(--space-4);
|
|
5803
5903
|
}
|
|
5804
5904
|
.rt-IconButton:where(.rt-r-size-3) :where(svg) {
|
|
5805
|
-
width:
|
|
5806
|
-
height:
|
|
5905
|
+
width: var(--space-5);
|
|
5906
|
+
height: var(--space-5);
|
|
5807
5907
|
}
|
|
5808
5908
|
.rt-IconButton:where(.rt-r-size-4) :where(svg) {
|
|
5809
|
-
width:
|
|
5810
|
-
height:
|
|
5909
|
+
width: var(--space-5);
|
|
5910
|
+
height: var(--space-5);
|
|
5811
5911
|
}
|
|
5812
5912
|
.rt-IconButton:where(.rt-variant-ghost):where(.rt-r-size-1) {
|
|
5813
5913
|
--icon-button-ghost-padding: var(--space-1);
|
|
@@ -5823,20 +5923,20 @@
|
|
|
5823
5923
|
}
|
|
5824
5924
|
@media (min-width: 520px) {
|
|
5825
5925
|
.rt-IconButton:where(.xs\:rt-r-size-1) :where(svg) {
|
|
5826
|
-
width:
|
|
5827
|
-
height:
|
|
5926
|
+
width: var(--space-4);
|
|
5927
|
+
height: var(--space-4);
|
|
5828
5928
|
}
|
|
5829
5929
|
.rt-IconButton:where(.xs\:rt-r-size-2) :where(svg) {
|
|
5830
|
-
width:
|
|
5831
|
-
height:
|
|
5930
|
+
width: var(--space-4);
|
|
5931
|
+
height: var(--space-4);
|
|
5832
5932
|
}
|
|
5833
5933
|
.rt-IconButton:where(.xs\:rt-r-size-3) :where(svg) {
|
|
5834
|
-
width:
|
|
5835
|
-
height:
|
|
5934
|
+
width: var(--space-5);
|
|
5935
|
+
height: var(--space-5);
|
|
5836
5936
|
}
|
|
5837
5937
|
.rt-IconButton:where(.xs\:rt-r-size-4) :where(svg) {
|
|
5838
|
-
width:
|
|
5839
|
-
height:
|
|
5938
|
+
width: var(--space-5);
|
|
5939
|
+
height: var(--space-5);
|
|
5840
5940
|
}
|
|
5841
5941
|
.rt-IconButton:where(.rt-variant-ghost):where(.xs\:rt-r-size-1) {
|
|
5842
5942
|
--icon-button-ghost-padding: var(--space-1);
|
|
@@ -5853,20 +5953,20 @@
|
|
|
5853
5953
|
}
|
|
5854
5954
|
@media (min-width: 768px) {
|
|
5855
5955
|
.rt-IconButton:where(.sm\:rt-r-size-1) :where(svg) {
|
|
5856
|
-
width:
|
|
5857
|
-
height:
|
|
5956
|
+
width: var(--space-4);
|
|
5957
|
+
height: var(--space-4);
|
|
5858
5958
|
}
|
|
5859
5959
|
.rt-IconButton:where(.sm\:rt-r-size-2) :where(svg) {
|
|
5860
|
-
width:
|
|
5861
|
-
height:
|
|
5960
|
+
width: var(--space-4);
|
|
5961
|
+
height: var(--space-4);
|
|
5862
5962
|
}
|
|
5863
5963
|
.rt-IconButton:where(.sm\:rt-r-size-3) :where(svg) {
|
|
5864
|
-
width:
|
|
5865
|
-
height:
|
|
5964
|
+
width: var(--space-5);
|
|
5965
|
+
height: var(--space-5);
|
|
5866
5966
|
}
|
|
5867
5967
|
.rt-IconButton:where(.sm\:rt-r-size-4) :where(svg) {
|
|
5868
|
-
width:
|
|
5869
|
-
height:
|
|
5968
|
+
width: var(--space-5);
|
|
5969
|
+
height: var(--space-5);
|
|
5870
5970
|
}
|
|
5871
5971
|
.rt-IconButton:where(.rt-variant-ghost):where(.sm\:rt-r-size-1) {
|
|
5872
5972
|
--icon-button-ghost-padding: var(--space-1);
|
|
@@ -5883,20 +5983,20 @@
|
|
|
5883
5983
|
}
|
|
5884
5984
|
@media (min-width: 1024px) {
|
|
5885
5985
|
.rt-IconButton:where(.md\:rt-r-size-1) :where(svg) {
|
|
5886
|
-
width:
|
|
5887
|
-
height:
|
|
5986
|
+
width: var(--space-4);
|
|
5987
|
+
height: var(--space-4);
|
|
5888
5988
|
}
|
|
5889
5989
|
.rt-IconButton:where(.md\:rt-r-size-2) :where(svg) {
|
|
5890
|
-
width:
|
|
5891
|
-
height:
|
|
5990
|
+
width: var(--space-4);
|
|
5991
|
+
height: var(--space-4);
|
|
5892
5992
|
}
|
|
5893
5993
|
.rt-IconButton:where(.md\:rt-r-size-3) :where(svg) {
|
|
5894
|
-
width:
|
|
5895
|
-
height:
|
|
5994
|
+
width: var(--space-5);
|
|
5995
|
+
height: var(--space-5);
|
|
5896
5996
|
}
|
|
5897
5997
|
.rt-IconButton:where(.md\:rt-r-size-4) :where(svg) {
|
|
5898
|
-
width:
|
|
5899
|
-
height:
|
|
5998
|
+
width: var(--space-5);
|
|
5999
|
+
height: var(--space-5);
|
|
5900
6000
|
}
|
|
5901
6001
|
.rt-IconButton:where(.rt-variant-ghost):where(.md\:rt-r-size-1) {
|
|
5902
6002
|
--icon-button-ghost-padding: var(--space-1);
|
|
@@ -5913,20 +6013,20 @@
|
|
|
5913
6013
|
}
|
|
5914
6014
|
@media (min-width: 1280px) {
|
|
5915
6015
|
.rt-IconButton:where(.lg\:rt-r-size-1) :where(svg) {
|
|
5916
|
-
width:
|
|
5917
|
-
height:
|
|
6016
|
+
width: var(--space-4);
|
|
6017
|
+
height: var(--space-4);
|
|
5918
6018
|
}
|
|
5919
6019
|
.rt-IconButton:where(.lg\:rt-r-size-2) :where(svg) {
|
|
5920
|
-
width:
|
|
5921
|
-
height:
|
|
6020
|
+
width: var(--space-4);
|
|
6021
|
+
height: var(--space-4);
|
|
5922
6022
|
}
|
|
5923
6023
|
.rt-IconButton:where(.lg\:rt-r-size-3) :where(svg) {
|
|
5924
|
-
width:
|
|
5925
|
-
height:
|
|
6024
|
+
width: var(--space-5);
|
|
6025
|
+
height: var(--space-5);
|
|
5926
6026
|
}
|
|
5927
6027
|
.rt-IconButton:where(.lg\:rt-r-size-4) :where(svg) {
|
|
5928
|
-
width:
|
|
5929
|
-
height:
|
|
6028
|
+
width: var(--space-5);
|
|
6029
|
+
height: var(--space-5);
|
|
5930
6030
|
}
|
|
5931
6031
|
.rt-IconButton:where(.rt-variant-ghost):where(.lg\:rt-r-size-1) {
|
|
5932
6032
|
--icon-button-ghost-padding: var(--space-1);
|
|
@@ -5943,20 +6043,20 @@
|
|
|
5943
6043
|
}
|
|
5944
6044
|
@media (min-width: 1640px) {
|
|
5945
6045
|
.rt-IconButton:where(.xl\:rt-r-size-1) :where(svg) {
|
|
5946
|
-
width:
|
|
5947
|
-
height:
|
|
6046
|
+
width: var(--space-4);
|
|
6047
|
+
height: var(--space-4);
|
|
5948
6048
|
}
|
|
5949
6049
|
.rt-IconButton:where(.xl\:rt-r-size-2) :where(svg) {
|
|
5950
|
-
width:
|
|
5951
|
-
height:
|
|
6050
|
+
width: var(--space-4);
|
|
6051
|
+
height: var(--space-4);
|
|
5952
6052
|
}
|
|
5953
6053
|
.rt-IconButton:where(.xl\:rt-r-size-3) :where(svg) {
|
|
5954
|
-
width:
|
|
5955
|
-
height:
|
|
6054
|
+
width: var(--space-5);
|
|
6055
|
+
height: var(--space-5);
|
|
5956
6056
|
}
|
|
5957
6057
|
.rt-IconButton:where(.xl\:rt-r-size-4) :where(svg) {
|
|
5958
|
-
width:
|
|
5959
|
-
height:
|
|
6058
|
+
width: var(--space-5);
|
|
6059
|
+
height: var(--space-5);
|
|
5960
6060
|
}
|
|
5961
6061
|
.rt-IconButton:where(.rt-variant-ghost):where(.xl\:rt-r-size-1) {
|
|
5962
6062
|
--icon-button-ghost-padding: var(--space-1);
|