@patternfly/patternfly 4.208.1 → 4.210.0

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.
@@ -274,7 +274,7 @@
274
274
  --pf-global--palette--black-800: #1b1d21;
275
275
  --pf-global--palette--black-900: #0f1214;
276
276
  --pf-global--palette--red-9999: #fe5142;
277
- --pf-global--palette--red-8888: #fe6a5d;
277
+ --pf-global--palette--red-8888: #ff7468;
278
278
  --pf-global--palette--blue-300: #1fa7f8;
279
279
  --pf-global--BackgroundColor--100: #1b1d21;
280
280
  --pf-global--BackgroundColor--150: #212427;
@@ -294,7 +294,7 @@
294
294
  --pf-global--warning-color--100: #f0ab00;
295
295
  --pf-global--warning-color--200: #f4c145;
296
296
  --pf-global--danger-color--100: #fe5142;
297
- --pf-global--danger-color--200: #fe6a5d;
297
+ --pf-global--danger-color--200: #ff7468;
298
298
  --pf-global--link--Color: #1fa7f8;
299
299
  --pf-global--link--Color--hover: #73bcf7;
300
300
  --pf-global--link--Color--visited: #a18fff;
@@ -506,6 +506,10 @@
506
506
  --pf-c-button--m-tertiary--focus--Color: var(--pf-global--palette--black-100);
507
507
  --pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--BorderColor--100);
508
508
  --pf-c-button--m-tertiary--active--Color: var(--pf-global--palette--black-100);
509
+ --pf-c-button--m-warning--Color: var(--pf-global--palette--black-900);
510
+ --pf-c-button--m-warning--hover--Color: var(--pf-global--palette--black-900);
511
+ --pf-c-button--m-warning--focus--Color: var(--pf-global--palette--black-900);
512
+ --pf-c-button--m-warning--active--Color: var(--pf-global--palette--black-900);
509
513
  --pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--warning-color--200);
510
514
  --pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--warning-color--200);
511
515
  --pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--warning-color--200);
@@ -12,6 +12,10 @@
12
12
  --pf-c-button--m-tertiary--focus--Color: var(--pf-global--palette--black-100);
13
13
  --pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--BorderColor--100);
14
14
  --pf-c-button--m-tertiary--active--Color: var(--pf-global--palette--black-100);
15
+ --pf-c-button--m-warning--Color: var(--pf-global--palette--black-900);
16
+ --pf-c-button--m-warning--hover--Color: var(--pf-global--palette--black-900);
17
+ --pf-c-button--m-warning--focus--Color: var(--pf-global--palette--black-900);
18
+ --pf-c-button--m-warning--active--Color: var(--pf-global--palette--black-900);
15
19
  --pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--warning-color--200);
16
20
  --pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--warning-color--200);
17
21
  --pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--warning-color--200);
@@ -36,11 +36,12 @@
36
36
 
37
37
  .pf-c-scroll-outer-wrapper {
38
38
  --pf-c-scroll-outer-wrapper--MinHeight: 25rem;
39
+ --pf-c-scroll-outer-wrapper--MaxHeight: 100%;
39
40
  display: flex;
40
41
  flex-direction: column;
41
42
  max-width: 100%;
42
43
  min-height: var(--pf-c-scroll-outer-wrapper--MinHeight);
43
- max-height: 100%;
44
+ max-height: var(--pf-c-scroll-outer-wrapper--MaxHeight);
44
45
  overflow: hidden;
45
46
  }
46
47
 
@@ -43,12 +43,13 @@
43
43
 
44
44
  .pf-c-scroll-outer-wrapper {
45
45
  --pf-c-scroll-outer-wrapper--MinHeight: #{pf-size-prem(400px)};
46
+ --pf-c-scroll-outer-wrapper--MaxHeight: 100%;
46
47
 
47
48
  display: flex;
48
49
  flex-direction: column;
49
50
  max-width: 100%;
50
51
  min-height: var(--pf-c-scroll-outer-wrapper--MinHeight);
51
- max-height: 100%;
52
+ max-height: var(--pf-c-scroll-outer-wrapper--MaxHeight);
52
53
  overflow: hidden;
53
54
  }
54
55
 
@@ -1,6 +1,7 @@
1
1
  .pf-c-timestamp {
2
2
  --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
3
3
  --pf-c-timestamp--Color: var(--pf-global--Color--200);
4
+ --pf-c-timestamp--OutlineOffset: 0.1875rem;
4
5
  --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
5
6
  --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
6
7
  --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
@@ -10,8 +11,10 @@
10
11
  --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
11
12
  --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
12
13
  --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
14
+ display: inline-block;
13
15
  font-size: var(--pf-c-timestamp--FontSize);
14
16
  color: var(--pf-c-timestamp--Color);
17
+ outline-offset: var(--pf-c-timestamp--OutlineOffset);
15
18
  }
