@patternfly/patternfly 5.0.0-alpha.7 → 5.0.0-alpha.8

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 (14) hide show
  1. package/base/_common.scss +0 -22
  2. package/base/patternfly-common.css +0 -10
  3. package/components/Card/card.css +9 -12
  4. package/components/Card/card.scss +11 -17
  5. package/docs/components/Card/examples/Card.md +61 -44
  6. package/docs/demos/Card/examples/Card.md +141 -106
  7. package/package.json +1 -1
  8. package/patternfly-base-no-reset.css +0 -10
  9. package/patternfly-base.css +0 -10
  10. package/patternfly-no-reset.css +9 -22
  11. package/patternfly.css +9 -22
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
  14. package/sass-utilities/scss-variables.scss +0 -1
package/docs/demos/Card/examples/Card.md CHANGED
@@ -68,57 +68,59 @@ wrapperTag: div
68
68
  </ul>
69
69
  </div>
70
70
  </div>
71
- <div class="pf-l-level pf-m-gutter">
72
- <div
73
- class="pf-c-card__title"
74
- id="card-demo-horizontal-grid-collapsed-example-title"
75
- >Getting started</div>
76
- <div class="pf-c-label-group">
77
- <div class="pf-c-label-group__main">
78
- <ul
79
- class="pf-c-label-group__list"
80
- role="list"
81
- aria-label="Group of labels"
82
- >
83
- <li class="pf-c-label-group__list-item">
84
- <span class="pf-c-label pf-m-blue pf-m-compact">
85
- <span class="pf-c-label__content">
86
- <span class="pf-c-label__icon">
87
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
71
+ <div class="pf-c-card__header-main">
72
+ <div class="pf-l-split pf-m-gutter pf-m-wrap">
73
+ <div
74
+ class="pf-c-card__title"
75
+ id="card-demo-horizontal-grid-collapsed-example-title"
76
+ >Getting started</div>
77
+ <div class="pf-c-label-group">
78
+ <div class="pf-c-label-group__main">
79
+ <ul
80
+ class="pf-c-label-group__list"
81
+ role="list"
82
+ aria-label="Group of labels"
83
+ >
84
+ <li class="pf-c-label-group__list-item">
85
+ <span class="pf-c-label pf-m-blue pf-m-compact">
86
+ <span class="pf-c-label__content">
87
+ <span class="pf-c-label__icon">
88
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
89
+ </span>
90
+ Set up your cluster
88
91
  </span>
89
- Set up your cluster
90
92
  </span>
91
- </span>
92
- </li>
93
- <li class="pf-c-label-group__list-item">
94
- <span class="pf-c-label pf-m-purple pf-m-compact">
95
- <span class="pf-c-label__content">
96
- <span class="pf-c-label__icon">
97
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
93
+ </li>
94
+ <li class="pf-c-label-group__list-item">
95
+ <span class="pf-c-label pf-m-purple pf-m-compact">
96
+ <span class="pf-c-label__content">
97
+ <span class="pf-c-label__icon">
98
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
99
+ </span>
100
+ Guided tours
98
101
  </span>
99
- Guided tours
100
102
  </span>
101
- </span>
102
- </li>
103
- <li class="pf-c-label-group__list-item">
104
- <span class="pf-c-label pf-m-green pf-m-compact">
105
- <span class="pf-c-label__content">
106
- <span class="pf-c-label__icon">
107
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
103
+ </li>
104
+ <li class="pf-c-label-group__list-item">
105
+ <span class="pf-c-label pf-m-green pf-m-compact">
106
+ <span class="pf-c-label__content">
107
+ <span class="pf-c-label__icon">
108
+ <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
109
+ </span>
110
+ Quick starts
108
111
  </span>
109
- Quick starts
110
112
  </span>
