CSS Code Housekeeping

less/admin/AdminNav.less

@@ -52,20 +52,12 @@
 }
 
 @media @phone, @tablet {
-  .App-nav .AdminNav {
+  .AdminNav {
     .Dropdown-menu {
       > li {
-        .ExtensionListTitle {
-          color: @muted-color;
-          text-transform: uppercase;
-          margin: 25px 0 10px 15px;
-        }
-
         .ExtensionIcon {
           margin: -2px -29px;
-          width: 25px;
-          height: 25px;
-          font-size: 12.5px;
+          --size: 25px;
 
           .icon {
             margin: 0;
@@ -83,7 +75,7 @@
     top: @header-height;
     height: ~"calc(100vh - @{header-height})";
     width: @admin-pane-width;
-    .box-shadow(0 6px 6px @shadow-color);
+    box-shadow: 0 6px 6px @shadow-color;
     background: @body-bg;
     z-index: @zindex-pane;
     overflow-y: scroll;
@@ -157,18 +149,9 @@
           margin: 0 auto;
         }
 
-        .ExtensionListTitle {
-          color: @muted-color;
-          text-transform: uppercase;
-          margin: 25px 0 8px 15px;
-        }
-
         .ExtensionIcon {
-          width: 25px;
-          height: 25px;
-          font-size: 15px;
+          --size: 25px;
           margin-left: -29px;
-          vertical-align: middle;
         }
       }
     }
@@ -193,6 +176,12 @@
   padding-left: 5px;
 }
 
+.ExtensionListTitle {
+  color: @muted-color;
+  text-transform: uppercase;
+  margin: 25px 0 8px 15px;
+}
+
 .ExtensionListItem-Dot {
   height: 10px;
   width: 10px;

less/admin/ExtensionPage.less

@@ -1,13 +1,5 @@
 .ExtensionPage {
-
   &-header {
-    .ExtensionTitle {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      margin: 20px 0 15px;
-    }
-
     .helpText {
       margin-bottom: 5px;
     }
@@ -79,11 +71,8 @@
     }
 
     .ExtensionIcon {
-      width: 30px;
-      height: 30px;
-      font-size: 15px;
+      --size: 30px;
       margin-left: 0;
-      vertical-align: middle;
     }
 
     &TopItems {
@@ -123,7 +112,6 @@
   }
 
   &-permissions {
-
     .PermissionGrid-removeScope {
       display: none;
     }
@@ -140,6 +128,13 @@
   }
 }
 
+.ExtensionTitle {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 20px 0 15px;
+}
+
 .ExtensionInfo {
   margin-left: auto;
 

less/admin/ExtensionWidget.less

@@ -77,13 +77,14 @@
 }
 
 .ExtensionIcon {
-  width: 90px;
-  height: 90px;
+  --size: 90px;
+  width: var(--size);
+  height: var(--size);
   background: @control-bg;
   color: @control-color;
   border-radius: 6px;
   display: inline-flex;
-  font-size: 45px;
+  font-size: calc(~"var(--size) / 2");
   text-align: center;
   align-items: center;
   justify-content: center;

less/admin/PermissionsPage.less

@@ -114,7 +114,7 @@
       display: none;
     }
     .open .Dropdown-toggle {
-      .box-shadow(none);
+      box-shadow: none;
     }
   }
 }
@@ -128,7 +128,7 @@
   }
   .Badge {
     margin: -3px 3px -3px 0;
-    .box-shadow(none);
+    box-shadow: none;
   }
 }
 .PermissionGrid-section {

less/common/Alert.less

@@ -3,6 +3,20 @@
   border-radius: @border-radius;
   line-height: 1.5;
 
+  background: var(--alert-bg);
+
+  &,
+  a,
+  a:hover,
+  .Button,
+  .Button:hover,
+  .Button:active,
+  .Button.active,
+  .Button:focus,
+  .Button.focus {
+    color: var(--alert-color);
+  }
+
   .Alert--color(@alert-color, @alert-bg);
 }
 .Alert--error {
@@ -16,19 +30,8 @@
   }
 }
 .Alert--color(@color; @background) {
-  background: @background;
-
-  &,
-  a,
-  a:hover,
-  .Button,
-  .Button:hover,
-  .Button:active,
-  .Button.active,
-  .Button:focus,
-  .Button.focus {
-    color: @color;
-  }
+  --alert-bg: @background;
+  --alert-color: @color;
 }
 .Alert-controls {
   list-style-type: none;

less/common/AlertManager.less

@@ -7,6 +7,6 @@
   .Alert {
     display: inline-block;
     margin-top: 20px;
-    .box-shadow(0 2px 6px @shadow-color);
+    box-shadow: 0 2px 6px @shadow-color;
   }
 }

