@patternfly/patternfly 4.146.2 → 4.147.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.
Files changed (8) hide show
  1. package/components/Card/card.css +97 -18
  2. package/components/Card/card.scss +127 -19
  3. package/docs/components/Card/examples/Card.md +70 -29
  4. package/package.json +1 -1
  5. package/patternfly-no-reset.css +97 -18
  6. package/patternfly.css +97 -18
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/patternfly-no-reset.css CHANGED
@@ -7195,6 +7195,24 @@ button.pf-c-breadcrumb__link {
7195
7195
  .pf-c-card {
7196
7196
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
7197
7197
  --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm);
7198
+ --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
7199
+ --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
7200
+ --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
7201
+ --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
7202
+ --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
7203
+ --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
7204
+ --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
7205
+ --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
7206
+ --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
7207
+ --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
7208
+ --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
7209
+ --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
7210
+ --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
7211
+ --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
7212
+ --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
7213
+ --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
7214
+ --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
7215
+ --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
7198
7216
  --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
7199
7217
  --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
7200
7218
  --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
@@ -7202,6 +7220,35 @@ button.pf-c-breadcrumb__link {
7202
7220
  --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
7203
7221
  --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
7204
7222
  --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
7223
+ --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
7224
+ --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
7225
+ --pf-c-card--m-selectable-raised--before--Right: 0;
7226
+ --pf-c-card--m-selectable-raised--before--Bottom: 0;
7227
+ --pf-c-card--m-selectable-raised--before--Left: 0;
7228
+ --pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
7229
+ --pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
7230
+ --pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
7231
+ --pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl);
7232
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;
7233
+ --pf-c-card--m-selectable-raised--before--Transition: none;
7234
+ --pf-c-card--m-selectable-raised--before--ScaleY: 1;
7235
+ --pf-c-card--m-selectable-raised--before--TranslateY: 0;
7236
+ --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
7237
+ --pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
7238
+ --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md);
7239
+ --pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400);
7240
+ --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md);
7241
+ --pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400);
7242
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100);
7243
+ --pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg);
7244
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;
7245
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
7246
+ --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
7247
+ --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
7248
+ --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
7249
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
7250
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
7251
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
7205
7252
  --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
7206
7253
  --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
7207
7254
  --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
@@ -7220,25 +7267,7 @@ button.pf-c-breadcrumb__link {
7220
7267
  --pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm);
7221
7268
  --pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100);
7222
7269
  --pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm);
7223
- --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
7224
- --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
7225
- --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
7226
- --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
7227
- --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
7228
- --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
7229
- --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
7230
- --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
7231
- --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
7232
- --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
7233
- --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
7234
7270
  --pf-c-card--m-full-height--Height: 100%;
7235
- --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
7236
- --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
7237
- --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
7238
- --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
7239
- --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
7240
- --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
7241
- --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
7242
7271
  --pf-c-card--m-plain--BoxShadow: none;
7243
7272
  --pf-c-card--m-plain--BackgroundColor: transparent;
7244
7273
  --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
@@ -7277,6 +7306,51 @@ button.pf-c-breadcrumb__link {
7277
7306
  content: "";
7278
7307
  background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
7279
7308
  }
7309
+ .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised {
7310
+ position: relative;
7311
+ }
7312
+ .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before {
7313
+ position: absolute;
7314
+ right: var(--pf-c-card--m-selectable-raised--before--Right);
7315
+ bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
7316
+ left: var(--pf-c-card--m-selectable-raised--before--Left);
7317
+ height: var(--pf-c-card--m-selectable-raised--before--Height);
7318
+ content: "";
7319
+ background-color: var(--pf-c-card--m-selectable-raised--before--BackgroundColor);
7320
+ transition: var(--pf-c-card--m-selectable-raised--before--Transition);
7321
+ transform: translateY(var(--pf-c-card--m-selectable-raised--before--TranslateY)) scaleY(var(--pf-c-card--m-selectable-raised--before--ScaleY));
7322
+ transform-origin: center bottom;
7323
+ }
7324
+ .pf-c-card.pf-m-hoverable-raised:hover {
7325
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-hoverable-raised--hover--BoxShadow);
7326
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor);
7327
+ }
7328
+ .pf-c-card.pf-m-selectable-raised {
7329
+ cursor: pointer;
7330
+ /*
7331
+ &:active {
7332
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
7333
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
7334
+ }
7335
+ */
7336
+ }
7337
+ .pf-c-card.pf-m-selectable-raised:hover {
7338
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
7339
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--hover--before--BackgroundColor);
7340
+ }
7341
+ .pf-c-card.pf-m-selectable-raised:focus {
7342
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
7343
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
7344
+ }
7345
+ .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised, .pf-c-card.pf-m-selectable-raised:active {
7346
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
7347
+ --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
7348
+ --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
7349
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
7350
+ box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
7351
+ transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
7352
+ transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
7353
+ }
7280
7354
  .pf-c-card.pf-m-compact {
7281
7355
  --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
7282
7356
  --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
@@ -7298,6 +7372,10 @@ button.pf-c-breadcrumb__link {
7298
7372
  }
7299
7373
  .pf-c-card.pf-m-flat {
7300
7374
  --pf-c-card--BoxShadow: none;
7375
+ --pf-c-card--m-selectable-raised--before--Right: var(--pf-c-card--m-flat--m-selectable-raised--before--Right);
7376
+ --pf-c-card--m-selectable-raised--before--Bottom: var(--pf-c-card--m-flat--m-selectable-raised--before--Bottom);
7377
+ --pf-c-card--m-selectable-raised--before--Left: var(--pf-c-card--m-flat--m-selectable-raised--before--Left);
7378
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY);
7301
7379
  border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);
