remove transition,transform,use-select mixin

jingsam
1 parent 192e2cb8
Showing 35 changed files with 104 additions and 175 deletions Show diff stats
build/build-style.js
package.json
src/styles/common/base.less
src/styles/components/back-top.less
src/styles/components/badge.less
src/styles/components/button.less
src/styles/components/cascader.less
src/styles/components/circle.less
src/styles/components/collapse.less
src/styles/components/input-number.less
src/styles/components/loading-bar.less
src/styles/components/page.less
src/styles/components/progress.less
src/styles/components/radio.less
src/styles/components/select.less
src/styles/components/slider.less
src/styles/components/spin.less
src/styles/components/steps.less
src/styles/components/switch.less
src/styles/components/tag.less
 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(&#39;css&#39;, 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'))
 });
@@ -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",
@@ -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;
@@ -74,4 +74,4 @@ kbd,
 pre,
 samp {
     font-family: @code-family;
-}
 \ No newline at end of file
+}
@@ -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));
-        .transition(all @transition-time @ease-in-out);
+        box-shadow: 0 1px 3px rgba(0,0,0,.2);
+        transition: all @transition-time @ease-in-out;
         &:hover {
             background-color: rgba(0,0,0,.7);
@@ -26,4 +26,4 @@
         font-size: 24px;
         padding: 8px 12px;
     }
-}
 \ No newline at end of file
+}
@@ -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-origin(0 center);
+        transform: translateX(-50%);
+        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;
     }
-}
 \ No newline at end of file
+}
@@ -82,7 +82,7 @@
         content: '';
         border-radius: inherit;
         z-index: 1;
-        .transition(opacity @transition-time);
+        transition: opacity @transition-time;
         pointer-events: none;
         display: none;
     }
@@ -99,4 +99,4 @@
     &-group {
         .btn-group(@btn-prefix-cls);
     }
-}
 \ No newline at end of file
+}
@@ -29,8 +29,8 @@
     &-arrow {
         .inner-arrow();
     }
-    &-visible &-arrow:nth-of-type(2){
-        .transform(rotate(180deg));
+    &-visible &-arrow:nth-of-type(2) {
+        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;
@@ -83,4 +83,4 @@
             }
         }
     }
-}
 \ No newline at end of file
+}
@@ -10,7 +10,7 @@
         position: absolute;
         left: 0;
         top: 50%;
-        .transform(translateY(-50%));
+        transform: translateY(-50%);
         line-height: 1;
     }
-}
 \ No newline at end of file
+}
@@ -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{
@@ -48,4 +48,4 @@
             border-radius: 0 0 3px 3px;
         }
     }
-}
 \ No newline at end of file
+}
@@ -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();
@@ -183,4 +183,4 @@
             .handler-disabled();
         }
     }
-}
 \ No newline at end of file
+}
@@ -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;
@@ -19,4 +19,4 @@
             background-color: @error-color;
         }
     }
-}
 \ No newline at end of file
+}
@@ -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;
@@ -266,4 +266,4 @@
             }
         }
     }
-}
 \ No newline at end of file
+}
@@ -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;
         }
     }
@@ -84,4 +84,4 @@
         opacity: 0;
         width: 100%;
     }
-}
 \ No newline at end of file
+}
@@ -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);
-            .transform(scale(0));
+            transition: all @transition-time @ease-in-out;
+            transform: scale(0);
         }
     }
@@ -80,8 +80,8 @@
         border-color: @primary-color;
         &:after {
             opacity: 1;
-            .transform(scale(1));
-            .transition(all @transition-time @ease-in-out);
+            transform: scale(1);
+            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 {
@@ -254,4 +254,4 @@ span.@{radio-prefix-cls} + * {
     &:last-child {
         border-radius: 0 @btn-border-radius-small @btn-border-radius-small 0;
     }
-}
 \ No newline at end of file
+}
@@ -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);
         }
     }
@@ -214,4 +214,4 @@
         height: 30px;
         line-height: 30px;
     }
-}
 \ No newline at end of file
+}
@@ -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%);
     }
 }
@@ -107,4 +107,4 @@
         float: right;
         margin-top: -14px;
     }
-}
 \ No newline at end of file
+}
@@ -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;
     }
-}
 \ No newline at end of file
