` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#menu {
margin-left: -250px; /* "#menu" width */
width: 250px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: #191818;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/*
All anchors inside the menu should be styled like this.
*/
#menu a {
color: #999;
border: none;
padding: 0.6em 0 0.6em 0.6em;
}
/*
Remove all background/borders, since we are applying them to #menu.
*/
#menu .pure-menu,
#menu .pure-menu ul {
border: none;
background: transparent;
}
/*
Add that light border to separate items into groups.
*/
#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
border-top: 1px solid #333;
}
/*
Change color of the anchor links on hover/focus.
*/
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
background: #333;
}
/*
This styles the selected menu item `
`.
*/
#menu .pure-menu-selected,
#menu .pure-menu-heading {
background: #1f8dd6;
}
/*
This styles a link within a selected menu item ``.
*/
#menu .pure-menu-selected {
color: #fff;
}
/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
}
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/
/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
position: fixed;
display: block; /* show this only on small screens */
top: 0;
left: 0; /* "#menu width" */
background: #000;
background: rgba(0,0,0,0.7);
font-size: 10px; /* change this value to increase/decrease button size */
z-index: 10;
width: 2em;
height: auto;
padding: 2.1em 1.6em;
}
.menu-link:hover,
.menu-link:focus {
background: #000;
}
.menu-link span {
position: relative;
display: block;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
background-color: #fff;
width: 100%;
height: 0.2em;
}
.menu-link span:before,
.menu-link span:after {
position: absolute;
margin-top: -0.6em;
content: " ";
}
.menu-link span:after {
margin-top: 0.6em;
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 72em) {
.header,
.content {
padding-left: 2em;
padding-right: 2em;
}
#layout {
padding-left: 250px; /* left col width "#menu" */
left: 0;
}
#main{
left: 250px;
}
#menu {
left: 250px;
}
.menu-link {
position: fixed;
left: 250px;
display: none;
}
#layout.active .menu-link {
left: 250px;
}
}
#menu .collapsed .menu-item-list .hide ul li > a{
padding-top: 0px;
padding-bottom: 0px;
}
#menu .collapsed.menu-item-list li.hide > ul{
overflow: hidden;
}
#menu .expanded.menu-item-list .hide li > a:not(:hover){
background: none;
color: #999;
}
#menu .menu-item-list li.selected{
border-left: 2px solid white;
}
#menu .menu-item-list .hide li.selected{
border-left: none;
}
.menu-item-list ul, .menu-item-list a{
-webkit-transition: max-height 0.2s ease;
-moz-transition: max-height 0.2s ease;
-ms-transition: max-height 0.2s ease;
-o-transition: max-height 0.2s ease;
transition: max-height 0.2s ease;
overflow: hidden
}
/*Override stuff from pure =/ it's not doing what I want*/
.pure-menu li > ul{
position:relative;
visibility:visible;
left: 0px;
top: 0px;
}
.half-table{
width: 100%;
}
.half-table td{
width: 50%;
}
.half-table th{
width: 50%;
}
/*
This is the parent `` that contains the menu and the content area.
*/
#layout {
position: relative;
padding-left: 0;
}
#layout.active {
position: relative;
left: 250px;
}
#layout.active #menu {
left: 250px;
width: 250px;
}
#layout.active .menu-link {
left: 250px;
}