fix(panel): fix styles

crimx · May 30, 2018 · 557fdff · 557fdff
1 parent a12e070
commit 557fdff
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 22 deletions.
diff --git a/src/content/components/DictItem/_style.scss b/src/content/components/DictItem/_style.scss
@@ -24,15 +24,16 @@
 }
 
 .panel-DictItem_Logo {
-  width: 19px;
-  height: 19px;
+  width: 20px;
+  height: 20px;
   margin-top: -1px;
   user-select: none;
 }
 
 .panel-DictItem_Title {
   margin: 0;
-  padding: 3px;
+  padding: 0 3px;
+  line-height: 20px - 1px;
   font-size: 12px;
   font-weight: normal;
 
@@ -67,8 +68,6 @@
 
 .panel-DictItem_Loader {
   align-self: center;
-  position: relative;
-  overflow: hidden;
   width: 120px;
   height: 10px;
   user-select: none;
@@ -80,11 +79,13 @@
   left: 0;
   width: 10px;
   height: 10px;
-  border-radius: 50%;
-  background: orange;
+  fill: orange;
 }
 
 .panel-DictItem_FoldArrowBtn {
+  width: 20px - 1px;
+  height: 20px - 1px;
+  overflow: hidden;
   background: none;
   border: none;
   margin: 0 0 0 auto;
@@ -187,13 +188,9 @@
   }
 }
 
-/**
- * remove GPU acceleration which might casue iframe flickering in Chrome 66
- * @todo add back after Chrome 68
- */
 @keyframes panel-DictItem_Loader-shift {
-    0% { left:   0  ; background-color: rgba(255, 165, 0, 0); }
-   10% { left:  30px; background-color: rgba(255, 165, 0, 1); }
-   90% { left:  80px; background-color: rgba(255, 165, 0, 1); }
-  100% { left: 110px; background-color: rgba(255, 165, 0, 0); }
+    0% { transform: translateX(  0  ); opacity: 0; }
+   10% { transform: translateX( 30px); opacity: 1; }
+   90% { transform: translateX( 80px); opacity: 1; }
+  100% { transform: translateX(110px); opacity: 0; }
 }
diff --git a/src/content/components/DictItem/index.tsx b/src/content/components/DictItem/index.tsx
@@ -245,13 +245,13 @@ export class DictItem extends React.PureComponent<DictItemProps & { t: Translati
             <a href={dictURL} onClick={this.handleDictURLClick}>{t(`dict:${id}`)}</a>
           </h1>
           { searchStatus === SearchStatus.Searching && !hasError &&
-            <div className='panel-DictItem_Loader'>
-              <div className='panel-DictItem_Loader_Ball' />
-              <div className='panel-DictItem_Loader_Ball' />
-              <div className='panel-DictItem_Loader_Ball' />
-              <div className='panel-DictItem_Loader_Ball' />
-              <div className='panel-DictItem_Loader_Ball' />
-            </div>
+            <svg className='panel-DictItem_Loader' width='120' height='10' viewBox='0 0 120 10' xmlns='http://www.w3.org/2000/svg'>
+              <circle className='panel-DictItem_Loader_Ball' cx='5' cy='5' r='5' />
+              <circle className='panel-DictItem_Loader_Ball' cx='5' cy='5' r='5' />
+              <circle className='panel-DictItem_Loader_Ball' cx='5' cy='5' r='5' />
+              <circle className='panel-DictItem_Loader_Ball' cx='5' cy='5' r='5' />
+              <circle className='panel-DictItem_Loader_Ball' cx='5' cy='5' r='5' />
+            </svg>
           }
           <button className={'panel-DictItem_FoldArrowBtn'} onClick={this.blurAfterClick}>
             <svg className={`panel-DictItem_FoldArrow ${isUnfold ? 'isActive' : ''}`} width='18' height='18' viewBox='0 0 59.414 59.414' xmlns='http://www.w3.org/2000/svg'>

diff --git a/src/content/components/MenuBar/_style.scss b/src/content/components/MenuBar/_style.scss
@@ -10,6 +10,7 @@
 .panel-MenuBar_Btn {
   width: 30px;
   height: 30px;
+  overflow: hidden;
   padding: 8px;
   border: none;
   background: transparent;