Merge pull request #17447 from ant-design/fix-time-picker-style

style: 💄 optimize TimePicker focus style
This commit is contained in:
偏右 2019-07-04 00:02:51 +08:00 committed by GitHub
commit 859bba58f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 20 deletions

View File

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

View File

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