@wordpress/interface 5.3.1 → 5.3.3

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.
@@ -403,13 +403,28 @@ body.is-fullscreen-mode .interface-interface-skeleton {
403
403
  bottom: auto;
404
404
  right: auto;
405
405
  left: 0;
406
- width: 280px;
407
406
  color: #1e1e1e;
407
+ background: #fff;
408
+ width: 100vw;
409
+ }
410
+ @media (min-width: 782px) {
411
+ .interface-interface-skeleton__actions {
412
+ width: 280px;
413
+ }
408
414
  }
409
415
  .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
410
- top: auto;
416
+ top: 46px;
411
417
  bottom: 0;
412
418
  }
419
+ @media (min-width: 782px) {
420
+ .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
421
+ border-right: 1px solid #ddd;
422
+ top: 32px;
423
+ }
424
+ .is-fullscreen-mode .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .interface-interface-skeleton__actions:focus-within {
425
+ top: 0;
426
+ }
427
+ }
413
428
 
414
429
  .interface-more-menu-dropdown {
415
430
  margin-right: -4px;
@@ -403,13 +403,28 @@ body.is-fullscreen-mode .interface-interface-skeleton {
403
403
  bottom: auto;
404
404
  left: auto;
405
405
  right: 0;
406
- width: 280px;
407
406
  color: #1e1e1e;
407
+ background: #fff;
408
+ width: 100vw;
409
+ }
410
+ @media (min-width: 782px) {
411
+ .interface-interface-skeleton__actions {
412
+ width: 280px;
413
+ }
408
414
  }
409
415
  .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
410
- top: auto;
416
+ top: 46px;
411
417
  bottom: 0;
412
418
  }
419
+ @media (min-width: 782px) {
420
+ .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
421
+ border-left: 1px solid #ddd;
422
+ top: 32px;
423
+ }
424
+ .is-fullscreen-mode .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .interface-interface-skeleton__actions:focus-within {
425
+ top: 0;
426
+ }
427
+ }
413
428
 
414
429
  .interface-more-menu-dropdown {
415
430
  margin-left: -4px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/interface",
3
- "version": "5.3.1",
3
+ "version": "5.3.3",
4
4
  "description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -33,16 +33,16 @@
33
33
  "dependencies": {
34
34
  "@babel/runtime": "^7.16.0",
35
35
  "@wordpress/a11y": "^3.26.1",
36
- "@wordpress/components": "^23.3.1",
37
- "@wordpress/compose": "^6.3.1",
38
- "@wordpress/data": "^8.3.1",
36
+ "@wordpress/components": "^23.3.2",
37
+ "@wordpress/compose": "^6.3.2",
38
+ "@wordpress/data": "^8.3.2",
39
39
  "@wordpress/deprecated": "^3.26.1",
40
40
  "@wordpress/element": "^5.3.1",
41
41
  "@wordpress/i18n": "^4.26.1",
42
42
  "@wordpress/icons": "^9.17.1",
43
- "@wordpress/plugins": "^5.3.1",
44
- "@wordpress/preferences": "^3.3.1",
45
- "@wordpress/viewport": "^5.3.1",
43
+ "@wordpress/plugins": "^5.3.2",
44
+ "@wordpress/preferences": "^3.3.2",
45
+ "@wordpress/viewport": "^5.3.2",
46
46
  "classnames": "^2.3.1"
47
47
  },
48
48
  "peerDependencies": {
@@ -52,5 +52,5 @@
52
52
  "publishConfig": {
53
53
  "access": "public"
54
54
  },
55
- "gitHead": "e9ff92d836928aba65dde94d9d193bc401a934d7"
55
+ "gitHead": "1bf01c01a8238ce3a681ad1e517f86033818b78d"
56
56
  }
@@ -174,12 +174,26 @@ html.interface-interface-skeleton__html-container {
174
174
  bottom: auto;
175
175
  left: auto;
176
176
  right: 0;
177
- width: $sidebar-width;
178
177
  color: $gray-900;
178
+ background: $white;
179
+ width: 100vw;
180
+
181
+ @include break-medium() {
182
+ width: $sidebar-width;
183
+ }
179
184
 
180
185
  &:focus,
181
186
  &:focus-within {
182
- top: auto;
187
+ top: $admin-bar-height-big;
188
+
189
+ @include break-medium() {
190
+ border-left: $border-width solid $gray-300;
191
+ top: $admin-bar-height;
192
+
193
+ .is-fullscreen-mode & {
194
+ top: 0;
195
+ }
196
+ }
183
197
  bottom: 0;
184
198
  }
185
199
  }