mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

💄 Optimize TimePicker focus style

Browse Source 
close #17440
This commit is contained in:
afc163 2019-07-03 23:17:32 +08:00
parent 1dff6bf3b5
commit efadb09569
No known key found for this signature in database
GPG Key ID: 5F00908D72002306
2 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/date-picker/style/TimePicker.less
View File

@ -48,7 +48,6 @@
&-select { &-select {
position: relative; // Fix chrome weird render bug position: relative; // Fix chrome weird render bug
float: left; float: left;
box-sizing: border-box;
height: 226px; height: 226px;
overflow: hidden; overflow: hidden;
font-size: @font-size-base; font-size: @font-size-base;
@ -68,7 +67,6 @@
} }
ul { ul {
box-sizing: border-box;
width: 100%; width: 100%;
max-height: 206px; max-height: 206px;
margin: 0; margin: 0;
@ -77,30 +75,35 @@
} }
li { li {
box-sizing: content-box;
width: 100%; width: 100%;
height: 24px; height: 24px;
margin: 0; margin: 0;
padding-left: 32px;
line-height: 24px; line-height: 24px;
text-align: center;
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
transition: background 0.3s ease; transition: all .3s;
user-select: none; user-select: none;
}
li:last-child::after { &:last-child::after {
display: block; display: block;
height: 202px; height: 202px;
content: ''; content: '';
} }
li:hover { &:hover {
background: @item-hover-bg; background: @item-hover-bg;
}
&:focus {
color: @primary-color;
font-weight: 600;
outline: none;
}
} }
li&-option-selected { li&-option-selected {
font-weight: bold; font-weight: 600;
background: @time-picker-selected-bg; background: @time-picker-selected-bg;
} }

14
components/time-picker/style/index.less
View File

@ -39,7 +39,6 @@
&-wrap { &-wrap {
position: relative; position: relative;
box-sizing: border-box;
padding: 7px 2px 7px @control-padding-horizontal; padding: 7px 2px 7px @control-padding-horizontal;
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
} }
@ -56,7 +55,6 @@
&-select { &-select {
position: relative; // Fix chrome weird render bug position: relative; // Fix chrome weird render bug
float: left; float: left;
box-sizing: border-box;
width: @time-picker-panel-column-width; width: @time-picker-panel-column-width;
max-height: @timepicker-item-height * 6; max-height: @timepicker-item-height * 6;
overflow: hidden; overflow: hidden;
@ -81,7 +79,6 @@
} }
ul { ul {
box-sizing: border-box;
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0 0 @timepicker-item-height * 5; padding: 0 0 @timepicker-item-height * 5;
@ -89,7 +86,6 @@
} }
li { li {
box-sizing: content-box;
width: 100%; width: 100%;
height: @timepicker-item-height; height: @timepicker-item-height;
margin: 0; margin: 0;
@ -98,8 +94,14 @@
text-align: left; text-align: left;
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
transition: background 0.3s; transition: all 0.3s;
user-select: none; user-select: none;
&:focus {
color: @primary-color;
font-weight: 600;
outline: none;
}
} }
li:hover { li:hover {
@ -107,7 +109,7 @@
} }
li&-option-selected { li&-option-selected {
font-weight: bold; font-weight: 600;
background: @time-picker-selected-bg; background: @time-picker-selected-bg;
&:hover { &:hover {
background: @time-picker-selected-bg; background: @time-picker-selected-bg;