kopia lustrzana https://github.com/wagtail/wagtail
Move all explorer-related styles to the same file
Thibaud Colas
Matt Westcott
rodzic
7870067c2c
commit
bfbc23e33a
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue