diff options
| -rw-r--r-- | src/26.html | 6 | ||||
| -rw-r--r-- | src/27.html | 24 | ||||
| -rw-r--r-- | src/css/buttons.css | 4 | ||||
| -rw-r--r-- | src/css/infobox.css | 11 | ||||
| -rw-r--r-- | src/css/style.css | 32 | ||||
| -rw-r--r-- | src/css/stylegrid.css | 3 | ||||
| -rw-r--r-- | src/css/supportingdocs.css | 56 | ||||
| -rw-r--r-- | src/css/uploadbox.css | 8 |
8 files changed, 132 insertions, 12 deletions
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 @@ </p> <h3>Your privacy</h3> <p>Pretium lectus quam id leo in vitae. Turpis massa tincidunt dui ut.</p> - <label class="btn btn--primary">Start adding documents</label> - <label class="btn btn--secondary">Cancel</label> + <div class="button-container"> + <label class="btn btn--primary">Start adding documents</label> + <label class="btn btn--secondary">Cancel</label> + </div> </div> </div> </main> 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 @@ <!-- ADD YOUR PAGE IN HERE --> <div class="subtitle">Document upload service</div> <h1>Add files</h1> + + <div class="horiz-container full-on-mobile"> <h2>Required documents</h2> <div class="upload-box"> <div class="upload-box__title">Lorem ipsum dolor sit amet, consectetur elit.</div> @@ -46,7 +48,29 @@ </div> <label class="btn btn--primary">Confirm</label> <label class="btn btn--secondary">Cancel</label> + + <div class="side-panel"> + <h3>What you need to know</h3> + <h4>Lorem ipsum dolor sit amet.</h4> + <p>Sed do eiusmod tempor incididunt ut labore et dolore:</p> + <ul> + <li>cursus euismod quis viverra</li> + <li>nibh cras pulvinar mattis nunc.</li> + </ul> + <p>Sed do eiusmod tempor incididunt ut labore et dolore:</p> + <ul> + <li>cursus euismod quis viverra</li> + <li>nibh cras pulvinar mattis nunc.</li> + </ul> + <h4>Pretium lectus quam id leo in vitae</h4> + <p> + Bibendum neque egestas congue quisque egestas diam in arcu cursus. + Diam vulputate ut pharetra sit amet. Aliquet sagittis id consectetur purus ut faucibus. + </p> + </div> + </div> </div> + </main> </div> </div> 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) { |