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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
/*** PF4 overrides ***/
/* WORKAROUND: Navigation problems with Tertiary Nav widget on mobile */
/* See: https://github.com/patternfly/patternfly-design/issues/840 */
/* Helper mod to wrap pf-c-nav__tertiary */
.ct-m-nav__tertiary-wrap {
.pf-c-nav__list {
flex-wrap: wrap;
}
.pf-c-nav__scroll-button {
display: none;
}
}
/* Helper mod to center pf-c-nav__tertiary when it wraps */
.ct-m-nav__tertiary-center {
.pf-c-nav__list {
justify-content: center;
}
}
ul.pf-c-select__menu {
max-width: 20rem;
max-height: 20rem;
overflow-y: auto;
}
/* All SVGs used in PF4 have some inline style to align them
* https://github.com/patternfly/patternfly-react/issues/4767
*/
svg {
vertical-align: -0.125em;
}
// Patternfly horizontal lists should convert to vertical in small screens https://github.com/patternfly/patternfly/issues/3630
@media (min-width: 640px) {
.pf-c-description-list {
--pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
}
}
// When using horizontal ruler inside description list it's just for the spacing - don't show it
.pf-c-description-list {
// The default gap between the rows is too large
--pf-c-description-list--RowGap: 1rem;
> hr {
border-top: none;
}
}
.pf-c-modal-box.pf-m-align-top {
// We utilize custom footers in dialogs
// Make sure that the buttons always appear in the next line from the inline alerts
.pf-c-modal-box__footer {
flex-wrap: wrap;
gap: var(--pf-global--spacer--sm);
> div:not(.pf-c-button):not(.dialog-wait-ct) {
flex: 0 0 100%;
}
}
}
.pf-c-card__header {
// Allow actions to wrap if there's not enough space
// issue: https://github.com/patternfly/patternfly/issues/3713
// upstream fix (pending): https://github.com/patternfly/patternfly/pull/3714
flex-wrap: wrap;
> .pf-c-card__actions {
flex-wrap: wrap;
button:not(.pf-c-dropdown__toggle) {
margin-bottom: 0.5rem;
}
}
}
// Alignment of checks is incorrect and inconsistent across browsers
// Upstream issue: https://github.com/patternfly/patternfly/issues/3868
.pf-c-check > .pf-c-check__input {
// Set the height of the input widget to be the same as its label
--pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
// Offset by the top half of the difference between the height and the line height
--pf-c-check__input--MarginTop: calc((var(--pf-c-check__label--LineHeight) - 1) / 2 * var(--pf-c-check__input--Height));
// PF3 sets a margin which messes with PF4, so set PF4's rule again here (Cockpit-specific mix of PF3+PF4)
margin-top: var(--pf-c-check__input--MarginTop);
}
// Alignment of checks is incorrect and inconsistent across browsers
// Upstream issue: https://github.com/patternfly/patternfly/issues/3868
.pf-c-radio > .pf-c-radio__input {
// Set the height of the input widget to be the same as its label
--pf-c-radio__input--Height: var(--pf-c-radio__label--FontSize);
// Offset by the top half of the difference between the height and the line height
--pf-c-radio__input--MarginTop: calc((var(--pf-c-radio__label--LineHeight) - 1) / 2 * var(--pf-c-radio__input--Height));
// PF3 sets a margin which messes with PF4, so set PF4's rule again here (Cockpit-specific mix of PF3+PF4)
margin-top: var(--pf-c-radio__input--MarginTop);
}
// Add some spacing to nested form groups - PF4 does not support these yet
// https://github.com/patternfly/patternfly-design/issues/1012
.pf-c-form__group-control {
.pf-c-form__group, .pf-c-form__section {
padding-top: var(--pf-global--spacer--md);
}
}
|
