@wordpress/base-styles 4.13.0 → 4.15.0
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 +8 -0
- package/_colors.scss +2 -0
- package/_default-custom-properties.scss +2 -0
- package/_long-content-fade.scss +61 -0
- package/_mixins.scss +35 -64
- package/_variables.scss +4 -4
- package/_z-index.scss +9 -15
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
+
## 4.15.0 (2023-01-02)
|
|
6
|
+
|
|
7
|
+
## 4.14.0 (2022-12-14)
|
|
8
|
+
|
|
9
|
+
### Enhancements
|
|
10
|
+
|
|
11
|
+
- Lighten the border color in the `input-style__neutral` mixin ([#46252](https://github.com/WordPress/gutenberg/pull/46252)).
|
|
12
|
+
|
|
5
13
|
## 4.13.0 (2022-11-16)
|
|
6
14
|
|
|
7
15
|
## 4.12.0 (2022-11-02)
|
package/_colors.scss
CHANGED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Long content fade mixin
|
|
3
|
+
*
|
|
4
|
+
* Creates a fading overlay to signify that the content is longer
|
|
5
|
+
* than the space allows.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
@mixin long-content-fade($direction: right, $size: 20%, $color: #fff, $edge: 0, $z-index: false) {
|
|
9
|
+
content: "";
|
|
10
|
+
display: block;
|
|
11
|
+
position: absolute;
|
|
12
|
+
-webkit-touch-callout: none;
|
|
13
|
+
-webkit-user-select: none;
|
|
14
|
+
-khtml-user-select: none;
|
|
15
|
+
-moz-user-select: none;
|
|
16
|
+
-ms-user-select: none;
|
|
17
|
+
user-select: none;
|
|
18
|
+
pointer-events: none;
|
|
19
|
+
|
|
20
|
+
@if $z-index {
|
|
21
|
+
z-index: $z-index;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@if $direction == "bottom" {
|
|
25
|
+
background: linear-gradient(to top, transparent, $color 90%);
|
|
26
|
+
left: $edge;
|
|
27
|
+
right: $edge;
|
|
28
|
+
top: $edge;
|
|
29
|
+
bottom: calc(100% - $size);
|
|
30
|
+
width: auto;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@if $direction == "top" {
|
|
34
|
+
background: linear-gradient(to bottom, transparent, $color 90%);
|
|
35
|
+
top: calc(100% - $size);
|
|
36
|
+
left: $edge;
|
|
37
|
+
right: $edge;
|
|
38
|
+
bottom: $edge;
|
|
39
|
+
width: auto;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@if $direction == "left" {
|
|
43
|
+
background: linear-gradient(to left, transparent, $color 90%);
|
|
44
|
+
top: $edge;
|
|
45
|
+
left: $edge;
|
|
46
|
+
bottom: $edge;
|
|
47
|
+
right: auto;
|
|
48
|
+
width: $size;
|
|
49
|
+
height: auto;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@if $direction == "right" {
|
|
53
|
+
background: linear-gradient(to right, transparent, $color 90%);
|
|
54
|
+
top: $edge;
|
|
55
|
+
bottom: $edge;
|
|
56
|
+
right: $edge;
|
|
57
|
+
left: auto;
|
|
58
|
+
width: $size;
|
|
59
|
+
height: auto;
|
|
60
|
+
}
|
|
61
|
+
}
|
package/_mixins.scss
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@import "./functions";
|
|
2
|
+
@import "./long-content-fade";
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* Breakpoint mixins
|
|
@@ -52,69 +53,6 @@
|
|
|
52
53
|
}
|
|
53
54
|
}
|
|
54
55
|
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* Long content fade mixin
|
|
58
|
-
*
|
|
59
|
-
* Creates a fading overlay to signify that the content is longer
|
|
60
|
-
* than the space allows.
|
|
61
|
-
*/
|
|
62
|
-
|
|
63
|
-
@mixin long-content-fade($direction: right, $size: 20%, $color: #fff, $edge: 0, $z-index: false) {
|
|
64
|
-
content: "";
|
|
65
|
-
display: block;
|
|
66
|
-
position: absolute;
|
|
67
|
-
-webkit-touch-callout: none;
|
|
68
|
-
-webkit-user-select: none;
|
|
69
|
-
-khtml-user-select: none;
|
|
70
|
-
-moz-user-select: none;
|
|
71
|
-
-ms-user-select: none;
|
|
72
|
-
user-select: none;
|
|
73
|
-
pointer-events: none;
|
|
74
|
-
|
|
75
|
-
@if $z-index {
|
|
76
|
-
z-index: $z-index;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
@if $direction == "bottom" {
|
|
80
|
-
background: linear-gradient(to top, transparent, $color 90%);
|
|
81
|
-
left: $edge;
|
|
82
|
-
right: $edge;
|
|
83
|
-
top: $edge;
|
|
84
|
-
bottom: calc(100% - $size);
|
|
85
|
-
width: auto;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
@if $direction == "top" {
|
|
89
|
-
background: linear-gradient(to bottom, transparent, $color 90%);
|
|
90
|
-
top: calc(100% - $size);
|
|
91
|
-
left: $edge;
|
|
92
|
-
right: $edge;
|
|
93
|
-
bottom: $edge;
|
|
94
|
-
width: auto;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
@if $direction == "left" {
|
|
98
|
-
background: linear-gradient(to left, transparent, $color 90%);
|
|
99
|
-
top: $edge;
|
|
100
|
-
left: $edge;
|
|
101
|
-
bottom: $edge;
|
|
102
|
-
right: auto;
|
|
103
|
-
width: $size;
|
|
104
|
-
height: auto;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
@if $direction == "right" {
|
|
108
|
-
background: linear-gradient(to right, transparent, $color 90%);
|
|
109
|
-
top: $edge;
|
|
110
|
-
bottom: $edge;
|
|
111
|
-
right: $edge;
|
|
112
|
-
left: auto;
|
|
113
|
-
width: $size;
|
|
114
|
-
height: auto;
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
|
|
118
56
|
/**
|
|
119
57
|
* Focus styles.
|
|
120
58
|
*/
|
|
@@ -131,7 +69,7 @@
|
|
|
131
69
|
box-shadow: 0 0 0 transparent;
|
|
132
70
|
transition: box-shadow 0.1s linear;
|
|
133
71
|
border-radius: $radius-block-ui;
|
|
134
|
-
border: $border-width solid $gray-
|
|
72
|
+
border: $border-width solid $gray-600;
|
|
135
73
|
@include reduce-motion("transition");
|
|
136
74
|
}
|
|
137
75
|
|
|
@@ -550,3 +488,36 @@
|
|
|
550
488
|
}
|
|
551
489
|
/* stylelint-enable function-comma-space-after */
|
|
552
490
|
}
|
|
491
|
+
|
|
492
|
+
@mixin custom-scrollbars-on-hover() {
|
|
493
|
+
visibility: hidden;
|
|
494
|
+
|
|
495
|
+
$handle-color: #757575;
|
|
496
|
+
$track-color: #1e1e1e;
|
|
497
|
+
|
|
498
|
+
// WebKit
|
|
499
|
+
&::-webkit-scrollbar {
|
|
500
|
+
width: 12px;
|
|
501
|
+
height: 12px;
|
|
502
|
+
}
|
|
503
|
+
&::-webkit-scrollbar-track {
|
|
504
|
+
background-color: $track-color;
|
|
505
|
+
}
|
|
506
|
+
&::-webkit-scrollbar-thumb {
|
|
507
|
+
background-color: $handle-color;
|
|
508
|
+
border-radius: 8px;
|
|
509
|
+
border: 3px solid transparent;
|
|
510
|
+
background-clip: padding-box;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
// Firefox 109+ and Chrome 111+
|
|
514
|
+
scrollbar-color: $handle-color $track-color; // Syntax, "dark", "light", or "#handle-color #track-color"
|
|
515
|
+
scrollbar-width: thin;
|
|
516
|
+
scrollbar-gutter: stable;
|
|
517
|
+
|
|
518
|
+
&:hover,
|
|
519
|
+
&:focus,
|
|
520
|
+
& > * {
|
|
521
|
+
visibility: visible;
|
|
522
|
+
}
|
|
523
|
+
}
|
package/_variables.scss
CHANGED
|
@@ -49,7 +49,7 @@ $button-size: 36px;
|
|
|
49
49
|
$button-size-small: 24px;
|
|
50
50
|
$header-height: 60px;
|
|
51
51
|
$panel-header-height: $grid-unit-60;
|
|
52
|
-
$nav-sidebar-width:
|
|
52
|
+
$nav-sidebar-width: 360px;
|
|
53
53
|
$admin-bar-height: 32px;
|
|
54
54
|
$admin-bar-height-big: 46px;
|
|
55
55
|
$admin-sidebar-width: 160px;
|
|
@@ -57,15 +57,15 @@ $admin-sidebar-width-big: 190px;
|
|
|
57
57
|
$admin-sidebar-width-collapsed: 36px;
|
|
58
58
|
$modal-min-width: 360px;
|
|
59
59
|
$spinner-size: 16px;
|
|
60
|
+
$canvas-padding: $grid-unit-30;
|
|
60
61
|
|
|
61
62
|
|
|
62
63
|
/**
|
|
63
64
|
* Shadows.
|
|
64
65
|
*/
|
|
65
66
|
|
|
66
|
-
$shadow-popover: 0 2px
|
|
67
|
-
$shadow-modal: 0
|
|
68
|
-
|
|
67
|
+
$shadow-popover: 0 0.7px 1px rgba($black, 0.1), 0 1.2px 1.7px -0.2px rgba($black, 0.1), 0 2.3px 3.3px -0.5px rgba($black, 0.1);
|
|
68
|
+
$shadow-modal: 0 0.7px 1px rgba($black, 0.15), 0 2.7px 3.8px -0.2px rgba($black, 0.15), 0 5.5px 7.8px -0.3px rgba($black, 0.15), 0.1px 11.5px 16.4px -0.5px rgba($black, 0.15);
|
|
69
69
|
|
|
70
70
|
/**
|
|
71
71
|
* Editor widths.
|
package/_z-index.scss
CHANGED
|
@@ -7,15 +7,13 @@ $z-layers: (
|
|
|
7
7
|
".block-editor-block-switcher__arrow": 1,
|
|
8
8
|
".block-editor-block-list__block {core/image aligned wide or fullwide}": 20,
|
|
9
9
|
".block-library-classic__toolbar": 31, // When scrolled to top this toolbar needs to sit over block-editor-block-toolbar
|
|
10
|
-
".block-editor-block-list__layout .reusable-block-indicator": 1,
|
|
11
10
|
".block-editor-block-list__block-selection-button": 22,
|
|
12
11
|
".components-form-toggle__input": 1,
|
|
13
12
|
".edit-post-text-editor__toolbar": 1,
|
|
14
13
|
".edit-site-code-editor__toolbar": 1,
|
|
15
|
-
".edit-post-sidebar__panel-tab.is-active": 1,
|
|
16
14
|
|
|
17
15
|
// These next three share a stacking context
|
|
18
|
-
".block-library-template-part__selection-search":
|
|
16
|
+
".block-library-template-part__selection-search": 2, // higher sticky element
|
|
19
17
|
|
|
20
18
|
// These next two share a stacking context
|
|
21
19
|
".interface-complementary-area .components-panel" : 0, // lower scrolling content
|
|
@@ -109,14 +107,6 @@ $z-layers: (
|
|
|
109
107
|
// Show interface skeleton footer above interface skeleton drawer
|
|
110
108
|
".interface-interface-skeleton__footer": 90,
|
|
111
109
|
|
|
112
|
-
// Show the navigation toggle above the skeleton header
|
|
113
|
-
".edit-site-navigation-toggle": 31,
|
|
114
|
-
// Show the navigation link above the skeleton header
|
|
115
|
-
".edit-site-navigation-link": 31,
|
|
116
|
-
|
|
117
|
-
// Show the FSE template previews above the editor and any open block toolbars
|
|
118
|
-
".edit-site-navigation-panel__preview": 32,
|
|
119
|
-
|
|
120
110
|
// Above the block list and the header.
|
|
121
111
|
".block-editor-block-popover": 31,
|
|
122
112
|
|
|
@@ -152,10 +142,10 @@ $z-layers: (
|
|
|
152
142
|
".skip-to-selected-block": 100000,
|
|
153
143
|
".interface-interface-skeleton__actions": 100000,
|
|
154
144
|
|
|
155
|
-
//
|
|
156
|
-
".
|
|
145
|
+
// The focus styles of the region navigation containers should be above their content.
|
|
146
|
+
".is-focusing-regions {region} :focus::after": 1000000,
|
|
157
147
|
|
|
158
|
-
// Show tooltips above
|
|
148
|
+
// Show tooltips above wp-admin menus, submenus, and sidebar:
|
|
159
149
|
".components-tooltip": 1000002,
|
|
160
150
|
|
|
161
151
|
// Keep template popover underneath 'Create custom template' modal overlay.
|
|
@@ -188,7 +178,11 @@ $z-layers: (
|
|
|
188
178
|
// Appear under the topbar.
|
|
189
179
|
".customize-widgets__block-toolbar": 7,
|
|
190
180
|
|
|
191
|
-
|
|
181
|
+
// Site editor layout
|
|
182
|
+
".edit-site-layout__hub": 3,
|
|
183
|
+
".edit-site-layout__header": 2,
|
|
184
|
+
".edit-site-layout__canvas-container": 2,
|
|
185
|
+
".edit-site-layout__sidebar": 1,
|
|
192
186
|
);
|
|
193
187
|
|
|
194
188
|
@function z-index( $key ) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/base-styles",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.15.0",
|
|
4
4
|
"description": "Base SCSS utilities and variables for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
"publishConfig": {
|
|
24
24
|
"access": "public"
|
|
25
25
|
},
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "200bee7b06b15f6fa655e25b6ab69cbd6b49a357"
|
|
27
27
|
}
|