Modify the directory structure

Modify the directory structure

src/styles/mixins/animation.less

@@ -0,0 +1,29 @@
+.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

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

src/styles/mixins/breadcrumb.less

@@ -0,0 +1,34 @@
+@breadcrumb-prefix-cls: ~"@{css-prefix}breadcrumb";
+
+.@{breadcrumb-prefix-cls} {
+    color: #999;
+    font-size: @font-size-base;
+
+    a {
+        color: @text-color;
+        .transition(color @transition-time @ease-in-out);
+        &:hover {
+            color: tint(@primary-color, 20%);
+        }
+    }
+
+    & > span:last-child {
+        font-weight: bold;
+        color: @text-color;
+    }
+
+    & > span:last-child &-item-separator {
+        display: none;
+    }
+
+    &-item-separator {
+        margin: 0 8px;
+        color: @border-color-base;
+    }
+
+    &-item-link {
+        > .ivu-icon + span {
+            margin-left: 4px;
+        }
+    }
+}

src/styles/mixins/button.less

@@ -0,0 +1,261 @@
+.button-size(@padding; @font-size; @border-radius) {
+    padding: @padding;
+    font-size: @font-size;
+    border-radius: @border-radius;
+}
+
+.button-color(@color; @background; @border) {
+    color: @color;
+    background-color: @background;
+    border-color: @border;
+    // a inside Button which only work in Chrome
+    // http://stackoverflow.com/a/17253457
+    > a:only-child {
+        color: currentColor;
+        &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            background: transparent;
+        }
+    }
+}
+
+.button-variant(@color; @background; @border) {
+    .button-color(@color; @background; @border);
+
+    &:hover
+    //&:focus
+    {
+        .button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
+    }
+    &:active,
+    &.active {
+        .button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
+    }
+
+    &.disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+            .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
+        }
+    }
+}
+
+.button-group-base(@btnClassName) {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    > .@{btnClassName} {
+        position: relative;
+        float: left;
+        &:hover,
+        //&:focus,
+        &:active,
+        &.active {
+            z-index: 2;
+        }
+    }
+
+    // size
+    &-large > .@{btnClassName} {
+        .button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
+    }
+
+    &-small > .@{btnClassName} {
+        .button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
+        > .@{css-prefix-iconfont} {
+            font-size: @btn-font-size;
+        }
+    }
+}
+
+.btn() {
+    display: inline-block;
+    margin-bottom: 0;
+    font-weight: @btn-font-weight;
+    text-align: center;
+    vertical-align: middle;
+    touch-action: manipulation;
+    cursor: pointer;
+    background-image: none;
+    border: 1px solid transparent;
+    white-space: nowrap;
+    line-height: @line-height-base;
+    user-select: none;
+    .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
+    .transform(translate3d(0, 0, 0));
+    .transition(all @transition-time linear);
+
+    > .@{css-prefix-iconfont} {
+        line-height: 1;
+    }
+
+    &,
+    &:active,
+    &:focus {
+        outline: 0;
+    }
+
+    &:not([disabled]):hover {
+        text-decoration: none;
+    }
+
+    &:not([disabled]):active {
+        outline: 0;
+        .transition(none)
+    }
+
+    &.disabled,
+    &[disabled] {
+        cursor: @cursor-disabled;
+        > * {
+            pointer-events: none;
+        }
+    }
+
+    &-large {
+        .button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
+    }
+
+    &-small {
+        .button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
+    }
+}
+
+// Default
+.btn-default() {
+    .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
+
+    &:hover
+    //&:focus
+    {
+        .button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
+    }
+    &:active,
+    &.active {
+        .button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%));
+    }
+}
+
+// Primary
+.btn-primary() {
+    .button-variant(@btn-primary-color; @btn-primary-bg; @primary-color);
+
+    &:hover,
+    //&:focus,
+    &:active,
+    &.active {
+        color: @btn-primary-color;
+    }
+}
+
+// Ghost
+.btn-ghost() {
+    .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
+
+    &:hover
+    //&:focus
+    {
+        .button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
+    }
+    &:active,
+    &.active {
+        .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
+    }
+}
+
+// Dashed
+.btn-dashed() {
+    .button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
+    border-style: dashed;
+
+    &:hover
+    //&:focus
+    {
+        .button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
+    }
+    &:active,
+    &.active {
+        .button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
+    }
+}
+
+// Circle for Icon
+.btn-circle(@btnClassName: ivu-btn) {
+    .square(@btn-circle-size);
+    .button-size(0; @font-size-base + 2; 50%);
+
+    &.@{btnClassName}-large {
+        .square(@btn-circle-size-large);
+        .button-size(0; @btn-font-size-large + 2; 50%);
+    }
+
+    &.@{btnClassName}-small {
+        .square(@btn-circle-size-small);
+        .button-size(0; @font-size-base; 50%);
+    }
+}
+
+// Group
+.btn-group(@btnClassName: ivu-btn) {
+    .button-group-base(@btnClassName);
+
+    .@{btnClassName} + .@{btnClassName},
+    .@{btnClassName} + &,
+    & + .@{btnClassName},
+    & + & {
+        margin-left: -1px;
+    }
+
+    .@{btnClassName}:not(:first-child):not(:last-child) {
+        border-radius: 0;
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+
+    > .@{btnClassName}:first-child {
+        margin-left: 0;
+        &:not(:last-child) {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+            padding-right: 8px;
+        }
+    }
+
+    > .@{btnClassName}:last-child:not(:first-child) {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        padding-left: 8px;
+    }
+
+    & > & {
+        float: left;
+    }
+
+    & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
+        border-radius: 0;
+    }
+
+    & > &:first-child:not(:last-child) {
+        > .@{btnClassName}:last-child {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+            padding-right: 8px;
+        }
+    }
+
+    & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        padding-left: 8px;
+    }
+}

