summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorakiyamn2022-06-01 16:53:44 +1000
committerakiyamn2022-06-01 16:53:44 +1000
commit29b082d779124056408b65f49611c9c88a28adc3 (patch)
treeea496df36593516d8705579056859224a19a9301
parente207761b6637863953e1d1ae8d9b835272456ec9 (diff)
downloadcss-0.1.tar.gz
css-0.1.zip
Add floating page and fix some margins0.1
Diffstat
-rw-r--r--src/26.html34
-rw-r--r--src/29.html2
-rw-r--r--src/30.html2
-rw-r--r--src/30a.html2
-rw-r--r--src/31.html2
-rw-r--r--src/34.html22
-rw-r--r--src/css/floatingpage.css16
-rw-r--r--src/css/fullonmobile.css21
-rw-r--r--src/css/progressbar.css10
-rw-r--r--src/css/uploadbox.css3
10 files changed, 74 insertions, 40 deletions
diff --git a/src/26.html b/src/26.html
index 6c0f7dc..9328871 100644
--- a/src/26.html
+++ b/src/26.html
@@ -9,6 +9,7 @@
<link rel="stylesheet" href="css/bigstyle.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/buttons.css" />
+ <link rel="stylesheet" href="css/floatingpage.css" />
</head>
<body class="authenticatedpage page legacy-page base-page basicpage page-mygov-auth-account bg-blue-grey">
<div class="root responsivegrid">
@@ -23,21 +24,24 @@
<!-- ADD YOUR PAGE IN HERE -->
<div class="subtitle">Document upload service</div>
<h1>Application for Medicare Entitlement Statement</h1>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
- <h3>How it works</h3>
- <ul>
- Sed do eiusmod tempor incididunt ut labore et dolore:
- <li>cursus euismod quis viverra</li>
- <li>nibh cras pulvinar mattis nunc.</li>
- </ul>
- <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>
- <h3>Your privacy</h3>
- <p>Pretium lectus quam id leo in vitae. Turpis massa tincidunt dui ut.</p>
- <a href="27.html" class="btn primary">Start adding documents</a>
- <a class="btn secondary">Cancel</a>
+
+ <div class="floating-page">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ <h3>How it works</h3>
+ <ul>
+ Sed do eiusmod tempor incididunt ut labore et dolore:
+ <li>cursus euismod quis viverra</li>
+ <li>nibh cras pulvinar mattis nunc.</li>
+ </ul>
+ <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>
+ <h3>Your privacy</h3>
+ <p>Pretium lectus quam id leo in vitae. Turpis massa tincidunt dui ut.</p>
+ <a href="27.html" class="btn primary">Start adding documents</a>
+ <a class="btn secondary">Cancel</a>
+ </div>
</div>
</main>
</div>
diff --git a/src/29.html b/src/29.html
index 28d6c20..bae61f1 100644
--- a/src/29.html
+++ b/src/29.html
@@ -28,7 +28,7 @@
<div class="subtitle">Document upload service</div>
<h1>signaturepage.jpg</h1>
- <div class="horiz-container full-on-mobile">
+ <div class="horiz-container full-width-on-mobile">
<div class="upload-box">
<h2>Uploading</h2>
<div class="progress-bar">
diff --git a/src/30.html b/src/30.html
index 8f01a1a..eb340f9 100644
--- a/src/30.html
+++ b/src/30.html
@@ -27,7 +27,7 @@
<!-- ADD YOUR PAGE IN HERE -->
<div class="subtitle">Document upload service</div>
<h1>signaturepage.jpg</h1>
- <div class="horiz-container full-on-mobile">
+ <div class="horiz-container full-width-on-mobile">
<div class="upload-box">
<h2>Uploading</h2>
diff --git a/src/30a.html b/src/30a.html
index 8f01a1a..eb340f9 100644
--- a/src/30a.html
+++ b/src/30a.html
@@ -27,7 +27,7 @@
<!-- ADD YOUR PAGE IN HERE -->
<div class="subtitle">Document upload service</div>
<h1>signaturepage.jpg</h1>
- <div class="horiz-container full-on-mobile">
+ <div class="horiz-container full-width-on-mobile">
<div class="upload-box">
<h2>Uploading</h2>
diff --git a/src/31.html b/src/31.html
index e273e59..82a202b 100644
--- a/src/31.html
+++ b/src/31.html
@@ -29,7 +29,7 @@
<div class="subtitle">Document upload service</div>
<h1>signaturepage.jpg</h1>
- <div class="horiz-container full-on-mobile">
+ <div class="horiz-container full-width-on-mobile">
<div class="upload-box">
<h2>Uploading</h2>
diff --git a/src/34.html b/src/34.html
index dca423d..d0337a3 100644
--- a/src/34.html
+++ b/src/34.html
@@ -12,6 +12,8 @@
<link rel="stylesheet" href="css/uploadbox.css" />
<link rel="stylesheet" href="css/infobox.css" />
<link rel="stylesheet" href="css/forms.css" />
+ <link rel="stylesheet" href="css/floatingpage.css" />
+ <link rel="stylesheet" href="css/fullonmobile.css" />
</head>
<body class="authenticatedpage page legacy-page base-page basicpage page-mygov-auth-account bg-blue-grey">
<div class="root responsivegrid">
@@ -24,17 +26,19 @@
<main id="main" role="main" tabindex="-1">
<div class="documentlodgementservice generic">
<!-- ADD YOUR PAGE IN HERE -->
- <p>Your (dynamic form) and any supporting documents you added are uploaded and we've notified (dynamic service).</p>
- <p>Your document upload reference number is (number).</p>
- <div class="info-box message">
- <!-- <img class="info-box__icon" src="img/info.png" /> -->
- <div class="info-box__icon"></div>
- <div class="info-box__text">
- Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
+ <div class="full-on-mobile" >
+ <div class="floating-page ">
+ <p>Your (dynamic form) and any supporting documents you added are uploaded and we've notified (dynamic service).</p>
+ <p>Your document upload reference number is (number).</p>
+ <div class="info-box message">
+ <div class="info-box__icon"></div>
+ <div class="info-box__text">
+ Lorem ipsum dolor sit amet, consec tetur adipiscing elit.
+ </div>
+ </div>
+ <button class="btn primary">Return to home</button>
</div>
</div>
- <div class="spacer-l"></div>
- <button class="btn primary">Return to home</button>
</div>
</main>
</div>
diff --git a/src/css/floatingpage.css b/src/css/floatingpage.css
new file mode 100644
index 0000000..23672e4
--- /dev/null
+++ b/src/css/floatingpage.css
@@ -0,0 +1,16 @@
+
+/* Desktop (at least 64em) */
+
+@media only screen and (min-width: 48em) {
+ .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .floating-page {
+ background-color: var(--white);
+ padding: 3rem;
+ margin: 0 auto;
+ box-shadow: 0px 2px 6px #10182040;
+ border-radius: 5px;
+ max-width: 80rem;
+ }
+ .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .floating-page > :first-child {
+ margin-top: 0;
+ }
+} \ No newline at end of file
diff --git a/src/css/fullonmobile.css b/src/css/fullonmobile.css
index db61ba8..392ebbb 100644
--- a/src/css/fullonmobile.css
+++ b/src/css/fullonmobile.css
@@ -1,7 +1,7 @@
@media only screen and (min-width: 48em) {
- .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-on-mobile {
- background-color: initial;
+ .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-width-on-mobile {
+ /* background-color: initial; */
outline: none;
margin: initial;
}
@@ -9,16 +9,23 @@
@media only screen and (max-width: 48em) {
- .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-on-mobile > .upload-box {
+ .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-width-on-mobile > .upload-box {
border: none;
padding: 0;
+ margin: 0;
+ }
+
+ .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-width-on-mobile {
+ background-color: var(--white);
+ box-shadow: -2rem 0 0 0 var(--white), 2rem 0 0 0 var(--white);
+ padding: 1rem 0;
+ /* outline: solid 2rem var(--white); */
+ /* margin-top: 3rem; */
}
.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .full-on-mobile {
background-color: var(--white);
- box-shadow: -2rem 0px 0px 0px var(--white), 2rem 0px 0px 0px var(--white);
- /* outline: solid 2rem var(--white);
- margin-top: 3rem; */
-
+ padding: 1rem 0;
+ outline: solid 10rem var(--white);
}
} \ No newline at end of file
diff --git a/src/css/progressbar.css b/src/css/progressbar.css
index 830485c..cc8f08e 100644
--- a/src/css/progressbar.css
+++ b/src/css/progressbar.css
@@ -1,15 +1,15 @@
:root {
--progress-bar-height: 6px;
- --progress-bar-width: 87%;
+ --progress-bar-width: 85%;
--progress-bar-radius: 3px;
}
-.progress-bar {
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .progress-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin: 1rem 0;
}
-.progress-bar div.progress-bar__base {
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .progress-bar div.progress-bar__base {
background-color: #bbb;
width: 100%;
height: var(--progress-bar-height);
@@ -17,13 +17,13 @@
border-radius: var(--progress-bar-radius);
}
-.progress-bar div.progress-bar__progress {
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .progress-bar div.progress-bar__progress {
background-color: var(--navy);
width: 68%; /* this can be controlled with javascript to set percent loaded */
height: var(--progress-bar-height);
border-radius: var(--progress-bar-radius);
}
-.progress-bar div.progress-bar__percentage {
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .progress-bar div.progress-bar__percentage {
font-size: var(--font-size-14);
font-weight: bold;
color: var(--light-grey);
diff --git a/src/css/uploadbox.css b/src/css/uploadbox.css
index a48f84b..7305162 100644
--- a/src/css/uploadbox.css
+++ b/src/css/uploadbox.css
@@ -10,6 +10,9 @@
margin: 10px 0;
max-width: 48em;
}
+.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 .upload-box__title {
font-weight: bold;
font-size: var(--font-size-18);
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-26 19:43:39 +0000