app/assets/stylesheets/alchemy/menubar.scss
/*
*= require_self
*/
@import "alchemy/variables";
@import "alchemy/mixins";
#alchemy_menubar {
position: fixed;
top: 0;
left: -358px;
width: 400px;
z-index: 10000;
background: $main-menu-bg-color;
transition: left 0.25s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 0 0 1px $white;
box-sizing: border-box;
height: auto;
padding: 8px 40px 8px 8px;
overflow: hidden;
font-family: $default-font-family;
font-size: $base-font-size;
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
&:hover {
left: 0;
}
&:after {
content: "";
width: 24px;
height: 24px;
position: absolute;
right: 10px;
top: 50%;
background: image-url("alchemy/icon-white.svg") 1px 1px no-repeat;
background-size: 24px 24px;
transform: translateY(-50%);
}
ul {
padding: 0;
margin: 0;
height: 100%;
li {
width: 33.333%;
height: 100%;
margin: 0;
padding: 0 $default-padding;
float: left;
list-style-type: none;
text-align: center;
a,
button {
@include button-defaults(
$background-color: $main-menu-bg-color,
$hover-color: $blue,
$hover-border-color: $white,
$border: 1px solid $white,
$box-shadow: none,
$padding: 0.5em 0,
$margin: 0,
$color: $white
);
width: 100%;
text-decoration: none !important;
&:after {
display: none;
}
}
}
}
}