src/styles/mixins/checkbox.less

@@ -0,0 +1,158 @@
+.checkboxFn(@checkbox-prefix-cls: ~"@{css-prefix}checkbox") {
+    @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
+
+    // 普通状态
+    .@{checkbox-prefix-cls} {
+        display: inline-block;
+        vertical-align: middle;
+        white-space: nowrap;
+        cursor: pointer;
+        outline: none;
+        line-height: 1;
+        position: relative;
+
+        &:hover {
+            .@{checkbox-inner-prefix-cls} {
+                border-color: #bcbcbc;
+            }
+        }
+
+        &-inner {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            position: relative;
+            top: 0;
+            left: 0;
+            border: 1px solid @border-color-base;
+            border-radius: 3px;
+            background-color: #fff;
+            .transition2(border-color @transition-time @ease-in-out,background-color @transition-time @ease-in-out);
+            
+            &:after {
+                content: '';
+                display: table;
+                width: 5px;
+                height: 8px;
+                position: absolute;
+                top: 2px;
+                left: 4px;
+                border: 2px solid #fff;
+                border-top: 0;
+                border-left: 0;
+                .transform(rotate(45deg) scale(0));
+                .transition(all @transition-time @ease-in-out);
+            }
+        }
+
+        &-input {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 1;
+            cursor: pointer;
+            opacity: 0;
+        }
+    }
+
+    // 选中状态
+    .@{checkbox-prefix-cls}-checked {
+
+        &:hover {
+            .@{checkbox-inner-prefix-cls} {
+                border-color: @primary-color;
+            }
+        }
+
+        .@{checkbox-inner-prefix-cls} {
+            border-color: @primary-color;
+            background-color: @primary-color;
+
+            &:after {
+                content: '';
+                display: table;
+                width: 5px;
+                height: 8px;
+                position: absolute;
+                top: 2px;
+                left: 4px;
+                border: 2px solid #fff;
+                border-top: 0;
+                border-left: 0;
+                .transform(rotate(45deg) scale(1));
+                .transition(all @transition-time @ease-in-out);
+            }
+        }
+    }
+
+    // 禁用
+    .@{checkbox-prefix-cls}-disabled {
+        &.@{checkbox-prefix-cls}-checked {
+            &:hover {
+                .@{checkbox-inner-prefix-cls} {
+                    border-color: @border-color-base;
+                }
+            }
+
+            .@{checkbox-inner-prefix-cls} {
+                background-color: #f3f3f3;
+                border-color: @border-color-base;
+
+                &:after {
+                    animation-name: none;
+                    border-color: #ccc;
+                }
+            }
+        }
+
+        &:hover {
+            .@{checkbox-inner-prefix-cls} {
+                border-color: @border-color-base;
+            }
+        }
+
+        .@{checkbox-inner-prefix-cls} {
+            border-color: @border-color-base;
+            background-color: #f3f3f3;
+            &:after {
+                animation-name: none;
+                border-color: #f3f3f3;
+            }
+        }
+
+        .@{checkbox-inner-prefix-cls}-input {
+            cursor: default;
+        }
+
+        & + span {
+            color: #ccc;
+            cursor: @cursor-disabled;
+        }
+    }
+
+    .@{checkbox-prefix-cls}-wrapper {
+        cursor: pointer;
+        font-size: @font-size-base;
+        display: inline-block;
+        & + & {
+            margin-left: 8px;
+        }
+    }
+
+    .@{checkbox-prefix-cls}-wrapper + span,
+    .@{checkbox-prefix-cls} + span {
+        margin-left: 4px;
+        margin-right: 4px;
+    }
+
+    .@{checkbox-prefix-cls}-group {
+        font-size: @font-size-base;
+        &-item {
+            display: inline-block;
+        }
+    }
+}

