@itwin/itwinui-css 0.63.1 → 0.63.2-dev.1

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 (95) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +9975 -9928
  4. package/css/anchor.css +58 -56
  5. package/css/backdrop.css +21 -19
  6. package/css/badge.css +26 -24
  7. package/css/blockquote.css +26 -24
  8. package/css/breadcrumbs.css +384 -382
  9. package/css/button.css +462 -460
  10. package/css/carousel.css +119 -117
  11. package/css/code.css +87 -85
  12. package/css/color-picker.css +221 -219
  13. package/css/date-picker.css +449 -447
  14. package/css/dialog.css +153 -151
  15. package/css/expandable-block.css +209 -207
  16. package/css/fieldset.css +33 -31
  17. package/css/file-upload.css +100 -98
  18. package/css/footer.css +87 -85
  19. package/css/global.css +462 -460
  20. package/css/header.css +484 -482
  21. package/css/icon.css +163 -161
  22. package/css/information-panel.css +190 -188
  23. package/css/inputs.css +1257 -1255
  24. package/css/keyboard.css +34 -32
  25. package/css/location-marker.css +110 -108
  26. package/css/menu.css +168 -166
  27. package/css/non-ideal-state.css +62 -60
  28. package/css/notification-marker.css +246 -244
  29. package/css/popover.css +11 -9
  30. package/css/progress-indicator.css +379 -377
  31. package/css/radio-tile.css +184 -182
  32. package/css/reset-global-styles.css +35 -33
  33. package/css/side-navigation.css +209 -207
  34. package/css/skip-to-content.css +55 -53
  35. package/css/slider.css +240 -238
  36. package/css/surface.css +14 -12
  37. package/css/table.css +710 -708
  38. package/css/tabs.css +339 -337
  39. package/css/tag.css +142 -140
  40. package/css/text.css +102 -100
  41. package/css/tile.css +544 -542
  42. package/css/time-picker.css +125 -123
  43. package/css/toast-notification.css +301 -299
  44. package/css/toggle-switch.css +237 -235
  45. package/css/tooltip.css +53 -51
  46. package/css/tree.css +137 -135
  47. package/css/user-icon.css +242 -240
  48. package/css/wizard.css +182 -180
  49. package/package.json +1 -1
  50. package/scss/alert/classes.scss +7 -5
  51. package/scss/anchor/classes.scss +6 -4
  52. package/scss/backdrop/classes.scss +4 -2
  53. package/scss/badge/classes.scss +4 -2
  54. package/scss/blockquote/classes.scss +4 -2
  55. package/scss/breadcrumbs/classes.scss +22 -20
  56. package/scss/button/classes.scss +47 -45
  57. package/scss/carousel/classes.scss +10 -8
  58. package/scss/code/classes.scss +7 -5
  59. package/scss/color-picker/classes.scss +40 -38
  60. package/scss/date-picker/classes.scss +44 -42
  61. package/scss/dialog/classes.scss +45 -43
  62. package/scss/expandable-block/classes.scss +4 -2
  63. package/scss/fieldset/classes.scss +4 -2
  64. package/scss/file-upload/classes.scss +4 -2
  65. package/scss/footer/classes.scss +16 -14
  66. package/scss/header/classes.scss +7 -5
  67. package/scss/icon/classes.scss +19 -17
  68. package/scss/information-panel/classes.scss +18 -16
  69. package/scss/inputs/classes.scss +62 -60
  70. package/scss/keyboard/classes.scss +4 -2
  71. package/scss/location-marker/classes.scss +10 -8
  72. package/scss/menu/classes.scss +14 -12
  73. package/scss/non-ideal-state/classes.scss +4 -2
  74. package/scss/notification-marker/classes.scss +5 -3
  75. package/scss/popover/classes.scss +4 -2
  76. package/scss/progress-indicator/classes.scss +22 -20
  77. package/scss/radio-tile/classes.scss +22 -20
  78. package/scss/reset-global-styles.scss +25 -23
  79. package/scss/side-navigation/classes.scss +10 -8
  80. package/scss/skip-to-content/classes.scss +4 -2
  81. package/scss/slider/classes.scss +37 -35
  82. package/scss/style/global.scss +49 -47
  83. package/scss/surface/classes.scss +4 -2
  84. package/scss/table/classes.scss +45 -43
  85. package/scss/tabs/classes.scss +31 -29
  86. package/scss/tag/classes.scss +20 -18
  87. package/scss/text/classes.scss +36 -34
  88. package/scss/tile/classes.scss +36 -34
  89. package/scss/time-picker/classes.scss +11 -9
  90. package/scss/toast-notification/classes.scss +71 -69
  91. package/scss/toggle-switch/classes.scss +7 -5
  92. package/scss/tooltip/classes.scss +17 -15
  93. package/scss/tree/classes.scss +13 -11
  94. package/scss/user-icon/classes.scss +18 -16
  95. package/scss/wizard/classes.scss +18 -16
