diff --git a/CHANGELOG.md b/CHANGELOG.md index de12606..3f8cdc8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ * Disabled Varnish container by default, and moved Drupal to port 8080. Varnish now runs on 8085 (when enabled). ### Added +* Added basic form validation styling. * Add a default hash salt to settings.docker.php, overrideable using the `DRUPAL_HASH_SALT` environment variable. * Add a selenium container to the default Docker Compose stack. Selenium is a powerful front end testing and automation tool that allows for cross-browser testing, and replaces the deprecated PhantomJS. * Add `pantheon.yml` for configuring web docroot in Pantheon deployments. diff --git a/web/themes/custom/scaffold/scss/components/_form.scss b/web/themes/custom/scaffold/scss/components/_form.scss new file mode 100644 index 0000000..137ac21 --- /dev/null +++ b/web/themes/custom/scaffold/scss/components/_form.scss @@ -0,0 +1,44 @@ +$form-error-red: #e62600; +$form-error-dark-red: #a51b00; + +.field--widget-options-buttons > fieldset > legend > span.form-required, +label.form-required { + &:after { + content: '*'; + color: $form-error-red; + display: inline; + padding-left: rem-calc(3); + } +} + +.form-item { + .description.error { + margin-top: 0; + color: $form-error-dark-red; + } + input, + textarea, + select { + &.error { + border-width: 1px; + border-color: $form-error-red; + background-color: hsla(15, 75%, 97%, 1); + box-shadow: inset 0 5px 5px -5px #b8b8b8; + color: $form-error-dark-red; + &:focus { + border-color: $form-error-red; + outline: 0; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 2px 0 $form-error-red; + background-color: #fcf4f2; + } + } + } + + textarea.error + .cke { + border-width: 1px; + border-color: $form-error-red; + .cke_contents { + background-color: hsla(15, 75%, 97%, 1); + } + } +} diff --git a/web/themes/custom/scaffold/scss/style.scss b/web/themes/custom/scaffold/scss/style.scss index 3b8a20c..c90ccae 100644 --- a/web/themes/custom/scaffold/scss/style.scss +++ b/web/themes/custom/scaffold/scss/style.scss @@ -21,6 +21,7 @@ button, input[type="submit"], input[type="reset"] { // Import components. @import "components/logo"; +@import "components/form"; // @import "components/navigation";