@patternfly/patternfly 6.6.0-prerelease.30 → 6.6.0-prerelease.31
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.
- package/components/Button/button.css +13 -1
- package/components/Button/button.scss +15 -2
- package/components/_index.css +13 -1
- package/package.json +1 -1
- package/patternfly-no-globals.css +13 -1
- package/patternfly.css +13 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -332,6 +332,7 @@
|
|
|
332
332
|
--pf-v6-c-button__progress--InsetBlockStart: 50%;
|
|
333
333
|
--pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
|
|
334
334
|
--pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
|
|
335
|
+
--pf-v6-c-button__progress--Position: absolute;
|
|
335
336
|
--pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
|
|
336
337
|
--pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
|
|
337
338
|
--pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
|
|
@@ -339,6 +340,8 @@
|
|
|
339
340
|
--pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
|
|
340
341
|
--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
|
|
341
342
|
--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
|
343
|
+
--pf-v6-c-button--m-progress--TransitionDuration: var(--pf-v6-c-button--TransitionDuration);
|
|
344
|
+
--pf-v6-c-button--m-progress--TransitionProperty: var(--pf-v6-c-button--TransitionProperty), padding;
|
|
342
345
|
--pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
343
346
|
--pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
344
347
|
--pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
@@ -682,7 +685,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
682
685
|
}
|
|
683
686
|
.pf-v6-c-button.pf-m-block {
|
|
684
687
|
--pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
|
|
688
|
+
--pf-v6-c-button__progress--Position: relative;
|
|
689
|
+
--pf-v6-c-button__progress--InsetBlockStart: 0;
|
|
690
|
+
--pf-v6-c-button__progress--InsetInlineStart: 0;
|
|
691
|
+
--pf-v6-c-button__progress--TranslateY: 0;
|
|
685
692
|
width: var(--pf-v6-c-button--m-block--Width);
|
|
693
|
+
transition-duration: var(--pf-v6-c-button--m-progress--TransitionDuration);
|
|
694
|
+
transition-property: var(--pf-v6-c-button--m-progress--TransitionProperty);
|
|
695
|
+
}
|
|
696
|
+
.pf-v6-c-button.pf-m-block .pf-v6-c-button__progress {
|
|
697
|
+
align-self: center;
|
|
686
698
|
}
|
|
687
699
|
.pf-v6-c-button.pf-m-small {
|
|
688
700
|
--pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
|
|
@@ -926,7 +938,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
926
938
|
}
|
|
927
939
|
|
|
928
940
|
.pf-v6-c-button__progress {
|
|
929
|
-
position:
|
|
941
|
+
position: var(--pf-v6-c-button__progress--Position);
|
|
930
942
|
inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
|
|
931
943
|
inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
|
|
932
944
|
line-height: 1;
|
|
@@ -386,6 +386,7 @@
|
|
|
386
386
|
--#{$button}__progress--InsetBlockStart: 50%;
|
|
387
387
|
--#{$button}__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
|
|
388
388
|
--#{$button}__progress--Color: var(--#{$button}__icon--Color);
|
|
389
|
+
--#{$button}__progress--Position: absolute;
|
|
389
390
|
--#{$button}--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width) / 2);
|
|
390
391
|
--#{$button}--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width) / 2);
|
|
391
392
|
--#{$button}--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
|
|
@@ -393,6 +394,8 @@
|
|
|
393
394
|
--#{$button}--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
|
|
394
395
|
--#{$button}--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
|
|
395
396
|
--#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;
|
|
397
|
+
--#{$button}--m-progress--TransitionDuration: var(--#{$button}--TransitionDuration);
|
|
398
|
+
--#{$button}--m-progress--TransitionProperty: var(--#{$button}--TransitionProperty), padding;
|
|
396
399
|
|
|
397
400
|
// Settings
|
|
398
401
|
--#{$button}--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
@@ -785,8 +788,18 @@
|
|
|
785
788
|
|
|
786
789
|
&.pf-m-block {
|
|
787
790
|
--#{$button}--Display: var(--#{$button}--m-block--Display);
|
|
788
|
-
|
|
791
|
+
--#{$button}__progress--Position: relative;
|
|
792
|
+
--#{$button}__progress--InsetBlockStart: 0;
|
|
793
|
+
--#{$button}__progress--InsetInlineStart: 0;
|
|
794
|
+
--#{$button}__progress--TranslateY: 0;
|
|
795
|
+
|
|
789
796
|
width: var(--#{$button}--m-block--Width);
|
|
797
|
+
transition-duration: var(--#{$button}--m-progress--TransitionDuration);
|
|
798
|
+
transition-property: var(--#{$button}--m-progress--TransitionProperty);
|
|
799
|
+
|
|
800
|
+
.#{$button}__progress {
|
|
801
|
+
align-self: center;
|
|
802
|
+
}
|
|
790
803
|
}
|
|
791
804
|
|
|
792
805
|
&.pf-m-small {
|
|
@@ -1064,7 +1077,7 @@
|
|
|
1064
1077
|
}
|
|
1065
1078
|
|
|
1066
1079
|
.#{$button}__progress {
|
|
1067
|
-
position:
|
|
1080
|
+
position: var(--#{$button}__progress--Position);
|
|
1068
1081
|
inset-block-start: var(--#{$button}__progress--InsetBlockStart);
|
|
1069
1082
|
inset-inline-start: var(--#{$button}__progress--InsetInlineStart);
|
|
1070
1083
|
line-height: 1;
|
package/components/_index.css
CHANGED
|
@@ -2107,6 +2107,7 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
2107
2107
|
--pf-v6-c-button__progress--InsetBlockStart: 50%;
|
|
2108
2108
|
--pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
|
|
2109
2109
|
--pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
|
|
2110
|
+
--pf-v6-c-button__progress--Position: absolute;
|
|
2110
2111
|
--pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
|
|
2111
2112
|
--pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
|
|
2112
2113
|
--pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
|
|
@@ -2114,6 +2115,8 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
2114
2115
|
--pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
|
|
2115
2116
|
--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
|
|
2116
2117
|
--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
|
2118
|
+
--pf-v6-c-button--m-progress--TransitionDuration: var(--pf-v6-c-button--TransitionDuration);
|
|
2119
|
+
--pf-v6-c-button--m-progress--TransitionProperty: var(--pf-v6-c-button--TransitionProperty), padding;
|
|
2117
2120
|
--pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
2118
2121
|
--pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
2119
2122
|
--pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
@@ -2457,7 +2460,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
2457
2460
|
}
|
|
2458
2461
|
.pf-v6-c-button.pf-m-block {
|
|
2459
2462
|
--pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
|
|
2463
|
+
--pf-v6-c-button__progress--Position: relative;
|
|
2464
|
+
--pf-v6-c-button__progress--InsetBlockStart: 0;
|
|
2465
|
+
--pf-v6-c-button__progress--InsetInlineStart: 0;
|
|
2466
|
+
--pf-v6-c-button__progress--TranslateY: 0;
|
|
2460
2467
|
width: var(--pf-v6-c-button--m-block--Width);
|
|
2468
|
+
transition-duration: var(--pf-v6-c-button--m-progress--TransitionDuration);
|
|
2469
|
+
transition-property: var(--pf-v6-c-button--m-progress--TransitionProperty);
|
|
2470
|
+
}
|
|
2471
|
+
.pf-v6-c-button.pf-m-block .pf-v6-c-button__progress {
|
|
2472
|
+
align-self: center;
|
|
2461
2473
|
}
|
|
2462
2474
|
.pf-v6-c-button.pf-m-small {
|
|
2463
2475
|
--pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
|
|
@@ -2701,7 +2713,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
2701
2713
|
}
|
|
2702
2714
|
|
|
2703
2715
|
.pf-v6-c-button__progress {
|
|
2704
|
-
position:
|
|
2716
|
+
position: var(--pf-v6-c-button__progress--Position);
|
|
2705
2717
|
inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
|
|
2706
2718
|
inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
|
|
2707
2719
|
line-height: 1;
|
package/package.json
CHANGED
|
@@ -11363,6 +11363,7 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
11363
11363
|
--pf-v6-c-button__progress--InsetBlockStart: 50%;
|
|
11364
11364
|
--pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
|
|
11365
11365
|
--pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
|
|
11366
|
+
--pf-v6-c-button__progress--Position: absolute;
|
|
11366
11367
|
--pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
|
|
11367
11368
|
--pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
|
|
11368
11369
|
--pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
|
|
@@ -11370,6 +11371,8 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
11370
11371
|
--pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
|
|
11371
11372
|
--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
|
|
11372
11373
|
--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
|
11374
|
+
--pf-v6-c-button--m-progress--TransitionDuration: var(--pf-v6-c-button--TransitionDuration);
|
|
11375
|
+
--pf-v6-c-button--m-progress--TransitionProperty: var(--pf-v6-c-button--TransitionProperty), padding;
|
|
11373
11376
|
--pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
11374
11377
|
--pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
11375
11378
|
--pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
@@ -11713,7 +11716,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
11713
11716
|
}
|
|
11714
11717
|
.pf-v6-c-button.pf-m-block {
|
|
11715
11718
|
--pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
|
|
11719
|
+
--pf-v6-c-button__progress--Position: relative;
|
|
11720
|
+
--pf-v6-c-button__progress--InsetBlockStart: 0;
|
|
11721
|
+
--pf-v6-c-button__progress--InsetInlineStart: 0;
|
|
11722
|
+
--pf-v6-c-button__progress--TranslateY: 0;
|
|
11716
11723
|
width: var(--pf-v6-c-button--m-block--Width);
|
|
11724
|
+
transition-duration: var(--pf-v6-c-button--m-progress--TransitionDuration);
|
|
11725
|
+
transition-property: var(--pf-v6-c-button--m-progress--TransitionProperty);
|
|
11726
|
+
}
|
|
11727
|
+
.pf-v6-c-button.pf-m-block .pf-v6-c-button__progress {
|
|
11728
|
+
align-self: center;
|
|
11717
11729
|
}
|
|
11718
11730
|
.pf-v6-c-button.pf-m-small {
|
|
11719
11731
|
--pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
|
|
@@ -11957,7 +11969,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
11957
11969
|
}
|
|
11958
11970
|
|
|
11959
11971
|
.pf-v6-c-button__progress {
|
|
11960
|
-
position:
|
|
11972
|
+
position: var(--pf-v6-c-button__progress--Position);
|
|
11961
11973
|
inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
|
|
11962
11974
|
inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
|
|
11963
11975
|
line-height: 1;
|
package/patternfly.css
CHANGED
|
@@ -11518,6 +11518,7 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
11518
11518
|
--pf-v6-c-button__progress--InsetBlockStart: 50%;
|
|
11519
11519
|
--pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
|
|
11520
11520
|
--pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
|
|
11521
|
+
--pf-v6-c-button__progress--Position: absolute;
|
|
11521
11522
|
--pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
|
|
11522
11523
|
--pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
|
|
11523
11524
|
--pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
|
|
@@ -11525,6 +11526,8 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
11525
11526
|
--pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
|
|
11526
11527
|
--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
|
|
11527
11528
|
--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
|
11529
|
+
--pf-v6-c-button--m-progress--TransitionDuration: var(--pf-v6-c-button--TransitionDuration);
|
|
11530
|
+
--pf-v6-c-button--m-progress--TransitionProperty: var(--pf-v6-c-button--TransitionProperty), padding;
|
|
11528
11531
|
--pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
11529
11532
|
--pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
|
11530
11533
|
--pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
|
@@ -11868,7 +11871,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
11868
11871
|
}
|
|
11869
11872
|
.pf-v6-c-button.pf-m-block {
|
|
11870
11873
|
--pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
|
|
11874
|
+
--pf-v6-c-button__progress--Position: relative;
|
|
11875
|
+
--pf-v6-c-button__progress--InsetBlockStart: 0;
|
|
11876
|
+
--pf-v6-c-button__progress--InsetInlineStart: 0;
|
|
11877
|
+
--pf-v6-c-button__progress--TranslateY: 0;
|
|
11871
11878
|
width: var(--pf-v6-c-button--m-block--Width);
|
|
11879
|
+
transition-duration: var(--pf-v6-c-button--m-progress--TransitionDuration);
|
|
11880
|
+
transition-property: var(--pf-v6-c-button--m-progress--TransitionProperty);
|
|
11881
|
+
}
|
|
11882
|
+
.pf-v6-c-button.pf-m-block .pf-v6-c-button__progress {
|
|
11883
|
+
align-self: center;
|
|
11872
11884
|
}
|
|
11873
11885
|
.pf-v6-c-button.pf-m-small {
|
|
11874
11886
|
--pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
|
|
@@ -12112,7 +12124,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
12112
12124
|
}
|
|
12113
12125
|
|
|
12114
12126
|
.pf-v6-c-button__progress {
|
|
12115
|
-
position:
|
|
12127
|
+
position: var(--pf-v6-c-button__progress--Position);
|
|
12116
12128
|
inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
|
|
12117
12129
|
inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
|
|
12118
12130
|
line-height: 1;
|