diff --git a/tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html b/tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html index 2b7b359d1..7f72fb36b 100644 --- a/tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html +++ b/tbx/project_styleguide/templates/patterns/pages/wagtail/password_required.html @@ -5,11 +5,12 @@ {% block body_class %}template-password-required{% endblock %} {% block content %} -

Password required

+
+

Password required

-

Please enter the password to proceed.

+

Please enter the password to proceed.

-
+
{% csrf_token %} @@ -22,7 +23,8 @@

Password required

{% for field in form.hidden_fields %} {{ field }} {% endfor %} -
+
+
{% endblock %} diff --git a/tbx/static_src/sass/components/_password-required.scss b/tbx/static_src/sass/components/_password-required.scss new file mode 100644 index 000000000..9dff63c72 --- /dev/null +++ b/tbx/static_src/sass/components/_password-required.scss @@ -0,0 +1,31 @@ +.password-required { + padding: $grid; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + + &__title { + margin: 0 0 $grid 0; + } + + &__form { + display: flex; + flex-direction: column; + align-items: center; + } + + &__submit-button { + width: max-content; + margin-top: $grid; + margin-bottom: $grid * 4; + padding: 10px 16px; + border: none; + cursor: pointer; + + @include media-query(large) { + margin-top: $grid * 2; + margin-bottom: $grid * 6; + } + } +} diff --git a/tbx/static_src/sass/main.scss b/tbx/static_src/sass/main.scss index b64e7a4b6..16df9ba04 100644 --- a/tbx/static_src/sass/main.scss +++ b/tbx/static_src/sass/main.scss @@ -60,6 +60,7 @@ @import 'components/page'; @import 'components/paragraph-with-image'; @import 'components/paragraph-with-quote'; +@import 'components/password-required'; @import 'components/post'; @import 'components/posts-grid'; @import 'components/primary-nav';