applied variables and buttons styles
This commit is contained in:
@@ -20,6 +20,18 @@ export default function Footer(props) {
|
||||
|
||||
return (
|
||||
<footer className="govuk-footer " role="contentinfo">
|
||||
<div class="sharebar" id="sharebar">
|
||||
<div class="sharebar__components container-fluid">
|
||||
<div class="main__sharebar">
|
||||
<div
|
||||
id="sharebar__backtotop"
|
||||
class="btn--outlined btn--arrow-up"
|
||||
>
|
||||
<a href="#page_wrapper">Back to top</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-width-container ">
|
||||
<div className="govuk-footer__meta">
|
||||
<div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
|
||||
|
||||
@@ -15,7 +15,7 @@ export default function Header({ courseName }) {
|
||||
data-module="govuk-header"
|
||||
>
|
||||
<div className="govuk-header__container govuk-width-container">
|
||||
<div className="govuk-header__logo">
|
||||
<div className="govuk-header__logo govuk-!-width-one-quarter">
|
||||
<a
|
||||
href="/"
|
||||
className="govuk-header__link govuk-header__link--homepage"
|
||||
@@ -61,7 +61,7 @@ export default function Header({ courseName }) {
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="govuk-header__content govuk-!-width-one-half govuk-!-margin-top-3">
|
||||
<div className="govuk-header__content govuk-!-width-two-thirds govuk-!-margin-top-3">
|
||||
<a
|
||||
href="/"
|
||||
onClick={() => {
|
||||
|
||||
@@ -28,7 +28,7 @@ const Home = (props) => {
|
||||
{t("search:page-title")} - {t("common:service-name")}
|
||||
</title>
|
||||
</Head>
|
||||
<div className="">
|
||||
<div id="page_wrapper">
|
||||
<CookieBanner />
|
||||
<Header courseName={t("common:service-name")} />
|
||||
<div className="govuk-width-container">
|
||||
|
||||
+1
-1
@@ -29,7 +29,7 @@ const Home = (props) => {
|
||||
{t("case:page-title")} - {t("common:service-name")}
|
||||
</title>
|
||||
</Head>
|
||||
<div className="">
|
||||
<div id="page_wrapper">
|
||||
<CookieBanner />
|
||||
<Header courseName={t("common:service-name")} />
|
||||
<div className="govuk-width-container">
|
||||
|
||||
+20
-21
@@ -1,4 +1,3 @@
|
||||
|
||||
import _ from "lodash";
|
||||
import Head from "next/head";
|
||||
import Header from "../components/header";
|
||||
@@ -16,28 +15,28 @@ import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
const Home = (props) => {
|
||||
const { footerLinks, pages } = props;
|
||||
let { t,lang } = useTranslation();
|
||||
const { footerLinks, pages } = props;
|
||||
let { t, lang } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>{t("common:service-name")}</title>
|
||||
</Head>
|
||||
<div className="">
|
||||
<CookieBanner />
|
||||
<Header courseName="Appeals Casework Portal" />
|
||||
<div className="govuk-width-container">
|
||||
<Banner />
|
||||
<Main pages={pages} />
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>{t("common:service-name")}</title>
|
||||
</Head>
|
||||
<div id="page_wrapper">
|
||||
<CookieBanner />
|
||||
<Header courseName="Appeals Casework Portal" />
|
||||
<div className="govuk-width-container">
|
||||
<Banner />
|
||||
<Main pages={pages} />
|
||||
</div>
|
||||
<Footer footerLinks={footerLinks} />
|
||||
</div>
|
||||
</div>
|
||||
<Footer footerLinks={footerLinks} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
// export const getServerSideProps = wrapper.getServerSideProps(
|
||||
@@ -74,4 +73,4 @@ const Home = (props) => {
|
||||
// };
|
||||
// };
|
||||
|
||||
export default Home//connect(mapStateToProps)(Home);
|
||||
export default Home; //connect(mapStateToProps)(Home);
|
||||
|
||||
+22
-21
@@ -15,28 +15,30 @@ import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
|
||||
const Home = (props) => {
|
||||
const { footerLinks, pages } = props;
|
||||
let { t,lang } = useTranslation();
|
||||
const { footerLinks, pages } = props;
|
||||
let { t, lang } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>{t("myportal:page-title")} - {t("common:service-name")}</title>
|
||||
</Head>
|
||||
<div className="">
|
||||
<CookieBanner />
|
||||
<Header courseName={t("common:service-name")} />
|
||||
<div className="govuk-width-container">
|
||||
<Banner />
|
||||
<MyPortal/>
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>
|
||||
{t("myportal:page-title")} - {t("common:service-name")}
|
||||
</title>
|
||||
</Head>
|
||||
<div id="page_wrapper">
|
||||
<CookieBanner />
|
||||
<Header courseName={t("common:service-name")} />
|
||||
<div className="govuk-width-container">
|
||||
<Banner />
|
||||
<MyPortal />
|
||||
</div>
|
||||
<Footer footerLinks={footerLinks} />
|
||||
</div>
|
||||
</div>
|
||||
<Footer footerLinks={footerLinks} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
// export const getServerSideProps = wrapper.getServerSideProps(
|
||||
@@ -73,5 +75,4 @@ const Home = (props) => {
|
||||
// };
|
||||
// };
|
||||
|
||||
export default Home//connect(mapStateToProps)(Home);
|
||||
|
||||
export default Home; //connect(mapStateToProps)(Home);
|
||||
|
||||
@@ -28,7 +28,7 @@ const Home = (props) => {
|
||||
{t("search:page-title")} - {t("common:service-name")}
|
||||
</title>
|
||||
</Head>
|
||||
<div className="">
|
||||
<div id="page_wrapper">
|
||||
<CookieBanner />
|
||||
<Header courseName={t("common:service-name")} />
|
||||
<div className="govuk-width-container">
|
||||
|
||||
+163
-163
@@ -1,210 +1,210 @@
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex-grow: 0;
|
||||
flex-basis: 100%;
|
||||
margin-bottom: 2em;
|
||||
flex-grow: 0;
|
||||
flex-basis: 100%;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) and (max-width: 900px) {
|
||||
.card {
|
||||
flex-basis: 45.99%;
|
||||
// Every card in the first row needs horizontal margin
|
||||
&:nth-child(2n-1) {
|
||||
margin-right: 3%;
|
||||
}
|
||||
// Every card in the second row needs horizontal margin
|
||||
&:nth-child(2n-2) {
|
||||
margin-left: 3%;
|
||||
}
|
||||
.card {
|
||||
flex-basis: 45.99%;
|
||||
// Every card in the first row needs horizontal margin
|
||||
&:nth-child(2n-1) {
|
||||
margin-right: 3%;
|
||||
}
|
||||
// Every card in the second row needs horizontal margin
|
||||
&:nth-child(2n-2) {
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
&.card-3 {
|
||||
flex-basis: 44%;
|
||||
min-height: 300px;
|
||||
&.card-3 {
|
||||
flex-basis: 44%;
|
||||
min-height: 300px;
|
||||
|
||||
// &:nth-child(3n-1) {
|
||||
// margin-left: 3%;
|
||||
// margin-right: 3%;
|
||||
// }
|
||||
// &:nth-child(3n-1) {
|
||||
// margin-left: 3%;
|
||||
// margin-right: 3%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
.card {
|
||||
flex-basis: 46%;
|
||||
.card {
|
||||
flex-basis: 48.2%;
|
||||
|
||||
&:nth-child(2n-2) {
|
||||
margin-left: 3%;
|
||||
&:nth-child(2n-2) {
|
||||
margin-left: 3%;
|
||||
}
|
||||
&.card-3 {
|
||||
flex-basis: 31%;
|
||||
min-height: 300px;
|
||||
|
||||
&:nth-child(2n-2) {
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
&:nth-child(3n-1) {
|
||||
margin-left: 3%;
|
||||
margin-right: 3%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.card-3 {
|
||||
flex-basis: 31%;
|
||||
min-height: 300px;
|
||||
|
||||
&:nth-child(2n-2) {
|
||||
margin-left: 0%;
|
||||
}
|
||||
|
||||
&:nth-child(3n-1) {
|
||||
margin-left: 3%;
|
||||
margin-right: 3%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-useragent*="MSIE 10.0"] .flex-container {
|
||||
.card {
|
||||
flex-basis: 46%;
|
||||
margin: 3%;
|
||||
.card {
|
||||
flex-basis: 46%;
|
||||
margin: 3%;
|
||||
|
||||
&.card-3 {
|
||||
flex-basis: 31%;
|
||||
&.card-3 {
|
||||
flex-basis: 31%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid $govuk-border-colour; //$panel-colour;
|
||||
font-size: 16px;
|
||||
background-color: govuk-colour("light-grey", $legacy: "grey-4");
|
||||
border: 1px solid $govuk-border-colour; //$panel-colour;
|
||||
font-size: 16px;
|
||||
background-color: govuk-colour("light-grey", $legacy: "grey-4");
|
||||
|
||||
&.inactive {
|
||||
color: $govuk-secondary-text-colour;
|
||||
}
|
||||
|
||||
.card-heading {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
//border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
|
||||
padding: 12px;
|
||||
|
||||
*:last-child {
|
||||
margin-bottom: 0;
|
||||
&.inactive {
|
||||
color: $govuk-secondary-text-colour;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: govuk-colour("light-grey", $legacy: "grey-4");
|
||||
transition: 0.1s ease-in-out;
|
||||
|
||||
.card-heading a {
|
||||
color: $govuk-link-colour;
|
||||
.card-heading {
|
||||
margin-top: 0;
|
||||
&:focus {
|
||||
color: govuk-colour("black", $legacy: "black");
|
||||
outline: 3px solid transparent;
|
||||
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
//border-bottom: 1px solid $govuk-border-colour; //$panel-colour;
|
||||
padding: 12px;
|
||||
|
||||
*:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-large {
|
||||
color: $govuk-secondary-text-colour;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
&.active {
|
||||
background-color: govuk-colour("light-grey", $legacy: "grey-4");
|
||||
transition: 0.1s ease-in-out;
|
||||
|
||||
.detail {
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-action {
|
||||
border-top: 0;
|
||||
padding: 12px;
|
||||
|
||||
a {
|
||||
display: inline;
|
||||
border-bottom: 1px solid #c7dceb;
|
||||
color: $govuk-link-colour;
|
||||
line-height: 1.5em;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $govuk-link-colour;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $govuk-link-colour;
|
||||
color: #2e8aca;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: govuk-colour("black", $legacy: "black");
|
||||
outline: 3px solid transparent;
|
||||
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin: 0 0 1em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.card-heading a {
|
||||
color: $govuk-link-colour;
|
||||
margin-top: 0;
|
||||
&:focus {
|
||||
color: govuk-colour("black", $legacy: "black");
|
||||
outline: 3px solid transparent;
|
||||
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-large {
|
||||
color: $govuk-secondary-text-colour;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.detail {
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.clear {
|
||||
background-color: govuk-colour("white", $legacy: "white");
|
||||
border: none;
|
||||
}
|
||||
|
||||
.card-action {
|
||||
border-top: 0;
|
||||
padding: 12px;
|
||||
|
||||
a {
|
||||
display: inline;
|
||||
border-bottom: 1px solid #c7dceb;
|
||||
color: $govuk-link-colour;
|
||||
line-height: 1.5em;
|
||||
|
||||
&:link,
|
||||
&:visited {
|
||||
color: $govuk-link-colour;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $govuk-link-colour;
|
||||
color: #2e8aca;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: govuk-colour("black", $legacy: "black");
|
||||
outline: 3px solid transparent;
|
||||
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin: 0 0 1em;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.clear {
|
||||
background-color: govuk-colour("white", $legacy: "white");
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.js {
|
||||
.card-body.active {
|
||||
&:hover {
|
||||
//background-color: $govuk-link-colour;
|
||||
color: $govuk-link-colour;
|
||||
cursor: pointer;
|
||||
transition: 0.1s ease-in-out;
|
||||
transition-delay: 0.25s;
|
||||
.card-body.active {
|
||||
&:hover {
|
||||
//background-color: $govuk-link-colour;
|
||||
color: $govuk-link-colour;
|
||||
cursor: pointer;
|
||||
transition: 0.1s ease-in-out;
|
||||
transition-delay: 0.25s;
|
||||
|
||||
.card-heading,
|
||||
p {
|
||||
color: $govuk-link-colour;
|
||||
transition: 0.1s ease-in-out;
|
||||
transition-delay: 0.25s;
|
||||
}
|
||||
.card-heading,
|
||||
p {
|
||||
color: $govuk-link-colour;
|
||||
transition: 0.1s ease-in-out;
|
||||
transition-delay: 0.25s;
|
||||
}
|
||||
|
||||
.card-heading a {
|
||||
color: $govuk-link-colour;
|
||||
transition-delay: 0.25s;
|
||||
}
|
||||
.card-heading a {
|
||||
color: $govuk-link-colour;
|
||||
transition-delay: 0.25s;
|
||||
}
|
||||
|
||||
.detail-large {
|
||||
color: $govuk-link-colour;
|
||||
transition-delay: 0.25s;
|
||||
}
|
||||
.detail-large {
|
||||
color: $govuk-link-colour;
|
||||
transition-delay: 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#inspectorate-card .card-body {
|
||||
padding-top: 20%;
|
||||
padding-top: 20%;
|
||||
}
|
||||
|
||||
.card-3 .card-body {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
min-height: 30vh;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
min-height: 30vh;
|
||||
|
||||
.cardVieAll {
|
||||
margin-top: auto;
|
||||
}
|
||||
.cardVieAll {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
@import "node_modules/govuk-frontend/govuk/all";
|
||||
//@import "prevent-training/_application";
|
||||
|
||||
// Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you
|
||||
@import "welshgov/_variables";
|
||||
@import "welshgov/_application";
|
||||
@import "welshgov/application_old";
|
||||
|
||||
// global styles for <a> and <p> tags
|
||||
$govuk-global-styles: true;
|
||||
@@ -23,6 +26,3 @@ $govuk-assets-path: "/govuk/assets/";
|
||||
|
||||
// Components that aren't in Frontend
|
||||
@import "components/cookie-banner";
|
||||
|
||||
// Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you
|
||||
@import "prevent-training/application";
|
||||
|
||||
@@ -1,11 +1,89 @@
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
*,
|
||||
.govuk-body-s {
|
||||
.govuk-body,
|
||||
.govuk-body-s,
|
||||
.govuk-body-m,
|
||||
.govuk-heading-xl,
|
||||
.govuk-heading-l,
|
||||
.govuk-heading-m,
|
||||
.govuk-header-l,
|
||||
.govuk-header-m,
|
||||
.govuk-header__link,
|
||||
.govuk-button,
|
||||
.govuk-label,
|
||||
.govuk-select,
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
a {
|
||||
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
|
||||
}
|
||||
.govuk-header {
|
||||
background-color: #323232;
|
||||
}
|
||||
|
||||
.govuk-button {
|
||||
background-color: $red;
|
||||
|
||||
&.govuk-button--secondary {
|
||||
background-color: $white;
|
||||
color: $red;
|
||||
border: 1px solid red;
|
||||
|
||||
&:hover {
|
||||
background-color: $red;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-button:hover {
|
||||
background-color: $lightred;
|
||||
}
|
||||
|
||||
.sharebar {
|
||||
background: #e5e5e5;
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.sharebar__components.container-fluid {
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 60px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.btn--arrow-up a {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id=%22Layer_1%22 data-name=%22Layer 1%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%22159.5%22 height=%22102.4%22 viewBox=%220 0 159.5 102.4%22%3E%3Ctitle%3Eblack-arrow-up%3C/title%3E%3Cpath d=%22M159.5,79.8,79.8,0,0,79.8l22.6,22.6L79.7,45.3l57.1,57.1Z%22/%3E%3C/svg%3E");
|
||||
background-size: 18px 13px;
|
||||
background-position: 10px center;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 36px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.btn--outlined a {
|
||||
text-decoration: none;
|
||||
color: #323232;
|
||||
background: none;
|
||||
padding: 12px;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
border: 1px solid #999999;
|
||||
line-height: 17px;
|
||||
line-height: 1.0625rem;
|
||||
}
|
||||
|
||||
.languageSwitch {
|
||||
margin-top: 15px;
|
||||
text-align: right;
|
||||
@@ -16,7 +94,18 @@
|
||||
top: 10px;
|
||||
right: -10px;
|
||||
}
|
||||
a.govuk-header__link {
|
||||
background-color: black;
|
||||
padding: 10px;
|
||||
}
|
||||
a.govuk-header__link:focus {
|
||||
background-color: black;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
float: left;
|
||||
margin: 0;
|
||||
@@ -31,11 +120,19 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
.govuk-header__logo {
|
||||
width: 22% !important;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.govuk-footer {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
#footer_logo {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
//gov.wales pallete variables
|
||||
|
||||
$white: #ffffff;
|
||||
$red: #aa1111;
|
||||
$lightred: #d81f1f;
|
||||
|
||||
$lightgrey_dark: #cccccc;
|
||||
$lightgrey_mid: #dddddd;
|
||||
$lightgrey_semi: #e5e5e5;
|
||||
$lightgrey_light: #eeeeee;
|
||||
$lightgrey_offwhite: #f1f1f1;
|
||||
Reference in New Issue
Block a user