@adatechnology/notification-ui 0.4.1 → 0.5.0

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/dist/styles.css CHANGED
@@ -2,6 +2,7 @@
2
2
  .adn-bell,
3
3
  .adn-list,
4
4
  .adn-preferences,
5
+ .adn-permission-banner,
5
6
  .adn-workspace,
6
7
  .adn-settings {
7
8
  --adn-color-surface: var(--adn-surface, #ffffff);
@@ -265,6 +266,25 @@
265
266
  -webkit-line-clamp: 2;
266
267
  overflow: hidden;
267
268
  }
269
+ .adn-item__calendar-link {
270
+ display: inline-flex;
271
+ align-items: center;
272
+ gap: var(--adn-space-1);
273
+ margin-top: var(--adn-space-1);
274
+ padding: 2px var(--adn-space-2);
275
+ font-size: 0.75rem;
276
+ font-weight: 500;
277
+ color: var(--adn-color-accent);
278
+ background: var(--adn-color-surface-hover);
279
+ border: 1px solid var(--adn-color-border);
280
+ border-radius: var(--adn-radius-sm);
281
+ text-decoration: none;
282
+ width: fit-content;
283
+ }
284
+ .adn-item__calendar-link:hover {
285
+ background: var(--adn-color-surface);
286
+ text-decoration: underline;
287
+ }
268
288
  .adn-item__unread-dot {
269
289
  flex-shrink: 0;
270
290
  align-self: center;
@@ -2495,4 +2515,153 @@
2495
2515
  font-size: 11px;
2496
2516
  opacity: 0.7;
2497
2517
  }
2518
+ .adn-permission-banner {
2519
+ display: flex;
2520
+ align-items: flex-start;
2521
+ gap: var(--adn-space-3);
2522
+ padding: var(--adn-space-3) var(--adn-space-4);
2523
+ background: var(--adn-color-surface);
2524
+ border: 1px solid var(--adn-color-border);
2525
+ border-radius: var(--adn-radius);
2526
+ box-shadow: var(--adn-shadow-card);
2527
+ transition: all 0.2s ease-in-out;
2528
+ }
2529
+ .adn-permission-banner--prompt {
2530
+ border-left: 4px solid var(--adn-color-accent);
2531
+ background: var(--adn-color-accent-soft);
2532
+ }
2533
+ .adn-permission-banner--granted {
2534
+ border-left: 4px solid var(--adn-color-success, #10b981);
2535
+ background: color-mix(in srgb, var(--adn-color-success, #10b981) 8%, var(--adn-color-surface));
2536
+ }
2537
+ .adn-permission-banner--denied {
2538
+ border-left: 4px solid var(--adn-color-warning);
2539
+ background: color-mix(in srgb, var(--adn-color-warning) 8%, var(--adn-color-surface));
2540
+ }
2541
+ .adn-permission-banner__icon {
2542
+ flex-shrink: 0;
2543
+ width: 20px;
2544
+ height: 20px;
2545
+ margin-top: 2px;
2546
+ }
2547
+ .adn-permission-banner--prompt .adn-permission-banner__icon {
2548
+ color: var(--adn-color-accent);
2549
+ }
2550
+ .adn-permission-banner--granted .adn-permission-banner__icon {
2551
+ color: var(--adn-color-success, #10b981);
2552
+ }
2553
+ .adn-permission-banner--denied .adn-permission-banner__icon {
2554
+ color: var(--adn-color-warning);
2555
+ }
2556
+ .adn-permission-banner__content {
2557
+ flex: 1;
2558
+ display: flex;
2559
+ flex-direction: column;
2560
+ gap: var(--adn-space-1);
2561
+ }
2562
+ .adn-permission-banner__title {
2563
+ margin: 0;
2564
+ font-size: 14px;
2565
+ font-weight: 600;
2566
+ color: var(--adn-color-text);
2567
+ line-height: 1.3;
2568
+ }
2569
+ .adn-permission-banner__description {
2570
+ margin: 0;
2571
+ font-size: 13px;
2572
+ color: var(--adn-color-muted);
2573
+ line-height: 1.4;
2574
+ }
2575
+ .adn-permission-banner__actions {
2576
+ display: flex;
2577
+ align-items: center;
2578
+ flex-wrap: wrap;
2579
+ gap: var(--adn-space-2);
2580
+ margin-top: var(--adn-space-2);
2581
+ }
2582
+ .adn-permission-banner__allow-button {
2583
+ display: inline-flex;
2584
+ align-items: center;
2585
+ justify-content: center;
2586
+ min-height: 34px;
2587
+ padding: 0 var(--adn-space-3);
2588
+ font-size: 13px;
2589
+ font-weight: 500;
2590
+ color: #ffffff;
2591
+ background: var(--adn-color-accent);
2592
+ border: none;
2593
+ border-radius: var(--adn-radius-sm);
2594
+ cursor: pointer;
2595
+ transition: opacity 0.15s;
2596
+ }
2597
+ .adn-permission-banner__allow-button:hover:not(:disabled) {
2598
+ opacity: 0.9;
2599
+ }
2600
+ .adn-permission-banner__allow-button:disabled {
2601
+ opacity: 0.5;
2602
+ cursor: not-allowed;
2603
+ }
2604
+ .adn-permission-banner__dismiss-button {
2605
+ display: inline-flex;
2606
+ align-items: center;
2607
+ justify-content: center;
2608
+ min-height: 34px;
2609
+ padding: 0 var(--adn-space-3);
2610
+ font-size: 13px;
2611
+ font-weight: 500;
2612
+ color: var(--adn-color-muted);
2613
+ background: transparent;
2614
+ border: 1px solid var(--adn-color-border);
2615
+ border-radius: var(--adn-radius-sm);
2616
+ cursor: pointer;
2617
+ transition: background-color 0.15s, color 0.15s;
2618
+ }
2619
+ .adn-permission-banner__dismiss-button:hover {
2620
+ background: color-mix(in srgb, var(--adn-color-muted) 10%, transparent);
2621
+ color: var(--adn-color-text);
2622
+ }
2623
+ .adn-permission-banner__disable-button {
2624
+ display: inline-flex;
2625
+ align-items: center;
2626
+ justify-content: center;
2627
+ min-height: 34px;
2628
+ padding: 0 var(--adn-space-3);
2629
+ font-size: 13px;
2630
+ font-weight: 500;
2631
+ color: var(--adn-color-danger);
2632
+ background: transparent;
2633
+ border: 1px solid color-mix(in srgb, var(--adn-color-danger) 30%, transparent);
2634
+ border-radius: var(--adn-radius-sm);
2635
+ cursor: pointer;
2636
+ transition: background-color 0.15s;
2637
+ }
2638
+ .adn-permission-banner__disable-button:hover:not(:disabled) {
2639
+ background: color-mix(in srgb, var(--adn-color-danger) 10%, transparent);
2640
+ }
2641
+ .adn-permission-banner__disable-button:disabled {
2642
+ opacity: 0.5;
2643
+ cursor: not-allowed;
2644
+ }
2645
+ .adn-permission-banner__close-button {
2646
+ flex-shrink: 0;
2647
+ display: inline-flex;
2648
+ align-items: center;
2649
+ justify-content: center;
2650
+ width: 28px;
2651
+ height: 28px;
2652
+ padding: 0;
2653
+ color: var(--adn-color-muted);
2654
+ background: transparent;
2655
+ border: none;
2656
+ border-radius: var(--adn-radius-sm);
2657
+ cursor: pointer;
2658
+ }
2659
+ .adn-permission-banner__close-button:hover {
2660
+ color: var(--adn-color-text);
2661
+ background: color-mix(in srgb, var(--adn-color-muted) 10%, transparent);
2662
+ }
2663
+ .adn-permission-banner__close-icon {
2664
+ width: 16px;
2665
+ height: 16px;
2666
+ }
2498
2667
  /*# sourceMappingURL=styles.css.map */