package/css/non-ideal-state.css CHANGED
@@ -2,64 +2,66 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-non-ideal-state{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- display:flex;
11
- flex-direction:column;
12
- align-items:center;
13
- justify-content:center;
14
- text-align:center;
15
- position:absolute;
16
- left:50%;
17
- top:40%;
18
- min-width:220px;
19
- transform:translate(-50%, -40%);
20
- }
21
- .iui-non-ideal-state > .iui-non-ideal-state-illustration{
22
- max-width:220px;
23
- max-height:242px;
24
- margin-bottom:22px;
25
- text-align:center;
26
- display:flex;
27
- justify-content:center;
28
- align-items:center;
29
- }
30
- .iui-non-ideal-state > .iui-non-ideal-state-title{
31
- margin:0;
32
- padding:0;
33
- border:none;
34
- vertical-align:baseline;
35
- font-size:32px;
36
- font-weight:300;
37
- line-height:44px;
38
- padding:0;
39
- margin:0 0 22px;
40
- }
41
- .iui-non-ideal-state > .iui-non-ideal-state-description{
42
- margin:0;
43
- padding:0;
44
- border:none;
45
- vertical-align:baseline;
46
- font-size:14px;
47
- font-weight:400;
48
- line-height:22px;
49
- padding:0;
50
- margin:0 0 22px;
51
- }
52
- .iui-non-ideal-state > .iui-non-ideal-state-actions{
53
- display:flex;
54
- align-items:center;
55
- margin-bottom:8px;
56
- }
57
- .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-input-container{
58
- display:inline-block;
59
- width:200px;
60
- text-align:left;
61
- margin:0 4px 0 0;
62
- }
63
- .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-button{
64
- margin:0 4px;
5
+ @layer itwinui-v1{
6
+ .iui-non-ideal-state{
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ display:flex;
12
+ flex-direction:column;
13
+ align-items:center;
14
+ justify-content:center;
15
+ text-align:center;
16
+ position:absolute;
17
+ left:50%;
18
+ top:40%;
19
+ min-width:220px;
20
+ transform:translate(-50%, -40%);
21
+ }
22
+ .iui-non-ideal-state > .iui-non-ideal-state-illustration{
23
+ max-width:220px;
24
+ max-height:242px;
25
+ margin-bottom:22px;
26
+ text-align:center;
27
+ display:flex;
28
+ justify-content:center;
29
+ align-items:center;
30
+ }
31
+ .iui-non-ideal-state > .iui-non-ideal-state-title{
32
+ margin:0;
33
+ padding:0;
34
+ border:none;
35
+ vertical-align:baseline;
36
+ font-size:32px;
37
+ font-weight:300;
38
+ line-height:44px;
39
+ padding:0;
40
+ margin:0 0 22px;
41
+ }
42
+ .iui-non-ideal-state > .iui-non-ideal-state-description{
43
+ margin:0;
44
+ padding:0;
45
+ border:none;
46
+ vertical-align:baseline;
47
+ font-size:14px;
48
+ font-weight:400;
49
+ line-height:22px;
50
+ padding:0;
51
+ margin:0 0 22px;
52
+ }
53
+ .iui-non-ideal-state > .iui-non-ideal-state-actions{
54
+ display:flex;
55
+ align-items:center;
56
+ margin-bottom:8px;
57
+ }
58
+ .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-input-container{
59
+ display:inline-block;
60
+ width:200px;
61
+ text-align:left;
62
+ margin:0 4px 0 0;
63
+ }
64
+ .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-button{
65
+ margin:0 4px;
66
+ }
65
67
  }
package/css/notification-marker.css CHANGED
@@ -2,292 +2,294 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-notification-primary{
6
- position:relative;
7
- }
8
- .iui-notification-primary::before{
9
- content:"";
10
- position:absolute;
11
- width:8px;
12
- height:8px;
13
- top:-6px;
14
- right:-6px;
15
- border-radius:100%;
16
- background-color:#008ae0;
17
- border:2px solid white;
18
- background-color:var(--iui-color-foreground-primary);
19
- border:2px solid var(--iui-color-background-1);
20
- }
21
- @media (prefers-reduced-motion: no-preference){
22
- .iui-notification-primary::before{
23
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
5
+ @layer itwinui-v1{
6
+ .iui-notification-primary{
7
+ position:relative;
24
8
  }
25
- }
26
- @media (prefers-reduced-motion: no-preference){
27
- .iui-notification-primary.iui-urgent::before{
28
- -webkit-animation:pulse-primary 2s infinite;
29
- animation:pulse-primary 2s infinite;
9
+ .iui-notification-primary::before{
10
+ content:"";
11
+ position:absolute;
12
+ width:8px;
13
+ height:8px;
14
+ top:-6px;
15
+ right:-6px;
16
+ border-radius:100%;
17
+ background-color:#008ae0;
18
+ border:2px solid white;
19
+ background-color:var(--iui-color-foreground-primary);
20
+ border:2px solid var(--iui-color-background-1);
30
21
  }
31
- }
32
- @media (prefers-reduced-motion: no-preference){
33
- @-webkit-keyframes pulse-primary{
34
- 0%{
35
- box-shadow:0 0 0 0 #008ae0;
36
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
37
- }
38
- 70%{
39
- box-shadow:0 0 0 7px rgba(0, 138, 224, 0);
40
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0);
41
- }
42
- 100%{
43
- box-shadow:0 0 0 0 rgba(0, 138, 224, 0);
44
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0);
22
+ @media (prefers-reduced-motion: no-preference){
23
+ .iui-notification-primary::before{
24
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
45
25
  }
46
26
  }
47
- @keyframes pulse-primary{
48
- 0%{
49
- box-shadow:0 0 0 0 #008ae0;
50
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
27
+ @media (prefers-reduced-motion: no-preference){
28
+ .iui-notification-primary.iui-urgent::before{
29
+ -webkit-animation:pulse-primary 2s infinite;
30
+ animation:pulse-primary 2s infinite;
51
31
  }
52
- 70%{
53
- box-shadow:0 0 0 7px rgba(0, 138, 224, 0);
54
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0);
32
+ }
33
+ @media (prefers-reduced-motion: no-preference){
34
+ @-webkit-keyframes pulse-primary{
35
+ 0%{
36
+ box-shadow:0 0 0 0 #008ae0;
37
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
38
+ }
39
+ 70%{
40
+ box-shadow:0 0 0 7px rgba(0, 138, 224, 0);
41
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0);
42
+ }
43
+ 100%{
44
+ box-shadow:0 0 0 0 rgba(0, 138, 224, 0);
45
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0);
46
+ }
55
47
  }
56
- 100%{
57
- box-shadow:0 0 0 0 rgba(0, 138, 224, 0);
58
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0);
48
+ @keyframes pulse-primary{
49
+ 0%{
50
+ box-shadow:0 0 0 0 #008ae0;
51
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
52
+ }
53
+ 70%{
54
+ box-shadow:0 0 0 7px rgba(0, 138, 224, 0);
55
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-primary-rgb), 0);
56
+ }
57
+ 100%{
58
+ box-shadow:0 0 0 0 rgba(0, 138, 224, 0);
59
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-primary-rgb), 0);
60
+ }
59
61
  }
60
62
  }
61
- }
62
63
 
