Merge pull request #1367 from njam/css-autoprefixer

Breaking: Add autoprefixer

.travis.yml

@@ -20,6 +20,7 @@ before_script:
   - sh -c "if [ `php-config --vernum` -ge 50500 ]; then printf "yes\n" | pecl install apcu-beta; fi"
   - phpenv config-add tests/travis/php.ini
   - phpenv config-add tests/travis/php-$TRAVIS_PHP_VERSION.ini
+  - npm install -g autoprefixer
 
   - composer self-update
   - composer install --dev

layout/default/Component/Debug/default.less

@@ -3,7 +3,7 @@
   z-index: 9999;
   bottom: 0;
   left: 0;
-  .transform(translate3d(-100%, 0, 0));
+  transform: translate3d(-100%, 0, 0);
   background-color: lighten(@colorNotice, 40);
   border-left: 5px solid @colorNotice;
   white-space: nowrap;
@@ -72,7 +72,7 @@
     display: block;
     top: 0;
     right: 0;
-    .transform(translate3d(100%, 0, 0));
+    transform: translate3d(100%, 0, 0);
     padding: 0 5px;
     line-height: 22px;
     background-color: @colorNotice;

layout/default/Component/Example/tabs/icons.less

@@ -1,5 +1,5 @@
 .column {
-  .box-sizing(border-box);
+  box-sizing: border-box;
   padding: 10px 10px 10px 0;
   width: 50%;
   float: left;

layout/default/FormField/Boolean/switch.less

@@ -5,7 +5,7 @@ input[type=checkbox] {
     margin-left: 0;
 
     .handle {
-      .box-sizing(border-box);
+      box-sizing: border-box;
       position: relative;
       display: inline-block;
       width: 2 * @sizeSwitch + 5px;
@@ -34,7 +34,7 @@ input[type=checkbox] {
       }
 
       &:after {
-        .box-sizing(border-box);
+        box-sizing: border-box;
         left: 0;
         content: '';
         width: @sizeSwitch - 6px;
@@ -43,8 +43,8 @@ input[type=checkbox] {
         border: 1px solid @colorBg;
         border-radius: 50%;
         background-color: lighten(@colorFgSubtle, 10);
-        .transform(translateX(0));
-        .transition(200ms);
+        transform: translateX(0);
+        transition: 200ms;
       }
     }
 
@@ -65,7 +65,7 @@ input[type=checkbox] {
     }
 
     &:after {
-      .transform(translateX(@sizeSwitch + 4px));
+      transform: translateX(@sizeSwitch + 4px);
       background-color: lighten(@colorNotice, 30);
     }
   }

layout/default/FormField/TreeSelect/default.less

@@ -88,7 +88,7 @@
     }
 
     > .icon-arrow-right {
-      .transform(rotate(90deg));
+      transform: rotate(90deg);
       color: @colorFgHeading;
     }
   }

layout/default/css/animation.less

