From 0bb12c33b4b43577e134edca87d0dd85512cad57 Mon Sep 17 00:00:00 2001 From: Manuel Cillero Date: Sun, 22 Oct 2023 10:46:02 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Compatibility=20with=20modern=20?= =?UTF-8?q?browsers=20is=20assumed?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pagetop/static/base/css/menu.css | 105 ++++++------------------------- 1 file changed, 18 insertions(+), 87 deletions(-) diff --git a/pagetop/static/base/css/menu.css b/pagetop/static/base/css/menu.css index f5dcbd86..e573068b 100644 --- a/pagetop/static/base/css/menu.css +++ b/pagetop/static/base/css/menu.css @@ -16,7 +16,6 @@ .pt-menu__wrapper button { cursor: pointer; border: none; - outline: none; background: none; text-decoration: none; } @@ -43,10 +42,7 @@ } .pt-menu__nav li > a { border: none; - outline: none; - -webkit-transition: color 0.3s ease-in-out; - -o-transition: color 0.3s ease-in-out; - transition: color 0.3s ease-in-out; + transition: color 0.3s ease-in-out; } .pt-menu__nav li:hover > a { color: var(--pt-menu--color-highlight); @@ -68,11 +64,8 @@ z-index: 500; opacity: 0; visibility: hidden; - -webkit-box-shadow: 0 4px 6px -1px var(--pt-menu--color-border), 0 2px 4px -1px var(--pt-menu--color-shadow); - box-shadow: 0 4px 6px -1px var(--pt-menu--color-border), 0 2px 4px -1px var(--pt-menu--color-shadow); - -webkit-transition: all 0.5s ease-in-out; - -o-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; + box-shadow: 0 4px 6px -1px var(--pt-menu--color-border), 0 2px 4px -1px var(--pt-menu--color-shadow); + transition: all 0.5s ease-in-out; } .pt-menu__nav li.pt-menu__children:hover > .pt-menu__subs { @@ -105,17 +98,12 @@ .pt-menu__nav li .pt-menu__mega { left: 50%; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); + transform: translateX(-50%); } .pt-menu__nav li .pt-menu__groups { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; + flex-wrap: nowrap; } .pt-menu__header, @@ -135,8 +123,6 @@ border: none; outline: none; background: none; - display: -webkit-box; - display: -ms-flexbox; display: flex; flex-direction: column; justify-content: center; @@ -158,17 +144,11 @@ z-index: 1099; overflow: hidden; background: var(--pt-menu--color-bg); - -webkit-transform: translate(-100%); - -ms-transform: translate(-100%); - transform: translate(-100%); - -webkit-transition: all 0.5s ease-in-out; - -o-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; + transform: translate(-100%); + transition: all 0.5s ease-in-out; } .pt-menu__main .pt-menu__nav.active { - -webkit-transform: translate(0%); - -ms-transform: translate(0%); - transform: translate(0%); + transform: translate(0%); } .pt-menu__nav li { @@ -191,9 +171,7 @@ top: var(--pt-menu--line-padding); right: var(--pt-menu--line-padding); font-size: 1.25rem; - -webkit-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); + transform: rotate(-90deg); } .pt-menu__nav li .pt-menu__subs { @@ -211,11 +189,8 @@ opacity: 1; overflow-y: auto; visibility: visible; - -webkit-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); - -webkit-box-shadow: none; - box-shadow: none; + transform: translateX(0%); + box-shadow: none; } .pt-menu__nav li .pt-menu__subs.active { display: block; @@ -234,17 +209,9 @@ } .pt-menu__nav .pt-menu__header { - position: relative; - position: -webkit-sticky; position: sticky; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; + align-items: center; justify-content: space-between; top: 0; height: var(--pt-menu--item-height); @@ -266,12 +233,8 @@ line-height: var(--pt-menu--item-height); color: var(--pt-color); cursor: pointer; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + align-items: center; justify-content: center; } .pt-menu__nav .pt-menu__header .pt-menu__close { @@ -305,9 +268,7 @@ opacity: 0; visibility: hidden; background: rgba(0, 0, 0, 0.55); - -webkit-transition: all 0.5s ease-in-out; - -o-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; } .pt-menu__overlay.active { opacity: 1; @@ -317,54 +278,24 @@ /* ANIMATIONS */ -@-webkit-keyframes slideLeft { - 0% { - opacity: 0; - -webkit-transform: translateX(100%); - transform: translateX(100%); - } - 100% { - opacity: 1; - -webkit-transform: translateX(0%); - transform: translateX(0%); - } -} - @keyframes slideLeft { 0% { opacity: 0; - -webkit-transform: translateX(100%); - transform: translateX(100%); + transform: translateX(100%); } 100% { opacity: 1; - -webkit-transform: translateX(0%); - transform: translateX(0%); - } -} - -@-webkit-keyframes slideRight { - 0% { - opacity: 1; - -webkit-transform: translateX(0%); - transform: translateX(0%); - } - 100% { - opacity: 0; - -webkit-transform: translateX(100%); - transform: translateX(100%); + transform: translateX(0%); } } @keyframes slideRight { 0% { opacity: 1; - -webkit-transform: translateX(0%); - transform: translateX(0%); + transform: translateX(0%); } 100% { opacity: 0; - -webkit-transform: translateX(100%); - transform: translateX(100%); + transform: translateX(100%); } }