16
19
  .pf-c-timestamp.pf-m-help-text {
17
20
  cursor: pointer;
@@ -1,6 +1,7 @@
1
1
  .pf-c-timestamp {
2
2
  --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
3
3
  --pf-c-timestamp--Color: var(--pf-global--Color--200);
4
+ --pf-c-timestamp--OutlineOffset: #{pf-size-prem(3px)};
4
5
 
5
6
  // Help text variables for the timestamp
6
7
  --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
@@ -13,8 +14,10 @@
13
14
  --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
14
15
  --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
15
16
 
17
+ display: inline-block;
16
18
  font-size: var(--pf-c-timestamp--FontSize);
17
19
  color: var(--pf-c-timestamp--Color);
20
+ outline-offset: var(--pf-c-timestamp--OutlineOffset);
18
21
 
19
22
  &.pf-m-help-text {
20
23
  cursor: pointer;
@@ -478,7 +478,7 @@ When a list item includes more than one block of content, it can be difficult fo
478
478
  <section
479
479
  class="pf-c-data-list__expandable-content"
480
480
  id="data-list-expandable-content1"
481
- aria-label="data-list-expandable Primary content details"
481
+ aria-label="Expandable primary content details"
482
482
  >
483
483
  <div
484
484
  class="pf-c-data-list__expandable-content-body"
@@ -570,7 +570,7 @@ When a list item includes more than one block of content, it can be difficult fo
570
570
  <section
571
571
  class="pf-c-data-list__expandable-content"
572
572
  id="data-list-expandable-content2"
573
- aria-label="Secondary content details"
573
+ aria-label="Expandable secondary content details"
574
574
  hidden
575
575
  >
576
576
  <div
@@ -666,7 +666,7 @@ When a list item includes more than one block of content, it can be difficult fo
666
666
  <section
667
667
  class="pf-c-data-list__expandable-content"
668
668
  id="data-list-expandable-content3"
669
- aria-label="Tertiary content details"
669
+ aria-label="Expandable tertiary content details"
670
670
  >
671
671
  <div
672
672
  class="pf-c-data-list__expandable-content-body pf-m-no-padding"
@@ -774,7 +774,7 @@ When a list item includes more than one block of content, it can be difficult fo
774
774
  <section
775
775
  class="pf-c-data-list__expandable-content"
776
776
  id="data-list-expandable-compact-content1"
777
- aria-label="data-list-expandable-compact Primary content details"
777
+ aria-label="Expandable compact primary content details"
778
778
  >
779
779
  <div
780
780
  class="pf-c-data-list__expandable-content-body"
@@ -869,7 +869,7 @@ When a list item includes more than one block of content, it can be difficult fo
869
869
  <section
870
870
  class="pf-c-data-list__expandable-content"
871
871
  id="data-list-expandable-compact-content2"
872
- aria-label="Secondary content details"
872
+ aria-label="Expandable compact secondary content details"
873
873
  hidden
874
874
  >
875
875
  <div
@@ -965,7 +965,7 @@ When a list item includes more than one block of content, it can be difficult fo
965
965
  <section
966
966
  class="pf-c-data-list__expandable-content"
967
967
  id="data-list-expandable-compact-content3"
968
- aria-label="Tertiary content details"
968
+ aria-label="Expandable compact tertiary content details"
969
969
  >
970
970
  <div
971
971
  class="pf-c-data-list__expandable-content-body pf-m-no-padding"
@@ -1073,7 +1073,7 @@ When a list item includes more than one block of content, it can be difficult fo
1073
1073
  <section
1074
1074
  class="pf-c-data-list__expandable-content"
1075
1075
  id="data-list-expandable-nested-content1"
1076
- aria-label="data-list-expandable-nested Primary content details"
1076
+ aria-label="Expandable nested primary content details"
1077
1077
  >
1078
1078
  <div class="pf-c-data-list__expandable-content-body">
1079
1079
  <ul
@@ -1294,7 +1294,7 @@ When a list item includes more than one block of content, it can be difficult fo
1294
1294
  <section
1295
1295
  class="pf-c-data-list__expandable-content"
1296
1296
  id="data-list-expandable-nested-content2"
1297
- aria-label="Secondary content details"
1297
+ aria-label="Expandable nested secondary content details"
1298
1298
  hidden
1299
1299
  >
1300
1300
  <div
@@ -1390,7 +1390,7 @@ When a list item includes more than one block of content, it can be difficult fo
1390
1390
  <section
1391
1391
  class="pf-c-data-list__expandable-content"
1392
1392
  id="data-list-expandable-nested-content3"
1393
- aria-label="Tertiary content details"
1393
+ aria-label="Expandable nested tertiary content details"
1394
1394
  >
1395
1395
  <div
1396
1396
  class="pf-c-data-list__expandable-content-body pf-m-no-padding"
@@ -1899,7 +1899,7 @@ When a list item includes more than one block of content, it can be difficult fo
1899
1899
  <section
1900
1900
  class="pf-c-data-list__expandable-content"
1901
1901
  id="data-list-flex-modifiers-2-content1"
1902
- aria-label="data-list-flex-modifiers-2 Primary content details"
1902
+ aria-label="Flex modifier expandable primary content details"
1903
1903
  >
1904
1904
  <div
1905
1905
  class="pf-c-data-list__expandable-content-body"
@@ -2034,7 +2034,7 @@ When a list item includes more than one block of content, it can be difficult fo
2034
2034
  <section
2035
2035
  class="pf-c-data-list__expandable-content"
2036
2036
  id="data-list-selectable-expandable-rows-content1"
2037
- aria-label="data-list-selectable-expandable-rows Primary content details"
2037
+ aria-label="Selectable expandable row primary content details"
2038
2038
  >
2039
2039
  <div
2040
2040
  class="pf-c-data-list__expandable-content-body"
@@ -2076,7 +2076,7 @@ When a list item includes more than one block of content, it can be difficult fo
2076
2076
  <section
2077
2077
  class="pf-c-data-list__expandable-content"
2078
2078
  id="data-list-selectable-expandable-rows-content2"
2079
- aria-label="Secondary content details"
2079
+ aria-label="Selectable expandable row secondary content details"
2080
2080
  hidden
2081
2081
  >
2082
2082
  <div
@@ -2119,7 +2119,7 @@ When a list item includes more than one block of content, it can be difficult fo
2119
2119
  <section
2120
2120
  class="pf-c-data-list__expandable-content"
2121
2121
  id="data-list-selectable-expandable-rows-content3"
2122
- aria-label="Tertiary content details"
2122
+ aria-label="Selectable expandable row tertiary content details"
2123
2123
  >
2124
2124
  <div
2125
2125
  class="pf-c-data-list__expandable-content-body pf-m-no-padding"
@@ -2161,7 +2161,7 @@ When a list item includes more than one block of content, it can be difficult fo
2161
2161
  <section
2162
2162
  class="pf-c-data-list__expandable-content"
2163
2163
  id="data-list-selectable-expandable-rows-content4"
2164
- aria-label="Quaternary content details"
2164
+ aria-label="Selectable expandable row quaternary content details"
2165
2165
  hidden
2166
2166
  >
2167
2167
  <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": "4.208.1",
4
+ "version": "4.210.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -35,8 +35,8 @@
35
35
  "@octokit/rest": "^16.40.1",
36
36
  "@patternfly/patternfly-a11y": "4.3.1",
37
37
  "@patternfly/react-charts": "6.84.8",
38
- "@patternfly/react-code-editor": "4.65.1",
39
- "@patternfly/react-table": "4.93.1",
38
+ "@patternfly/react-code-editor": "4.72.8",
39
+ "@patternfly/react-table": "4.100.8",
40
40
  "@starptech/prettyhtml": "^0.10.0",
41
41
  "babel-eslint": "^8.2.3",
42
42
  "cheerio": "^1.0.0-rc.3",
@@ -315,7 +315,7 @@
315
315
  --pf-global--palette--black-800: #1b1d21;
316
316
  --pf-global--palette--black-900: #0f1214;
317
317
  --pf-global--palette--red-9999: #fe5142;
318
- --pf-global--palette--red-8888: #fe6a5d;
318
+ --pf-global--palette--red-8888: #ff7468;
319
319
  --pf-global--palette--blue-300: #1fa7f8;
320
320
  --pf-global--BackgroundColor--100: #1b1d21;
321
321
  --pf-global--BackgroundColor--150: #212427;
@@ -335,7 +335,7 @@
335
335
  --pf-global--warning-color--100: #f0ab00;
336
336
  --pf-global--warning-color--200: #f4c145;
337
337
  --pf-global--danger-color--100: #fe5142;
338
- --pf-global--danger-color--200: #fe6a5d;
338
+ --pf-global--danger-color--200: #ff7468;
339
339
  --pf-global--link--Color: #1fa7f8;
340
340
  --pf-global--link--Color--hover: #73bcf7;
341
341
  --pf-global--link--Color--visited: #a18fff;
@@ -315,7 +315,7 @@
315
315
  --pf-global--palette--black-800: #1b1d21;
316
316
  --pf-global--palette--black-900: #0f1214;
317
317
  --pf-global--palette--red-9999: #fe5142;
318
- --pf-global--palette--red-8888: #fe6a5d;
318
+ --pf-global--palette--red-8888: #ff7468;
319
319
  --pf-global--palette--blue-300: #1fa7f8;
320
320
  --pf-global--BackgroundColor--100: #1b1d21;
321
321
  --pf-global--BackgroundColor--150: #212427;
@@ -335,7 +335,7 @@
335
335
  --pf-global--warning-color--100: #f0ab00;
336
336
  --pf-global--warning-color--200: #f4c145;
337
337
  --pf-global--danger-color--100: #fe5142;
338
- --pf-global--danger-color--200: #fe6a5d;
338
+ --pf-global--danger-color--200: #ff7468;
339
339
  --pf-global--link--Color: #1fa7f8;
340
340
  --pf-global--link--Color--hover: #73bcf7;
341
341
  --pf-global--link--Color--visited: #a18fff;
@@ -424,7 +424,7 @@
424
424
  --pf-global--palette--black-800: #1b1d21;
425
425
  --pf-global--palette--black-900: #0f1214;
426
426
  --pf-global--palette--red-9999: #fe5142;
427
- --pf-global--palette--red-8888: #fe6a5d;
427
+ --pf-global--palette--red-8888: #ff7468;
428
428
  --pf-global--palette--blue-300: #1fa7f8;
429
429
  --pf-global--BackgroundColor--100: #1b1d21;
430
430
  --pf-global--BackgroundColor--150: #212427;
@@ -444,7 +444,7 @@
444
444
  --pf-global--warning-color--100: #f0ab00;
445
445
  --pf-global--warning-color--200: #f4c145;
446
446
  --pf-global--danger-color--100: #fe5142;
447
- --pf-global--danger-color--200: #fe6a5d;
447
+ --pf-global--danger-color--200: #ff7468;
448
448
  --pf-global--link--Color: #1fa7f8;
449
449
  --pf-global--link--Color--hover: #73bcf7;
450
450
  --pf-global--link--Color--visited: #a18fff;
@@ -7902,6 +7902,10 @@ button.pf-c-breadcrumb__link {
7902
7902
  --pf-c-button--m-tertiary--focus--Color: var(--pf-global--palette--black-100);
7903
7903
  --pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--BorderColor--100);
7904
7904
  --pf-c-button--m-tertiary--active--Color: var(--pf-global--palette--black-100);
7905
+ --pf-c-button--m-warning--Color: var(--pf-global--palette--black-900);
7906
+ --pf-c-button--m-warning--hover--Color: var(--pf-global--palette--black-900);
7907
+ --pf-c-button--m-warning--focus--Color: var(--pf-global--palette--black-900);
7908
+ --pf-c-button--m-warning--active--Color: var(--pf-global--palette--black-900);
7905
7909
  --pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--warning-color--200);
7906
7910
  --pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--warning-color--200);
7907
7911
  --pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--warning-color--200);
