Fix regressions of styling due to new seed confirmation changes (decr…

…ed#1173)
guangminglion · Feb 19, 2018 · e0afdeb · e0afdeb
1 parent 0c6d37e
commit e0afdeb
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 1 deletion.
diff --git a/app/style/CreateWalletForm.less b/app/style/CreateWalletForm.less
@@ -183,11 +183,51 @@
   height: 202px;
 }
 
+.inverted-colors {
+  .confirm-seed-word .Select-control,
+  .confirm-seed-word .Select-control:hover:not(:disabled) {
+    color: #0c1e3e;
+  }
+
+  .confirm-seed-word .is-disabled .Select-control:hover {
+    color: #8997a5;
+    border: 2px solid #000;
+  }
+}
+
 .confirm-seed-word {
   float: left;
   margin: 5px;
   width: 100px;
 
+  .Select-arrow-zone {
+    width: 0px;
+  }
+
+  .Select-arrow {
+    border: none;
+    display: inherit;
+    height: 0;
+    width: 0;
+    position: relative;
+    transition: inherit;
+  }
+
+  .Select-control:hover:not(:disabled) {
+    color: inherit;
+    border: inherit;
+  }
+
+  .Select-control:hover:not(:disabled) .Select-arrow {
+    border-top-color: inherit;
+  }
+
+  .is-open .Select-arrow,
+  .is-open .Select-control:hover:not(:disabled) .Select-arrow,
+  .Select-arrow-zone:hover > .Select-arrow {
+    border-top-color: inherit;
+  }
+
   .Select-control {
     padding-left: 2px;
     border-radius: 5px;
@@ -200,10 +240,21 @@
   .Select-control {
     border: 2px solid #2ed8a3;
   }
+
+  .Select-control:hover {
+    border: 2px solid #2ed8a3;
+  }
 }
 
 .confirm-seed-word.no-match {
   .Select-control {
+    color: #0c1e3e;
+    border: 2px solid red;
+  }
+
+  .Select-control:hover {
+    color: #0c1e3e;
     border: 2px solid red;
   }
 }
+
diff --git a/app/style/ReactSelectGlobal.less b/app/style/ReactSelectGlobal.less
@@ -41,6 +41,7 @@
   border: 0px;
   border-radius: 0px;
   background-color: inherit;
+  border-bottom: 1px solid @stroke-color-default;
   box-shadow: none;
   color: @input-color-default;
   cursor: default;
@@ -196,17 +197,26 @@
   position: relative;
   text-align: center;
   vertical-align: middle;
-  width: 0px;
+  width: 10px;
 }
 
 .Select-arrow {
+  border-color: @stroke-color-default transparent transparent;
+  border-style: solid;
+  border-width: 5px 5px 2.5px;
   display: inline-block;
   height: 0;
   width: 0;
   position: relative;
   transition: all @input-transition-time @input-timing-function;
 }
 
+.Select-control:hover:not(:disabled) {
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+  color: @input-color-hovered;
+  border-bottom: 1px solid @stroke-color-hovered;
+}
+
 .Select-control:hover:not(:disabled) .Select-arrow {
   border-top-color: @stroke-color-hovered;
 }
@@ -450,6 +460,8 @@
 }
 
 .inverted-colors {
+  .Select-control,
+  .Select-control:hover:not(:disabled),
   .is-open .Select-control .Select-input:focus,
   .is-searchable.is-open > .Select-control {
     color: #fff;