From f3d54e91357346bcf44925b603a7bc2249627d43 Mon Sep 17 00:00:00 2001 From: akiyamn Date: Wed, 8 Jun 2022 16:34:47 +1000 Subject: Flex 37.html and fixes from call --- src/26.html | 6 +++-- src/27.html | 24 ++++++++++++++++++++ src/css/buttons.css | 4 ++++ src/css/infobox.css | 11 +++++---- src/css/style.css | 32 +++++++++++++++++++++++++- src/css/stylegrid.css | 3 ++- src/css/supportingdocs.css | 56 ++++++++++++++++++++++++++++++++++++++++++++-- src/css/uploadbox.css | 8 +++++-- 8 files changed, 132 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/26.html b/src/26.html index c854cf2..ea33b4f 100644 --- a/src/26.html +++ b/src/26.html @@ -39,8 +39,10 @@

Your privacy

Pretium lectus quam id leo in vitae. Turpis massa tincidunt dui ut.

- - +
+ + +
diff --git a/src/27.html b/src/27.html index 8609b40..d6502ba 100644 --- a/src/27.html +++ b/src/27.html @@ -24,6 +24,8 @@
Document upload service

Add files

+ +

Required documents

Lorem ipsum dolor sit amet, consectetur elit.
@@ -46,7 +48,29 @@
+ +
+

What you need to know

+

Lorem ipsum dolor sit amet.

+

Sed do eiusmod tempor incididunt ut labore et dolore:

+ +

Sed do eiusmod tempor incididunt ut labore et dolore:

+ +

Pretium lectus quam id leo in vitae

+

+ Bibendum neque egestas congue quisque egestas diam in arcu cursus. + Diam vulputate ut pharetra sit amet. Aliquet sagittis id consectetur purus ut faucibus. +

+
+
+ diff --git a/src/css/buttons.css b/src/css/buttons.css index 1491dd2..0c866e8 100644 --- a/src/css/buttons.css +++ b/src/css/buttons.css @@ -9,6 +9,10 @@ cursor: pointer; line-height: normal; text-align: center; + height: auto; +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .button-container .btn { + margin: 0; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .btn.btn--primary { font-weight: bold; diff --git a/src/css/infobox.css b/src/css/infobox.css index d974b8c..2e08b43 100644 --- a/src/css/infobox.css +++ b/src/css/infobox.css @@ -12,7 +12,6 @@ margin-right: 4px; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box .info-box__text { - display: inline-block; font-weight: normal; font-size: var(--font-size-16); color: var(--black); @@ -20,12 +19,16 @@ font-size: var(--font-size-14); } -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box--info .info-box__text { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box .info-box__text > * { + display: block; +} + +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box--info .info-box__text > * { color: #2D7FC5; } -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box--loading .info-box__text { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box--loading .info-box__text > * { color: var(--dark-grey); } -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box--error .info-box__text { +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .info-box--error .info-box__text > * { color: var(--error-color); } \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css index e671f36..cb09f31 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -13,7 +13,7 @@ background-color: #EDF2F4; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice { - padding: 20px; + padding: 20px 0; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .subtitle { font-size: var(--font-size-16); @@ -28,6 +28,12 @@ font-weight: bold; color: var(--dark-grey); margin: 0.5em 0; + max-width: 1024px; +} +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h1 .ellipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice h2 { font-size: var(--font-size-20); @@ -66,6 +72,30 @@ align-items: baseline; justify-content: space-between; } +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .back-link { + margin-bottom: 24px; +} + +@media only screen and (min-width: 640px) { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .flex-r-between { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + } +} + +@media only screen and (max-width: 640px) { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .flex-r-between .button-container { + flex-direction: row; + justify-content: space-between; + + } + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .flex-r-between .button-container .btn { + width: 45vw; + } +} + /* Desktop (at least 64em) */ diff --git a/src/css/stylegrid.css b/src/css/stylegrid.css index 6203b17..ad8877b 100644 --- a/src/css/stylegrid.css +++ b/src/css/stylegrid.css @@ -6,7 +6,7 @@ background-color: #EDF2F4; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice { - padding: 20px; + padding: 20px 0; } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .subtitle { font-size: var(--font-size-16); @@ -52,6 +52,7 @@ font-size: var(--font-size-14); color: var(--light-grey); font-weight: bold; + margin: 0; } /* Desktop (at least 64em) */ diff --git a/src/css/supportingdocs.css b/src/css/supportingdocs.css index 4c08074..f2eb756 100644 --- a/src/css/supportingdocs.css +++ b/src/css/supportingdocs.css @@ -1,4 +1,4 @@ -.supporting-docs-container { +/* .supporting-docs-container { display: grid; grid-gap: 1rem; } @@ -33,4 +33,56 @@ .supporting-docs-container { grid-template-columns: repeat(4, 1fr); } - } \ No newline at end of file + } */ + + + +@media (min-width: 640px) { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .supporting-docs-container .upload-box { + width: calc(50% - 1rem); + /* width: 45%; */ + } +} + +@media (min-width: 1024px) { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .supporting-docs-container .upload-box { + width: calc(33% - 1rem); + /* width: 30%; */ + } +} + +@media (min-width: 1280px) { + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .supporting-docs-container .upload-box { + width: calc(25% - 1rem); + /* width: 20%; */ + } +} + +@media (min-width: 640px) { + .supporting-docs-container { + display: flex; + grid-gap: 1rem; + flex-wrap: wrap; + align-content: flex-start; + /* max-width: 1280px; */ + /* align-items: flex-start; */ + } + .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .supporting-docs-container .upload-box { + flex-grow: 0; + flex-shrink: 100; + font-size: 1.2rem; + margin: 0; + text-align: left; + cursor: pointer; + flex-basis: auto; + min-height: 300px; + } +} + +.supporting-doc-btn { + display: block; + border: 1px solid #BBBCBC; + background: #FFF; + padding: 24px; + border-radius: 4px; +} \ No newline at end of file diff --git a/src/css/uploadbox.css b/src/css/uploadbox.css index e6e9155..638646d 100644 --- a/src/css/uploadbox.css +++ b/src/css/uploadbox.css @@ -11,8 +11,9 @@ flex-shrink: 0; width: 708px; } -.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box > :first-child { - margin-top: 0; +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box > h2:first-of-type { + margin: 4px 0; + } .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .upload-box .upload-box__close-icon { background-image: url(../img/close.png); @@ -120,6 +121,9 @@ text-decoration: none; } +.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .fieldset--nopadding { + padding: 0; +} /* Desktop */ @media only screen and (min-width: 1024px) { -- cgit v1.2.3