63
- .iui-notification-positive{
64
- position:relative;
65
- }
66
- .iui-notification-positive::before{
67
- content:"";
68
- position:absolute;
69
- width:8px;
70
- height:8px;
71
- top:-6px;
72
- right:-6px;
73
- border-radius:100%;
74
- background-color:#53a21a;
75
- border:2px solid white;
76
- background-color:var(--iui-color-foreground-positive);
77
- border:2px solid var(--iui-color-background-1);
78
- }
79
- @media (prefers-reduced-motion: no-preference){
80
- .iui-notification-positive::before{
81
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
64
+ .iui-notification-positive{
65
+ position:relative;
82
66
  }
83
- }
84
- @media (prefers-reduced-motion: no-preference){
85
- .iui-notification-positive.iui-urgent::before{
86
- -webkit-animation:pulse-positive 2s infinite;
87
- animation:pulse-positive 2s infinite;
67
+ .iui-notification-positive::before{
68
+ content:"";
69
+ position:absolute;
70
+ width:8px;
71
+ height:8px;
72
+ top:-6px;
73
+ right:-6px;
74
+ border-radius:100%;
75
+ background-color:#53a21a;
76
+ border:2px solid white;
77
+ background-color:var(--iui-color-foreground-positive);
78
+ border:2px solid var(--iui-color-background-1);
88
79
  }
89
- }
90
- @media (prefers-reduced-motion: no-preference){
91
- @-webkit-keyframes pulse-positive{
92
- 0%{
93
- box-shadow:0 0 0 0 #53a21a;
94
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1));
95
- }
96
- 70%{
97
- box-shadow:0 0 0 7px rgba(83, 162, 26, 0);
98
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0);
99
- }
100
- 100%{
101
- box-shadow:0 0 0 0 rgba(83, 162, 26, 0);
102
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0);
80
+ @media (prefers-reduced-motion: no-preference){
81
+ .iui-notification-positive::before{
82
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
103
83
  }
104
84
  }
105
- @keyframes pulse-positive{
106
- 0%{
107
- box-shadow:0 0 0 0 #53a21a;
108
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1));
85
+ @media (prefers-reduced-motion: no-preference){
86
+ .iui-notification-positive.iui-urgent::before{
87
+ -webkit-animation:pulse-positive 2s infinite;
88
+ animation:pulse-positive 2s infinite;
109
89
  }
110
- 70%{
111
- box-shadow:0 0 0 7px rgba(83, 162, 26, 0);
112
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0);
90
+ }
91
+ @media (prefers-reduced-motion: no-preference){
92
+ @-webkit-keyframes pulse-positive{
93
+ 0%{
94
+ box-shadow:0 0 0 0 #53a21a;
95
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1));
96
+ }
97
+ 70%{
98
+ box-shadow:0 0 0 7px rgba(83, 162, 26, 0);
99
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0);
100
+ }
101
+ 100%{
102
+ box-shadow:0 0 0 0 rgba(83, 162, 26, 0);
103
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0);
104
+ }
113
105
  }
