@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.9

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 (11) hide show
  1. package/components/NotificationBadge/notification-badge.css +56 -81
  2. package/components/NotificationBadge/notification-badge.scss +60 -97
  3. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +56 -88
  6. package/patternfly-theme-dark-unversioned.css +56 -88
  7. package/patternfly.css +56 -88
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
  10. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  11. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -21087,42 +21087,43 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21087
21087
  --pf-v5-c-nav__item--item__link--after--Top: 0;
21088
21088
  }
21089
21089
 
21090
+ :root {
21091
+ --pf-v5-c-notification-badge--BackgroundColor: transparent;
21092
+ --pf-v5-c-notification-badge--MinWidth: 40px;
21093
+ --pf-v5-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
21094
+ --pf-v5-c-notification-badge--PaddingTop: var(--pf-t--global--spacer--sm);
21095
+ --pf-v5-c-notification-badge--PaddingRight: var(--pf-t--global--spacer--sm);
21096
+ --pf-v5-c-notification-badge--PaddingBottom: var(--pf-t--global--spacer--sm);
21097
+ --pf-v5-c-notification-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
21098
+ --pf-v5-c-notification-badge--MarginTop: calc(-1 * var(--pf-t--global--spacer--sm));
21099
+ --pf-v5-c-notification-badge--MarginRight: calc(-1 * var(--pf-t--global--spacer--sm));
21100
+ --pf-v5-c-notification-badge--MarginBottom: calc(-1 * var(--pf-t--global--spacer--sm));
21101
+ --pf-v5-c-notification-badge--MarginLeft: calc(-1 * var(--pf-t--global--spacer--sm));
21102
+ --pf-v5-c-notification-badge--before--BorderColor: transparent;
21103
+ --pf-v5-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
21104
+ --pf-v5-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
21105
+ --pf-v5-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
21106
+ --pf-v5-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
21107
+ --pf-v5-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
21108
+ --pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
21109
+ --pf-v5-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
21110
+ --pf-v5-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
21111
+ --pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
21112
+ --pf-v5-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
21113
+ --pf-v5-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
21114
+ --pf-v5-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
21115
+ --pf-v5-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--active);
21116
+ --pf-v5-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
21117
+ --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
21118
+ --pf-v5-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
21119
+ --pf-v5-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--active);
21120
+ }
21121
+
21090
21122
  .pf-v5-c-notification-badge {
21091
- --pf-v5-c-notification-badge--PaddingTop: var(--pf-v5-global--spacer--form-element);
21092
- --pf-v5-c-notification-badge--PaddingRight: var(--pf-v5-global--spacer--md);
21093
- --pf-v5-c-notification-badge--PaddingBottom: var(--pf-v5-global--spacer--form-element);
21094
- --pf-v5-c-notification-badge--PaddingLeft: var(--pf-v5-global--spacer--md);
21095
- --pf-v5-c-notification-badge--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element));
21096
- --pf-v5-c-notification-badge--MarginRight: calc(-1 * var(--pf-v5-global--spacer--md));
21097
- --pf-v5-c-notification-badge--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
21098
- --pf-v5-c-notification-badge--MarginLeft: calc(-1 * var(--pf-v5-global--spacer--md));
21099
- --pf-v5-c-notification-badge--after--BorderColor: transparent;
21100
- --pf-v5-c-notification-badge--after--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
21101
- --pf-v5-c-notification-badge--after--BorderWidth: 0;
21102
- --pf-v5-c-notification-badge--after--Top: 0;
21103
- --pf-v5-c-notification-badge--after--Right: 0;
21104
- --pf-v5-c-notification-badge--after--Width: auto;
21105
- --pf-v5-c-notification-badge--after--Height: auto;
21106
- --pf-v5-c-notification-badge--after--BackgroundColor: transparent;
21107
- --pf-v5-c-notification-badge--after--TranslateX: 0;
21108
- --pf-v5-c-notification-badge--after--TranslateY: 0;
21109
- --pf-v5-c-notification-badge__i--Width: auto;
21110
- --pf-v5-c-notification-badge__i--Height: auto;
21111
- --pf-v5-c-notification-badge--m-read--after--BorderColor: transparent;
21112
- --pf-v5-c-notification-badge--m-read--after--BackgroundColor: transparent;
21113
- --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
21114
- --pf-v5-c-notification-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
21115
- --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--active-color--100);
21116
- --pf-v5-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
21117
- --pf-v5-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
21118
- --pf-v5-c-notification-badge--m-attention--Color: var(--pf-v5-global--Color--light-100);
21119
- --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-global--danger-color--100);
21120
- --pf-v5-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
21121
- --pf-v5-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
21122
- --pf-v5-c-notification-badge__count--MarginLeft: var(--pf-v5-global--spacer--xs);
21123
- --pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight: var(--pf-v5-global--LineHeight--sm);
21124
- position: relative;
21125
- display: inline-block;
21123
+ display: inline-flex;
21124
+ gap: var(--pf-v5-c-notification-badge--Gap);
21125
+ align-items: center;
21126
+ justify-content: center;
21126
21127
  padding-block-start: var(--pf-v5-c-notification-badge--PaddingTop);
