@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.
@@ -1,70 +1,77 @@
1
1
  .pf-c-file-upload {
2
- --pf-c-file-upload--m-loading__textarea--BackgroundColor: var(--pf-global--BackgroundColor--100);
3
- --pf-c-file-upload--m-loading__textarea--BorderTopColor: var(--pf-global--BorderColor--300);
4
- --pf-c-file-upload--m-loading__textarea--BorderRightColor: var(--pf-global--BorderColor--300);
5
- --pf-c-file-upload--m-loading__textarea--BorderBottomColor: var(--pf-global--BorderColor--200);
6
- --pf-c-file-upload--m-loading__textarea--BorderLeftColor: var(--pf-global--BorderColor--300);
7
- --pf-c-file-upload--m-loading__textarea--BorderWidth: var(--pf-global--BorderWidth--sm);
8
- --pf-c-file-upload--m-drag-hover--BorderWidth: var(--pf-global--BorderWidth--sm);
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-upload__textarea--MinHeight: calc(var(--pf-global--spacer--3xl) * 2);
13
- --pf-c-file-upload__textarea--c-form-control--MinHeight: var(--pf-c-file-upload__textarea--MinHeight);
14
- --pf-c-file-upload--c-button--m-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
15
- --pf-c-file-upload--c-button--m-control--disabled--after--BorderTopColor: var(--pf-global--BorderColor--300);
16
- --pf-c-file-upload--c-button--m-control--disabled--after--BorderRightColor: var(--pf-global--BorderColor--300);
17
- --pf-c-file-upload--c-button--m-control--disabled--after--BorderBottomColor: var(--pf-global--BorderColor--200);
18
- --pf-c-file-upload--c-button--m-control--disabled--after--BorderLeftColor: var(--pf-global--BorderColor--300);
19
- --pf-c-file-upload--c-button--m-control--disabled--after--BorderWidth: var(--pf-global--BorderWidth--sm);
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 .pf-c-file-upload__input-group + .pf-c-file-upload__textarea > .pf-c-form-control {
28
- border-top: 0; }
29
- .pf-c-file-upload.pf-m-drag-hover {
30
- position: relative;
31
- border: var(--pf-c-file-upload--m-drag-hover--BorderWidth) solid var(--pf-c-file-upload--m-drag-hover--BorderColor); }
32
- .pf-c-file-upload.pf-m-drag-hover::after {
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: 0;
36
- bottom: 0;
37
- left: 0;
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-drag-hover--after--BackgroundColor);
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-upload__input-group .pf-c-button.pf-m-control {
49
- outline-offset: var(--pf-c-file-upload--c-button--m-control--OutlineOffset); }
50
- .pf-c-file-upload__input-group .pf-c-button.pf-m-control:disabled, .pf-c-file-upload__input-group .pf-c-button.pf-m-control.pf-m-disabled {
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-upload--c-button--m-control--disabled--BackgroundColor); }
53
- .pf-c-file-upload__input-group .pf-c-button.pf-m-control:disabled::after, .pf-c-file-upload__input-group .pf-c-button.pf-m-control.pf-m-disabled::after {
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-upload--c-button--m-control--disabled--after--BorderWidth) solid;
56
- border-color: var(--pf-c-file-upload--c-button--m-control--disabled--after--BorderTopColor) var(--pf-c-file-upload--c-button--m-control--disabled--after--BorderRightColor) var(--pf-c-file-upload--c-button--m-control--disabled--after--BorderBottomColor) var(--pf-c-file-upload--c-button--m-control--disabled--after--BorderLeftColor);
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-upload__textarea {
66
+ .pf-c-file-upload__file-details {
60
67
  position: relative;
61
- display: flex;
62
- min-height: var(--pf-c-file-upload__textarea--MinHeight); }
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-upload__textarea--c-form-control--MinHeight); }
71
+ min-height: var(--pf-c-file-upload__file-details__c-form-control--MinHeight);
72
+ border-top: 0; }
66
73
 
67
- .pf-c-file-upload__textarea-spinner {
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
- fileUploadInputGroup: string;
5
- fileUploadTextarea: string;
6
- formControl: string;
4
+ fileUploadFileDetails: string;
5
+ fileUploadFileSelect: string;
7
6
  button: string;
8
- fileUploadTextareaSpinner: string;
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
- fileUploadInputGroup: 'pf-c-file-upload__input-group',
7
- fileUploadTextarea: 'pf-c-file-upload__textarea',
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
- fileUploadTextareaSpinner: 'pf-c-file-upload__textarea-spinner',
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: linear-gradient(to right, var(--pf-global--BackgroundColor--dark-transparent-200), var(--pf-global--BackgroundColor--dark-transparent-200) calc((98px - var(--pf-c-login__container--xl--GridColumnGap)) + var(--pf-c-login__container--xl--GridColumnGap) + 272px), transparent calc((98px - var(--pf-c-login__container--xl--GridColumnGap)) + var(--pf-c-login__container--xl--GridColumnGap) + 272px));
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: var(--pf-c-nav__c-divider--MarginLeft); }
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
- background-color: var(--pf-c-nav--m-dark__c-divider--BackgroundColor); }
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
- background-color: var(--pf-c-nav--m-dark__item--m-current__c-divider--BackgroundColor); }
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 0 auto; }
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 > .pf-c-drawer {
371
- flex: 1 0 auto; }
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; }
@@ -24,8 +24,6 @@ declare const _default: {
24
24
  pageMainBreadcrumb: string;
25
25
  pageMainWizard: string;
26
26
  drawer: string;
27
- drawerContent: string;
28
- drawerContentBody: string;
29
27
  modifiers: {
30
28
  'dark': string;
31
29
  'icons': string;
@@ -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",
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.65.1",
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": "a9d2e2c03ad8cf1174ce8fa63135536003e1ef7c"
57
+ "gitHead": "14f9e799350f309410f15996af36435af0c7e6c4"
58
58
  }