CSS Code Housekeeping (#3026)

* refactor: Avatar classes refactor
* refactor: Badge classes refactor
* chore: Remove commented dead code
* chore: Remove SignUpModal dead CSS code
Flarum seem to have had some kind of user display in the sign up modal 
on successful sign up, which no longer exists.

https://github.com/flarum/core/blob/v0.1.0-beta/js/forum/src/components/SignUpModal.js#L111
* chore: Deprecate unneeded vendor mixins
* chore: Normalize property values format
Co-authored-by: David Wheatley <hi@davwheat.dev>
* chore: Remove @-webkit-keyframes
* chore: Combine animation properties
* chore: Avoid `all` for transition
* chore: translate3d is no longer necessary for hardware acceleration
* fix: Lost cursor pointer to normalize update
* chore: Use CSS variables for more things
* chore: Remove unecessary overspecification
Co-authored-by: David Wheatley <hi@davwheat.dev>

framework/core/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;
+          --size: 25px;
-          height: 25px;
-          font-size: 12.5px;
 
           .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;
+          --size: 25px;
-          height: 25px;
-          font-size: 15px;
           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;

framework/core/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;
+      --size: 30px;
-      height: 30px;
-      font-size: 15px;
       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;
 

framework/core/less/admin/ExtensionWidget.less

@@ -77,13 +77,14 @@
 }
 
 .ExtensionIcon {
-  width: 90px;
+  --size: 90px;
-  height: 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;

framework/core/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 {

framework/core/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;
+  --alert-bg: @background;
-
+  --alert-color: @color;
-  &,
-  a,
-  a:hover,
-  .Button,
-  .Button:hover,
-  .Button:active,
-  .Button.active,
-  .Button:focus,
-  .Button.focus {
-    color: @color;
-  }
 }
 .Alert-controls {
   list-style-type: none;

framework/core/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;
   }
 }

framework/core/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);
+    box-shadow: 0 2px 6px @shadow-color;
-    .translate3d(-@drawer-width - 6px, 0, 0);
+    transform: translate(-@drawer-width - 6px, 0);
-    .transition-transform(0.2s);
+    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) {

framework/core/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;
+  --size: @size;
-  height: @size;
-  border-radius: @size;
-  font-size: @size / 2;
-  line-height: @size;
 }

framework/core/less/common/Badge.less

