@wordpress/base-styles 5.7.1-next.1f6eadc42.0 → 5.8.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 +2 -0
- package/_animations.scss +40 -2
- package/_variables.scss +4 -4
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
package/_animations.scss
CHANGED
|
@@ -1,5 +1,37 @@
|
|
|
1
|
-
@mixin
|
|
2
|
-
|
|
1
|
+
@mixin keyframes($name) {
|
|
2
|
+
@keyframes #{$name} {
|
|
3
|
+
@content;
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
@mixin animation__fade-in($speed: 0.08s, $delay: 0s, $easing: linear) {
|
|
8
|
+
@include keyframes(__wp-base-styles-fade-in) {
|
|
9
|
+
from {
|
|
10
|
+
opacity: 0;
|
|
11
|
+
}
|
|
12
|
+
to {
|
|
13
|
+
opacity: 1;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
animation: __wp-base-styles-fade-in $speed $easing $delay;
|
|
19
|
+
animation-fill-mode: forwards;
|
|
20
|
+
@include reduce-motion("animation");
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@mixin animation__fade-out($speed: 0.08s, $delay: 0s, $easing: linear) {
|
|
24
|
+
@include keyframes(__wp-base-styles-fade-out) {
|
|
25
|
+
from {
|
|
26
|
+
opacity: 1;
|
|
27
|
+
}
|
|
28
|
+
to {
|
|
29
|
+
opacity: 0;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
animation: __wp-base-styles-fade-out $speed $easing $delay;
|
|
3
35
|
animation-fill-mode: forwards;
|
|
4
36
|
@include reduce-motion("animation");
|
|
5
37
|
}
|
|
@@ -8,3 +40,9 @@
|
|
|
8
40
|
transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
|
|
9
41
|
@include reduce-motion("transition");
|
|
10
42
|
}
|
|
43
|
+
|
|
44
|
+
// Deprecated
|
|
45
|
+
@mixin edit-post__fade-in-animation($speed: 0.08s, $delay: 0s) {
|
|
46
|
+
@warn "The `edit-post__fade-in-animation` mixin is deprecated. Use `animation__fade-in` instead.";
|
|
47
|
+
@include animation__fade-in($speed, $delay);
|
|
48
|
+
}
|
package/_variables.scss
CHANGED
|
@@ -55,16 +55,16 @@ $radius-round: 50%; // For circles and ovals.
|
|
|
55
55
|
*/
|
|
56
56
|
|
|
57
57
|
// For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
|
|
58
|
-
$elevation-x-small: 0
|
|
58
|
+
$elevation-x-small: 0 1px 1px rgba($black, 0.03), 0 1px 2px rgba($black, 0.02), 0 3px 3px rgba($black, 0.02), 0 4px 4px rgba($black, 0.01);
|
|
59
59
|
|
|
60
60
|
// For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
|
|
61
|
-
$elevation-small: 0
|
|
61
|
+
$elevation-small: 0 1px 2px rgba($black, 0.05), 0 2px 3px rgba($black, 0.04), 0 6px 6px rgba($black, 0.03), 0 8px 8px rgba($black, 0.02);
|
|
62
62
|
|
|
63
63
|
// For components that offer additional actions. Example: Menus, Command Palette
|
|
64
|
-
$elevation-medium: 0
|
|
64
|
+
$elevation-medium: 0 2px 3px rgba($black, 0.05), 0 4px 5px rgba($black, 0.04), 0 12px 12px rgba($black, 0.03), 0 16px 16px rgba($black, 0.02);
|
|
65
65
|
|
|
66
66
|
// For components that confirm decisions or handle necessary interruptions. Example: Modals.
|
|
67
|
-
$elevation-large: 0
|
|
67
|
+
$elevation-large: 0 5px 15px rgba($black, 0.08), 0 15px 27px rgba($black, 0.07), 0 30px 36px rgba($black, 0.04), 0 50px 43px rgba($black, 0.02);
|
|
68
68
|
|
|
69
69
|
/**
|
|
70
70
|
* Dimensions.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/base-styles",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.8.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",
|
|
@@ -27,5 +27,5 @@
|
|
|
27
27
|
"publishConfig": {
|
|
28
28
|
"access": "public"
|
|
29
29
|
},
|
|
30
|
-
"gitHead": "
|
|
30
|
+
"gitHead": "cecf5e14d317aa67407f77a7e5c8b6a43016bd42"
|
|
31
31
|
}
|