summaryrefslogtreecommitdiffstats
path: root/pkg/lib/ct-card.scss
blob: 114c659e0b58495a9390a56f87697f6933c5dadd (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
@use "_global-variables.scss" as *;

/* Rely on the margin from the Card for spacing */
.ct-card.pf-v5-c-card .table {
  margin-block-end: 0;
}

// FIXME: Once PF4 provides a property for removing padding: https://github.com/patternfly/patternfly-react/issues/5606
.ct-card.pf-v5-c-card .pf-v5-c-card__body.contains-list {
  padding-inline: 0;
  padding-block-end: 0;

  > .pf-v5-c-table > :last-child > tr:last-child {
    border-block-end: none;
  }

  // Remove excess padding from compact tables toggles
  // And adjust the padding to left align the toggles with the card header
  > .pf-v5-c-table {
    .pf-v5-c-table__toggle {
      padding-inline-start: 0;

      > .pf-v5-c-button {
        padding-inline-start: var(--pf-v5-global--spacer--lg);
      }
    }
  }
}

.ct-card.pf-v5-c-card .pf-v5-c-card__title-text {
  font-weight: normal;
  font-size: var(--pf-v5-global--FontSize--2xl);
}

// Remove excess top padding from top-level empty state in cards,
// as card headers already add enough space
.ct-card > .pf-v5-c-card__body > .pf-v5-c-empty-state {
  --pf-v5-c-empty-state__body--MarginTop: 0;
  padding-block: 0 var(--pf-v5-global--spacer--md);
}

.ct-cards-grid {
  --ct-grid-columns: 2;
  --pf-v5-l-gallery--GridTemplateColumns: repeat(var(--ct-grid-columns), 1fr);

  > .pf-v5-c-card:not(.ct-card-info) {
    // Extend all non-info cards to be full width;
    // let ct-card-info fit 1 column of the grid
    grid-column: 1 / -1;
  }

  @media screen and (max-width: $pf-v5-global--breakpoint--lg) {
    // Shrink to 1 column when space is constrained
    --ct-grid-columns: 1;
  }
}

// Remove redundant padding from embedded toolbars (handled by header)
// Toolbars in card headers are not a common scenario so no need to upstream this
.ct-card.pf-v5-c-card .pf-v5-c-toolbar,
.ct-card.pf-v5-c-card .pf-v5-c-toolbar__content {
  padding: 0;
}