@@ -13,68 +13,64 @@
 
 @keyframes clickConfirm {
   0% {
-    .transform(scale(1));
+    transform: scale(1);
   }
   4% {
-    .transform(scale(1.3));
+    transform: scale(1.3);
   }
   7% {
-    .transform(scale(1));
+    transform: scale(1);
   }
   45% {
-    .transform(scale(.95));
+    transform: scale(.95);
   }
   50% {
-    .transform(scale(1));
+    transform: scale(1);
     opacity: 1;
   }
   60% {
-    .transform(scale(.95));
+    transform: scale(.95);
     opacity: .5;
   }
   70% {
-    .transform(scale(1));
+    transform: scale(1);
     opacity: 1;
   }
   80% {
-    .transform(scale(.95));
+    transform: scale(.95);
     opacity: 0.5;
   }
   90% {
-    .transform(scale(1));
+    transform: scale(1);
     opacity: 1;
   }
   91% {
-    .transform(scale(1.05));
+    transform: scale(1.05);
   }
   94% {
-    .transform(scale(.7));
+    transform: scale(.7);
     opacity: 1;
   }
   100% {
-    .transform(scale(1.4));
+    transform: scale(1.4);
     opacity: .1;
   }
 }
 
 @-webkit-keyframes spinner {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 
 @keyframes spinner {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }

layout/default/css/form.less

@@ -1,6 +1,6 @@
 .textinput {
-  .appearance(none);
-  .box-sizing(border-box);
+  appearance: none;
+  box-sizing: border-box;
   width: 100%;
   height: @heightInputText;
   overflow: hidden;
@@ -9,7 +9,7 @@
   border-radius: 0;
   background: @colorBg;
   border: 1px solid @colorFgBorderEmphasize2;
-  .transition(border-color .1s);
+  transition: border-color .1s;
 
   &:hover {
     border-left: 1px solid lighten(@colorNotice, 15);
@@ -55,7 +55,7 @@ textarea.textinput {
 .placeholder(lighten(@colorFgSubtle, 10));
 
 .button {
-  .box-sizing(border-box);
+  box-sizing: border-box;
   width: auto;
   height: @sizeButton;
   line-height: @sizeButton - 2px;
@@ -71,7 +71,7 @@ textarea.textinput {
   border-radius: 0;
   background-size: auto 200%;
   background-position: 0 0;
-  .transition(background-position 200ms);
+  transition: background-position 200ms;
 
   &:not(:disabled):active {
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@@ -210,7 +210,7 @@ input[type=checkbox], input[type=radio] {
     margin-left: @sizeCheckbox+4px;
 
     &:before {
-      .box-sizing(border-box);
+      box-sizing: border-box;
       position: absolute;
       content: "";
       display: block;
@@ -221,7 +221,7 @@ input[type=checkbox], input[type=radio] {
       left: -(@sizeCheckbox+4px);
       margin-top: -@sizeCheckbox/2;
       border: 1px solid @colorFgBorderEmphasize3;
-      .transition(100ms);
+      transition: 100ms;
     }
   }
 
@@ -260,7 +260,7 @@ input[type=checkbox] {
     html.no-svg & {
       background-image: image('checkbox.png');
     }
-    .background-size(contain);
+    background-size: contain;
   }
 
   + label {
@@ -271,14 +271,14 @@ input[type=checkbox] {
 }
 
 .formField, .formAction {
-  .box-sizing(border-box);
+  box-sizing: border-box;
   max-width: 100%;
   padding: 6px;
 }
 
 .formField {
   > label {
-    .box-sizing(border-box);
+    box-sizing: border-box;
     color: @colorFgLinkSubtle;
     font-weight: bold;
     padding-left: 2px;

layout/default/css/function.fancySelect.less

@@ -23,7 +23,7 @@
       width: 25px;
       text-align: center;
       color: @colorFgBorderEmphasize3;
-      .transition(200ms);
+      transition: 200ms;
     }
   }
 
@@ -38,7 +38,7 @@
     min-width: 100%;
     width: auto;
     opacity: 0;
-    .appearance(none);
+    appearance: none;
     cursor: pointer;
 
     &:not(:disabled) {

layout/default/css/function.usertext.less

@@ -7,15 +7,15 @@
 
 .usertext {
   .word_wrap;
-  .hyphens(auto);
+  hyphens: auto;
 
   &.oneline {
     display: inline-block;
     word-break: break-all; // needed for IE9
   }
 
   img:not(.emoticon) {
-    .box-sizing(border-box);
+    box-sizing: border-box;
     max-width: 100%;
     max-height: 1500px;
     margin: 5px 0;

layout/default/css/jquery.floatbox.less

@@ -18,11 +18,11 @@
 }
 
 .floatbox-overlay {
-  .transition(opacity 200ms);
+  transition: opacity 200ms;
 }
 
 .floatbox {
-  .transition(opacity 200ms);
+  transition: opacity 200ms;
 
   &:focus {
     outline: none;

layout/default/css/jquery.scrollShadow.less

@@ -1,7 +1,7 @@
 .scrollShadow {
   &:before, &:after {
     background-color: transparent;
-    .transition(200ms);
+    transition: 200ms;
   }
 
   &:before {

layout/default/css/jquery.toggleNext.less

@@ -3,7 +3,7 @@
   .icon-arrow-right {
     margin-right: 6px;
     display: inline-block;
-    .transition(200ms);
+    transition: 200ms;
   }
 
   &:hover, &.active {
@@ -14,7 +14,7 @@
     font-weight: bold;
 
     .icon-arrow-right {
-      .transform(rotate(90deg));
+      transform: rotate(90deg);
     }
   }
 }

layout/default/css/menu.less

@@ -49,7 +49,7 @@
       }
 
       &.active > a {
-        .transform(translate(1px, 1px));
+        transform: translate(1px, 1px);
         background-color: @colorBgEmphasize3;
       }
     }

layout/default/css/mixins.less

@@ -149,33 +149,16 @@
   }
 }
 
-// Vendor prefixing
-.appearance(@value) {
-  -webkit-appearance: @value;
-  -moz-appearance: @value;
-  appearance: @value;
-}
-
 .animation(@name, @duration: 300ms, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none) {
-  -webkit-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode;
   animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode;
 }
 
-.background-size(@value) {
-  -webkit-background-size: @value;
-  background-size: @value;
-}
-
-.hyphens(@arg) {
-  -webkit-hyphens: @arg;
-  -moz-hyphens: @arg;
-  hyphens: @arg;
+.gradient(@direction, @color1, @color2, @pos1: 0%, @pos2: 100%) when (@direction = horizontal) and (iscolor(@color1)) and (iscolor(@color2)) {
+  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=rgbahex(@color1),endColorstr=rgbahex(@color2));
+  background-image: linear-gradient(to right,@color1 @pos1,@color2 @pos2);
 }
 
-.transform-origin (@x:center, @y:center) {
-  -webkit-transform-origin: @x @y;
-  -moz-transform-origin: @x @y;
-  -ms-transform-origin: @x @y;
-  -o-transform-origin: @x @y;
-  transform-origin: @x @y;
+.gradient(@direction, @color1, @color2, @pos1: 0%, @pos2: 100%) when (@direction = vertical) and (iscolor(@color1)) and (iscolor(@color2)) {
+  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=rgbahex(@color1),endColorstr=rgbahex(@color2));
+  background-image: linear-gradient(to bottom,@color1 @pos1,@color2 @pos2);
 }

layout/default/css/spinner.less

@@ -6,7 +6,7 @@
   min-width: @spinnerSize;
 
   &:before {
-    .box-sizing(border-box);
+    box-sizing: border-box;
     content: '';
     position: absolute;
     width: @spinnerSize;