114
- 100%{
115
- box-shadow:0 0 0 0 rgba(83, 162, 26, 0);
116
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0);
106
+ @keyframes pulse-positive{
107
+ 0%{
108
+ box-shadow:0 0 0 0 #53a21a;
109
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-1));
110
+ }
111
+ 70%{
112
+ box-shadow:0 0 0 7px rgba(83, 162, 26, 0);
113
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-positive-rgb), 0);
114
+ }
115
+ 100%{
116
+ box-shadow:0 0 0 0 rgba(83, 162, 26, 0);
117
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-positive-rgb), 0);
118
+ }
117
119
  }
118
120
  }
119
- }
120
121
 
121
- .iui-notification-warning{
122
- position:relative;
123
- }
124
- .iui-notification-warning::before{
125
- content:"";
126
- position:absolute;
127
- width:8px;
128
- height:8px;
129
- top:-6px;
130
- right:-6px;
131
- border-radius:100%;
132
- background-color:#f18d13;
133
- border:2px solid white;
134
- background-color:var(--iui-color-foreground-warning);
135
- border:2px solid var(--iui-color-background-1);
136
- }
137
- @media (prefers-reduced-motion: no-preference){
138
- .iui-notification-warning::before{
139
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
122
+ .iui-notification-warning{
123
+ position:relative;
140
124
  }
141
- }
142
- @media (prefers-reduced-motion: no-preference){
143
- .iui-notification-warning.iui-urgent::before{
144
- -webkit-animation:pulse-warning 2s infinite;
145
- animation:pulse-warning 2s infinite;
125
+ .iui-notification-warning::before{
126
+ content:"";
127
+ position:absolute;
128
+ width:8px;
129
+ height:8px;
130
+ top:-6px;
131
+ right:-6px;
132
+ border-radius:100%;
133
+ background-color:#f18d13;
134
+ border:2px solid white;
135
+ background-color:var(--iui-color-foreground-warning);
136
+ border:2px solid var(--iui-color-background-1);
146
137
  }
147
- }
148
- @media (prefers-reduced-motion: no-preference){
149
- @-webkit-keyframes pulse-warning{
150
- 0%{
151
- box-shadow:0 0 0 0 #f18d13;
152
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1));
153
- }
154
- 70%{
155
- box-shadow:0 0 0 7px rgba(241, 141, 19, 0);
156
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0);
157
- }
158
- 100%{
159
- box-shadow:0 0 0 0 rgba(241, 141, 19, 0);
160
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0);
138
+ @media (prefers-reduced-motion: no-preference){
139
+ .iui-notification-warning::before{
140
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
161
141
  }
162
142
  }
163
- @keyframes pulse-warning{
164
- 0%{
165
- box-shadow:0 0 0 0 #f18d13;
166
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1));
143
+ @media (prefers-reduced-motion: no-preference){
144
+ .iui-notification-warning.iui-urgent::before{
145
+ -webkit-animation:pulse-warning 2s infinite;
146
+ animation:pulse-warning 2s infinite;
167
147
  }
168
- 70%{
169
- box-shadow:0 0 0 7px rgba(241, 141, 19, 0);
170
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0);
148
+ }
149
+ @media (prefers-reduced-motion: no-preference){
150
+ @-webkit-keyframes pulse-warning{
151
+ 0%{
152
+ box-shadow:0 0 0 0 #f18d13;
153
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1));
154
+ }
155
+ 70%{
156
+ box-shadow:0 0 0 7px rgba(241, 141, 19, 0);
157
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0);
158
+ }
159
+ 100%{
160
+ box-shadow:0 0 0 0 rgba(241, 141, 19, 0);
161
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0);
162
+ }
171
163
  }
