@itwin/itwinui-css 1.0.0-dev.11 → 1.0.0-dev.12

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.
Files changed (5) hide show
  1. package/css/all.css +30 -222
  2. package/css/button.css +0 -9
  3. package/css/side-navigation.css +2 -2
  4. package/css/utils.css +28 -211
  5. package/package.json +1 -1
package/css/all.css CHANGED
@@ -1232,15 +1232,6 @@ a.iui-breadcrumbs-text:focus{
1232
1232
  --_iui-button-background-color:var(--iui-color-background-1-hover);
1233
1233
  --_iui-button-border-color:var(--iui-color-foreground-1);
1234
1234
  }
1235
- .iui-button:hover .iui-notification-primary::before,
1236
- .iui-button:hover .iui-notification-positive::before,
1237
- .iui-button:hover .iui-notification-warning::before,
1238
- .iui-button:hover .iui-notification-negative::before, .iui-button:active .iui-notification-primary::before,
1239
- .iui-button:active .iui-notification-positive::before,
1240
- .iui-button:active .iui-notification-warning::before,
1241
- .iui-button:active .iui-notification-negative::before{
1242
- border-color:var(--iui-color-background-1-hover);
1243
- }
1244
1235
  .iui-button:focus{
1245
1236
  outline-offset:-2px;
1246
1237
  outline-width:2px;
@@ -5155,7 +5146,7 @@ div.iui-header-breadcrumb-button-icon{
5155
5146
  padding-left:max(calc(1.5 * var(--iui-size-m)), calc(1.5 * var(--iui-size-m)) + env(safe-area-inset-left));
5156
5147
  }
5157
5148
  }