@@ -1,26 +1,27 @@
 .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-icon {
+    font-size: calc(~"0.56 * var(--size)");
+  }
 }
 
 .Badge--size(@size) {
-  width: @size;
+  --size: @size;
-  height: @size;
-  border-radius: @size / 2;
-  line-height: @size - 1px;
-
-  &, .Badge-icon {
-    font-size: 0.56 * @size;
-  }
 }
 
 .badges {

framework/core/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 {

framework/core/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;

framework/core/less/common/Dropdown.less

@@ -12,7 +12,7 @@
   margin: 7px 0;
   background: @body-bg;
   border-radius: @border-radius;
-  .box-shadow(0 2px 6px @shadow-color);
+  box-shadow: 0 2px 6px @shadow-color;
   list-style: none;
   text-align: left;
   color: @text-color;
@@ -35,11 +35,12 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      .box-shadow(none);
+      box-shadow: none;
       text-align: left;
       font-size: 13px;
       font-weight: normal;
       text-decoration: none;
+      cursor: pointer;
 
       &.hasIcon {
         padding-left: 40px;
@@ -154,7 +155,7 @@
     float: none;
     position: static;
     background: none;
-    .box-shadow(none);
+    box-shadow: none;
   }
 }
 
@@ -176,12 +177,12 @@
     display: block;
     max-height: 70vh;
     border-radius: 0;
-    .box-shadow(0 2px 6px @shadow-color);
+    box-shadow: 0 2px 6px @shadow-color;
     visibility: hidden;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-    .translate3d(0, 70vh, 0);
+    transform: translate(0, 70vh);
-    .transition-transform(~" 0.3s, visibility 0s 0.3s");
+    transition: transform 0.3s, visibility 0s 0.3s;
 
     > li {
       > a, > button {
@@ -222,8 +223,8 @@
   .dropdown-backdrop {
     background: fade(@secondary-color, 90%);
     opacity: 0;
-    .transition(~"opacity 0.3s");
+    transition: opacity 0.3s;
-    .translate3d(0, 0, 0);
+    transform: translate(0, 0);
 
     .open & {
       opacity: 1;

framework/core/less/common/FormControl.less

@@ -1,4 +1,5 @@
 .FormControl {
+  --transition: border-color .15s, background .15s;
   display: block;
   width: 100%;
   height: 36px;
@@ -9,7 +10,7 @@
   background-color: @control-bg;
   border: 2px solid transparent;
   border-radius: @border-radius;
-  .transition(~"border-color .15s, background .15s");
+  transition: var(--transition);
   -webkit-appearance: none;
 
   &:focus,

framework/core/less/common/LoadingIndicator.less

@@ -2,7 +2,7 @@
 // Loading Indicators
 
 .LoadingIndicator {
-  @spin-time: 750ms;
+  --spin-time: 750ms;
 
   // Use the value of `color` to maintain backwards compatibility
   border-color: currentColor;
@@ -14,7 +14,7 @@
   width: var(--size);
   height: var(--size);
 
-  animation: spin @spin-time linear infinite;
+  animation: spin var(--spin-time) linear infinite;
 
   // <div> container around the spinner
   // Used for positioning

framework/core/less/common/Modal.less

@@ -16,7 +16,7 @@
   z-index: @zindex-modal-background;
   background-color: @overlay-bg;
   opacity: 0;
-  .transition(0.2s opacity);
+  transition: opacity 0.2s;
 
   &.in {
     opacity: 1;
@@ -37,11 +37,11 @@
 
   // When fading in the modal, animate it to slide down
   .Modal {
-    .scale(0.9);
+    transform: scale(0.9);
-    .transition-transform(0.2s ease-out);
+    transition: transform 0.2s ease-out;
   }
   &.in .Modal {
-    .scale(1);
+    transform: scale(1);
   }
 }
 .modal-open .ModalManager {
@@ -126,7 +126,7 @@
   opacity: 0;
   pointer-events: none;
   border-radius: @border-radius;
-  .transition(opacity 0.2s);
+  transition: opacity 0.2s;
 
   &.active {
     opacity: 1;
@@ -146,8 +146,8 @@
     bottom: 0;
     top: 0;
     overflow: auto;
-    .transition-transform(0.2s);
+    transition: transform 0.2s ease-out;
-    .translate3d(0, 100vh, 0);
+    transform: translate(0, 100vh);
 
     &.in {
       -webkit-transform: none !important;
@@ -170,7 +170,7 @@
     border: 0;
     min-height: 100vh;
     padding-top: @header-height-phone;
-    .box-shadow(none);
+    box-shadow: none;
   }
   .Modal-header {
     padding: 0;
@@ -193,7 +193,7 @@
 
     border: 0;
     border-radius: @border-radius;
-    .box-shadow(0 7px 15px @shadow-color);
+    box-shadow: 0 7px 15px @shadow-color;
   }
   .Modal--small {
     max-width: 375px;

framework/core/less/common/Navigation.less

@@ -1,7 +1,7 @@
 .Navigation-back {
   z-index: 3 !important; // z-index of an active .btn-group .btn is 2
   border-radius: @border-radius !important;
-  .transition(border-radius 0.2s);
+  transition: border-radius 0.2s;
   max-width: 150px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -17,10 +17,10 @@
   opacity: 0;
   margin-left: -5px !important;
   border-radius: 0 @border-radius @border-radius 0;
-  .transition(~"opacity 0.2s, margin-left 0.2s");
+  transition: opacity 0.2s, margin-left 0.2s;
 
   .icon {
-    .rotate(45deg);
+    transform: rotate(45deg);
   }
 }
 
@@ -38,7 +38,7 @@
     }
   }
   .hasPane.panePinned .Navigation-pin .icon {
-    .rotate(0deg);
+    transform: rotate(0);
   }
 }
 

framework/core/less/common/Search.less

@@ -3,7 +3,7 @@
 }
 @media @tablet-up {
   .Search {
-    .transition(margin-left 0.4s);
+    transition: margin-left 0.4s;
 
     &.focused {
       margin-left: -400px;
@@ -59,7 +59,7 @@
     width: 225px;
     padding-left: 32px;
     padding-right: 32px;
-    .transition(all 0.4s);
+    transition: var(--transition), width 0.4s;
     box-sizing: inherit !important;
   }
 

framework/core/less/common/Tooltip.less

@@ -10,7 +10,7 @@
   font-weight: normal;
   line-height: 1.4;
   opacity: 0;
-  .transition(0.15s opacity linear);
+  transition: opacity 0.15s linear;
 
   &.in     { opacity: 1; }
   &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }

framework/core/less/common/mixins/header-background.less

@@ -6,7 +6,7 @@
   right: 0;
   z-index: @zindex-header;
   border-bottom: 1px solid @control-bg;
-  .transition(~"box-shadow 0.2s, -webkit-transform 0.2s");
+  transition: box-shadow 0.2s, transform 0.2s;
 
   @media @phone {
     height: @header-height-phone;

framework/core/less/common/mixins/vendor-prefixes.less

@@ -6,27 +6,34 @@
 
 // Animations
 // These remain for backwards compatibility with existing styles.
+/** @deprecated */
 .animation(@animation) {
   animation: @animation;
 }
+/** @deprecated */
 .animation-name(@name) {
   animation-name: @name;
 }
 .animation-duration(@duration) {
   animation-duration: @duration;
 }
+/** @deprecated */
 .animation-timing-function(@timing-function) {
   animation-timing-function: @timing-function;
 }
+/** @deprecated */
 .animation-delay(@delay) {
   animation-delay: @delay;
 }
+/** @deprecated */
 .animation-iteration-count(@iteration-count) {
   animation-iteration-count: @iteration-count;
 }
+/** @deprecated */
 .animation-direction(@direction) {
   animation-direction: @direction;
 }
+/** @deprecated */
 .animation-fill-mode(@fill-mode) {
   animation-fill-mode: @fill-mode;
 }
@@ -34,6 +41,7 @@
 // Backface visibility
 // Prevent browsers from flickering when using CSS 3D transforms.
 // Default value is `visible`, but can be changed to `hidden`
+/** @deprecated */
 .backface-visibility(@visibility) {
   // Safari
   -webkit-backface-visibility: @visibility;
@@ -42,17 +50,20 @@
 
 // Drop shadows
 // These remain for backwards compatibility with existing styles.
+/** @deprecated */
 .box-shadow(@shadow) {
   box-shadow: @shadow;
 }
 
 // Box sizing
 // These remain for backwards compatibility with existing styles.
+/** @deprecated */
 .box-sizing(@boxmodel) {
   box-sizing: @boxmodel;
 }
 
 // CSS3 Content Columns
+/** @deprecated */
 .content-columns(@column-count; @column-gap: @grid-gutter-width) {
   // Safari
   -webkit-column-count: @column-count;
@@ -63,6 +74,7 @@
 }
 
 // Optional hyphenation
+/** @deprecated */
 .hyphens(@mode: auto) {
   word-wrap: break-word;
   // Safari
@@ -81,63 +93,82 @@
 
 // Transformations
 // These remain for backwards compatibility with existing styles.
+/** @deprecated */
 .scale(@ratio) {
   transform: scale(@ratio);
 }
+/** @deprecated */
 .scale(@ratioX; @ratioY) {
   transform: scale(@ratioX, @ratioY);
 }
+/** @deprecated */
 .scaleX(@ratio) {
   transform: scaleX(@ratio);
 }
+/** @deprecated */
 .scaleY(@ratio) {
   transform: scaleY(@ratio);
 }
+/** @deprecated */
 .skew(@x; @y) {
   transform: skewX(@x) skewY(@y);
 }
+/** @deprecated */
 .translate(@x; @y) {
   transform: translate(@x, @y);
 }
+/** @deprecated */
 .translate3d(@x; @y; @z) {
   transform: translate3d(@x, @y, @z);
 }
+/** @deprecated */
 .rotate(@degrees) {
   transform: rotate(@degrees);
 }
+/** @deprecated */
 .rotateX(@degrees) {
   transform: rotateX(@degrees);
 }
+/** @deprecated */
 .rotateY(@degrees) {
   transform: rotateY(@degrees);
 }
+/** @deprecated */
 .perspective(@perspective) {
   perspective: @perspective;
 }
+/** @deprecated */
 .perspective-origin(@perspective) {
   perspective-origin: @perspective;
 }
+/** @deprecated */
 .transform-origin(@origin) {
   transform-origin: @origin;
 }
 
 // Transitions
 // These remain for backwards compatibility with existing styles.
+/** @deprecated */
 .transition(@transition) {
   transition: @transition;
 }
+/** @deprecated */
 .transition-property(@transition-property) {
   transition-property: @transition-property;
 }
+/** @deprecated */
 .transition-delay(@transition-delay) {
   transition-delay: @transition-delay;
 }
+/** @deprecated */
 .transition-duration(@transition-duration) {
   transition-duration: @transition-duration;
 }
+/** @deprecated */
 .transition-timing-function(@timing-function) {
   transition-timing-function: @timing-function;
 }
+/** @deprecated */
 .transition-transform(@transition) {
   transition: transform @transition;
 }

framework/core/less/common/scaffolding.less

@@ -2,7 +2,7 @@
   &,
   &:before,
   &:after {
-    .box-sizing(border-box);
+    box-sizing: border-box;
   }
 }
 
@@ -114,7 +114,7 @@ input[type="search"] {
 
 .fade {
   opacity: 0;
-  .transition(opacity .15s linear);
+  transition: opacity .15s linear;
   &.in {
     opacity: 1;
   }

framework/core/less/forum/Composer.less

@@ -3,7 +3,7 @@
 
 .Composer {
   pointer-events: auto;
-  .box-shadow(0 2px 6px @shadow-color);
+  box-shadow: 0 2px 6px @shadow-color;
 
   &.minimized {
     height: 46px;
@@ -221,20 +221,20 @@
     right: 0;
     z-index: @zindex-composer;
     pointer-events: none;
-    .transition(left 0.2s);
+    transition: left 0.2s;
   }
   .Composer {
     border-radius: @border-radius @border-radius 0 0;
     background: fade(@body-bg, 95%);
     position: relative;
     height: 300px;
-    .transition(~"background 0.2s, box-shadow 0.2s");
+    transition: background 0.2s, box-shadow 0.2s;
 
     &.active, &.fullScreen {
       background: @body-bg;
     }
     &.active:not(.fullScreen) {
-      .box-shadow(~"0 0 0 2px @{primary-color}, 0 2px 6px @{shadow-color}");
+      box-shadow: 0 0 0 2px @primary-color, 0 2px 6px @shadow-color;
     }
     &.fullScreen {
       position: fixed;

framework/core/less/forum/DiscussionPage.less

@@ -79,8 +79,8 @@
     background: @body-bg;
     padding-bottom: 40px;
     border-top: 1px solid @control-bg;
-    .box-shadow(0 6px 6px @shadow-color);
+    box-shadow: 0 6px 6px @shadow-color;
-    .transition(left 0.2s);
+    transition: left 0.2s;
 
     .affix & {
       position: fixed;
@@ -128,7 +128,7 @@
   .DiscussionPage-list {
     .panePinned & {
       left: 0;
-      .transition(none);
+      transition: none;
     }
   }
   // When the pane is pinned, move the other page content inwards

framework/core/less/forum/NotificationsDropdown.less

@@ -37,7 +37,7 @@
   padding: 2px 4px 3px;
   line-height: 1em;
   border-radius: 10px;
-  .box-shadow(0 0 0 1px @header-bg);
+  box-shadow: 0 0 0 1px @header-bg;
   min-width: 16px;
   height: 16px;
   text-align: center;

framework/core/less/forum/Post.less

@@ -65,7 +65,7 @@
     top: -10px;
     left: -100px;
     z-index: @zindex-dropdown;
-    .transition(~"opacity 0.2s, transform 0.2s");
+    transition: opacity 0.2s, transform 0.2s;
     transform: scale(0.95);
     transform-origin: left top;
     opacity: 0;
@@ -297,7 +297,7 @@
   float: right;
   position: relative;
 
-  .transition(opacity 0.2s);
+  transition: opacity 0.2s;
 
   .EventPost &, .Post--hidden:not(.revealContent) & {
     margin-top: -27px;

framework/core/less/forum/PostStream.less

@@ -22,14 +22,8 @@
   50% {opacity: 1}
   100% {opacity: 0.5}
 }
-@-webkit-keyframes blink {
-  0% {opacity: 0.5}
-  50% {opacity: 1}
-  100% {opacity: 0.5}
-}
 .LoadingPost {
-  .animation(blink 1s linear);
+  animation: blink 1s linear infinite;
-  .animation-iteration-count(infinite);
 }
 .fakeText {
   display: inline-block;
@@ -63,46 +57,22 @@
   }
 }
 
-// .item.highlight .post {
-//   &:before {
-//     content: "";
-//     position: absolute;
-//     left: -30px;
-//     top: -5px;
-//     bottom: -5px;
-//     width: 5px;
-//     border-radius: @border-radius;
-//     background: @fl-primary-color;
-//   }
-// }
-@-webkit-keyframes pulsate {
-  0% {-webkit-transform: scale(1)}
-  50% {-webkit-transform: scale(1.02)}
-  100% {-webkit-transform: scale(1)}
-}
 @keyframes pulsate {
   0% {transform: scale(1)}
   50% {transform: scale(1.02)}
   100% {transform: scale(1)}
 }
 .pulsate {
-  .animation(pulsate 1s ease-in-out);
+  animation: pulsate 1s ease-in-out infinite;
-  .animation-iteration-count(infinite);
 }
 .flash {
-  .animation(pulsate 0.2s ease-in-out);
+  animation: pulsate 0.2s ease-in-out;
-  .animation-iteration-count(1);
 }
 
-@-webkit-keyframes fadeIn {
-  0% {opacity: 0}
-  100% {opacity: 1}
-}
 @keyframes fadeIn {
   0% {opacity: 0}
   100% {opacity: 1}
 }
 .fadeIn {
-  .animation(fadeIn 0.4s ease-in-out);
+  animation: fadeIn 0.4s ease-in-out;
-  .animation-iteration-count(1);
 }

framework/core/less/forum/SignUpModal.less

@@ -1,48 +0,0 @@
-.SignUpModal-welcome {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: @border-radius;
-  text-align: center;
-  color: #fff;
-  font-size: 14px;
-
-  .light-contents();
-
-  .Avatar {
-    .Avatar--size(96px);
-    border: 4px solid @body-bg;
-    .box-shadow(0 2px 6px @shadow-color);
-  }
-  h3, p {
-    margin-bottom: 25px;
-  }
-  .Button {
-    font-size: 15px;
-    height: 50px;
-    padding: 15px 20px;
-  }
-  .darkenBackground {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-  }
-  .container {
-    width: auto !important;
-    padding: 50px 30px !important;
-    position: relative;
-  }
-}
-.SignUpModal--success .Modal-close .Button {
-  color: #fff;
-}
-
-@media @phone {
-  .SignUpModal-welcome .container {
-    padding-top: 56px + 60px;
-  }
-}

framework/core/less/forum/Slidable.less

@@ -23,7 +23,7 @@
       color: #fff !important;
       border: 0;
       border-radius: 0;
-      .box-shadow(none);
+      box-shadow: none;
       padding: 20px 0;
       text-align: right;
 
@@ -40,14 +40,14 @@
       left: unset;
     }
     .Slidable-content {
-      .transition(~"box-shadow 0.2s, border-radius 0.2s");
+      transition: box-shadow 0.2s, border-radius 0.2s;
 
       .sliding& {
         position: relative;
         background: @control-bg;
         z-index: 2;
         border-radius: 2px;
-        .box-shadow(0 2px 6px @shadow-color);
+        box-shadow: 0 2px 6px @shadow-color;
       }
     }
   }

framework/core/less/forum/UserCard.less

@@ -13,7 +13,7 @@
 }
 .UserCard--popover {
   width: 500px;
-  .box-shadow(0 2px 6px @shadow-color);
+  box-shadow: 0 2px 6px @shadow-color;
 
   &, .darkenBackground {
     border-radius: @border-radius;
@@ -64,7 +64,7 @@
   .Avatar {
     .Avatar--size(96px);
     border: 4px solid #fff;
-    .box-shadow(0 2px 6px @shadow-color);
+    box-shadow: 0 2px 6px @shadow-color;
 
     @media @phone {
       .Avatar--size(64px);