155 lines
4.1 KiB
Plaintext
155 lines
4.1 KiB
Plaintext
/*
|
|
Copyright (c) Ascensio System SIA 2013. All rights reserved.
|
|
http://www.teamlab.com
|
|
*/
|
|
/*! Pushy - v1.1.0 - 2017-1-30
|
|
* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
|
|
* https://github.com/christophery/pushy/
|
|
* by Christopher Yee */
|
|
/* Menu Appearance */
|
|
@import "base.less";
|
|
@media screen and (max-width: 969px) {
|
|
.pushy {
|
|
position: fixed;
|
|
width: 300px;
|
|
height: 100%;
|
|
top: 0;
|
|
z-index: 999;
|
|
background: #fff;
|
|
overflow: auto;
|
|
border-right: 1px solid @helpBorderColor;
|
|
-webkit-overflow-scrolling: touch;
|
|
/* enables momentum scrolling in iOS overflow elements */
|
|
}
|
|
.pushy a {
|
|
display: block;
|
|
text-decoration: none;
|
|
outline: 0;
|
|
}
|
|
.pushy.pushy-left {
|
|
left: 0;
|
|
}
|
|
.pushy.pushy-right {
|
|
right: 0;
|
|
}
|
|
.pushy-content {
|
|
visibility: hidden;
|
|
}
|
|
/* Menu Movement */
|
|
.pushy-left {
|
|
-webkit-transform: translate3d(-300px, 0, 0);
|
|
-ms-transform: translate3d(-300px, 0, 0);
|
|
transform: translate3d(-300px, 0, 0);
|
|
}
|
|
.pushy-open-left #container, .pushy-open-left .push {
|
|
-webkit-transform: translate3d(300px, 0, 0);
|
|
-ms-transform: translate3d(300px, 0, 0);
|
|
transform: translate3d(300px, 0, 0);
|
|
}
|
|
.pushy-right {
|
|
-webkit-transform: translate3d(300px, 0, 0);
|
|
-ms-transform: translate3d(300px, 0, 0);
|
|
transform: translate3d(300px, 0, 0);
|
|
}
|
|
.pushy-open-right #container, .pushy-open-right .push {
|
|
-webkit-transform: translate3d(-300px, 0, 0);
|
|
-ms-transform: translate3d(-300px, 0, 0);
|
|
transform: translate3d(-300px, 0, 0);
|
|
}
|
|
.pushy-open-left .pushy, .pushy-open-right .pushy {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
-ms-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
.pushy-open-left .pushy-content, .pushy-open-right .pushy-content {
|
|
visibility: visible;
|
|
}
|
|
/* Menu Transitions */
|
|
#container, .pushy, .push {
|
|
transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
|
|
}
|
|
.pushy-content {
|
|
transition: visibility 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
|
|
}
|
|
/* Site Overlay */
|
|
.site-overlay {
|
|
display: none;
|
|
}
|
|
.pushy-open-left .site-overlay, .pushy-open-right .site-overlay {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 9998;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
-webkit-animation: fade 500ms;
|
|
animation: fade 500ms;
|
|
}
|
|
@keyframes fade {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes fade {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
/* Submenu Appearance */
|
|
.pushy-submenu {
|
|
/* Submenu Buttons */
|
|
/* Submenu Icon */
|
|
}
|
|
.pushy-submenu ul {
|
|
transition: max-height 0.2s ease-in-out, visibility 0.2s ease-in-out;
|
|
}
|
|
.pushy-submenu ul .pushy-link {
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
.pushy-submenu button {
|
|
width: 100%;
|
|
color: #b3b3b1;
|
|
padding: 15px 30px;
|
|
text-align: left;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
.pushy-submenu button:hover {
|
|
color: #fff;
|
|
}
|
|
.pushy-submenu > a, .pushy-submenu > button {
|
|
position: relative;
|
|
}
|
|
/* Submenu Movement */
|
|
.pushy-submenu-closed ul {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
visibility: hidden;
|
|
}
|
|
.pushy-submenu-closed .pushy-link {
|
|
opacity: 0;
|
|
}
|
|
.pushy-submenu-open {
|
|
/* Submenu Icon */
|
|
}
|
|
.pushy-submenu-open ul {
|
|
visibility: visible;
|
|
}
|
|
.pushy-submenu-open .pushy-link {
|
|
opacity: 1;
|
|
}
|
|
.pushy-submenu-open a::after, .pushy-submenu-open button::after {
|
|
-webkit-transform: translateY(-50%) rotate(90deg);
|
|
-ms-transform: translateY(-50%) rotate(90deg);
|
|
transform: translateY(-50%) rotate(90deg);
|
|
}
|
|
|
|
} |