Merge pull request #3956 from consul/admin-front

Fix minor design details in admin front

app/assets/stylesheets/admin.scss

@@ -63,10 +63,6 @@ $sidebar-active: #f4fcd0;
     color: #000;
     height: auto;
 
-    @include breakpoint(medium) {
-      box-shadow: 0 2px 2px #eee;
-    }
-
     @include breakpoint(small only) {
 
       .top-bar-left ul {
@@ -368,26 +364,25 @@ $sidebar-active: #f4fcd0;
 }
 
 .icon-sortable {
-  font-family: "icons";
+  font-family: "Font Awesome 5 Free";
   font-size: $small-font-size;
-  padding-right: $line-height / 2;
   position: relative;
 
   &::before,
   &::after {
     left: 6px;
-    opacity: 0.25;
+    opacity: 0.5;
     position: absolute;
   }
 
   &::before {
-    content: "\57";
-    top: -2px;
+    content: "\f0d8";
+    bottom: 0;
   }
 
   &::after {
-    content: "\52";
-    bottom: -10px;
+    content: "\f0d7";
+    top: 0;
   }
 
   &.asc {
@@ -435,11 +430,11 @@ code {
     [class^="icon-"] {
       color: #fff;
       display: inline-block;
-      font-size: rem-calc(24);
+      font-size: rem-calc(20);
       line-height: $line-height;
-      padding: $line-height / 2 $line-height / 4;
-      padding-left: 0;
+      text-align: center;
       vertical-align: middle;
+      width: $line-height * 1.5;
     }
   }
 
@@ -458,13 +453,20 @@ code {
       border-left: 2px solid $sidebar-active;
       font-weight: bold;
     }
+
+    &[aria-expanded="true"] {
+
+      > a::after {
+        transform: rotate(180deg);
+      }
+    }
   }
 
   li a {
     color: #fff;
     display: block;
-    line-height: rem-calc(48);
-    padding-left: rem-calc(12);
+    line-height: $line-height * 2;
+    padding-left: $line-height / 4;
     vertical-align: top;
 
     &:hover {
@@ -478,12 +480,13 @@ code {
 
     > a::after {
       border: 0;
-      content: "\61" !important;
-      font-family: "icons" !important;
+      content: "\f078";
+      font-family: "Font Awesome 5 Free";
+      font-weight: bold;
       height: auto;
-      position: absolute !important;
-      right: 30px;
-      top: 6px !important;
+      position: absolute;
+      right: 24px;
+      transition: 0.25s;
     }
   }
 

app/assets/stylesheets/layout.scss

@@ -446,18 +446,18 @@ a {
 }
 
 .menu-and-content {
-  $side-menu-min-width: 250px;
+  $side-menu-min-width: rem-calc(240);
 
   @include breakpoint(medium) {
     display: flex;
 
     > nav {
-      flex: 25%;
+      flex: 20%;
       min-width: $side-menu-min-width;
 
       + * {
-        flex: 75%;
-        padding: $line-height !important;
+        flex: 80%;
+        padding: $line-height;
       }
     }
 
@@ -478,7 +478,7 @@ a {
       z-index: 12;
 
       + * {
-        padding: $line-height !important;
+        padding: $line-height;
       }
     }