21127
21128
  padding-block-end: var(--pf-v5-c-notification-badge--PaddingBottom);
21128
21129
  padding-inline-start: var(--pf-v5-c-notification-badge--PaddingLeft);
@@ -21131,80 +21132,47 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21131
21132
  margin-block-end: var(--pf-v5-c-notification-badge--MarginBottom);
21132
21133
  margin-inline-start: var(--pf-v5-c-notification-badge--MarginLeft);
21133
21134
  margin-inline-end: var(--pf-v5-c-notification-badge--MarginRight);
21134
- background-color: var(--pf-v5-c-notification-badge--after--BackgroundColor);
21135
- border-radius: var(--pf-v5-c-notification-badge--after--BorderRadius);
21135
+ background-color: var(--pf-v5-c-notification-badge--BackgroundColor);
21136
+ border-radius: var(--pf-v5-c-notification-badge--BorderRadius);
21136
21137
  }
21137
21138
  .pf-v5-c-notification-badge::before {
21138
21139
  position: absolute;
21139
- inset-block-start: var(--pf-v5-c-notification-badge--after--Top);
21140
+ inset-block-start: 0;
21140
21141
  inset-block-end: 0;
21141
21142
  inset-inline-start: 0;
21142
- inset-inline-end: var(--pf-v5-c-notification-badge--after--Right);
21143
- width: var(--pf-v5-c-notification-badge--after--Width);
21144
- height: var(--pf-v5-c-notification-badge--after--Height);
21143
+ inset-inline-end: 0;
21145
21144
  content: "";
21146
- border: var(--pf-v5-c-notification-badge--after--BorderWidth) solid var(--pf-v5-c-notification-badge--after--BorderColor);
21147
- border-radius: var(--pf-v5-c-notification-badge--after--BorderRadius);
21148
- transform: translate(var(--pf-v5-c-notification-badge--after--TranslateX), var(--pf-v5-c-notification-badge--after--TranslateY));
21149
- }
21150
- .pf-v5-c-notification-badge > i {
21151
- width: var(--pf-v5-c-notification-badge__i--Width);
21152
- height: var(--pf-v5-c-notification-badge__i--Height);
21153
- }
21154
- .pf-v5-c-notification-badge > * {
21155
- position: relative;
21156
- }
21157
- .pf-v5-c-notification-badge .pf-v5-c-icon-attention-bell,
21158
- .pf-v5-c-notification-badge .pf-v5-c-icon-bell {
21159
- display: inline-block;
21160
- line-height: var(--pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight);
21161
- }
21162
- .pf-v5-c-notification-badge .pf-v5-c-icon-attention-bell::before,
21163
- .pf-v5-c-notification-badge .pf-v5-c-icon-bell::before {
21164
- vertical-align: bottom;
21145
+ border: var(--pf-v5-c-notification-badge--before--BorderWidth) solid var(--pf-v5-c-notification-badge--before--BorderColor);
21146
+ border-radius: var(--pf-v5-c-notification-badge--BorderRadius);
21147
+ transform: translate(var(--pf-v5-c-notification-badge--before--TranslateX), var(--pf-v5-c-notification-badge--before--TranslateY));
21165
21148
  }
21166
21149
  .pf-v5-c-notification-badge.pf-m-read {
21167
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--after--BackgroundColor);
21168
- --pf-v5-c-notification-badge--after--BorderColor: var(--pf-v5-c-notification-badge--m-read--after--BorderColor);
21150
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--BackgroundColor);
21151
+ --pf-v5-c-notification-badge--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--before--BorderColor);
21169
21152
  color: var(--pf-v5-c-notification-badge--m-read--Color, inherit);
21170
21153
  }