+}
@@ -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;
@@ -350,4 +350,4 @@
         padding-left: 10px;
         margin-left: -10px;
     }
-}
 \ No newline at end of file
+}
@@ -11,8 +11,8 @@
     background-color: #ccc;
     position: relative;
     cursor: pointer;
-    .user-select();
-    .transition(all @transition-time @ease-in-out);
+    user-select: none;
+    transition: all @transition-time @ease-in-out;
     &-inner {
         color: #fff;
@@ -20,7 +20,7 @@
         position: absolute;
         left: 25px;
-        i{
+        i {
             width: 12px;
             height: 12px;
             text-align: center;
@@ -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 {
@@ -126,4 +126,4 @@
             color: #ccc;
         }
     }
-}
 \ No newline at end of file
+}
@@ -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;
@@ -190,4 +190,4 @@
     {
         background: @error-color;
     }
-}
 \ No newline at end of file
+}
@@ -58,7 +58,7 @@
             font-size: @font-size-base;
             position: absolute;
             left: -13px;
-            .transform(translateY(-50%));
+            transform: translateY(-50%);
         }
         &-content {
@@ -84,4 +84,4 @@
             min-height: 48px;
         }
     }
-}
 \ No newline at end of file
+}
-.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;
-}
 \ No newline at end of file
-.box-shadow (@string) {
-    -webkit-box-shadow: @string;
-    -moz-box-shadow:    @string;
-    box-shadow:         @string;
-}
 \ No newline at end of file
@@ -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%);
         }
@@ -31,4 +31,4 @@
             margin-left: 4px;
         }
     }
-}
 \ No newline at end of file
+}
@@ -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));
-    //.transition(all @transition-time linear);
-    .transition3(color @transition-time linear, background-color @transition-time linear, border @transition-time linear);
+    transform: translate3d(0, 0, 0);
+    //transition: all @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,
@@ -31,8 +31,8 @@
             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: '';
                 display: table;
@@ -44,8 +44,8 @@
                 border: 2px solid #fff;
                 border-top: 0;
                 border-left: 0;
-                .transform(rotate(45deg) scale(0));
-                .transition(all @transition-time @ease-in-out);
+                transform: rotate(45deg) scale(0);
+                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));
-                .transition(all @transition-time @ease-in-out);
+                transform: rotate(45deg) scale(1);
+                transition: all @transition-time @ease-in-out;
             }
         }
     }
@@ -166,4 +166,4 @@
             display: inline-block;
         }
     }
-}
 \ No newline at end of file
+}
-// mixins for clearfix
-
 .clearfix() {
     zoom: 1;
     &:before,
@@ -13,4 +11,4 @@
         font-size: 0;
         height: 0;
     }
-}
 \ No newline at end of file
+}
@@ -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);
-}
 \ No newline at end of file
+    transition: all @transition-time @ease-in-out;
+}
 @import "common";
 @import "clearfix";
-@import "box-shadow";
-@import "transition";
-@import "transform";
-@import "animation";
 @import "button";
 @import "layout";
 @import "size";
@@ -15,4 +11,4 @@
 @import "mask";
 @import "content";  // card、modal
 @import "tooltip";
-@import "select";
 \ No newline at end of file
+@import "select";
@@ -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();
 // Loading for loop
 .ivu-load-loop{
-    .animation(ani-load-loop 1s linear infinite);
+    animation: ani-load-loop 1s linear infinite;
 }
 @keyframes ani-load-loop {
     from { transform: rotate(0deg);}
     50%  { transform: rotate(180deg);}
     to   { transform: rotate(360deg);}
-}
 \ No newline at end of file
+}
@@ -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;
@@ -43,4 +43,4 @@
         padding: 7px 16px 8px;
         font-size: @font-size-base !important;
     }
-}
 \ No newline at end of file
+}
@@ -13,8 +13,8 @@
     @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
     }
-}
 \ No newline at end of file
+}
-.transform(@string) {
-    -webkit-transform: @string;
-    -moz-transform:    @string;
-    transform:         @string;
-}
-.transform-origin(@string) {
-    -webkit-transform-origin: @string;
-    -moz-transform-origin:    @string;
-    transform-origin:         @string;
-}
 \ No newline at end of file
-.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;
-}
 \ No newline at end of file