yaptc/lib/pure/menus.css

183 lines
3.3 KiB
CSS
Raw Normal View History

2015-02-09 10:23:30 -05:00
/*!
Pure v0.6.0
2015-02-09 10:23:30 -05:00
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
https://github.com/yahoo/pure/blob/master/LICENSE.md
2015-02-09 10:23:30 -05:00
*/
/*csslint adjoining-classes: false, box-model:false*/
.pure-menu {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
2015-02-09 10:23:30 -05:00
.pure-menu-fixed {
position: fixed;
left: 0;
top: 0;
z-index: 3;
2015-02-09 10:23:30 -05:00
}
.pure-menu-list,
.pure-menu-item {
position: relative;
2015-02-09 10:23:30 -05:00
}
.pure-menu-list {
2015-02-09 10:23:30 -05:00
list-style: none;
margin: 0;
padding: 0;
}
.pure-menu-item {
padding: 0;
margin: 0;
height: 100%;
2015-02-09 10:23:30 -05:00
}
.pure-menu-link,
.pure-menu-heading {
2015-02-09 10:23:30 -05:00
display: block;
text-decoration: none;
white-space: nowrap;
}
/* HORIZONTAL MENU */
.pure-menu-horizontal {
2015-02-09 10:23:30 -05:00
width: 100%;
white-space: nowrap;
2015-02-09 10:23:30 -05:00
}
.pure-menu-horizontal .pure-menu-list {
display: inline-block;
}
2015-02-09 10:23:30 -05:00
/* Initial menus should be inline-block so that they are horizontal */
.pure-menu-horizontal .pure-menu-item,
.pure-menu-horizontal .pure-menu-heading,
.pure-menu-horizontal .pure-menu-separator {
2015-02-09 10:23:30 -05:00
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
/* Submenus should still be display: block; */
.pure-menu-item .pure-menu-item {
2015-02-09 10:23:30 -05:00
display: block;
}
.pure-menu-children {
display: none;
position: absolute;
left: 100%;
top: 0;
margin: 0;
padding: 0;
z-index: 3;
2015-02-09 10:23:30 -05:00
}
.pure-menu-horizontal .pure-menu-children {
left: 0;
top: auto;
width: inherit;
2015-02-09 10:23:30 -05:00
}
.pure-menu-allow-hover:hover > .pure-menu-children,
.pure-menu-active > .pure-menu-children {
display: block;
position: absolute;
2015-02-09 10:23:30 -05:00
}
/* Vertical Menus - show the dropdown arrow */
.pure-menu-has-children > .pure-menu-link:after {
padding-left: 0.5em;
content: "\25B8";
font-size: small;
2015-02-09 10:23:30 -05:00
}
/* Horizontal Menus - show the dropdown arrow */
.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
content: "\25BE";
2015-02-09 10:23:30 -05:00
}
/* scrollable menus */
.pure-menu-scrollable {
overflow-y: scroll;
overflow-x: hidden;
2015-02-09 10:23:30 -05:00
}
.pure-menu-scrollable .pure-menu-list {
display: block;
2015-02-09 10:23:30 -05:00
}
.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
display: inline-block;
2015-02-09 10:23:30 -05:00
}
.pure-menu-horizontal.pure-menu-scrollable {
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
/* a little extra padding for this style to allow for scrollbars */
padding: .5em 0;
2015-02-09 10:23:30 -05:00
}
.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {
display: none;
2015-02-09 10:23:30 -05:00
}
/* misc default styling */
2015-02-09 10:23:30 -05:00
.pure-menu-separator {
background-color: #ccc;
height: 1px;
margin: .3em 0;
2015-02-09 10:23:30 -05:00
}
.pure-menu-horizontal .pure-menu-separator {
width: 1px;
height: 1.3em;
margin: 0 .3em ;
2015-02-09 10:23:30 -05:00
}
.pure-menu-heading {
2015-02-09 10:23:30 -05:00
text-transform: uppercase;
color: #565d64;
2015-02-09 10:23:30 -05:00
}
.pure-menu-link {
color: #777;
2015-02-09 10:23:30 -05:00
}
.pure-menu-children {
background-color: #fff;
2015-02-09 10:23:30 -05:00
}
.pure-menu-link,
.pure-menu-disabled,
.pure-menu-heading {
padding: .5em 1em;
2015-02-09 10:23:30 -05:00
}
.pure-menu-disabled {
opacity: .5;
2015-02-09 10:23:30 -05:00
}
.pure-menu-disabled .pure-menu-link:hover {
background-color: transparent;
2015-02-09 10:23:30 -05:00
}
.pure-menu-active > .pure-menu-link,
.pure-menu-link:hover,
.pure-menu-link:focus {
background-color: #eee;
}
2015-02-09 10:23:30 -05:00
.pure-menu-selected .pure-menu-link,
.pure-menu-selected .pure-menu-link:visited {
color: #000;
2015-02-09 10:23:30 -05:00
}