21154
+ .pf-v5-c-notification-badge.pf-m-read:hover {
21155
+ --pf-v5-c-notification-badge--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--hover--before--BorderColor);
21156
+ }
21171
21157
  .pf-v5-c-notification-badge.pf-m-unread {
21172
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--after--BackgroundColor);
21158
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--BackgroundColor);
21173
21159
  color: var(--pf-v5-c-notification-badge--m-unread--Color);
21174
21160
  }
21175
21161
  .pf-v5-c-notification-badge.pf-m-unread:hover {
21176
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--hover--after--BackgroundColor);
21162
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--hover--BackgroundColor);
21177
21163
  }
21178
21164
  .pf-v5-c-notification-badge.pf-m-attention {
21179
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--after--BackgroundColor);
21165
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--BackgroundColor);
21180
21166
  color: var(--pf-v5-c-notification-badge--m-attention--Color);
21181
21167
  }
21182
21168
  .pf-v5-c-notification-badge.pf-m-attention:hover {
21183
- --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--hover--after--BackgroundColor);
21169
+ --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--hover--BackgroundColor);
21184
21170
  }
21185
21171
  .pf-v5-c-notification-badge.pf-m-expanded {
21186
- --pf-v5-c-notification-badge--m-read--Color: var(--pf-v5-global--Color--light-100);
21187
- --pf-v5-c-notification-badge--m-read--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
21188
- --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
21189
- --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
21190
- }
21191
-
21192
- .pf-v5-c-notification-badge__count {
21193
- margin-inline-start: var(--pf-v5-c-notification-badge__count--MarginLeft);
21194
- }
21195
-
21196
- :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
21197
- :where(.pf-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
21198
- :where(.pf-theme-dark) .pf-v5-c-page__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
21199
- :where(.pf-theme-dark) .pf-v5-c-login__footer .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-masthead .pf-v5-c-button {
21200
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
21201
- }
21202
-
21203
- :where(.pf-theme-dark) .pf-v5-c-notification-badge {
21204
- --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
21205
- --pf-v5-c-notification-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
21206
- --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--300);
21207
- --pf-v5-c-notification-badge--m-attention--Color: var(--pf-v5-global--palette--black-900);
21172
+ --pf-v5-c-notification-badge--m-read--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--BackgroundColor);
21173
+ --pf-v5-c-notification-badge--m-read--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor);
21174
+ --pf-v5-c-notification-badge--m-unread--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--m-expanded--BackgroundColor);
21175
+ --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--m-expanded--BackgroundColor);
21208
21176
  }
21209
21177
 
21210
21178
  .pf-v5-c-notification-drawer {
package/patternfly.css CHANGED
@@ -21087,42 +21087,43 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21087
21087
  --pf-v5-c-nav__item--item__link--after--Top: 0;
21088
21088
  }
21089
21089
 
