Improve styles for invalid inputs (#1143)

5 files changed, 43 insertions, 17 deletions

diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index 5416371f..781c797c 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -43,7 +43,7 @@ html:root:not([data-options-general-result-output-mode=merge]) #dictionary-main-
     font-weight: normal;
 }
 
-.form-control.is-invalid {
+.form-control[data-invalid=true] {
     border-color: #f00000;
 }
 
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index eeba5afc..642a48af 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -1106,13 +1106,6 @@ input[type=number]::-webkit-outer-spin-button {
 input[type=text] {
     width: var(--input-width-large);
 }
-input[type=text].input-with-suffix-button,
-input[type=number].input-with-suffix-button {
-    flex: 1 1 auto;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    z-index: 1;
-}
 textarea {
     box-sizing: border-box;
     padding: var(--textarea-padding);
@@ -1122,10 +1115,15 @@ textarea {
     line-height: var(--textarea-line-height);
     border: 1px solid var(--input-background-color);
 }
-input[type=text].is-invalid,
-input[type=number].is-invalid,
-textarea.is-invalid {
-    border-color: var(--danger-color);
+select:invalid,
+textarea:invalid,
+input[type=text]:invalid,
+input[type=number]:invalid,
+select[data-invalid=true],
+textarea[data-invalid=true],
+input[type=text][data-invalid=true],
+input[type=number][data-invalid=true] {
+    border: var(--thin-border-size) solid var(--danger-color);
 }
 select,
 textarea,
@@ -1141,6 +1139,25 @@ input[type=number]:focus {
     box-shadow: 0 0 0 2px var(--input-outline-color);
     outline: none;
 }
+select:invalid:focus,
+textarea:invalid:focus,
+input[type=text]:invalid:focus,
+input[type=number]:invalid:focus,
+select[data-invalid=true]:focus,
+textarea[data-invalid=true]:focus,
+input[type=text][data-invalid=true]:focus,
+input[type=number][data-invalid=true]:focus {
+    box-shadow: 0 0 0 2px var(--danger-color);
+    outline: none;
+}
+input[type=text].input-with-suffix-button,
+input[type=number].input-with-suffix-button {
+    flex: 1 1 auto;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right-style: none;
+    z-index: 1;
+}
 
 
 /* Material design button */
@@ -1265,6 +1282,7 @@ button.input-suffix-button {
     background-color: var(--input-background-color);
     box-sizing: border-box;
     padding: 0 0.5em;
+    border-color: transparent;
 }
 button.input-suffix-button.input-suffix-icon-button {
     width: 2.125em;
@@ -1277,6 +1295,14 @@ button.input-suffix-button.input-suffix-icon-button:focus {
 button.input-suffix-button.input-suffix-icon-button:active {
     background-color: var(--input-background-color-darker);
 }
+input[type=text]:invalid+button.input-suffix-button,
+input[type=number]:invalid+button.input-suffix-button,
+input[type=text][data-invalid=true]+button.input-suffix-button,
+input[type=number][data-invalid=true]+button.input-suffix-button {
+    border: var(--thin-border-size) solid var(--danger-color);
+    border-left-style: none;
+}
+
 
 /* Material design icon button */
 button.icon-button {
@@ -2097,7 +2123,7 @@ select.profile-condition-operator {
     margin-right: 0.25em;
     padding: 0 0.25em;
 }
-.anki-card-field-name-container[data-is-valid=false],
+.anki-card-field-name-container[data-invalid=true],
 .anki-card-field-name-container[data-order-matches=false][data-index='0'] {
     background-color: var(--danger-color-lightest);
     border-radius: var(--text-input-border-radius);
diff --git a/ext/bg/js/settings/anki-controller.js b/ext/bg/js/settings/anki-controller.js
index 541916b7..77b4ce96 100644
--- a/ext/bg/js/settings/anki-controller.js
+++ b/ext/bg/js/settings/anki-controller.js
@@ -535,7 +535,7 @@ class AnkiCardController {
         const fieldNamesSet = new Set(fieldNames);
         let index = 0;
         for (const [fieldName, {fieldNameContainerNode}] of fieldMap.entries()) {
-            fieldNameContainerNode.dataset.isValid = `${fieldNamesSet.has(fieldName)}`;
+            fieldNameContainerNode.dataset.invalid = `${!fieldNamesSet.has(fieldName)}`;
             fieldNameContainerNode.dataset.orderMatches = `${index < fieldNames.length && fieldName === fieldNames[index]}`;
             ++index;
         }
diff --git a/ext/bg/js/settings/anki-templates-controller.js b/ext/bg/js/settings/anki-templates-controller.js
index edf6f2c8..e68656c5 100644
--- a/ext/bg/js/settings/anki-templates-controller.js
+++ b/ext/bg/js/settings/anki-templates-controller.js
@@ -210,7 +210,7 @@ class AnkiTemplatesController {
         infoNode.textContent = hasException ? exceptions.map((e) => `${e}`).join('\n') : (showSuccessResult ? result : '');
         infoNode.classList.toggle('text-danger', hasException);
         if (invalidateInput) {
-            this._fieldTemplatesTextarea.classList.toggle('is-invalid', hasException);
+            this._fieldTemplatesTextarea.dataset.invalid = `${hasException}`;
         }
     }
 
diff --git a/ext/bg/js/settings/profile-conditions-ui.js b/ext/bg/js/settings/profile-conditions-ui.js
index 78155467..256130ca 100644
--- a/ext/bg/js/settings/profile-conditions-ui.js
+++ b/ext/bg/js/settings/profile-conditions-ui.js
@@ -614,7 +614,7 @@ class ProfileConditionUI {
         }
 
         this._value = value;
-        node.classList.remove('is-invalid');
+        delete node.dataset.invalid;
         node.type = inputType;
         if (inputValue !== null) {
             node.value = inputValue;
@@ -634,7 +634,7 @@ class ProfileConditionUI {
 
     _validateValue(value, validate) {
         const okay = (validate === null || validate(value));
-        this._valueInput.classList.toggle('is-invalid', !okay);
+        this._valueInput.dataset.invalid = `${!okay}`;
         return okay;
     }