From 7fcb05eff31ab0b576c9853e06c7369fb6f9d086 Mon Sep 17 00:00:00 2001 From: Jura Khrapunov Date: Tue, 24 Dec 2024 16:23:36 -0500 Subject: [PATCH] Closes #1467 (#1469) --- docs/css/components/mega-menu.min.css | 2 +- .../Mainnavigation/MegaMenu/mega-menu.scss | 76 +++++++++---------- 2 files changed, 39 insertions(+), 39 deletions(-) diff --git a/docs/css/components/mega-menu.min.css b/docs/css/components/mega-menu.min.css index f44ca6a3d..88021f688 100644 --- a/docs/css/components/mega-menu.min.css +++ b/docs/css/components/mega-menu.min.css @@ -1 +1 @@ -.mega-nav-option{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:hsla(0,0%,97%,.9);box-shadow:0 3px 6px rgba(0,0,0,.16);box-sizing:border-box;display:none;left:50%;max-width:75.5rem;min-height:37.5rem;padding:var(--undpds-spacing-10) 0 0 var(--undpds-spacing-09);position:fixed;transform:translateX(-50%);z-index:8}.mega-nav-option.float-higher{z-index:16}.mega-nav-option.show-mega{display:block}.mega-nav-option .submenu{margin:0;padding:0}.mega-nav-option .submenu li{list-style:none;margin-block-end:0;padding-inline-end:var(--undpds-spacing-09);padding-inline-start:0}.mega-nav-option .submenu li.active a{background:var(--undpds-color-blue-600);color:var(--undpds-color-white)}.mega-nav-option .submenu li.active a .external-link-animated{box-shadow:-2px 2px 0 0 var(--undpds-color-white),-4px 0 0 -2px var(--undpds-color-white),-3px 3px 0 -1px var(--undpds-color-white)}.mega-nav-option .submenu li.active a .external-link-animated:before{background:var(--undpds-color-white)}.mega-nav-option .submenu li.active a .external-link-animated:after{border-block-start:2px solid var(--undpds-color-white);border-inline-end:2px solid var(--undpds-color-white)}.mega-nav-option .submenu li.active a:hover .external-link-animated:after{transform:translate(5px,-5px)}.mega-nav-option .submenu li.active a:hover .external-link-animated:before{transform:rotate(-45deg) translate(7px)}.mega-nav-option .submenu li:focus{outline:0}.mega-nav-option .submenu li a{background:none;border-block-end:1px solid var(--undpds-color-gray-400);display:flex;font-size:var(--undpds-spacing-05);font-weight:700;padding:var(--undpds-spacing-06);text-transform:uppercase}.mega-nav-option .submenu li a .external-link-animated{margin:2px 0 0 var(--undpds-spacing-05)}.mega-nav-option .submenu li a:hover{background:var(--undpds-color-blue-600);color:var(--undpds-color-white)}.mega-nav-option .sub-menu-content{display:none;min-height:31.25rem}.mega-nav-option .sub-menu-content .sub-sub-menu{display:flex;margin-block-start:var(--undpds-spacing-09)}.mega-nav-option .sub-menu-content .sub-sub-menu ul{margin:0;padding:0;width:50%}.mega-nav-option .sub-menu-content .sub-sub-menu ul li{line-height:0;list-style-type:none;margin-block-end:var(--undpds-spacing-06);text-transform:uppercase}.mega-nav-option .sub-menu-content h3{margin-block-end:var(--undpds-spacing-06)}.mega-nav-option .sub-menu-content .mega-image{box-sizing:border-box;padding-inline-start:var(--undpds-spacing-09)}.mega-nav-option .sub-menu-content .mega-image img{height:100%;object-fit:cover;object-position:top}.mega-nav-option .sub-menu-content.active-content{display:flex}.mega-nav-option .show-on-focus{background:url(../../images/times.svg) no-repeat 50%;border:0;color:#000;font-size:0;height:var(--undpds-spacing-08);opacity:.3;position:absolute;right:.625rem;top:.625rem;width:var(--undpds-spacing-08);z-index:9}.mega-nav-option .show-on-focus:focus,.mega-nav-option .show-on-focus:hover{opacity:1}.country-header .mega-nav-option,.global-header .mega-nav-option{animation-fill-mode:backwards}.country-header .mega-nav-option.show-mega,.global-header .mega-nav-option.show-mega{animation:circle-square-transition .3s cubic-bezier(.25,.27,.11,.99) forwards}.country-header .mega-nav-option.show-mega>div,.global-header .mega-nav-option.show-mega>div{animation:transition-opacity .3s .3s forwards}.country-header .mega-nav-option.show-mega-back,.global-header .mega-nav-option.show-mega-back{animation:circle-square-transition-back .3s cubic-bezier(.25,.27,.11,.99) forwards;box-shadow:none;display:block}.country-header .mega-nav-option.show-mega-back>div,.global-header .mega-nav-option.show-mega-back>div{animation-direction:reverse}.country-header .mega-nav-option.no-effect,.global-header .mega-nav-option.no-effect{animation:0s 0s none}.country-header .mega-nav-option.no-effect>div,.global-header .mega-nav-option.no-effect>div{animation:0s 0s none;opacity:1}.country-header .mega-nav-option>div,.global-header .mega-nav-option>div{opacity:0}[dir=rtl] .mega-nav-option{padding:var(--undpds-spacing-10) var(--undpds-spacing-09) 0 0}[dir=rtl] .mega-nav-option .submenu li{padding-left:3rem;padding-right:0}[dir=rtl] .mega-nav-option .submenu li a .external-link-animated{margin:2px var(--undpds-spacing-05) 0 0}[dir=rtl] .mega-nav-option .mega-image{box-sizing:border-box;padding-left:0;padding-right:3rem}@keyframes circle-square-transition{0%{border-radius:50%;height:3.125rem;margin-top:-4.375rem;opacity:.4;width:6.25rem}15%{border-radius:50%;height:9.375rem;margin-top:-4.375rem;opacity:.25;width:11.25rem}30%{border-radius:50%;height:37.5rem;margin-top:-20.625rem;opacity:.5;width:37.5rem}45%{border-radius:45%;height:44.0625rem;margin-top:-20.625rem;width:44.0625rem}60%{border-radius:0 0 80% 80%/0 0 70% 70%;height:52.5rem;margin-top:-20.625rem;width:56.25rem}75%{border-radius:0 0 50% 50%/0 0 20% 20%;height:56.25rem;margin-top:-20.625rem;max-width:68.5rem}to{border-radius:0;height:56.25rem;opacity:1}}@keyframes circle-square-transition-back{0%{border-radius:0;height:56.25rem;opacity:1}15%{border-radius:0 0 50% 50%/0 0 20% 20%;height:56.25rem;margin-top:-20.625rem;max-width:68.5rem}30%{border-radius:0 0 80% 80%/0 0 70% 70%;height:52.5rem;margin-top:-20.625rem;width:56.25rem}45%{border-radius:45%;height:44.0625rem;margin-top:-20.625rem;width:44.0625rem}60%{border-radius:50%;height:37.5rem;margin-top:-20.625rem;opacity:.5;width:37.5rem}75%{border-radius:50%;height:9.375rem;margin-top:-4.375rem;opacity:.25;width:11.25rem}to{border-radius:50%;height:3.125rem;margin-top:-4.375rem;opacity:.4;width:6.25rem}}@keyframes transition-opacity{0%{opacity:0}to{opacity:1}} \ No newline at end of file +.mega-nav-option{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:hsla(0,0%,97%,.9);box-shadow:0 3px 6px rgba(0,0,0,.16);box-sizing:border-box;display:none;left:50%;max-width:75.5rem;min-height:37.5rem;padding:var(--undpds-spacing-10) 0 0 var(--undpds-spacing-09);position:fixed;transform:translateX(-50%);z-index:8}.mega-nav-option.float-higher{z-index:16}.mega-nav-option.show-mega{display:block}.mega-nav-option .submenu{margin:0;padding:0}.mega-nav-option .submenu li{list-style:none;margin-block-end:0;padding-inline-end:var(--undpds-spacing-09);padding-inline-start:0}.mega-nav-option .submenu li.active a{background:var(--undpds-color-blue-600);color:var(--undpds-color-white)}.mega-nav-option .submenu li.active a .external-link-animated{box-shadow:-2px 2px 0 0 var(--undpds-color-white),-4px 0 0 -2px var(--undpds-color-white),-3px 3px 0 -1px var(--undpds-color-white)}.mega-nav-option .submenu li.active a .external-link-animated:before{background:var(--undpds-color-white)}.mega-nav-option .submenu li.active a .external-link-animated:after{border-block-start:2px solid var(--undpds-color-white);border-inline-end:2px solid var(--undpds-color-white)}.mega-nav-option .submenu li.active a:hover .external-link-animated:after{transform:translate(5px,-5px)}.mega-nav-option .submenu li.active a:hover .external-link-animated:before{transform:rotate(-45deg) translate(7px)}.mega-nav-option .submenu li:focus{outline:0}.mega-nav-option .submenu li a{background:none;border-block-end:1px solid var(--undpds-color-gray-400);display:flex;font-size:var(--undpds-spacing-05);font-weight:700;padding:var(--undpds-spacing-06);text-transform:uppercase}.mega-nav-option .submenu li a .external-link-animated{margin:2px 0 0 var(--undpds-spacing-05)}.mega-nav-option .submenu li a:hover{background:var(--undpds-color-blue-600);color:var(--undpds-color-white)}.mega-nav-option .sub-menu-content{display:none;min-height:31.25rem}.mega-nav-option .sub-menu-content .sub-sub-menu{display:flex;margin-block-start:var(--undpds-spacing-09)}.mega-nav-option .sub-menu-content .sub-sub-menu ul{margin:0;padding:0;width:50%}.mega-nav-option .sub-menu-content .sub-sub-menu ul li{line-height:0;list-style-type:none;margin-block-end:var(--undpds-spacing-06);text-transform:uppercase}.mega-nav-option .sub-menu-content h3{margin-block-end:var(--undpds-spacing-06)}.mega-nav-option .sub-menu-content .mega-image{box-sizing:border-box;padding-inline-start:var(--undpds-spacing-09)}.mega-nav-option .sub-menu-content .mega-image img{height:100%;object-fit:cover;object-position:top}.mega-nav-option .sub-menu-content.active-content{display:flex}.mega-nav-option .show-on-focus{background:url(../../images/times.svg) no-repeat 50%;border:0;color:#000;font-size:0;height:var(--undpds-spacing-08);opacity:.3;position:absolute;right:.625rem;top:.625rem;width:var(--undpds-spacing-08);z-index:9}.mega-nav-option .show-on-focus:focus,.mega-nav-option .show-on-focus:hover{opacity:1}.country-header .mega-nav-option,.global-header .mega-nav-option{animation-fill-mode:backwards}.country-header .mega-nav-option.show-mega,.global-header .mega-nav-option.show-mega{animation:circle-square-transition .3s cubic-bezier(.25,.27,.11,.99) forwards}.country-header .mega-nav-option.show-mega>div,.global-header .mega-nav-option.show-mega>div{animation:transition-opacity .3s .3s forwards}.country-header .mega-nav-option.show-mega-back,.global-header .mega-nav-option.show-mega-back{animation:circle-square-transition-back .3s cubic-bezier(.25,.27,.11,.99) forwards;box-shadow:none;display:block}.country-header .mega-nav-option.show-mega-back>div,.global-header .mega-nav-option.show-mega-back>div{animation-direction:reverse}.country-header .mega-nav-option.no-effect,.global-header .mega-nav-option.no-effect{animation:0s 0s none}.country-header .mega-nav-option.no-effect>div,.global-header .mega-nav-option.no-effect>div{animation:0s 0s none;opacity:1}.country-header .mega-nav-option>div,.global-header .mega-nav-option>div{opacity:0}[dir=rtl] .mega-nav-option{padding:var(--undpds-spacing-10) var(--undpds-spacing-09) 0 0}[dir=rtl] .mega-nav-option .submenu li{padding-left:3rem;padding-right:0}[dir=rtl] .mega-nav-option .submenu li a .external-link-animated{margin:2px var(--undpds-spacing-05) 0 0}[dir=rtl] .mega-nav-option .mega-image{box-sizing:border-box;padding-left:0;padding-right:3rem}@keyframes circle-square-transition{0%{border-radius:50%;height:50px;margin-top:-70px;opacity:.4;width:100px}15%{border-radius:50%;height:150px;margin-top:-70px;opacity:.25;width:180px}30%{border-radius:50%;height:300px;margin-top:-330px;opacity:.5;width:600px}45%{border-radius:45%;height:405px;margin-top:-330px;width:705px}60%{border-radius:0 0 80% 80%/0 0 70% 70%;height:540px;margin-top:-330px;width:900px}75%{border-radius:0 0 50% 50%/0 0 20% 20%;height:600px;margin-top:-330px;max-width:1096px}to{border-radius:0;height:600px;opacity:1}}@keyframes circle-square-transition-back{0%{border-radius:0;height:600px;opacity:1}15%{border-radius:0 0 50% 50%/0 0 20% 20%;height:600px;margin-top:-330px;max-width:1096px}30%{border-radius:0 0 80% 80%/0 0 70% 70%;height:540px;margin-top:-330px;width:900px}45%{border-radius:45%;height:405px;margin-top:-330px;width:705px}60%{border-radius:50%;height:300px;margin-top:-330px;opacity:.5;width:600px}75%{border-radius:50%;height:150px;margin-top:-70px;opacity:.25;width:180px}to{border-radius:50%;height:50px;margin-top:-70px;opacity:.4;width:100px}}@keyframes transition-opacity{0%{opacity:0}to{opacity:1}} \ No newline at end of file diff --git a/stories/Components/Navigationcomponents/Mainnavigation/MegaMenu/mega-menu.scss b/stories/Components/Navigationcomponents/Mainnavigation/MegaMenu/mega-menu.scss index d14d0b37b..4e1467f04 100644 --- a/stories/Components/Navigationcomponents/Mainnavigation/MegaMenu/mega-menu.scss +++ b/stories/Components/Navigationcomponents/Mainnavigation/MegaMenu/mega-menu.scss @@ -220,52 +220,52 @@ @keyframes circle-square-transition { 0% { border-radius: 50%; - height: $spacing-50; - margin-top: -$spacing-70; + height: 50px; + margin-top: -70px; opacity: 0.4; - width: $spacing-100; + width: 100px; } 15% { border-radius: 50%; - height: $width-150; - margin-top: -$spacing-70; + height: 150px; + margin-top: -70px; opacity: 0.25; - width: $width-180; + width: 180px; } 30% { border-radius: 50%; - height: $width-600; - margin-top: -$spacing-330; + height: 300px; + margin-top: -330px; opacity: 0.5; - width: $width-600; + width: 600px; } 45% { border-radius: 45%; - height: $width-705; - margin-top: -$spacing-330; - width: $width-705; + height: 405px; + margin-top: -330px; + width: 705px; } 60% { border-radius: 0 0 80% 80%/0 0 70% 70%; - height: $width-840; - margin-top: -$spacing-330; - width: $width-900; + height: 540px; + margin-top: -330px; + width: 900px; } 75% { border-radius: 0 0 50% 50%/0 0 20% 20%; - height: $width-900; - margin-top: -$spacing-330; - max-width: $width-1096; + height: 600px; + margin-top: -330px; + max-width: 1096px; } to { border-radius: 0; - height: $width-900; + height: 600px; opacity: 1; } } @@ -273,53 +273,53 @@ @keyframes circle-square-transition-back { 0% { border-radius: 0; - height: $width-900; + height: 600px; opacity: 1; } 15% { border-radius: 0 0 50% 50%/0 0 20% 20%; - height: $width-900; - margin-top: -$spacing-330; - max-width: $width-1096; + height: 600px; + margin-top: -330px; + max-width: 1096px; } 30% { border-radius: 0 0 80% 80%/0 0 70% 70%; - height: $width-840; - margin-top: -$spacing-330; - width: $width-900; + height: 540px; + margin-top: -330px; + width: 900px; } 45% { border-radius: 45%; - height: $width-705; - margin-top: -$spacing-330; - width: $width-705; + height: 405px; + margin-top: -330px; + width: 705px; } 60% { border-radius: 50%; - height: $width-600; - margin-top: -$spacing-330; + height: 300px; + margin-top: -330px; opacity: 0.5; - width: $width-600; + width: 600px; } 75% { border-radius: 50%; - height: $width-150; - margin-top: -$spacing-70; + height: 150px; + margin-top: -70px; opacity: 0.25; - width: $width-180; + width: 180px; } to { border-radius: 50%; - height: $spacing-50; - margin-top: -$spacing-70; + height: 50px; + margin-top: -70px; opacity: 0.4; - width: $spacing-100; + width: 100px; } }