111
- </span>
112
- </li>
113
- <li class="pf-c-label-group__list-item">
114
- <button
115
- class="pf-c-label pf-m-overflow pf-m-compact"
116
- type="button"
117
- >
118
- <span class="pf-c-label__content">1 more</span>
119
- </button>
120
- </li>
121
- </ul>
113
+ </li>
114
+ <li class="pf-c-label-group__list-item">
115
+ <button
116
+ class="pf-c-label pf-m-overflow pf-m-compact"
117
+ type="button"
118
+ >
119
+ <span class="pf-c-label__content">1 more</span>
120
+ </button>
121
+ </li>
122
+ </ul>
123
+ </div>
122
124
  </div>
123
125
  </div>
124
126
  </div>
@@ -192,10 +194,12 @@ wrapperTag: div
192
194
  </ul>
193
195
  </div>
194
196
  </div>
195
- <div
196
- class="pf-c-card__title"
197
- id="card-demo-horizontal-grid-expanded-example-title"
198
- >Getting started</div>
197
+ <div class="pf-c-card__header-main">
198
+ <div
199
+ class="pf-c-card__title"
200
+ id="card-demo-horizontal-grid-expanded-example-title"
201
+ >Getting started</div>
202
+ </div>
199
203
  </div>
200
204
  <div class="pf-c-card__expandable-content">
201
205
  <div class="pf-c-card__body">
@@ -713,7 +717,9 @@ wrapperTag: div
713
717
  ```html
714
718
  <div class="pf-c-card">
715
719
  <div class="pf-c-card__header">
716
- <h2 class="pf-c-title pf-m-lg">Status</h2>
720
+ <div class="pf-c-card__header-main">
721
+ <h2 class="pf-c-title pf-m-lg">Status</h2>
722
+ </div>
717
723
  </div>
718
724
  <div class="pf-c-card__body">
719
725
  <div class="pf-c-tabs pf-m-fill" id="status-tabs">
@@ -1819,12 +1825,14 @@ wrapperTag: div
1819
1825
  >
1820
1826
  <div class="pf-c-card" id="utilization-card-3-example">
1821
1827
  <div class="pf-c-card__header pf-u-align-items-flex-start">
1822
- <div
1823
- class="pf-c-card__title"
1824
- id="utilization-card-3-example-title1"
1825
- style="padding-top: 3px;"
1826
- >
1827
- <h2 class="pf-c-title pf-m-lg">Recommendations</h2>
1828
+ <div class="pf-c-card__header-main">
1829
+ <div
1830
+ class="pf-c-card__title"
1831
+ id="utilization-card-3-example-title1"
1832
+ style="padding-top: 3px;"
1833
+ >
1834
+ <h2 class="pf-c-title pf-m-lg">Recommendations</h2>
1835
+ </div>
1828
1836
  </div>
1829
1837
  <div class="pf-c-card__actions pf-m-no-offset">
1830
1838
  <div class="pf-c-select">
@@ -1938,8 +1946,13 @@ wrapperTag: div
1938
1946
  ```html
1939
1947
  <div class="pf-c-card" id="nested-cards-toggle-right-example">
1940
1948
  <div class="pf-c-card__header">
1941
- <div class="pf-c-card__title" id="nested-cards-toggle-right-example-title">
1942
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
1949
+ <div class="pf-c-card__header-main">
1950
+ <div
1951
+ class="pf-c-card__title"
1952
+ id="nested-cards-toggle-right-example-title"
1953
+ >
1954
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
1955
+ </div>
1943
1956
  </div>
1944
1957
  </div>
1945
1958
  <div
@@ -1960,11 +1973,13 @@ wrapperTag: div
1960
1973
  </span>
1961
1974
  </button>
1962
1975
  </div>
1963
- <div
1964
- class="pf-c-card__title"
1965
- id="nested-cards-toggle-right-example-group-1-title"
1966
- >
1967
- <span class="pf-u-font-weight-light">CPU 1</span>
1976
+ <div class="pf-c-card__header-main">
1977
+ <div
1978
+ class="pf-c-card__title"
1979
+ id="nested-cards-toggle-right-example-group-1-title"
1980
+ >
1981
+ <span class="pf-u-font-weight-light">CPU 1</span>
1982
+ </div>
1968
1983
  </div>
1969
1984
  </div>
