🔥 remove transition,transform,use-select mixin

build/build-style.js

@@ -1,5 +1,5 @@
 var gulp = require('gulp');
-var minifyCSS = require('gulp-minify-css');
+var cleanCSS = require('gulp-clean-css');
 var less = require('gulp-less');
 var rename = require('gulp-rename');
 var autoprefixer = require('gulp-autoprefixer');
@@ -9,9 +9,9 @@ gulp.task('css', function () {
      gulp.src('../src/styles/index.less')
          .pipe(less())
          .pipe(autoprefixer({
-            browsers: ['last 2 versions']
+            browsers: ['last 2 versions', 'ie > 8']
          }))
-         .pipe(minifyCSS())
+         .pipe(cleanCSS())
          .pipe(rename('iview.css'))
          .pipe(gulp.dest('../dist/styles'))
 });

package.json

@@ -57,8 +57,8 @@
     "file-loader": "^0.8.5",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^3.1.1",
+    "gulp-clean-css": "^2.0.13",
     "gulp-less": "^3.1.0",
-    "gulp-minify-css": "^1.2.4",
     "gulp-rename": "^1.2.2",
     "html-loader": "^0.3.0",
     "less": "^2.7.1",

src/styles/common/base.less

@@ -46,7 +46,7 @@ a {
     text-decoration: none;
     outline: none;
     cursor: pointer;
-    .transition(color @transition-time ease);
+    transition: color @transition-time ease;
 
     &:hover {
         color: @link-hover-color;

src/styles/components/back-top.less

@@ -13,8 +13,8 @@
     &-inner {
         background-color: rgba(0,0,0,.6);
         border-radius: 2px;
-        .box-shadow(0 1px 3px rgba(0,0,0,.2));
+        box-shadow: 0 1px 3px rgba(0,0,0,.2);
-        .transition(all @transition-time @ease-in-out);
+        transition: all @transition-time @ease-in-out;
 
         &:hover {
             background-color: rgba(0,0,0,.7);

src/styles/components/badge.less

@@ -8,7 +8,7 @@
 
     &-count {
         position: absolute;
-        .transform(translateX(50%));
+        transform: translateX(50%);
         top: -10px;
         right: 0;
         height: 20px;
@@ -22,9 +22,9 @@
         padding: 0 6px;
         font-size: 12px;
         white-space: nowrap;
-        .transform-origin(-10% center);
+        transform-origin: -10% center;
         z-index: 10;
-        .box-shadow(0 0 0 1px #fff);
+        box-shadow: 0 0 0 1px #fff;
 
         a,
         a:hover {
@@ -35,14 +35,14 @@
             top: auto;
             display: block;
             position: relative;
-            .transform(translateX(0));
+            transform: translateX(0);
         }
     }
 
     &-dot {
         position: absolute;
-        .transform(translateX(-50%));
+        transform: translateX(-50%);
-        .transform-origin(0 center);
+        transform-origin: 0 center;
         top: -4px;
         right: -8px;
         height: 8px;
@@ -50,6 +50,6 @@
         border-radius: 100%;
         background: @error-color;
         z-index: 10;
-        .box-shadow(0 0 0 1px #fff);
+        box-shadow: 0 0 0 1px #fff;
     }
 }

src/styles/components/button.less

@@ -82,7 +82,7 @@
         content: '';
         border-radius: inherit;
         z-index: 1;
-        .transition(opacity @transition-time);
+        transition: opacity @transition-time;
         pointer-events: none;
         display: none;
     }

src/styles/components/cascader.less

@@ -30,7 +30,7 @@
         .inner-arrow();
     }
     &-visible &-arrow:nth-of-type(2) {
-        .transform(rotate(180deg));
+        transform: rotate(180deg);
     }
 
     .@{select-dropdown-prefix-cls} {
@@ -67,7 +67,7 @@
         & &-item{
             position: relative;
             padding-right: 24px;
-            .transition(all @transition-time @ease-in-out);
+            transition: all @transition-time @ease-in-out;
 
             i{
                 font-size: @font-size-small;

src/styles/components/circle.less

@@ -10,7 +10,7 @@
         position: absolute;
         left: 0;
         top: 50%;
-        .transform(translateY(-50%));
+        transform: translateY(-50%);
         line-height: 1;
     }
 }

src/styles/components/collapse.less

@@ -20,12 +20,12 @@
             position: relative;
 
             > i{
-                .transition(transform @transition-time @ease-in-out);
+                transition: transform @transition-time @ease-in-out;
             }
         }
     }
     &  > &-item&-item-active > &-header > i{
-        .transform(rotate(90deg));
+        transform: rotate(90deg);
     }
 
     &-content{

src/styles/components/input-number.less

@@ -30,7 +30,7 @@
         top: 0;
         right: 0;
         opacity: 0;
-        .transition(opacity @transition-time @ease-in-out);
+        transition: opacity @transition-time @ease-in-out;
     }
 
     &:hover &-handler-wrap {
@@ -73,10 +73,10 @@
         line-height: 12px;
         font-size: 14px;
         color: #999;
-        .user-select();
+        user-select: none;
         position: absolute;
         right: 4px;
-        .transition(all @transition-time linear);
+        transition: all @transition-time linear;
     }
 
     &:hover {
@@ -107,7 +107,7 @@
         color: #666;
         border: 0;
         border-radius: @btn-border-radius;
-        .transition(all @transition-time linear);
+        transition: all @transition-time linear;
 
         &[disabled] {
             .disabled();

src/styles/components/loading-bar.less

@@ -9,7 +9,7 @@
     z-index: @zindex-loading-bar;
 
     &-inner {
-        .transition(width @transition-time linear);
+        transition: width @transition-time linear;
 
         &-color-primary {
             background-color: @primary-color;

src/styles/components/page.less

@@ -19,18 +19,18 @@
         text-align: center;
         list-style: none;
         background-color: #fff;
-        .user-select();
+        user-select: none;
         cursor: pointer;
         font-family: Arial;
         border: 1px solid @border-color-base;
         border-radius: @btn-border-radius;
-        .transition(all @transition-time @ease-in-out);
+        transition: all @transition-time @ease-in-out;
 
         a {
             margin: 0 6px;
             text-decoration: none;
             color: @text-color;
-            //.transition(none);
+            //transition: none;
         }
 
         &:hover {
@@ -114,7 +114,7 @@
         font-family: Arial;
         border: 1px solid @border-color-base;
         border-radius: @btn-border-radius;
-        .transition(all @transition-time @ease-in-out);
+        transition: all @transition-time @ease-in-out;
     }
 
     &-prev,
@@ -202,7 +202,7 @@
             outline: none;
             border: 1px solid @border-color-base;
             border-radius: @btn-border-radius;
-            .transition(border-color @transition-time @ease-in-out);
+            transition: border-color @transition-time @ease-in-out;
 
             &:hover {
                 border-color: @primary-color;

src/styles/components/progress.less

@@ -29,7 +29,7 @@
     &-bg {
         border-radius: 100px;
         background-color: @info-color;
-        .transition(all @transition-time linear);
+        transition: all @transition-time linear;
         position: relative;
     }
 
@@ -52,7 +52,7 @@
             bottom: 0;
             background: #fff;
             border-radius: 10px;
-            .animation(ivu-progress-active 2s @ease-in-out infinite);
+            animation: ivu-progress-active 2s @ease-in-out infinite;
         }
     }
 

src/styles/components/radio.less

@@ -42,7 +42,7 @@
         background-color: #fff;
         border: 1px solid @border-color-base;
         border-radius: 50%;
-        .transition(all @transition-time @ease-in-out);
+        transition: all @transition-time @ease-in-out;
 
         &:after {
             position: absolute;
@@ -57,8 +57,8 @@
             content: ' ';
             background-color: @primary-color;
             opacity: 0;
-            .transition(all @transition-time @ease-in-out);
+            transition: all @transition-time @ease-in-out;
-            .transform(scale(0));
+            transform: scale(0);
         }
     }
 
@@ -80,8 +80,8 @@
         border-color: @primary-color;
         &:after {
             opacity: 1;
-            .transform(scale(1));
+            transform: scale(1);
-            .transition(all @transition-time @ease-in-out);
+            transition: all @transition-time @ease-in-out;
         }
     }
     &:hover {
@@ -138,7 +138,7 @@ span.@{radio-prefix-cls} + * {
         padding: 0 16px;
         font-size: @font-size-small;
         color: @btn-default-color;
-        .transition(all @transition-time ease-in-out);
+        transition: all @transition-time ease-in-out;
         cursor: pointer;
         border: 1px solid @border-color-base;
         border-left: 0;
@@ -156,7 +156,7 @@ span.@{radio-prefix-cls} + * {
             left: -1px;
             background: @border-color-base;
             visibility: hidden;
-            .transition(all @transition-time ease-in-out);
+            transition: all @transition-time ease-in-out;
         }
 
         &:first-child {

src/styles/components/select.less

@@ -15,13 +15,13 @@
         display: block;
         box-sizing: border-box;
         outline: none;
-        .user-select();
+        user-select: none;
         cursor: pointer;
 
         background-color: #fff;
         border-radius: @btn-border-radius;
         border: 1px solid @border-color-base;
-        .transition(all @transition-time @ease-in-out);
+        transition: all @transition-time @ease-in-out;
 
         .@{select-prefix-cls}-arrow:nth-of-type(1) {
             display: none;
@@ -50,7 +50,7 @@
         }
 
         .@{select-prefix-cls}-arrow:nth-of-type(2) {
-            .transform(rotate(180deg));
+            transform: rotate(180deg);
         }
     }
 

src/styles/components/slider.less

@@ -18,11 +18,11 @@
         background-color: transparent;
         position: absolute;
         top: @slider-button-wrap-offset;
-        .transform(translateX(-50%));
+        transform: translateX(-50%);
 
         .@{tooltip-prefix-cls} {
             display: block;
-            .user-select();
+            user-select: none;
         }
     }
 
@@ -32,13 +32,13 @@
         border: 2px solid @slider-color;
         border-radius: 50%;
         background-color: #fff;
-        .transition(all @transition-time linear);
+        transition: all @transition-time linear;
 
         &:hover,
         &-dragging
         {
             border-color: @primary-color;
-            .transform(scale(1.5));
+            transform: scale(1.5);
         }
 
         &:hover{
@@ -63,7 +63,7 @@
         .square(@slider-height);
         border-radius: 50%;
         background-color: @slider-disabled-color;
-        .transform(translateX(-50%));
+        transform: translateX(-50%);
     }
 }
 

src/styles/components/spin.less

@@ -14,7 +14,7 @@
         border-radius: 50%;
         background-color: @primary-color;
         .square(@spin-dot-size);
-        .animation(ani-spin-bounce 1s 0s ease-in-out infinite);
+        animation: ani-spin-bounce 1s 0s ease-in-out infinite;
     }
 
     &-large &-dot {
@@ -59,11 +59,11 @@
 
 @keyframes ani-spin-bounce {
     0% {
-        .transform(scale(0));
+        transform: scale(0);
     }
 
     100% {
-        .transform(scale(1));
+        transform: scale(1);
         opacity: 0;
     }
 }

src/styles/components/steps.less

@@ -61,7 +61,7 @@
             .@{steps-prefix-cls}-tail > i:after {
                 width: 100%;
                 background: @primary-color;
-                .transition(all @transition-time @ease-in-out);
+                transition: all @transition-time @ease-in-out;
                 opacity: 1;
             }
             .@{steps-prefix-cls}-title {
@@ -142,7 +142,7 @@
         border: 1px solid @steps-wait-icon-color;
         border-radius: 50%;
         font-size: 14px;
-        .transition(background-color @transition-time @ease-in-out);
+        transition: background-color @transition-time @ease-in-out;
 
         > .@{steps-prefix-cls}-icon {
             line-height: 1;

src/styles/components/switch.less

@@ -11,8 +11,8 @@
     background-color: #ccc;
     position: relative;
     cursor: pointer;
-    .user-select();
+    user-select: none;
-    .transition(all @transition-time @ease-in-out);
+    transition: all @transition-time @ease-in-out;
 
     &-inner {
         color: #fff;
@@ -37,7 +37,7 @@
         left: 1px;
         top: 1px;
         cursor: pointer;
-        .transition2(left @transition-time @ease-in-out, width @transition-time @ease-in-out);
+        transition: left @transition-time @ease-in-out, width @transition-time @ease-in-out;
     }
 
     &:active:after {

src/styles/components/tag.less

@@ -15,7 +15,7 @@
     opacity: 1;
     overflow: hidden;
     cursor: pointer;
-    //.transition(all @transition-time @ease-in-out);
+    //transition: all @transition-time @ease-in-out;
 
     &-dot{
         height: 32px;
@@ -146,7 +146,7 @@
         opacity: 0.66;
         position: relative;
         top: 1px;
-        //.transition(all @transition-time @ease-in-out);
+        //transition: all @transition-time @ease-in-out;
 
         &:hover {
             opacity: 1;

src/styles/components/timeline.less

@@ -58,7 +58,7 @@
             font-size: @font-size-base;
             position: absolute;
             left: -13px;
-            .transform(translateY(-50%));
+            transform: translateY(-50%);
         }
 
         &-content {

src/styles/mixins/animation.less

@@ -1,29 +0,0 @@
-.animation(@string) {
-    -webkit-animation:  @string;
-    -moz-animation:     @string;
-    animation:          @string;
-}
-
-.animation-duration(@string) {
-    -webkit-animation-duration    : @string;
-    -moz-animation-duration       : @string;
-    animation-duration            : @string;
-}
-
-.animation-fill-mode(@string) {
-    -webkit-animation-fill-mode    : @string;
-    -moz-animation-fill-mode       : @string;
-    animation-fill-mode            : @string;
-}
-
-.animation-play-state(@string) {
-    -webkit-animation-play-state    : @string;
-    -moz-animation-play-state       : @string;
-    animation-play-state            : @string;
-}
-
-.animation-name(@string) {
-    -webkit-animation-name    : @string;
-    -moz-animation-name       : @string;
-    animation-name            : @string;
-}

src/styles/mixins/box-shadow.less

@@ -1,5 +0,0 @@
-.box-shadow (@string) {
-    -webkit-box-shadow: @string;
-    -moz-box-shadow:    @string;
-    box-shadow:         @string;
-}

src/styles/mixins/breadcrumb.less

@@ -6,7 +6,7 @@
 
     a {
         color: @text-color;
-        .transition(color @transition-time @ease-in-out);
+        transition: color @transition-time @ease-in-out;
         &:hover {
             color: tint(@primary-color, 20%);
         }

src/styles/mixins/button.less

@@ -120,11 +120,11 @@
     border: 1px solid transparent;
     white-space: nowrap;
     line-height: @line-height-base;
-    .user-select();
+    user-select: none;
     .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
-    .transform(translate3d(0, 0, 0));
+    transform: translate3d(0, 0, 0);
-    //.transition(all @transition-time linear);
+    //transition: all @transition-time linear;
-    .transition3(color @transition-time linear, background-color @transition-time linear, border @transition-time linear);
+    transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear;
 
     > .@{css-prefix-iconfont} {
         line-height: 1;
@@ -142,7 +142,7 @@
 
     &:not([disabled]):active {
         outline: 0;
-        .transition(none)
+        transition: none;
     }
 
     &.disabled,

src/styles/mixins/checkbox.less

@@ -31,7 +31,7 @@
             border: 1px solid @border-color-base;
             border-radius: 2px;
             background-color: #fff;
-            .transition2(border-color @transition-time @ease-in-out,background-color @transition-time @ease-in-out);
+            transition: border-color @transition-time @ease-in-out, background-color @transition-time @ease-in-out;
 
             &:after {
                 content: '';
@@ -44,8 +44,8 @@
                 border: 2px solid #fff;
                 border-top: 0;
                 border-left: 0;
-                .transform(rotate(45deg) scale(0));
+                transform: rotate(45deg) scale(0);
-                .transition(all @transition-time @ease-in-out);
+                transition: all @transition-time @ease-in-out;
             }
         }
 
@@ -91,8 +91,8 @@
                 border: 2px solid #fff;
                 border-top: 0;
                 border-left: 0;
-                .transform(rotate(45deg) scale(1));
+                transform: rotate(45deg) scale(1);
-                .transition(all @transition-time @ease-in-out);
+                transition: all @transition-time @ease-in-out;
             }
         }
     }

src/styles/mixins/clearfix.less

@@ -1,5 +1,3 @@
-// mixins for clearfix
-
 .clearfix() {
     zoom: 1;
     &:before,

src/styles/mixins/common.less

@@ -14,12 +14,6 @@
     }
 }
 
-.user-select(@type: none) {
-    -webkit-user-select: @type;
-    -moz-user-select: @type;
-    user-select: @type;
-}
-
 // for select and input like component's arrow
 .inner-arrow() {
     position: absolute;
@@ -29,5 +23,5 @@
     margin-top: -7px;
     font-size: @font-size-base;
     color: @subsidiary-color;
-    .transition(all @transition-time @ease-in-out);
+    transition: all @transition-time @ease-in-out;
 }

src/styles/mixins/index.less

@@ -1,9 +1,5 @@
 @import "common";
 @import "clearfix";
-@import "box-shadow";
-@import "transition";
-@import "transform";
-@import "animation";
 @import "button";
 @import "layout";
 @import "size";

src/styles/mixins/input.less

@@ -45,7 +45,7 @@
     position: relative;
     cursor: text;
     .placeholder();
-    .transition3(border @transition-time @ease-in-out, background @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out);
+    transition: border @transition-time @ease-in-out, background @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
 
     &:hover {
         .hover();

src/styles/mixins/loading.less

@@ -1,6 +1,6 @@
 // Loading for loop
 .ivu-load-loop{
-    .animation(ani-load-loop 1s linear infinite);
+    animation: ani-load-loop 1s linear infinite;
 }
 
 @keyframes ani-load-loop {

src/styles/mixins/select.less

@@ -8,7 +8,7 @@
         white-space: nowrap;
         list-style: none;
         cursor: pointer;
-        .transition(background @transition-time @ease-in-out);
+        transition: background @transition-time @ease-in-out;
 
         &:hover{
             background: @background-color-select-hover;

src/styles/mixins/size.less

@@ -13,7 +13,7 @@
     @font-scale: unit(@size / @font-size-base);
     font-size: @font-size-base;
     font-size: ~"@{size} \9"; // ie8-9
-    .transform(scale(@font-scale) rotate(@rotate));
+    transform: scale(@font-scale) rotate(@rotate);
     :root & {
         font-size: @font-size-base; // reset ie9 and above
     }

src/styles/mixins/transform.less

@@ -1,10 +0,0 @@
-.transform(@string) {
-    -webkit-transform: @string;
-    -moz-transform:    @string;
-    transform:         @string;
-}
-.transform-origin(@string) {
-    -webkit-transform-origin: @string;
-    -moz-transform-origin:    @string;
-    transform-origin:         @string;
-}

src/styles/mixins/transition.less

@@ -1,15 +0,0 @@
-.transition (@string) {
-    -webkit-transition: @string;
-    -moz-transition:    @string;
-    transition:         @string;
-}
-.transition2 (@string1, @string2) {
-    -webkit-transition: @string1 , @string2;
-    -moz-transition:    @string1 , @string2;
-    transition:         @string1 , @string2;
-}
-.transition3 (@string1, @string2, @string3) {
-    -webkit-transition: @string1 , @string2 , @string3;
-    -moz-transition:    @string1 , @string2 , @string3;
-    transition:         @string1 , @string2 , @string3;
-}