21090
+ :root {
21091
+ --pf-v5-c-notification-badge--BackgroundColor: transparent;
21092
+ --pf-v5-c-notification-badge--MinWidth: 40px;
21093
+ --pf-v5-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
21094
+ --pf-v5-c-notification-badge--PaddingTop: var(--pf-t--global--spacer--sm);
21095
+ --pf-v5-c-notification-badge--PaddingRight: var(--pf-t--global--spacer--sm);
21096
+ --pf-v5-c-notification-badge--PaddingBottom: var(--pf-t--global--spacer--sm);
21097
+ --pf-v5-c-notification-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
21098
+ --pf-v5-c-notification-badge--MarginTop: calc(-1 * var(--pf-t--global--spacer--sm));
21099
+ --pf-v5-c-notification-badge--MarginRight: calc(-1 * var(--pf-t--global--spacer--sm));
21100
+ --pf-v5-c-notification-badge--MarginBottom: calc(-1 * var(--pf-t--global--spacer--sm));
21101
+ --pf-v5-c-notification-badge--MarginLeft: calc(-1 * var(--pf-t--global--spacer--sm));
21102
+ --pf-v5-c-notification-badge--before--BorderColor: transparent;
21103
+ --pf-v5-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
21104
+ --pf-v5-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
21105
+ --pf-v5-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
21106
+ --pf-v5-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
21107
+ --pf-v5-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
21108
+ --pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
21109
+ --pf-v5-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
21110
+ --pf-v5-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
21111
+ --pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
21112
+ --pf-v5-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
21113
+ --pf-v5-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
21114
+ --pf-v5-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
21115
+ --pf-v5-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--active);
21116
+ --pf-v5-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
21117
+ --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
21118
+ --pf-v5-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
21119
+ --pf-v5-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--active);
21120
+ }
21121
+
21090
21122
  .pf-v5-c-notification-badge {
21091
- --pf-v5-c-notification-badge--PaddingTop: var(--pf-v5-global--spacer--form-element);
21092
- --pf-v5-c-notification-badge--PaddingRight: var(--pf-v5-global--spacer--md);
21093
- --pf-v5-c-notification-badge--PaddingBottom: var(--pf-v5-global--spacer--form-element);
21094
- --pf-v5-c-notification-badge--PaddingLeft: var(--pf-v5-global--spacer--md);
21095
- --pf-v5-c-notification-badge--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element));
21096
- --pf-v5-c-notification-badge--MarginRight: calc(-1 * var(--pf-v5-global--spacer--md));
21097
- --pf-v5-c-notification-badge--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
21098
- --pf-v5-c-notification-badge--MarginLeft: calc(-1 * var(--pf-v5-global--spacer--md));
21099
- --pf-v5-c-notification-badge--after--BorderColor: transparent;
21100
- --pf-v5-c-notification-badge--after--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
21101
- --pf-v5-c-notification-badge--after--BorderWidth: 0;
21102
- --pf-v5-c-notification-badge--after--Top: 0;
21103
- --pf-v5-c-notification-badge--after--Right: 0;
21104
- --pf-v5-c-notification-badge--after--Width: auto;
21105
- --pf-v5-c-notification-badge--after--Height: auto;
21106
- --pf-v5-c-notification-badge--after--BackgroundColor: transparent;
21107
- --pf-v5-c-notification-badge--after--TranslateX: 0;
21108
- --pf-v5-c-notification-badge--after--TranslateY: 0;
21109
- --pf-v5-c-notification-badge__i--Width: auto;
21110
- --pf-v5-c-notification-badge__i--Height: auto;
21111
- --pf-v5-c-notification-badge--m-read--after--BorderColor: transparent;
21112
- --pf-v5-c-notification-badge--m-read--after--BackgroundColor: transparent;
21113
- --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
21114
- --pf-v5-c-notification-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
21115
- --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--active-color--100);
21116
- --pf-v5-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
21117
- --pf-v5-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
21118
- --pf-v5-c-notification-badge--m-attention--Color: var(--pf-v5-global--Color--light-100);
21119
- --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-global--danger-color--100);
21120
- --pf-v5-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
21121
- --pf-v5-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
21122
- --pf-v5-c-notification-badge__count--MarginLeft: var(--pf-v5-global--spacer--xs);
21123
- --pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight: var(--pf-v5-global--LineHeight--sm);
21124
- position: relative;
21125
- display: inline-block;
21123
+ display: inline-flex;
21124
+ gap: var(--pf-v5-c-notification-badge--Gap);
21125
+ align-items: center;
21126
+ justify-content: center;
21126
21127
  padding-block-start: var(--pf-v5-c-notification-badge--PaddingTop);
21127
21128
  padding-block-end: var(--pf-v5-c-notification-badge--PaddingBottom);
21128
21129
  padding-inline-start: var(--pf-v5-c-notification-badge--PaddingLeft);
@@ -21131,80 +21132,47 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21131
21132
  margin-block-end: var(--pf-v5-c-notification-badge--MarginBottom);
21132
21133
  margin-inline-start: var(--pf-v5-c-notification-badge--MarginLeft);
21133
21134
  margin-inline-end: var(--pf-v5-c-notification-badge--MarginRight);
21134
- background-color: var(--pf-v5-c-notification-badge--after--BackgroundColor);
21135
- border-radius: var(--pf-v5-c-notification-badge--after--BorderRadius);
21135
+ background-color: var(--pf-v5-c-notification-badge--BackgroundColor);
21136
+ border-radius: var(--pf-v5-c-notification-badge--BorderRadius);
21136
21137
  }