172
- 100%{
173
- box-shadow:0 0 0 0 rgba(241, 141, 19, 0);
174
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0);
164
+ @keyframes pulse-warning{
165
+ 0%{
166
+ box-shadow:0 0 0 0 #f18d13;
167
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-1));
168
+ }
169
+ 70%{
170
+ box-shadow:0 0 0 7px rgba(241, 141, 19, 0);
171
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-warning-rgb), 0);
172
+ }
173
+ 100%{
174
+ box-shadow:0 0 0 0 rgba(241, 141, 19, 0);
175
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-warning-rgb), 0);
176
+ }
175
177
  }
176
178
  }
177
- }
178
179
 
179
- .iui-notification-negative{
180
- position:relative;
181
- }
182
- .iui-notification-negative::before{
183
- content:"";
184
- position:absolute;
185
- width:8px;
186
- height:8px;
187
- top:-6px;
188
- right:-6px;
189
- border-radius:100%;
190
- background-color:#d10a0a;
191
- border:2px solid white;
192
- background-color:var(--iui-color-foreground-negative);
193
- border:2px solid var(--iui-color-background-1);
194
- }
195
- @media (prefers-reduced-motion: no-preference){
196
- .iui-notification-negative::before{
197
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
180
+ .iui-notification-negative{
181
+ position:relative;
198
182
  }
199
- }
200
- @media (prefers-reduced-motion: no-preference){
201
- .iui-notification-negative.iui-urgent::before{
202
- -webkit-animation:pulse-negative 2s infinite;
203
- animation:pulse-negative 2s infinite;
183
+ .iui-notification-negative::before{
184
+ content:"";
185
+ position:absolute;
186
+ width:8px;
187
+ height:8px;
188
+ top:-6px;
189
+ right:-6px;
190
+ border-radius:100%;
191
+ background-color:#d10a0a;
192
+ border:2px solid white;
193
+ background-color:var(--iui-color-foreground-negative);
194
+ border:2px solid var(--iui-color-background-1);
204
195
  }
205
- }
206
- @media (prefers-reduced-motion: no-preference){
207
- @-webkit-keyframes pulse-negative{
208
- 0%{
209
- box-shadow:0 0 0 0 #d10a0a;
210
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1));
211
- }
212
- 70%{
213
- box-shadow:0 0 0 7px rgba(209, 10, 10, 0);
214
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0);
215
- }
216
- 100%{
217
- box-shadow:0 0 0 0 rgba(209, 10, 10, 0);
218
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0);
196
+ @media (prefers-reduced-motion: no-preference){
197
+ .iui-notification-negative::before{
198
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
219
199
  }
220
200
  }
221
- @keyframes pulse-negative{
222
- 0%{
223
- box-shadow:0 0 0 0 #d10a0a;
224
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1));
201
+ @media (prefers-reduced-motion: no-preference){
202
+ .iui-notification-negative.iui-urgent::before{
203
+ -webkit-animation:pulse-negative 2s infinite;
204
+ animation:pulse-negative 2s infinite;
225
205
  }
226
- 70%{
227
- box-shadow:0 0 0 7px rgba(209, 10, 10, 0);
228
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0);
206
+ }
207
+ @media (prefers-reduced-motion: no-preference){
208
+ @-webkit-keyframes pulse-negative{
209
+ 0%{
210
+ box-shadow:0 0 0 0 #d10a0a;
211
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1));
212
+ }
213
+ 70%{
214
+ box-shadow:0 0 0 7px rgba(209, 10, 10, 0);
215
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0);
216
+ }
217
+ 100%{
218
+ box-shadow:0 0 0 0 rgba(209, 10, 10, 0);
219
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0);
220
+ }
229
221
  }
