breaking up menu into smaller files

Gruntfile.js

@@ -72,14 +72,12 @@ grunt.initConfig({
                     'build/grids-units.css'
                 ]},
 
-                {'build/menus-nr.css': [
-                    'build/menus-core.css',
-                    'build/menus-dropdown.css'
-                ]},
-
                 {'build/menus.css': [
-                    'build/menus-nr.css',
+                    'build/menus-core.css',
-                    'build/menus-r.css'
+                    'build/menus-horizontal.css',
+                    'build/menus-dropdown.css',
+                    'build/menus-scrollable.css',
+                    'build/menus-skin.css',
                 ]},
 
                 // Rollups
@@ -98,7 +96,7 @@ grunt.initConfig({
                     'build/grids.css',
                     'build/buttons.css',
                     'build/forms-nr.css',
-                    'build/menus-nr.css',
+                    'build/menus.css',
                     'build/tables.css'
                 ]}
             ]

src/menus/css/menus-core.css

@@ -29,119 +29,9 @@
     height: 100%;
 }
 
-.pure-menu-separator {
-    background-color: #ccc;
-    height: 1px;
-    margin: 0.3em 0;
-}
-
 .pure-menu-link,
 .pure-menu-heading {
     display: block;
     text-decoration: none;
     white-space: nowrap;
 }
-
-/* HORIZONTAL MENU */
-.pure-menu-horizontal {
-    width: 100%;
-    white-space: nowrap;
-}
-
-.pure-menu-horizontal .pure-menu-list {
-    display: inline-block;
-}
-
-/* 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 {
-    display: inline-block;
-    *display: inline;
-    zoom: 1;
-    vertical-align: middle;
-}
-
-.pure-menu-horizontal .pure-menu-separator {
-    width: 1px;
-    height: 1.3em;
-    margin: 0 0.3em ;
-}
-
-/* Submenus should still be display: block; */
-.pure-menu-item .pure-menu-item {
-    display: block;
-}
-
-.pure-menu-active .pure-menu-list {
-    display: block;
-    position: absolute;
-    right: 0;
-    background-color: #fff;
-}
-
-/* scrollable menus */
-.pure-menu-scrollable {
-    overflow-y: scroll;
-    overflow-x: hidden;
-}
-
-.pure-menu-scrollable .pure-menu-list {
-    display: block;
-}
-
-.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {
-    display: inline-block;
-}
-
-.pure-menu-horizontal.pure-menu-scrollable {
-    white-space: nowrap;
-    overflow-y: hidden;
-    overflow-x: auto;
-    -ms-overflow-style: none;
-    -webkit-overflow-scrolling: touch;
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
-}
-
-.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {
-    display: none;
-}
-
-/* misc default styling */
-.pure-menu-heading {
-    text-transform: uppercase;
-    color: #565d64;
-}
-
-.pure-menu-link {
-    color: #777;
-}
-
-.pure-menu-children {
-    background: white;
-}
-
-.pure-menu-link,
-.pure-menu-disabled,
-.pure-menu-heading {
-    padding: 0.5em 1em;
-}
-
-.pure-menu-disabled {
-    opacity: 0.5;
-}
-
-.pure-menu-disabled .pure-menu-link:hover {
-    background-color: transparent;
-}
-
-.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;
-}

src/menus/css/menus-dropdown.css

@@ -1,3 +1,8 @@
+/* Submenus should still be display: block; */
+.pure-menu-item .pure-menu-item {
+    display: block;
+}
+
 .pure-menu-children {
     display: none;
     position: absolute;
@@ -17,6 +22,7 @@
 .pure-menu-allow-hover:hover > .pure-menu-children,
 .pure-menu-active > .pure-menu-children {
     display: block;
+    position: absolute;
 }
 
 /* Vertical Menus - show the dropdown arrow */