src/styles/mixins/clearfix.less

@@ -0,0 +1,16 @@
+// mixins for clearfix
+
+.clearfix() {
+    zoom: 1;
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+    &:after {
+        clear: both;
+        visibility: hidden;
+        font-size: 0;
+        height: 0;
+    }
+}

src/styles/mixins/close.less

@@ -0,0 +1,10 @@
+.close-base(@top: 0) {
+    font-size: 22px;
+    color: @legend-color;
+    transition: color @transition-time ease;
+    position: relative;
+    top: @top;
+    &:hover {
+        color: #444;
+    }
+}

src/styles/mixins/common.less

@@ -0,0 +1,15 @@
+.placeholder(@color: @input-placeholder-color) {
+    // Firefox
+    &::-moz-placeholder {
+        color: @color;
+        opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+    }
+    // Internet Explorer 10+
+    &:-ms-input-placeholder {
+        color: @color;
+    }
+    // Safari and Chrome
+    &::-webkit-input-placeholder {
+        color: @color;
+    }
+}

src/styles/mixins/content.less

@@ -0,0 +1,32 @@
+@icon-prefix-cls: ~"@{css-prefix}icon";
+
+.content-header() {
+    border-bottom: 1px solid @border-color-split;
+    padding: 10px 16px;
+    line-height: 1;
+
+    p {
+        display: inline-block;
+        width: 100%;
+        height: 20px;
+        line-height: 20px;
+        font-size: 14px;
+        font-weight: bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.content-close(@top: 0) {
+    font-size: 12px;
+    position: absolute;
+    right: 16px;
+    top: 8px;
+    overflow: hidden;
+    cursor: pointer;
+
+    .@{icon-prefix-cls}-ios-close-empty {
+        .close-base(@top);
+    }
+}

src/styles/mixins/index.less

@@ -0,0 +1,17 @@
+@import "common";
+@import "clearfix";
+@import "box-shadow";
+@import "transition";
+@import "transform";
+@import "animation";
+@import "button";
+@import "layout";
+@import "size";
+@import "loading";
+@import "close";
+@import "checkbox";
+@import "input";
+@import "breadcrumb";
+@import "mask";
+@import "content";  // card、modal
+@import "tooltip";

src/styles/mixins/input.less

@@ -0,0 +1,77 @@
+.hover(@color: @input-hover-border-color) {
+    border-color: tint(@color, 20%);
+}
+
+.active(@color: @input-hover-border-color) {
+    border-color: tint(@color, 20%);
+    outline: 0;
+    box-shadow: 0 0 0 2px fade(@color, 20%);
+}
+
+.disabled() {
+    background-color: @input-disabled-bg;
+    opacity: 1;
+    cursor: @cursor-disabled;
+    color: #ccc;
+    &:hover {
+        .hover(@input-border-color);
+    }
+}
+
+.input-large() {
+    padding: @input-padding-vertical-large @input-padding-horizontal;
+    height: @input-height-large;
+}
+
+.input-small() {
+    padding: @input-padding-vertical-small @input-padding-horizontal;
+    height: @input-height-small;
+    border-radius: @border-radius-small;
+}
+
+.input() {
+    display: inline-block;
+    width: 100%;
+    height: @input-height-base;
+    line-height: @line-height-base;
+    padding: @input-padding-vertical-base @input-padding-horizontal;
+    font-size: @font-size-base;
+    border: 1px solid @input-border-color;
+    border-radius: @border-radius-base;
+    color: @input-color;
+    background-color: @input-bg;
+    background-image: none;
+    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);
+
+    &:hover {
+        .hover();
+    }
+
+    &:focus {
+        .active();
+    }
+
+    &[disabled],
+    fieldset[disabled] & {
+        .disabled();
+    }
+
+    // Reset height for textarea
+    textarea& {
+        max-width: 100%;
+        height: auto;
+        vertical-align: bottom;
+    }
+
+    // Size
+    &-large {
+        .input-large();
+    }
+
+    &-small {
+        .input-small();
+    }
+}

src/styles/mixins/layout.less

@@ -0,0 +1,65 @@
+@row-prefix-cls: ~"@{css-prefix}row";
+@col-prefix-cls: ~"@{css-prefix}col";
+
+.make-row(@gutter: @grid-gutter-width) {
+    position: relative;
+    margin-left: (@gutter / -2);
+    margin-right: (@gutter / -2);
+    height: auto;
+    .clearfix;
+}
+
+.float-grid-columns() {
+    .col(@index) { // initial
+        @item: ~".@{col-prefix-cls}-span-@{index}";
+        .col((@index + 1), @item);
+    }
+    .col(@index, @list) when (@index =< @grid-columns) { // general
+        @item: ~".@{col-prefix-cls}-span-@{index}";
+        .col((@index + 1), ~"@{list}, @{item}");
+    }
+    .col(@index, @list) when (@index > @grid-columns) { // terminal
+        @{list} {
+            float: left;
+            flex: 0 0 auto;
+        }
+    }
+    .col(1); // kickstart it
+}
+
+.loop-grid-columns(@index) when (@index > 0) {
+    .@{col-prefix-cls}-span-@{index} {
+        display: block;
+        width: percentage((@index / @grid-columns));
+    }
+    .@{col-prefix-cls}-push-@{index} {
+        left: percentage((@index / @grid-columns));
+    }
+    .@{col-prefix-cls}-pull-@{index} {
+        right: percentage((@index / @grid-columns));
+    }
+    .@{col-prefix-cls}-offset-@{index} {
+        margin-left: percentage((@index / @grid-columns));
+    }
+    .@{col-prefix-cls}-order-@{index} {
+        order: @index;
+    }
+    .loop-grid-columns((@index - 1));
+}
+
+.loop-grid-columns(@index) when (@index = 0) {
+    .@{col-prefix-cls}-@{index} {
+        display: none;
+    }
+    .@{col-prefix-cls}-push-@{index} {
+        left: auto;
+    }
+    .@{col-prefix-cls}-pull-@{index} {
+        right: auto;
+    }
+}
+
+.make-grid() {
+    .float-grid-columns();
+    .loop-grid-columns(@grid-columns);
+}

src/styles/mixins/loading.less

@@ -0,0 +1,10 @@
+// Loading for loop
+.ivu-load-loop{
+    .animation(ani-load-loop 1s linear infinite);
+}
+
+@keyframes ani-load-loop {
+    from { transform: rotate(0deg);}
+    50%  { transform: rotate(180deg);}
+    to   { transform: rotate(360deg);}
+}

src/styles/mixins/mask.less

@@ -0,0 +1,13 @@
+.mask() {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(55, 55, 55, 0.6);
+    height: 100%;
+
+    &-hidden {
+        display: none;
+    }
+}

src/styles/mixins/size.less

@@ -0,0 +1,20 @@
+.size(@width; @height) {
+    width: @width;
+    height: @height;
+}
+
+.square(@size) {
+    .size(@size; @size);
+}
+
+// fix chrome 12px bug, support ie
+.iconfont-size-under-12px(@size, @rotate: 0deg) {
+    display: inline-block;
+    @font-scale: unit(@size / @font-size-base);
+    font-size: @font-size-base;
+    font-size: ~"@{size} \9"; // ie8-9
+    .transform(scale(@font-scale) rotate(@rotate));
+    :root & {
+        font-size: @font-size-base; // reset ie9 and above
+    }
+}

src/styles/mixins/tooltip.less

@@ -0,0 +1,85 @@
+.popper(@arrow, @arrow-width, @arrow-distance, @bg){
+    display: block;
+    visibility: visible;
+    font-size: @font-size-small;
+    line-height: @line-height-base;
+    position: absolute;
+    z-index: @zindex-tooltip;
+
+    &[x-placement^="top"] {
+        padding: @arrow-width 0 @arrow-distance 0;
+    }
+    &[x-placement^="right"] {
+        padding: 0 @arrow-width 0 @arrow-distance;
+    }
+    &[x-placement^="bottom"] {
+        padding: @arrow-distance 0 @arrow-width 0;
+    }
+    &[x-placement^="left"] {
+        padding: 0 @arrow-distance 0 @arrow-width;
+    }
+
+    &[x-placement^="top"] .@{arrow} {
+        bottom: @arrow-distance - @arrow-width;
+        border-width: @arrow-width @arrow-width 0;
+        border-top-color: @bg;
+    }
+    &[x-placement="top"] .@{arrow} {
+        left: 50%;
+        margin-left: -@arrow-width;
+    }
+    &[x-placement="top-start"] .@{arrow} {
+        left: 16px;
+    }
+    &[x-placement="top-end"] .@{arrow} {
+        right: 16px;
+    }
+
+    &[x-placement^="right"] .@{arrow} {
+        left: @arrow-distance - @arrow-width;
+        border-width: @arrow-width @arrow-width @arrow-width 0;
+        border-right-color: @bg;
+    }
+    &[x-placement="right"] .@{arrow} {
+        top: 50%;
+        margin-top: -@arrow-width;
+    }
+    &[x-placement="right-start"] .@{arrow} {
+        top: 8px;
+    }
+    &[x-placement="right-end"] .@{arrow} {
+        bottom: 8px;
+    }
+
+    &[x-placement^="left"] .@{arrow} {
+        right: @arrow-distance - @arrow-width;
+        border-width: @arrow-width 0 @arrow-width @arrow-width;
+        border-left-color: @bg;
+    }
+    &[x-placement="left"] .@{arrow} {
+        top: 50%;
+        margin-top: -@arrow-width;
+    }
+    &[x-placement="left-start"] .@{arrow} {
+        top: 8px;
+    }
+    &[x-placement="left-end"] .@{arrow} {
+        bottom: 8px;
+    }
+
+    &[x-placement^="bottom"] .@{arrow} {
+        top: @arrow-distance - @arrow-width;
+        border-width: 0 @arrow-width @arrow-width;
+        border-bottom-color: @bg;
+    }
+    &[x-placement="bottom"] .@{arrow} {
+        left: 50%;
+        margin-left: -@arrow-width;
+    }
+    &[x-placement="bottom-start"] .@{arrow} {
+        left: 16px;
+    }
+    &[x-placement="bottom-end"] .@{arrow} {
+        right: 16px;
+    }
+}

src/styles/mixins/transform.less

@@ -0,0 +1,10 @@
+.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

@@ -0,0 +1,15 @@
+.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;
+}