21137
21138
  .pf-v5-c-notification-badge::before {
21138
21139
  position: absolute;
21139
- inset-block-start: var(--pf-v5-c-notification-badge--after--Top);
21140
+ inset-block-start: 0;
21140
21141
  inset-block-end: 0;
21141
21142
  inset-inline-start: 0;
21142
- inset-inline-end: var(--pf-v5-c-notification-badge--after--Right);
21143
- width: var(--pf-v5-c-notification-badge--after--Width);
21144
- height: var(--pf-v5-c-notification-badge--after--Height);
21143
+ inset-inline-end: 0;
21145
21144
  content: "";
21146
- border: var(--pf-v5-c-notification-badge--after--BorderWidth) solid var(--pf-v5-c-notification-badge--after--BorderColor);
21147
- border-radius: var(--pf-v5-c-notification-badge--after--BorderRadius);
21148
- transform: translate(var(--pf-v5-c-notification-badge--after--TranslateX), var(--pf-v5-c-notification-badge--after--TranslateY));
21149
- }
21150
- .pf-v5-c-notification-badge > i {
21151
- width: var(--pf-v5-c-notification-badge__i--Width);
21152
- height: var(--pf-v5-c-notification-badge__i--Height);
21153
- }
21154
- .pf-v5-c-notification-badge > * {
21155
- position: relative;
21156
- }
21157
- .pf-v5-c-notification-badge .pf-v5-c-icon-attention-bell,
21158
- .pf-v5-c-notification-badge .pf-v5-c-icon-bell {
21159
- display: inline-block;
21160
- line-height: var(--pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight);
21161
- }
21162
- .pf-v5-c-notification-badge .pf-v5-c-icon-attention-bell::before,
21163
- .pf-v5-c-notification-badge .pf-v5-c-icon-bell::before {
21164
- vertical-align: bottom;
21145
+ border: var(--pf-v5-c-notification-badge--before--BorderWidth) solid var(--pf-v5-c-notification-badge--before--BorderColor);
21146
+ border-radius: var(--pf-v5-c-notification-badge--BorderRadius);
21147
+ transform: translate(var(--pf-v5-c-notification-badge--before--TranslateX), var(--pf-v5-c-notification-badge--before--TranslateY));
21165
21148
  }
21166
21149
  .pf-v5-c-notification-badge.pf-m-read {
21167
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--after--BackgroundColor);
21168
- --pf-v5-c-notification-badge--after--BorderColor: var(--pf-v5-c-notification-badge--m-read--after--BorderColor);
21150
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--BackgroundColor);
21151
+ --pf-v5-c-notification-badge--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--before--BorderColor);
21169
21152
  color: var(--pf-v5-c-notification-badge--m-read--Color, inherit);
21170
21153
  }
21154
+ .pf-v5-c-notification-badge.pf-m-read:hover {
21155
+ --pf-v5-c-notification-badge--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--hover--before--BorderColor);
21156
+ }
21171
21157
  .pf-v5-c-notification-badge.pf-m-unread {
21172
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--after--BackgroundColor);
21158
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--BackgroundColor);
21173
21159
  color: var(--pf-v5-c-notification-badge--m-unread--Color);
21174
21160
  }
21175
21161
  .pf-v5-c-notification-badge.pf-m-unread:hover {
21176
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--hover--after--BackgroundColor);
21162
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--hover--BackgroundColor);
21177
21163
  }
21178
21164
  .pf-v5-c-notification-badge.pf-m-attention {
21179
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--after--BackgroundColor);
21165
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--BackgroundColor);
21180
21166
  color: var(--pf-v5-c-notification-badge--m-attention--Color);
21181
21167
  }
21182
21168
  .pf-v5-c-notification-badge.pf-m-attention:hover {
21183
- --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--hover--after--BackgroundColor);
21169
+ --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--hover--BackgroundColor);
21184
21170
  }
21185
21171
  .pf-v5-c-notification-badge.pf-m-expanded {
21186
- --pf-v5-c-notification-badge--m-read--Color: var(--pf-v5-global--Color--light-100);
21187
- --pf-v5-c-notification-badge--m-read--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
21188
- --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
21189
- --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
21190
- }
21191
-
21192
- .pf-v5-c-notification-badge__count {
21193
- margin-inline-start: var(--pf-v5-c-notification-badge__count--MarginLeft);
21194
- }
21195
-
21196
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
21197
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
21198
- :where(.pf-v5-theme-dark) .pf-v5-c-page__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
21199
- :where(.pf-v5-theme-dark) .pf-v5-c-login__footer .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-button {
21200
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
21201
- }
21202
-
21203
- :where(.pf-v5-theme-dark) .pf-v5-c-notification-badge {
21204
- --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
21205
- --pf-v5-c-notification-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
21206
- --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--300);
21207
- --pf-v5-c-notification-badge--m-attention--Color: var(--pf-v5-global--palette--black-900);
21172
+ --pf-v5-c-notification-badge--m-read--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--BackgroundColor);
21173
+ --pf-v5-c-notification-badge--m-read--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor);
21174
+ --pf-v5-c-notification-badge--m-unread--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--m-expanded--BackgroundColor);
21175
+ --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--m-expanded--BackgroundColor);
21208
21176
  }
21209
21177
 
21210
21178
  .pf-v5-c-notification-drawer {