5158
- .iui-side-navigation .iui-sidenav-button > span{
5149
+ .iui-side-navigation .iui-sidenav-button > span:where(:not(.iui-button-icon)){
5159
5150
  white-space:nowrap;
5160
5151
  overflow:hidden;
5161
5152
  text-overflow:ellipsis;
@@ -5163,7 +5154,7 @@ div.iui-header-breadcrumb-button-icon{
5163
5154
  .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
5164
5155
  border-color:var(--iui-color-background-border);
5165
5156
  }
5166
- .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-avatar) svg{
5157
+ .iui-side-navigation .iui-sidenav-button .iui-button-icon:not(.iui-avatar) svg{
5167
5158
  display:flex;
5168
5159
  flex-shrink:0;
5169
5160
  width:calc(1.5 * var(--iui-size-m));
@@ -8731,185 +8722,40 @@ label.iui-input-label.iui-disabled{
8731
8722
  margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
8732
8723
  }
8733
8724
 
8734
- .iui-notification-primary{
8735
- position:relative;
8736
- }
8737
- .iui-notification-primary::before{
8738
- content:"";
8739
- position:absolute;
8740
- width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
8741
- height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
8742
- top:calc(var(--iui-size-s) * -0.5);
8743
- right:calc(var(--iui-size-s) * -0.5);
8744
- border-radius:100%;
8745
- background-color:var(--iui-color-foreground-primary);
8746
- border:var(--iui-size-3xs) solid var(--iui-color-background-1);
8747
- }
8748
- @media (prefers-reduced-motion: no-preference){
8749
- .iui-notification-primary::before{
8750
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
8751
- }
8752
- }
8753
- @media (prefers-reduced-motion: no-preference){
8754
- .iui-notification-primary.iui-urgent::before{
8755
- -webkit-animation:pulse-primary 2s infinite;
8756
- animation:pulse-primary 2s infinite;
8757
- }
8758
- }
8759
- @media (prefers-reduced-motion: no-preference){
8760
- @-webkit-keyframes pulse-primary{
8761
- 0%{
8762
- box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
8763
- }
8764
- 70%{
8765
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
8766
- }
8767
- 100%{
8768
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
8769
- }
8770
- }
8771
- @keyframes pulse-primary{
8772
- 0%{
8773
- box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
8774
- }
8775
- 70%{
8776
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
8777
- }
8778
- 100%{
8779
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
8780
- }
8781
- }
8782
- }
8783
-
8784
- .iui-notification-positive{
8785
- position:relative;
8786
- }
8787
- .iui-notification-positive::before{
8788
- content:"";
8789
- position:absolute;
8790
- width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
8791
- height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
8792
- top:calc(var(--iui-size-s) * -0.5);
8793
- right:calc(var(--iui-size-s) * -0.5);
8794
- border-radius:100%;
8795
- background-color:var(--iui-color-foreground-positive);
8796
- border:var(--iui-size-3xs) solid var(--iui-color-background-1);
8797
- }
8798
- @media (prefers-reduced-motion: no-preference){
8799
- .iui-notification-positive::before{
8800
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
8801
- }
8802
- }
8803
- @media (prefers-reduced-motion: no-preference){
8804
- .iui-notification-positive.iui-urgent::before{
8805
- -webkit-animation:pulse-positive 2s infinite;
8806
- animation:pulse-positive 2s infinite;
8807
- }
8808
- }
8809
- @media (prefers-reduced-motion: no-preference){
8810
- @-webkit-keyframes pulse-positive{
8811
- 0%{
8812
- box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
8813
- }
8814
- 70%{
8815
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
8816
- }
8817
- 100%{
8818
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
8819
- }
8820
- }
8821
- @keyframes pulse-positive{
8822
- 0%{
8823
- box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
8824
- }
8825
- 70%{
8826
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
8827
- }
8828
- 100%{
8829
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
8830
- }
8831
- }
8832
- }
8833
-
8834
- .iui-notification-warning{
8725
+ .iui-notification-marker{
8726
+ --_iui-notification-marker-color:var(--iui-color-foreground-primary);
8835
8727
  position:relative;
8836
8728
  }
8837
- .iui-notification-warning::before{
8729
+ .iui-notification-marker::before{
8838
8730
  content:"";
8839
8731
  position:absolute;
8840
- width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
8841
- height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
8842
- top:calc(var(--iui-size-s) * -0.5);
8843
- right:calc(var(--iui-size-s) * -0.5);
8732
+ width:var(--iui-size-xs);
8733
+ height:var(--iui-size-xs);
8734
+ top:0;
8735
+ right:0;
8736
+ transform:translate(50%, -50%);
8844
8737
  border-radius:100%;
8845
- background-color:var(--iui-color-foreground-warning);
8846
- border:var(--iui-size-3xs) solid var(--iui-color-background-1);
8738
+ background-color:var(--_iui-notification-marker-color);
8847
8739
  }
8848
8740
  @media (prefers-reduced-motion: no-preference){
8849
- .iui-notification-warning::before{
8741
+ .iui-notification-marker::before{
8850
8742
  transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
8851
8743
  }
8852
8744
  }
8853
- @media (prefers-reduced-motion: no-preference){
8854
- .iui-notification-warning.iui-urgent::before{
8855
- -webkit-animation:pulse-warning 2s infinite;
8856
- animation:pulse-warning 2s infinite;
8857
- }
8745
+ .iui-notification-marker > *{
8746
+ -webkit-mask:radial-gradient(ellipse calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) at 100% 0%, transparent 95%, #000 100%);
8747
+ mask:radial-gradient(ellipse calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) at 100% 0%, transparent 95%, #000 100%);
8858
8748
  }
8859
8749
  @media (prefers-reduced-motion: no-preference){
8860
- @-webkit-keyframes pulse-warning{
8861
- 0%{
8862
- box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
8863
- }
8864
- 70%{
8865
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
8866
- }
8867
- 100%{
8868
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
8869
- }
8750
+ .iui-notification-marker:where([data-iui-urgent="true"])::before{
8751
+ -webkit-animation:pulse 2s infinite;
8752
+ animation:pulse 2s infinite;
8870
8753
  }
8871
- @keyframes pulse-warning{
8872
- 0%{
8873
- box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
8874
- }
8875
- 70%{
8876
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
8877
- }
8878
- 100%{
8879
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
8880
- }
8881
- }
8882
- }
8883
-
8884
- .iui-notification-negative{
8885
- position:relative;
8886
- }
8887
- .iui-notification-negative::before{
8888
- content:"";
8889
- position:absolute;
8890
- width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
8891
- height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
8892
- top:calc(var(--iui-size-s) * -0.5);
8893
- right:calc(var(--iui-size-s) * -0.5);
8894
- border-radius:100%;
8895
- background-color:var(--iui-color-foreground-negative);
8896
- border:var(--iui-size-3xs) solid var(--iui-color-background-1);
8897
8754
  }
8898
8755
  @media (prefers-reduced-motion: no-preference){
8899
- .iui-notification-negative::before{
8900
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
8901
- }
8902
- }
8903
- @media (prefers-reduced-motion: no-preference){
8904
- .iui-notification-negative.iui-urgent::before{
8905
- -webkit-animation:pulse-negative 2s infinite;
8906
- animation:pulse-negative 2s infinite;
8907
- }
8908
- }
8909
- @media (prefers-reduced-motion: no-preference){
8910
- @-webkit-keyframes pulse-negative{
8756
+ @-webkit-keyframes pulse{
8911
8757
  0%{
8912
- box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
8758
+ box-shadow:0 0 0 0 var(--_iui-notification-marker-color);
8913
8759
  }
8914
8760
  70%{
8915
8761
  box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
@@ -8918,9 +8764,9 @@ label.iui-input-label.iui-disabled{
8918
8764
  box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
8919
8765
  }
8920
8766
  }
8921
- @keyframes pulse-negative{
8767
+ @keyframes pulse{
8922
8768
  0%{
8923
- box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
8769
+ box-shadow:0 0 0 0 var(--_iui-notification-marker-color);
8924
8770
  }
8925
8771
  70%{
8926
8772
  box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
@@ -8930,55 +8776,17 @@ label.iui-input-label.iui-disabled{
8930
8776
  }
8931
8777
  }
8932
8778
  }
8933
-
8934
- .iui-notification-accessory{
8935
- position:relative;
8936
- }
8937
- .iui-notification-accessory::before{
8938
- content:"";
8939
- position:absolute;
8940
- width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
8941
- height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
8942
- top:calc(var(--iui-size-s) * -0.5);
8943
- right:calc(var(--iui-size-s) * -0.5);
8944
- border-radius:100%;
8945
- background-color:var(--iui-color-foreground-accessory);
8946
- border:var(--iui-size-3xs) solid var(--iui-color-background-1);
8779
+ .iui-notification-marker[data-iui-variant=positive]{
8780
+ --_iui-notification-marker-color:var(--iui-color-foreground-positive);
8947
8781
  }
8948
- @media (prefers-reduced-motion: no-preference){
8949
- .iui-notification-accessory::before{
8950
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
8951
- }
8782
+ .iui-notification-marker[data-iui-variant=warning]{
8783
+ --_iui-notification-marker-color:var(--iui-color-foreground-warning);
8952
8784
  }
8953
- @media (prefers-reduced-motion: no-preference){
8954
- .iui-notification-accessory.iui-urgent::before{
8955
- -webkit-animation:pulse-accessory 2s infinite;
8956
- animation:pulse-accessory 2s infinite;
8957
- }
8785
+ .iui-notification-marker[data-iui-variant=negative]{
8786
+ --_iui-notification-marker-color:var(--iui-color-foreground-negative);
8958
8787
  }
8959
- @media (prefers-reduced-motion: no-preference){
8960
- @-webkit-keyframes pulse-accessory{
8961
- 0%{
8962
- box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
8963
- }
8964
- 70%{
8965
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
8966
- }
8967
- 100%{
8968
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
8969
- }
8970
- }
8971
- @keyframes pulse-accessory{
8972
- 0%{
8973
- box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
8974
- }
8975
- 70%{
8976
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
8977
- }
8978
- 100%{
8979
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
8980
- }
8981
- }
8788
+ .iui-notification-marker[data-iui-variant=accessory]{
8789
+ --_iui-notification-marker-color:var(--iui-color-foreground-accessory);
8982
8790
  }
8983
8791
  .iui-popover.tippy-box{
8984
8792
  all:revert;
package/css/button.css CHANGED
@@ -58,15 +58,6 @@
58
58
  --_iui-button-background-color:var(--iui-color-background-1-hover);
59
59
  --_iui-button-border-color:var(--iui-color-foreground-1);
60
60
  }
61
- .iui-button:hover .iui-notification-primary::before,
62
- .iui-button:hover .iui-notification-positive::before,
63
- .iui-button:hover .iui-notification-warning::before,
64
- .iui-button:hover .iui-notification-negative::before, .iui-button:active .iui-notification-primary::before,
65
- .iui-button:active .iui-notification-positive::before,
66
- .iui-button:active .iui-notification-warning::before,
67
- .iui-button:active .iui-notification-negative::before{
68
- border-color:var(--iui-color-background-1-hover);
69
- }
70
61
  .iui-button:focus{
71
62
  outline-offset:-2px;
72
63
  outline-width:2px;
package/css/side-navigation.css CHANGED
@@ -79,7 +79,7 @@
79
79
  padding-left:max(calc(1.5 * var(--iui-size-m)), calc(1.5 * var(--iui-size-m)) + env(safe-area-inset-left));
80
80
  }
81
81
  }
82
- .iui-side-navigation .iui-sidenav-button > span{
82
+ .iui-side-navigation .iui-sidenav-button > span:where(:not(.iui-button-icon)){
83
83
  white-space:nowrap;
84
84
  overflow:hidden;
85
85
  text-overflow:ellipsis;
@@ -87,7 +87,7 @@
87
87
  .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
88
88
  border-color:var(--iui-color-background-border);
89
89
  }
90
- .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-avatar) svg{
90
+ .iui-side-navigation .iui-sidenav-button .iui-button-icon:not(.iui-avatar) svg{
91
91
  display:flex;
92
92
  flex-shrink:0;
93
93
  width:calc(1.5 * var(--iui-size-m));
package/css/utils.css CHANGED
@@ -410,135 +410,40 @@ label.iui-input-label.iui-disabled{
410
410
  margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
411
411
  }
412
412
 
413
- .iui-notification-primary{
413
+ .iui-notification-marker{
414
+ --_iui-notification-marker-color:var(--iui-color-foreground-primary);
414
415
  position:relative;
415
416
  }
416
- .iui-notification-primary::before{
417
+ .iui-notification-marker::before{
417
418
  content:"";
418
419
  position:absolute;
419
- width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
420
- height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
421
- top:calc(var(--iui-size-s) * -0.5);
422
- right:calc(var(--iui-size-s) * -0.5);
420
+ width:var(--iui-size-xs);
421
+ height:var(--iui-size-xs);
422
+ top:0;
423
+ right:0;
424
+ transform:translate(50%, -50%);
423
425
  border-radius:100%;
424
- background-color:var(--iui-color-foreground-primary);
425
- border:var(--iui-size-3xs) solid var(--iui-color-background-1);
426
+ background-color:var(--_iui-notification-marker-color);
426
427
  }
427
428
  @media (prefers-reduced-motion: no-preference){
428
- .iui-notification-primary::before{
429
+ .iui-notification-marker::before{
429
430
  transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
430
431
  }
431
432
  }
432
- @media (prefers-reduced-motion: no-preference){
433
- .iui-notification-primary.iui-urgent::before{
434
- -webkit-animation:pulse-primary 2s infinite;
435
- animation:pulse-primary 2s infinite;
436
- }
437
- }
438
- @media (prefers-reduced-motion: no-preference){
439
- @-webkit-keyframes pulse-primary{
440
- 0%{
441
- box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
442
- }
443
- 70%{
444
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
445
- }
446
- 100%{
447
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
448
- }
449
- }
450
- @keyframes pulse-primary{
451
- 0%{
452
- box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
453
- }
454
- 70%{
455
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
456
- }
457
- 100%{
458
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
459
- }
460
- }
461
- }
462
-
463
- .iui-notification-positive{
464
- position:relative;
465
- }
466
- .iui-notification-positive::before{
467
- content:"";
468
- position:absolute;
469
- width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
470
- height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
471
- top:calc(var(--iui-size-s) * -0.5);
472
- right:calc(var(--iui-size-s) * -0.5);
473
- border-radius:100%;
474
- background-color:var(--iui-color-foreground-positive);
475
- border:var(--iui-size-3xs) solid var(--iui-color-background-1);
476
- }
477
- @media (prefers-reduced-motion: no-preference){
478
- .iui-notification-positive::before{
479
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
480
- }
481
- }
482
- @media (prefers-reduced-motion: no-preference){
483
- .iui-notification-positive.iui-urgent::before{
484
- -webkit-animation:pulse-positive 2s infinite;
485
- animation:pulse-positive 2s infinite;
486
- }
487
- }
488
- @media (prefers-reduced-motion: no-preference){
489
- @-webkit-keyframes pulse-positive{
490
- 0%{
491
- box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
492
- }
493
- 70%{
494
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
495
- }
496
- 100%{
497
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
498
- }
499
- }
500
- @keyframes pulse-positive{
501
- 0%{
502
- box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
503
- }
504
- 70%{
505
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
506
- }
507
- 100%{
508
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
509
- }
510
- }
511
- }
512
-
513
- .iui-notification-warning{
514
- position:relative;
515
- }
516
- .iui-notification-warning::before{
517
- content:"";
518
- position:absolute;
519
- width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
520
- height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
521
- top:calc(var(--iui-size-s) * -0.5);
522
- right:calc(var(--iui-size-s) * -0.5);
523
- border-radius:100%;
524
- background-color:var(--iui-color-foreground-warning);
525
- border:var(--iui-size-3xs) solid var(--iui-color-background-1);
526
- }
527
- @media (prefers-reduced-motion: no-preference){
528
- .iui-notification-warning::before{
529
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
530
- }
433
+ .iui-notification-marker > *{
434
+ -webkit-mask:radial-gradient(ellipse calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) at 100% 0%, transparent 95%, #000 100%);
435
+ mask:radial-gradient(ellipse calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) at 100% 0%, transparent 95%, #000 100%);
531
436
  }
532
437
  @media (prefers-reduced-motion: no-preference){
533
- .iui-notification-warning.iui-urgent::before{
534
- -webkit-animation:pulse-warning 2s infinite;
535
- animation:pulse-warning 2s infinite;
438
+ .iui-notification-marker:where([data-iui-urgent="true"])::before{
439
+ -webkit-animation:pulse 2s infinite;
440
+ animation:pulse 2s infinite;
536
441
  }
537
442
  }
538
443
  @media (prefers-reduced-motion: no-preference){
539
- @-webkit-keyframes pulse-warning{
444
+ @-webkit-keyframes pulse{
540
445
  0%{
541
- box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
446
+ box-shadow:0 0 0 0 var(--_iui-notification-marker-color);
542
447
  }
543
448
  70%{
544
449
  box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
@@ -547,9 +452,9 @@ label.iui-input-label.iui-disabled{
547
452
  box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
548
453
  }
549
454
  }
550
- @keyframes pulse-warning{
455
+ @keyframes pulse{
551
456
  0%{
552
- box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
457
+ box-shadow:0 0 0 0 var(--_iui-notification-marker-color);
553
458
  }
554
459
  70%{
555
460
  box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
@@ -559,105 +464,17 @@ label.iui-input-label.iui-disabled{
559
464
  }
560
465
  }
561
466
  }
562
-
563
- .iui-notification-negative{
564
- position:relative;
467
+ .iui-notification-marker[data-iui-variant=positive]{
468
+ --_iui-notification-marker-color:var(--iui-color-foreground-positive);
565
469
  }
566
- .iui-notification-negative::before{
567
- content:"";
568
- position:absolute;
569
- width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
570
- height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
571
- top:calc(var(--iui-size-s) * -0.5);
572
- right:calc(var(--iui-size-s) * -0.5);
573
- border-radius:100%;
574
- background-color:var(--iui-color-foreground-negative);
575
- border:var(--iui-size-3xs) solid var(--iui-color-background-1);
470
+ .iui-notification-marker[data-iui-variant=warning]{
471
+ --_iui-notification-marker-color:var(--iui-color-foreground-warning);
576
472
  }
577
- @media (prefers-reduced-motion: no-preference){
578
- .iui-notification-negative::before{
579
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
580
- }
581
- }
582
- @media (prefers-reduced-motion: no-preference){
583
- .iui-notification-negative.iui-urgent::before{
584
- -webkit-animation:pulse-negative 2s infinite;
585
- animation:pulse-negative 2s infinite;
586
- }
587
- }
588
- @media (prefers-reduced-motion: no-preference){
589
- @-webkit-keyframes pulse-negative{
590
- 0%{
591
- box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
592
- }
593
- 70%{
594
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
595
- }
596
- 100%{
597
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
598
- }
599
- }
600
- @keyframes pulse-negative{
601
- 0%{
602
- box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
603
- }
604
- 70%{
605
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
606
- }
607
- 100%{
608
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
609
- }
610
- }
473
+ .iui-notification-marker[data-iui-variant=negative]{
474
+ --_iui-notification-marker-color:var(--iui-color-foreground-negative);
611
475
  }
612
-
613
- .iui-notification-accessory{
614
- position:relative;
615
- }
616
- .iui-notification-accessory::before{
617
- content:"";
618
- position:absolute;
619
- width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
620
- height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
621
- top:calc(var(--iui-size-s) * -0.5);
622
- right:calc(var(--iui-size-s) * -0.5);
623
- border-radius:100%;
624
- background-color:var(--iui-color-foreground-accessory);
625
- border:var(--iui-size-3xs) solid var(--iui-color-background-1);
626
- }
627
- @media (prefers-reduced-motion: no-preference){
628
- .iui-notification-accessory::before{
629
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
630
- }
631
- }
632
- @media (prefers-reduced-motion: no-preference){
633
- .iui-notification-accessory.iui-urgent::before{
634
- -webkit-animation:pulse-accessory 2s infinite;
635
- animation:pulse-accessory 2s infinite;
636
- }
637
- }
638
- @media (prefers-reduced-motion: no-preference){
639
- @-webkit-keyframes pulse-accessory{
640
- 0%{
641
- box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
642
- }
643
- 70%{
644
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
645
- }
646
- 100%{
647
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
648
- }
649
- }
650
- @keyframes pulse-accessory{
651
- 0%{
652
- box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
653
- }
654
- 70%{
655
- box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
656
- }
657
- 100%{
658
- box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
659
- }
660
- }
476
+ .iui-notification-marker[data-iui-variant=accessory]{
477
+ --_iui-notification-marker-color:var(--iui-color-foreground-accessory);
661
478
  }
662
479
  .iui-popover.tippy-box{
663
480
  all:revert;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "1.0.0-dev.11",
3
+ "version": "1.0.0-dev.12",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "css/all.css",