drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🔥 remove transition,transform,use-select mixin

Browse source
This commit is contained in:
jingsam 2016-11-27 00:25:19 +08:00
parent 192e2cb849
commit e26450485c
35 changed files with 104 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
build/build-style.js
View file

@ -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'))
});

2
package.json
View file

@ -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",

2
src/styles/common/base.less
View file

@ -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;

4
src/styles/components/back-top.less
View 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);

14
src/styles/components/badge.less
View 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;
}
}

2
src/styles/components/button.less
View 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;
}

4
src/styles/components/cascader.less
View file

@ -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;

2
src/styles/components/circle.less
View file

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

4
src/styles/components/collapse.less
View 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{

8
src/styles/components/input-number.less
View 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();

2
src/styles/components/loading-bar.less
View 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;

10
src/styles/components/page.less
View 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;

4
src/styles/components/progress.less
View 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;
}
}

14
src/styles/components/radio.less
View 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 {

6
src/styles/components/select.less
View 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);
}
}

10
src/styles/components/slider.less
View 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%);
}
}

6
src/styles/components/spin.less
View 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;
}
}

4
src/styles/components/steps.less
View 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;

6
src/styles/components/switch.less
View 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;
@ -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 {

4
src/styles/components/tag.less
View 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;

2
src/styles/components/timeline.less
View file

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

29
src/styles/mixins/animation.less
View file

@ -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;
}

5
src/styles/mixins/box-shadow.less
View file

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

2
src/styles/mixins/breadcrumb.less
View 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%);
}

10
src/styles/mixins/button.less
View 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,

10
src/styles/mixins/checkbox.less
View file

@ -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));
.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;
}
}
}

2
src/styles/mixins/clearfix.less
View file

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

8
src/styles/mixins/common.less
View 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);
transition: all @transition-time @ease-in-out;
}

4
src/styles/mixins/index.less
View file

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

2
src/styles/mixins/input.less
View file

@ -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();

2
src/styles/mixins/loading.less
View file

@ -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 {

2
src/styles/mixins/select.less
View 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;

2
src/styles/mixins/size.less
View file

@ -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
}

10
src/styles/mixins/transform.less
View file

@ -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;
}

15
src/styles/mixins/transition.less
View file

@ -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;
}