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

update the master branch to the latest

Browse source
This commit is contained in:
梁灏 2019-08-27 09:42:40 +08:00
parent 67d534df27
commit 23a0ba9831
611 changed files with 122648 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/styles/components/affix.less Normal file
View file

@ -0,0 +1,4 @@
.ivu-affix {
position: fixed;
z-index: @zindex-affix;
}

105
src/styles/components/alert.less Normal file
View file

@ -0,0 +1,105 @@
@alert-prefix-cls: ~"@{css-prefix}alert";
@icon-prefix-cls: ~"@{css-prefix}icon";
.@{alert-prefix-cls}{
position: relative;
padding: 8px 48px 8px 16px;
border-radius: @border-radius-small;
color: @text-color;
font-size: @font-size-small;
line-height: 16px;
margin-bottom: 10px;
&&-with-icon{
padding: 8px 48px 8px 38px;
}
&-icon {
font-size: @font-size-large;
top: 6px;
left: 12px;
position: absolute;
}
&-desc {
font-size: @font-size-small;
color: @text-color;
line-height: 21px;
display: none;
text-align: justify;
}
&-success {
border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`;
//background-color: tint(@success-color, 90%);
background-color: ~`colorPalette("@{success-color}", 1)`;
.@{alert-prefix-cls}-icon {
color: @success-color;
}
}
&-info {
border: @border-width-base @border-style-base ~`colorPalette("@{primary-color}", 3)`;
//background-color: tint(@primary-color, 90%);
background-color: ~`colorPalette("@{primary-color}", 1)`;
.@{alert-prefix-cls}-icon {
color: @primary-color;
}
}
&-warning {
border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`;
//background-color: tint(@warning-color, 90%);
background-color: ~`colorPalette("@{warning-color}", 1)`;
.@{alert-prefix-cls}-icon {
color: @warning-color;
}
}
&-error {
border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 3)`;
//background-color: tint(@error-color, 90%);
background-color: ~`colorPalette("@{error-color}", 1)`;
.@{alert-prefix-cls}-icon {
color: @error-color;
}
}
&-close {
.content-close(-3px);
}
&-with-desc {
padding: 16px;
position: relative;
border-radius: @border-radius-small;
margin-bottom: 10px;
color: @text-color;
line-height: 1.5;
}
&-with-desc&-with-icon{
padding: 16px 16px 16px 69px;
}
&-with-desc &-desc{
display: block;
}
&-with-desc &-message {
font-size: 14px;
color: @title-color;
display: block;
}
&-with-desc &-icon {
top: 50%;
left: 24px;
margin-top: -24px;
font-size: 28px;
}
&-with-banner{
border-radius: 0;
}
}

74
src/styles/components/anchor.less Normal file
View file

@ -0,0 +1,74 @@
@anchor-prefix: ~"@{css-prefix}anchor";
.@{anchor-prefix}{
&-wrapper{
overflow: auto;
padding-left: 4px;
margin-left: -4px;
}
&{
position: relative;
padding-left: @anchor-border-width;
&-ink {
position: absolute;
height: 100%;
left: 0;
top: 0;
&:before {
content: ' ';
position: relative;
width: @anchor-border-width;
height: 100%;
display: block;
background-color: @border-color-split;
margin: 0 auto;
}
&-ball {
display: inline-block;
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid @primary-color;
background-color: @body-background;
left: 50%;
transition: top @transition-time @ease-in-out;
transform: translate(-50%, 2px);
}
}
&.fixed &-ink &-ink-ball {
display: none;
}
}
&-link {
padding: 8px 0 8px 16px;
line-height: 1;
&-title {
display: block;
position: relative;
transition: all .3s;
color: @text-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 8px;
&:only-child {
margin-bottom: 0;
}
}
&-active > &-title {
color: @primary-color;
}
}
&-link &-link {
padding-top: 6px;
padding-bottom: 6px;
}
}

18
src/styles/components/auto-complete.less Normal file
View file

@ -0,0 +1,18 @@
@auto-complete-prefix-cls: ~"@{css-prefix}auto-complete";
.@{auto-complete-prefix-cls} {
.@{select-prefix-cls} {
&-not-found{
display: none;
}
}
.@{icon-prefix-cls}-ios-close{
display: none;
}
&:hover .@{icon-prefix-cls}-ios-close{
display: inline-block;
}
&.@{select-dropdown-prefix-cls} {
max-height: none;
}
}

59
src/styles/components/avatar.less Normal file
View file

@ -0,0 +1,59 @@
@avatar-prefix-cls: ~"@{css-prefix}avatar";
.@{avatar-prefix-cls} {
display: inline-block;
text-align: center;
background: @avatar-bg;
color: @avatar-color;
white-space: nowrap;
position: relative;
overflow: hidden;
vertical-align: middle;
&-image{
background: transparent;
}
.ivu-icon{
position: relative;
top: -1px;
}
.avatar-size(@avatar-size-base, @avatar-font-size-base);
&-large {
.avatar-size(@avatar-size-lg, @avatar-font-size-lg);
.ivu-icon{
position: relative;
top: -2px;
}
}
&-small {
.avatar-size(@avatar-size-sm, @avatar-font-size-sm);
}
&-square {
border-radius: @avatar-border-radius;
}
& > img {
width: 100%;
height: 100%;
}
}
.avatar-size(@size, @font-size) {
width: @size;
height: @size;
line-height: @size;
border-radius: @size / 2;
& > * {
line-height: @size;
}
&.@{avatar-prefix-cls}-icon {
font-size: @font-size;
}
}

29
src/styles/components/back-top.less Normal file
View file

@ -0,0 +1,29 @@
@backtop-prefix-cls: ~"@{css-prefix}back-top";
.@{backtop-prefix-cls} {
z-index: @zindex-back-top;
position: fixed;
cursor: pointer;
display: none;
&.@{backtop-prefix-cls}-show {
display: block;
}
&-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;
&:hover {
background-color: rgba(0,0,0,.7);
}
}
i{
color: #fff;
font-size: 24px;
padding: 8px 12px;
}
}

135
src/styles/components/badge.less Normal file
View file

@ -0,0 +1,135 @@
@badge-prefix-cls: ~"@{css-prefix}badge";
.@{badge-prefix-cls} {
position: relative;
display: inline-block;
&-count {
font-family: "Monospaced Number";
line-height: 1;
vertical-align: middle;
position: absolute;
transform: translateX(50%);
top: -10px;
right: 0;
height: 20px;
border-radius: 10px;
min-width: 20px;
background: @error-color;
border: 1px solid transparent;
color: #fff;
line-height: 18px;
text-align: center;
padding: 0 6px;
font-size: 12px;
white-space: nowrap;
transform-origin: -10% center;
z-index: 10;
box-shadow: 0 0 0 1px #fff;
a,
a:hover {
color: #fff;
}
&-alone {
top: auto;
display: block;
position: relative;
transform: translateX(0);
}
&-primary{
background: @primary-color;
}
&-success{
background: @success-color;
}
&-error{
background: @error-color;
}
&-warning{
background: @warning-color;
}
&-info{
background: @info-color;
}
&-normal{
background: @normal-color;
color: @subsidiary-color;
}
}
&-dot {
position: absolute;
transform: translateX(-50%);
transform-origin: 0 center;
top: -4px;
right: -8px;
height: 8px;
width: 8px;
border-radius: 100%;
background: @error-color;
z-index: 10;
box-shadow: 0 0 0 1px #fff;
}
&-status {
line-height: inherit;
vertical-align: baseline;
&-dot {
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
position: relative;
top: -1px;
}
&-success {
background-color: @success-color;
}
&-processing {
background-color: @processing-color;
position: relative;
&:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid @processing-color;
content: '';
animation: aniStatusProcessing 1.2s infinite ease-in-out;
}
}
&-default {
background-color: @normal-color;
}
&-error {
background-color: @error-color;
}
&-warning {
background-color: @warning-color;
}
&-text {
display: inline-block;
color: @text-color;
font-size: @font-size-small;
margin-left: 6px;
}
}
}
@keyframes aniStatusProcessing {
0% {
transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(2.4);
opacity: 0;
}
}

34
src/styles/components/breadcrumb.less Normal file
View file

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

190
src/styles/components/button.less Normal file
View file

@ -0,0 +1,190 @@
@btn-prefix-cls: ~"@{css-prefix}btn";
.@{btn-prefix-cls} {
.btn;
.btn-default;
&-long{
width: 100%;
}
& > .ivu-icon + span, & > span + .ivu-icon{
margin-left: 4px;
}
&-primary {
.btn-primary;
.@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:not(:first-child):not(:last-child) {
border-right-color: @btn-group-border;
border-left-color: @btn-group-border;
}
.@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:first-child {
&:not(:last-child) {
border-right-color: @btn-group-border;
&[disabled] {
border-right-color: @btn-default-border;
}
}
}
.@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:last-child:not(:first-child),
.@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) & + .@{btn-prefix-cls} {
border-left-color: @btn-group-border;
&[disabled] {
border-left-color: @btn-default-border;
}
}
.@{btn-prefix-cls}-group-vertical &:not(:first-child):not(:last-child) {
border-top-color: @btn-group-border;
border-bottom-color: @btn-group-border;
}
.@{btn-prefix-cls}-group-vertical &:first-child {
&:not(:last-child) {
border-bottom-color: @btn-group-border;
&[disabled] {
border-top-color: @btn-default-border;
}
}
}
.@{btn-prefix-cls}-group-vertical &:last-child:not(:first-child),
.@{btn-prefix-cls}-group-vertical & + .@{btn-prefix-cls} {
border-top-color: @btn-group-border;
&[disabled] {
border-bottom-color: @btn-default-border;
}
}
}
//&-ghost {
// .btn-ghost;
//}
&-dashed{
.btn-dashed;
}
&-text{
.btn-text;
}
&-success {
.btn-color(@success-color);
}
&-warning {
.btn-color(@warning-color);
}
&-error {
.btn-color(@error-color);
}
&-info {
.btn-color(@info-color);
}
&-circle,
&-circle-outline {
.btn-circle(@btn-prefix-cls);
}
&:before {
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
right: -1px;
background: #fff;
opacity: 0.35;
content: '';
border-radius: inherit;
z-index: 1;
transition: opacity @transition-time;
pointer-events: none;
display: none;
}
&&-loading {
pointer-events: none;
position: relative;
&:before {
display: block;
}
}
&-group {
.btn-group(@btn-prefix-cls);
}
&-group-vertical {
.btn-group-vertical(@btn-prefix-cls);
}
// The new ghost in 3.0
&-ghost{
color: #fff;
background: transparent;
&:hover{
background: transparent;
}
}
&-ghost&-dashed, &-ghost&-default{
color: #fff;
border-color: #fff;
&:hover{
color: tint(@primary-color, 20%);
border-color: tint(@primary-color, 20%);
}
}
&-ghost&-primary{
color: @primary-color;
&:hover{
color: tint(@primary-color, 20%);
background: fade(tint(@primary-color, 95%), 50%);
}
}
&-ghost&-info{
color: @info-color;
&:hover{
color: tint(@info-color, 20%);
background: fade(tint(@info-color, 95%), 50%);
}
}
&-ghost&-success{
color: @success-color;
&:hover{
color: tint(@success-color, 20%);
background: fade(tint(@success-color, 95%), 50%);
}
}
&-ghost&-warning{
color: @warning-color;
&:hover{
color: tint(@warning-color, 20%);
background: fade(tint(@warning-color, 95%), 50%);
}
}
&-ghost&-error{
color: @error-color;
&:hover{
color: tint(@error-color, 20%);
background: fade(tint(@error-color, 95%), 50%);
}
}
&-ghost&-default[disabled], &-ghost&-dashed[disabled], &-ghost&-primary[disabled], &-ghost&-info[disabled], &-ghost&-success[disabled], &-ghost&-warning[disabled], &-ghost&-error[disabled]{
background: transparent;
color: fade(#000, 25%);
border-color: @btn-disable-border;
}
&-ghost&-text[disabled]{
background: transparent;
color: fade(#000, 25%);
}
}

50
src/styles/components/card.less Normal file
View file

@ -0,0 +1,50 @@
@card-prefix-cls: ~"@{css-prefix}card";
.@{card-prefix-cls}{
background: #fff;
border-radius: @border-radius-small;
font-size: @font-size-base;
position: relative;
//overflow: hidden;
transition: all @transition-time @ease-in-out;
&-bordered {
border: 1px solid @border-color-base;
border-color: @border-color-split;
}
&-shadow{
box-shadow: @shadow-card;
}
&:hover {
box-shadow: @shadow-base;
border-color: #eee;
}
&&-dis-hover:hover{
box-shadow: none;
border-color: transparent;
}
&&-dis-hover&-bordered:hover{
border-color: @border-color-split;
}
&&-shadow:hover{
box-shadow: @shadow-card;
}
&-head {
.content-header;
}
&-extra {
position: absolute;
right: 16px;
top: 14px;
}
&-body {
padding: 16px;
}
}

185
src/styles/components/carousel.less Normal file
View file

@ -0,0 +1,185 @@
@carousel-prefix-cls: ~"@{css-prefix}carousel";
@carousel-item-prefix-cls: ~"@{css-prefix}carousel-item";
.@{carousel-prefix-cls} {
position: relative;
display: block;
box-sizing: border-box;
user-select: none;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
&-track, &-list {
transform: translate3d(0, 0, 0);
}
&-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
&-track {
position: relative;
top: 0;
left: 0;
display: block;
overflow: hidden;
z-index: 1;
&.higher {
z-index: 2;
}
}
&-item {
float: left;
height: 100%;
min-height: 1px;
display: block;
}
&-arrow {
border: none;
outline: none;
padding: 0;
margin: 0;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: none;
position: absolute;
top: 50%;
z-index: 10;
transform: translateY(-50%);
transition: @transition-time;
background-color: rgba(31, 45, 61, .11);
color: #fff;
&:hover {
background-color: rgba(31, 45, 61, 0.5);
}
text-align: center;
font-size: 1em;
font-family: inherit;
line-height: inherit;
& > * {
vertical-align: baseline;
}
&.left {
left: 16px;
}
&.right {
right: 16px;
}
&-always {
display: inherit;
}
&-hover {
display: inherit;
opacity: 0;
}
}
&:hover &-arrow-hover {
opacity: 1;
}
&-dots {
z-index: 10;
@padding: 7px;
display: none;
position: relative;
&-inside {
display: block;
position: absolute;
bottom: 10px - @padding;
}
&-outside {
display: block;
margin-top: 10px - @padding;
}
list-style: none;
text-align: center;
padding: 0;
width: 100%;
height: 3px + @padding * 2;
li {
position: relative;
display: inline-block;
vertical-align: top;
text-align: center;
margin: 0 2px;
padding: @padding 0;
cursor: pointer;
button {
border: 0;
cursor: pointer;
background: #8391a5;
opacity: 0.3;
display: block;
width: 16px;
height: 3px;
border-radius: 1px;
outline: none;
font-size: 0;
color: transparent;
transition: all .5s;
&.radius {
width: 6px;
height: 6px;
border-radius: 50%;
}
}
&:hover > button {
opacity: 0.7;
}
&.@{carousel-prefix-cls}-active > button {
opacity: 1;
width: 24px;
&.radius{
width: 6px;
}
}
}
}
}

178
src/styles/components/cascader.less Normal file
View file

@ -0,0 +1,178 @@
@cascader-prefix-cls: ~"@{css-prefix}cascader";
@cascader-item-prefix-cls: ~"@{css-prefix}cascader-menu-item";
.selectDropDown{
width: auto;
padding: 0;
white-space: nowrap;
overflow: visible;
}
.@{cascader-prefix-cls} {
//position: relative;
line-height: normal;
&-rel{
display: inline-block;
width: 100%;
position: relative;
}
.@{css-prefix}input{
padding-right: 24px;
display: block;
cursor: pointer;
}
&-disabled .@{css-prefix}input{
cursor: @cursor-disabled;
}
&-label{
width: 100%;
height: 100%;
line-height: 32px;
padding: 0 7px;
box-sizing: border-box;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
font-size: @font-size-small;
position: absolute;
left: 0;
top: 0;
}
&-size-large &-label{
line-height: 36px;
font-size: @font-size-base;
}
&-size-small &-label{
line-height: 26px;
}
.@{cascader-prefix-cls}-arrow:nth-of-type(1) {
display: none;
cursor: pointer;
}
&:hover {
.@{cascader-prefix-cls}-arrow:nth-of-type(1) {
display: inline-block;
}
}
&-show-clear:hover .@{cascader-prefix-cls}-arrow:nth-of-type(2){
display: none;
}
&-arrow {
.inner-arrow();
}
&-visible &-arrow:nth-of-type(2) {
transform: translateY(-50%) rotate(180deg);
}
.@{select-dropdown-prefix-cls} {
.selectDropDown();
}
.select-item(@cascader-prefix-cls, @cascader-item-prefix-cls);
.ivu-select-item span{
color: @error-color;
}
&-dropdown{
padding: 5px 0;
.@{select-dropdown-prefix-cls}-list{
max-height: 190px;
box-sizing: border-box;
overflow: auto;
}
}
&-not-found-tip{
padding: 5px 0;
text-align: center;
color: @btn-disable-color;
li:not([class^=ivu-]){
list-style: none;
margin-bottom: 0;
}
}
&-not-found .@{select-dropdown-prefix-cls} {
width: inherit;
}
&-menu{
display: inline-block;
min-width: 100px;
height: 180px;
margin: 0;
padding: 5px 0 !important;
vertical-align: top;
list-style: none;
border-right: 1px solid @border-color-split;
overflow: auto;
&:first-child {
}
&:last-child {
border-right-color: transparent;
margin-right: -1px;
}
&:only-child {
}
& &-item{
position: relative;
padding-right: 36px;
transition: all @transition-time @ease-in-out;
i{
font-size: @font-size-small;
position: absolute;
right: 15px;
top: 50%;
//margin-top: -6px;
transform: translateY(-50%);
}
&-loading{
margin-top: -6px;
}
&-active{
background-color: @background-color-select-hover;
color: @primary-color;
}
}
}
}
.@{cascader-prefix-cls}-transfer{
z-index: @zindex-transfer;
.selectDropDown();
.select-item(@cascader-prefix-cls, @cascader-item-prefix-cls);
.ivu-select-item span{
color: @error-color;
}
.@{cascader-prefix-cls} {
&-menu{
&-item{
padding-right: 24px;
transition: all @transition-time @ease-in-out;
&-active{
background-color: @background-color-select-hover;
color: @primary-color;
}
}
}
}
}
.@{form-item-prefix-cls}-error{
.@{cascader-prefix-cls} {
&-arrow{
color: @error-color;
}
}
}

74
src/styles/components/cell.less Normal file
View file

@ -0,0 +1,74 @@
@cell-prefix-cls: ~"@{css-prefix}cell";
.@{cell-prefix-cls} {
position: relative;
overflow: hidden;
&-link, &-link:hover, &-link:active{
color: inherit;
}
&-icon{
display: inline-block;
margin-right: 4px;
font-size: @font-size-base;
vertical-align: middle;
&:empty{
display: none
}
}
&-main{
display: inline-block;
vertical-align: middle;
}
&-title{
line-height: 24px;
font-size: @font-size-base;
}
&-label{
line-height: 1.2;
font-size: @font-size-small;
color: @subsidiary-color;
}
&-selected &-label{
color: inherit;
}
&-selected, &&-selected:hover{
background: ~`colorPalette("@{primary-color}", 1)`;
}
&-footer{
display: inline-block;
position: absolute;
transform: translateY(-50%);
top: 50%;
right: 16px;
color: @text-color;
}
&-with-link &-footer{
right: 32px;
}
&-selected &-footer{
color: inherit;
}
&-arrow{
display: inline-block;
position: absolute;
transform: translateY(-50%);
top: 50%;
right: 16px;
font-size: @font-size-base;
}
&:focus{
background: @background-color-select-hover;
outline: none;
}
&-selected:focus{
background: shade(@selected-color, 10%);
}
}
.select-item(@cell-prefix-cls, @cell-prefix-cls);

2
src/styles/components/checkbox.less Normal file
View file

@ -0,0 +1,2 @@
@checkbox-prefix-cls: ~"@{css-prefix}checkbox";
.checkboxFn();

16
src/styles/components/circle.less Normal file
View file

@ -0,0 +1,16 @@
@circle-prefix-cls: ~"@{css-prefix}chart-circle";
.@{circle-prefix-cls}{
display: inline-block;
position: relative;
&-inner {
width: 100%;
text-align: center;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
line-height: 1;
}
}

70
src/styles/components/collapse.less Normal file
View file

@ -0,0 +1,70 @@
@collapse-prefix-cls: ~"@{css-prefix}collapse";
.@{collapse-prefix-cls}{
background-color: @background-color-base;
border-radius: 3px;
border: 1px solid @border-color-base;
&-simple{
border-left: none;
border-right: none;
background-color: #fff;
border-radius: 0;
}
& > &-item{
border-top: 1px solid @border-color-base;
&:first-child {
border-top: 0;
}
> .@{collapse-prefix-cls}-header{
height: 38px;
line-height: 38px;
padding-left: 16px;
color: #666;
cursor: pointer;
position: relative;
border-bottom: 1px solid transparent;
transition: all @transition-time @ease-in-out;
> i{
transition: transform @transition-time @ease-in-out;
margin-right: 14px;
}
}
}
& > &-item&-item-active > &-header{
border-bottom: 1px solid @border-color-base;
}
&-simple > &-item&-item-active > &-header{
border-bottom: 1px solid transparent;
}
& > &-item&-item-active > &-header > i{
transform: rotate(90deg);
}
&-content{
//display: none;
//overflow: hidden;
color: @text-color;
padding: 0 16px;
background-color: #fff;
& > &-box {
padding-top: 16px;
padding-bottom: 16px;
}
}
&-simple > &-item > &-content > &-content-box{
padding-top: 0;
}
&-item-active > &-content{
//display: block;
}
&-item:last-child {
> .@{collapse-prefix-cls}-content {
border-radius: 0 0 3px 3px;
}
}
}

298
src/styles/components/color-picker.less Normal file
View file

@ -0,0 +1,298 @@
@color-picker-prefix-cls: ~'@{css-prefix}color-picker';
.circle-dot(){
width: 4px;
height: 4px;
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
border-radius: 50%;
transform: translate(-2px, -2px);
}
.@{color-picker-prefix-cls} {
display: inline-block;
&-hide {
display: none;
&-drop {
visibility: hidden;
}
}
&-disabled {
.disabled();
}
& > div:first-child:hover {
.ivu-input {
.hover();
}
}
& > div:first-child.@{color-picker-prefix-cls}-disabled:hover {
.ivu-input {
border-color: tint(@input-border-color, 20%);
}
}
& .@{select-dropdown-prefix-cls} {
padding: 0;
}
&-input.ivu-input:focus{
box-shadow: none;
}
&-focused {
.active();
}
&-rel {
line-height: 0;
}
&-color {
width: 18px;
height: 18px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
border-radius: 2px;
position: relative;
top: 2px;
div {
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
border-radius: 2px;
}
&-empty {
background: #fff;
overflow: hidden;
text-align: center;
i {
font-size: 18px;
vertical-align: baseline;
}
}
&-focused {
.active();
}
}
&-large &-color {
width: 20px;
height: 20px;
top: 1px;
&-empty {
i {
font-size: 20px;
}
}
}
&-small &-color {
width: 14px;
height: 14px;
top: 3px;
&-empty {
i {
font-size: 14px;
}
}
}
&-picker {
&-wrapper {
padding: 8px 8px 0;
}
&-panel {
width: 240px;
margin: 0 auto;
box-sizing: initial;
position: relative;
}
&-hue-slider,
&-alpha-slider {
height: 10px;
margin-top: 8px;
position: relative;
}
&-colors {
margin-top: 8px;
overflow: hidden;
border-radius: 2px;
transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:focus {
.active();
}
&-wrapper {
display: inline;
width: 20px;
height: 20px;
float: left;
position: relative;
&-color {
outline: 0;
display: block;
position: absolute;
width: 16px;
height: 16px;
margin: 2px;
cursor: pointer;
border-radius: 2px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
&-circle {
.circle-dot();
position: absolute;
top: 10px;
left: 10px;
cursor: pointer;
}
}
}
.@{picker-prefix-cls}-confirm {
margin-top: 8px;
}
}
&-saturation {
&-wrapper {
width: 100%;
padding-bottom: 75%;
position: relative;
//overflow: hidden;
transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:focus {
.active();
}
}
&,
&--white,
&--black {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&--white {
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
&--black {
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
&-pointer {
cursor: pointer;
position: absolute;
}
&-circle {
.circle-dot();
}
}
&-hue {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 2px;
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:focus {
.active();
}
&-container {
cursor: pointer;
margin: 0 2px;
position: relative;
height: 100%;
}
&-pointer {
z-index: 2;
position: absolute;
}
&-picker {
cursor: pointer;
margin-top: 1px;
width: 4px;
border-radius: 1px;
height: 8px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
background: #fff;
transform: translateX(-2px);
}
}
&-alpha {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 2px;
transition: border @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:focus {
.active();
}
&-checkboard-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
border-radius: 2px;
}
&-checkerboard {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
&-gradient {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 2px;
}
&-container {
cursor: pointer;
position: relative;
z-index: 2;
height: 100%;
margin: 0 3px;
}
&-pointer {
z-index: 2;
position: absolute;
}
&-picker {
cursor: pointer;
width: 4px;
border-radius: 1px;
height: 8px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
background: #fff;
margin-top: 1px;
transform: translateX(-2px);
}
}
&-confirm {
margin-top: 8px;
position: relative;
border-top: 1px solid @border-color-split;
text-align: right;
padding: 8px;
clear: both;
&-color {
position: absolute;
top: 11px;
left: 8px;
&-editable{
top: 8px;
}
}
}
}

319
src/styles/components/date-picker.less Normal file
View file

@ -0,0 +1,319 @@
@date-picker-prefix-cls: ~"@{css-prefix}date-picker";
@picker-prefix-cls: ~"@{css-prefix}picker";
@date-picker-cells-width: 196px;
@date-picker-cells-width-with-weeknumbers: 226px;
.@{date-picker-prefix-cls} {
//position: relative;
display: inline-block;
line-height: normal;
&-rel{
position: relative;
}
.@{select-dropdown-prefix-cls} {
width: auto;
padding: 0;
overflow: visible;
max-height: none;
}
&-cells{
width: @date-picker-cells-width;
margin: 10px;
white-space: normal;
span{
display: inline-block;
width: 24px;
height: 24px;
em{
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
margin: 2px;
font-style: normal;
border-radius: @btn-border-radius-small;
text-align: center;
transition: all @transition-time @ease-in-out;
}
}
&-header span{
line-height: 24px;
text-align: center;
margin: 2px;
color: @btn-disable-color;
}
&-cell:hover{
em{
background: @date-picker-cell-hover-bg;
}
}
&-focused{
em{
box-shadow: 0 0 0 1px @primary-color inset;
}
}
&-cell{
span&{
width: 28px;
height: 28px;
cursor: pointer;
}
&-prev-month,&-next-month{
em{
color: @btn-disable-color;
}
&:hover{
em{
background: transparent;
}
}
}
span&-week-label,span&-week-label:hover,span&-disabled,span&-disabled:hover{
cursor: @cursor-disabled;
color: @btn-disable-color;
em{
color: inherit;
background: inherit;
}
}
span&-disabled,span&-disabled:hover{
background: @btn-disable-bg;
}
&-today{
em {
position: relative;
&:after{
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: @primary-color;
position: absolute;
top: 1px;
right: 1px;
}
}
}
&-range{
position: relative;
em{
position: relative;
z-index: 1;
}
&:before{
content: '';
display: block;
background: @date-picker-cell-hover-bg;
border-radius: 0;
border: 0;
position: absolute;
top: 2px;
bottom: 2px;
left: 0;
right: 0;
}
}
&-selected,&-selected:hover
{
em{
background: @primary-color;
color: #fff;
}
}
span&-disabled&-selected{
em {
background: @btn-disable-color;
color: @btn-disable-bg;
}
}
&-today&-selected
{
em{
&:after{
background: #fff;
}
}
}
}
}
&-cells-show-week-numbers {
width: @date-picker-cells-width-with-weeknumbers;
}
&-cells-year,&-cells-month{
margin-top: 14px;
span{
width: 40px;
height: 28px;
line-height: 28px;
margin: 10px 12px;
border-radius: @btn-border-radius-small;
em{
width: 40px;
height: 28px;
line-height: 28px;
margin: 0;
}
}
.@{date-picker-prefix-cls}-cells-cell-focused{
background-color: tint(@primary-color, 80%);
}
}
&-header{
height: 32px;
line-height: 32px;
text-align: center;
border-bottom: 1px solid @border-color-split;
&-label{
cursor: pointer;
transition: color @transition-time @ease-in-out;
&:hover{
color: @primary-color;
}
}
}
&-btn-pulse{
background-color: tint(@primary-color, 80%) !important;
border-radius: @border-radius-small;
transition: background-color @transition-time @ease-in-out;
}
&-prev-btn{
float: left;
&-arrow-double{
margin-left: 10px;
i:after{
content: "\F115";
margin-left: -8px;
}
}
}
&-next-btn{
float: right;
&-arrow-double{
margin-right: 10px;
i:after{
content: "\F11F";
margin-left: -8px;
}
}
}
&-with-range{
.@{picker-prefix-cls}-panel{
&-body{
min-width: (@date-picker-cells-width + 20) * 2;
}
&-content{
float: left;
}
}
.@{picker-prefix-cls}-cells-show-week-numbers {
min-width: (@date-picker-cells-width-with-weeknumbers + 20) * 2;
}
}
&-with-week-numbers{
.@{picker-prefix-cls}-panel{
&-body-date {
min-width: (@date-picker-cells-width-with-weeknumbers + 20) * 2;
}
}
}
&-transfer{
z-index: @zindex-transfer;
max-height: none;
width: auto;
}
&-focused input{
.active();
}
}
.@{picker-prefix-cls} {
&-panel{
&-icon-btn{
display: inline-block;
width: 20px;
height: 24px;
line-height: 26px;
margin-top: 4px;
text-align: center;
cursor: pointer;
color: @btn-disable-color;
transition: color @transition-time @ease-in-out;
&:hover{
color: @primary-color;
}
i{
font-size: 14px;
}
}
&-body-wrapper&-with-sidebar{
padding-left: 92px;
}
&-sidebar{
width: 92px;
float: left;
margin-left: -92px;
position: absolute;
top: 0;
bottom: 0;
background: @table-thead-bg;
border-right: 1px solid @border-color-split;
border-radius: @border-radius-small 0 0 @border-radius-small;
overflow: auto;
}
&-shortcut{
padding: @btn-padding-large;
transition: all @transition-time @ease-in-out;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&:hover{
background: @border-color-split;
}
}
&-body{
float: left;
}
}
&-confirm{
border-top: 1px solid @border-color-split;
text-align: right;
padding: 8px;
clear: both;
& > span{
color: @link-color;
cursor: pointer;
user-select: none;
float: left;
padding: 2px 0;
transition: all @transition-time @ease-in-out;
&:hover{
color: @link-hover-color;
}
&:active{
color: @link-active-color;
}
}
&-time{
float: left;
}
}
}

103
src/styles/components/divider.less Normal file
View file

@ -0,0 +1,103 @@
@divider-prefix-cls: ~"@{css-prefix}divider";
.@{divider-prefix-cls} {
.reset-component;
background: @border-color-split;
&, // for compatiable
&-vertical {
margin: 0 8px;
display: inline-block;
height: 0.9em;
width: 1px;
vertical-align: middle;
position: relative;
top: -0.06em;
}
&-horizontal {
display: block;
height: 1px;
width: 100%;
min-width: 100%;
margin: 24px 0;
clear: both;
}
&-horizontal&-with-text-center,
&-horizontal&-with-text-left,
&-horizontal&-with-text-right {
display: table;
white-space: nowrap;
text-align: center;
background: transparent;
font-weight: 500;
color: @title-color;
font-size: @font-size-large;
margin: 16px 0;
&:before,
&:after {
content: '';
display: table-cell;
position: relative;
top: 50%;
width: 50%;
border-top: 1px solid @border-color-split;
transform: translateY(50%);
}
}
&-horizontal&-small&-with-text-center,
&-horizontal&-small&-with-text-left,
&-horizontal&-small&-with-text-right{
font-size: @font-size-base;
margin: 8px 0;
}
&-horizontal&-with-text-left,
&-horizontal&-with-text-right {
.@{divider-prefix-cls}-inner-text {
display: inline-block;
padding: 0 10px;
}
}
&-horizontal&-with-text-left {
&:before {
top: 50%;
width: 5%;
}
&:after {
top: 50%;
width: 95%;
}
}
&-horizontal&-with-text-right {
&:before {
top: 50%;
width: 95%;
}
&:after {
top: 50%;
width: 5%;
}
}
&-inner-text {
display: inline-block;
padding: 0 24px;
}
&-dashed {
background: none;
border-top: 1px dashed @border-color-split;
}
&-horizontal&-with-text&-dashed,
&-horizontal&-with-text-left&-dashed,
&-horizontal&-with-text-right&-dashed {
border-top: 0;
&:before,
&:after {
border-style: dashed none none;
}
}
}

136
src/styles/components/drawer.less Normal file
View file

@ -0,0 +1,136 @@
@drawer-prefix-cls: ~"@{css-prefix}drawer";
.@{drawer-prefix-cls} {
width: auto;
height: 100%;
position: fixed;
top: 0;
&-inner{
position: absolute;
}
&-left{
left: 0;
}
&-right{
right: 0;
}
&-hidden {
display: none !important;
}
&-wrap {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-drawer;
-webkit-overflow-scrolling: touch;
outline: 0;
&-inner{
position: absolute;
overflow: hidden;
}
&-dragging{
user-select: none;
}
}
&-wrap * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
&-mask {
.mask;
&-inner{
position: absolute;
}
}
&-content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
background-color: #fff;
border: 0;
background-clip: padding-box;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
&-no-mask{
pointer-events: auto;
}
}
&-header {
.content-header;
}
&-close {
z-index: 1;
.content-close(1px, 31px);
}
&-body {
width: 100%;
height: calc(~'100% - 51px');
padding: 16px;
font-size: 12px;
line-height: 1.5;
word-wrap: break-word;
position: absolute;
overflow: auto;
}
&-no-header &-body{
height: 100%;
}
&-no-mask{
pointer-events: none;
.@{drawer-prefix-cls}-drag{
pointer-events: auto;
}
}
&-drag{
top: 0;
height: 100%;
width: 0;
position: absolute;
&-left{
right: 0;
}
&-move-trigger{
width: 8px;
height: 100px;
line-height: 100px;
position: absolute;
top: 50%;
background: rgb(243, 243, 243);
transform: translate(-50%, -50%);
border-radius: ~"4px / 6px";
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .2);
cursor: col-resize;
&-point{
display: inline-block;
width: 50%;
transform: translateX(50%);
i{
display: block;
border-bottom: 1px solid rgb(192, 192, 192);
padding-bottom: 2px;
}
}
}
}
}

38
src/styles/components/dropdown.less Normal file
View file

@ -0,0 +1,38 @@
@dropdown-prefix-cls: ~"@{css-prefix}dropdown";
@dropdown-item-prefix-cls: ~"@{dropdown-prefix-cls}-item";
.@{dropdown-prefix-cls} {
display: inline-block;
//position: relative;
.@{select-dropdown-prefix-cls} {
overflow: visible;
max-height: none;
}
.@{dropdown-prefix-cls} {
width: 100%;
}
&-rel{
//display: inline-block;
position: relative;
&-user-select-none{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
}
&-menu{
min-width: 100px;
}
&-transfer{
width: auto;
}
&-item-selected, &-item&-item-selected:hover{
background: ~`colorPalette("@{primary-color}", 1)`;
}
}
.select-item(@dropdown-prefix-cls, @dropdown-item-prefix-cls);

71
src/styles/components/form.less Normal file
View file

@ -0,0 +1,71 @@
@form-prefix-cls: ~"@{css-prefix}form";
@form-item-prefix-cls: ~"@{form-prefix-cls}-item";
.@{form-prefix-cls} {
.@{form-item-prefix-cls}-label {
text-align: right;
vertical-align: middle;
float: left;
font-size: @font-size-small;
color: @text-color;
line-height: 1;
padding: 10px 12px 10px 0;
box-sizing: border-box;
}
&-label-left .@{form-item-prefix-cls}-label {
text-align: left;
}
&-label-top .@{form-item-prefix-cls}-label {
float: none;
display: inline-block;
padding: 0 0 10px 0;
}
&-inline{
.@{form-item-prefix-cls} {
display: inline-block;
margin-right: 10px;
vertical-align: top;
}
}
}
.@{form-item-prefix-cls} {
margin-bottom: 24px;
vertical-align: top;
.clearfix();
&-content {
position: relative;
line-height: 32px;
font-size: @font-size-small;
}
& & {
margin-bottom: 0;
}
& & &-content {
margin-left: 0!important;
}
&-error-tip{
position: absolute;
top: 100%;
left: 0;
line-height: 1;
padding-top: 6px;
color: @error-color;
}
&-required {
.@{form-item-prefix-cls}-label:before {
content: '*';
display: inline-block;
margin-right: 4px;
line-height: 1;
font-family: SimSun;
font-size: @font-size-small;
color: @error-color;
}
}
&-error {
// todo
}
}

54
src/styles/components/index.less Normal file
View file

@ -0,0 +1,54 @@
@import "button";
@import "affix";
@import "back-top";
@import "badge";
@import "circle";
@import "spin";
@import "alert";
@import "collapse";
@import "card";
@import "message";
@import "notice";
@import "radio";
@import "checkbox";
@import "switch";
@import "input-number";
@import "scroll";
@import "tag";
@import "layout";
@import "loading-bar";
@import "progress";
@import "timeline";
@import "page";
@import "steps";
@import "modal";
@import "select";
@import "select-dropdown";
@import "split";
@import "tooltip";
@import "poptip";
@import "input";
@import "slider";
@import "cascader";
@import "transfer";
@import "table";
@import "dropdown";
@import "tabs";
@import "menu";
@import "date-picker";
@import "time-picker";
@import "form";
@import "carousel";
@import "rate";
@import "upload";
@import "tree";
@import "avatar";
@import "color-picker";
@import "auto-complete";
@import "divider";
@import "anchor";
@import "time";
@import "cell";
@import "drawer";
@import "breadcrumb";
@import "list";

200
src/styles/components/input-number.less Normal file
View file

@ -0,0 +1,200 @@
@input-number-prefix-cls: ~"@{css-prefix}input-number";
.handler-disabled() {
opacity: 0.72;
color: #ccc !important;
cursor: @cursor-disabled;
}
.@{input-number-prefix-cls} {
@radius-wrap: 0 @btn-border-radius @btn-border-radius 0;
.input;
margin: 0;
padding: 0;
width: 80px;
height: @input-height-base;
line-height: @input-height-base;
vertical-align: middle;
border: 1px solid @border-color-base;
border-radius: @btn-border-radius;
overflow: hidden;
cursor: default;
&-handler-wrap {
width: 22px;
height: 100%;
border-left: 1px solid @border-color-base;
border-radius: @radius-wrap;
background: #fff;
position: absolute;
top: 0;
right: 0;
opacity: 0;
transition: opacity @transition-time @ease-in-out;
}
&:hover &-handler-wrap {
opacity: 1;
}
&-handler-up {
cursor: pointer;
&-inner {
top: 1px;
}
}
&-handler-down {
border-top: 1px solid @border-color-base;
top: -1px;
cursor: pointer;
}
&-handler {
display: block;
width: 100%;
height: @input-height-base / 2;
line-height: 0;
text-align: center;
overflow: hidden;
color: #999;
position: relative;
&:hover &-up-inner,
&:hover &-down-inner {
color: tint(@primary-color, 20%);
}
}
&-handler-up-inner,
&-handler-down-inner {
width: 12px;
height: 12px;
line-height: 12px;
font-size: 14px;
color: #999;
user-select: none;
position: absolute;
right: 5px;
transition: all @transition-time linear;
}
&:hover {
.hover();
}
&-focused {
.active();
}
&-disabled {
.disabled();
}
&-input-wrap {
overflow: hidden;
height: @input-height-base;
}
&-input {
width: 100%;
height: @input-height-base;
line-height: @input-height-base;
padding: 0 7px;
text-align: left;
outline: 0;
-moz-appearance: textfield;
color: #666;
border: 0;
border-radius: @btn-border-radius;
transition: all @transition-time linear;
&[disabled] {
.disabled();
}
&::placeholder {
color: @input-placeholder-color;
}
}
&-large {
padding: 0;
.@{input-number-prefix-cls}-input-wrap {
height: @input-height-large;
}
.@{input-number-prefix-cls}-handler {
height: @input-height-large / 2;
}
input {
height: @input-height-large;
line-height: @input-height-large;
}
.@{input-number-prefix-cls}-handler-up-inner {
top: 2px;
}
.@{input-number-prefix-cls}-handler-down-inner {
bottom: 2px;
}
}
&-small {
padding: 0;
.@{input-number-prefix-cls}-input-wrap {
height: @input-height-small;
}
.@{input-number-prefix-cls}-handler {
height: @input-height-small / 2;
}
input {
height: @input-height-small;
line-height: @input-height-small;
margin-top: -1px;
vertical-align: top;
}
.@{input-number-prefix-cls}-handler-up-inner {
top: -1px;
}
.@{input-number-prefix-cls}-handler-down-inner {
bottom: -1px;
}
}
&-handler-down-disabled,
&-handler-up-disabled,
&-disabled {
.@{input-number-prefix-cls}-handler-down-inner,
.@{input-number-prefix-cls}-handler-up-inner {
.handler-disabled();
}
}
&-disabled {
.@{input-number-prefix-cls}-input {
opacity: 0.72;
cursor: @cursor-disabled;
background-color: #f3f3f3;
}
.@{input-number-prefix-cls}-handler-wrap {
display: none;
}
.@{input-number-prefix-cls}-handler {
.handler-disabled();
}
}
}
.@{form-item-prefix-cls}-error {
.@{input-number-prefix-cls}{
.input-error;
&-focused {
.active-error;
}
}
}

201
src/styles/components/input.less Normal file
View file

@ -0,0 +1,201 @@
@input-prefix-cls: ~"@{css-prefix}input";
.@{input-prefix-cls} {
.input;
&-wrapper{
display: inline-block;
width: 100%;
position: relative;
vertical-align: middle;
// #2149 & #2219
line-height: normal;
}
&-icon {
width: 32px;
height: @input-height-base;
line-height: @input-height-base;
font-size: 16px;
text-align: center;
color: @subsidiary-color;
position: absolute;
right: 0;
z-index: 3;
}
&-hide-icon &-icon{
display: none;
}
&-icon-validate{
display: none;
}
&-icon-clear{
display: none;
}
&-wrapper:hover{
.@{input-prefix-cls}-icon-clear{
display: inline-block;
}
}
&-icon-normal + &{
padding-right: 32px;
}
// #554
&-hide-icon &-icon-normal + &{
padding-right: @input-padding-horizontal;
}
&-wrapper-large &-icon{
font-size: 18px;
height: @input-height-large;
line-height: @input-height-large;
}
&-wrapper-small &-icon{
width: 24px;
font-size: 14px;
height: @input-height-small;
line-height: @input-height-small;
//+ .@{input-prefix-cls} {
// padding-right: 24px;
//}
}
// prefix & suffix
&-prefix, &-suffix{
width: 32px;
height: 100%;
text-align: center;
position: absolute;
left: 0;
top: 0;
z-index: 1;
i{
font-size: 16px;
line-height: @input-height-base;
color: @subsidiary-color;
}
}
&-suffix{
left: auto;
right: 0;
}
&-wrapper-small &-prefix, &-wrapper-small &-suffix{
i{
font-size: 14px;
line-height: @input-height-small;
}
}
&-wrapper-large &-prefix, &-wrapper-large &-suffix{
i{
font-size: 18px;
line-height: @input-height-large;
}
}
&-with-prefix{
padding-left: 32px;
}
&-with-suffix{
padding-right: 32px;
}
// search
&-search{
cursor: pointer;
padding: 0 16px !important;
background: @primary-color !important;
color: #fff !important;
border-color: @primary-color !important;
transition: all @transition-time @ease-in-out;
position: relative;
z-index: 2;
i{
font-size: 16px;
}
&:hover{
background: tint(@primary-color, 20%) !important;
border-color: tint(@primary-color, 20%) !important;
}
&:active{
background: shade(@primary-color, 5%) !important;
border-color: shade(@primary-color, 5%) !important;
}
&-icon{
cursor: pointer;
transition: color @transition-time @ease-in-out;
&:hover{
color: inherit;
}
}
&:before{
content: '';
display: block;
width: 1px;
position: absolute;
top: -1px;
bottom: -1px;
left: -1px;
background: inherit;
}
}
&-wrapper-small &-search{
padding: 0 12px !important;
i{
font-size: 14px;
}
}
&-wrapper-large &-search{
padding: 0 20px !important;
i{
font-size: 18px;
}
}
&-with-search{
&:hover{
.@{input-prefix-cls} {
border-color: tint(@primary-color, 20%);
}
}
}
}
.@{input-prefix-cls}-group{
.input-group(~"@{input-prefix-cls}");
}
.@{form-item-prefix-cls}-error{
.@{input-prefix-cls}{
.input-error;
&-icon{
color: @error-color;
}
}
.@{input-prefix-cls}-group{
.input-group-error;
}
.@{transfer-prefix-cls} {
.@{input-prefix-cls} {
.input;
&-icon{
color: @subsidiary-color;
}
}
}
}
.@{form-item-prefix-cls}-validating{
.@{input-prefix-cls}{
&-icon-validate{
display: inline-block;
}
&-icon + .@{input-prefix-cls}{
padding-right: 32px;
}
}
}

113
src/styles/components/layout.less Normal file
View file

@ -0,0 +1,113 @@
@layout-prefix-cls: ~"@{css-prefix}layout";
.@{layout-prefix-cls} {
display: flex;
flex-direction: column;
flex: auto;
background: @layout-body-background;
&&-has-sider {
flex-direction: row;
> .@{layout-prefix-cls},
> .@{layout-prefix-cls}-content {
overflow-x: hidden;
}
}
&-header,
&-footer {
flex: 0 0 auto;
}
&-header {
background: @layout-header-background;
padding: @layout-header-padding;
height: @layout-header-height;
line-height: @layout-header-height;
}
&-sider {
transition: all .2s @ease-in-out;
position: relative;
background: @layout-sider-background;
min-width: 0;
&-children {
height: 100%;
padding-top: 0.1px;
margin-top: -0.1px;
}
&-has-trigger {
padding-bottom: @layout-trigger-height;
}
&-trigger {
position: fixed;
bottom: 0;
text-align: center;
cursor: pointer;
height: @layout-trigger-height;
line-height: @layout-trigger-height;
color: @layout-trigger-color;
background: @layout-sider-background;
z-index: 1000;
transition: all .2s @ease-in-out;
.ivu-icon {
font-size: 16px;
}
>* {
transition: all .2s;
}
&-collapsed {
.@{layout-prefix-cls}-sider-trigger-icon {
transform: rotateZ(180deg);
}
}
}
&-zero-width {
& > * {
overflow: hidden;
}
&-trigger {
position: absolute;
top: @layout-header-height;
right: -@layout-zero-trigger-width;
text-align: center;
width: @layout-zero-trigger-width;
height: @layout-zero-trigger-height;
line-height: @layout-zero-trigger-height;
background: @layout-sider-background;
color: #fff;
font-size: @layout-zero-trigger-width / 2;
border-radius: 0 @border-radius-base @border-radius-base 0;
cursor: pointer;
transition: background .3s ease;
&:hover {
background: tint(@layout-sider-background, 10%);
}
&&-left {
right: 0;
left: -@layout-zero-trigger-width;
border-radius: @border-radius-base 0 0 @border-radius-base;
}
}
}
}
&-footer {
background: @layout-footer-background;
padding: @layout-footer-padding;
color: @text-color;
font-size: @font-size-base;
}
&-content {
flex: auto;
}
}

267
src/styles/components/list.less Normal file
View file

@ -0,0 +1,267 @@
@list-prefix-cls: ~"@{css-prefix}list";
.@{list-prefix-cls} {
position: relative;
&-items {
margin: 0;
padding: 0;
list-style: none;
}
&-item{
display: flex;
align-items: center;
padding: @list-item-padding;
&-content {
color: @text-color;
}
&-meta{
display: flex;
flex: 1;
align-items: flex-start;
font-size: 0;
&-avatar {
margin-right: @list-item-meta-avatar-margin-right;
}
&-content {
flex: 1 0;
}
&-title {
font-weight: bold;
margin-bottom: 4px;
color: @text-color;
font-size: @font-size-base;
line-height: 22px;
> a {
color: @text-color;
transition: all @transition-time;
&:hover {
color: @primary-color;
}
}
}
&-description {
color: @text-color-secondary;
font-size: @font-size-base;
line-height: 22px;
}
}
&-action {
flex: 0 0 auto;
margin-left: 48px;
padding: 0;
font-size: 0;
list-style: none;
& > li {
position: relative;
display: inline-block;
padding: 0 8px;
color: @text-color-secondary;
font-size: @font-size-base;
line-height: 22px;
text-align: center;
cursor: pointer;
&:after{
content: '';
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 14px;
margin-top: -7px;
background-color: @border-color-split;
}
}
& > li:first-child {
padding-left: 0;
}
& > li:last-child {
&:after{
display: none;
}
}
&-split {
}
}
}
&-header {
background: @list-header-background;
}
&-footer {
background: @list-footer-background;
}
&-header,
&-footer {
padding-top: 12px;
padding-bottom: 12px;
}
&-split &-item {
border-bottom: 1px solid @border-color-split;
&:last-child {
border-bottom: none;
}
}
&-split &-header {
border-bottom: 1px solid @border-color-split;
}
&-split &-footer{
border-top: 1px solid @border-color-split;
}
&-large &-item {
padding-top: 16px;
padding-bottom: 16px;
}
&-small &-item {
padding-top: 8px;
padding-bottom: 8px;
}
&-vertical &-item {
align-items: initial;
&-main {
display: block;
flex: 1;
}
&-extra {
margin-left: 40px;
}
&-meta {
margin-bottom: @list-item-meta-margin-bottom;
&-title {
margin-bottom: @list-item-meta-title-margin-bottom;
color: @heading-color;
font-size: @font-size-large;
line-height: 24px;
}
}
&-action {
margin-top: @padding-md;
margin-left: auto;
> li {
padding: 0 16px;
&:first-child {
padding-left: 0;
}
}
}
}
// without flex
&-item-no-flex {
display: block;
}
// Horizontal
&:not(.@{list-prefix-cls}-vertical) {
.@{list-prefix-cls}-item-no-flex {
.@{list-prefix-cls}-item-action {
float: right;
}
}
}
}
.@{list-prefix-cls}-bordered {
border: 1px solid @border-color-base;
border-radius: @border-radius-base;
.@{list-prefix-cls}-header {
padding-right: 24px;
padding-left: 24px;
}
.@{list-prefix-cls}-footer {
padding-right: 24px;
padding-left: 24px;
}
.@{list-prefix-cls}-item {
padding-right: 24px;
padding-left: 24px;
border-bottom: 1px solid @border-color-split;
}
.@{list-prefix-cls}-pagination {
margin: 16px 24px;
}
&.@{list-prefix-cls}-small {
.@{list-prefix-cls}-item {
padding-right: 16px;
padding-left: 16px;
}
.@{list-prefix-cls}-header,
.@{list-prefix-cls}-footer {
padding: 8px 16px;
}
}
&.@{list-prefix-cls}-large {
.@{list-prefix-cls}-header,
.@{list-prefix-cls}-footer {
padding: 16px 24px;
}
}
}
// responsive
@media screen and (max-width: @screen-md) {
.@{list-prefix-cls} {
&-item {
&-action {
margin-left: 24px;
}
}
}
.@{list-prefix-cls}-vertical {
.@{list-prefix-cls}-item {
&-extra {
margin-left: 24px;
}
}
}
}
@media screen and (max-width: @screen-sm) {
.@{list-prefix-cls} {
&-item {
flex-wrap: wrap;
&-action {
margin-left: 12px;
}
}
}
.@{list-prefix-cls}-vertical {
.@{list-prefix-cls}-item {
flex-wrap: wrap-reverse;
&-main {
min-width: 220px;
}
&-extra {
margin: auto auto 16px;
}
}
}
}

22
src/styles/components/loading-bar.less Normal file
View file

@ -0,0 +1,22 @@
@loading-bar-prefix-cls: ~"@{css-prefix}loading-bar";
.@{loading-bar-prefix-cls} {
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: @zindex-loading-bar;
&-inner {
transition: width @transition-time linear;
&-color-primary {
background-color: @primary-color;
}
&-failed-color-error {
background-color: @error-color;
}
}
}

276
src/styles/components/menu.less Normal file
View file

@ -0,0 +1,276 @@
@menu-prefix-cls: ~"@{css-prefix}menu";
@menu-dropdown-item-prefix-cls: ~"@{menu-prefix-cls}-horizontal .@{menu-prefix-cls}-submenu .@{select-dropdown-prefix-cls} .@{menu-prefix-cls}-item";
.@{menu-prefix-cls} {
display: block;
margin: 0;
padding: 0;
outline: none;
list-style: none;
color: @text-color;
font-size: @font-size-base;
position: relative;
z-index: @zindex-select;
&-horizontal{
height: 60px;
line-height: 60px;
&.@{menu-prefix-cls}-light{
&:after{
content: '';
display: block;
width: 100%;
height: 1px;
background: @border-color-base;
position: absolute;
bottom: 0;
left: 0;
}
}
}
&-vertical{
&.@{menu-prefix-cls}-light{
&:after{
content: '';
display: block;
width: 1px;
height: 100%;
background: @border-color-base;
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}
}
}
&-light{
background: #fff;
}
&-dark{
background: @menu-dark-title;
}
&-primary{
background: @primary-color;
}
&-item{
display: block;
outline: none;
list-style: none;
font-size: @font-size-base;
position: relative;
z-index: 1;
cursor: pointer;
transition: all @transition-time @ease-in-out;
}
a&-item{
color: inherit;
&:hover, &:active{
color: inherit;
}
}
&-item > i{
margin-right: 6px;
}
&-submenu-title > i, &-submenu-title span > i{
margin-right: 8px;
}
&-horizontal &-item,
&-horizontal &-submenu
{
float: left;
padding: 0 20px;
position: relative;
cursor: pointer;
z-index: 3;
transition: all @transition-time @ease-in-out;
}
&-light&-horizontal &-item, &-light&-horizontal &-submenu{
height: inherit;
line-height: inherit;
border-bottom: 2px solid transparent;
color: @text-color;
&-active, &:hover{
color: @primary-color;
border-bottom: 2px solid @primary-color;
}
}
&-dark&-horizontal &-item, &-dark&-horizontal &-submenu{
color: @menu-dark-subsidiary-color;
&-active, &:hover{
color: #fff;
}
}
&-primary&-horizontal &-item, &-primary&-horizontal &-submenu{
color: #fff;
&-active, &:hover{
//background: @link-active-color;
}
}
&-horizontal &-submenu .@{select-dropdown-prefix-cls} {
min-width: 100%;
width: auto;
max-height: none;
.@{menu-prefix-cls}-item{
height: auto;
line-height: normal;
border-bottom: 0;
float: none;
}
}
&-item-group{
line-height: normal;
&-title {
height: 30px;
line-height: 30px;
padding-left: 8px;
font-size: @font-size-small;
color: @legend-color;
}
& > ul{
padding: 0 !important;
list-style: none !important;
}
}
// vertical
&-vertical &-item,
&-vertical &-submenu-title
{
padding: 14px 24px;
position: relative;
cursor: pointer;
z-index: 1;
transition: all @transition-time @ease-in-out;
&:hover{
//background: @background-color-select-hover;
color: @primary-color;
}
}
&-vertical &-submenu-title-icon{
// #5592 支持自定义图标 size 后，换一种位置
//float: right;
//position: relative;
//top: 4px;
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
}
&-submenu-title-icon {
transition: transform @transition-time @ease-in-out;
}
&-horizontal &-opened > * > &-submenu-title-icon{
transform: rotate(180deg);
}
&-vertical &-opened > * > &-submenu-title-icon{
transform: translateY(-50%) rotate(180deg);
}
&-vertical &-submenu{
&-nested{
padding-left: 20px;
}
.@{menu-prefix-cls}-item{
padding-left: 43px;
}
}
&-vertical &-item-group{
&-title{
height: 48px;
line-height: 48px;
font-size: @font-size-base;
padding-left: 28px;
}
}
&-dark&-vertical &-item-group{
&-title{
color: @menu-dark-group-title-color;
}
}
&-light&-vertical &-item{
//border-right: 2px solid transparent;
&-active:not(.@{menu-prefix-cls}-submenu){
color: @primary-color;
background: ~`colorPalette("@{primary-color}", 1)`;
//border-right: 2px solid @primary-color;
z-index: 2;
&:after{
content: '';
display: block;
width: 2px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
background: @primary-color;
}
}
}
&-dark&-vertical &-item, &-dark&-vertical &-submenu-title{
color: @menu-dark-subsidiary-color;
&-active:not(.@{menu-prefix-cls}-submenu),
&-active:not(.@{menu-prefix-cls}-submenu):hover
{
background: @menu-dark-active-bg;
}
&:hover{
color: #fff;
background: @menu-dark-title;
}
&-active:not(.@{menu-prefix-cls}-submenu){
color: @primary-color;
//border-right: 2px solid @primary-color;
}
}
&-dark&-vertical &-submenu &-item{
&:hover{
color: #fff;
background: transparent !important;
}
&-active,&-active:hover{
border-right: none;
color: #fff;
background: @primary-color !important;
}
}
// &-dark&-vertical &-item-active &-submenu-title{
// color: #fff;
// }
&-dark&-vertical &-child-item-active > &-submenu-title{
color: #fff;
}
&-dark&-vertical &-opened{
background: @menu-dark-active-bg;
.@{menu-prefix-cls}-submenu-title{
background: @menu-dark-title;
}
.@{menu-prefix-cls}-submenu-has-parent-submenu{
.@{menu-prefix-cls}-submenu-title{
background: transparent;
}
}
}
}
.select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);
.@{menu-dropdown-item-prefix-cls} {
padding: 7px 16px 8px;
font-size: @font-size-base !important;
}

82
src/styles/components/message.less Normal file
View file

@ -0,0 +1,82 @@
@message-prefix-cls: ~"@{css-prefix}message";
@icon-prefix-cls: ~"@{css-prefix}icon";
.@{message-prefix-cls} {
font-size: @font-size-base;
position: fixed;
z-index: @zindex-message;
width: 100%;
top: 16px;
left: 0;
pointer-events: none;
&-notice {
padding: 8px;
text-align: center;
transition: height @animation-time @ease-in-out, padding @animation-time @ease-in-out;
&:first-child {
margin-top: -8px;
}
&-close {
position: absolute;
right: 4px;
top: 10px;
color: #999;
outline: none;
i.@{icon-prefix-cls}{
.close-base(-3px);
}
}
}
&-notice-content {
display: inline-block;
pointer-events: all;
padding: 8px 16px;
//border: 1px solid @border-color-split;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
background: #fff;
position: relative;
&-text{
display: inline-block;
}
}
&-notice-closable{
.@{message-prefix-cls}-notice-content-text{
padding-right: 32px;
}
}
&-success .@{icon-prefix-cls} {
color: @success-color;
}
&-error .@{icon-prefix-cls} {
color: @error-color;
}
&-warning .@{icon-prefix-cls} {
color: @warning-color;
}
&-info .@{icon-prefix-cls},
&-loading .@{icon-prefix-cls} {
color: @primary-color;
}
.@{icon-prefix-cls} {
margin-right: 4px;
font-size: @font-size-large;
vertical-align: middle;
}
&-custom-content{
span{
vertical-align: middle;
}
}
}

201
src/styles/components/modal.less Normal file
View file

@ -0,0 +1,201 @@
@modal-prefix-cls: ~"@{css-prefix}modal";
@confirm-prefix-cls: ~"@{css-prefix}modal-confirm";
.@{modal-prefix-cls} {
width: auto;
margin: 0 auto;
position: relative;
outline: none;
top: 100px;
&-hidden {
display: none !important;
}
&-wrap {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
-webkit-overflow-scrolling: touch;
outline: 0;
}
&-wrap * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
&-mask {
.mask;
}
&-content {
position: relative;
background-color: #fff;
border: 0;
border-radius: @border-radius-base;
background-clip: padding-box;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
&-no-mask{
pointer-events: auto;
}
&-drag{
position: absolute;
.@{modal-prefix-cls}-header{
cursor: move;
}
}
&-dragging{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
}
&-header {
.content-header;
}
&-close {
z-index: 1;
.content-close(1px, 31px);
}
&-body {
padding: 16px;
font-size: 12px;
line-height: 1.5;
}
&-footer {
border-top: 1px solid @border-color-split;
padding: 12px 18px 12px 18px;
text-align: right;
button + button {
margin-left: 8px;
margin-bottom: 0;
}
}
&-fullscreen{
width: 100% !important;
top: 0;
bottom: 0;
position: absolute;
@modal-header-height: 51px;
@modal-footer-height: 61px;
.@{modal-prefix-cls}-content{
width: 100%;
border-radius: 0;
position: absolute;
top: 0;
bottom: 0;
}
.@{modal-prefix-cls}-body{
width: 100%;
overflow: auto;
position: absolute;
top: @modal-header-height;
bottom: @modal-footer-height;
}
&-no-header .@{modal-prefix-cls}-body{
top: 0;
}
&-no-footer .@{modal-prefix-cls}-body{
bottom: 0;
}
.@{modal-prefix-cls}-footer{
position: absolute;
width: 100%;
bottom: 0;
}
}
&-no-mask{
pointer-events: none;
}
}
@media (max-width: @screen-sm) {
.@{modal-prefix-cls} {
width: auto !important;
margin: 10px;
}
.@{modal-prefix-cls}-fullscreen{
width: 100% !important;
margin: 0;
}
.vertical-center-modal {
.@{modal-prefix-cls} {
flex: 1;
}
}
}
.@{confirm-prefix-cls} {
padding: 0 4px;
&-head {
padding: 0 12px 0 0;
&-icon {
display: inline-block;
font-size: 28px;
vertical-align: middle;
position: relative;
top: -2px;
&-info {
color: @primary-color;
}
&-success {
color: @success-color;
}
&-warning {
color: @warning-color;
}
&-error {
color: @error-color;
}
&-confirm {
color: @warning-color;
}
}
&-title {
display: inline-block;
vertical-align: middle;
margin-left: 12px;
font-size: @font-size-large;
color: @title-color;
font-weight: 700;
}
}
&-body{
padding-left: 42px;
font-size: @font-size-base;
color: @text-color;
position: relative;
&-render{
margin: 0;
padding: 0;
}
}
&-footer{
margin-top: 20px;
text-align: right;
button + button {
margin-left: 8px;
margin-bottom: 0;
}
}
}

116
src/styles/components/notice.less Normal file
View file

@ -0,0 +1,116 @@
@notice-prefix-cls: ~"@{css-prefix}notice";
@icon-prefix-cls: ~"@{css-prefix}icon";
@notice-width: 335px;
@notice-padding: 16px;
@notice-margin-bottom: 10px;
.@{notice-prefix-cls} {
width: @notice-width;
margin-right: 24px;
position: fixed;
z-index: @zindex-notification;
&-content-with-icon{
margin-left: 51px;
}
&-with-desc&-with-icon &-title{
margin-left: 51px;
}
&-notice {
margin-bottom: @notice-margin-bottom;
padding: @notice-padding;
// border: 1px solid @border-color-split;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
background: #fff;
line-height: 1;
position: relative;
overflow: hidden;
&-close {
position: absolute;
right: 8px;
top: 15px;
color: #999;
outline: none;
i{
.close-base(-3px);
}
}
&-content-with-render{
.ivu-notice-desc{
display: none;
}
}
&-with-desc{
.@{notice-prefix-cls}-notice-close{
top: 11px;
}
}
}
&-content-with-render-notitle{
margin-left: 26px;
}
&-title {
font-size: @font-size-base;
line-height: @font-size-base + 3; //fixed the bug that the bottom of some letters were hidden just like 'g'
color: @title-color;
padding-right: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-with-desc &-title{
font-weight: bold;
margin-bottom: 8px;
}
&-desc {
font-size: 12px;
//color: @legend-color;
color: @text-color;
text-align: justify;
line-height: 1.5;
}
&-with-desc&-with-icon &-desc{
margin-left: 51px;
}
&-with-icon &-title{
margin-left: 26px;
}
&-icon {
position: absolute;
top: -2px;
font-size: @font-size-large;
&-success {
color: @success-color;
}
&-info {
color: @primary-color;
}
&-warning {
color: @warning-color;
}
&-error {
color: @error-color;
}
}
&-with-desc &-icon{
font-size: 36px;
top: -6px;
}
&-custom-content{
position: relative;
}
}

289
src/styles/components/page.less Normal file
View file

@ -0,0 +1,289 @@
@page-prefix-cls: ~"@{css-prefix}page";
.@{page-prefix-cls} {
&:after {
content: '';
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
&-item {
display: inline-block;
//float: left;
vertical-align: middle;
min-width: @btn-circle-size;
height: @btn-circle-size;
line-height: @btn-circle-size - 2px;
margin-right: 4px;
text-align: center;
list-style: none;
background-color: #fff;
user-select: none;
cursor: pointer;
font-family: Arial;
font-weight: 500;
border: 1px solid @border-color-base;
border-radius: @btn-border-radius;
//transition: all @transition-time @ease-in-out;
transition: border @transition-time @ease-in-out, color @transition-time @ease-in-out;
a {
font-family: "Monospaced Number";
margin: 0 6px;
text-decoration: none;
color: @text-color;
//transition: none;
}
&:hover {
border-color: @primary-color;
a {
color: @primary-color;
}
}
&-active {
border-color: @primary-color;
a, &:hover a {
color: @primary-color;
}
}
}
&-item-jump-prev, &-item-jump-next {
&:after {
content: "•••";
display: block;
letter-spacing: 1px;
color: #ccc;
text-align: center;
}
i{
display: none;
}
&:hover {
&:after{
display: none;
}
i{
display: inline;
}
}
}
&-item-jump-prev:hover {
i:after {
content: "\F115";
margin-left: -8px;
}
}
&-item-jump-next:hover {
i:after {
content: "\F11F";
margin-left: -8px;
}
}
&-prev{
margin-right: 4px;
}
&-item-jump-prev,
&-item-jump-next{
margin-right: 4px;
}
&-prev,
&-next,
&-item-jump-prev,
&-item-jump-next {
display: inline-block;
vertical-align: middle;
user-select: none;
//float: left;
min-width: @btn-circle-size;
height: @btn-circle-size;
line-height: @btn-circle-size - 2px;
list-style: none;
text-align: center;
cursor: pointer;
color: #666;
font-family: Arial;
border: 1px solid @border-color-base;
border-radius: @btn-border-radius;
transition: all @transition-time @ease-in-out;
}
&-item-jump-prev,
&-item-jump-next{
border-color: transparent;
}
&-prev,
&-next {
background-color: #fff;
a {
color: #666;
font-size: 14px;
}
&:hover {
border-color: @primary-color;
a {
color: @primary-color;
}
}
}
&-disabled {
cursor: @cursor-disabled;
a {
color: #ccc;
}
&:hover {
border-color: @border-color-base;
a {
color: #ccc;
cursor: @cursor-disabled;
}
}
}
&-options {
display: inline-block;
vertical-align: middle;
//float: left;
margin-left: 15px;
&-sizer {
display: inline-block;
//float: left;
margin-right: 10px;
}
&-elevator {
display: inline-block;
vertical-align: middle;
//float: left;
height: @btn-circle-size;
line-height: @btn-circle-size;
input {
.input;
border-radius: @btn-border-radius;
margin: 0 8px;
width: 50px;
}
}
}
&-total {
display: inline-block;
//float: left;
height: @btn-circle-size;
line-height: @btn-circle-size;
margin-right: 10px;
}
&-simple &-prev,
&-simple &-next {
margin: 0;
border: 0;
height: 24px;
line-height: normal;
font-size: 18px;
}
&-simple &-simple-pager {
display: inline-block;
//float: left;
margin-right: 8px;
vertical-align: middle;
input {
width: 30px;
height: 24px;
margin: 0 8px;
padding: 5px 8px;
text-align: center;
box-sizing: border-box;
background-color: #fff;
outline: none;
border: 1px solid @border-color-base;
border-radius: @btn-border-radius;
transition: border-color @transition-time @ease-in-out;
&:hover {
border-color: @primary-color;
}
}
span{
padding: 0 8px 0 2px;
}
}
&-custom-text, &-custom-text:hover{
border-color: transparent;
}
}
.@{page-prefix-cls} {
&.mini &-total {
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
}
&.mini &-item {
border: 0;
margin: 0;
min-width: @btn-circle-size-small;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
border-radius: @btn-border-radius-small;
}
&.mini &-prev,
&.mini &-next {
margin: 0;
min-width: @btn-circle-size-small;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small - 2px;
border: 0;
a {
i:after {
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
}
}
}
&.mini &-item-jump-prev,
&.mini &-item-jump-next {
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
border: none;
margin-right: 0;
}
&.mini &-options {
margin-left: 8px;
&-elevator {
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
input {
.input-small;
width: 44px;
}
}
}
}

155
src/styles/components/poptip.less Normal file
View file

@ -0,0 +1,155 @@
@poptip-prefix-cls: ~"@{css-prefix}poptip";
@poptip-arrow: ~"@{poptip-prefix-cls}-arrow";
@poptip-max-width: 250px;
@poptip-arrow-width: 7px;
@poptip-arrow-outer-width: (@poptip-arrow-width + 1);
@poptip-distance: @poptip-arrow-width - 1 + 4;
//@poptip-arrow-color: fadein(@border-color-base, 5%);
@poptip-arrow-color: hsla(0,0%,85%,.5);
.@{poptip-prefix-cls} {
display: inline-block;
&-rel{
display: inline-block;
position: relative;
}
&-title {
margin: 0;
padding: 8px 16px;
position: relative;
&:after{
content: '';
display: block;
height: 1px;
position: absolute;
left: 8px;
right: 8px;
bottom: 0;
background-color: @border-color-split;
}
&-inner{
color: @title-color;
font-size: @font-size-base;
}
}
&-body{
padding: 8px 16px;
&-content{
overflow: auto;
&-word-wrap{
white-space: pre-wrap;
text-align: justify;
}
&-inner{
color: @text-color;
}
}
}
&-inner{
width: 100%;
background-color: #fff;
background-clip: padding-box;
//border: 1px solid @border-color-split;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
white-space: nowrap;
}
&-popper{
min-width: 150px;
font-size: @font-size-small;
.popper(@poptip-arrow, @poptip-arrow-width, @poptip-distance, @poptip-arrow-color);
&[x-placement^="top"] .@{poptip-arrow}:after {
content: " ";
bottom: 1px;
margin-left: -@poptip-arrow-width;
border-bottom-width: 0;
border-top-width: @poptip-arrow-width;
border-top-color: #fff;
}
&[x-placement^="right"] .@{poptip-arrow}:after {
content: " ";
left: 1px;
bottom: -@poptip-arrow-width;
border-left-width: 0;
border-right-width: @poptip-arrow-width;
border-right-color: #fff;
}
&[x-placement^="bottom"] .@{poptip-arrow}:after {
content: " ";
top: 1px;
margin-left: -@poptip-arrow-width;
border-top-width: 0;
border-bottom-width: @poptip-arrow-width;
border-bottom-color: #fff;
}
&[x-placement^="left"] .@{poptip-arrow}:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-width: @poptip-arrow-width;
border-left-color: #fff;
bottom: -@poptip-arrow-width;
}
}
&-arrow{
&, &:after{
display: block;
width: 0;
height: 0;
position: absolute;
border-color: transparent;
border-style: solid;
}
}
&-arrow {
border-width: @poptip-arrow-outer-width;
}
&-arrow:after{
content: "";
border-width: @poptip-arrow-width;
}
&-confirm &-popper{
max-width: 300px;
}
&-confirm &-inner{
white-space: normal;
}
&-confirm &-body{
padding: 16px 16px 8px;
.ivu-icon{
font-size: 16px;
color: @warning-color;
line-height: 18px;
position: absolute;
}
&-message{
padding-left: 20px;
}
}
&-confirm &-footer{
text-align: right;
padding: 8px 16px 16px;
button {
margin-left: 4px;
}
}
}

138
src/styles/components/progress.less Normal file
View file

@ -0,0 +1,138 @@
@progress-prefix-cls: ~"@{css-prefix}progress";
.@{progress-prefix-cls} {
display: inline-block;
width: 100%;
&-vertical {
height: 100%;
width: auto;
}
font-size: @font-size-small;
position: relative;
&-outer {
display: inline-block;
width: 100%;
margin-right: 0;
padding-right: 0;
.@{progress-prefix-cls}-show-info & {
padding-right: 55px;
margin-right: -55px;
}
}
&-vertical &-outer {
height: 100%;
width: auto;
}
&-inner {
display: inline-block;
width: 100%;
background-color: #f3f3f3;
border-radius: 100px;
vertical-align: middle;
position: relative;
}
&-vertical &-inner {
height: 100%;
width: auto;
& > *, &:after {
display: inline-block;
vertical-align: bottom;
}
&:after {
content: '';
height: 100%;
}
}
&-bg {
border-radius: 100px;
background-color: @primary-color;
transition: all @transition-time linear;
position: relative;
}
&-success-bg{
border-radius: 100px;
background-color: @success-color;
transition: all @transition-time linear;
position: absolute;
top: 0;
left: 0;
}
&-text {
display: inline-block;
margin-left: 5px;
text-align: left;
font-size: 1em;
vertical-align: middle;
}
&-active {
.@{progress-prefix-cls}-bg:before {
content: '';
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
border-radius: 10px;
animation: ivu-progress-active 2s @ease-in-out infinite;
}
}
&-vertical&-active{
.@{progress-prefix-cls}-bg:before {
top: auto;
animation: ivu-progress-active-vertical 2s @ease-in-out infinite;
}
}
&-wrong {
.@{progress-prefix-cls}-bg {
background-color: @error-color;
}
.@{progress-prefix-cls}-text {
color: @error-color;
}
}
&-success {
.@{progress-prefix-cls}-bg {
background-color: @success-color;
}
.@{progress-prefix-cls}-text {
color: @success-color;
}
}
}
@keyframes ivu-progress-active {
0% {
opacity: .3;
width: 0;
}
100% {
opacity: 0;
width: 100%;
}
}
@keyframes ivu-progress-active-vertical {
0% {
opacity: .3;
height: 0;
}
100% {
opacity: 0;
height: 100%;
}
}

343
src/styles/components/radio.less Normal file
View file

@ -0,0 +1,343 @@
@radio-prefix-cls: ~"@{css-prefix}radio";
@radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
@radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
@radio-group-button-prefix-cls: ~"@{radio-group-prefix-cls}-button";
.@{radio-prefix-cls}-focus {
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
z-index: 1;
}
.@{radio-group-prefix-cls} {
display: inline-block;
font-size: @font-size-small;
vertical-align: middle;
//outline: none;
&-vertical{
.@{radio-prefix-cls}-wrapper {
display: block;
height: 30px;
line-height: 30px;
}
}
}
// 普通状态 - Normal state
.@{radio-prefix-cls}-wrapper {
font-size: @font-size-small;
vertical-align: middle;
display: inline-block;
position: relative;
white-space: nowrap;
margin-right: 8px;
cursor: pointer;
&-disabled{
cursor: @cursor-disabled;
}
//outline: none;
}
.@{radio-prefix-cls} {
display: inline-block;
margin-right: 4px;
white-space: nowrap;
//outline: none;
position: relative;
line-height: 1;
vertical-align: middle;
cursor: pointer;
&:hover {
.@{radio-inner-prefix-cls} {
border-color: #bcbcbc;
}
}
&-inner {
display: inline-block;
width: 14px;
height: 14px;
position: relative;
top: 0;
left: 0;
background-color: #fff;
border: 1px solid @border-color-base;
border-radius: 50%;
transition: all @transition-time @ease-in-out;
&:after {
position: absolute;
width: 8px;
height: 8px;
left: 2px;
top: 2px;
border-radius: @border-radius-base;
display: table;
border-top: 0;
border-left: 0;
content: ' ';
background-color: @primary-color;
opacity: 0;
transition: all @transition-time @ease-in-out;
transform: scale(0);
}
}
&-large{
font-size: @font-size-base;
& .@{radio-inner-prefix-cls}{
width: 16px;
height: 16px;
&:after{
width: 10px;
height: 10px;
}
}
&.@{radio-prefix-cls}-wrapper, & .@{radio-prefix-cls}-wrapper{
font-size: @font-size-base;
}
}
&-small{
& .@{radio-inner-prefix-cls}{
width: 12px;
height: 12px;
&:after{
width: 6px;
height: 6px;
}
}
}
&-input {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
opacity: 0;
cursor: pointer;
}
}
// 选中状态 - Selected state
.@{radio-prefix-cls}-checked {
.@{radio-inner-prefix-cls} {
border-color: @primary-color;
&:after {
opacity: 1;
transform: scale(1);
transition: all @transition-time @ease-in-out;
}
}
&:hover {
.@{radio-inner-prefix-cls} {
border-color: @primary-color;
}
}
}
.@{radio-prefix-cls}-disabled {
cursor: @cursor-disabled;
.@{radio-prefix-cls}-input {
cursor: @cursor-disabled;
}
&:hover {
.@{radio-inner-prefix-cls} {
border-color: @border-color-base;
}
}
.@{radio-inner-prefix-cls} {
border-color: @border-color-base;
background-color: #f3f3f3;
&:after {
background-color: #cccccc;
}
}
.@{radio-prefix-cls}-disabled + span {
color: #ccc;
}
}
span.@{radio-prefix-cls} + * {
margin-left: 2px;
margin-right: 2px;
}
// 按钮样式 - Button style
.@{radio-group-button-prefix-cls} {
font-size: 0;
-webkit-text-size-adjust:none;
.@{radio-prefix-cls}{
width: 0;
margin-right: 0;
}
.@{radio-prefix-cls}-wrapper {
display: inline-block;
height: @btn-circle-size;
line-height: @btn-circle-size - 2px;
margin: 0;
padding: 0 16px - 1px;
font-size: @font-size-small;
color: @btn-default-color;
transition: all @transition-time ease-in-out;
cursor: pointer;
border: 1px solid @border-color-base;
border-left: 0;
background: #fff;
position: relative;
> span {
margin-left: 0;
}
&:before, &:after {
content: '';
display: block;
position: absolute;
width: 1px;
height: 100%;
left: -1px;
top: 0;
background: @border-color-base;
//visibility: hidden;
transition: all @transition-time ease-in-out;
}
&:after{
height: @btn-circle-size + 4px;
left: -1px;
top: -3px;
background: fade(@primary-color, 20%);
opacity: 0;
}
&:first-child {
border-radius: @btn-border-radius 0 0 @btn-border-radius;
border-left: 1px solid @border-color-base;
&:before, &:after {
display: none;
}
}
&:last-child {
border-radius: 0 @btn-border-radius @btn-border-radius 0;
}
&:first-child:last-child {
border-radius: @btn-border-radius;
}
&:hover {
position: relative;
color: @primary-color;
& .@{radio-prefix-cls} {
background-color: black;
}
}
.@{radio-prefix-cls}-inner,
input {
opacity: 0;
width: 0;
height: 0;
}
&-checked {
background: #fff;
border-color: @primary-color;
color: @primary-color;
box-shadow: -1px 0 0 0 @primary-color;
z-index: 1;
&:before{
background: @primary-color;
opacity: 0.1;
}
&.@{radio-prefix-cls}-focus{
box-shadow: -1px 0 0 0 @primary-color, 0 0 0 2px fade(@primary-color, 20%);
transition: all @transition-time ease-in-out;
&:after{
left: -3px;
top: -3px;
opacity: 1;
background: fade(@primary-color, 20%);
}
&:first-child{
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
}
}
&:first-child {
border-color: @primary-color;
box-shadow: none;
}
&:hover {
border-color: tint(@primary-color, 20%);
//box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
color: tint(@primary-color, 20%);
}
&:active {
border-color: shade(@primary-color, 5%);
//box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
color: shade(@primary-color, 5%);
}
}
&-disabled {
border-color: @border-color-base;
background-color: @background-color-base;
cursor: @cursor-disabled;
color: #ccc;
&:first-child,
&:hover {
border-color: @border-color-base;
background-color: @background-color-base;
color: #ccc;
}
&:first-child {
border-left-color: @border-color-base;
}
}
&-disabled.@{radio-prefix-cls}-wrapper-checked {
color: #fff;
background-color: #e6e6e6;
border-color: @border-color-base;
box-shadow: none!important;
}
}
}
.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-large .@{radio-prefix-cls}-wrapper{
height: @btn-circle-size-large;
line-height: @btn-circle-size-large - 2px;
font-size: @font-size-base;
&:after{
height: @btn-circle-size-large + 4px;
}
}
.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-small .@{radio-prefix-cls}-wrapper{
height: @btn-circle-size-small;
line-height: @btn-circle-size-small - 2px;
padding: 0 12px;
font-size: @font-size-small;
&:after{
height: @btn-circle-size-small + 4px;
}
&:first-child {
border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small;
}
&:last-child {
border-radius: 0 @btn-border-radius-small @btn-border-radius-small 0;
}
}

117
src/styles/components/rate.less Normal file
View file

@ -0,0 +1,117 @@
@rate-prefix-cls: ~"@{css-prefix}rate";
.@{rate-prefix-cls} {
display: inline-block;
margin: 0;
padding: 0;
font-size: 20px;
vertical-align: middle;
font-weight: normal;
font-style: normal;
&-disabled &-star {
&:before,
&-content:before {
cursor: default;
}
&:hover {
transform: scale(1);
}
}
&-star-full, &-star-zero {
position: relative;
}
&-star-first {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
opacity: 0;
}
&-star-first, &-star-second {
user-select: none;
transition: all .3s ease;
color: #e9e9e9;
cursor: pointer;
}
&-star-chart {
display: inline-block;
margin: 0;
padding: 0;
margin-right: 8px;
position: relative;
font-family: 'Ionicons';
transition: all 0.3s ease;
&:hover {
transform: scale(1.1);
//&-star-first, &-star-second {
// color: @rate-star-color;
//}
}
}
&-star-chart&-star-full &-star-first, &-star-chart&-star-full &-star-second{
color: @rate-star-color;
}
&-star-chart&-star-half &-star-first{
opacity: 1;
color: @rate-star-color;
}
&-star {
display: inline-block;
margin: 0;
padding: 0;
margin-right: 8px;
position: relative;
font-family: 'Ionicons';
transition: all 0.3s ease;
&:hover {
transform: scale(1.1);
}
&:before,
&-content:before {
color: #e9e9e9;
cursor: pointer;
content: "\F2BF";
transition: all @transition-time @ease-in-out;
display: block;
}
&-content {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
&:before {
color: transparent;
}
}
&-half &-content:before,
&-full:before {
color: @rate-star-color;
}
&-half:hover &-content:before,
&-full:hover:before {
color: tint(@rate-star-color, 20%);
}
}
&-text {
margin-left: 8px;
vertical-align: middle;
display: inline-block;
font-size: @font-size-small;
}
}

67
src/styles/components/scroll.less Normal file
View file

@ -0,0 +1,67 @@
@scroll-prefix-cls: ~"@{css-prefix}scroll";
.@{scroll-prefix-cls} {
&-wrapper {
width: auto;
margin: 0 auto;
position: relative;
outline: none;
}
&-container {
overflow-y: scroll;
}
&-content {
opacity: 1;
transition: opacity 0.5s;
}
&-content-loading {
opacity: 0.5;
}
&-loader {
text-align: center;
padding: 0;
transition: padding 0.5s;
}
}
.@{scroll-prefix-cls}-loader-wrapper {
padding: 5px 0;
height: 0;
background-color: inherit;
transform: scale(0);
transition: opacity .3s, transform .5s, height .5s;
&-active {
height: 40px;
transform: scale(1);
}
@keyframes ani-demo-spin {
from {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
}
.@{scroll-prefix-cls}-spinner {
position: relative;
}
.@{scroll-prefix-cls}-spinner-icon {
animation: ani-demo-spin 1s linear infinite;
}
}
@media (max-width: @screen-sm) {
.@{scroll-prefix-cls} {
}
}

30
src/styles/components/select-dropdown.less Normal file
View file

@ -0,0 +1,30 @@
@select-dropdown-prefix-cls: ~"@{css-prefix}select-dropdown";
@transfer-no-max-height: ~"@{css-prefix}transfer-no-max-height";
.@{select-dropdown-prefix-cls} {
width: inherit;
max-height: 200px;
overflow: auto;
margin: 5px 0;
padding: 5px 0;
background-color: #fff;
box-sizing: border-box;
//border: 1px solid @border-color-split;
border-radius: @btn-border-radius;
//box-shadow: 0 1px 3px rgba(0,0,0,.2);
box-shadow: @shadow-base;
position: absolute;
z-index: @zindex-select;
&-transfer{
z-index: @zindex-transfer;
width: auto;
}
&.@{transfer-no-max-height} {
max-height: none;
}
}
.@{modal-prefix-cls} {
.@{select-dropdown-prefix-cls} {
position: absolute !important;
}
}

343
src/styles/components/select.less Normal file
View file

@ -0,0 +1,343 @@
@select-prefix-cls: ~"@{css-prefix}select";
@select-item-prefix-cls: ~"@{css-prefix}select-item";
@select-group-prefix-cls: ~"@{css-prefix}select-group";
.@{select-prefix-cls} {
display: inline-block;
width: 100%;
box-sizing: border-box;
vertical-align: middle;
color: @text-color;
font-size: @font-size-base;
//position: relative;
line-height: normal;
&-selection {
display: block;
box-sizing: border-box;
outline: none;
user-select: none;
cursor: pointer;
position: relative;
background-color: #fff;
border-radius: @btn-border-radius;
border: 1px solid @border-color-base;
transition: all @transition-time @ease-in-out;
&:hover, &-focused {
.hover();
.@{select-prefix-cls}-arrow {
display: inline-block;
}
}
}
&-arrow {
.inner-arrow();
}
&-visible{
.@{select-prefix-cls}-selection{
.active();
}
.@{select-prefix-cls}-arrow {
transform: translateY(-50%) rotate(180deg);
display: inline-block;
}
}
&-disabled {
.@{select-prefix-cls}-selection {
.disabled();
.@{select-prefix-cls}-arrow {
color: @slider-disabled-color;
}
&:hover {
border-color: @border-color-base;
box-shadow: none;
.@{select-prefix-cls}-arrow {
display: inline-block;
}
}
}
}
&-single &-selection{
height: @input-height-base;
position: relative;
.@{select-prefix-cls}-placeholder{
color: @input-placeholder-color;
}
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
display: block;
height: @input-height-base - 2px;
line-height: @input-height-base - 2px;
font-size: @font-size-small;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 8px;
padding-right: 24px;
}
}
&-multiple &-selection{
padding: 0 24px 0 4px;
//min-height: @input-height-base;
.@{select-prefix-cls}-placeholder{
display: block;
height: @input-height-base - 2px;
line-height: @input-height-base - 2px;
color: @input-placeholder-color;
font-size: @font-size-small;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 4px;
padding-right: 22px;
}
}
&-large&-single &-selection{
height: @input-height-large;
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
height: @input-height-large - 2px;
line-height: @input-height-large - 2px;
font-size: @font-size-base;
}
}
&-large&-multiple &-selection{
min-height: @input-height-large;
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
min-height: @input-height-large - 2px;
line-height: @input-height-large - 2px;
font-size: @font-size-base;
}
}
&-small&-single &-selection{
height: @input-height-small;
border-radius: @btn-border-radius-small;
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
height: @input-height-small - 2px;
line-height: @input-height-small - 2px;
}
}
&-small&-multiple &-selection{
min-height: @input-height-small;
border-radius: @btn-border-radius-small;
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
height: auto;
min-height: @input-height-small - 2px;
line-height: @input-height-small - 2px;
}
}
// input
&-input{
display: inline-block;
height: @input-height-base;
line-height: @input-height-base;
padding: 0 24px 0 8px;
font-size: @font-size-small;
outline: none;
border: none;
box-sizing: border-box;
color: @input-color;
background-color: transparent;
position: relative;
cursor: pointer;
.placeholder();
&[disabled]{
cursor: @cursor-disabled;
color: #ccc;
-webkit-text-fill-color: #ccc; // #5249
}
}
&-single &-input{
width: 100%;
}
&-large &-input{
font-size: @font-size-base;
height: @input-height-large;
}
&-small &-input{
height: @input-height-small - 2px;
line-height: @input-height-small - 2px;
}
&-multiple &-input{
height: @input-height-base - 2px;
line-height: @input-height-base;
padding: 0 0 0 4px;
}
&-not-found{
text-align: center;
color: @btn-disable-color;
li:not([class^=ivu-]){
margin-bottom: 0;
}
}
&-loading{
text-align: center;
color: @btn-disable-color;
}
&-multiple .@{css-prefix}tag{
height: 24px;
line-height: 22px;
margin: 3px 4px 3px 0;
max-width: 99%;
position: relative;
span:not(.ivu-select-max-tag){
display: block;
margin-right: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
i{
display: block;
position: absolute;
right: 4px;
top: 4px;
}
}
&-large&-multiple .@{css-prefix}tag{
height: 28px;
line-height: 26px;
font-size: @font-size-base;
i{
top: 6px;
}
}
&-small&-multiple .@{css-prefix}tag{
height: 17px;
line-height: 15px;
font-size: @font-size-small;
padding: 0 6px;
margin: 3px 4px 2px 0;
span{
margin-right: 14px;
}
i{
top: 1px;
right: 2px;
}
}
&-dropdown-list {
//display: inline-block;
min-width: 100%;
list-style: none;
}
& &-dropdown{
width: auto;
}
&-prefix{
display: inline-block;
vertical-align: middle;
i{
vertical-align: top;
}
}
&-head-with-prefix{
display: inline-block !important;
vertical-align: middle;
}
&-single &-prefix{
padding-left: 4px;
}
&-single &-head-with-prefix, &-multiple &-head-with-prefix{
padding-left: 0 !important;
}
&-head-flex{
display: flex;
align-items: center;
}
&-multiple &-head-flex &-prefix{
margin-right: 4px;
}
}
.select-item(@select-prefix-cls, @select-item-prefix-cls);
.@{select-prefix-cls}-multiple .@{select-item-prefix-cls} {
position: relative;
&-selected{
color: @selected-color;
background: #fff;
}
&-focus,&-selected:hover{
background: @background-color-select-hover;
}
&-selected&-focus {
color: shade(@selected-color, 10%);
background: #fff;
}
&-selected:after{
.ivu-icon();
//float: right;
font-size: 24px;
content: '\F171';
color: @selected-color;
position: absolute;
top: 2px;
right: 8px;
}
}
.@{select-group-prefix-cls} {
list-style: none;
margin: 0;
padding: 0;
&-title {
padding-left: 8px;
font-size: 12px;
color: @legend-color;
height: 30px;
line-height: 30px;
}
}
.@{form-item-prefix-cls}-error{
.@{select-prefix-cls}{
&-selection{
border: 1px solid @error-color;
}
&-arrow{
color: @error-color;
}
&-visible .@{select-prefix-cls}-selection{
.active-error;
}
}
}

113
src/styles/components/slider.less Normal file
View file

@ -0,0 +1,113 @@
@slider-prefix-cls: ~"@{css-prefix}slider";
.@{slider-prefix-cls} {
line-height: normal;
&-wrap{
width: 100%;
height: @slider-height;
margin: @slider-margin;
background-color: @border-color-split;
border-radius: @btn-border-radius-small;
vertical-align: middle;
position: relative;
cursor: pointer;
}
&-button-wrap{
.square(@slider-button-wrap-size);
text-align: center;
background-color: transparent;
position: absolute;
top: @slider-button-wrap-offset;
transform: translateX(-50%);
.@{tooltip-prefix-cls} {
display: block;
user-select: none;
}
}
&-button{
width: 12px;
height: 12px;
border: 2px solid @slider-color;
border-radius: 50%;
background-color: #fff;
transition: all @transition-time linear;
outline: 0;
&:focus,
&:hover,
&-dragging
{
border-color: @primary-color;
transform: scale(1.5);
}
&:hover{
cursor: grab;
}
&-dragging,
&-dragging:hover
{
cursor: grabbing;
}
}
&-bar{
height: @slider-height;
background: @slider-color;
border-radius: @btn-border-radius-small;
position: absolute;
}
&-stop{
position: absolute;
.square(@slider-height);
border-radius: 50%;
background-color: @slider-disabled-color;
transform: translateX(-50%);
}
}
.@{slider-prefix-cls}-disabled{
cursor: @cursor-disabled;
.@{slider-prefix-cls}-wrap{
background-color: @slider-disabled-color;
cursor: @cursor-disabled;
}
.@{slider-prefix-cls}-bar{
background-color: @slider-disabled-color;
}
.@{slider-prefix-cls}-button{
border-color: @slider-disabled-color;
&:hover,
&-dragging
{
border-color: @slider-disabled-color;
}
&:hover{
cursor: @cursor-disabled;
}
&-dragging,
&-dragging:hover
{
cursor: @cursor-disabled;
}
}
}
.@{slider-prefix-cls}-input{
.@{slider-prefix-cls}-wrap{
width: auto;
margin-right: 100px;
}
.@{input-number-prefix-cls}{
float: right;
margin-top: -14px;
}
}

87
src/styles/components/spin.less Normal file
View file

@ -0,0 +1,87 @@
@spin-prefix-cls: ~"@{css-prefix}spin";
@spin-dot-size-small: 12px;
@spin-dot-size: 20px;
@spin-dot-size-large: 32px;
.@{spin-prefix-cls} {
color: @primary-color;
vertical-align: middle;
text-align: center;
&-dot {
position: relative;
display: block;
border-radius: 50%;
background-color: @primary-color;
.square(@spin-dot-size);
animation: ani-spin-bounce 1s 0s ease-in-out infinite;
}
&-large &-dot {
.square(@spin-dot-size-large);
}
&-small &-dot {
.square(@spin-dot-size-small);
}
&-fix {
position: absolute;
top: 0;
left: 0;
z-index: @zindex-spin;
.square(100%);
background-color: rgba(255,255,255,.9);
}
&-fullscreen{
z-index: @zindex-spin-fullscreen;
&-wrapper{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
&-fix &-main {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
&-fix &-dot {
display: inline-block;
}
&-text,
&-show-text &-dot {
display: none;
}
&-show-text &-text {
display: block;
}
}
// use in Table loading, Table right border is not included in .ivu-table-wrapper, so fix it
.@{table-prefix-cls}-wrapper{
> .@{spin-prefix-cls}-fix{
border: 1px solid @border-color-base;
border-top: 0;
border-left: 0;
}
}
@keyframes ani-spin-bounce {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
opacity: 0;
}
}

123
src/styles/components/split.less Normal file
View file

@ -0,0 +1,123 @@
@split-prefix-cls: ~"@{css-prefix}split";
@box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.4);
@trigger-bar-background: rgba(23, 35, 61, 0.25);
@trigger-background: #f8f8f9;
@trigger-width: 6px;
@trigger-bar-width: 4px;
@trigger-bar-offset: (@trigger-width - @trigger-bar-width) / 2;
@trigger-bar-interval: 3px;
@trigger-bar-weight: 1px;
@trigger-bar-con-height: (@trigger-bar-weight + @trigger-bar-interval) * 8;
.@{split-prefix-cls} {
&-wrapper {
position: relative;
width: 100%;
height: 100%;
}
&-pane {
position: absolute;
&.left-pane, &.right-pane {
top: 0;
bottom: 0;
}
&.left-pane {
left: 0;
}
&.right-pane {
right: 0;
}
&.top-pane, &.bottom-pane {
left: 0;
right: 0;
}
&.top-pane {
top: 0;
}
&.bottom-pane {
bottom: 0;
}
&-moving{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
&-trigger {
border: 1px solid @border-color-base;
&-con {
position: absolute;
transform: translate(-50%, -50%);
z-index: 10;
}
&-bar-con {
position: absolute;
overflow: hidden;
&.vertical {
left: @trigger-bar-offset;
top: 50%;
height: @trigger-bar-con-height;
transform: translate(0, -50%);
}
&.horizontal {
left: 50%;
top: @trigger-bar-offset;
width: @trigger-bar-con-height;
transform: translate(-50%, 0);
}
}
&-vertical {
width: @trigger-width;
height: 100%;
background: @trigger-background;
border-top: none;
border-bottom: none;
cursor: col-resize;
.@{split-prefix-cls}-trigger-bar {
width: @trigger-bar-width;
height: 1px;
background: @trigger-bar-background;
float: left;
margin-top: @trigger-bar-interval;
}
}
&-horizontal {
height: @trigger-width;
width: 100%;
background: @trigger-background;
border-left: none;
border-right: none;
cursor: row-resize;
.@{split-prefix-cls}-trigger-bar {
height: @trigger-bar-width;
width: 1px;
background: @trigger-bar-background;
float: left;
margin-right: @trigger-bar-interval;
}
}
}
&-horizontal {
.@{split-prefix-cls}-trigger-con {
top: 50%;
height: 100%;
width: 0;
}
}
&-vertical {
.@{split-prefix-cls}-trigger-con {
left: 50%;
height: 0;
width: 100%;
}
}
.no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}

353
src/styles/components/steps.less Normal file
View file

@ -0,0 +1,353 @@
@steps-prefix-cls: ~"@{css-prefix}steps";
@steps-wait-icon-color: #ccc;
@steps-wait-title-color: #999;
@steps-wait-description-color: @steps-wait-title-color;
@steps-wait-tail-color: @border-color-split;
@steps-title-color: #666;
.@{steps-prefix-cls} {
font-size: 0;
width: 100%;
line-height: 1.5;
&-item{
display: inline-block;
position: relative;
vertical-align: top;
&.@{steps-prefix-cls}-status-wait{
.@{steps-prefix-cls}-head-inner {
background-color: #fff;
> .@{steps-prefix-cls}-icon, span {
color: @steps-wait-icon-color;
}
}
.@{steps-prefix-cls}-title {
color: @steps-wait-title-color;
}
.@{steps-prefix-cls}-content {
color: @steps-wait-description-color;
}
.@{steps-prefix-cls}-tail > i {
background-color: @steps-wait-tail-color;
}
}
&.@{steps-prefix-cls}-status-process {
.@{steps-prefix-cls}-head-inner {
border-color: @primary-color;
background-color: @primary-color;
> .@{steps-prefix-cls}-icon, span {
color: #fff;
}
}
.@{steps-prefix-cls}-title {
color: @steps-title-color;
}
.@{steps-prefix-cls}-content {
color: @steps-title-color;
}
.@{steps-prefix-cls}-tail > i {
background-color: @border-color-split;
}
}
&.@{steps-prefix-cls}-status-finish {
.@{steps-prefix-cls}-head-inner {
background-color: #fff;
border-color: @primary-color;
> .@{steps-prefix-cls}-icon, span {
color: @primary-color;
}
}
.@{steps-prefix-cls}-tail > i:after {
width: 100%;
background: @primary-color;
transition: all @transition-time @ease-in-out;
opacity: 1;
}
.@{steps-prefix-cls}-title {
color: @steps-wait-title-color;
}
.@{steps-prefix-cls}-content {
color: @steps-wait-description-color;
}
}
&.@{steps-prefix-cls}-status-error {
.@{steps-prefix-cls}-head-inner {
background-color: #fff;
border-color: @error-color;
> .@{steps-prefix-cls}-icon {
color: @error-color;
}
}
.@{steps-prefix-cls}-title {
color: @error-color;
}
.@{steps-prefix-cls}-content {
color: @error-color;
}
.@{steps-prefix-cls}-tail > i {
background-color: @border-color-split;
}
}
&.@{steps-prefix-cls}-next-error {
.@{steps-prefix-cls}-tail > i,
.@{steps-prefix-cls}-tail > i:after {
background-color: @error-color;
}
}
&.@{steps-prefix-cls}-custom {
.@{steps-prefix-cls}-head-inner {
background: none;
border: 0;
width: auto;
height: auto;
> .@{steps-prefix-cls}-icon {
font-size: 20px;
top: 2px;
width: 20px;
height: 20px;
}
}
&.@{steps-prefix-cls}-status-process {
.@{steps-prefix-cls}-head-inner > .@{steps-prefix-cls}-icon {
color: @primary-color;
}
}
}
}
&-item:last-child &-tail{
display: none;
}
.@{steps-prefix-cls}-head,
.@{steps-prefix-cls}-main {
position: relative;
display: inline-block;
vertical-align: top;
}
.@{steps-prefix-cls}-head {
background: #fff;
}
.@{steps-prefix-cls}-head-inner {
display: block;
width: 26px;
height: 26px;
line-height: 24px;
margin-right: 8px;
text-align: center;
border: 1px solid @steps-wait-icon-color;
border-radius: 50%;
font-size: 14px;
transition: background-color @transition-time @ease-in-out;
> .@{steps-prefix-cls}-icon {
line-height: 1;
position: relative;
&.ivu-icon {
font-size: 24px;
&-ios-checkmark-empty,
&-ios-close-empty {
font-weight: bold;
}
}
}
}
.@{steps-prefix-cls}-main {
margin-top: 2.5px;
display: inline;
}
.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-title{
margin-top: 2.5px;
}
.@{steps-prefix-cls}-title {
display: inline-block;
margin-bottom: 4px;
padding-right: 10px;
font-size: 14px;
font-weight: bold;
color: #666;
background: #fff;
> a:first-child:last-child {
color: #666;
}
}
.@{steps-prefix-cls}-item-last {
.@{steps-prefix-cls}-title {
padding-right: 0;
width: 100%;
}
}
.@{steps-prefix-cls}-content {
font-size: 12px;
color: #999;
}
.@{steps-prefix-cls}-tail {
width: 100%;
padding: 0 10px;
position: absolute;
left: 0;
top: 13px;
> i {
display: inline-block;
width: 100%;
height: 1px;
vertical-align: top;
background: @border-color-split;
border-radius: 1px;
position: relative;
&:after {
content: '';
width: 0;
height: 100%;
background: @border-color-split;
opacity: 0;
position: absolute;
top: 0;
}
}
}
&.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-head-inner {
width: 18px;
height: 18px;
line-height: 16px;
margin-right: 10px;
text-align: center;
border-radius: 50%;
font-size: 12px;
> .@{steps-prefix-cls}-icon.ivu-icon {
font-size: 16px;
top: 0;
}
}
.@{steps-prefix-cls}-main {
margin-top: 0;
}
.@{steps-prefix-cls}-title {
margin-bottom: 4px;
margin-top: 0;
color: #666;
font-size: 12px;
font-weight: bold;
}
.@{steps-prefix-cls}-content {
font-size: 12px;
color: #999;
padding-left: 30px;
}
.@{steps-prefix-cls}-tail {
top: 8px;
padding: 0 8px;
> i {
height: 1px;
width: 100%;
border-radius: 1px;
}
}
}
&.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner,
.@{steps-prefix-cls}-item.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner {
width: inherit;
height: inherit;
line-height: inherit;
border-radius: 0;
border: 0;
background: none;
}
}
.@{steps-prefix-cls}-vertical {
.@{steps-prefix-cls}-item {
display: block;
}
.@{steps-prefix-cls}-tail {
position: absolute;
left: 13px;
top: 0;
height: 100%;
width: 1px;
padding: 30px 0 4px 0;
> i {
height: 100%;
width: 1px;
&:after {
height: 0;
width: 100%;
}
}
}
.@{steps-prefix-cls}-status-finish {
.@{steps-prefix-cls}-tail > i:after {
height: 100%;
}
}
.@{steps-prefix-cls}-head {
float: left;
&-inner {
margin-right: 16px;
}
}
.@{steps-prefix-cls}-main {
min-height: 47px;
overflow: hidden;
display: block;
.@{steps-prefix-cls}-title {
line-height: 26px;
}
.@{steps-prefix-cls}-content {
padding-bottom: 12px;
padding-left: 0;
}
}
.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-icon {
left: 4px;
}
&.@{steps-prefix-cls}-small .@{steps-prefix-cls}-custom .@{steps-prefix-cls}-icon {
left: 0;
}
}
.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-tail {
position: absolute;
left: 9px;
top: 0;
padding: 22px 0 4px 0;
> i {
height: 100%;
}
}
.@{steps-prefix-cls}-title {
line-height: 18px;
}
}
.@{steps-prefix-cls}-horizontal {
&.@{steps-prefix-cls}-hidden {
visibility: hidden;
}
.@{steps-prefix-cls}-content {
//max-width: 100px;
padding-left: 35px;
}
.@{steps-prefix-cls}-item:not(:first-child) .@{steps-prefix-cls}-head {
padding-left: 10px;
margin-left: -10px;
}
}

191
src/styles/components/switch.less Normal file
View file

@ -0,0 +1,191 @@
@switch-prefix-cls: ~"@{css-prefix}switch";
.@{switch-prefix-cls} {
display: inline-block;
width: 44px;
height: 22px;
line-height: 20px;
border-radius: 22px;
vertical-align: middle;
border: 1px solid #ccc;
background-color: #ccc;
position: relative;
cursor: pointer;
user-select: none;
transition: all @transition-time @ease-in-out;
&-loading{
opacity: .4;
}
&-inner {
color: #fff;
font-size: @font-size-small;
position: absolute;
left: 23px;
i {
width: 12px;
height: 12px;
text-align: center;
position: relative;
top: -1px;
}
}
&:after {
content: '';
width: 18px;
height: 18px;
border-radius: 18px;
background-color: #fff;
position: absolute;
left: 1px;
top: 1px;
cursor: pointer;
transition: left @transition-time @ease-in-out, width @transition-time @ease-in-out;
}
&:active:after {
width: 26px;
}
&:before{
content: '';
display: none;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: transparent;
position: absolute;
left: 3px;
top: 3px;
z-index: 1;
border: 1px solid @primary-color;
border-color: transparent transparent transparent @primary-color;
animation: switch-loading 1s linear;
animation-iteration-count: infinite;
}
&-loading:before{
display: block;
}
&:focus {
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
outline: 0;
}
&:focus:hover {
box-shadow: none;
}
&-small {
width: 28px;
height: 16px;
line-height: 14px;
&:after {
width: 12px;
height: 12px;
}
&:active:after {
width: 14px;
}
&:before{
width: 10px;
height: 10px;
left: 2px;
top: 2px;
}
}
&-small&-checked:after {
left: 13px;
}
&-small&-checked:before {
left: 14px;
}
&-small:active&-checked:after {
left: 11px;
}
&-large{
width: 56px;
&:active:after {
width: 26px;
}
}
&-large:active:after {
width: 30px;
}
&-large&-checked:after {
left: 35px;
}
&-large&-checked:before {
left: 37px;
}
&-large:active&-checked:after {
left: 23px;
}
&-checked {
border-color: @primary-color;
background-color: @primary-color;
.@{switch-prefix-cls}-inner {
left: 7px;
}
&:after {
left: 23px;
}
&:before{
left: 25px;
}
&:active:after {
left: 15px;
}
}
&-disabled {
cursor: @cursor-disabled;
opacity: .4;
&:after {
background: #fff;
cursor: not-allowed;
}
.@{switch-prefix-cls}-inner {
color: #fff;
}
}
&-disabled&-checked{
border-color: @primary-color;
background-color: @primary-color;
opacity: .4;
&:after {
background: #fff;
}
.@{switch-prefix-cls}-inner {
color: #fff;
}
}
}
@keyframes switch-loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

424
src/styles/components/table.less Normal file
View file

@ -0,0 +1,424 @@
@table-prefix-cls: ~"@{css-prefix}table";
@table-select-item-prefix-cls: ~"@{table-prefix-cls}-filter-select-item";
.@{table-prefix-cls} {
&-wrapper{
position: relative;
border: 1px solid @border-color-base;
border-bottom: 0;
border-right: 0;
overflow: hidden; // 开启 max-height 时，没有 overflow: hidden，则底部多出 1px，早期没有 overflow 是因为有些控件没有加 transfer
}
width: inherit;
height: 100%;
max-width: 100%;
overflow: hidden;
color: @text-color;
font-size: @font-size-small;
background-color: #fff;
box-sizing: border-box;
//position: relative;
&-hide{
opacity: 0;
}
&:before{
content: '';
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
background-color: @border-color-base;
z-index: 1;
}
&:after{
content: '';
width: 1px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: @border-color-base;
z-index: 3;
}
&-with-header{
//border-radius: @border-radius-base @border-radius-base 0 0;
}
&-with-footer{
//border: 1px solid @border-color-base;
//border-radius: 0 0 @border-radius-base @border-radius-base;
}
&-with-header&-with-footer{
//border-radius: @border-radius-base;
}
&-title, &-footer{
height: 48px;
line-height: 48px;
border-bottom: 1px solid @border-color-split;
}
&-footer{
border-bottom: none;
}
&-header{
overflow: hidden;
}
&-body{
//overflow: auto;
//position: relative;
}
&-overflowX{
overflow-x: scroll;
}
&-overflowY{
overflow-y: scroll;
}
&-tip{
overflow-x: auto;
overflow-y: hidden;
//position: relative;
}
&-with-fixed-top&-with-footer{
.@{table-prefix-cls}-footer{
border-top: 1px solid @border-color-base;
}
tbody tr:last-child td{
border-bottom: none;
}
}
th, td
{
min-width: 0;
height: 48px;
box-sizing: border-box;
text-align: left;
text-overflow: ellipsis;
vertical-align: middle;
//position: relative;
border-bottom: 1px solid @border-color-split;
}
th {
height: 40px;
white-space: nowrap;
overflow: hidden;
background-color: @table-thead-bg;
}
td{
background-color: #fff;
transition: background-color @transition-time @ease-in-out;
}
th&-column,
td&-column
{
&-left{
text-align: left;
}
&-center{
text-align: center;
}
&-right{
text-align: right;
}
}
& table{
//width: 100%;
table-layout: fixed;
}
&-border{
th,td{
border-right: 1px solid @border-color-split;
}
}
&-cell{
padding-left: 18px;
padding-right: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-break: break-all;
box-sizing: border-box;
&-ellipsis {
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&-tooltip{
width: 100%;
display: flex;
align-items: center;
&-content{
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&-with-expand{
height: 47px;
line-height: 47px;
padding: 0;
text-align: center;
}
&-expand{
cursor: pointer;
transition: transform @transition-time @ease-in-out;
i{
font-size: @font-size-base;
}
&-expanded{
transform: rotate(90deg);
}
}
&-sort{
cursor: pointer;
user-select: none;
}
// #3159
&-with-selection{
.@{checkbox-prefix-cls}-wrapper{
margin-right: 0;
}
}
}
&-hidden{
visibility: hidden;
}
th &-cell{
display: inline-block;
//position: relative;
word-wrap: normal;
vertical-align: middle;
}
td&-expanded-cell{
padding: 20px 50px;
background: @table-thead-bg;
}
&-stripe &-body,
&-stripe &-fixed-body
{
tr:nth-child(2n) {
td{
background-color: @table-td-stripe-bg;
}
}
// #1380
tr.@{table-prefix-cls}-row-hover{
td{
background-color: @table-td-hover-bg;
}
}
}
tr&-row-hover{
td{
background-color: @table-td-hover-bg;
}
}
&-large {
font-size: @font-size-base;
th{
height: 48px;
}
td{
height: 60px;
}
&-title, &-footer{
height: 60px;
line-height: 60px;
}
.@{table-prefix-cls}-cell-with-expand{
height: 59px;
line-height: 59px;
i{
font-size: @font-size-base+2;
}
}
}
&-small{
th{
height: 32px;
}
td{
height: 40px;
}
&-title, &-footer{
height: 40px;
line-height: 40px;
}
.@{table-prefix-cls}-cell-with-expand{
height: 39px;
line-height: 39px;
}
}
&-row-highlight,
tr&-row-highlight&-row-hover,
&-stripe &-body tr&-row-highlight:nth-child(2n),
&-stripe &-fixed-body tr&-row-highlight:nth-child(2n)
{
td{
background-color: @table-td-highlight-bg;
}
}
&-fixed, &-fixed-right{
position: absolute;
top: 0;
left: 0;
box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
&::before {
content: '';
width: 100%;
height: 1px;
background-color: @border-color-base;
position: absolute;
left: 0;
bottom: 0;
z-index: 4;
}
}
&-fixed-right{
top: 0;
left: auto;
right: 0;
box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
}
&-fixed-right-header{
position: absolute;
top: -1px;
right: 0;
background-color: @table-thead-bg;
border-top: 1px solid @border-color-base;
border-bottom: 1px solid @border-color-split;
}
&-fixed-header{
overflow: hidden;
// 在 #1387 里，添加了下面的代码，但是在 #5174 会出现新的问题。
// 但是，在新版本里，注释掉后，#1387 的问题并没有再复现，所以注释掉
//&-with-empty{
// .@{table-prefix-cls}-hidden{
// .@{table-prefix-cls}-sort{
// display: none;
// }
// .@{table-prefix-cls}-cell span{
// display: none;
// }
// }
//}
}
&-fixed-body{
overflow: hidden;
position: relative;
z-index: 3;
}
&-fixed-shadow {
width: 1px;
height: 100%;
position: absolute;
top: 0;
right: 0;
box-shadow: @shadow-right;
overflow: hidden;
z-index: 1;
}
&-sort{
.sortable();
}
&-filter{
display: inline-block;
cursor: pointer;
position: relative;
//top: 1px;
i{
color: @btn-disable-color;
transition: color @transition-time @ease-in-out;
&:hover{
color: inherit;
}
&.on{
color: @primary-color;
}
}
&-list{
padding: 8px 0 0;
&-item{
padding: 0 12px 8px;
.ivu-checkbox-wrapper + .ivu-checkbox-wrapper{
margin: 0;
}
label {
display: block;
& > span{
margin-right: 4px;
}
}
}
ul{
padding-bottom: 8px;
}
.select-item(@table-prefix-cls, @table-select-item-prefix-cls);
}
&-footer{
padding: 4px;
border-top: 1px solid @border-color-split;
overflow: hidden;
button:first-child{
float: left;
}
button:last-child{
float: right;
}
}
}
&-tip {
table {
width: 100%;
td {
text-align: center;
}
}
}
&-expanded-hidden{
visibility: hidden;
}
}
.ivu-table-popper{
min-width: 0;
text-align: left;
.ivu-poptip-body{
padding: 0;
}
}

240
src/styles/components/tabs.less Normal file
View file

@ -0,0 +1,240 @@
@tabs-prefix-cls: ~"@{css-prefix}tabs";
.@{tabs-prefix-cls} {
box-sizing: border-box;
position: relative;
overflow: hidden;
color: @text-color;
.clearfix;
&-bar {
outline: none;
}
&-ink-bar {
height: 2px;
box-sizing: border-box;
background-color: @primary-color;
position: absolute;
left: 0;
bottom: 1px;
z-index: 1;
transition: transform .3s @ease-in-out;
transform-origin: 0 0;
}
&-bar {
border-bottom: 1px solid @border-color-base;
margin-bottom: 16px;
}
&-nav-container {
margin-bottom: -1px;
line-height: @line-height-base;
font-size: @font-size-base;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
position: relative;
.clearfix;
}
&-nav-container:focus {
outline: none;
.@{tabs-prefix-cls}-tab-focused {
border-color: @link-hover-color !important;
}
}
&-nav-container-scrolling {
padding-left: 32px;
padding-right: 32px;
}
&-nav-wrap {
overflow: hidden;
margin-bottom: -1px;
}
&-nav-scroll {
overflow: hidden;
white-space: nowrap;
}
&-nav-right{
float: right;
margin-left: 5px;
}
&-nav-prev{
position:absolute;
line-height: 32px;
cursor: pointer;
left:0;
}
&-nav-next{
position:absolute;
line-height: 32px;
cursor: pointer;
right:0;
}
&-nav-scrollable{
padding: 0 12px;
}
&-nav-scroll-disabled{
display: none;
}
&-nav {
padding-left: 0;
margin: 0;
float: left;
list-style: none;
box-sizing: border-box;
position: relative;
transition: transform 0.5s @ease-in-out;
&:before,
&:after {
display: table;
content: " ";
}
&:after {
clear: both;
}
.@{tabs-prefix-cls}-tab-disabled {
pointer-events: none;
cursor: default;
color: #ccc;
}
.@{tabs-prefix-cls}-tab {
display: inline-block;
height: 100%;
padding: 8px 16px;
margin-right: 16px;
box-sizing: border-box;
cursor: pointer;
text-decoration: none;
position: relative;
transition: color .3s @ease-in-out;
&:hover {
color: @link-hover-color;
}
&:active {
color: @link-active-color;
}
.@{css-prefix-iconfont} {
width: 14px;
height: 14px;
margin-right: 8px;
}
}
.@{tabs-prefix-cls}-tab-active {
color: @primary-color;
}
}
&-mini &-nav-container {
font-size: @font-size-base;
}
&-mini &-tab {
margin-right: 0;
padding: 8px 16px;
font-size: @font-size-small;
}
& {
.@{tabs-prefix-cls}-content-animated {
display: flex;
flex-direction: row;
will-change: transform;
transition: transform .3s @ease-in-out;
}
.@{tabs-prefix-cls}-tabpane {
flex-shrink: 0;
width: 100%;
transition: opacity .3s;
opacity: 1;
outline: none;
}
.@{tabs-prefix-cls}-tabpane-inactive {
opacity: 0;
height: 0;
}
}
// card style
&&-card > &-bar &-nav-container {
height: 32px;
}
&&-card > &-bar &-ink-bar {
visibility: hidden;
}
&&-card > &-bar &-tab {
margin: 0;
margin-right: 4px;
height: 31px;
padding: 5px 16px 4px;
border: 1px solid @border-color-base;
border-bottom: 0;
border-radius: @btn-border-radius @btn-border-radius 0 0;
transition: all 0.3s @ease-in-out;
background: @table-thead-bg;
}
&&-card > &-bar &-tab-active {
height: 32px;
padding-bottom: 5px;
background: #fff;
transform: translateZ(0);
border-color: @border-color-base;
color: @primary-color;
}
&&-card > &-bar &-nav-wrap {
margin-bottom: 0;
}
&&-card > &-bar &-tab &-close {
width: 0;
height: 22px;
font-size: 22px;
margin-right: 0;
color: @legend-color;
text-align: right;
vertical-align: middle;
overflow: hidden;
position: relative;
top: -1px;
transform-origin: 100% 50%;
transition: all 0.3s @ease-in-out;
&:hover {
color: #444;
}
}
&&-card > &-bar &-tab-active &-close,
&&-card > &-bar &-tab:hover &-close {
width: 22px;
transform: translateZ(0);
margin-right: -6px;
}
}
.@{tabs-prefix-cls}-no-animation{
> .@{tabs-prefix-cls}-content {
transform: none!important;
> .@{tabs-prefix-cls}-tabpane-inactive {
display: none;
}
}
}

254
src/styles/components/tag.less Normal file
View file

@ -0,0 +1,254 @@
@tag-prefix-cls: ~"@{css-prefix}tag";
@tag-close-prefix-cls: ivu-icon-ios-close;
.@{tag-prefix-cls} {
display: inline-block;
height: 22px;
line-height: 22px;
margin: 2px 4px 2px 0;
padding: 0 8px;
border: 1px solid @border-color-split;
border-radius: @btn-border-radius-small;
background: @background-color-base;
font-size: @tag-font-size;
vertical-align: middle;
opacity: 1;
overflow: hidden;
cursor: pointer;
//transition: all @transition-time @ease-in-out;
// for color and unchecked
&:not(&-border):not(&-dot):not(&-checked){
background: transparent;
border: 0;
color: @text-color;
.@{tag-close-prefix-cls} {
color: @text-color !important;
}
}
&-color{
&-error{
color: @error-color !important;
border-color: @error-color;
}
&-success{
color: @success-color !important;
border-color: @success-color;
}
&-primary{
color: @link-color !important;
border-color: @link-color;
}
&-warning{
color: @warning-color !important;
border-color: @warning-color;
}
&-white{
color: rgb(255, 255, 255) !important;
}
}
&-dot{
height: 32px;
line-height: 32px;
border: 1px solid @border-color-split !important;
color: @text-color !important;
background: #fff !important;
padding: 0 12px;
&-inner{
display: inline-block;
width: 12px;
height: 12px;
margin-right: 8px;
border-radius: 50%;
background: @border-color-split;
position: relative;
top: 1px;
}
.@{tag-close-prefix-cls} {
color: #666 !important;
margin-left: 12px !important;
}
}
&-border{
height: 24px;
line-height: 24px;
border: 1px solid @border-color-split;
color: @border-color-split;
background: #fff !important;
position: relative;
.@{tag-close-prefix-cls} {
color: #666;
margin-left: 12px !important;
}
&:after{
content: "";
display: none;
width: 1px;
background: currentColor;
position: absolute;
top: 0;
bottom: 0;
right: 22px;
}
&.@{tag-prefix-cls}-closable {
&:after{
display: block;
}
.@{tag-close-prefix-cls} {
margin-left: 18px !important;
left: 4px;
top: -1px;
}
}
&.@{tag-prefix-cls}-primary {
color: @link-color !important;
border: 1px solid @link-color !important;
&:after{
background: @link-color;
}
.@{tag-close-prefix-cls}{
color: @link-color !important;
}
}
&.@{tag-prefix-cls}-success {
color: @success-color !important;
border: 1px solid @success-color !important;
&:after{
background: @success-color;
}
.@{tag-close-prefix-cls}{
color: @success-color !important;
}
}
&.@{tag-prefix-cls}-warning {
color: @warning-color !important;
border: 1px solid @warning-color !important;
&:after{
background: @warning-color;
}
.@{tag-close-prefix-cls}{
color: @warning-color !important;
}
}
&.@{tag-prefix-cls}-error {
color: @error-color !important;
border: 1px solid @error-color !important;
&:after{
background: @error-color;
}
.@{tag-close-prefix-cls}{
color: @error-color !important;
}
}
}
&:hover {
opacity: 0.85;
}
&,
a,
a:hover {
// color: @text-color;
}
&-text {
a:first-child:last-child {
display: inline-block;
margin: 0 -8px;
padding: 0 8px;
}
color: @text-color;
}
.@{tag-close-prefix-cls} {
.iconfont-size-under-12px(20px);
cursor: pointer;
margin-left: 2px;
color: #666;
opacity: 0.66;
position: relative;
top: -1px;
//transition: all @transition-time @ease-in-out;
&:hover {
opacity: 1;
}
}
&-primary,
&-success,
&-warning,
&-error {
border: 0;
&,
a,
a:hover,
.@{tag-close-prefix-cls},
.@{tag-close-prefix-cls}:hover {
color: #fff;
}
//.@{tag-close-prefix-cls}{
// top: 2px;
//}
}
&-primary,
&-primary&-dot &-dot-inner
{
background: @link-color;
}
&-success,
&-success&-dot &-dot-inner
{
background: @success-color;
}
&-warning,
&-warning&-dot &-dot-inner
{
background: @warning-color;
}
&-error,
&-error&-dot &-dot-inner
{
background: @error-color;
}
@colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple;
.make-color-classes(@i: length(@colors)) when (@i > 0) {
.make-color-classes(@i - 1);
@color: extract(@colors, @i);
@lightColor: "@{color}-1";
@lightBorderColor: "@{color}-3";
@darkColor: "@{color}-6";
&-@{color} {
line-height: 20px;
background: @@lightColor;
border-color: @@lightBorderColor;
.@{tag-prefix-cls}-text{
color: @@darkColor !important;
}
&.@{tag-prefix-cls}-dot{
line-height: 32px;
}
}
}
.make-color-classes();
}

171
src/styles/components/time-picker.less Normal file
View file

@ -0,0 +1,171 @@
@time-picker-prefix-cls: ~"@{css-prefix}time-picker";
@time-picker-cells-width-base: 56px;
@time-picker-cells-width-with-date-base: 72px;
@time-picker-cells-width: @time-picker-cells-width-base * 2;
@time-picker-cells-width-with-seconds: @time-picker-cells-width-base *3;
@time-picker-cells-width-with-date: @time-picker-cells-width-with-date-base * 2;
@time-picker-cells-width-with-date-with-seconds: @time-picker-cells-width-with-date-base * 3;
.@{time-picker-prefix-cls} {
&-cells{
min-width: @time-picker-cells-width;
&-with-seconds{
min-width: @time-picker-cells-width-with-seconds;
}
&-list{
width: @time-picker-cells-width-base;
max-height: 144px;
float: left;
overflow: hidden;
border-left: 1px solid @border-color-split;
position: relative;
&:hover{
overflow-y: auto;
}
&:first-child{
border-left: none;
border-radius: @btn-border-radius 0 0 @btn-border-radius;
}
&:last-child{
border-radius: 0 @btn-border-radius @btn-border-radius 0;
}
ul{
width: 100%;
margin: 0;
padding: 0 0 120px 0;
list-style: none;
li{
width: 100%;
height: 24px;
line-height: 24px;
margin: 0;
padding: 0 0 0 16px;
box-sizing: content-box;
text-align: left;
user-select: none;
cursor: pointer;
list-style: none;
transition: background @transition-time @ease-in-out;
}
}
}
&-cell{
&:hover{
background: @background-color-select-hover;
}
&-disabled {
color: @btn-disable-color;
cursor: @cursor-disabled;
&:hover {
color: @btn-disable-color;
background-color: #fff;
cursor: @cursor-disabled;
}
}
&-selected ,&-selected:hover{
color: @primary-color;
background: @background-color-select-hover;
}
&-focused{
background-color: tint(@primary-color, 80%);
}
}
}
&-header{
height: 32px;
line-height: 32px;
text-align: center;
border-bottom: 1px solid @border-color-split;
}
&-with-range{
.@{picker-prefix-cls}-panel{
&-body{
min-width: @time-picker-cells-width * 2 + 4px;
}
&-content{
float: left;
position: relative;
&:after{
content: '';
display: block;
width: 2px;
position: absolute;
top: 31px;
bottom: 0;
right: -2px;
background: @border-color-split;
z-index: 1;
}
&-right{
float: right;
&:after{
right: auto;
left: -2px;
}
}
}
}
.@{time-picker-prefix-cls}-cells{
&-list{
&:first-child{
border-radius: 0;
}
&:last-child{
border-radius: 0;
}
}
}
}
&-with-range&-with-seconds{
.@{picker-prefix-cls}-panel{
&-body{
min-width: @time-picker-cells-width-with-seconds * 2 + 4px;
}
}
}
}
.@{picker-prefix-cls}-panel-content{
.@{picker-prefix-cls}-panel-content{
.@{time-picker-prefix-cls}{
&-cells{
min-width: @time-picker-cells-width-with-date-with-seconds;
&-with-seconds{
min-width: @time-picker-cells-width-with-date-with-seconds;
.@{time-picker-prefix-cls}-cells-list{
width: @time-picker-cells-width-with-date-with-seconds / 3;
ul{
li{
padding: 0 0 0 28px;
}
}
}
}
&-list {
width: @time-picker-cells-width-with-date-with-seconds / 2;
max-height: 216px;
&:first-child{
border-radius: 0;
}
&:last-child{
border-radius: 0;
}
ul{
padding: 0 0 192px 0;
li{
padding: 0 0 0 46px;
}
}
}
}
}
}
}

10
src/styles/components/time.less Normal file
View file

@ -0,0 +1,10 @@
@time-prefix-cls: ~"@{css-prefix}time";
.@{time-prefix-cls} {
&-with-hash{
cursor: pointer;
&:hover{
text-decoration: underline;
}
}
}

87
src/styles/components/timeline.less Normal file
View file

@ -0,0 +1,87 @@
@timeline-prefix-cls: ~"@{css-prefix}timeline";
@timeline-color: @border-color-split;
.@{timeline-prefix-cls} {
list-style: none;
margin: 0;
padding: 0;
&-item {
margin: 0 !important;
padding: 0 0 12px 0;
list-style: none;
position: relative;
&-tail {
height: 100%;
border-left: 1px solid @timeline-color;
position: absolute;
left: 6px;
top: 0;
}
&-pending &-tail {
display: none;
}
&-head {
width: 13px;
height: 13px;
background-color: #fff;
border-radius: 50%;
border: 1px solid transparent;
position: absolute;
&-blue {
border-color: @primary-color;
color: @primary-color;
}
&-red {
border-color: @error-color;
color: @error-color;
}
&-green {
border-color: @success-color;
color: @success-color;
}
}
&-head-custom {
width: 40px;
height: auto;
margin-top: 6px;
padding: 3px 0;
text-align: center;
line-height: 1;
border: 0;
border-radius: 0;
font-size: @font-size-base;
position: absolute;
left: -13px;
transform: translateY(-50%);
}
&-content {
padding: 1px 1px 10px 24px;
font-size: @font-size-small;
position: relative;
top: -3px;
}
&:last-child {
.@{timeline-prefix-cls}-item-tail {
display: none;
}
}
}
&&-pending &-item:nth-last-of-type(2) {
.@{timeline-prefix-cls}-item-tail {
border-left: 1px dotted @timeline-color;
}
.@{timeline-prefix-cls}-item-content {
min-height: 48px;
}
}
}

110
src/styles/components/tooltip.less Normal file
View file

@ -0,0 +1,110 @@
@tooltip-prefix-cls: ~"@{css-prefix}tooltip";
@tooltip-arrow: ~"@{tooltip-prefix-cls}-arrow";
@tooltip-max-width: 250px;
@tooltip-arrow-width: 5px;
@tooltip-distance: @tooltip-arrow-width - 1 + 4;
@tooltip-arrow-width-light: 7px;
@tooltip-distance-light: @tooltip-arrow-width-light - 1 + 4;
@tooltip-arrow-outer-width-light: (@tooltip-arrow-width-light + 1);
@tooltip-arrow-color: hsla(0,0%,85%,.5);
.@{tooltip-prefix-cls} {
display: inline-block;
&-rel{
display: inline-block;
position: relative;
width: inherit;
}
&-popper{
.popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @tooltip-bg);
}
&-light&-popper{
.popper(@tooltip-arrow, @tooltip-arrow-width-light, @tooltip-distance-light, @tooltip-arrow-color);
&[x-placement^="top"] .@{tooltip-arrow}:after {
content: " ";
bottom: 1px;
margin-left: -@tooltip-arrow-width-light;
border-bottom-width: 0;
border-top-width: @tooltip-arrow-width-light;
border-top-color: #fff;
}
&[x-placement^="right"] .@{tooltip-arrow}:after {
content: " ";
left: 1px;
bottom: -@tooltip-arrow-width-light;
border-left-width: 0;
border-right-width: @tooltip-arrow-width-light;
border-right-color: #fff;
}
&[x-placement^="bottom"] .@{tooltip-arrow}:after {
content: " ";
top: 1px;
margin-left: -@tooltip-arrow-width-light;
border-top-width: 0;
border-bottom-width: @tooltip-arrow-width-light;
border-bottom-color: #fff;
}
&[x-placement^="left"] .@{tooltip-arrow}:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-width: @tooltip-arrow-width-light;
border-left-color: #fff;
bottom: -@tooltip-arrow-width-light;
}
}
&-inner{
max-width: @tooltip-max-width;
min-height: 34px;
padding: 8px 12px;
color: @tooltip-color;
text-align: left;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
white-space: nowrap;
&-with-width{
white-space: pre-wrap;
text-align: justify;
}
}
&-light &-inner{
background-color: #fff;
color: @text-color;
}
&-arrow{
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
&-light {
.@{tooltip-arrow}{
&:after{
display: block;
width: 0;
height: 0;
position: absolute;
border-color: transparent;
border-style: solid;
content: "";
border-width: @tooltip-arrow-width-light;
}
border-width: @tooltip-arrow-outer-width-light;
}
}
}

139
src/styles/components/transfer.less Normal file
View file

@ -0,0 +1,139 @@
@transfer-prefix-cls: ~"@{css-prefix}transfer";
@transfer-item-prefix-cls: ~"@{css-prefix}transfer-list-content-item";
.@{transfer-prefix-cls} {
position: relative;
line-height: @line-height-base;
&-list{
display: inline-block;
width: 180px;
height: 210px;
font-size: @font-size-small;
vertical-align: middle;
position: relative;
padding-top: 35px;
&-with-footer{
padding-bottom: 35px;
}
&-header {
padding: 8px 16px;
background: @head-bg;
color: @text-color;
border: 1px solid @border-color-base;
border-bottom: 1px solid @border-color-split;
border-radius: @border-radius-base @border-radius-base 0 0;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
&-title{
cursor: pointer;
}
& > span{
padding-left: 4px;
}
&-count {
margin: 0 !important;
float: right;
}
}
&-body{
height: 100%;
border: 1px solid @border-color-base;
border-top: none;
border-radius: 0 0 @border-radius-base @border-radius-base;
position: relative;
overflow: hidden;
&-with-search{
padding-top: 34px;
}
&-with-footer{
border-radius: 0;
}
}
&-content{
height: 100%;
padding: 4px 0;
overflow: auto;
&-item{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
& > span{
padding-left: 4px;
}
}
&-not-found{
display: none;
text-align: center;
color: @btn-disable-color;
}
li&-not-found:only-child{
display: block;
}
}
&-body-with-search &-content{
padding: 6px 0 0;
}
&-body-search-wrapper{
padding: 8px 8px 0;
position: absolute;
top: 0;
left: 0;
right: 0;
}
&-search{
position: relative;
}
&-footer{
border: 1px solid @border-color-base;
border-top: none;
border-radius: 0 0 @border-radius-base @border-radius-base;
position: absolute;
bottom: 0;
left: 0;
right: 0;
.clearfix();
}
}
&-operation {
display: inline-block;
//overflow: hidden;
margin: 0 16px;
vertical-align: middle;
.@{btn-prefix-cls} {
display: block;
min-width: @btn-circle-size-small;
&:first-child {
margin-bottom: 12px;
}
}
.@{btn-prefix-cls}{
span {
i, span{
vertical-align: middle;
}
}
}
}
}
.select-item(@transfer-prefix-cls, @transfer-item-prefix-cls);

78
src/styles/components/tree.less Normal file
View file

@ -0,0 +1,78 @@
@tree-prefix-cls: ~"@{css-prefix}tree";
.@{tree-prefix-cls} {
ul{
list-style: none;
margin: 0;
padding: 0;
font-size: @font-size-small;
&.@{dropdown-prefix-cls}-menu{
padding: 0;
}
li{
list-style: none;
margin: 8px 0;
padding: 0;
white-space: nowrap;
outline: none;
&.@{dropdown-item-prefix-cls}{
margin: 0;
padding: 7px 16px;
white-space: nowrap;
}
}
}
li{
ul{
margin: 0;
padding: 0 0 0 18px;
}
}
&-title {
display: inline-block;
margin: 0;
padding: 0 4px;
border-radius: @btn-border-radius-small;
cursor: pointer;
vertical-align: top;
color: @text-color;
transition: all @transition-time @ease-in-out;
&:hover {
background-color: tint(@primary-color, 90%);
}
&-selected, &-selected:hover{
background-color: tint(@primary-color, 80%);
}
}
&-arrow{
cursor: pointer;
width: 12px;
text-align: center;
display: inline-block;
i {
transition: all @transition-time @ease-in-out;
font-size: @font-size-base;
vertical-align: middle;
}
&-open{
i {
transform: rotate(90deg);
}
}
//&-hidden{
// cursor: auto;
// i{
// display: none;
// }
//}
&-disabled{
cursor: @cursor-disabled;
}
}
.@{checkbox-prefix-cls}-wrapper{
margin-right: 4px;
margin-left: 4px;
}
}

79
src/styles/components/upload.less Normal file
View file

@ -0,0 +1,79 @@
@upload-prefix-cls: ~"@{css-prefix}upload";
.@{upload-prefix-cls} {
input[type="file"]{
display: none;
}
&-list{
margin-top: 8px;
&-file{
padding: 4px;
color: @text-color;
border-radius: @border-radius-small;
transition: background-color @transition-time @ease-in-out;
overflow: hidden;
position: relative;
& > span{
cursor: pointer;
transition: color @transition-time @ease-in-out;
i{
display: inline-block;
width: @font-size-small;
height: @font-size-small;
color: @text-color;
text-align: center;
}
}
&:hover{
background: @input-disabled-bg;
& > span{
color: @primary-color;
i{
color: @text-color;
}
}
.@{upload-prefix-cls}-list-remove{
opacity: 1;
}
}
}
&-remove{
opacity: 0;
font-size: 18px;
cursor: pointer;
float: right;
margin-right: 4px;
color: @legend-color;
transition: all @transition-time ease;
&:hover{
color: #444;
}
}
}
&-select {
display: inline-block;
}
&-drag{
background: #fff;
border: 1px dashed @border-color-base;
border-radius: @border-radius-small;
text-align: center;
cursor: pointer;
position: relative;
overflow: hidden;
transition: border-color @transition-time ease;
&:hover{
border: 1px dashed @primary-color;
}
}
&-dragOver{
border: 2px dashed @primary-color;
}
}