1970
1985
  <div class="pf-c-card__expandable-content">
@@ -2069,11 +2084,13 @@ wrapperTag: div
2069
2084
  </span>
2070
2085
  </button>
2071
2086
  </div>
2072
- <div
2073
- class="pf-c-card__title"
2074
- id="nested-cards-toggle-right-example-group-2-title"
2075
- >
2076
- <span class="pf-u-font-weight-light">CPU 2</span>
2087
+ <div class="pf-c-card__header-main">
2088
+ <div
2089
+ class="pf-c-card__title"
2090
+ id="nested-cards-toggle-right-example-group-2-title"
2091
+ >
2092
+ <span class="pf-u-font-weight-light">CPU 2</span>
2093
+ </div>
2077
2094
  </div>
2078
2095
  </div>
2079
2096
  </div>
@@ -2095,11 +2112,13 @@ wrapperTag: div
2095
2112
  </span>
2096
2113
  </button>
2097
2114
  </div>
2098
- <div
2099
- class="pf-c-card__title"
2100
- id="nested-cards-toggle-right-example-group-3-title"
2101
- >
2102
- <span class="pf-u-font-weight-light">CPU 3</span>
2115
+ <div class="pf-c-card__header-main">
2116
+ <div
2117
+ class="pf-c-card__title"
2118
+ id="nested-cards-toggle-right-example-group-3-title"
2119
+ >
2120
+ <span class="pf-u-font-weight-light">CPU 3</span>
2121
+ </div>
2103
2122
  </div>
2104
2123
  </div>
2105
2124
  </div>
@@ -2112,8 +2131,10 @@ wrapperTag: div
2112
2131
  ```html
2113
2132
  <div class="pf-c-card" id="nested-cards-example">
2114
2133
  <div class="pf-c-card__header">
2115
- <div class="pf-c-card__title" id="nested-cards-example-title">
2116
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2134
+ <div class="pf-c-card__header-main">
2135
+ <div class="pf-c-card__title" id="nested-cards-example-title">
2136
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2137
+ </div>
2117
2138
  </div>
2118
2139
  </div>
2119
2140
  <div
@@ -2134,8 +2155,10 @@ wrapperTag: div
2134
2155
  </span>
2135
2156
  </button>
2136
2157
  </div>
2137
- <div class="pf-c-card__title" id="nested-cards-example-group-1-title">
2138
- <span class="pf-u-font-weight-light">CPU 1</span>
2158
+ <div class="pf-c-card__header-main">
2159
+ <div class="pf-c-card__title" id="nested-cards-example-group-1-title">
2160
+ <span class="pf-u-font-weight-light">CPU 1</span>
2161
+ </div>
2139
2162
  </div>
2140
2163
  </div>
2141
2164
  <div class="pf-c-card__expandable-content">
@@ -2237,8 +2260,10 @@ wrapperTag: div
2237
2260
  </span>
2238
2261
  </button>
2239
2262
  </div>
2240
- <div class="pf-c-card__title" id="nested-cards-example-group-2-title">
2241
- <span class="pf-u-font-weight-light">CPU 2</span>
2263
+ <div class="pf-c-card__header-main">
2264
+ <div class="pf-c-card__title" id="nested-cards-example-group-2-title">
2265
+ <span class="pf-u-font-weight-light">CPU 2</span>
2266
+ </div>
2242
2267
  </div>
2243
2268
  </div>
2244
2269
  </div>
@@ -2257,8 +2282,10 @@ wrapperTag: div
2257
2282
  </span>
2258
2283
  </button>
2259
2284
  </div>
2260
- <div class="pf-c-card__title" id="nested-cards-example-group-3-title">
2261
- <span class="pf-u-font-weight-light">CPU 3</span>
2285
+ <div class="pf-c-card__header-main">
2286
+ <div class="pf-c-card__title" id="nested-cards-example-group-3-title">
2287
+ <span class="pf-u-font-weight-light">CPU 3</span>
2288
+ </div>
2262
2289
  </div>
2263
2290
  </div>
2264
2291
  </div>
@@ -2271,8 +2298,10 @@ wrapperTag: div
2271
2298
  ```html