7302
7380
  }
7303
7381
  .pf-c-card.pf-m-plain {
@@ -7305,6 +7383,7 @@ button.pf-c-breadcrumb__link {
7305
7383
  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);
7306
7384
  }
7307
7385
  .pf-c-card.pf-m-rounded {
7386
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY);
7308
7387
  border-radius: var(--pf-c-card--m-rounded--BorderRadius);
7309
7388
  }
7310
7389
  .pf-c-card.pf-m-expanded .pf-c-card__header-toggle-icon {
package/patternfly.css CHANGED
@@ -7331,6 +7331,24 @@ button.pf-c-breadcrumb__link {
7331
7331
  .pf-c-card {
7332
7332
  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
7333
7333
  --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm);
7334
+ --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
7335
+ --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
7336
+ --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
7337
+ --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
7338
+ --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
7339
+ --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
7340
+ --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
7341
+ --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
7342
+ --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
7343
+ --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
7344
+ --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
7345
+ --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
7346
+ --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
7347
+ --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
7348
+ --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
7349
+ --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
7350
+ --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
7351
+ --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
7334
7352
  --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
7335
7353
  --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
7336
7354
  --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
@@ -7338,6 +7356,35 @@ button.pf-c-breadcrumb__link {
7338
7356
  --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
7339
7357
  --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
7340
7358
  --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
7359
+ --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
7360
+ --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
7361
+ --pf-c-card--m-selectable-raised--before--Right: 0;
7362
+ --pf-c-card--m-selectable-raised--before--Bottom: 0;
7363
+ --pf-c-card--m-selectable-raised--before--Left: 0;
7364
+ --pf-c-card--m-flat--m-selectable-raised--before--Right: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
7365
+ --pf-c-card--m-flat--m-selectable-raised--before--Bottom: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
7366
+ --pf-c-card--m-flat--m-selectable-raised--before--Left: calc(-1 * var(--pf-c-card--m-flat--BorderWidth));
7367
+ --pf-c-card--m-selectable-raised--before--Height: var(--pf-global--BorderWidth--xl);
7368
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: transparent;
7369
+ --pf-c-card--m-selectable-raised--before--Transition: none;
7370
+ --pf-c-card--m-selectable-raised--before--ScaleY: 1;
7371
+ --pf-c-card--m-selectable-raised--before--TranslateY: 0;
7372
+ --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
7373
+ --pf-c-card--m-selectable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
7374
+ --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--md);
7375
+ --pf-c-card--m-selectable-raised--focus--before--BackgroundColor: var(--pf-global--active-color--400);
7376
+ --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--md);
7377
+ --pf-c-card--m-selectable-raised--active--before--BackgroundColor: var(--pf-global--active-color--400);
7378
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor: var(--pf-global--active-color--100);
7379
+ --pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow: var(--pf-global--BoxShadow--lg);
7380
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base: -0.5rem;
7381
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
7382
+ --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
7383
+ --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
7384
+ --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
7385
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
7386
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
7387
+ --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
7341
7388
  --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
7342
7389
  --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
7343
7390
  --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
@@ -7356,25 +7403,7 @@ button.pf-c-breadcrumb__link {
7356
7403
  --pf-c-card--m-flat--BorderWidth: var(--pf-global--BorderWidth--sm);
7357
7404
  --pf-c-card--m-flat--BorderColor: var(--pf-global--BorderColor--100);
7358
7405
  --pf-c-card--m-rounded--BorderRadius: var(--pf-global--BorderRadius--sm);
7359
- --pf-c-card--first-child--PaddingTop: var(--pf-global--spacer--lg);
7360
- --pf-c-card--child--PaddingRight: var(--pf-global--spacer--lg);
7361
- --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
7362
- --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
7363
- --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
7364
- --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
7365
- --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
7366
- --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
7367
- --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
7368
- --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
7369
- --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
7370
7406
  --pf-c-card--m-full-height--Height: 100%;
7371
- --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
7372
- --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
7373
- --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
7374
- --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
7375
- --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
7376
- --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
7377
- --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
7378
7407
  --pf-c-card--m-plain--BoxShadow: none;
7379
7408
  --pf-c-card--m-plain--BackgroundColor: transparent;
7380
7409
  --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
@@ -7413,6 +7442,51 @@ button.pf-c-breadcrumb__link {
7413
7442
  content: "";
7414
7443
  background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
7415
7444
  }
7445
+ .pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised {
7446
+ position: relative;
7447
+ }
7448
+ .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before {
7449
+ position: absolute;
7450
+ right: var(--pf-c-card--m-selectable-raised--before--Right);
7451
+ bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
7452
+ left: var(--pf-c-card--m-selectable-raised--before--Left);
7453
+ height: var(--pf-c-card--m-selectable-raised--before--Height);
7454
+ content: "";
7455
+ background-color: var(--pf-c-card--m-selectable-raised--before--BackgroundColor);
7456
+ transition: var(--pf-c-card--m-selectable-raised--before--Transition);
7457
+ transform: translateY(var(--pf-c-card--m-selectable-raised--before--TranslateY)) scaleY(var(--pf-c-card--m-selectable-raised--before--ScaleY));
7458
+ transform-origin: center bottom;
7459
+ }
7460
+ .pf-c-card.pf-m-hoverable-raised:hover {
7461
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-hoverable-raised--hover--BoxShadow);
7462
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-hoverable-raised--hover--before--BackgroundColor);
7463
+ }
7464
+ .pf-c-card.pf-m-selectable-raised {
7465
+ cursor: pointer;
7466
+ /*
7467
+ &:active {
7468
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
7469
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
7470
+ }
7471
+ */
7472
+ }
7473
+ .pf-c-card.pf-m-selectable-raised:hover {
7474
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
7475
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--hover--before--BackgroundColor);
7476
+ }
7477
+ .pf-c-card.pf-m-selectable-raised:focus {
7478
+ --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
7479
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
7480
+ }
7481
+ .pf-c-card.pf-m-selectable-raised.pf-m-selected-raised, .pf-c-card.pf-m-selectable-raised:active {
7482
+ --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
7483
+ --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
7484
+ --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
7485
+ --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
7486
+ box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
7487
+ transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
7488
+ transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
7489
+ }
7416
7490
  .pf-c-card.pf-m-compact {
7417
7491
  --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
7418
7492
  --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);
