MinimalBible.github.io/assets/less/dl-menu.less

355 lines
6.7 KiB
Plaintext
Raw Normal View History

2013-08-23 15:06:39 -04:00
.dl-menuwrapper {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 200%;
-moz-perspective-origin: 50% 200%;
perspective-origin: 50% 200%;
@media @medium {
position: fixed;
max-width: 175px;
top: 25px;
left: 25px;
}
button {
top: 0;
left: 0;
background: @comp-color;
border: none;
width: 48px;
height: 45px;
text-indent: -900em;
overflow: hidden;
position: relative;
cursor: pointer;
outline: none;
.border-radius(0,3px,0,0);
2014-02-25 16:03:15 -05:00
opacity: 0.6;
2013-08-23 15:06:39 -04:00
@media @medium {
.border-radius(3px,3px,3px,3px);
}
}
button:hover,
button.dl-active,
ul {
background: #aaa;
}
button:after {
content: '';
position: absolute;
width: 68%;
height: 5px;
background: @white;
top: 10px;
left: 16%;
box-shadow:
0 10px 0 @white,
0 20px 0 @white;
}
button.dl-active {
display: none;
}
ul {
padding: 0;
list-style: none;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
li {
position: relative;
h4 {
margin:0;
padding: 15px 20px 0;
color: fade(@white,90);
}
p {
margin: 0;
padding: 15px 20px;
.font-rem(14);
2013-08-23 15:06:39 -04:00
color: fade(@white,80);
a {
display: inline;
padding: 0;
.font-rem(14);
2013-08-23 15:06:39 -04:00
}
}
i {
display: inline-block;
width: 2em;
}
a {
display: block;
position: relative;
padding: 15px 20px;
.font-rem(14);
line-height: 20px;
font-weight: 300;
color: @white;
outline: none;
}
.dl-back > a {
padding-left: 30px;
background: rgba(0,0,0,0.2);
}
.dl-back:after,
> a:not(:only-child):after {
position: absolute;
top: 0;
line-height: 50px;
font-family: 'fontawesome';
color: @white;
speak: none;
-webkit-font-smoothing: antialiased;
content: "\f105";
}
.dl-back:after {
left: 10px;
color: rgba(212,204,198,0.5);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
> a:after {
right: 10px;
color: rgba(0,0,0,0.15);
}
}
.dl-menu {
margin: 0;
position: absolute;
width: 100%;
max-width: 400px;
overflow-y: auto;
max-height: 600px;
2013-08-23 15:06:39 -04:00
opacity: 0;
pointer-events: none;
box-shadow: 0 12px 24px fade(@black,35);
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
transform: translateY(10px);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
@media @medium {
.border-radius(3px,3px,3px,3px);
max-height: 650px;
2013-08-23 15:06:39 -04:00
}
}
.dl-menu.dl-menu-toggle {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.dl-menu.dl-menuopen {
opacity: 1;
pointer-events: auto;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
.dl-submenu {
.rounded(3px);
box-shadow: 0 12px 24px fade(@black,35);
}
/* 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;
}
/* Animation classes for moving out and in */
.dl-menu.dl-animate-out {
-webkit-animation: MenuAnimOut 0.4s ease;
-moz-animation: MenuAnimOut 0.4s ease;
animation: MenuAnimOut 0.4s ease;
}
@-webkit-keyframes MenuAnimOut {
100% {
-webkit-transform: translateZ(300px);
opacity: 0;
}
}
@-moz-keyframes MenuAnimOut {
100% {
-moz-transform: translateZ(300px);
opacity: 0;
}
}
@keyframes MenuAnimOut {
100% {
transform: translateZ(300px);
opacity: 0;
}
}
.dl-menu.dl-animate-in {
-webkit-animation: MenuAnimIn 0.4s ease;
-moz-animation: MenuAnimIn 0.4s ease;
animation: MenuAnimIn 0.4s ease;
}
@-webkit-keyframes MenuAnimIn {
0% {
-webkit-transform: translateZ(300px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0px);
opacity: 1;
}
}
@-moz-keyframes MenuAnimIn {
0% {
-moz-transform: translateZ(300px);
opacity: 0;
}
100% {
-moz-transform: translateZ(0px);
opacity: 1;
}
}
@keyframes MenuAnimIn {
0% {
transform: translateZ(300px);
opacity: 0;
}
100% {
transform: translateZ(0px);
opacity: 1;
}
}
.dl-menuwrapper > .dl-submenu.dl-animate-in {
-webkit-animation: SubMenuAnimIn 0.4s ease;
-moz-animation: SubMenuAnimIn 0.4s ease;
animation: SubMenuAnimIn 0.4s ease;
}
@-webkit-keyframes SubMenuAnimIn {
0% {
-webkit-transform: translateZ(-300px);
opacity: 0;
}
100% {
-webkit-transform: translateZ(0px);
opacity: 1;
}
}
@-moz-keyframes SubMenuAnimIn {
0% {
-moz-transform: translateZ(-300px);
opacity: 0;
}
100% {
-moz-transform: translateZ(0px);
opacity: 1;
}
}
@keyframes SubMenuAnimIn {
0% {
transform: translateZ(-300px);
opacity: 0;
}
100% {
transform: translateZ(0px);
opacity: 1;
}
}
.dl-menuwrapper > .dl-submenu.dl-animate-out {
-webkit-animation: SubMenuAnimOut 0.4s ease;
-moz-animation: SubMenuAnimOut 0.4s ease;
animation: SubMenuAnimOut 0.4s ease;
}
@-webkit-keyframes SubMenuAnimOut {
0% {
-webkit-transform: translateZ(0px);
opacity: 1;
}
100% {
-webkit-transform: translateZ(-300px);
opacity: 0;
}
}
@-moz-keyframes SubMenuAnimOut {
0% {
-moz-transform: translateZ(0px);
opacity: 1;
}
100% {
-moz-transform: translateZ(-300px);
opacity: 0;
}
}
@keyframes SubMenuAnimOut {
0% {
transform: translateZ(0px);
opacity: 1;
}
100% {
transform: translateZ(-300px);
opacity: 0;
}
}
/* No Touch Fallback */
.no-touch .dl-menuwrapper li a:hover {
background: rgba(255,248,213,0.1);
}
/* No JS Fallback */
.no-js {
.dl-trigger {
display: none;
}
.dl-menuwrapper .dl-menu {
position: relative;
opacity: 1;
pointer-events: auto;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
.dl-menuwrapper li .dl-submenu {
display: block;
}
.dl-menuwrapper li.dl-back {
display: none;
}
.dl-menuwrapper li > a:not(:only-child) {
background: rgba(0,0,0,0.1);
}
.dl-menuwrapper li > a:not(:only-child):after {
content: '';
}
}
// Menu Color
.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul {
background: @comp-color;
2013-10-11 11:42:33 -04:00
}
// Fix for IE
.dl-menu li {
display: none
}
.dl-menuopen li {
display: block
2013-08-23 15:06:39 -04:00
}