2272
2299
  <div class="pf-c-card" id="with-accordion-example">
2273
2300
  <div class="pf-c-card__header">
2274
- <div class="pf-c-card__title" id="with-accordion-example-title">
2275
- <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2301
+ <div class="pf-c-card__header-main">
2302
+ <div class="pf-c-card__title" id="with-accordion-example-title">
2303
+ <h2 class="pf-c-title pf-m-lg">Hardware Monitor</h2>
2304
+ </div>
2276
2305
  </div>
2277
2306
  </div>
2278
2307
  <div class="pf-c-card__body">
@@ -2585,7 +2614,7 @@ wrapperTag: div
2585
2614
  >
2586
2615
  <div class="pf-c-card" id="trend-card-1-example">
2587
2616
  <div class="pf-c-card__header">
2588
- <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2617
+ <div class="pf-c-card__header-main">
2589
2618
  <div class="pf-c-card__title" id="trend-card-1-example-title">
2590
2619
  <h1 class="pf-c-title pf-m-2xl">1,050,765 IOPS</h1>
2591
2620
  </div>
@@ -2670,18 +2699,20 @@ wrapperTag: div
2670
2699
  >
2671
2700
  <div class="pf-c-card" id="trend-card-2-example">
2672
2701
  <div class="pf-c-card__header">
2673
- <div class="pf-l-flex pf-m-align-items-center">
2674
- <div class="pf-l-flex__item pf-m-flex-none">
2675
- <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2676
- <div class="pf-c-card__title" id="trend-card-2-example-title">
2677
- <h1 class="pf-c-title pf-m-2xl">842 TB</h1>
2702
+ <div class="pf-c-card__header-main">
2703
+ <div class="pf-l-flex pf-m-align-items-center">
2704
+ <div class="pf-l-flex__item pf-m-flex-none">
2705
+ <div class="pf-l-flex pf-m-column pf-m-space-items-none">
2706
+ <div class="pf-c-card__title" id="trend-card-2-example-title">
2707
+ <h1 class="pf-c-title pf-m-2xl">842 TB</h1>
2708
+ </div>
2709
+ <span class="pf-u-color-200">Storage capacity</span>
2678
2710
  </div>
2679
- <span class="pf-u-color-200">Storage capacity</span>
2680
2711
  </div>
2681
- </div>
2682
- <div class="pf-l-flex__item pf-m-flex-1">
2683
- <div class="ws-chart">
2684
- <img src="/assets/images/img_line-chart-1.png" alt="Line Chart" />
2712
+ <div class="pf-l-flex__item pf-m-flex-1">
2713
+ <div class="ws-chart">
2714
+ <img src="/assets/images/img_line-chart-1.png" alt="Line Chart" />
2715
+ </div>
2685
2716
  </div>
2686
2717
  </div>
2687
2718
  </div>
@@ -2769,12 +2800,14 @@ wrapperTag: div
2769
2800
  </ul>
2770
2801
  </div>
2771
2802
  </div>
2772
- <div
2773
- class="pf-c-card__title"
2774
- id="card-log-view-example-title1"
2775
- style="padding-top: 3px;"
2776
- >
2777
- <h2 class="pf-c-title pf-m-lg">Activity</h2>
2803
+ <div class="pf-c-card__header-main">
2804
+ <div
2805
+ class="pf-c-card__title"
2806
+ id="card-log-view-example-title1"
2807
+ style="padding-top: 3px;"
2808
+ >
2809
+ <h2 class="pf-c-title pf-m-lg">Activity</h2>
2810
+ </div>
2778
2811
  </div>
2779
2812
  </div>
2780
2813
  <div class="pf-c-card__body">
@@ -2914,12 +2947,14 @@ wrapperTag: div
2914
2947
  </ul>
2915
2948
  </div>
2916
2949
  </div>
