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

Merge branch '2.0' of https://github.com/iview/iview into anchor

Browse source
This commit is contained in:
zhigang.li 2018-06-29 17:16:26 +08:00
commit b23702cb13
150 changed files with 8558 additions and 6961 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/styles/components/alert.less
View file

@ -4,7 +4,7 @@
.@{alert-prefix-cls}{
position: relative;
padding: 8px 48px 8px 16px;
border-radius: @border-radius-base;
border-radius: @border-radius-small;
color: @text-color;
font-size: @font-size-small;
line-height: 16px;
@ -15,9 +15,9 @@
}
&-icon {
font-size: @font-size-base;
font-size: @font-size-large;
top: 8px;
left: 16px;
left: 12px;
position: absolute;
}
@ -30,32 +30,36 @@
}
&-success {
border: 1px solid tint(@success-color, 80%);
background-color: tint(@success-color, 90%);
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: 1px solid tint(@primary-color, 80%);
background-color: tint(@primary-color, 90%);
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: 1px solid tint(@warning-color, 80%);
background-color: tint(@warning-color, 90%);
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: 1px solid tint(@error-color, 80%);
background-color: tint(@error-color, 90%);
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;
}
@ -68,7 +72,7 @@
&-with-desc {
padding: 16px;
position: relative;
border-radius: @border-radius-base;
border-radius: @border-radius-small;
margin-bottom: 10px;
color: @text-color;
line-height: 1.5;

80
src/styles/components/badge.less
View file

@ -1,6 +1,7 @@
@badge-prefix-cls: ~"@{css-prefix}badge";
.@{badge-prefix-cls} {
font-family: "Monospaced Number";
position: relative;
display: inline-block;
line-height: 1;
@ -37,6 +38,26 @@
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 {
@ -52,4 +73,63 @@
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;
}
}

68
src/styles/components/button.less
View file

@ -60,9 +60,9 @@
}
}
&-ghost {
.btn-ghost;
}
//&-ghost {
// .btn-ghost;
//}
&-dashed{
.btn-dashed;
@ -125,4 +125,66 @@
&-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%);
}
}

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

@ -0,0 +1,69 @@
@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;
}
&-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);

20
src/styles/components/collapse.less
View file

@ -5,6 +5,12 @@
border-radius: 3px;
border: 1px solid @border-color-base;
&-simple{
border-left: none;
border-right: none;
background-color: #fff;
}
& > &-item{
border-top: 1px solid @border-color-base;
&:first-child {
@ -14,16 +20,25 @@
> .@{collapse-prefix-cls}-header{
height: 38px;
line-height: 38px;
padding-left: 32px;
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);
}
@ -40,6 +55,9 @@
padding-bottom: 16px;
}
}
&-simple > &-item > &-content > &-content-box{
padding-top: 0;
}
&-item-active > &-content{
//display: block;
}

6
src/styles/components/date-picker.less
View file

@ -190,7 +190,8 @@
&-arrow-double{
margin-left: 10px;
i:after{
content: "\F3D2";
content: "\F115";
margin-left: -8px;
}
}
}
@ -199,7 +200,8 @@
&-arrow-double{
margin-right: 10px;
i:after{
content: "\F3D3";
content: "\F11F";
margin-left: -8px;
}
}
}

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

@ -0,0 +1,96 @@
@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%;
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&-with-text-left,
&-horizontal&-with-text-right {
font-size: @font-size-base;
.@{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;
}
}
}

5
src/styles/components/dropdown.less
View file

@ -16,6 +16,11 @@
&-rel{
//display: inline-block;
position: relative;
&-user-select-none{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
}
&-menu{

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

@ -24,6 +24,7 @@
@import "modal";
@import "select";
@import "select-dropdown";
@import "split";
@import "tooltip";
@import "poptip";
@import "input";
@ -44,4 +45,7 @@
@import "avatar";
@import "color-picker";
@import "auto-complete";
@import "divider";
@import "anchor";
@import "time";
@import "cell";

2
src/styles/components/input-number.less
View file

@ -75,7 +75,7 @@
color: #999;
user-select: none;
position: absolute;
right: 4px;
right: 5px;
transition: all @transition-time linear;
}

102
src/styles/components/input.less
View file

@ -62,6 +62,108 @@
// 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{

6
src/styles/components/menu.less
View file

@ -66,6 +66,12 @@
cursor: pointer;
transition: all @transition-time @ease-in-out;
}
a&-item{
color: inherit;
&:hover, &:active{
color: inherit;
}
}
&-item > i{
margin-right: 6px;
}

16
src/styles/components/message.less
View file