less/common/App.less

@@ -24,7 +24,7 @@
     }
 
     .scrolled & {
-      .box-shadow(0 2px 6px @shadow-color);
+      box-shadow: 0 2px 6px @shadow-color;
     }
   }
   .App-primaryControl, .App-titleControl, .App-backControl {
@@ -40,7 +40,7 @@
     > .Button {
       float: none;
       background: transparent !important;
-      .box-shadow(~"none !important");
+      box-shadow: none !important;
       height: @header-height-phone;
       width: auto;
       padding: 13px !important;
@@ -136,9 +136,9 @@
     left: 0;
     top: 0;
     bottom: 0;
-    .box-shadow(0 2px 6px @shadow-color);
-    .translate3d(-@drawer-width - 6px, 0, 0);
-    .transition-transform(0.2s);
+    box-shadow: 0 2px 6px @shadow-color;
+    transform: translate(-@drawer-width - 6px, 0);
+    transition: transform 0.2s;
     z-index: @zindex-modal;
 
     .drawerOpen & {
@@ -155,7 +155,7 @@
     z-index: @zindex-modal-background;
     background-color: @overlay-bg;
     opacity: 0;
-    .transition(0.2s opacity);
+    transition: opacity 0.2s;
 
     &.in {
       opacity: 0.9;
@@ -241,7 +241,7 @@
     }
 
     .scrolled & {
-      .box-shadow(0 2px 6px @shadow-color);
+      box-shadow: 0 2px 6px @shadow-color;
     }
 
     & when (@config-colored-header = true) {

less/common/Avatar.less

@@ -1,12 +1,17 @@
 .Avatar {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   box-sizing: content-box;
   color: #fff;
-  text-align: center;
   vertical-align: top;
   background-color: var(--avatar-bg);
   font-weight: normal;
   .Avatar--size(48px);
+  width: var(--size);
+  height: var(--size);
+  border-radius: 100%;
+  font-size: calc(~"var(--size) / 2");
 
   img {
     display: inline-block;
@@ -18,9 +23,5 @@
 }
 
 .Avatar--size(@size) {
-  width: @size;
-  height: @size;
-  border-radius: @size;
-  font-size: @size / 2;
-  line-height: @size;
+  --size: @size;
 }

less/common/Badge.less

@@ -1,28 +1,29 @@
 .Badge {
   .Badge--size(22px);
+  width: var(--size);
+  height: var(--size);
+  border-radius: calc(~"var(--size) / 2");
   background: var(--badge-bg);
   color: var(--badge-color);
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   vertical-align: middle;
-  text-align: center;
-  .box-shadow(0 2px 4px @shadow-color);
+  box-shadow: 0 2px 4px @shadow-color;
 
   .Badge-label {
     display: none;
   }
-}
-
-.Badge--size(@size) {
-  width: @size;
-  height: @size;
-  border-radius: @size / 2;
-  line-height: @size - 1px;
 
   &, .Badge-icon {
-    font-size: 0.56 * @size;
+    font-size: calc(~"0.56 * var(--size)");
   }
 }
 
+.Badge--size(@size) {
+  --size: @size;
+}
+
 .badges {
   margin: 0;
   padding: 0;

less/common/Button.less

@@ -77,7 +77,7 @@
   fieldset[disabled] & {
     cursor: default;
     opacity: 0.65;
-    .box-shadow(none);
+    box-shadow: none;
   }
 
   a& {
@@ -88,7 +88,7 @@
   }
 
   .Button-label {
-    .transition(margin-right 0.1s);
+    transition: margin-right 0.1s;
   }
 
   .LoadingIndicator-container {
@@ -148,7 +148,7 @@
   &.focus,
   .open > &.Dropdown-toggle {
     background: transparent !important;
-    .box-shadow(none);
+    box-shadow: none;
     color: @link-color;
   }
 }
@@ -164,7 +164,7 @@
   &:active,
   &.active,
   .open > &.Dropdown-toggle {
-    .box-shadow(none);
+    box-shadow: none;
   }
 }
 .Button--primary {

less/common/Checkbox.less

@@ -49,7 +49,7 @@
   position: relative;
   border-radius: 14px;
   background: @control-bg;
-  .transition(background-color 0.2s);
+  transition: background-color 0.2s;
 
   .LoadingIndicator {
     --size: 22px !important;
@@ -81,7 +81,7 @@
     height: 22px;
     padding: 0;
     left: 3px;
-    .transition(~"opacity 0.2s, left 0.2s");
+    transition: opacity 0.2s, left 0.2s;
 
     .on& {
       left: 25px;