@patternfly/patternfly 6.0.0-alpha.213 → 6.0.0-alpha.214

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 (12) hide show
  1. package/components/_index.css +0 -88
  2. package/components/_index.scss +0 -1
  3. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +15 -33
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +0 -88
  6. package/patternfly.css +0 -88
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
  9. package/sass-utilities/namespaces-components.scss +0 -3
  10. package/components/NotificationBadge/notification-badge.css +0 -87
  11. package/components/NotificationBadge/notification-badge.scss +0 -108
  12. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -258
package/components/_index.css CHANGED
@@ -11066,94 +11066,6 @@ ul.pf-v6-c-list {
11066
11066
  --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd);
11067
11067
  }
11068
11068
 
11069
- :where(:root, .pf-v6-c-notification-badge) {
11070
- --pf-v6-c-notification-badge--BackgroundColor: transparent;
11071
- --pf-v6-c-notification-badge--MinWidth: 40px;
11072
- --pf-v6-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
11073
- --pf-v6-c-notification-badge--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11074
- --pf-v6-c-notification-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
11075
- --pf-v6-c-notification-badge--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11076
- --pf-v6-c-notification-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
11077
- --pf-v6-c-notification-badge--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--sm));
11078
- --pf-v6-c-notification-badge--MarginInlineEnd: calc(-1 * var(--pf-t--global--spacer--sm));
11079
- --pf-v6-c-notification-badge--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--sm));
11080
- --pf-v6-c-notification-badge--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--sm));
11081
- --pf-v6-c-notification-badge--before--BorderColor: transparent;
11082
- --pf-v6-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
11083
- --pf-v6-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
11084
- --pf-v6-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
11085
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
11086
- --pf-v6-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
11087
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
11088
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
11089
- --pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
11090
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
11091
- --pf-v6-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
11092
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
11093
- --pf-v6-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
11094
- --pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
11095
- --pf-v6-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
11096
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
11097
- --pf-v6-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
11098
- --pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
11099
- }
11100
-
11101
- .pf-v6-c-notification-badge {
11102
- display: inline-flex;
11103
- gap: var(--pf-v6-c-notification-badge--Gap);
11104
- align-items: center;
11105
- justify-content: center;
11106
- padding-block-start: var(--pf-v6-c-notification-badge--PaddingBlockStart);
11107
- padding-block-end: var(--pf-v6-c-notification-badge--PaddingBlockEnd);
11108
- padding-inline-start: var(--pf-v6-c-notification-badge--PaddingInlineStart);
11109
- padding-inline-end: var(--pf-v6-c-notification-badge--PaddingInlineEnd);
11110
- margin-block-start: var(--pf-v6-c-notification-badge--MarginBlockStart);
11111
- margin-block-end: var(--pf-v6-c-notification-badge--MarginBlockEnd);
11112
- margin-inline-start: var(--pf-v6-c-notification-badge--MarginInlineStart);
11113
- margin-inline-end: var(--pf-v6-c-notification-badge--MarginInlineEnd);
11114
- background-color: var(--pf-v6-c-notification-badge--BackgroundColor);
11115
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
11116
- }
11117
- .pf-v6-c-notification-badge::before {
11118
- position: absolute;
11119
- inset-block-start: 0;
11120
- inset-block-end: 0;
11121
- inset-inline-start: 0;
11122
- inset-inline-end: 0;
11123
- content: "";
11124
- border: var(--pf-v6-c-notification-badge--before--BorderWidth) solid var(--pf-v6-c-notification-badge--before--BorderColor);
11125
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
11126
- transform: translate(var(--pf-v6-c-notification-badge--before--TranslateX), var(--pf-v6-c-notification-badge--before--TranslateY));
11127
- }
11128
- .pf-v6-c-notification-badge.pf-m-read {
11129
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--BackgroundColor);
11130
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--before--BorderColor);
11131
- color: var(--pf-v6-c-notification-badge--m-read--Color, inherit);
11132
- }
11133
- .pf-v6-c-notification-badge.pf-m-read:hover {
11134
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--hover--before--BorderColor);
11135
- }
11136
- .pf-v6-c-notification-badge.pf-m-unread {
11137
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--BackgroundColor);
11138
- color: var(--pf-v6-c-notification-badge--m-unread--Color);
11139
- }
11140
- .pf-v6-c-notification-badge.pf-m-unread:hover {
11141
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--hover--BackgroundColor);
11142
- }
11143
- .pf-v6-c-notification-badge.pf-m-attention {
11144
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--BackgroundColor);
11145
- color: var(--pf-v6-c-notification-badge--m-attention--Color);
11146
- }
11147
- .pf-v6-c-notification-badge.pf-m-attention:hover {
11148
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--hover--BackgroundColor);
11149
- }
11150
- .pf-v6-c-notification-badge.pf-m-expanded {
11151
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor);
11152
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor);
11153
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor);
11154
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor);
11155
- }
11156
-
11157
11069
  :where(:root, .pf-v6-c-notification-drawer) {
11158
11070
  --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11159
11071
  --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
package/components/_index.scss CHANGED
@@ -47,7 +47,6 @@
47
47
  @use "./ModalBox/modal-box";
48
48
  @use "./MultipleFileUpload/multiple-file-upload";
49
49
  @use "./Nav/nav";
50
- @use "./NotificationBadge/notification-badge";
51
50
  @use "./NotificationDrawer/notification-drawer";
52
51
  @use "./OverflowMenu/overflow-menu";
53
52
  @use "./Page/page";
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -111,14 +111,12 @@ section: components
111
111
  >
112
112
  <div class="pf-v6-c-toolbar__item">
113
113
  <button
114
- class="pf-v6-c-button pf-m-plain"
114
+ class="pf-v6-c-button pf-m-read pf-m-stateful"
115
115
  type="button"
116
116
  aria-label="Notifications"
117
117
  >
118
- <span class="pf-v6-c-button__text">
119
- <span class="pf-v6-c-notification-badge pf-m-read">
120
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
121
- </span>
118
+ <span class="pf-v6-c-button__icon">
119
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
122
120
  </span>
123
121
  </button>
124
122
  </div>
@@ -756,17 +754,13 @@ section: components
756
754
  >
757
755
  <div class="pf-v6-c-toolbar__item">
758
756
  <button
759
- class="pf-v6-c-button pf-m-plain"
757
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked pf-m-expanded"
760
758
  type="button"
761
759
  aria-expanded="true"
762
760
  aria-label="Notifications"
763
761
  >
764
- <span class="pf-v6-c-button__text">
765
- <span
766
- class="pf-v6-c-notification-badge pf-m-read pf-m-expanded"
767
- >
768
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
769
- </span>
762
+ <span class="pf-v6-c-button__icon">
763
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
770
764
  </span>
771
765
  </button>
772
766
  </div>
@@ -1404,17 +1398,13 @@ section: components
1404
1398
  >
1405
1399
  <div class="pf-v6-c-toolbar__item">
1406
1400
  <button
1407
- class="pf-v6-c-button pf-m-plain"
1401
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked pf-m-expanded"
1408
1402
  type="button"
1409
1403
  aria-expanded="true"
1410
1404
  aria-label="Unread notifications"
1411
1405
  >
1412
- <span class="pf-v6-c-button__text">
1413
- <span
1414
- class="pf-v6-c-notification-badge pf-m-unread pf-m-expanded"
1415
- >
1416
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
1417
- </span>
1406
+ <span class="pf-v6-c-button__icon">
1407
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
1418
1408
  </span>
1419
1409
  </button>
1420
1410
  </div>
@@ -2055,17 +2045,13 @@ section: components
2055
2045
  >
2056
2046
  <div class="pf-v6-c-toolbar__item">
2057
2047
  <button
2058
- class="pf-v6-c-button pf-m-plain"
2048
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked pf-m-expanded"
2059
2049
  type="button"
2060
2050
  aria-expanded="true"
2061
2051
  aria-label="Attention notifications"
2062
2052
  >
2063
- <span class="pf-v6-c-button__text">
2064
- <span
2065
- class="pf-v6-c-notification-badge pf-m-attention pf-m-expanded"
2066
- >
2067
- <i class="pf-v6-pficon-attention-bell" aria-hidden="true"></i>
2068
- </span>
2053
+ <span class="pf-v6-c-button__icon">
2054
+ <i class="pf-v6-pficon-attention-bell" aria-hidden="true"></i>
2069
2055
  </span>
2070
2056
  </button>
2071
2057
  </div>
@@ -2701,17 +2687,13 @@ section: components
2701
2687
  >
2702
2688
  <div class="pf-v6-c-toolbar__item">
2703
2689
  <button
2704
- class="pf-v6-c-button pf-m-plain"
2690
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked pf-m-expanded"
2705
2691
  type="button"
2706
2692
  aria-expanded="true"
2707
2693
  aria-label="Unread notifications"
2708
2694
  >
2709
- <span class="pf-v6-c-button__text">
2710
- <span
2711
- class="pf-v6-c-notification-badge pf-m-unread pf-m-expanded"
2712
- >
2713
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
2714
- </span>
2695
+ <span class="pf-v6-c-button__icon">
2696
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
2715
2697
  </span>
2716
2698
  </button>
2717
2699
  </div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.213",
4
+ "version": "6.0.0-alpha.214",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -17129,94 +17129,6 @@ ul.pf-v6-c-list {
17129
17129
  --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd);
17130
17130
  }
