add Select Component
add Select Component
This commit is contained in:
梁灏
parent
c13471b5fb
commit
e355dd49d3
21 changed files with 1137 additions and 99 deletions
|
|
@ -24,4 +24,5 @@
|
|||
|
||||
@import "fade";
|
||||
@import "move";
|
||||
@import "ease";
|
||||
@import "ease";
|
||||
@import "slide";
|
||||
119
styles/animation/slide.less
Normal file
119
styles/animation/slide.less
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
.slide-motion(@className, @keyframeName) {
|
||||
.make-motion(@className, @keyframeName);
|
||||
.@{className}-enter, .@{className}-appear {
|
||||
opacity: 0;
|
||||
animation-timing-function: @ease-in-out;
|
||||
}
|
||||
.@{className}-leave {
|
||||
animation-timing-function: @ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-motion(slide-up, ivuSlideUp);
|
||||
.slide-motion(slide-down, ivuSlideDown);
|
||||
.slide-motion(slide-left, ivuSlideLeft);
|
||||
.slide-motion(slide-right, ivuSlideRight);
|
||||
|
||||
@keyframes ivuSlideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ivuSlideUpOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleY(.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ivuSlideDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ivuSlideDownOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 100%;
|
||||
transform: scaleY(.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ivuSlideLeftIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleX(.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ivuSlideLeftOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 0% 0%;
|
||||
transform: scaleX(.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ivuSlideRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleX(.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ivuSlideRightOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scaleX(.8);
|
||||
}
|
||||
}
|
||||
|
|
@ -12,16 +12,20 @@
|
|||
font-style: normal;
|
||||
}
|
||||
|
||||
.ivu-icon() {
|
||||
display: inline-block;
|
||||
font-family: @ionicons-font-family;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.ivu-icon {
|
||||
display: inline-block;
|
||||
font-family: @ionicons-font-family;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
.ivu-icon();
|
||||
}
|
||||
|
|
@ -19,4 +19,6 @@
|
|||
@import "timeline";
|
||||
@import "page";
|
||||
@import "steps";
|
||||
@import "modal";
|
||||
@import "modal";
|
||||
@import "select";
|
||||
@import "select-dropdown";
|
||||
16
styles/components/select-dropdown.less
Normal file
16
styles/components/select-dropdown.less
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
@select-dropdown-prefix-cls: ~"@{css-prefix}select-dropdown";
|
||||
|
||||
.@{select-dropdown-prefix-cls} {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
margin: 5px 0;
|
||||
padding: 7px 0;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: @btn-border-radius;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.2);
|
||||
position: absolute;
|
||||
z-index: @zindex-select;
|
||||
}
|
||||
242
styles/components/select.less
Normal file
242
styles/components/select.less
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
@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;
|
||||
|
||||
&-selection {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
background-color: #fff;
|
||||
border-radius: @btn-border-radius;
|
||||
border: 1px solid @border-color-base;
|
||||
.transition(all @transition-time @ease-in-out);
|
||||
|
||||
.@{select-prefix-cls}-arrow:nth-of-type(1) {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.hover();
|
||||
.@{select-prefix-cls}-arrow:nth-of-type(1) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-show-clear &-selection:hover .@{select-prefix-cls}-arrow:nth-of-type(2){
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 8px;
|
||||
line-height: 1;
|
||||
margin-top: -6px;
|
||||
color: @border-color-base;
|
||||
.transition(all @transition-time @ease-in-out);
|
||||
}
|
||||
|
||||
&-visible{
|
||||
.@{select-prefix-cls}-selection{
|
||||
.active();
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-arrow:nth-of-type(2) {
|
||||
.transform(rotate(180deg));
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
.@{select-prefix-cls}-selection {
|
||||
.disabled();
|
||||
|
||||
.@{select-prefix-cls}-arrow:nth-of-type(1) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: @border-color-base;
|
||||
box-shadow: none;
|
||||
|
||||
.@{select-prefix-cls}-arrow:nth-of-type(2) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-single &-selection{
|
||||
height: 28px;
|
||||
position: relative;
|
||||
|
||||
.@{select-prefix-cls}-placeholder{
|
||||
color: @input-placeholder-color;
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
|
||||
display: block;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left: 8px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&-large&-single &-selection{
|
||||
height: 32px;
|
||||
|
||||
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&-small&-single &-selection{
|
||||
height: 22px;
|
||||
border-radius: @btn-border-radius-small;
|
||||
|
||||
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&-multiple &-selection{
|
||||
padding: 0 24px 0 2px;
|
||||
min-height: 28px;
|
||||
|
||||
.@{select-prefix-cls}-placeholder{
|
||||
display: block;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
color: @input-placeholder-color;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left: 8px;
|
||||
padding-right: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
// input
|
||||
&-input{
|
||||
display: inline-block;
|
||||
height: @input-height-base;
|
||||
line-height: @input-height-base;
|
||||
padding: 0 24px 0 8px;
|
||||
font-size: @font-size-base;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
color: @input-color;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.placeholder();
|
||||
}
|
||||
|
||||
&-single &-input{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-large &-input{
|
||||
height: @input-height-large;
|
||||
}
|
||||
|
||||
&-small &-input{
|
||||
height: @input-height-small;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-item-prefix-cls} {
|
||||
margin: 0;
|
||||
padding: 7px 15px;
|
||||
clear: both;
|
||||
color: @text-color;
|
||||
//border-radius: @btn-border-radius-small;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
.transition(background @transition-time @ease-in-out);
|
||||
|
||||
&:hover{
|
||||
background: @background-color-select-hover;
|
||||
}
|
||||
|
||||
&-focus {
|
||||
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: #fff;
|
||||
background: @selected-color;
|
||||
}
|
||||
|
||||
&-selected&-focus {
|
||||
background: shade(@selected-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-multiple .@{select-item-prefix-cls} {
|
||||
&-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: '\F3FD';
|
||||
color: @selected-color;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-group-prefix-cls} {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&-title {
|
||||
padding-left: 10px;
|
||||
font-size: 12px;
|
||||
color: @legend-color;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
@link-color : #0099e5;
|
||||
@link-hover-color : tint(@link-color, 20%);
|
||||
@link-active-color : shade(@link-color, 5%);
|
||||
@selected-color : fade(@primary-color, 90%);
|
||||
|
||||
// Base
|
||||
@body-background : #fff;
|
||||
|
|
@ -28,7 +29,8 @@
|
|||
@border-color-split : #e9e9e9; // inside
|
||||
|
||||
// Background color
|
||||
@background-color-base : #f7f7f7; // base
|
||||
@background-color-base : #f7f7f7; // base
|
||||
@background-color-select-hover: @input-disabled-bg;
|
||||
|
||||
// Shadow
|
||||
@shadow-color : rgba(100, 100, 100, .2);
|
||||
|
|
@ -102,6 +104,7 @@
|
|||
@zindex-spin : 8;
|
||||
@zindex-affix : 10;
|
||||
@zindex-back-top : 10;
|
||||
@zindex-select : 900;
|
||||
@zindex-modal : 1000;
|
||||
@zindex-message : 1010;
|
||||
@zindex-notification : 1010;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue