Design Experiments - Version 1.1

Version Description

  • Adds the Animated Menu Hovers experiment.
Download this release

Release Info

Developer kjellr
Plugin Icon 128x128 Design Experiments
Version 1.1
Comparing to
See all releases

Code changes from version 1.0 to 1.1

Files changed (4) hide show
  1. css/animated-menu-hovers.css +37 -0
  2. index.php +1 -1
  3. readme.txt +3 -0
  4. sass/animated-menu-hovers.scss +35 -0
css/animated-menu-hovers.css ADDED
@@ -0,0 +1,37 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /*
2
+ Title: Animated Menu Hovers
3
+ Description: Trying Gutenberg's menu flyout animations in WP-Admin.
4
+ PR: https://github.com/WordPress/design-experiments/pull/13
5
+ */
6
+ /* Keyframes */
7
+ @keyframes appear-animation {
8
+ from {
9
+ transform: translateY(-2em) scaleY(0) scaleX(0);
10
+ }
11
+ to {
12
+ transform: translateY(0%) scaleY(1) scaleX(1);
13
+ }
14
+ }
15
+
16
+ /* Animated Elements */
17
+ #adminmenu a.wp-not-current-submenu.menu-top:focus + .wp-submenu,
18
+ .js #adminmenu .opensub .wp-submenu,
19
+ .js #adminmenu .sub-open,
20
+ .menupop.hover .ab-sub-wrapper {
21
+ animation: appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
22
+ animation-fill-mode: forwards;
23
+ transform-origin: top left;
24
+ }
25
+
26
+ @media (prefers-reduced-motion: reduce) {
27
+ #adminmenu a.wp-not-current-submenu.menu-top:focus + .wp-submenu,
28
+ .js #adminmenu .opensub .wp-submenu,
29
+ .js #adminmenu .sub-open,
30
+ .menupop.hover .ab-sub-wrapper {
31
+ animation-duration: 1ms;
32
+ }
33
+ }
34
+
35
+ #wp-admin-bar-my-account.menupop.hover .ab-sub-wrapper {
36
+ transform-origin: top right;
37
+ }
index.php CHANGED
@@ -4,7 +4,7 @@
4
  * Plugin Name: Design Experiments
5
  * Plugin URI: https://github.com/wordpress/design-experiments/
6
  * Description: WP-Admin design experiments from the WordPress.org Design Team
7
- * Version: 0.1
8
  * Author: The WordPress.org Design Team
9
  * Text Domain: design-experiments
10
  */
4
  * Plugin Name: Design Experiments
5
  * Plugin URI: https://github.com/wordpress/design-experiments/
6
  * Description: WP-Admin design experiments from the WordPress.org Design Team
7
+ * Version: 1.1
8
  * Author: The WordPress.org Design Team
9
  * Text Domain: design-experiments
10
  */
readme.txt CHANGED
@@ -24,6 +24,9 @@ An important disclaimer: This plugin is called experimental for a reason. It is
24
 
25
  == Changelog ==
26
 
 
 
 
27
  = 1.0 =
28
  * Initial release. Includes experiments for larger font sizes, Gutenberg-style form fields, an updated header treatment throughout WP-Admin, and a dark mode.
29
 
24
 
25
  == Changelog ==
26
 
27
+ = 1.1 =
28
+ * Adds the Animated Menu Hovers experiment.
29
+
30
  = 1.0 =
31
  * Initial release. Includes experiments for larger font sizes, Gutenberg-style form fields, an updated header treatment throughout WP-Admin, and a dark mode.
32
 
sass/animated-menu-hovers.scss ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /*
2
+ Title: Animated Menu Hovers
3
+ Description: Trying Gutenberg's menu flyout animations in WP-Admin.
4
+ PR: https://github.com/WordPress/design-experiments/pull/13
5
+ */
6
+
7
+ /* Keyframes */
8
+
9
+ @keyframes appear-animation {
10
+ from {
11
+ transform: translateY(-2em) scaleY(0) scaleX(0);
12
+ }
13
+ to {
14
+ transform: translateY(0%) scaleY(1) scaleX(1);
15
+ }
16
+ }
17
+
18
+ /* Animated Elements */
19
+
20
+ #adminmenu a.wp-not-current-submenu.menu-top:focus+.wp-submenu,
21
+ .js #adminmenu .opensub .wp-submenu,
22
+ .js #adminmenu .sub-open,
23
+ .menupop.hover .ab-sub-wrapper {
24
+ animation: appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
25
+ animation-fill-mode: forwards;
26
+ transform-origin: top left;
27
+
28
+ @media (prefers-reduced-motion: reduce) {
29
+ animation-duration: 1ms;
30
+ }
31
+ }
32
+
33
+ #wp-admin-bar-my-account.menupop.hover .ab-sub-wrapper {
34
+ transform-origin: top right;
35
+ }