230
- 100%{
231
- box-shadow:0 0 0 0 rgba(209, 10, 10, 0);
232
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0);
222
+ @keyframes pulse-negative{
223
+ 0%{
224
+ box-shadow:0 0 0 0 #d10a0a;
225
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-1));
226
+ }
227
+ 70%{
228
+ box-shadow:0 0 0 7px rgba(209, 10, 10, 0);
229
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-negative-rgb), 0);
230
+ }
231
+ 100%{
232
+ box-shadow:0 0 0 0 rgba(209, 10, 10, 0);
233
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-negative-rgb), 0);
234
+ }
233
235
  }
234
236
  }
235
- }
236
237
 
237
- .iui-notification-accessory{
238
- position:relative;
239
- }
240
- .iui-notification-accessory::before{
241
- content:"";
242
- position:absolute;
243
- width:8px;
244
- height:8px;
245
- top:-6px;
246
- right:-6px;
247
- border-radius:100%;
248
- background-color:white;
249
- border:2px solid white;
250
- background-color:var(--iui-color-foreground-accessory);
251
- border:2px solid var(--iui-color-background-1);
252
- }
253
- @media (prefers-reduced-motion: no-preference){
254
- .iui-notification-accessory::before{
255
- transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
238
+ .iui-notification-accessory{
239
+ position:relative;
256
240
  }
257
- }
258
- @media (prefers-reduced-motion: no-preference){
259
- .iui-notification-accessory.iui-urgent::before{
260
- -webkit-animation:pulse-accessory 2s infinite;
261
- animation:pulse-accessory 2s infinite;
241
+ .iui-notification-accessory::before{
242
+ content:"";
243
+ position:absolute;
244
+ width:8px;
245
+ height:8px;
246
+ top:-6px;
247
+ right:-6px;
248
+ border-radius:100%;
249
+ background-color:white;
250
+ border:2px solid white;
251
+ background-color:var(--iui-color-foreground-accessory);
252
+ border:2px solid var(--iui-color-background-1);
262
253
  }
263
- }
264
- @media (prefers-reduced-motion: no-preference){
265
- @-webkit-keyframes pulse-accessory{
266
- 0%{
267
- box-shadow:0 0 0 0 white;
268
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1));
269
- }
270
- 70%{
271
- box-shadow:0 0 0 7px rgba(255, 255, 255, 0);
272
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0);
273
- }
274
- 100%{
275
- box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
276
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0);
254
+ @media (prefers-reduced-motion: no-preference){
255
+ .iui-notification-accessory::before{
256
+ transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
277
257
  }
278
258
  }
279
- @keyframes pulse-accessory{
280
- 0%{
281
- box-shadow:0 0 0 0 white;
282
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1));
259
+ @media (prefers-reduced-motion: no-preference){
260
+ .iui-notification-accessory.iui-urgent::before{
261
+ -webkit-animation:pulse-accessory 2s infinite;
262
+ animation:pulse-accessory 2s infinite;
283
263
  }
284
- 70%{
285
- box-shadow:0 0 0 7px rgba(255, 255, 255, 0);
286
- box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0);
264
+ }
265
+ @media (prefers-reduced-motion: no-preference){
266
+ @-webkit-keyframes pulse-accessory{
267
+ 0%{
268
+ box-shadow:0 0 0 0 white;
269
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1));
270
+ }
271
+ 70%{
272
+ box-shadow:0 0 0 7px rgba(255, 255, 255, 0);
273
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0);
274
+ }
275
+ 100%{
276
+ box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
277
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0);
278
+ }
287
279
  }
288
- 100%{
289
- box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
290
- box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0);
280
+ @keyframes pulse-accessory{
281
+ 0%{
282
+ box-shadow:0 0 0 0 white;
283
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1));
284
+ }
285
+ 70%{
286
+ box-shadow:0 0 0 7px rgba(255, 255, 255, 0);
287
+ box-shadow:0 0 0 7px rgba(var(--iui-color-foreground-accessory-rgb), 0);
288
+ }
289
+ 100%{
290
+ box-shadow:0 0 0 0 rgba(255, 255, 255, 0);
291
+ box-shadow:0 0 0 0 rgba(var(--iui-color-foreground-accessory-rgb), 0);
292
+ }
291
293
  }
292
294
  }
293
295
  }