@@ -28786,11 +28790,12 @@ svg.pf-c-spinner.pf-m-xl {
28786
28790
 
28787
28791
  .pf-c-scroll-outer-wrapper {
28788
28792
  --pf-c-scroll-outer-wrapper--MinHeight: 25rem;
28793
+ --pf-c-scroll-outer-wrapper--MaxHeight: 100%;
28789
28794
  display: flex;
28790
28795
  flex-direction: column;
28791
28796
  max-width: 100%;
28792
28797
  min-height: var(--pf-c-scroll-outer-wrapper--MinHeight);
28793
- max-height: 100%;
28798
+ max-height: var(--pf-c-scroll-outer-wrapper--MaxHeight);
28794
28799
  overflow: hidden;
28795
28800
  }
28796
28801
 
@@ -30849,6 +30854,7 @@ svg.pf-c-spinner.pf-m-xl {
30849
30854
  .pf-c-timestamp {
30850
30855
  --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
30851
30856
  --pf-c-timestamp--Color: var(--pf-global--Color--200);
30857
+ --pf-c-timestamp--OutlineOffset: 0.1875rem;
30852
30858
  --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
30853
30859
  --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
30854
30860
  --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
@@ -30858,8 +30864,10 @@ svg.pf-c-spinner.pf-m-xl {
30858
30864
  --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
30859
30865
  --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
30860
30866
  --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
30867
+ display: inline-block;
30861
30868
  font-size: var(--pf-c-timestamp--FontSize);
30862
30869
  color: var(--pf-c-timestamp--Color);
30870
+ outline-offset: var(--pf-c-timestamp--OutlineOffset);
30863
30871
  }
30864
30872
  .pf-c-timestamp.pf-m-help-text {
30865
30873
  cursor: pointer;
package/patternfly.css CHANGED
@@ -424,7 +424,7 @@
424
424
  --pf-global--palette--black-800: #1b1d21;
425
425
  --pf-global--palette--black-900: #0f1214;
426
426
  --pf-global--palette--red-9999: #fe5142;
427
- --pf-global--palette--red-8888: #fe6a5d;
427
+ --pf-global--palette--red-8888: #ff7468;
428
428
  --pf-global--palette--blue-300: #1fa7f8;
429
429
  --pf-global--BackgroundColor--100: #1b1d21;
430
430
  --pf-global--BackgroundColor--150: #212427;
@@ -444,7 +444,7 @@
444
444
  --pf-global--warning-color--100: #f0ab00;
445
445
  --pf-global--warning-color--200: #f4c145;
446
446
  --pf-global--danger-color--100: #fe5142;
447
- --pf-global--danger-color--200: #fe6a5d;
447
+ --pf-global--danger-color--200: #ff7468;
448
448
  --pf-global--link--Color: #1fa7f8;
449
449
  --pf-global--link--Color--hover: #73bcf7;
450
450
  --pf-global--link--Color--visited: #a18fff;
@@ -8029,6 +8029,10 @@ button.pf-c-breadcrumb__link {
8029
8029
  --pf-c-button--m-tertiary--focus--Color: var(--pf-global--palette--black-100);
8030
8030
  --pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--BorderColor--100);
8031
8031
  --pf-c-button--m-tertiary--active--Color: var(--pf-global--palette--black-100);
8032
+ --pf-c-button--m-warning--Color: var(--pf-global--palette--black-900);
8033
+ --pf-c-button--m-warning--hover--Color: var(--pf-global--palette--black-900);
8034
+ --pf-c-button--m-warning--focus--Color: var(--pf-global--palette--black-900);
8035
+ --pf-c-button--m-warning--active--Color: var(--pf-global--palette--black-900);
8032
8036
  --pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--warning-color--200);
8033
8037
  --pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--warning-color--200);
8034
8038
  --pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--warning-color--200);
@@ -28913,11 +28917,12 @@ svg.pf-c-spinner.pf-m-xl {
28913
28917
 
28914
28918
  .pf-c-scroll-outer-wrapper {
28915
28919
  --pf-c-scroll-outer-wrapper--MinHeight: 25rem;
28920
+ --pf-c-scroll-outer-wrapper--MaxHeight: 100%;
28916
28921
  display: flex;
28917
28922
  flex-direction: column;
28918
28923
  max-width: 100%;
28919
28924
  min-height: var(--pf-c-scroll-outer-wrapper--MinHeight);
28920
- max-height: 100%;
28925
+ max-height: var(--pf-c-scroll-outer-wrapper--MaxHeight);
28921
28926
  overflow: hidden;
28922
28927
  }
28923
28928
 
@@ -30976,6 +30981,7 @@ svg.pf-c-spinner.pf-m-xl {
30976
30981
  .pf-c-timestamp {
30977
30982
  --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
30978
30983
  --pf-c-timestamp--Color: var(--pf-global--Color--200);
30984
+ --pf-c-timestamp--OutlineOffset: 0.1875rem;
30979
30985
  --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
30980
30986
  --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
30981
30987
  --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
@@ -30985,8 +30991,10 @@ svg.pf-c-spinner.pf-m-xl {
30985
30991
  --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
30986
30992
  --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
30987
30993
  --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
30994
+ display: inline-block;
30988
30995
  font-size: var(--pf-c-timestamp--FontSize);
30989
30996
  color: var(--pf-c-timestamp--Color);
30997
+ outline-offset: var(--pf-c-timestamp--OutlineOffset);
30990
30998
  }
30991
30999
  .pf-c-timestamp.pf-m-help-text {
30992
31000
  cursor: pointer;