Merge pull request #3654 from sg00dwin/required-icon

Add required class to form <h3> heading that contains, at least, 1 or more required fields
openshift · Dec 6, 2019 · b689389 · b689389
2 parents 65640ed + ee10bdc
commit b689389
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/frontend/public/components/cluster-settings/request-header-idp-form.tsx b/frontend/public/components/cluster-settings/request-header-idp-form.tsx
@@ -151,7 +151,7 @@ export class AddRequestHeaderPage extends PromiseComponent<{}, AddRequestHeaderP
           </p>
           <IDPNameInput value={name} onChange={this.nameChanged} />
           <div className="co-form-section__separator" />
-          <h3>URLs</h3>
+          <h3 className="co-required">URLs</h3>
           <p className="co-m-pane__explanation">At least one URL must be provided.</p>
           <div className="form-group">
             <label className="control-label" htmlFor="challenge-url">

diff --git a/frontend/public/style/_forms.scss b/frontend/public/style/_forms.scss
@@ -12,10 +12,16 @@
   flex-flow: row-reverse;
 }
 
-.co-required:after {
-  color: $color-pf-red-200;
-  content: '*';
-  padding-left: 3px;
+.co-required {
+  position: relative;
+  &:after {
+    color: $color-pf-red-200;
+    content: '*';
+    font-size: $font-size-base;
+    padding-left: 3px;
+    position: absolute;
+    top: 0;
+  }
 }
 
 .co-form-section__label {