Get admin area working again

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;
     }
   }

less/admin/DashboardPage.less

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

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";

less/lib/FormControl.less

@@ -40,3 +40,9 @@
     height: auto;
   }
 }
+.helpText {
+  font-size: 12px;
+  line-height: 1.5em;
+  margin-bottom: 10px;
+  color: @muted-color;
+}

less/lib/scaffolding.less

@@ -93,55 +93,19 @@ input[type="search"] {
   -webkit-appearance: none;
 }
 
-// Checkboxes and radios
-//
-// Indent the labels to position radios/checkboxes as hanging controls.
+.checkbox {
+  display: block;
+  padding-left: 20px;
+  margin-bottom: 5px;
+  cursor: pointer;
 
-// .radio,
-// .checkbox {
-//   position: relative;
-//   display: block;
-//   margin-top: 10px;
-//   margin-bottom: 10px;
-
-//   label {
-//     min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
-//     padding-left: 20px;
-//     margin-bottom: 0;
-//     font-weight: normal;
-//     cursor: pointer;
-//   }
-// }
-// .radio input[type="radio"],
-// .radio-inline input[type="radio"],
-// .checkbox input[type="checkbox"],
-// .checkbox-inline input[type="checkbox"] {
-//   position: absolute;
-//   margin-left: -20px;
-//   margin-top: 4px \9;
-// }
-
-// .radio + .radio,
-// .checkbox + .checkbox {
-//   margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
-// }
-
-// // Radios and checkboxes on same line
-// .radio-inline,
-// .checkbox-inline {
-//   position: relative;
-//   display: inline-block;
-//   padding-left: 20px;
-//   margin-bottom: 0;
-//   vertical-align: middle;
-//   font-weight: normal;
-//   cursor: pointer;
-// }
-// .radio-inline + .radio-inline,
-// .checkbox-inline + .checkbox-inline {
-//   margin-top: 0;
-//   margin-left: 10px; // space out consecutive inline controls
-// }
+  input[type=checkbox],
+  input[type=radio] {
+    margin-left: -20px;
+    margin-top: 2px;
+    float: left;
+  }
+}
 
 .fade {
   opacity: 0;