@patternfly/react-styles 3.7.3 → 3.7.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.
- package/CHANGELOG.md +40 -0
- package/css/components/DataToolbar/data-toolbar.css +19 -1
- package/css/components/DataToolbar/data-toolbar.d.ts +4 -2
- package/css/components/DataToolbar/data-toolbar.js +4 -2
- package/css/components/Divider/divider.css +118 -4
- package/css/components/Divider/divider.d.ts +45 -1
- package/css/components/Divider/divider.js +45 -1
- package/css/components/Drawer/drawer.css +322 -70
- package/css/components/Drawer/drawer.d.ts +23 -5
- package/css/components/Drawer/drawer.js +24 -6
- package/css/components/FileUpload/file-upload.css +54 -47
- package/css/components/FileUpload/file-upload.d.ts +4 -4
- package/css/components/FileUpload/file-upload.js +4 -4
- package/css/components/Login/login.css +1 -3
- package/css/components/Nav/nav.css +4 -3
- package/css/components/OverflowMenu/overflow-menu.css +12 -0
- package/css/components/OverflowMenu/overflow-menu.d.ts +2 -0
- package/css/components/OverflowMenu/overflow-menu.js +3 -1
- package/css/components/Page/page.css +4 -14
- package/css/components/Page/page.d.ts +0 -2
- package/css/components/Page/page.js +0 -2
- package/package.json +3 -3
@@ -1,70 +1,77 @@
|
|
1
1
|
.pf-c-file-upload {
|
2
|
-
--pf-c-file-upload--m-
|
3
|
-
--pf-c-file-upload--m-
|
4
|
-
--pf-c-file-upload--m-
|
5
|
-
--pf-c-file-upload--m-
|
6
|
-
--pf-c-file-upload--m-
|
7
|
-
--pf-c-file-upload--m-
|
8
|
-
--pf-c-file-upload--m-drag-hover--
|
9
|
-
--pf-c-file-upload--m-drag-hover--BorderColor: var(--pf-global--primary-color--100);
|
2
|
+
--pf-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
|
3
|
+
--pf-c-file-upload--m-loading__file-details--before--Left: var(--pf-global--BorderWidth--sm);
|
4
|
+
--pf-c-file-upload--m-loading__file-details--before--Right: var(--pf-global--BorderWidth--sm);
|
5
|
+
--pf-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-global--BorderWidth--sm);
|
6
|
+
--pf-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
|
7
|
+
--pf-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-global--primary-color--100);
|
8
|
+
--pf-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-global--ZIndex--xs);
|
10
9
|
--pf-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-global--primary-color--100);
|
11
10
|
--pf-c-file-upload--m-drag-hover--after--Opacity: .1;
|
12
|
-
--pf-c-file-
|
13
|
-
--pf-c-file-
|
14
|
-
--pf-c-file-
|
15
|
-
--pf-c-file-
|
16
|
-
--pf-c-file-
|
17
|
-
--pf-c-file-
|
18
|
-
--pf-c-file-
|
19
|
-
--pf-c-file-
|
20
|
-
--pf-c-file-upload--c-button--m-control--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
|
11
|
+
--pf-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-global--spacer--3xl) * 2);
|
12
|
+
--pf-c-file-upload__file-select__c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
|
13
|
+
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderTopColor: var(--pf-global--BorderColor--300);
|
14
|
+
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderRightColor: var(--pf-global--BorderColor--300);
|
15
|
+
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderBottomColor: var(--pf-global--BorderColor--200);
|
16
|
+
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderLeftColor: var(--pf-global--BorderColor--300);
|
17
|
+
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderWidth: var(--pf-global--BorderWidth--sm);
|
18
|
+
--pf-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
|
21
19
|
--pf-c-file-upload__message--MarginTop: var(--pf-global--spacer--xs);
|
22
20
|
--pf-c-file-upload__message--FontSize: var(--pf-global--FontSize--sm);
|
23
21
|
--pf-c-file-upload__message--Color: var(--pf-global--Color--100);
|
24
22
|
--pf-c-file-upload__message--m-error--Color: var(--pf-global--danger-color--100);
|
23
|
+
position: relative;
|
25
24
|
display: flex;
|
26
25
|
flex-direction: column; }
|
27
|
-
.pf-c-file-upload
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
26
|
+
.pf-c-file-upload.pf-m-drag-hover::before {
|
27
|
+
position: absolute;
|
28
|
+
top: 0;
|
29
|
+
right: 0;
|
30
|
+
bottom: 0;
|
31
|
+
left: 0;
|
32
|
+
z-index: var(--pf-c-file-upload--m-drag-hover--before--ZIndex);
|
33
|
+
content: "";
|
34
|
+
border: var(--pf-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-c-file-upload--m-drag-hover--before--BorderColor); }
|
35
|
+
.pf-c-file-upload.pf-m-drag-hover::after {
|
36
|
+
position: absolute;
|
37
|
+
top: 0;
|
38
|
+
right: 0;
|
39
|
+
bottom: 0;
|
40
|
+
left: 0;
|
41
|
+
content: "";
|
42
|
+
background-color: var(--pf-c-file-upload--m-drag-hover--after--BackgroundColor);
|
43
|
+
opacity: var(--pf-c-file-upload--m-drag-hover--after--Opacity); }
|
44
|
+
.pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details {
|
45
|
+
position: relative; }
|
46
|
+
.pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details::before {
|
33
47
|
position: absolute;
|
34
48
|
top: 0;
|
35
|
-
right:
|
36
|
-
bottom:
|
37
|
-
left:
|
49
|
+
right: var(--pf-c-file-upload--m-loading__file-details--before--Left);
|
50
|
+
bottom: var(--pf-c-file-upload--m-loading__file-details--before--Left);
|
51
|
+
left: var(--pf-c-file-upload--m-loading__file-details--before--Left);
|
38
52
|
content: "";
|
39
|
-
background-color: var(--pf-c-file-upload--m-
|
40
|
-
opacity: var(--pf-c-file-upload--m-drag-hover--after--Opacity); }
|
41
|
-
.pf-c-file-upload.pf-m-loading .pf-c-file-upload__textarea {
|
42
|
-
background-color: var(--pf-c-file-upload--m-loading__textarea--BackgroundColor);
|
43
|
-
border: var(--pf-c-file-upload--m-loading__textarea--BorderWidth) solid;
|
44
|
-
border-color: var(--pf-c-file-upload--m-loading__textarea--BorderTopColor) var(--pf-c-file-upload--m-loading__textarea--BorderRightColor) var(--pf-c-file-upload--m-loading__textarea--BorderBottomColor) var(--pf-c-file-upload--m-loading__textarea--BorderLeftColor); }
|
45
|
-
.pf-c-file-upload.pf-m-loading .pf-c-file-upload__textarea .pf-c-form-control {
|
46
|
-
opacity: 0; }
|
53
|
+
background-color: var(--pf-c-file-upload--m-loading__file-details--before--BackgroundColor); }
|
47
54
|
|
48
|
-
.pf-c-file-
|
49
|
-
outline-offset: var(--pf-c-file-
|
50
|
-
.pf-c-file-
|
55
|
+
.pf-c-file-upload__file-select .pf-c-button.pf-m-control {
|
56
|
+
outline-offset: var(--pf-c-file-upload__file-select__c-button--m-control--OutlineOffset); }
|
57
|
+
.pf-c-file-upload__file-select .pf-c-button.pf-m-control:disabled, .pf-c-file-upload__file-select .pf-c-button.pf-m-control.pf-m-disabled {
|
51
58
|
color: initial;
|
52
|
-
background-color: var(--pf-c-file-
|
53
|
-
.pf-c-file-
|
59
|
+
background-color: var(--pf-c-file-upload__file-select__c-button--m-control--disabled--BackgroundColor); }
|
60
|
+
.pf-c-file-upload__file-select .pf-c-button.pf-m-control:disabled::after, .pf-c-file-upload__file-select .pf-c-button.pf-m-control.pf-m-disabled::after {
|
54
61
|
content: "";
|
55
|
-
border: var(--pf-c-file-
|
56
|
-
border-color: var(--pf-c-file-
|
62
|
+
border: var(--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderWidth) solid;
|
63
|
+
border-color: var(--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderTopColor) var(--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderRightColor) var(--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderBottomColor) var(--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderLeftColor);
|
57
64
|
border-radius: initial; }
|
58
65
|
|
59
|
-
.pf-c-file-
|
66
|
+
.pf-c-file-upload__file-details {
|
60
67
|
position: relative;
|
61
|
-
display: flex;
|
62
|
-
|
63
|
-
.pf-c-file-upload__textarea .pf-c-form-control {
|
68
|
+
display: flex; }
|
69
|
+
.pf-c-file-upload__file-details .pf-c-form-control {
|
64
70
|
flex: 1 1 auto;
|
65
|
-
min-height: var(--pf-c-file-
|
71
|
+
min-height: var(--pf-c-file-upload__file-details__c-form-control--MinHeight);
|
72
|
+
border-top: 0; }
|
66
73
|
|
67
|
-
.pf-c-file-
|
74
|
+
.pf-c-file-upload__file-details-spinner {
|
68
75
|
position: absolute;
|
69
76
|
top: 50%;
|
70
77
|
left: 50%;
|
@@ -1,11 +1,11 @@
|
|
1
1
|
import './file-upload.css';
|
2
2
|
declare const _default: {
|
3
3
|
fileUpload: string;
|
4
|
-
|
5
|
-
|
6
|
-
formControl: string;
|
4
|
+
fileUploadFileDetails: string;
|
5
|
+
fileUploadFileSelect: string;
|
7
6
|
button: string;
|
8
|
-
|
7
|
+
formControl: string;
|
8
|
+
fileUploadFileDetailsSpinner: string;
|
9
9
|
fileUploadMessage: string;
|
10
10
|
modifiers: {
|
11
11
|
'dragHover': string;
|
@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
require("./file-upload.css");
|
4
4
|
exports.default = {
|
5
5
|
fileUpload: 'pf-c-file-upload',
|
6
|
-
|
7
|
-
|
8
|
-
formControl: 'pf-c-form-control',
|
6
|
+
fileUploadFileDetails: 'pf-c-file-upload__file-details',
|
7
|
+
fileUploadFileSelect: 'pf-c-file-upload__file-select',
|
9
8
|
button: 'pf-c-button',
|
10
|
-
|
9
|
+
formControl: 'pf-c-form-control',
|
10
|
+
fileUploadFileDetailsSpinner: 'pf-c-file-upload__file-details-spinner',
|
11
11
|
fileUploadMessage: 'pf-c-file-upload__message',
|
12
12
|
modifiers: {
|
13
13
|
'dragHover': 'pf-m-drag-hover',
|
@@ -29,7 +29,7 @@
|
|
29
29
|
.pf-c-login {
|
30
30
|
--pf-c-login--PaddingTop: var(--pf-global--spacer--lg);
|
31
31
|
--pf-c-login--PaddingBottom: var(--pf-global--spacer--lg);
|
32
|
-
--pf-c-login--xl--BackgroundImage:
|
32
|
+
--pf-c-login--xl--BackgroundImage: none;
|
33
33
|
--pf-c-login__container--xl--GridColumnGap: var(--pf-global--spacer--3xl);
|
34
34
|
--pf-c-login__container--MaxWidth: 31.25rem;
|
35
35
|
--pf-c-login__container--xl--MaxWidth: none;
|
@@ -112,14 +112,12 @@
|
|
112
112
|
--pf-c-login__footer--c-list--PaddingTop: var(--pf-c-login__footer--c-list--xl--PaddingTop); } }
|
113
113
|
@media (min-width: 1200px) {
|
114
114
|
.pf-c-login {
|
115
|
-
justify-content: flex-start;
|
116
115
|
background-image: var(--pf-c-login--xl--BackgroundImage); } }
|
117
116
|
@media (min-width: 576px) {
|
118
117
|
.pf-c-login {
|
119
118
|
align-items: center; } }
|
120
119
|
|
121
120
|
.pf-c-login__container {
|
122
|
-
width: 100%;
|
123
121
|
max-width: var(--pf-c-login__container--MaxWidth); }
|
124
122
|
@media (min-width: 1200px) {
|
125
123
|
.pf-c-login__container {
|
@@ -177,9 +177,10 @@
|
|
177
177
|
display: block;
|
178
178
|
visibility: visible; }
|
179
179
|
.pf-c-nav .pf-c-divider {
|
180
|
+
padding-left: var(--pf-c-nav__c-divider--MarginLeft);
|
180
181
|
margin-top: var(--pf-c-nav__c-divider--MarginTop);
|
181
182
|
margin-bottom: var(--pf-c-nav__c-divider--MarginBottom);
|
182
|
-
margin-left:
|
183
|
+
margin-left: 0; }
|
183
184
|
.pf-c-nav.pf-m-dark {
|
184
185
|
--pf-c-nav__list-link--PaddingTop: var(--pf-c-nav--m-dark__list-link--PaddingTop);
|
185
186
|
--pf-c-nav__list-link--PaddingBottom: var(--pf-c-nav--m-dark__list-link--PaddingBottom);
|
@@ -207,13 +208,13 @@
|
|
207
208
|
--pf-c-nav__subnav--MarginTop: var(--pf-c-nav--m-dark__subnav--MarginTop);
|
208
209
|
--pf-c-nav__list-link--after--Width: var(--pf-c-nav--m-dark__list-link--after--Width); }
|
209
210
|
.pf-c-nav.pf-m-dark .pf-c-divider {
|
210
|
-
|
211
|
+
--pf-c-divider--after--BackgroundColor: var(--pf-c-nav--m-dark__c-divider--BackgroundColor); }
|
211
212
|
.pf-c-nav.pf-m-dark .pf-c-nav__item.pf-m-current {
|
212
213
|
--pf-c-nav__simple-list-link--Color: var(--pf-c-nav--m-dark__item--m-current__simple-list-link--Color);
|
213
214
|
--pf-c-nav__list-link--Color: var(--pf-c-nav--m-dark__item--m-current__list-link--Color);
|
214
215
|
--pf-c-nav__separator--BackgroundColor: var(--pf-c-nav--m-dark__item--m-current__separator--BackgroundColor); }
|
215
216
|
.pf-c-nav.pf-m-dark .pf-c-nav__item.pf-m-current .pf-c-divider {
|
216
|
-
|
217
|
+
--pf-c-divider--after--BackgroundColor: var(--pf-c-nav--m-dark__item--m-current__c-divider--BackgroundColor); }
|
217
218
|
.pf-c-nav.pf-m-dark .pf-c-nav__item.pf-m-expanded {
|
218
219
|
padding-bottom: var(--pf-c-nav--m-dark__item--m-expanded--PaddingBottom); }
|
219
220
|
.pf-c-nav.pf-m-dark .pf-c-nav__item.pf-m-expanded > .pf-c-nav__link {
|
@@ -3,6 +3,7 @@
|
|
3
3
|
--pf-c-overflow-menu--spacer: var(--pf-global--spacer--sm);
|
4
4
|
--pf-c-overflow-menu__group--spacer: var(--pf-c-overflow-menu--spacer--base);
|
5
5
|
--pf-c-overflow-menu__item--spacer: var(--pf-c-overflow-menu--spacer--base);
|
6
|
+
--pf-c-overflow-menu--c-divider--m-vertical--spacer: var(--pf-c-overflow-menu--spacer--base);
|
6
7
|
--pf-c-overflow-menu__group--m-button-group--spacer: var(--pf-c-overflow-menu--spacer--base);
|
7
8
|
--pf-c-overflow-menu__group--m-button-group--space-items: var(--pf-global--spacer--sm);
|
8
9
|
--pf-c-overflow-menu__group--m-icon-button-group--spacer: var(--pf-c-overflow-menu--spacer--base);
|
@@ -40,3 +41,14 @@
|
|
40
41
|
.pf-c-overflow-menu__group:last-child,
|
41
42
|
.pf-c-overflow-menu__item:last-child {
|
42
43
|
--pf-c-overflow-menu--spacer: 0; }
|
44
|
+
|
45
|
+
.pf-c-overflow-menu > .pf-c-divider,
|
46
|
+
.pf-c-overflow-menu__group > .pf-c-divider {
|
47
|
+
--pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu--c-divider--m-vertical--spacer); }
|
48
|
+
|
49
|
+
.pf-c-overflow-menu > .pf-c-divider.pf-m-vertical,
|
50
|
+
.pf-c-overflow-menu__group > .pf-c-divider.pf-m-vertical {
|
51
|
+
margin-right: var(--pf-c-overflow-menu--spacer); }
|
52
|
+
.pf-c-overflow-menu > .pf-c-divider.pf-m-vertical:last-child,
|
53
|
+
.pf-c-overflow-menu__group > .pf-c-divider.pf-m-vertical:last-child {
|
54
|
+
--pf-c-overflow-menu--spacer: 0; }
|
@@ -5,9 +5,11 @@ declare const _default: {
|
|
5
5
|
overflowMenuGroup: string;
|
6
6
|
overflowMenuItem: string;
|
7
7
|
overflowMenuControl: string;
|
8
|
+
divider: string;
|
8
9
|
modifiers: {
|
9
10
|
'buttonGroup': string;
|
10
11
|
'iconButtonGroup': string;
|
12
|
+
'vertical': string;
|
11
13
|
};
|
12
14
|
};
|
13
15
|
export default _default;
|
@@ -7,8 +7,10 @@ exports.default = {
|
|
7
7
|
overflowMenuGroup: 'pf-c-overflow-menu__group',
|
8
8
|
overflowMenuItem: 'pf-c-overflow-menu__item',
|
9
9
|
overflowMenuControl: 'pf-c-overflow-menu__control',
|
10
|
+
divider: 'pf-c-divider',
|
10
11
|
modifiers: {
|
11
12
|
'buttonGroup': 'pf-m-button-group',
|
12
|
-
'iconButtonGroup': 'pf-m-icon-button-group'
|
13
|
+
'iconButtonGroup': 'pf-m-icon-button-group',
|
14
|
+
'vertical': 'pf-m-vertical'
|
13
15
|
}
|
14
16
|
};
|
@@ -343,7 +343,7 @@
|
|
343
343
|
padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
|
344
344
|
background-color: var(--pf-c-page__main-section--BackgroundColor); }
|
345
345
|
.pf-c-page__main-section:last-of-type, .pf-c-page__main-section:only-child, .pf-c-page__main-section.pf-m-fill {
|
346
|
-
flex: 1
|
346
|
+
flex: 1; }
|
347
347
|
.pf-c-page__main-section.pf-m-no-fill {
|
348
348
|
flex: 0 0 auto; }
|
349
349
|
.pf-c-page__main-section.pf-m-light {
|
@@ -367,17 +367,7 @@
|
|
367
367
|
flex: 1 0 0;
|
368
368
|
border-top: var(--pf-c-page__main-wizard--BorderTopWidth) solid var(--pf-c-page__main-wizard--BorderTopColor); }
|
369
369
|
|
370
|
-
.pf-c-page__drawer
|
371
|
-
|
372
|
-
|
373
|
-
.pf-c-page__drawer > .pf-c-drawer > .pf-c-drawer__content {
|
374
|
-
display: flex;
|
375
|
-
flex-direction: column; }
|
376
|
-
|
377
|
-
.pf-c-page__drawer > .pf-c-drawer > .pf-c-drawer__content > .pf-c-drawer__content-body {
|
378
|
-
display: flex;
|
379
|
-
flex: 1 0; }
|
380
|
-
.pf-c-page__drawer > .pf-c-drawer > .pf-c-drawer__content > .pf-c-drawer__content-body .pf-c-page__main {
|
381
|
-
--pf-c-page__main--ZIndex: auto;
|
382
|
-
grid-area: auto;
|
370
|
+
.pf-c-page__drawer {
|
371
|
+
grid-area: main; }
|
372
|
+
.pf-c-page__drawer > .pf-c-drawer {
|
383
373
|
flex: 1 0 auto; }
|
@@ -26,8 +26,6 @@ exports.default = {
|
|
26
26
|
pageMainBreadcrumb: 'pf-c-page__main-breadcrumb',
|
27
27
|
pageMainWizard: 'pf-c-page__main-wizard',
|
28
28
|
drawer: 'pf-c-drawer',
|
29
|
-
drawerContent: 'pf-c-drawer__content',
|
30
|
-
drawerContentBody: 'pf-c-drawer__content-body',
|
31
29
|
modifiers: {
|
32
30
|
'dark': 'pf-m-dark',
|
33
31
|
'icons': 'pf-m-icons',
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@patternfly/react-styles",
|
3
|
-
"version": "3.7.
|
3
|
+
"version": "3.7.8",
|
4
4
|
"main": "dist/js/index.js",
|
5
5
|
"module": "dist/esm/index.js",
|
6
6
|
"types": "dist/js/index.d.ts",
|
@@ -42,7 +42,7 @@
|
|
42
42
|
"@babel/plugin-transform-typescript": "^7.0.0",
|
43
43
|
"@babel/preset-env": "^7.0.0",
|
44
44
|
"@babel/preset-react": "^7.0.0",
|
45
|
-
"@patternfly/patternfly": "2.
|
45
|
+
"@patternfly/patternfly": "2.68.3",
|
46
46
|
"babel-plugin-transform-es2015-modules-umd": "^6.24.1",
|
47
47
|
"babel-plugin-typescript-to-proptypes": "^0.17.1",
|
48
48
|
"fbjs-scripts": "^0.8.3",
|
@@ -54,5 +54,5 @@
|
|
54
54
|
"typescript": "3.4.5"
|
55
55
|
},
|
56
56
|
"license": "MIT",
|
57
|
-
"gitHead": "
|
57
|
+
"gitHead": "14f9e799350f309410f15996af36435af0c7e6c4"
|
58
58
|
}
|