17131
17131
 
17132
- :where(:root, .pf-v6-c-notification-badge) {
17133
- --pf-v6-c-notification-badge--BackgroundColor: transparent;
17134
- --pf-v6-c-notification-badge--MinWidth: 40px;
17135
- --pf-v6-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
17136
- --pf-v6-c-notification-badge--PaddingBlockStart: var(--pf-t--global--spacer--sm);
17137
- --pf-v6-c-notification-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
17138
- --pf-v6-c-notification-badge--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17139
- --pf-v6-c-notification-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
17140
- --pf-v6-c-notification-badge--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--sm));
17141
- --pf-v6-c-notification-badge--MarginInlineEnd: calc(-1 * var(--pf-t--global--spacer--sm));
17142
- --pf-v6-c-notification-badge--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--sm));
17143
- --pf-v6-c-notification-badge--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--sm));
17144
- --pf-v6-c-notification-badge--before--BorderColor: transparent;
17145
- --pf-v6-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
17146
- --pf-v6-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
17147
- --pf-v6-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
17148
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
17149
- --pf-v6-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
17150
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
17151
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
17152
- --pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
17153
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
17154
- --pf-v6-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
17155
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
17156
- --pf-v6-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
17157
- --pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
17158
- --pf-v6-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
17159
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
17160
- --pf-v6-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
17161
- --pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
17162
- }
17163
-
17164
- .pf-v6-c-notification-badge {
17165
- display: inline-flex;
17166
- gap: var(--pf-v6-c-notification-badge--Gap);
17167
- align-items: center;
17168
- justify-content: center;
17169
- padding-block-start: var(--pf-v6-c-notification-badge--PaddingBlockStart);
17170
- padding-block-end: var(--pf-v6-c-notification-badge--PaddingBlockEnd);
17171
- padding-inline-start: var(--pf-v6-c-notification-badge--PaddingInlineStart);
17172
- padding-inline-end: var(--pf-v6-c-notification-badge--PaddingInlineEnd);
17173
- margin-block-start: var(--pf-v6-c-notification-badge--MarginBlockStart);
17174
- margin-block-end: var(--pf-v6-c-notification-badge--MarginBlockEnd);
17175
- margin-inline-start: var(--pf-v6-c-notification-badge--MarginInlineStart);
17176
- margin-inline-end: var(--pf-v6-c-notification-badge--MarginInlineEnd);
17177
- background-color: var(--pf-v6-c-notification-badge--BackgroundColor);
17178
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
17179
- }
17180
- .pf-v6-c-notification-badge::before {
17181
- position: absolute;
17182
- inset-block-start: 0;
17183
- inset-block-end: 0;
17184
- inset-inline-start: 0;
17185
- inset-inline-end: 0;
17186
- content: "";
17187
- border: var(--pf-v6-c-notification-badge--before--BorderWidth) solid var(--pf-v6-c-notification-badge--before--BorderColor);
17188
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
17189
- transform: translate(var(--pf-v6-c-notification-badge--before--TranslateX), var(--pf-v6-c-notification-badge--before--TranslateY));
17190
- }
17191
- .pf-v6-c-notification-badge.pf-m-read {
17192
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--BackgroundColor);
17193
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--before--BorderColor);
17194
- color: var(--pf-v6-c-notification-badge--m-read--Color, inherit);
17195
- }
17196
- .pf-v6-c-notification-badge.pf-m-read:hover {
17197
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--hover--before--BorderColor);
17198
- }
17199
- .pf-v6-c-notification-badge.pf-m-unread {
17200
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--BackgroundColor);
17201
- color: var(--pf-v6-c-notification-badge--m-unread--Color);
17202
- }
17203
- .pf-v6-c-notification-badge.pf-m-unread:hover {
17204
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--hover--BackgroundColor);
17205
- }
17206
- .pf-v6-c-notification-badge.pf-m-attention {
17207
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--BackgroundColor);
17208
- color: var(--pf-v6-c-notification-badge--m-attention--Color);
17209
- }
17210
- .pf-v6-c-notification-badge.pf-m-attention:hover {
17211
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--hover--BackgroundColor);
17212
- }
17213
- .pf-v6-c-notification-badge.pf-m-expanded {
17214
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor);
17215
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor);
17216
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor);
17217
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor);
17218
- }
17219
-
17220
17132
  :where(:root, .pf-v6-c-notification-drawer) {
17221
17133
  --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
17222
17134
  --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
package/patternfly.css CHANGED
@@ -17250,94 +17250,6 @@ ul.pf-v6-c-list {
17250
17250
  --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd);
17251
17251
  }
