Update styling

edivorce/apps/core/static/css/main.scss

@@ -18,8 +18,10 @@ $color-grey-lightest: #fdfdfd;
 $color-green: #57b26a;
 $color-green-light: #d9f6df;
 $color-gold-light: #e6ca85;
+$color-red: #D8292F;
 
 $font-custom: Myriad-Pro, Calibri, Arial, Sans Serif;
+$font-custom-bold: Myriad-Pro-Bold, Calibri, Arial, Sans Serif;
 
 @font-face {
 	font-family: 'Myriad-Pro';
@@ -28,6 +30,13 @@ $font-custom: Myriad-Pro, Calibri, Arial, Sans Serif;
 	font-style: normal;
 }
 
+@font-face {
+	font-family: 'Myriad-Pro-Bold';
+	src: url('../fonts/MyriadPro-Bold.otf');
+	font-weight: bold;
+	font-style: normal;
+}
+
 body {
 	font-family: $font-custom;
 	font-size: 16px;
@@ -669,6 +678,18 @@ i.fa.fa-question-circle {
 	}
 }
 
+.error {
+    border: 2px solid $color-red !important;
+    -webkit-transition: 0.1s ease-in-out all;
+    transition: 0.1s ease-in-out all;
+
+    .warning {
+        color: $color-red;
+        font-size: 16px;
+        font-weight: bolder;
+    }
+}
+
 .btn-radio {
 	color: $brand-titles;
 	background-color: $color-blue-lighter;
@@ -1067,12 +1088,6 @@ textarea {
 		transition: 0.1s ease-in-out all;
 	}
 
-	&.hasError {
-		border: 1px solid #FF4136;
-		-webkit-transition: 0.1s ease-in-out all;
-		transition: 0.1s ease-in-out all;
-	}
-
 	h3 {
 		margin-top: 0;
 	}
@@ -1085,6 +1100,27 @@ textarea {
 	.fact-sheet-table-inline-question {
 		margin-bottom: 48px;
 	}
+
+    .required, .optional {
+        font-size: 14px;
+        font-family: $font-custom-bold;
+        font-weight: bolder;
+        text-transform: uppercase;
+        padding: 6px 6px 4px 6px;
+        margin-left: 16px;
+        vertical-align: top;
+        white-space: nowrap;
+    }
+
+    .required {
+        color: $color-red;
+        border: $color-red 2px solid;
+    }
+
+    .optional {
+        color: $color-blue-dark;
+        border: $color-blue-dark 1px solid;
+    }
 }
 
 .question-well-border-less {
@@ -1807,12 +1843,12 @@ textarea {
 }
 
 .has-warning-box {
-	border: 3px solid #a94442;
+	border: 3px solid $color-red;
 	padding-top: 8px;
 	padding-left: 8px;
 
 	#terms_warning {
-		color: #a94442;
+		color: $color-red;
 	}
 }
 /* Modals */

edivorce/apps/core/static/js/main.js

@@ -488,15 +488,15 @@ $(function () {
     };
 
     var scrollToFirstError = function() {
-        var hasErrors = $('.hasError');
+        var hasErrors = $('.error');
         if (hasErrors.length > 0) {
-            $('.hasError')[0].scrollIntoView();
+            $('.error')[0].scrollIntoView();
         }
     };
 
     var clearQuestionWellError = function() {
         $('.children-questions .question-well').each(function () {
-            $(this).removeClass('hasError');
+            $(this).removeClass('error');
         });
     };
 
@@ -506,28 +506,28 @@ $(function () {
 
         $('.children-questions .question-well').each(function () {
             var questionWell = $(this);
-            questionWell.removeClass('hasError');
+            questionWell.removeClass('error');
             questionWell.find('input').each(function (index, inputField) {
                 if (inputField.type === 'text') {
                     if (inputField.value === '') {
                         isNotEmpty = false;
-                        questionWell.addClass('hasError');
+                        questionWell.addClass('error');
                     } else if (inputField.id === 'childs_birth_date') {
                         if (!moment(inputField.value, "MMM D, YYYY").isValid()) {
                             isNotEmpty = false;
-                            questionWell.addClass('hasError');
+                            questionWell.addClass('error');
                         }
                     } else if (inputField.id === 'childs_name') {
                         // check for digits in the name
                         if (hasDigit.test(inputField.value)) {
                             isNotEmpty = false;
-                            questionWell.addClass('hasError');
+                            questionWell.addClass('error');
                         }
                     }
                 } else if (inputField.type === 'radio') {
                     if (questionWell.find('input:radio:checked').length === 0) {
                         isNotEmpty = false;
-                        questionWell.addClass('hasError');
+                        questionWell.addClass('error');
                     }
                     return false;
                 }