From bfbc23e33a540f5d4a1e1a9f10efb05e93cf4fb3 Mon Sep 17 00:00:00 2001 From: Thibaud Colas Date: Sun, 14 May 2017 19:55:19 +0300 Subject: [PATCH] Move all explorer-related styles to the same file --- client/src/components/Explorer/Explorer.scss | 31 + .../scss/components/_explorer.scss | 929 ------------------ .../scss/components/_main-nav.scss | 32 - .../static_src/wagtailadmin/scss/core.scss | 7 +- 4 files changed, 32 insertions(+), 967 deletions(-) delete mode 100644 wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_explorer.scss diff --git a/client/src/components/Explorer/Explorer.scss b/client/src/components/Explorer/Explorer.scss index 0ff0aa7f44..1c5e2628b6 100644 --- a/client/src/components/Explorer/Explorer.scss +++ b/client/src/components/Explorer/Explorer.scss @@ -6,6 +6,37 @@ $c-explorer-easing: cubic-bezier(0.075, 0.820, 0.165, 1.000); @import 'ExplorerItem'; +.explorer { + width: 100%; + position: relative; + top: 0; + left: 0; + font-size: 1em; + z-index: 500; + + @include medium { + width: 485px; + position: fixed; + top: 0; + left: $menu-width; + + &:before { + display: none; + } + + &:after { + content: ''; + width: calc(100% - 2px); + height: 100%; + position: absolute; + top: 0; + right: 0; + z-index: -1; + box-shadow: 0 0 2px rgba(255, 255, 255, 0.9); + } + } +} + .c-explorer, .c-explorer * { box-sizing: border-box; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_explorer.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_explorer.scss deleted file mode 100644 index 5f72471188..0000000000 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_explorer.scss +++ /dev/null @@ -1,929 +0,0 @@ -// min z-index: 500; -// max z-index: unknown; - -// TODO Clean-up unused code in the new version of the explorer -$explorer-z-index: 500; - -.explorer { - width: 100%; - position: relative; - top: 0; - left: 0; - - ul { - background: $color-grey-1; - padding: 0; - margin: 0; - list-style: none; - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - } - - li { - position: relative; - border-top: 1px solid $color-grey-1-1; - - &:first-child { - border-top: 0; - } - } - - .children { - position: absolute; - z-index: $explorer-z-index + 1; - right: 0; - top: 0; - width: 4em; - text-align: center; - height: 100%; - color: $color-white; - background-color: $color-grey-1; - cursor: pointer; - border-left: 1px solid rgba(255, 255, 255, 0.2); - - &:before { - padding: 0.55em 0; - display: block; - width: 100%; - text-align: center; - font-size: 1.7em; - } - - &:hover { - background: $color-teal-dark; - } - } - - .dl-subviewopen > .children, - .dl-subview > .children { - display: none; - } - - .dl-menu { - position: relative; - width: 100%; - opacity: 0; - pointer-events: none; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; - - &.dl-menuopen { - opacity: 1; - pointer-events: auto; - } - } - - // Hide the inner submenus - li .dl-submenu { - display: none; - } - - // When a submenu is openend, we will hide all li siblings. - // For that we give a class to the parent menu called 'dl-subview'. - // We also hide the submenu link. - // The opened submenu will get the class 'dl-subviewopen'. - // All this is done for any sub-level being entered. - - .dl-menu.dl-subview li, - .dl-menu.dl-subview li.dl-subviewopen > a, - .dl-menu.dl-subview li.dl-subview > a { - display: none; - } - - .dl-menu.dl-subview li.dl-subview, - .dl-menu.dl-subview li.dl-subview .dl-submenu, - .dl-menu.dl-subview li.dl-subviewopen, - .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu, - .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li { - display: block; - } - - // Dynamically added submenu outside of the menu context - > .dl-submenu { - position: absolute; - width: 100%; - top: 0; - left: 0; - } -} - - -// Animation classes for moving out and in - -.dl-menu.dl-animate-out-1 { - -webkit-animation: MenuAnimOut1 0.4s; - -moz-animation: MenuAnimOut1 0.4s; - animation: MenuAnimOut1 0.4s; -} - -.dl-menu.dl-animate-out-2 { - -webkit-animation: MenuAnimOut2 0.3s ease-in-out; - -moz-animation: MenuAnimOut2 0.3s ease-in-out; - animation: MenuAnimOut2 0.3s ease-in-out; -} - -.dl-menu.dl-animate-out-3 { - -webkit-animation: MenuAnimOut3 0.4s ease; - -moz-animation: MenuAnimOut3 0.4s ease; - animation: MenuAnimOut3 0.4s ease; -} - -.dl-menu.dl-animate-out-4 { - -webkit-animation: MenuAnimOut4 0.4s ease; - -moz-animation: MenuAnimOut4 0.4s ease; - animation: MenuAnimOut4 0.4s ease; -} - -.dl-menu.dl-animate-out-5 { - -webkit-animation: MenuAnimOut5 0.4s ease; - -moz-animation: MenuAnimOut5 0.4s ease; - animation: MenuAnimOut5 0.4s ease; -} - -@-webkit-keyframes MenuAnimOut1 { - 50% { - -webkit-transform: translateZ(-250px) rotateY(30deg); - } - - 75% { - -webkit-transform: translateZ(-372.5px) rotateY(15deg); - opacity: .5; - } - - 100% { - -webkit-transform: translateZ(-500px) rotateY(0deg); - opacity: 0; - } -} - -@-webkit-keyframes MenuAnimOut2 { - 100% { - -webkit-transform: translateX(-100%); - opacity: 0; - } -} - -@-webkit-keyframes MenuAnimOut3 { - 100% { - -webkit-transform: translateZ(300px); - opacity: 0; - } -} - -@-webkit-keyframes MenuAnimOut4 { - 100% { - -webkit-transform: translateZ(-300px); - opacity: 0; - } -} - -@-webkit-keyframes MenuAnimOut5 { - 100% { - -webkit-transform: translateY(40%); - opacity: 0; - } -} - -@-moz-keyframes MenuAnimOut1 { - 50% { - -moz-transform: translateZ(-250px) rotateY(30deg); - } - - 75% { - -moz-transform: translateZ(-372.5px) rotateY(15deg); - opacity: .5; - } - - 100% { - -moz-transform: translateZ(-500px) rotateY(0deg); - opacity: 0; - } -} - -@-moz-keyframes MenuAnimOut2 { - 100% { - -moz-transform: translateX(-100%); - opacity: 0; - } -} - -@-moz-keyframes MenuAnimOut3 { - 100% { - -moz-transform: translateZ(300px); - opacity: 0; - } -} - -@-moz-keyframes MenuAnimOut4 { - 100% { - -moz-transform: translateZ(-300px); - opacity: 0; - } -} - -@-moz-keyframes MenuAnimOut5 { - 100% { - -moz-transform: translateY(40%); - opacity: 0; - } -} - -@keyframes MenuAnimOut1 { - 50% { - transform: translateZ(-250px) rotateY(30deg); - } - - 75% { - transform: translateZ(-372.5px) rotateY(15deg); - opacity: .5; - } - - 100% { - transform: translateZ(-500px) rotateY(0deg); - opacity: 0; - } -} - -@keyframes MenuAnimOut2 { - 100% { - transform: translateX(-100%); - opacity: 0; - } -} - -@keyframes MenuAnimOut3 { - 100% { - transform: translateZ(300px); - opacity: 0; - } -} - -@keyframes MenuAnimOut4 { - 100% { - transform: translateZ(-300px); - opacity: 0; - } -} - -@keyframes MenuAnimOut5 { - 100% { - transform: translateY(40%); - opacity: 0; - } -} - -.dl-menu.dl-animate-in-1 { - -webkit-animation: MenuAnimIn1 0.3s; - -moz-animation: MenuAnimIn1 0.3s; - animation: MenuAnimIn1 0.3s; -} - -.dl-menu.dl-animate-in-2 { - -webkit-animation: MenuAnimIn2 0.3s ease-in-out; - -moz-animation: MenuAnimIn2 0.3s ease-in-out; - animation: MenuAnimIn2 0.3s ease-in-out; -} - -.dl-menu.dl-animate-in-3 { - -webkit-animation: MenuAnimIn3 0.4s ease; - -moz-animation: MenuAnimIn3 0.4s ease; - animation: MenuAnimIn3 0.4s ease; -} - -.dl-menu.dl-animate-in-4 { - -webkit-animation: MenuAnimIn4 0.4s ease; - -moz-animation: MenuAnimIn4 0.4s ease; - animation: MenuAnimIn4 0.4s ease; -} - -.dl-menu.dl-animate-in-5 { - -webkit-animation: MenuAnimIn5 0.4s ease; - -moz-animation: MenuAnimIn5 0.4s ease; - animation: MenuAnimIn5 0.4s ease; -} - -@-webkit-keyframes MenuAnimIn1 { - 0% { - -webkit-transform: translateZ(-500px) rotateY(0deg); - opacity: 0; - } - - 20% { - -webkit-transform: translateZ(-250px) rotateY(30deg); - opacity: 0.5; - } - - 100% { - -webkit-transform: translateZ(0) rotateY(0deg); - opacity: 1; - } -} - -@-webkit-keyframes MenuAnimIn2 { - 0% { - -webkit-transform: translateX(-100%); - opacity: 0; - } - - 100% { - -webkit-transform: translateX(0); - opacity: 1; - } -} - -@-webkit-keyframes MenuAnimIn3 { - 0% { - -webkit-transform: translateZ(300px); - opacity: 0; - } - - 100% { - -webkit-transform: translateZ(0); - opacity: 1; - } -} - -@-webkit-keyframes MenuAnimIn4 { - 0% { - -webkit-transform: translateZ(-300px); - opacity: 0; - } - - 100% { - -webkit-transform: translateZ(0); - opacity: 1; - } -} - -@-webkit-keyframes MenuAnimIn5 { - 0% { - -webkit-transform: translateY(40%); - opacity: 0; - } - - 100% { - -webkit-transform: translateY(0); - opacity: 1; - } -} - -@-moz-keyframes MenuAnimIn1 { - 0% { - -moz-transform: translateZ(-500px) rotateY(0deg); - opacity: 0; - } - - 20% { - -moz-transform: translateZ(-250px) rotateY(30deg); - opacity: 0.5; - } - - 100% { - -moz-transform: translateZ(0) rotateY(0deg); - opacity: 1; - } -} - -@-moz-keyframes MenuAnimIn2 { - 0% { - -moz-transform: translateX(-100%); - opacity: 0; - } - - 100% { - -moz-transform: translateX(0); - opacity: 1; - } -} - -@-moz-keyframes MenuAnimIn3 { - 0% { - -moz-transform: translateZ(300px); - opacity: 0; - } - - 100% { - -moz-transform: translateZ(0); - opacity: 1; - } -} - -@-moz-keyframes MenuAnimIn4 { - 0% { - -moz-transform: translateZ(-300px); - opacity: 0; - } - - 100% { - -moz-transform: translateZ(0); - opacity: 1; - } -} - -@-moz-keyframes MenuAnimIn5 { - 0% { - -moz-transform: translateY(40%); - opacity: 0; - } - - 100% { - -moz-transform: translateY(0); - opacity: 1; - } -} - -@keyframes MenuAnimIn1 { - 0% { - transform: translateZ(-500px) rotateY(0deg); - opacity: 0; - } - - 20% { - transform: translateZ(-250px) rotateY(30deg); - opacity: 0.5; - } - - 100% { - transform: translateZ(0) rotateY(0deg); - opacity: 1; - } -} - -@keyframes MenuAnimIn2 { - 0% { - transform: translateX(-100%); - opacity: 0; - } - - 100% { - transform: translateX(0); - opacity: 1; - } -} - -@keyframes MenuAnimIn3 { - 0% { - transform: translateZ(300px); - opacity: 0; - } - - 100% { - transform: translateZ(0); - opacity: 1; - } -} - -@keyframes MenuAnimIn4 { - 0% { - transform: translateZ(-300px); - opacity: 0; - } - - 100% { - transform: translateZ(0); - opacity: 1; - } -} - -@keyframes MenuAnimIn5 { - 0% { - transform: translateY(40%); - opacity: 0; - } - - 100% { - transform: translateY(0); - opacity: 1; - } -} - -.explorer > .dl-submenu.dl-animate-in-1 { - -webkit-animation: SubMenuAnimIn1 0.4s ease; - -moz-animation: SubMenuAnimIn1 0.4s ease; - animation: SubMenuAnimIn1 0.4s ease; -} - -.explorer > .dl-submenu.dl-animate-in-2 { - -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out; - -moz-animation: SubMenuAnimIn2 0.3s ease-in-out; - animation: SubMenuAnimIn2 0.3s ease-in-out; -} - -.explorer > .dl-submenu.dl-animate-in-3 { - -webkit-animation: SubMenuAnimIn3 0.4s ease; - -moz-animation: SubMenuAnimIn3 0.4s ease; - animation: SubMenuAnimIn3 0.4s ease; -} - -.explorer > .dl-submenu.dl-animate-in-4 { - -webkit-animation: SubMenuAnimIn4 0.4s ease; - -moz-animation: SubMenuAnimIn4 0.4s ease; - animation: SubMenuAnimIn4 0.4s ease; -} - -.explorer > .dl-submenu.dl-animate-in-5 { - -webkit-animation: SubMenuAnimIn5 0.4s ease; - -moz-animation: SubMenuAnimIn5 0.4s ease; - animation: SubMenuAnimIn5 0.4s ease; -} - -@-webkit-keyframes SubMenuAnimIn1 { - 0% { - -webkit-transform: translateX(50%); - opacity: 0; - } - - 100% { - -webkit-transform: translateX(0); - opacity: 1; - } -} - -@-webkit-keyframes SubMenuAnimIn2 { - 0% { - -webkit-transform: translateX(100%); - opacity: 0; - } - - 100% { - -webkit-transform: translateX(0); - opacity: 1; - } -} - -@-webkit-keyframes SubMenuAnimIn3 { - 0% { - -webkit-transform: translateZ(-300px); - opacity: 0; - } - - 100% { - -webkit-transform: translateZ(0); - opacity: 1; - } -} - -@-webkit-keyframes SubMenuAnimIn4 { - 0% { - -webkit-transform: translateZ(300px); - opacity: 0; - } - - 100% { - -webkit-transform: translateZ(0); - opacity: 1; - } -} - -@-webkit-keyframes SubMenuAnimIn5 { - 0% { - -webkit-transform: translateZ(-200px); - opacity: 0; - } - - 100% { - -webkit-transform: translateZ(0); - opacity: 1; - } -} - -@-moz-keyframes SubMenuAnimIn1 { - 0% { - -moz-transform: translateX(50%); - opacity: 0; - } - - 100% { - -moz-transform: translateX(0); - opacity: 1; - } -} - -@-moz-keyframes SubMenuAnimIn2 { - 0% { - -moz-transform: translateX(100%); - opacity: 0; - } - - 100% { - -moz-transform: translateX(0); - opacity: 1; - } -} - -@-moz-keyframes SubMenuAnimIn3 { - 0% { - -moz-transform: translateZ(-300px); - opacity: 0; - } - - 100% { - -moz-transform: translateZ(0); - opacity: 1; - } -} - -@-moz-keyframes SubMenuAnimIn4 { - 0% { - -moz-transform: translateZ(300px); - opacity: 0; - } - - 100% { - -moz-transform: translateZ(0); - opacity: 1; - } -} - -@-moz-keyframes SubMenuAnimIn5 { - 0% { - -moz-transform: translateZ(-200px); - opacity: 0; - } - - 100% { - -moz-transform: translateZ(0); - opacity: 1; - } -} - -@keyframes SubMenuAnimIn1 { - 0% { - transform: translateX(50%); - opacity: 0; - } - - 100% { - transform: translateX(0); - opacity: 1; - } -} - -@keyframes SubMenuAnimIn2 { - 0% { - transform: translateX(100%); - opacity: 0; - } - - 100% { - transform: translateX(0); - opacity: 1; - } -} - -@keyframes SubMenuAnimIn3 { - 0% { - transform: translateZ(-300px); - opacity: 0; - } - - 100% { - transform: translateZ(0); - opacity: 1; - } -} - -@keyframes SubMenuAnimIn4 { - 0% { - transform: translateZ(300px); - opacity: 0; - } - - 100% { - transform: translateZ(0); - opacity: 1; - } -} - -@keyframes SubMenuAnimIn5 { - 0% { - transform: translateZ(-200px); - opacity: 0; - } - - 100% { - transform: translateZ(0); - opacity: 1; - } -} - -.explorer > .dl-submenu.dl-animate-out-1 { - -webkit-animation: SubMenuAnimOut1 0.4s ease; - -moz-animation: SubMenuAnimOut1 0.4s ease; - animation: SubMenuAnimOut1 0.4s ease; -} - -.explorer > .dl-submenu.dl-animate-out-2 { - -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out; - -moz-animation: SubMenuAnimOut2 0.3s ease-in-out; - animation: SubMenuAnimOut2 0.3s ease-in-out; -} - -.explorer > .dl-submenu.dl-animate-out-3 { - -webkit-animation: SubMenuAnimOut3 0.4s ease; - -moz-animation: SubMenuAnimOut3 0.4s ease; - animation: SubMenuAnimOut3 0.4s ease; -} - -.explorer > .dl-submenu.dl-animate-out-4 { - -webkit-animation: SubMenuAnimOut4 0.4s ease; - -moz-animation: SubMenuAnimOut4 0.4s ease; - animation: SubMenuAnimOut4 0.4s ease; -} - -.explorer > .dl-submenu.dl-animate-out-5 { - -webkit-animation: SubMenuAnimOut5 0.4s ease; - -moz-animation: SubMenuAnimOut5 0.4s ease; - animation: SubMenuAnimOut5 0.4s ease; -} - -@-webkit-keyframes SubMenuAnimOut1 { - 0% { - -webkit-transform: translateX(0%); - opacity: 1; - } - - 100% { - -webkit-transform: translateX(50%); - opacity: 0; - } -} - -@-webkit-keyframes SubMenuAnimOut2 { - 0% { - -webkit-transform: translateX(0%); - opacity: 1; - } - - 100% { - -webkit-transform: translateX(100%); - opacity: 0; - } -} - -@-webkit-keyframes SubMenuAnimOut3 { - 0% { - -webkit-transform: translateZ(0); - opacity: 1; - } - - 100% { - -webkit-transform: translateZ(-300px); - opacity: 0; - } -} - -@-webkit-keyframes SubMenuAnimOut4 { - 0% { - -webkit-transform: translateZ(0); - opacity: 1; - } - - 100% { - -webkit-transform: translateZ(300px); - opacity: 0; - } -} - -@-webkit-keyframes SubMenuAnimOut5 { - 0% { - -webkit-transform: translateZ(0); - opacity: 1; - } - - 100% { - -webkit-transform: translateZ(-200px); - opacity: 0; - } -} - -@-moz-keyframes SubMenuAnimOut1 { - 0% { - -moz-transform: translateX(0%); - opacity: 1; - } - - 100% { - -moz-transform: translateX(50%); - opacity: 0; - } -} - -@-moz-keyframes SubMenuAnimOut2 { - 0% { - -moz-transform: translateX(0%); - opacity: 1; - } - - 100% { - -moz-transform: translateX(100%); - opacity: 0; - } -} - -@-moz-keyframes SubMenuAnimOut3 { - 0% { - -moz-transform: translateZ(0); - opacity: 1; - } - - 100% { - -moz-transform: translateZ(-300px); - opacity: 0; - } -} - -@-moz-keyframes SubMenuAnimOut4 { - 0% { - -moz-transform: translateZ(0); - opacity: 1; - } - - 100% { - -moz-transform: translateZ(300px); - opacity: 0; - } -} - -@-moz-keyframes SubMenuAnimOut5 { - 0% { - -moz-transform: translateZ(0); - opacity: 1; - } - - 100% { - -moz-transform: translateZ(-200px); - opacity: 0; - } -} - -@keyframes SubMenuAnimOut1 { - 0% { - transform: translateX(0%); - opacity: 1; - } - - 100% { - transform: translateX(50%); - opacity: 0; - } -} - -@keyframes SubMenuAnimOut2 { - 0% { - transform: translateX(0%); - opacity: 1; - } - - 100% { - transform: translateX(100%); - opacity: 0; - } -} - -@keyframes SubMenuAnimOut3 { - 0% { - transform: translateZ(0); - opacity: 1; - } - - 100% { - transform: translateZ(-300px); - opacity: 0; - } -} - -@keyframes SubMenuAnimOut4 { - 0% { - transform: translateZ(0); - opacity: 1; - } - - 100% { - transform: translateZ(300px); - opacity: 0; - } -} - -@keyframes SubMenuAnimOut5 { - 0% { - transform: translateZ(0); - opacity: 1; - } - - 100% { - transform: translateZ(-200px); - opacity: 0; - } -} - -// Transitions -.children { - @include transition(all 0.2s linear); -} - -.dl-menu.dl-menu-toggle { - @include transition(all 0.3s ease); -} diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_main-nav.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_main-nav.scss index 3c90aa4597..5a4be7e53b 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_main-nav.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_main-nav.scss @@ -153,12 +153,6 @@ $footer-submenu: $submenu-color; } } -.explorer { - // position: absolute; - // margin-top: 70px; - font-size: 1em; -} - .nav-search { position: relative; padding: 0; @@ -415,17 +409,6 @@ body.explorer-open { } } - .explorer { - width: 485px; - position: fixed; - top: 0; - left: $menu-width; - } - - .dl-menu { - position: absolute; - } - body.nav-open { .content-wrapper { position: relative; @@ -448,21 +431,6 @@ body.explorer-open { width: $menu-width; } - .explorer:before { - display: none; - } - - .explorer:after { - content: ''; - width: calc(100% - 2px); - height: 100%; - position: absolute; - top: 0; - right: 0; - z-index: -1; - box-shadow: 0 0 2px rgba(255, 255, 255, 0.9); - } - .nav-main { display: block; } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss index d0bdfc2a6b..af9db1e5aa 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss @@ -2,7 +2,6 @@ @import 'wagtailadmin/scss/mixins'; @import 'wagtailadmin/scss/grid'; -@import 'wagtailadmin/scss/components/explorer'; @import 'wagtailadmin/scss/components/icons'; @import 'wagtailadmin/scss/components/typography'; @import 'wagtailadmin/scss/components/tabs'; @@ -495,12 +494,8 @@ footer, } } - .explorer { - z-index: $explorer-z-index; - } - .nav-submenu { - z-index: $explorer-z-index; + z-index: 500; } // Allows overspill of messages banner onto left menu, but also explorer