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

implemented vertical align mode of button

Browse source
This commit is contained in:
Rijn 2016-11-29 13:08:47 -06:00
parent 39311a508f
commit fd6512a92e
4 changed files with 155 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/styles/mixins/button.less
View file

@ -108,6 +108,17 @@
}
}
.button-group-vertical-base(@btnClassName) {
display: inline-block;
vertical-align: middle;
> .@{btnClassName} {
display: block;
width: 100%;
max-width: 100%;
float: none;
}
}
.btn() {
display: inline-block;
margin-bottom: 0;
@ -303,7 +314,7 @@
border-radius: 0;
}
> .@{btnClassName}:first-child {
&:not(&-vertical) > .@{btnClassName}:first-child {
margin-left: 0;
&:not(:last-child) {
border-bottom-right-radius: 0;
@ -311,7 +322,7 @@
}
}
> .@{btnClassName}:last-child:not(:first-child) {
&:not(&-vertical) > .@{btnClassName}:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
@ -324,7 +335,7 @@
border-radius: 0;
}
& > &:first-child:not(:last-child) {
&:not(&-vertical) > &:first-child:not(:last-child) {
> .@{btnClassName}:last-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
@ -332,9 +343,48 @@
}
}
& > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
&:not(&-vertical) > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding-left: 8px;
}
}
.btn-group-vertical(@btnClassName: ivu-btn) {
.button-group-vertical-base(@btnClassName);
.@{btnClassName} + .@{btnClassName},
.@{btnClassName} + &,
& + .@{btnClassName},
& + & {
margin-top: -1px;
margin-left: 0px;
}
> .@{btnClassName}:first-child {
margin-top: 0;
&:not(:last-child) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
> .@{btnClassName}:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
& > &:first-child:not(:last-child) {
> .@{btnClassName}:last-child {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding-bottom: 8px;
}
}
& > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
padding-top: 8px;
}
}