2917
- <div
2918
- class="pf-c-card__title"
2919
- id="card-events-view-example-title1"
2920
- style="padding-top: 3px;"
2921
- >
2922
- <h2 class="pf-c-title pf-m-lg">Events</h2>
2950
+ <div class="pf-c-card__header-main">
2951
+ <div
2952
+ class="pf-c-card__title"
2953
+ id="card-events-view-example-title1"
2954
+ style="padding-top: 3px;"
2955
+ >
2956
+ <h2 class="pf-c-title pf-m-lg">Events</h2>
2957
+ </div>
2923
2958
  </div>
2924
2959
  </div>
2925
2960
  <div class="pf-c-card__body">
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": "5.0.0-alpha.7",
4
+ "version": "5.0.0-alpha.8",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-reset.css CHANGED
@@ -493,16 +493,6 @@
493
493
  font-weight: 300 700;
494
494
  font-display: fallback;
495
495
  }
496
- [class*=pf-c-], [class*=pf-c-]::before, [class*=pf-c-]::after {
497
- padding: 0;
498
- margin: 0;
499
- background-color: transparent;
500
- }
501
-
502
- html {
503
- font-size: var(--pf-global--root--FontSize, unset) !important;
504
- }
505
-
506
496
  .pf-screen-reader {
507
497
  position: fixed;
508
498
  top: 0;
package/patternfly-base.css CHANGED
@@ -493,16 +493,6 @@
493
493
  font-weight: 300 700;
494
494
  font-display: fallback;
495
495
  }
496
- [class*=pf-c-], [class*=pf-c-]::before, [class*=pf-c-]::after {
497
- padding: 0;
498
- margin: 0;
499
- background-color: transparent;
500
- }
501
-
502
- html {
503
- font-size: var(--pf-global--root--FontSize, unset) !important;
504
- }
505
-
506
496
  .pf-screen-reader {
507
497
  position: fixed;
508
498
  top: 0;
package/patternfly-no-reset.css CHANGED
@@ -587,16 +587,6 @@
587
587
  font-weight: 300 700;
588
588
  font-display: fallback;
589
589
  }
590
- [class*=pf-c-], [class*=pf-c-]::before, [class*=pf-c-]::after {
591
- padding: 0;
592
- margin: 0;
593
- background-color: transparent;
594
- }
595
-
596
- html {
597
- font-size: var(--pf-global--root--FontSize, unset) !important;
598
- }
599
-
600
590
  .pf-screen-reader {
601
591
  position: fixed;
602
592
  top: 0;
@@ -8066,7 +8056,9 @@ button.pf-c-breadcrumb__link {
8066
8056
  --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
8067
8057
  --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
8068
8058
  --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
8069
- --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
8059
+ --pf-c-card__actions--Gap: var(--pf-global--spacer--sm);
8060
+ --pf-c-card__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
8061
+ --pf-c-card__actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
8070
8062
  --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
8071
8063
  --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
8072
8064
  --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
@@ -8137,7 +8129,6 @@ button.pf-c-breadcrumb__link {
8137
8129
  --pf-c-card--m-plain--BackgroundColor: transparent;
8138
8130
  --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
8139
8131
  --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
8140
- --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
8141
8132
  --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
8142
8133
  --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
8143
8134
  display: flex;
@@ -8283,13 +8274,11 @@ button.pf-c-breadcrumb__link {
8283
8274
  --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
8284
8275
  --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
8285
8276
  }
8286
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__actions {
8287
- --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
8288
- }
8289
8277
  .pf-c-card__header.pf-m-toggle-right .pf-c-card__header-toggle {
8290
8278
  order: 2;
8291
8279
  }
8292
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__title {
8280
+
8281
+ .pf-c-card__header-main {
8293
8282
  flex: 1;
8294
8283
  }
8295
8284
 
@@ -8315,10 +8304,8 @@ button.pf-c-breadcrumb__link {
8315
8304
  align-self: flex-start;
8316
8305
  order: 1;
8317
8306
  padding-left: var(--pf-c-card__actions--PaddingLeft);
8318
- margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
8319
- }
8320
- .pf-c-card__actions > * + * {
8321
- margin-left: var(--pf-c-card__actions--child--MarginLeft);
8307
+ margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
8308
+ gap: var(--pf-c-card__actions--Gap);
8322
8309
  }
8323
8310
  .pf-c-card__actions + .pf-c-card__title,
8324
8311
  .pf-c-card__actions + .pf-c-card__body,
@@ -8326,8 +8313,8 @@ button.pf-c-breadcrumb__link {
8326
8313
  padding: 0;
8327
8314
  }
8328
8315
  .pf-c-card__actions.pf-m-no-offset {
8329
- --pf-c-card__header-toggle--MarginTop: 0;
8330
- --pf-c-card__header-toggle--MarginBottom: 0;
8316
+ --pf-c-card__actions--MarginTop: 0;
8317
+ --pf-c-card__actions--MarginBottom: 0;
8331
8318
  }
8332
8319
 
8333
8320
  .pf-c-card__header,
package/patternfly.css CHANGED
@@ -587,16 +587,6 @@
587
587
  font-weight: 300 700;
588
588
  font-display: fallback;
589
589
  }
590
- [class*=pf-c-], [class*=pf-c-]::before, [class*=pf-c-]::after {
591
- padding: 0;
592
- margin: 0;
593
- background-color: transparent;
594
- }
595
-
596
- html {
597
- font-size: var(--pf-global--root--FontSize, unset) !important;
598
- }
599
-
600
590
  .pf-screen-reader {
601
591
  position: fixed;
602
592
  top: 0;
@@ -8189,7 +8179,9 @@ button.pf-c-breadcrumb__link {
8189
8179
  --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
8190
8180
  --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
8191
8181
  --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
8192
- --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
8182
+ --pf-c-card__actions--Gap: var(--pf-global--spacer--sm);
8183
+ --pf-c-card__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
8184
+ --pf-c-card__actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
8193
8185
  --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
8194
8186
  --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
8195
8187
  --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
@@ -8260,7 +8252,6 @@ button.pf-c-breadcrumb__link {
8260
8252
  --pf-c-card--m-plain--BackgroundColor: transparent;
8261
8253
  --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
8262
8254
  --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
8263
- --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
8264
8255
  --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
8265
8256
  --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
8266
8257
  display: flex;
@@ -8406,13 +8397,11 @@ button.pf-c-breadcrumb__link {
8406
8397
  --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
8407
8398
  --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
8408
8399
  }
8409
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__actions {
8410
- --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
8411
- }
8412
8400
  .pf-c-card__header.pf-m-toggle-right .pf-c-card__header-toggle {
8413
8401
  order: 2;
8414
8402
  }
8415
- .pf-c-card__header.pf-m-toggle-right .pf-c-card__title {
8403
+
8404
+ .pf-c-card__header-main {
8416
8405
  flex: 1;
8417
8406
  }
8418
8407
 
@@ -8438,10 +8427,8 @@ button.pf-c-breadcrumb__link {
8438
8427
  align-self: flex-start;
8439
8428
  order: 1;
8440
8429
  padding-left: var(--pf-c-card__actions--PaddingLeft);
8441
- margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
8442
- }
8443
- .pf-c-card__actions > * + * {
8444
- margin-left: var(--pf-c-card__actions--child--MarginLeft);
8430
+ margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
8431
+ gap: var(--pf-c-card__actions--Gap);
8445
8432
  }
8446
8433
  .pf-c-card__actions + .pf-c-card__title,
8447
8434
  .pf-c-card__actions + .pf-c-card__body,
@@ -8449,8 +8436,8 @@ button.pf-c-breadcrumb__link {
8449
8436
  padding: 0;
8450
8437
  }
8451
8438
  .pf-c-card__actions.pf-m-no-offset {
8452
- --pf-c-card__header-toggle--MarginTop: 0;
8453
- --pf-c-card__header-toggle--MarginBottom: 0;
8439
+ --pf-c-card__actions--MarginTop: 0;
8440
+ --pf-c-card__actions--MarginBottom: 0;
8454
8441
  }
8455
8442
 
8456
8443
  .pf-c-card__header,