17252
17252
 
17253
- :where(:root, .pf-v6-c-notification-badge) {
17254
- --pf-v6-c-notification-badge--BackgroundColor: transparent;
17255
- --pf-v6-c-notification-badge--MinWidth: 40px;
17256
- --pf-v6-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
17257
- --pf-v6-c-notification-badge--PaddingBlockStart: var(--pf-t--global--spacer--sm);
17258
- --pf-v6-c-notification-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
17259
- --pf-v6-c-notification-badge--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17260
- --pf-v6-c-notification-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
17261
- --pf-v6-c-notification-badge--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--sm));
17262
- --pf-v6-c-notification-badge--MarginInlineEnd: calc(-1 * var(--pf-t--global--spacer--sm));
17263
- --pf-v6-c-notification-badge--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--sm));
17264
- --pf-v6-c-notification-badge--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--sm));
17265
- --pf-v6-c-notification-badge--before--BorderColor: transparent;
17266
- --pf-v6-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
17267
- --pf-v6-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
17268
- --pf-v6-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
17269
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
17270
- --pf-v6-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
17271
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
17272
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
17273
- --pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
17274
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
17275
- --pf-v6-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
17276
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
17277
- --pf-v6-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
17278
- --pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
17279
- --pf-v6-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
17280
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
17281
- --pf-v6-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
17282
- --pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
17283
- }
17284
-
17285
- .pf-v6-c-notification-badge {
17286
- display: inline-flex;
17287
- gap: var(--pf-v6-c-notification-badge--Gap);
17288
- align-items: center;
17289
- justify-content: center;
17290
- padding-block-start: var(--pf-v6-c-notification-badge--PaddingBlockStart);
17291
- padding-block-end: var(--pf-v6-c-notification-badge--PaddingBlockEnd);
17292
- padding-inline-start: var(--pf-v6-c-notification-badge--PaddingInlineStart);
17293
- padding-inline-end: var(--pf-v6-c-notification-badge--PaddingInlineEnd);
17294
- margin-block-start: var(--pf-v6-c-notification-badge--MarginBlockStart);
17295
- margin-block-end: var(--pf-v6-c-notification-badge--MarginBlockEnd);
17296
- margin-inline-start: var(--pf-v6-c-notification-badge--MarginInlineStart);
17297
- margin-inline-end: var(--pf-v6-c-notification-badge--MarginInlineEnd);
17298
- background-color: var(--pf-v6-c-notification-badge--BackgroundColor);
17299
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
17300
- }
17301
- .pf-v6-c-notification-badge::before {
17302
- position: absolute;
17303
- inset-block-start: 0;
17304
- inset-block-end: 0;
17305
- inset-inline-start: 0;
17306
- inset-inline-end: 0;
17307
- content: "";
17308
- border: var(--pf-v6-c-notification-badge--before--BorderWidth) solid var(--pf-v6-c-notification-badge--before--BorderColor);
17309
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
17310
- transform: translate(var(--pf-v6-c-notification-badge--before--TranslateX), var(--pf-v6-c-notification-badge--before--TranslateY));
17311
- }
17312
- .pf-v6-c-notification-badge.pf-m-read {
17313
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--BackgroundColor);
17314
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--before--BorderColor);
17315
- color: var(--pf-v6-c-notification-badge--m-read--Color, inherit);
17316
- }
17317
- .pf-v6-c-notification-badge.pf-m-read:hover {
17318
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--hover--before--BorderColor);
17319
- }
17320
- .pf-v6-c-notification-badge.pf-m-unread {
17321
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--BackgroundColor);
17322
- color: var(--pf-v6-c-notification-badge--m-unread--Color);
17323
- }
17324
- .pf-v6-c-notification-badge.pf-m-unread:hover {
17325
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--hover--BackgroundColor);
17326
- }
17327
- .pf-v6-c-notification-badge.pf-m-attention {
17328
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--BackgroundColor);
17329
- color: var(--pf-v6-c-notification-badge--m-attention--Color);
17330
- }
17331
- .pf-v6-c-notification-badge.pf-m-attention:hover {
17332
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--hover--BackgroundColor);
17333
- }
17334
- .pf-v6-c-notification-badge.pf-m-expanded {
17335
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor);
17336
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor);
17337
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor);
17338
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor);
17339
- }
17340
-
17341
17253
  :where(:root, .pf-v6-c-notification-drawer) {
17342
17254
  --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
17343
17255
  --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);