Fix export settings not exporting updated settings after changing them (

#83) #83 * Also Improve checkmark styling in options page (#84)
gyng · Aug 5, 2018 · 3e0871d · 3e0871d
1 parent 2a0e27c
commit 3e0871d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # 3.1.2
 
-* Fix export settings not exporting updated settings after changing them
+* Fix export settings not exporting updated settings after changing them (#83)
+* Improve checkmark styling in options page (#84)
 
 # 3.1.1
 

diff --git a/src/options/options.js b/src/options/options.js
@@ -282,12 +282,16 @@ const setupAutosave = el => {
 
  if (el.type !== "textarea") {
  el.parentNode.classList.remove("saved");
- el.parentNode.classList.add("saved-base");
- el.parentNode.classList.add("saved");
+ window.setTimeout(() => {
+ el.parentNode.classList.add("saved-base");
+ el.parentNode.classList.add("saved");
+ }, 100);
  } else {
  el.classList.remove("saved");
- el.classList.add("saved-base");
- el.classList.add("saved");
+ window.setTimeout(() => {
+ el.classList.add("saved-base");
+ el.classList.add("saved");
+ }, 100);
  }
  };
 

diff --git a/src/options/style.css b/src/options/style.css
@@ -405,27 +405,33 @@ button.puffy:active {
 .saved-base {
  border-radius: 4px;
  background-image: url(i/check-16.svg);
- background-position: right 4px top 4px;
- background-size: auto 24px;
+ background-position: right 16px top 4px;
+ background-size: auto 16px;
  background-repeat: no-repeat;
 }
 
 label.saved-base {
- padding-right: 32px;
- background-position: right 8px center;
+ padding-right: 18px;
+ background-position: right -2px top 4px;
+}
+
+@keyframes outline {
+ 0% {
+ background-position-y: top 8px;
+ }
+
+ 100% {
+ background-position-y: top 4px;
+ }
 }
 
 .saved {
- background-size: 16px;
- background-position: right 4px top 4px;
+ background-position: right 16px top 4px;
  animation-name: pulse;
  animation-duration: 0.1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-.saved-base:active {
- background-size: auto 24px;
+ animation: outline 0.3s;
 }
 
 .demo {