Initial commit of edits in support of the new menu.

Gruntfile.js

@@ -74,8 +74,7 @@ grunt.initConfig({
 
                 {'build/menus-nr.css': [
                     'build/menus-core.css',
-                    'build/menus-dropdown.css',
+                    'build/menus-dropdown.css'
-                    'build/menus.css'
                 ]},
 
                 {'build/menus.css': [

bower.json

@@ -1,8 +1,9 @@
 {
   "name": "pure",
-  "version": "0.5.0",
+  "description": "Use Pure's ridiculously tiny CSS to start any web project.",
+  "version": "0.6.0",
   "main": "build/pure.css",
   "devDependencies": {
-    "normalize-css": "1.1.3"
+    "normalize-css": "3.0.2"
   }
 }

src/base/css/base.css

@@ -12,6 +12,7 @@
  * Always hide an element when it has the `hidden` HTML attribute.
  */
 
+.hidden,
 [hidden] {
     display: none !important;
 }

src/forms/css/forms.css

@@ -64,7 +64,6 @@ since IE8 won't execute CSS that contains a CSS3 selector.
 .pure-form select:focus,
 .pure-form textarea:focus {
     outline: 0;
-    outline: thin dotted \9; /* IE6-9 */
     border-color: #129FEA;
 }
 

src/menus/css/menus-core.css

@@ -40,14 +40,6 @@
     vertical-align: middle;
 }
 
-/* FIXED MENU */
-.pure-menu-fixed {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-}
-
 /* HORIZONTAL MENU */
 .pure-menu-horizontal {
     width: 100%;
@@ -70,13 +62,16 @@
 }
 
 /* RESPONSIVE MENUS */
-/* Hide the toggle button by default. It will show on small screen sizes */
+/* Hide the list and display the toggle by default. With menus-r it
+will show on small screen sizes. */
 .pure-menu-responsive .pure-menu-list {
     display: none;
 }
 
 .pure-menu-responsive-toggle {
     display: block;
+    float: right;
+    padding: 0.3em 0.5em;
 }
 
 .pure-menu-responsive-toggle:after {
@@ -91,8 +86,51 @@
 .pure-menu-is-active .pure-menu-item {
     display: block;
 }
+.pure-menu-is-active .pure-menu-list {
+    position: absolute;
+    right: 0;
+    background-color: #fff;
+}
 
 .pure-menu-is-active .pure-menu-separator {
     width: auto;
     height: 1px;
 }
+
+
+/* misc minimal styling */
+
+.pure-menu-heading {
+    font-weight: bold;
+}
+
+.pure-menu-children {
+    background: white;
+}
+
+.pure-menu-link,
+.pure-menu-disabled {
+    padding: 0.3em 0.5em;
+}
+
+.pure-menu-is-active .pure-menu-children {
+    padding-left: 0.5em;
+}
+
+.pure-menu-link:hover,
+.pure-menu-link:focus {
+    background-color: #eee;
+}
+
+.pure-menu-selected .pure-menu-link,
+.pure-menu-selected .pure-menu-link:visited {
+    color: #000;
+}
+
+.pure-menu-disabled {
+    opacity: 0.5;
+}
+
+.pure-menu-disabled .pure-menu-link:hover {
+    background-color: transparent;
+}

src/menus/css/menus-dropdown.css

@@ -18,13 +18,14 @@
 
 /* Horizontal Menus - when an item is interacted with, show the children */
 .pure-menu-horizontal .pure-menu-item:hover > .pure-menu-children,
-.pure-menu-horizontal .pure-menu-item:focus > .pure-menu-children {
+.pure-menu-horizontal .pure-menu-item a:focus > .pure-menu-children {
     top: 100%;
     left: 0;
     width: inherit;
 }
 
-.pure-menu-is-active .pure-menu-children {
+.pure-menu-is-active .pure-menu-children,
+.pure-menu-responsive-toggle:hover .pure-menu-children {
     display: block;
     position: static;
 }

src/menus/css/menus-r.css

@@ -5,4 +5,11 @@
     .pure-menu-responsive-toggle {
         display: none;
     }
+    .pure-menu-is-active .pure-menu-list {
+        position: static;
+    }
+    .pure-menu-is-active .pure-menu-list,
+    .pure-menu-is-active .pure-menu-item {
+        display: inline-block;
+    }
 }

src/menus/css/menus.css

@@ -1,19 +0,0 @@
-.pure-menu-heading {
-    font-weight: bold;
-}
-
-.pure-menu-children {
-    background: white;
-}
-
-.pure-menu-responsive-toggle {
-    float: right;
-}
-
-.pure-menu-link {
-    padding: 0.3em 0.5em;
-}
-
-.pure-menu-is-active .pure-menu-children {
-    padding-left: 0.5em;
-}