Merge pull request #1343 from greenpeace/planet-5984

PLANET-5984 Move input error styles to _forms.scss
greenpeace · Mar 31, 2021 · 7f7a047 · 7f7a047
2 parents 0e003ec + 74b409f
commit 7f7a047
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 50 deletions.
diff --git a/assets/src/scss/pages/_page.scss b/assets/src/scss/pages/_page.scss
@@ -105,15 +105,6 @@ div.page-template {
     font-size: 16px;
     padding: 15px 14px 8px;
     min-width: 400px;
-
-    &.is-invalid {
-      border-color: $dark-orange;
-      background: $white;
-
-      &:focus {
-        border-color: $dark-orange;
-      }
-    }
   }
 
   .input-text input:hover {
@@ -124,36 +115,4 @@ div.page-template {
     border-color: rgba(0, 109, 253, 0.75);
     outline: 0 none;
   }
-
-  .invalid-pw-feedback {
-    font-family: $roboto;
-    background: $dark-orange;
-    color: $white;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 500;
-    padding: 6px 12px;
-    width: fit-content;
-    position: relative;
-    pointer-events: none;
-    margin-top: 6px;
-
-    &:after {
-      bottom: 100%;
-      border: solid transparent;
-      content: "";
-      height: 0;
-      width: 0;
-      position: absolute;
-      border-bottom-color: $dark-orange;
-      border-width: 5px;
-      right: auto;
-      left: 16px;
-
-      html[dir="rtl"] & {
-        left: auto;
-        right: 16px;
-      }
-    }
-  }
 }
diff --git a/assets/src/scss/styleguide/src/layout/_forms.scss b/assets/src/scss/styleguide/src/layout/_forms.scss
@@ -21,11 +21,11 @@
     opacity: 0;
     pointer-events: none;
 
-    &:not(:disabled) + .custom-control-description:hover:before {
+    &:not(:disabled) ~ .custom-control-description:hover:before {
       border-color: $grey-80;
     }
 
-    & + .custom-control-description {
+    & ~ .custom-control-description {
       position: relative;
       cursor: pointer;
       font-family: $roboto;
@@ -58,7 +58,7 @@
       }
     }
 
-    &:checked + .custom-control-description {
+    &:checked ~ .custom-control-description {
       &:before {
         border-color: $grey-80;
       }
@@ -81,7 +81,7 @@
       }
     }
 
-    &:disabled + .custom-control-description {
+    &:disabled ~ .custom-control-description {
       cursor: auto;
 
       &:before {
@@ -95,11 +95,11 @@
     pointer-events: none;
     opacity: 0;
 
-    &:not(:disabled) + .custom-control-description:hover:before {
+    &:not(:disabled) ~ .custom-control-description:hover:before {
       border-color: $grey-80;
     }
 
-    & + .custom-control-description {
+    & ~ .custom-control-description {
       position: relative;
       cursor: pointer;
       font-family: $roboto;
@@ -131,7 +131,7 @@
       }
     }
 
-    &:checked + .custom-control-description:before {
+    &:checked ~ .custom-control-description:before {
       background: $grey-80;
       box-shadow: inset 0 0 0 2px $white;
       border-color: $grey-80;
@@ -223,3 +223,52 @@ textarea.form-control {
     }
   }
 }
+
+input,
+select {
+  &.is-invalid {
+    border-color: $dark-orange !important;
+    background: $white;
+    background-image: none !important;
+
+    &:focus {
+      border-color: $dark-orange;
+    }
+
+    ~ .invalid-feedback {
+      display: block;
+    }
+  }
+
+  ~ .invalid-feedback {
+    background: $dark-orange;
+    color: white;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    padding: 6px 12px;
+    width: fit-content;
+    position: relative;
+    pointer-events: none;
+    margin-top: 6px;
+    font-family: $roboto;
+
+    &:after {
+      bottom: 100%;
+      border: solid transparent;
+      content: "";
+      height: 0;
+      width: 0;
+      position: absolute;
+      border-bottom-color: $dark-orange;
+      border-width: 5px;
+      right: auto;
+      left: 16px;
+
+      html[dir="rtl"] & {
+        left: auto;
+        right: 16px;
+      }
+    }
+  }
+}
diff --git a/templates/single-page.twig b/templates/single-page.twig
@@ -12,7 +12,7 @@
 				<label for="pwbox-{{post.ID}}" class="form-label"><h6>{{ __( 'To see the content of this page, please enter your password  below', 'planet4-master-theme' ) }}</h6></label>
 				<div class="input-text">
 					<input name="post_password" id="pwbox-{{post.ID}}" type="password" {% if not is_password_valid %}class="is-invalid"{% endif %}>
-					{% if not is_password_valid %} <div class="invalid-pw-feedback">{{ __( 'Invalid password, please try again', 'planet4-master-theme' ) }}</div>{% endif %}
+					{% if not is_password_valid %} <div class="invalid-feedback">{{ __( 'Invalid password, please try again', 'planet4-master-theme' ) }}</div>{% endif %}
 				</div>
 			</div>
 			<div class="mb-3">

diff --git a/templates/single-password.twig b/templates/single-password.twig
@@ -15,7 +15,7 @@
 						<label for="pwbox-{{post.ID}}" class="form-label"><h6>{{ __( 'To see the content of this page, please enter your password  below', 'planet4-master-theme' ) }}</h6></label>
 						<div class="input-text">
 							<input name="post_password" id="pwbox-{{post.ID}}" type="password" {% if not is_password_valid %}class="is-invalid"{% endif %}>
-							{% if not is_password_valid %} <div class="invalid-pw-feedback">{{ __( 'Invalid password, please try again', 'planet4-master-theme' ) }}</div>{% endif %}
+							{% if not is_password_valid %} <div class="invalid-feedback">{{ __( 'Invalid password, please try again', 'planet4-master-theme' ) }}</div>{% endif %}
 						</div>
 					</div>
 					<div class="mb-3">