mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity

style(tree & treeSelect): better style

Browse Source
This commit is contained in:
afc163 2016-01-30 16:53:49 +08:00
parent 21eac259b6
commit ed2e038250
4 changed files with 36 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/tree-select/demo/basic.md
View File

@ -21,9 +21,9 @@ const Demo = React.createClass({
},
render() {
return (
<TreeSelect style={{ width: 180 }} showSearch
<TreeSelect style={{ width: 360 }} showSearch
value={this.state.value} optionLabelProp="title"
dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
treeDefaultExpandAll
onChange={this.onChange}>
<TreeNode value="parent 1" title="parent 1" key="0-1">

12
components/tree-select/demo/size.md
View File

@ -22,9 +22,9 @@ const Demo = React.createClass({
render() {
return (
<div>
<TreeSelect size="large" style={{ width: 180 }} showSearch
<TreeSelect size="large" style={{ width: 360 }} showSearch
value={this.state.value} optionLabelProp="title"
dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
treeDefaultExpandAll
onChange={this.onChange}>
<TreeNode value="parent 1" title="parent 1" key="0-1">
@ -38,9 +38,9 @@ const Demo = React.createClass({
</TreeNode>
</TreeSelect>
<br /><br />
<TreeSelect style={{ width: 180 }} showSearch
<TreeSelect style={{ width: 360 }} showSearch
value={this.state.value} optionLabelProp="title"
dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
treeDefaultExpandAll
onChange={this.onChange}>
<TreeNode value="parent 1" title="parent 1" key="0-1">
@ -54,9 +54,9 @@ const Demo = React.createClass({
</TreeNode>
</TreeSelect>
<br /><br />
<TreeSelect size="small" style={{ width: 180 }} showSearch
<TreeSelect size="small" style={{ width: 360 }} showSearch
value={this.state.value} optionLabelProp="title"
dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
dropdownMenuStyle={{ maxHeight: 400, overflow: 'auto' }}
treeDefaultExpandAll
onChange={this.onChange}>
<TreeNode value="parent 1" title="parent 1" key="0-1">

23
style/components/tree.less
View File

@ -10,8 +10,8 @@
font-family: 'anticon';
font-weight: bold;
position: absolute;
top: 10px;
right: 3px;
top: 0;
right: 4px;
color: #666;
transition: transform .3s ease;
}
@ -22,7 +22,7 @@
font-size: 12px;
li {
padding: 0;
margin: 0;
margin: 7px 0;
list-style: none;
white-space: nowrap;
outline: 0;
@ -69,21 +69,27 @@
border-radius: 2px;
margin: 0;
cursor: pointer;
height: 20px;
text-decoration: none;
vertical-align: top;
color: #666;
transition: all 0.3s ease;
&:hover {
background-color: tint(@primary-color, 90%);
}
&.@{tree-prefix-cls}-node-selected {
background-color: tint(@primary-color, 80%);
}
}
span {
&.@{tree-prefix-cls}-checkbox {
margin: 3px 4px 0 0;
margin: 2px 4px 0 0;
}
&.@{tree-prefix-cls}-switcher,
&.@{tree-prefix-cls}-iconEle {
line-height: 0;
margin: 0;
width: 16px;
height: 18px;
height: 16px;
line-height: 16px;
display: inline-block;
vertical-align: middle;
border: 0 none;
@ -134,9 +140,6 @@
cursor: not-allowed;
}
}
&-node-selected {
background-color: tint(@primary-color, 90%);
}
&-icon__open {
margin-right: 2px;
vertical-align: top;

27
style/components/treeSelect.less
View File

@ -8,7 +8,7 @@
font-size: 12px;
li {
padding: 0;
margin: 0;
margin: 8px 0;
list-style: none;
white-space: nowrap;
outline: 0;
@ -28,21 +28,27 @@
border-radius: 2px;
margin: 0;
cursor: pointer;
height: 20px;
text-decoration: none;
vertical-align: top;
color: #666;
transition: all 0.3s ease;
&:hover {
background-color: tint(@primary-color, 90%);
}
&.@{tree-select-tree-prefix-cls}-node-selected {
background-color: tint(@primary-color, 80%);
}
}
span {
&.@{tree-select-tree-prefix-cls}-checkbox {
margin: 3px 4px 0 0;
margin: 2px 4px 0 0;
}
&.@{tree-select-tree-prefix-cls}-switcher,
&.@{tree-select-tree-prefix-cls}-iconEle {
line-height: 0;
margin: 0;
width: 16px;
height: 18px;
height: 16px;
line-height: 16px;
display: inline-block;
vertical-align: middle;
border: 0 none;
@ -93,9 +99,6 @@
cursor: not-allowed;
}
}
&-node-selected {
background-color: tint(@primary-color, 90%);
}
&-icon__open {
margin-right: 2px;
vertical-align: top;
@ -162,7 +165,7 @@
background-color: #fff;
border-radius: @border-radius-base;
border: 1px solid #d9d9d9;
border: 1px solid @border-color-base;
.transition(all .3s @ease-in-out);
&:hover {
@ -180,7 +183,7 @@
&-disabled &-selection {
&:hover,
&:active {
border-color: #d9d9d9;
border-color: @border-color-base;
}
}
@ -446,7 +449,7 @@
}
background-color: white;
border: 1px solid #d9d9d9;
border: 1px solid @border-color-base;
box-shadow: @box-shadow-base;
border-radius: @border-radius-base;
box-sizing: border-box;
@ -554,7 +557,7 @@
padding: 4px 7px;
width: 100%;
box-sizing: border-box;
border: 1px solid #d9d9d9;
border: 1px solid @border-color-base;
border-radius: 4px;
outline: none;
}