From 7fcf45f83e1508cb00801b1419aeb6e476c6c71f Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Thu, 10 Apr 2025 12:00:27 +0200 Subject: [PATCH 1/3] [icos] Add delay to menu appearance --- themes/cp_theme_d8/css/menu.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/themes/cp_theme_d8/css/menu.css b/themes/cp_theme_d8/css/menu.css index 6f5bae5..44afcb5 100644 --- a/themes/cp_theme_d8/css/menu.css +++ b/themes/cp_theme_d8/css/menu.css @@ -143,7 +143,7 @@ #cp_theme_d8_menu li { list-style: none; cursor: pointer; - transition: background-color 0.1s ease-out; + transition: background-color 0.4s ease-out; } #cp_theme_d8_menu li li { @@ -192,7 +192,7 @@ padding: 1rem 1rem 1.5rem; background-color: var(--icos-grey-90); z-index: 10; - transition: visibility 0.1s ease-out; + transition: visibility 0s 0.45s; margin: 0 auto; box-shadow: 0px 1px 1px #333; flex-wrap: wrap; @@ -200,6 +200,8 @@ #cp_theme_d8_menu .is_topnode:hover > ul { visibility: visible; + z-index: 11; + transition: visibility 0s 0.4s; } #cp_theme_d8_menu li li a { From bed6d2ed0fa79ae363a9ead2254864cf1ef2957c Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Thu, 10 Apr 2025 12:23:32 +0200 Subject: [PATCH 2/3] [icos] Allow menu expansion on focus --- themes/cp_theme_d8/css/menu.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/themes/cp_theme_d8/css/menu.css b/themes/cp_theme_d8/css/menu.css index 44afcb5..c30f018 100644 --- a/themes/cp_theme_d8/css/menu.css +++ b/themes/cp_theme_d8/css/menu.css @@ -170,7 +170,8 @@ transition: border 0.1s ease-out; } - #cp_theme_d8_menu li:hover { + #cp_theme_d8_menu li:hover, + #cp_theme_d8_menu li:has(a:focus) { background-color: var(--icos-grey-90); } @@ -198,7 +199,8 @@ flex-wrap: wrap; } - #cp_theme_d8_menu .is_topnode:hover > ul { + #cp_theme_d8_menu .is_topnode:hover > ul, + #cp_theme_d8_menu .is_topnode:has(a:focus) > ul { visibility: visible; z-index: 11; transition: visibility 0s 0.4s; From ec2b73b3392d5ddd5c524518e6c2eee6a3ecbe89 Mon Sep 17 00:00:00 2001 From: Andrew Debevec Date: Fri, 11 Apr 2025 17:16:00 +0200 Subject: [PATCH 3/3] [icos] Adding slide motion on menu hover --- themes/cp_theme_d8/css/menu.css | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/themes/cp_theme_d8/css/menu.css b/themes/cp_theme_d8/css/menu.css index c30f018..97e57d2 100644 --- a/themes/cp_theme_d8/css/menu.css +++ b/themes/cp_theme_d8/css/menu.css @@ -186,24 +186,38 @@ #cp_theme_d8_menu .is_topnode > ul { max-width: 1100px; visibility: hidden; + max-height: 0; position: absolute; left: 50px; right: 50px; justify-content: flex-start; - padding: 1rem 1rem 1.5rem; + padding: 0 1rem; background-color: var(--icos-grey-90); z-index: 10; - transition: visibility 0s 0.45s; + transition: visibility 0s 0.6s, max-height ease-out 0.3s 0.3s, padding-top 0.1s 0.4s, padding-bottom 0.1s 0.4s; /* exit hover transitions */ margin: 0 auto; box-shadow: 0px 1px 1px #333; flex-wrap: wrap; + overflow: hidden; } #cp_theme_d8_menu .is_topnode:hover > ul, #cp_theme_d8_menu .is_topnode:has(a:focus) > ul { visibility: visible; z-index: 11; - transition: visibility 0s 0.4s; + max-height: 650px; + padding: 1rem 1rem 1.5rem; + transition: visibility 0s 0.3s, max-height ease-in 0.3s 0.3s, padding-top 0.1s 0.3s, padding-bottom 0.1s 0.3s; /* enter hover transitions*/ + } + + #cp_theme_d8_menu .is_topnode ul li { + opacity: 0; + transition: opacity linear 0.2s 0.3s; + } + + #cp_theme_d8_menu .is_topnode:hover ul li { + opacity: 1; + transition: opacity linear 0.2s 0.3s; } #cp_theme_d8_menu li li a {