You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

182 lines
3.3 KiB

9 years ago
  1. /*!
  2. Pure v0.6.0
  3. Copyright 2014 Yahoo! Inc. All rights reserved.
  4. Licensed under the BSD License.
  5. https://github.com/yahoo/pure/blob/master/LICENSE.md
  6. */
  7. /*csslint adjoining-classes: false, box-model:false*/
  8. .pure-menu {
  9. -webkit-box-sizing: border-box;
  10. -moz-box-sizing: border-box;
  11. box-sizing: border-box;
  12. }
  13. .pure-menu-fixed {
  14. position: fixed;
  15. left: 0;
  16. top: 0;
  17. z-index: 3;
  18. }
  19. .pure-menu-list,
  20. .pure-menu-item {
  21. position: relative;
  22. }
  23. .pure-menu-list {
  24. list-style: none;
  25. margin: 0;
  26. padding: 0;
  27. }
  28. .pure-menu-item {
  29. padding: 0;
  30. margin: 0;
  31. height: 100%;
  32. }
  33. .pure-menu-link,
  34. .pure-menu-heading {
  35. display: block;
  36. text-decoration: none;
  37. white-space: nowrap;
  38. }
  39. /* HORIZONTAL MENU */
  40. .pure-menu-horizontal {
  41. width: 100%;
  42. white-space: nowrap;
  43. }
  44. .pure-menu-horizontal .pure-menu-list {
  45. display: inline-block;
  46. }
  47. /* Initial menus should be inline-block so that they are horizontal */
  48. .pure-menu-horizontal .pure-menu-item,
  49. .pure-menu-horizontal .pure-menu-heading,
  50. .pure-menu-horizontal .pure-menu-separator {
  51. display: inline-block;
  52. *display: inline;
  53. zoom: 1;
  54. vertical-align: middle;
  55. }
  56. /* Submenus should still be display: block; */
  57. .pure-menu-item .pure-menu-item {
  58. display: block;
  59. }
  60. .pure-menu-children {
  61. display: none;
  62. position: absolute;
  63. left: 100%;
  64. top: 0;
  65. margin: 0;
  66. padding: 0;
  67. z-index: 3;
  68. }
  69. .pure-menu-horizontal .pure-menu-children {
  70. left: 0;
  71. top: auto;
  72. width: inherit;
  73. }
  74. .pure-menu-allow-hover:hover > .pure-menu-children,
  75. .pure-menu-active > .pure-menu-children {
  76. display: block;
  77. position: absolute;
  78. }
  79. /* Vertical Menus - show the dropdown arrow */
  80. .pure-menu-has-children > .pure-menu-link:after {
  81. padding-left: 0.5em;
  82. content: "\25B8";
  83. font-size: small;
  84. }
  85. /* Horizontal Menus - show the dropdown arrow */
  86. .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
  87. content: "\25BE";
  88. }
  89. /* scrollable menus */
  90. .pure-menu-scrollable {
  91. overflow-y: scroll;
  92. overflow-x: hidden;
  93. }
  94. .pure-menu-scrollable .pure-menu-list {
  95. display: block;
  96. }
  97. .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
  98. display: inline-block;
  99. }
  100. .pure-menu-horizontal.pure-menu-scrollable {
  101. white-space: nowrap;
  102. overflow-y: hidden;
  103. overflow-x: auto;
  104. -ms-overflow-style: none;
  105. -webkit-overflow-scrolling: touch;
  106. /* a little extra padding for this style to allow for scrollbars */
  107. padding: .5em 0;
  108. }
  109. .pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {
  110. display: none;
  111. }
  112. /* misc default styling */
  113. .pure-menu-separator {
  114. background-color: #ccc;
  115. height: 1px;
  116. margin: .3em 0;
  117. }
  118. .pure-menu-horizontal .pure-menu-separator {
  119. width: 1px;
  120. height: 1.3em;
  121. margin: 0 .3em ;
  122. }
  123. .pure-menu-heading {
  124. text-transform: uppercase;
  125. color: #565d64;
  126. }
  127. .pure-menu-link {
  128. color: #777;
  129. }
  130. .pure-menu-children {
  131. background-color: #fff;
  132. }
  133. .pure-menu-link,
  134. .pure-menu-disabled,
  135. .pure-menu-heading {
  136. padding: .5em 1em;
  137. }
  138. .pure-menu-disabled {
  139. opacity: .5;
  140. }
  141. .pure-menu-disabled .pure-menu-link:hover {
  142. background-color: transparent;
  143. }
  144. .pure-menu-active > .pure-menu-link,
  145. .pure-menu-link:hover,
  146. .pure-menu-link:focus {
  147. background-color: #eee;
  148. }
  149. .pure-menu-selected .pure-menu-link,
  150. .pure-menu-selected .pure-menu-link:visited {
  151. color: #000;
  152. }