Unify icon class name, change the way icons are floated in menus

framework/core/js/lib/components/action-button.js

@@ -14,7 +14,7 @@ export default class ActionButton extends Component {
 
     attrs.href = attrs.href || 'javascript:;';
     return m('a', attrs, [
-      iconName ? icon(iconName+' icon-glyph') : '',
+      iconName ? icon(iconName+' icon') : '',
       m('span.label', label)
     ]);
   }

framework/core/js/lib/components/back-button.js

@@ -15,10 +15,10 @@ export default class BackButton extends Component {
       onmouseleave: pane && pane.onmouseleave.bind(pane),
       config: this.onload.bind(this)
     }, history.canGoBack() ? m('div.btn-group', [
-      m('button.btn.btn-default.btn-icon.back', {onclick: history.back.bind(history)}, icon('chevron-left icon-glyph')),
-      pane && pane.active ? m('button.btn.btn-default.btn-icon.pin'+(pane.pinned ? '.active' : ''), {onclick: pane.togglePinned.bind(pane)}, icon('thumb-tack icon-glyph')) : '',
+      m('button.btn.btn-default.btn-icon.back', {onclick: history.back.bind(history)}, icon('chevron-left icon')),
+      pane && pane.active ? m('button.btn.btn-default.btn-icon.pin'+(pane.pinned ? '.active' : ''), {onclick: pane.togglePinned.bind(pane)}, icon('thumb-tack icon')) : '',
     ]) : (this.props.drawer ? [
-      m('button.btn.btn-default.btn-icon.drawer-toggle', {onclick: this.toggleDrawer.bind(this)}, icon('reorder icon-glyph'))
+      m('button.btn.btn-default.btn-icon.drawer-toggle', {onclick: this.toggleDrawer.bind(this)}, icon('reorder icon'))
     ] : ''));
   }
 

framework/core/js/lib/components/dropdown-split.js

@@ -22,7 +22,7 @@ export default class DropdownSplit extends Component {
       ActionButton.component(buttonProps),
       m('a[href=javascript:;]', {className: 'dropdown-toggle '+this.props.buttonClass, 'data-toggle': 'dropdown'}, [
         icon('caret-down icon-caret'),
-        icon((this.props.icon || 'ellipsis-v')+' icon-glyph'),
+        icon((this.props.icon || 'ellipsis-v')+' icon'),
       ]),
       m('ul', {className: 'dropdown-menu '+(this.props.menuClass || 'pull-right')}, items)
     ])

framework/core/js/lib/components/nav-item.js

@@ -5,7 +5,7 @@ export default class NavItem extends Component {
   view() {
     var active = NavItem.active(this.props);
     return m('li'+(active ? '.active' : ''), m('a', {href: this.props.href, config: m.route}, [
-      icon(this.props.icon),
+      icon(this.props.icon+' icon'),
       this.props.label, ' ',
       m('span.count', this.props.badge)
     ]))

framework/core/less/lib/buttons.less

@@ -24,7 +24,7 @@
 }
 .btn-primary {
   font-weight: bold;
-  & .icon-glyph {
+  & .icon {
     display: none;
   }
 }

framework/core/less/lib/dropdowns.less

@@ -7,14 +7,17 @@
   .box-shadow(0 2px 6px @fl-shadow-color);
 
   & > li > a {
-    padding: 8px 15px;
+    padding: 8px 15px 8px 40px;
     color: @fl-body-color;
+
     &:hover, &:focus {
       color: @fl-body-color;
       background-color: @fl-body-control-bg;
     }
-    & .fa {
-      margin-right: 5px;
+    & .icon {
+      float: left;
+      margin-left: -25px;
+      margin-top: 2px;
       font-size: 14px;
     }
     & .count {
@@ -63,16 +66,19 @@
     & > li > a {
       background: #fff;
       font-size: 16px;
-      padding: 15px 20px;
+      padding: 15px 20px 15px 50px;
 
-      & .fa {
+      & .icon {
         font-size: 16px;
-        margin-right: 10px;
+        margin-left: -30px;
       }
     }
     & .divider {
       margin: 0;
     }
+    & > .active > a {
+      color: #fff !important;
+    }
 
     .open & {
       bottom: 0;
@@ -114,7 +120,7 @@
 
 .nav-list() {
   & > li > a {
-    padding: 8px 0;
+    padding: 8px 0 8px 30px;
     color: @fl-body-muted-color;
 
     &:hover {
@@ -122,8 +128,10 @@
       color: @link-hover-color;
     }
 
-    & .fa {
-      margin-right: 8px;
+    & .icon {
+      float: left;
+      margin-left: -30px;
+      margin-top: 1px;
       font-size: 15px;
     }
   }

framework/core/less/lib/layout.less

@@ -104,7 +104,7 @@ body {
       padding-left: 5px;
       padding-right: 5px;
 
-      & .icon-glyph {
+      & .icon {
         display: block;
         font-size: 18px;
       }

framework/core/less/lib/side-nav.less

@@ -42,11 +42,18 @@
 
     & > ul > li, & .dropdown-menu > li {
       display: inline-block;
-      margin-right: 25px;
+      margin-right: 20px;
+    }
+    & .dropdown-menu > li.divider {
+      display: none;
     }
 
-    & .dropdown-select .dropdown-menu > li > a .fa {
-      margin-right: 3px;
+    & .dropdown-select .dropdown-menu > li > a {
+      padding-left: 25px;
+
+      & .icon {
+        margin-left: -25px;
+      }
     }
 
     & .affix {