From 9e8d04d806d3e60a3796d77a984b36aa4e5336d3 Mon Sep 17 00:00:00 2001
From: Yutaka Ishii <ytkishii@gmail.com>
Date: Mon, 11 Dec 2017 21:52:08 +0900
Subject: [PATCH] =?UTF-8?q?progressBar=20padding=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 browser/components/TodoListPercentage.js   |  4 +++-
 browser/components/TodoListPercentage.styl | 12 ++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/browser/components/TodoListPercentage.js b/browser/components/TodoListPercentage.js
index f152130c..3be63ca5 100644
--- a/browser/components/TodoListPercentage.js
+++ b/browser/components/TodoListPercentage.js
@@ -16,7 +16,9 @@ const TodoListPercentage = ({
 }) => (
   <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
     <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
-      <p styleName='percentageText'>{percentageOfTodo}%</p>
+      <div styleName='progressBarInner'>
+      	<p styleName='percentageText'>{percentageOfTodo}%</p>
+      </div>
     </div>
   </div>
 )
diff --git a/browser/components/TodoListPercentage.styl b/browser/components/TodoListPercentage.styl
index aec99d0e..7f44fd08 100644
--- a/browser/components/TodoListPercentage.styl
+++ b/browser/components/TodoListPercentage.styl
@@ -9,7 +9,6 @@
   font-size: 12px
   z-index 100
   border-radius 2px
-  padding-left 10px
 
 .progressBar
   background-color: #1EC38B
@@ -17,9 +16,18 @@
   border-radius 2px
   transition 0.4s cubic-bezier(0.4, 0.4, 0, 1)
 
+.progressBarInner
+  padding 0 10px
+  min-width 1px
+  height 100%
+  display -webkit-box
+  display box
+  justify-content center
+  align-items center
+
+
 .percentageText
   color #f4f4f4
-  padding: 2px 43%
   font-weight 600
 
 body[data-theme="dark"]