From efadb095697960ba4bf2d95ec0f2172210a5e30a Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 3 Jul 2019 23:17:32 +0800
Subject: [PATCH] :lipstick: Optimize TimePicker focus style

close #17440
---
 components/date-picker/style/TimePicker.less | 31 +++++++++++---------
 components/time-picker/style/index.less      | 14 +++++----
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/components/date-picker/style/TimePicker.less b/components/date-picker/style/TimePicker.less
index 8f4212b6fa3e..8bb10cf2eaf7 100644
--- a/components/date-picker/style/TimePicker.less
+++ b/components/date-picker/style/TimePicker.less
@@ -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;
     }
 
diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less
index 0785200e0c68..6643a85545f3 100644
--- a/components/time-picker/style/index.less
+++ b/components/time-picker/style/index.less
@@ -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;