@@ -7434,6 +7508,10 @@ button.pf-c-breadcrumb__link {
7434
7508
  }
7435
7509
  .pf-c-card.pf-m-flat {
7436
7510
  --pf-c-card--BoxShadow: none;
7511
+ --pf-c-card--m-selectable-raised--before--Right: var(--pf-c-card--m-flat--m-selectable-raised--before--Right);
7512
+ --pf-c-card--m-selectable-raised--before--Bottom: var(--pf-c-card--m-flat--m-selectable-raised--before--Bottom);
7513
+ --pf-c-card--m-selectable-raised--before--Left: var(--pf-c-card--m-flat--m-selectable-raised--before--Left);
7514
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY);
7437
7515
  border: var(--pf-c-card--m-flat--BorderWidth) solid var(--pf-c-card--m-flat--BorderColor);
7438
7516
  }
7439
7517
  .pf-c-card.pf-m-plain {
@@ -7441,6 +7519,7 @@ button.pf-c-breadcrumb__link {
7441
7519
  --pf-c-card--BackgroundColor: var(--pf-c-card--m-plain--BackgroundColor);
7442
7520
  }
7443
7521
  .pf-c-card.pf-m-rounded {
7522
+ --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY);
7444
7523
  border-radius: var(--pf-c-card--m-rounded--BorderRadius);
7445
7524
  }
7446
7525
  .pf-c-card.pf-m-expanded .pf-c-card__header-toggle-icon {