flarum · askvortsov1 · Sep 28, 2021
diff --git a/less/admin/AdminNav.less b/less/admin/AdminNav.less
@@ -52,12 +52,20 @@
 }
 
 @media @phone, @tablet {
-  .AdminNav {
+  .App-nav .AdminNav {
     .Dropdown-menu {
       > li {
+        .ExtensionListTitle {
+          color: @muted-color;
+          text-transform: uppercase;
+          margin: 25px 0 10px 15px;
+        }
+
         .ExtensionIcon {
           margin: -2px -29px;
-          --size: 25px;
+          width: 25px;
+          height: 25px;
+          font-size: 12.5px;
 
           .icon {
             margin: 0;
@@ -75,7 +83,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;
@@ -149,9 +157,18 @@
           margin: 0 auto;
         }
 
+        .ExtensionListTitle {
+          color: @muted-color;
+          text-transform: uppercase;
+          margin: 25px 0 8px 15px;
+        }
+
         .ExtensionIcon {
-          --size: 25px;
+          width: 25px;
+          height: 25px;
+          font-size: 15px;
           margin-left: -29px;
+          vertical-align: middle;
         }
       }
     }
@@ -176,12 +193,6 @@
   padding-left: 5px;
 }
 
-.ExtensionListTitle {
-  color: @muted-color;
-  text-transform: uppercase;
-  margin: 25px 0 8px 15px;
-}
-
 .ExtensionListItem-Dot {
   height: 10px;
   width: 10px;

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

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

diff --git a/less/admin/PermissionsPage.less b/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 {

diff --git a/less/common/Alert.less b/less/common/Alert.less
@@ -3,20 +3,6 @@
   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 {
@@ -30,8 +16,19 @@
   }
 }
 .Alert--color(@color; @background) {
-  --alert-bg: @background;
-  --alert-color: @color;
+  background: @background;
+
+  &,
+  a,
+  a:hover,
+  .Button,
+  .Button:hover,
+  .Button:active,
+  .Button.active,
+  .Button:focus,
+  .Button.focus {
+    color: @color;
+  }
 }
 .Alert-controls {
   list-style-type: none;

diff --git a/less/common/AlertManager.less b/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);
   }
 }
diff --git a/less/common/App.less b/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;
-    transform: translate(-@drawer-width - 6px, 0);
-    transition: transform 0.2s;
+    .box-shadow(0 2px 6px @shadow-color);
+    .translate3d(-@drawer-width - 6px, 0, 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: opacity 0.2s;
+    .transition(0.2s opacity);
 
     &.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) {

diff --git a/less/common/Avatar.less b/less/common/Avatar.less
@@ -1,17 +1,12 @@
 .Avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  display: inline-block;
   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;
@@ -23,5 +18,9 @@
 }
 
 .Avatar--size(@size) {
-  --size: @size;
+  width: @size;
+  height: @size;
+  border-radius: @size;
+  font-size: @size / 2;
+  line-height: @size;
 }
diff --git a/less/common/Badge.less b/less/common/Badge.less
@@ -1,27 +1,26 @@
 .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-flex;
-  align-items: center;
-  justify-content: center;
+  display: inline-block;
   vertical-align: middle;
-  box-shadow: 0 2px 4px @shadow-color;
+  text-align: center;
+  .box-shadow(0 2px 4px @shadow-color);
 
   .Badge-label {
     display: none;
   }
-
-  &, .Badge-icon {
-    font-size: calc(~"0.56 * var(--size)");
-  }
 }
 
 .Badge--size(@size) {
-  --size: @size;
+  width: @size;
+  height: @size;
+  border-radius: @size / 2;
+  line-height: @size - 1px;
+
+  &, .Badge-icon {
+    font-size: 0.56 * @size;
+  }
 }
 
 .badges {

diff --git a/less/common/Button.less b/less/common/Button.less
@@ -71,7 +71,7 @@
   fieldset[disabled] & {
     cursor: default;
     opacity: 0.65;
-    box-shadow: none;
+    .box-shadow(none);
   }
 
   a& {
@@ -82,7 +82,7 @@
   }
 
   .Button-label {
-    transition: margin-right 0.1s;
+    .transition(margin-right 0.1s);
   }
 
   .LoadingIndicator-container {
@@ -142,7 +142,7 @@
   &.focus,
   .open > &.Dropdown-toggle {
     background: transparent !important;
-    box-shadow: none;
+    .box-shadow(none);
     color: @link-color;
   }
 }
@@ -158,7 +158,7 @@
   &:active,
   &.active,
   .open > &.Dropdown-toggle {
-    box-shadow: none;
+    .box-shadow(none);
   }
 }
 .Button--primary {

diff --git a/less/common/Checkbox.less b/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;