Get admin area working again

framework/core/less/admin/AdminNav.less

@@ -1,75 +1,79 @@
 @admin-pane-width: 300px;
 
-.admin-nav {
-  & .description {
-    display: none;
-  }
+.App {
+  padding-bottom: 0;
 }
-.admin-content {
+.AdminLinkButton-description {
+  display: none;
+}
+.AdminContent {
   padding: 20px 0;
 }
+.App-content .sideNavOffset {
+  margin-top: 0;
+}
 @media @desktop, @desktop-hd {
-  .admin-nav {
+  .App-nav {
     position: fixed;
     top: @header-height;
     bottom: 0;
     width: @admin-pane-width;
-    box-shadow: 0 2px 6px @shadow-color;
+    .box-shadow(2px 2px 6px -2px @shadow-color);
     background: @body-bg;
     border-top: 1px solid @control-bg;
-
-    & .dropdown-select .dropdown-menu > li {
-      & > a {
+    z-index: @zindex-pane;
+    overflow: auto;
+  }
+  .App-content .sideNavOffset {
+    margin-left: @admin-pane-width;
+  }
+  .App-nav .AdminNav {
+    .Dropdown-menu > li {
+      > a {
         padding: 15px 15px 15px 45px;
         display: block;
         text-decoration: none;
         white-space: normal;
       }
-      & > a, & > a:hover, &.active > a {
+      > a, > a:hover, &.active > a {
         color: @muted-color;
       }
+      > a:hover {
+        background: @control-bg;
+      }
       &.active > a {
         background: @control-bg;
         font-weight: normal;
 
-        & .label, & .icon {
+        .Button-label, .Button-icon {
           color: @text-color;
-        }
-        & .label {
           font-weight: bold;
         }
       }
-      &:hover:not(.active) {
-        & .label {
-          text-decoration: underline;
-        }
-      }
     }
-    & .icon {
+    .Button-icon {
       float: left;
       margin-left: -30px;
       font-size: 14px;
-      margin-top: 2px;
+      margin-top: 4px !important;
     }
-    & .label {
+    .Button-label {
       display: block;
       font-size: 15px;
       font-weight: normal;
       margin: 0 0 5px;
     }
-    & .description {
+    .AdminLinkButton-description {
       display: block;
       font-size: 12px;
     }
   }
-  .admin-content {
-    margin-left: @admin-pane-width;
-    padding: 20px;
-  }
   .container {
     width: 100%;
+    padding: 0 30px;
+    margin: 0;
 
-    .global-content & {
+    .App-content > & {
       padding: 0;
     }
   }

framework/core/less/admin/DashboardPage.less

@@ -0,0 +1,9 @@
+.DashboardPage {
+  @media @desktop-up {
+    .container {
+      max-width: 600px;
+      padding: 30px;
+      margin: 0;
+    }
+  }
+}

framework/core/less/admin/app.less

@@ -1,24 +1,6 @@
-@lib-path: "../lib";
+@import "../lib/lib.less";
 
-@import "@{lib-path}/bootstrap.less";
-
-// We want to specify the @fa-font-path variable AFTER we import font awesome
-// so that it overrides the default definition.
-@import "@{lib-path}/font-awesome/font-awesome.less";
-@fa-font-path: "/assets/fonts";
-
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,300,600);
-
-// Finally, with our vendor CSS loaded, we can import Flarum-specific stuff.
-@import "@{lib-path}/components.less";
-@import "@{lib-path}/buttons.less";
-@import "@{lib-path}/badges.less";
-@import "@{lib-path}/dropdowns.less";
-@import "@{lib-path}/avatars.less";
-@import "@{lib-path}/forms.less";
-@import "@{lib-path}/alerts.less";
-@import "@{lib-path}/modals.less";
-@import "@{lib-path}/layout.less";
-@import "@{lib-path}/side-nav.less";
-
-@import "layout.less";
+@import "AdminNav.less";
+@import "DashboardPage.less";
+@import "BasicsPage.less";
+@import "PermissionsPage.less";