@ -2,7 +2,7 @@
@icon-prefix-cls: ~"@{css-prefix}icon";
.@{message-prefix-cls} {
font-size: @font-size-small;
font-size: @font-size-base;
position: fixed;
z-index: @zindex-message;
width: 100%;
@ -22,7 +22,7 @@
&-close {
position: absolute;
right: 4px;
top: 9px;
top: 10px;
color: #999;
outline: none;
@ -70,9 +70,13 @@
}
.@{icon-prefix-cls} {
margin-right: 8px;
font-size: 14px;
top: 1px;
position: relative;
margin-right: 4px;
font-size: @font-size-large;
vertical-align: middle;
}
&-custom-content{
span{
vertical-align: middle;
}
}
}

112
src/styles/components/modal.less
View file

@ -39,6 +39,22 @@
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 {
@ -46,6 +62,7 @@
}
&-close {
z-index: 1;
.content-close(1px, 31px);
}
@ -64,6 +81,46 @@
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: 768px) {
@ -81,33 +138,13 @@
.@{confirm-prefix-cls} {
padding: 0 4px;
&-head {
&-title {
display: inline-block;
font-size: @font-size-base;
color: @title-color;
font-weight: 700;
}
}
&-body{
margin-top: 6px;
padding-left: 48px;
padding-top: 18px;
font-size: @font-size-small;
color: @text-color;
position: relative;
&-render{
margin: 0;
padding: 0;
}
padding: 0 12px 0 0;
&-icon {
font-size: 36px;
position: absolute;
top: 0;
left: 0;
display: inline-block;
font-size: 28px;
vertical-align: middle;
position: relative;
top: 3px;
&-info {
color: @primary-color;
@ -125,10 +162,31 @@
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: 40px;
margin-top: 20px;
text-align: right;
button + button {

32
src/styles/components/notice.less
View file

@ -31,7 +31,7 @@
&-close {
position: absolute;
right: 16px;
right: 8px;
top: 15px;
color: #999;
outline: none;
@ -89,9 +89,8 @@
&-icon {
position: absolute;
left: 20px;
margin-top: -1px;
font-size: 16px;
left: 16px;
font-size: @font-size-large;
&-success {
color: @success-color;
@ -121,29 +120,4 @@
left: 0;
}
}
&-with-normal{
&:after{
background: @primary-color;
}
}
&-with-info{
&:after{
background: @primary-color;
}
}
&-with-success{
&:after{
background: @success-color;
}
}
&-with-warning{
&:after{
background: @warning-color;
}
}
&-with-error{
&:after{
background: @error-color;
}
}
}

26
src/styles/components/page.less
View file

@ -24,12 +24,14 @@
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;
@ -44,11 +46,10 @@
}
&-active {
background-color: @primary-color;
border-color: @primary-color;
a, &:hover a {
color: #fff;
color: @primary-color;
}
}
}
@ -78,18 +79,20 @@
&-item-jump-prev:hover {
i:after {
content: "\F3D2";
content: "\F115";
margin-left: -8px;
}
}
&-item-jump-next:hover {
i:after {
content: "\F3D3";
content: "\F11F";
margin-left: -8px;
}
}
&-prev{
margin-right: 8px;
margin-right: 4px;
}
&-item-jump-prev,
@ -97,16 +100,13 @@
margin-right: 4px;
}
&-next{
margin-left: 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;
@ -120,6 +120,10 @@
border-radius: @btn-border-radius;
transition: all @transition-time @ease-in-out;
}
&-item-jump-prev,
&-item-jump-next{
border-color: transparent;
}
&-prev,
&-next {
@ -224,6 +228,10 @@
padding: 0 8px 0 2px;
}
}
&-custom-text, &-custom-text:hover{
border-color: transparent;
}
}
.@{page-prefix-cls} {

7
src/styles/components/poptip.less
View file

@ -1,7 +1,7 @@
@poptip-prefix-cls: ~"@{css-prefix}poptip";
@poptip-arrow: ~"@{poptip-prefix-cls}-arrow";
@poptip-max-width: 250px;
@poptip-arrow-width: 5px;
@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%);
@ -43,6 +43,11 @@
&-content{
overflow: auto;
&-word-wrap{
white-space: pre-wrap;
text-align: justify;
}
&-inner{
color: @text-color;
}

29
src/styles/components/progress.less
View file

@ -34,6 +34,7 @@
background-color: #f3f3f3;
border-radius: 100px;
vertical-align: middle;
position: relative;
}
&-vertical &-inner {
height: 100%;
@ -52,10 +53,18 @@
&-bg {
border-radius: 100px;
background-color: @info-color;
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;
@ -80,6 +89,13 @@
}
}
&-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;
@ -109,3 +125,14 @@
width: 100%;
}
}
@keyframes ivu-progress-active-vertical {
0% {
opacity: .3;
height: 0;
}
100% {
opacity: 0;
height: 100%;
}
}

