@patternfly/patternfly 6.2.0-prerelease.10 → 6.2.0-prerelease.11

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 (8) hide show
  1. package/components/Button/button.css +16 -0
  2. package/components/Button/button.scss +18 -0
  3. package/components/_index.css +15 -0
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +15 -0
  6. package/patternfly.css +15 -0
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -235,6 +235,8 @@
235
235
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
236
236
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
237
237
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
238
+ --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
239
+ --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
238
240
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
239
241
  --pf-v6-c-button__progress--Opacity: 0;
240
242
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -599,6 +601,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
599
601
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
600
602
  opacity: 0;
601
603
  }
604
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
605
+ animation-name: pf-v6-c-button-icon-notify;
606
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
607
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
608
+ }
602
609
 
603
610
  .pf-v6-c-button__icon {
604
611
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
@@ -627,4 +634,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
627
634
  .pf-v6-c-button__count {
628
635
  display: inline-flex;
629
636
  align-items: center;
637
+ }
638
+
639
+ @keyframes pf-v6-c-button-icon-notify {
640
+ 33% {
641
+ transform: rotate(30deg);
642
+ }
643
+ 66% {
644
+ transform: rotate(-60deg);
645
+ }
630
646
  }
package/components/Button/button.scss CHANGED
@@ -279,6 +279,8 @@
279
279
  --#{$button}__icon--MarginInlineEnd: 0;
280
280
  --#{$button}__icon--m-start--MarginInlineEnd: 0;
281
281
  --#{$button}__icon--m-end--MarginInlineStart: 0;
282
+ --#{$button}--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
283
+ --#{$button}--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
282
284
 
283
285
  // Progress
284
286
  --#{$button}__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
@@ -705,6 +707,12 @@
705
707
  }
706
708
  }
707
709
  }
710
+
711
+ &.pf-m-notify .#{$button}__icon {
712
+ animation-name: #{$button}-icon-notify;
713
+ animation-duration: var(--#{$button}--m-notify__icon--AnimationDuration--notify);
714
+ animation-timing-function: var(--#{$button}--m-notify__icon--AnimationTimingFunction--notify);
715
+ }
708
716
  }
709
717
 
710
718
  .#{$button}__icon {
@@ -738,3 +746,13 @@
738
746
  display: inline-flex;
739
747
  align-items: center;
740
748
  }
749
+
750
+ @keyframes #{$button}-icon-notify {
751
+ 33% {
752
+ transform: rotate(30deg);
753
+ }
754
+
755
+ 66% {
756
+ transform: rotate(-60deg);
757
+ }
758
+ }
package/components/_index.css CHANGED
@@ -1628,6 +1628,8 @@ button.pf-v6-c-breadcrumb__link {
1628
1628
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
1629
1629
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
1630
1630
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
1631
+ --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
1632
+ --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
1631
1633
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
1632
1634
  --pf-v6-c-button__progress--Opacity: 0;
1633
1635
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -1992,6 +1994,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1992
1994
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
1993
1995
  opacity: 0;
1994
1996
  }
1997
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
1998
+ animation-name: pf-v6-c-button-icon-notify;
1999
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2000
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2001
+ }
1995
2002
 
1996
2003
  .pf-v6-c-button__icon {
1997
2004
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
@@ -2022,6 +2029,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2022
2029
  align-items: center;
2023
2030
  }
2024
2031
 
2032
+ @keyframes pf-v6-c-button-icon-notify {
2033
+ 33% {
2034
+ transform: rotate(30deg);
2035
+ }
2036
+ 66% {
2037
+ transform: rotate(-60deg);
2038
+ }
2039
+ }
2025
2040
  .pf-v6-c-calendar-month {
2026
2041
  --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
2027
2042
  --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg);
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.2.0-prerelease.10",
4
+ "version": "6.2.0-prerelease.11",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -9090,6 +9090,8 @@ button.pf-v6-c-breadcrumb__link {
9090
9090
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
9091
9091
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
9092
9092
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
9093
+ --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
9094
+ --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
9093
9095
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
9094
9096
  --pf-v6-c-button__progress--Opacity: 0;
9095
9097
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -9454,6 +9456,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9454
9456
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
9455
9457
  opacity: 0;
9456
9458
  }
9459
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
9460
+ animation-name: pf-v6-c-button-icon-notify;
9461
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
9462
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
9463
+ }
9457
9464
 
9458
9465
  .pf-v6-c-button__icon {
9459
9466
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
@@ -9484,6 +9491,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9484
9491
  align-items: center;
9485
9492
  }
9486
9493
 
9494
+ @keyframes pf-v6-c-button-icon-notify {
9495
+ 33% {
9496
+ transform: rotate(30deg);
9497
+ }
9498
+ 66% {
9499
+ transform: rotate(-60deg);
9500
+ }
9501
+ }
9487
9502
  .pf-v6-c-calendar-month {
9488
9503
  --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9489
9504
  --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg);
package/patternfly.css CHANGED
@@ -9226,6 +9226,8 @@ button.pf-v6-c-breadcrumb__link {
9226
9226
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
9227
9227
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
9228
9228
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
9229
+ --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
9230
+ --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
9229
9231
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
9230
9232
  --pf-v6-c-button__progress--Opacity: 0;
9231
9233
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -9590,6 +9592,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9590
9592
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
9591
9593
  opacity: 0;
9592
9594
  }
9595
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
9596
+ animation-name: pf-v6-c-button-icon-notify;
9597
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
9598
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
9599
+ }
9593
9600
 
9594
9601
  .pf-v6-c-button__icon {
9595
9602
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
@@ -9620,6 +9627,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9620
9627
  align-items: center;
9621
9628
  }
9622
9629
 
9630
+ @keyframes pf-v6-c-button-icon-notify {
9631
+ 33% {
9632
+ transform: rotate(30deg);
9633
+ }
9634
+ 66% {
9635
+ transform: rotate(-60deg);
9636
+ }
9637
+ }
9623
9638
  .pf-v6-c-calendar-month {
9624
9639
  --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9625
9640
  --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg);