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

add Select Component

Browse source 
add Select Component
This commit is contained in:
梁灏 2016-10-17 12:34:20 +08:00
parent c13471b5fb
commit e355dd49d3
21 changed files with 1137 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

4
styles/components/index.less
View file

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