47
src/styles/components/rate.less
View file

@ -19,6 +19,51 @@
}
}
&-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;
@ -36,7 +81,7 @@
&-content:before {
color: #e9e9e9;
cursor: pointer;
content: "\F4B3";
content: "\F2BF";
transition: all @transition-time @ease-in-out;
display: block;
}

13
src/styles/components/select.less
View file

@ -205,12 +205,18 @@
height: 24px;
line-height: 22px;
margin: 3px 4px 3px 0;
i{
top: 2px;
}
}
&-large&-multiple .@{css-prefix}tag{
height: 28px;
line-height: 26px;
font-size: @font-size-base;
i{
top: 1px;
}
}
&-small&-multiple .@{css-prefix}tag{
@ -219,6 +225,9 @@
font-size: @font-size-small;
padding: 0 6px;
margin: 3px 4px 2px 0;
i{
top: 1px;
}
}
&-dropdown-list {
@ -249,11 +258,11 @@
.ivu-icon();
//float: right;
font-size: 24px;
content: '\F3FD';
content: '\F171';
color: @selected-color;
position: absolute;
top: 2px;
right: 16px;
right: 8px;
}
}

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

@ -0,0 +1,114 @@
@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: 0px;
bottom: 0px;
}
&.left-pane{
left: 0px;
}
&.right-pane{
right: 0px;
}
&.top-pane, &.bottom-pane{
left: 0px;
right: 0px;
}
&.top-pane{
top: 0px;
}
&.bottom-pane{
bottom: 0px;
}
}
&-trigger{
&-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;
box-shadow: @box-shadow;
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;
box-shadow: @box-shadow;
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;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}

91
src/styles/components/switch.less
View file

@ -2,10 +2,10 @@
.@{switch-prefix-cls} {
display: inline-block;
width: 48px;
height: 24px;
line-height: 22px;
border-radius: 24px;
width: 44px;
height: 22px;
line-height: 20px;
border-radius: 22px;
vertical-align: middle;
border: 1px solid #ccc;
background-color: #ccc;
@ -14,11 +14,15 @@
user-select: none;
transition: all @transition-time @ease-in-out;
&-loading{
opacity: .4;
}
&-inner {
color: #fff;
font-size: @font-size-small;
position: absolute;
left: 25px;
left: 23px;
i {
width: 12px;
@ -29,9 +33,9 @@
&:after {
content: '';
width: 20px;
height: 20px;
border-radius: 20px;
width: 18px;
height: 18px;
border-radius: 18px;
background-color: #fff;
position: absolute;
left: 1px;
@ -44,6 +48,26 @@
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;
@ -54,45 +78,55 @@
}
&-small {
width: 24px;
height: 12px;
line-height: 10px;
width: 28px;
height: 16px;
line-height: 14px;
&:after {
width: 10px;
height: 10px;
top: 0;
left: 0;
width: 12px;
height: 12px;
}
&:active:after {
width: 14px;
}
&:before{
width: 10px;
height: 10px;
left: 2px;
top: 2px;
}
}
&-small&-checked:after {
left: 12px;
left: 13px;
}
&-small&-checked:before {
left: 14px;
}
&-small:active&-checked:after {
left: 8px;
left: 11px;
}
&-large{
width: 60px;
width: 56px;
&:active:after {
width: 26px;
}
}
&-large:active:after {
width: 32px;
width: 30px;
}
&-large&-checked:after {
left: 35px;
}
&-large&-checked:before {
left: 37px;
}
&-large:active&-checked:after {
left: 25px;
left: 23px;
}
&-checked {
@ -100,15 +134,18 @@
background-color: @primary-color;
.@{switch-prefix-cls}-inner {
left: 8px;
left: 7px;
}
&:after {
left: 23px;
}
&:before{
left: 25px;
}
&:active:after {
left: 19px;
left: 15px;
}
}
@ -126,4 +163,14 @@
color: #ccc;
}
}
}
@keyframes switch-loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

19
src/styles/components/table.less
View file

@ -158,6 +158,16 @@
text-overflow: ellipsis;
}
&-tooltip{
width: 100%;
&-content{
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&-with-expand{
height: 47px;
line-height: 47px;
@ -179,6 +189,13 @@
cursor: pointer;
user-select: none;
}
// #3159
&-with-selection{
.@{checkbox-prefix-cls}-wrapper{
margin-right: 0;
}
}
}
&-hidden{
visibility: hidden;
@ -333,6 +350,8 @@
display: inline-block;
cursor: pointer;
position: relative;
position: relative;
top: 1px;
i{
color: @btn-disable-color;

9
src/styles/components/tabs.less
View file

@ -203,7 +203,7 @@
&&-card > &-bar &-nav-wrap {
margin-bottom: 0;
}
&&-card > &-bar &-tab .@{css-prefix-iconfont}-ios-close-empty {
&&-card > &-bar &-tab .@{css-prefix-iconfont}-ios-close {
width: 0;
height: 22px;
font-size: 22px;
@ -221,10 +221,11 @@
}
}
&&-card > &-bar &-tab-active .@{css-prefix-iconfont}-ios-close-empty,
&&-card > &-bar &-tab:hover .@{css-prefix-iconfont}-ios-close-empty {
width: 14px;
&&-card > &-bar &-tab-active .@{css-prefix-iconfont}-ios-close,
&&-card > &-bar &-tab:hover .@{css-prefix-iconfont}-ios-close {
width: 22px;
transform: translateZ(0);
margin-right: -6px;
}
}

69
src/styles/components/tag.less
View file

@ -1,5 +1,5 @@
@tag-prefix-cls: ~"@{css-prefix}tag";
@tag-close-prefix-cls: ivu-icon-ios-close-empty;
@tag-close-prefix-cls: ivu-icon-ios-close;
.@{tag-prefix-cls} {
display: inline-block;
@ -28,19 +28,19 @@
}
&-color{
&-red{
&-error{
color: @error-color !important;
border-color: @error-color;
}
&-green{
&-success{
color: @success-color !important;
border-color: @success-color;
}
&-blue{
&-primary{
color: @link-color !important;
border-color: @link-color;
}
&-yellow{
&-warning{
color: @warning-color !important;
border-color: @warning-color;
}
@ -103,10 +103,12 @@
}
.@{tag-close-prefix-cls} {
margin-left: 18px !important;
left: 4px;
top: 1px;
}
}
&.@{tag-prefix-cls}-blue {
&.@{tag-prefix-cls}-primary {
color: @link-color !important;
border: 1px solid @link-color !important;
@ -117,7 +119,7 @@
color: @link-color !important;
}
}
&.@{tag-prefix-cls}-green {
&.@{tag-prefix-cls}-success {
color: @success-color !important;
border: 1px solid @success-color !important;
@ -128,7 +130,7 @@
color: @success-color !important;
}
}
&.@{tag-prefix-cls}-yellow {
&.@{tag-prefix-cls}-warning {
color: @warning-color !important;
border: 1px solid @warning-color !important;
@ -139,7 +141,7 @@
color: @warning-color !important;
}
}
&.@{tag-prefix-cls}-red {
&.@{tag-prefix-cls}-error {
color: @error-color !important;
border: 1px solid @error-color !important;
@ -174,7 +176,7 @@
.@{tag-close-prefix-cls} {
.iconfont-size-under-12px(20px);
cursor: pointer;
margin-left: 8px;
margin-left: 2px;
color: #666;
opacity: 0.66;
position: relative;
@ -186,10 +188,10 @@
}
}
&-blue,
&-green,
&-yellow,
&-red {
&-primary,
&-success,
&-warning,
&-error {
border: 0;
&,
a,
@ -198,29 +200,52 @@
.@{tag-close-prefix-cls}:hover {
color: #fff;
}
.@{tag-close-prefix-cls}{
top: 2px;
}
}
&-blue,
&-blue&-dot &-dot-inner
&-primary,
&-primary&-dot &-dot-inner
{
background: @link-color;
}
&-green,
&-green&-dot &-dot-inner
&-success,
&-success&-dot &-dot-inner
{
background: @success-color;
}
&-yellow,
&-yellow&-dot &-dot-inner
&-warning,
&-warning&-dot &-dot-inner
{
background: @warning-color;
}
&-red,
&-red&-dot &-dot-inner
&-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;
}
}
}
.make-color-classes();
}

71
src/styles/components/tooltip.less
View file

@ -4,17 +4,62 @@
@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;
@ -27,6 +72,16 @@
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{
@ -36,4 +91,20 @@
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;
}
}
}

9
src/styles/components/transfer.less
View file

@ -115,7 +115,7 @@
}
&-operation {
display: inline-block;
overflow: hidden;
//overflow: hidden;
margin: 0 16px;
vertical-align: middle;
@ -127,6 +127,13 @@
margin-bottom: 12px;
}
}
.@{btn-prefix-cls}{
span {
i, span{
vertical-align: middle;
}
}
}
}
}
.select-item(@transfer-prefix-cls, @transfer-item-prefix-cls);

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

@ -43,6 +43,8 @@
display: inline-block;
i {
transition: all @transition-time @ease-in-out;
font-size: @font-size-large;
vertical-align: middle;
}
&-open{
i {