diff --git a/app/assets/stylesheets/_cookie-banner.scss b/app/assets/stylesheets/_cookie-banner.scss deleted file mode 100644 index 78fbb8de..00000000 --- a/app/assets/stylesheets/_cookie-banner.scss +++ /dev/null @@ -1,55 +0,0 @@ -.app-cookie-banner { - @include govuk-font(16); - @include govuk-text-colour; - - box-sizing: border-box; - width: 100%; - - padding-top: govuk-spacing(3); - padding-right: govuk-spacing(3); - padding-bottom: govuk-spacing(3); - padding-left: govuk-spacing(3); - background-color: lighten(desaturate(govuk-colour("light-blue"), 8.46), 42.55); -} - -.app-cookie-banner__message { - margin: 0; - @include govuk-width-container; -} - -@include govuk-media-query($media-type: print) { - .govuk-cookie-banner { - display: none !important; - } -} - -.govuk-cookie-banner { - font-family: "GDS Transport", arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - @include govuk-font(16); - @include govuk-text-colour; - padding-top: 20px; - border-bottom: 10px solid transparent; - background-color: #f3f2f1; - - .govuk-cookie-banner__content { - p { - @include govuk-font(19); - } - } - - a.govuk-link { - @include govuk-font(19); - line-height: 2em !important; - } - - .govuk-button-group .govuk-button { - margin-right: 15px; - } - - form { - display: inline-block; - } - -} diff --git a/app/assets/stylesheets/_eyfs-mobile-navigation.scss b/app/assets/stylesheets/_eyfs-mobile-navigation.scss deleted file mode 100644 index 2a65136b..00000000 --- a/app/assets/stylesheets/_eyfs-mobile-navigation.scss +++ /dev/null @@ -1,340 +0,0 @@ - // div.govuk-header__content button.govuk-header__menu-button { - // cursor: pointer; - // font-size: 20px; - // } - - // .eyfs-menu-button--border{ - // border: 3px solid #fff; - // } - - // .app-mobile-nav { - // border-bottom: 1px solid #b1b4b6; - // color: #fff; - // } - // .app-mobile-nav--active { - // display:block; - // } - // @media (min-width: 50.0625em) { - // .app-subnav--mobile { - // display:none; - // } - // .js-enabled .govuk-header__menu-button { - // display: none; - // } - // .app-mobile-nav { - // display: none; - // } - // } - - // @media (max-width: 40.0525em) { - // .no-js .app-mobile-nav { - // display:block - // } - // } - // .app-mobile-nav__list { - // margin:0; - // padding:0; - // list-style:none; - // } - // .app-mobile-subnav-section { - // display:none; - // .app-mobile-nav__subnav-item { - // //padding: 12px 0px; - // } - // } - // .app-mobile-nav-subnav-toggler { - // position:relative; - // } - - // .learning-section-mobile-nav { - // position: relative; - // padding: 16px 0px 16px 15px; - // background-color: #f8f8f8; - // } - - // .app-mobile-nav-subnav-toggler__link { - // font-weight:700; - // font-size:19px; - // font-size:1.1875rem - // } - - // .app-mobile-nav-subnav-toggler__link:not(:focus):hover { - // color:#1d70b8 - // } - // .app-mobile-nav-subnav-toggler__link, - // .app-mobile-nav__link { - // text-decoration:none - // } - // .app-mobile-nav-subnav-toggler__link:after, - // .app-mobile-nav__link:after { - // content:""; - // position:absolute; - // top:0; - // right:0; - // bottom:0; - // left:0 - // } - // .app-mobile-nav__subnav { - // display:none; - // margin-top: 4px; - // } - // .js-enabled .app-mobile-nav__subnav--active { - // display:block - // } - // .app-mobile-nav__subnav-item { - // display:block; - // position:relative; - // padding:12px 20px; - // background-color: #ffffff; - // } - // .app-mobile-nav__subnav-item--current { - // padding-left:16px; - // border-left:4px solid #1d70b8; - // } - // .app-mobile-nav__theme { - // font-family:"GDS Transport",arial,sans-serif; - // -webkit-font-smoothing:antialiased; - // -moz-osx-font-smoothing:grayscale; - // margin:0; - // padding:20px 20px 5px 20px; - // color:#505a5f; - // font-size:19px; - // font-size:1.1875rem; - // font-weight:normal - // } - // @media print { - // .app-mobile-nav__theme { - // font-family:sans-serif - // } - // } - // .app-navigation { - // font-family:"GDS Transport",arial,sans-serif; - // -webkit-font-smoothing:antialiased; - // -moz-osx-font-smoothing:grayscale; - // font-weight:700; - // font-size:16px; - // font-size:1rem; - // line-height:1.25; - // -webkit-box-sizing:border-box; - // box-sizing:border-box; - // width:100%; - // background-color:#f8f8f8 - // } - // @media print { - // .app-navigation { - // font-family:sans-serif - // } - // } - // @media (min-width: 40.0625em) { - // .app-navigation { - // font-size:19px; - // font-size:1.1875rem; - // line-height:1.31579 - // } - // } - // @media print { - // .app-navigation { - // font-size:14pt; - // line-height:1.15 - // } - // } - // @media (max-width: 40.0525em) { - // .app-navigation { - // display:none - // } - // } - // .app-navigation__list { - // position:relative; - // left:-15px; - // margin:0; - // padding:0; - // list-style:none - // } - // .app-navigation__list-item { - // -webkit-box-sizing:border-box; - // box-sizing:border-box; - // display:block; - // position:relative; - // height:50px; - // padding:0 15px; - // float:left; - // line-height:50px - // } - // .app-navigation__list-item--current { - // border-bottom:4px solid #1d70b8 - // } - // .app-navigation__link { - // font-weight:700; - // text-decoration:none - // } - // .app-navigation__link:not(:focus):visited { - // color:#1d70b8 - // } - // .app-navigation__link:not(:focus):hover { - // color:#1d70b8; - // text-decoration:underline - // } - // .app-navigation__link:after { - // content:""; - // position:absolute; - // top:0; - // right:0; - // bottom:0; - // left:0 - // } - // .app-navigation__list-item--current .app-navigation__link:hover { - // text-decoration:none - // } - // .app-options { - // margin-bottom:10px; - // padding:0 - // } - // @media (min-width: 40.0625em) { - // .app-options { - // margin-bottom:15px - // } - // } - // .app-options__table { - // max-width:38em - // } - // @media (min-width: 20em) { - // .app-options__table { - // table-layout:fixed - // } - // .app-options__table .govuk-table__header, - // .app-options__table .govuk-table__cell { - // padding-right:10px; - // word-break:break-word - // } - // } - // @media (min-width: 20em) { - // .app-options__limit-table-cell { - // width:29% - // } - // } - // .app-page-navigation { - // margin-top:0; - // margin-bottom:30px; - // padding-left:20px; - // list-style:none - // } - // .app-page-navigation__item { - // font-family:"GDS Transport",arial,sans-serif; - // -webkit-font-smoothing:antialiased; - // -moz-osx-font-smoothing:grayscale; - // font-weight:400; - // font-size:16px; - // font-size:1rem; - // line-height:1.25; - // margin-bottom:10px - // } - // @media print { - // .app-page-navigation__item { - // font-family:sans-serif - // } - // } - // @media (min-width: 40.0625em) { - // .app-page-navigation__item { - // font-size:19px; - // font-size:1.1875rem; - // line-height:1.31579 - // } - // } - // @media print { - // .app-page-navigation__item { - // font-size:14pt; - // line-height:1.15 - // } - // } - // @media (min-width: 40.0625em) { - // .app-page-navigation__item { - // display:none - // } - // } - // .app-page-navigation__item::before { - // content:"\2014 "; - // margin-left:-20px; - // padding-right:5px - // } - // @media (min-width: 40.0625em) { - // .app-pane.app-pane--enabled { - // display:-webkit-box; - // display:-ms-flexbox; - // display:flex; - // -webkit-box-orient:vertical; - // -webkit-box-direction:normal; - // -ms-flex-direction:column; - // flex-direction:column - // } - // } - // @media (min-width: 40.0625em) { - // .app-pane__body { - // display:-webkit-box; - // display:-ms-flexbox; - // display:flex; - // position:relative; - // min-height:0; - // overflow:inherit - // } - // } - // @media (min-width: 72.5em) { - // .app-pane__body { - // width:100% - // } - // } - // @media (max-width: 40.0525em) { - // .app-pane__subnav { - // display:none - // } - // } - // @media (min-width: 40.0625em) { - // .app-pane__subnav { - // width:210px; - // -webkit-box-flex:0; - // -ms-flex:0 0 auto; - // flex:0 0 auto - // } - // } - // @media (min-width: 48.0625em) { - // .app-pane__subnav { - // width:260px - // } - // } - // @media (min-width: 40.0625em) { - // .app-pane__subnav-mobile-overview { - // display:none - // } - // } - // @media (min-width: 40.0625em) { - // .app-pane__content { - // display:-webkit-box; - // display:-ms-flexbox; - // display:flex; - // min-width:0; - // -webkit-box-flex:1; - // -ms-flex:1 1 100%; - // flex:1 1 100%; - // -webkit-box-orient:vertical; - // -webkit-box-direction:normal; - // -ms-flex-direction:column; - // flex-direction:column - // } - // } - // .no-flexbox.no-flexboxtweener .app-pane { - // height:auto; - // overflow:visible - // } - // .no-flexbox.no-flexboxtweener .app-pane:after { - // content:""; - // display:block; - // clear:both - // } - // .no-flexbox.no-flexboxtweener .app-pane__body { - // display:block - // } - // .no-flexbox.no-flexboxtweener .app-pane__subnav { - // width:260px; - // float:left; - // overflow-x:hidden; - // border-right:0 - // } diff --git a/app/assets/stylesheets/_flash.scss b/app/assets/stylesheets/_flash.scss deleted file mode 100644 index c1cd8d8a..00000000 --- a/app/assets/stylesheets/_flash.scss +++ /dev/null @@ -1,8 +0,0 @@ -.govuk-success-summary { - border: 5px solid #00703c; -} - -.govuk-success-summary { - padding: 20px; - margin-bottom: 50px; -} \ No newline at end of file diff --git a/app/assets/stylesheets/_links.scss b/app/assets/stylesheets/_links.scss deleted file mode 100644 index e0143759..00000000 --- a/app/assets/stylesheets/_links.scss +++ /dev/null @@ -1,15 +0,0 @@ -.govuk-link, a, .app-step-nav-header__title, .app-step-nav-related__link { - font-family: "GDS Transport", arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.govuk-breadcrumbs li { - font-size: 16px; -} - -@media (max-width: 40.0525em) { - .govuk-breadcrumbs li { - font-size: 14px; - } -} diff --git a/app/assets/stylesheets/_subnav.scss b/app/assets/stylesheets/_subnav.scss deleted file mode 100644 index 39ea274f..00000000 --- a/app/assets/stylesheets/_subnav.scss +++ /dev/null @@ -1,143 +0,0 @@ -// .app-body-wrapper { -// display: flex; -// } - -// .app-pane__subnav { -// width: 260px; -// margin-left: -30px; -// } - -// .app-pane__content { -// display: flex; -// min-width: 0; -// flex: 1 1 100%; -// flex-direction: column; -// } - -// .app-subnav { -// // Since the back to top link is outside the flow of the document we need to create a space for it. -// // This number is magic and was determined by manually judging the visual spacing. -// margin-bottom: 100px; -// padding: 0 govuk-spacing(3) 0 0; -// @include govuk-font(16); - -// // @include govuk-media-query($from: mobile) { -// // color: red; -// // } -// @include govuk-media-query($until: tablet) { -// display: none; -// } - -// } - -// .app-subnav--mobile { -// display: block; - -// @include govuk-media-query($from: tablet) { -// display:none; -// } -// } - -// .js-enabled .app-subnav--mobile { -// display: none; -// } - -// .js-enabled .app-mobile-nav--active.app-subnav--mobile { -// display: block; - -// @include govuk-media-query($from: tablet) { -// display:none; -// } -// } - -// .app-subnav--mobile .app-subnav__section { - -// display: none; - -// } - -// .app-subnav--mobile .app-subnav__link.is-active + .app-subnav__section { - -// display: block; - -// } - -// .js-app-mobile-nav-toggler.is-active::after { -// display: inline-block; -// width: 0; -// height: 0; -// border-style: solid; -// border-color: transparent; -// -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -// clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -// border-width: 0 5px 8.66px 5px; -// border-bottom-color: inherit; -// border-bottom-color: currentColor; -// } - -// .app-subnav__section { -// margin: govuk-spacing(2) 0 govuk-spacing(4); -// padding: 0; -// list-style-type: none; -// } - -// .app-subnav__link { -// padding: 2px 0; -// text-decoration: none; -// display: block; - -// &:not(:focus):hover { -// color: $govuk-link-colour; -// text-decoration: underline; -// } - -// } - -// .app-subnav__section-item { -// margin-bottom: govuk-spacing(1); -// padding-top: govuk-spacing(1); -// padding-bottom: govuk-spacing(1); -// } - -// .app-subnav__section-item--current { -// $_current-indicator-width: 4px; -// margin-left: -(govuk-spacing(2) + $_current-indicator-width); -// padding-left: govuk-spacing(2); -// border-left: $_current-indicator-width solid govuk-colour("blue"); -// background-color: govuk-colour("white"); -// } - -// .app-subnav__section-item--current .app-subnav__link { -// font-weight: bold; -// } - -// .app-subnav__section--nested { -// margin-top: govuk-spacing(2); -// margin-bottom: 0; -// padding-left: govuk-spacing(4); -// } - -// .app-subnav__section--nested .app-subnav__section-item::before { -// content: "—"; -// margin-left: -(govuk-spacing(4)); -// color: govuk-colour("dark-grey"); -// } - -// .app-subnav__section--nested .app-subnav__link { -// padding-left: 0; -// font-weight: normal; - -// } - -// .app-subnav__theme { -// margin: 0; -// font-size: govuk-px-to-rem(19px); -// font-weight: bold; -// display: inline; - -// &:first-of-type { - -// padding-top: 0; -// } - -// } diff --git a/app/assets/stylesheets/dfe/about.scss b/app/assets/stylesheets/about.scss similarity index 100% rename from app/assets/stylesheets/dfe/about.scss rename to app/assets/stylesheets/about.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index f8739948..856f80fb 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -25,24 +25,23 @@ $govuk-page-width: 1200px; $light-blue: tint($department-for-education-websafe, 90%); @import 'dfe-header'; -@import 'hfeyp-v2'; +// @import 'hfeyp-v2'; @import 'video'; @import 'page-contents'; -@import '_metadata'; - -@import 'dfe/print'; -@import 'dfe/about'; -@import 'dfe/card'; -@import 'dfe/side-nav'; - -@import '_subnav'; -@import '_eyfs-header'; -@import '_eyfs-mobile-navigation'; -@import '_cookie-banner'; -@import '_links'; -@import '_flash'; - +@import 'metadata'; + +@import 'print'; +// @import 'about'; +@import 'card'; +@import 'side-nav'; +@import 'other-resources'; +@import 'cta'; + +@import 'subnav'; +// @import 'eyfs-header'; +// @import 'eyfs-mobile-navigation'; +@import 'links'; * { font-family: diff --git a/app/assets/stylesheets/dfe/card.scss b/app/assets/stylesheets/card.scss similarity index 82% rename from app/assets/stylesheets/dfe/card.scss rename to app/assets/stylesheets/card.scss index 6c81136c..4f86d17a 100644 --- a/app/assets/stylesheets/dfe/card.scss +++ b/app/assets/stylesheets/card.scss @@ -140,3 +140,34 @@ } } } + +.hf-card-container { + background-color: govuk-colour("light-grey"); + border-bottom: 3px solid #003A69; +} + +.hf-card-details { + padding: govuk-spacing(6); + min-height: 190px; +} + +.hf-card a { + text-decoration: none; +} + +.hf-card a .hf-card-details p { + color: $govuk-text-colour; +} + +.hf-card a .hf-card-details h3 { + color: $govuk-link-colour; +} + +a:hover .hf-card-container { + background-color: #003A69; +} + +a:hover .hf-card-container .hf-card-details p, +a:hover .hf-card-container .hf-card-details h3 { + color: govuk-colour("white") +} diff --git a/app/assets/stylesheets/cta.scss b/app/assets/stylesheets/cta.scss new file mode 100644 index 00000000..0b4c21ff --- /dev/null +++ b/app/assets/stylesheets/cta.scss @@ -0,0 +1,36 @@ +.cta-banner { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #ebf2f6; +} + +.cta-banner-text { + padding-left: 40px; + padding-right: 40px; +} + +.cta-banner-img { + width: 40%; + display: flex; +} + +@media (max-width: 40.0525em) { + .hf-card { + margin-bottom: govuk-spacing(6); + } + + .govuk-grid-row .govuk-grid-column-one-third:last-child .hf-card { + margin-bottom: 0; + } + + .hf-cta-block { + margin-bottom: govuk-spacing(6); + } +} + +.info-notice { + border-left: 10px solid #b1b4b6; + padding: 1em 0 1em 1em; + margin: 2em 0; +} diff --git a/app/assets/stylesheets/_eyfs-header.scss b/app/assets/stylesheets/eyfs-header.scss similarity index 100% rename from app/assets/stylesheets/_eyfs-header.scss rename to app/assets/stylesheets/eyfs-header.scss diff --git a/app/assets/stylesheets/eyfs-mobile-navigation.scss b/app/assets/stylesheets/eyfs-mobile-navigation.scss new file mode 100644 index 00000000..748c130e --- /dev/null +++ b/app/assets/stylesheets/eyfs-mobile-navigation.scss @@ -0,0 +1,340 @@ + div.govuk-header__content button.govuk-header__menu-button { + cursor: pointer; + font-size: 20px; + } + + .eyfs-menu-button--border{ + border: 3px solid #fff; + } + + .app-mobile-nav { + border-bottom: 1px solid #b1b4b6; + color: #fff; + } + .app-mobile-nav--active { + display:block; + } + @media (min-width: 50.0625em) { + .app-subnav--mobile { + display:none; + } + .js-enabled .govuk-header__menu-button { + display: none; + } + .app-mobile-nav { + display: none; + } + } + + @media (max-width: 40.0525em) { + .no-js .app-mobile-nav { + display:block + } + } + .app-mobile-nav__list { + margin:0; + padding:0; + list-style:none; + } + .app-mobile-subnav-section { + display:none; + .app-mobile-nav__subnav-item { + //padding: 12px 0px; + } + } + .app-mobile-nav-subnav-toggler { + position:relative; + } + + .learning-section-mobile-nav { + position: relative; + padding: 16px 0px 16px 15px; + background-color: #f8f8f8; + } + + .app-mobile-nav-subnav-toggler__link { + font-weight:700; + font-size:19px; + font-size:1.1875rem + } + + .app-mobile-nav-subnav-toggler__link:not(:focus):hover { + color:#1d70b8 + } + .app-mobile-nav-subnav-toggler__link, + .app-mobile-nav__link { + text-decoration:none + } + .app-mobile-nav-subnav-toggler__link:after, + .app-mobile-nav__link:after { + content:""; + position:absolute; + top:0; + right:0; + bottom:0; + left:0 + } + .app-mobile-nav__subnav { + display:none; + margin-top: 4px; + } + .js-enabled .app-mobile-nav__subnav--active { + display:block + } + .app-mobile-nav__subnav-item { + display:block; + position:relative; + padding:12px 20px; + background-color: #ffffff; + } + .app-mobile-nav__subnav-item--current { + padding-left:16px; + border-left:4px solid #1d70b8; + } + .app-mobile-nav__theme { + font-family:"GDS Transport",arial,sans-serif; + -webkit-font-smoothing:antialiased; + -moz-osx-font-smoothing:grayscale; + margin:0; + padding:20px 20px 5px 20px; + color:#505a5f; + font-size:19px; + font-size:1.1875rem; + font-weight:normal + } + @media print { + .app-mobile-nav__theme { + font-family:sans-serif + } + } + .app-navigation { + font-family:"GDS Transport",arial,sans-serif; + -webkit-font-smoothing:antialiased; + -moz-osx-font-smoothing:grayscale; + font-weight:700; + font-size:16px; + font-size:1rem; + line-height:1.25; + -webkit-box-sizing:border-box; + box-sizing:border-box; + width:100%; + background-color:#f8f8f8 + } + @media print { + .app-navigation { + font-family:sans-serif + } + } + @media (min-width: 40.0625em) { + .app-navigation { + font-size:19px; + font-size:1.1875rem; + line-height:1.31579 + } + } + @media print { + .app-navigation { + font-size:14pt; + line-height:1.15 + } + } + @media (max-width: 40.0525em) { + .app-navigation { + display:none + } + } + .app-navigation__list { + position:relative; + left:-15px; + margin:0; + padding:0; + list-style:none + } + .app-navigation__list-item { + -webkit-box-sizing:border-box; + box-sizing:border-box; + display:block; + position:relative; + height:50px; + padding:0 15px; + float:left; + line-height:50px + } + .app-navigation__list-item--current { + border-bottom:4px solid #1d70b8 + } + .app-navigation__link { + font-weight:700; + text-decoration:none + } + .app-navigation__link:not(:focus):visited { + color:#1d70b8 + } + .app-navigation__link:not(:focus):hover { + color:#1d70b8; + text-decoration:underline + } + .app-navigation__link:after { + content:""; + position:absolute; + top:0; + right:0; + bottom:0; + left:0 + } + .app-navigation__list-item--current .app-navigation__link:hover { + text-decoration:none + } + .app-options { + margin-bottom:10px; + padding:0 + } + @media (min-width: 40.0625em) { + .app-options { + margin-bottom:15px + } + } + .app-options__table { + max-width:38em + } + @media (min-width: 20em) { + .app-options__table { + table-layout:fixed + } + .app-options__table .govuk-table__header, + .app-options__table .govuk-table__cell { + padding-right:10px; + word-break:break-word + } + } + @media (min-width: 20em) { + .app-options__limit-table-cell { + width:29% + } + } + .app-page-navigation { + margin-top:0; + margin-bottom:30px; + padding-left:20px; + list-style:none + } + .app-page-navigation__item { + font-family:"GDS Transport",arial,sans-serif; + -webkit-font-smoothing:antialiased; + -moz-osx-font-smoothing:grayscale; + font-weight:400; + font-size:16px; + font-size:1rem; + line-height:1.25; + margin-bottom:10px + } + @media print { + .app-page-navigation__item { + font-family:sans-serif + } + } + @media (min-width: 40.0625em) { + .app-page-navigation__item { + font-size:19px; + font-size:1.1875rem; + line-height:1.31579 + } + } + @media print { + .app-page-navigation__item { + font-size:14pt; + line-height:1.15 + } + } + @media (min-width: 40.0625em) { + .app-page-navigation__item { + display:none + } + } + .app-page-navigation__item::before { + content:"\2014 "; + margin-left:-20px; + padding-right:5px + } + @media (min-width: 40.0625em) { + .app-pane.app-pane--enabled { + display:-webkit-box; + display:-ms-flexbox; + display:flex; + -webkit-box-orient:vertical; + -webkit-box-direction:normal; + -ms-flex-direction:column; + flex-direction:column + } + } + @media (min-width: 40.0625em) { + .app-pane__body { + display:-webkit-box; + display:-ms-flexbox; + display:flex; + position:relative; + min-height:0; + overflow:inherit + } + } + @media (min-width: 72.5em) { + .app-pane__body { + width:100% + } + } + @media (max-width: 40.0525em) { + .app-pane__subnav { + display:none + } + } + @media (min-width: 40.0625em) { + .app-pane__subnav { + width:210px; + -webkit-box-flex:0; + -ms-flex:0 0 auto; + flex:0 0 auto + } + } + @media (min-width: 48.0625em) { + .app-pane__subnav { + width:260px + } + } + @media (min-width: 40.0625em) { + .app-pane__subnav-mobile-overview { + display:none + } + } + @media (min-width: 40.0625em) { + .app-pane__content { + display:-webkit-box; + display:-ms-flexbox; + display:flex; + min-width:0; + -webkit-box-flex:1; + -ms-flex:1 1 100%; + flex:1 1 100%; + -webkit-box-orient:vertical; + -webkit-box-direction:normal; + -ms-flex-direction:column; + flex-direction:column + } + } + .no-flexbox.no-flexboxtweener .app-pane { + height:auto; + overflow:visible + } + .no-flexbox.no-flexboxtweener .app-pane:after { + content:""; + display:block; + clear:both + } + .no-flexbox.no-flexboxtweener .app-pane__body { + display:block + } + .no-flexbox.no-flexboxtweener .app-pane__subnav { + width:260px; + float:left; + overflow-x:hidden; + border-right:0 + } diff --git a/app/assets/stylesheets/hfeyp-v2.scss b/app/assets/stylesheets/hfeyp-v2.scss index e8f6cac6..f89bd6d5 100644 --- a/app/assets/stylesheets/hfeyp-v2.scss +++ b/app/assets/stylesheets/hfeyp-v2.scss @@ -1,437 +1,11 @@ -.hf-card-container { - background-color: govuk-colour("light-grey"); - border-bottom: 3px solid #003A69; -} +// .content-with-side-menu { +// padding-left: 30px; +// } -.hf-card-details { - padding: govuk-spacing(6); - min-height: 190px; -} +// .hf-tab-width { +// width: 19% +// } -.hf-card a { - text-decoration: none; -} - -.hf-card a .hf-card-details p { - color: $govuk-text-colour; -} - -.hf-card a .hf-card-details h3 { - color: $govuk-link-colour; -} - -a:hover .hf-card-container { - background-color: #003A69; -} - -a:hover .hf-card-container .hf-card-details p, -a:hover .hf-card-container .hf-card-details h3 { - color: govuk-colour("white") -} - -.hf-other { - padding-top: govuk-spacing(9); - padding-bottom: govuk-spacing(9); -} - -.hf-ctas { - padding-top: govuk-spacing(9); - padding-bottom: govuk-spacing(4); -} - -.hf-second-color { - color: $govuk-secondary-text-colour -} - -.hf-cta-block { - display: flex; - column-gap: 20px; -} - -.hf-icon { - background: #ebf2f6; - display: flex; - padding: 10px; - border-radius: 50%; -} - -.hf-icon path { - fill: #347CA9; -} - - -.cta-banner { - display: flex; - justify-content: space-between; - align-items: center; - background-color: #ebf2f6; -} - -.cta-banner-text { - padding-left: 40px; - padding-right: 40px; -} - -.cta-banner-img { - width: 40%; - display: flex; -} - -.chevron-card-list { - list-style: none; - margin: 0 -15px; - padding: 0 -} - -.chevron-card { - border-top: 1px solid #b1b4b6; - margin: 0 15px; - padding: 5px 0 20px 0 -} - -.chevron-card:first-child { - border-top: none; - padding-top: 0 -} - -.chevron-card:first-child .chevron-card__wrapper { - padding-top: 0 -} - -@media print { - .chevron-card:first-child .chevron-card__wrapper { - padding-top: 19px - } -} - -.chevron-card__wrapper { - padding: 19px 0 4px; - position: relative -} - -@media (max-width: 40.0525em) { - .hf-card { - margin-bottom: govuk-spacing(6); - } - - .govuk-grid-row .govuk-grid-column-one-third:last-child .hf-card { - margin-bottom: 0; - } - - .hf-cta-block { - margin-bottom: govuk-spacing(6); - } -} - -.chevron-card__description { - margin: 0 30px 0 0 -} - -.chevron-card__link::after { - bottom: 0; - content: ""; - display: block; - left: 0; - position: absolute; - right: 0; - top: 0 -} - -.chevron-card__link::before { - border-right: 3px solid #1d70b8; - border-top: 3px solid #1d70b8; - content: ""; - display: block; - height: 7px; - position: absolute; - right: 5px; - top: 50%; - margin-top: 5px; - -webkit-transform: translateY(0) rotate(45deg) scale(1); - -ms-transform: translateY(0) rotate(45deg) scale(1); - transform: translateY(0) rotate(45deg) scale(1); - width: 7px -} - -.chevron-card__link:hover::before { - border-color: #003078 -} - -.chevron-card__link:focus::before { - border-color: #0b0c0c -} - -.govspeak-embed-container { - position: relative; - overflow: hidden; - width: 100%; - padding-top: 66.6%; - margin-bottom: govuk-spacing(9); -} - -.govspeak-embed-container .govspeak-embed-video { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - width: 100%; - height: 100% -} - -.app-back-to-top { - margin-top: govuk-spacing(9); -} - -.app-back-to-top__icon { - display: inline-block; - width: .8em; - height: 1em; - margin-top: -5px; - margin-right: 10px; - vertical-align: middle; -} - -.content-with-side-menu { - padding-left: 30px; -} - -@media (max-width: 40.0525em) { - .content-with-side-menu { - padding-left: 0px; - } - - .mob-section { - background: #f1f2f350; - margin-top: -20px; - padding: 20px 15px 0px; - border-bottom: 1px solid #ccc; - } - - .contents-on-page { - padding: 20px; - } - - .hf-card-details { - padding: govuk-spacing(5); - min-height: 170px; - } - - - .cta-banner { - flex-direction: column; - } - - .cta-banner-img { - width: 100%; - order: 1; - } - - .cta-banner-text { - order: 2; - padding: 20px; - } - - .table-scroll { - overflow: scroll; - } - -} - -.info-notice { - border-left: 10px solid #b1b4b6; - padding: 1em 0 1em 1em; - margin: 2em 0; -} - -.hf-tab-width { - width: 19% -} - -th.govuk-table__header { - background: #ebf2f6; -} - - -.gem-c-attachment-link__abbr { - text-decoration: none; - cursor: help -} - -.gem-c-attachment { - font-family: "GDS Transport", arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-size: 16px; - font-size: 1rem; - line-height: 1.25; - position: relative -} - -@media print { - .gem-c-attachment { - font-family: sans-serif - } -} - -@media (min-width: 40.0625em) { - .gem-c-attachment { - font-size: 19px; - font-size: 1.1875rem; - line-height: 1.3157894737 - } - - .gem-c-attachment__thumbnail { - position: relative; - width: 140px; - height: auto; - max-width: 140px; - margin-right: 20px; - margin-bottom: 15px; - padding: 5px; - float: left - } -} - -@media print { - .gem-c-attachment { - font-size: 14pt; - line-height: 1.15 - } -} - -.gem-c-attachment:after { - content: ""; - display: block; - clear: both -} - -.gem-c-attachment .govuk-details { - margin: 15px 0 -} - -.gem-c-attachment__thumbnail { - position: relative; - width: auto; - margin-right: 25px; - margin-bottom: 15px; - padding: 5px; - float: left -} - -.gem-c-attachment__thumbnail-image { - display: block; - max-width: 280px; - width: 140px; - height: auto; - border: rgba(11, 12, 12, 0.1); - outline: 5px solid rgba(11, 12, 12, 0.1); - background: #fff; - box-shadow: 0 2px 2px rgba(11, 12, 12, 0.4); - fill: #b1b4b6; - stroke: #b1b4b6 -} - -.gem-c-attachment__details { - padding-left: 134px -} - -.gem-c-attachment__details .gem-c-detailss { - word-break: break-word; - word-wrap: break-word -} - -.gem-c-attachment__title { - font-family: "GDS Transport", arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-size: 18px; - font-size: 1.125rem; - line-height: 1.1111111111; - margin: 0 0 15px -} - -@media print { - .gem-c-attachment__title { - font-family: sans-serif - } -} - -@media (min-width: 40.0625em) { - .gem-c-attachment__title { - font-size: 27px; - font-size: 1.6875rem; - line-height: 1.1111111111 - } -} - -@media print { - .gem-c-attachment__title { - font-size: 18pt; - line-height: 1.15 - } -} - -.gem-c-attachment__link { - line-height: 1.29 -} - -.gem-c-attachment__metadata { - font-family: "GDS Transport", arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - font-weight: 400; - font-size: 16px; - font-size: 1rem; - line-height: 1.25; - margin: 0 0 15px; - color: #505a5f -} - -@media print { - .gem-c-attachment__metadata { - font-family: sans-serif - } -} - -@media (min-width: 40.0625em) { - .gem-c-attachment__metadata { - font-size: 19px; - font-size: 1.1875rem; - line-height: 1.3157894737 - } -} - -@media print { - .gem-c-attachment__metadata { - font-size: 14pt; - line-height: 1.15 - } -} - -.gem-c-attachment__metadata:last-of-type { - margin-bottom: 0 -} - -.gem-c-attachment__metadata .gem-c-attachment__attribute { - word-wrap: break-word; - overflow-wrap: break-word -} - -.gem-c-attachment__metadata--compact { - margin-bottom: 0 -} - -.gem-c-attachment__abbr { - text-decoration: none; - cursor: help -} - -ul li ol, -ul li ul, -ol li ul, -ol li ol { - margin-top: govuk-spacing(3); -} +// th.govuk-table__header { +// background: #ebf2f6; +// } diff --git a/app/assets/stylesheets/links.scss b/app/assets/stylesheets/links.scss new file mode 100644 index 00000000..9cefb1dd --- /dev/null +++ b/app/assets/stylesheets/links.scss @@ -0,0 +1,15 @@ +// .govuk-link, a, .app-step-nav-header__title, .app-step-nav-related__link { +// font-family: "GDS Transport", arial, sans-serif; +// -webkit-font-smoothing: antialiased; +// -moz-osx-font-smoothing: grayscale; +// } + +.govuk-breadcrumbs li { + font-size: 16px; +} + +@media (max-width: 40.0525em) { + .govuk-breadcrumbs li { + font-size: 14px; + } +} diff --git a/app/assets/stylesheets/_metadata.scss b/app/assets/stylesheets/metadata.scss similarity index 50% rename from app/assets/stylesheets/_metadata.scss rename to app/assets/stylesheets/metadata.scss index 11dbe62e..a0360737 100644 --- a/app/assets/stylesheets/_metadata.scss +++ b/app/assets/stylesheets/metadata.scss @@ -180,17 +180,17 @@ float: right } -// .gem-c-metadata__toggle-wrap { -// display: none -// } +.gem-c-metadata__toggle-wrap { + display: none +} .js-enabled .gem-c-metadata__toggle-wrap { display: block } -// .js-enabled .gem-c-metadata__toggle-items.js-hidden { -// display: none -// } +.js-enabled .gem-c-metadata__toggle-items.js-hidden { + display: none +} dl.gem-c-metadata__list { margin: 0; @@ -201,4 +201,180 @@ dl.gem-c-metadata__list { padding: 15px 10px 15px 20px; margin-top: 60px; border-left: 5px solid #347ca9; -} \ No newline at end of file +} + +.gem-c-attachment-link__abbr { + text-decoration: none; + cursor: help +} + +.gem-c-attachment { + font-family: "GDS Transport", arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 400; + font-size: 16px; + font-size: 1rem; + line-height: 1.25; + position: relative +} + +@media print { + .gem-c-attachment { + font-family: sans-serif + } +} + +@media (min-width: 40.0625em) { + .gem-c-attachment { + font-size: 19px; + font-size: 1.1875rem; + line-height: 1.3157894737 + } + + .gem-c-attachment__thumbnail { + position: relative; + width: 140px; + height: auto; + max-width: 140px; + margin-right: 20px; + margin-bottom: 15px; + padding: 5px; + float: left + } +} + +@media print { + .gem-c-attachment { + font-size: 14pt; + line-height: 1.15 + } +} + +.gem-c-attachment:after { + content: ""; + display: block; + clear: both +} + +.gem-c-attachment .govuk-details { + margin: 15px 0 +} + +.gem-c-attachment__thumbnail { + position: relative; + width: auto; + margin-right: 25px; + margin-bottom: 15px; + padding: 5px; + float: left +} + +.gem-c-attachment__thumbnail-image { + display: block; + max-width: 280px; + width: 140px; + height: auto; + border: rgba(11, 12, 12, 0.1); + outline: 5px solid rgba(11, 12, 12, 0.1); + background: #fff; + box-shadow: 0 2px 2px rgba(11, 12, 12, 0.4); + fill: #b1b4b6; + stroke: #b1b4b6 +} + +.gem-c-attachment__details { + padding-left: 134px +} + +.gem-c-attachment__details .gem-c-detailss { + word-break: break-word; + word-wrap: break-word +} + +.gem-c-attachment__title { + font-family: "GDS Transport", arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 400; + font-size: 18px; + font-size: 1.125rem; + line-height: 1.1111111111; + margin: 0 0 15px +} + +@media print { + .gem-c-attachment__title { + font-family: sans-serif + } +} + +@media (min-width: 40.0625em) { + .gem-c-attachment__title { + font-size: 27px; + font-size: 1.6875rem; + line-height: 1.1111111111 + } +} + +@media print { + .gem-c-attachment__title { + font-size: 18pt; + line-height: 1.15 + } +} + +.gem-c-attachment__link { + line-height: 1.29 +} + +.gem-c-attachment__metadata { + font-family: "GDS Transport", arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-weight: 400; + font-size: 16px; + font-size: 1rem; + line-height: 1.25; + margin: 0 0 15px; + color: #505a5f +} + +@media print { + .gem-c-attachment__metadata { + font-family: sans-serif + } +} + +@media (min-width: 40.0625em) { + .gem-c-attachment__metadata { + font-size: 19px; + font-size: 1.1875rem; + line-height: 1.3157894737 + } +} + +@media print { + .gem-c-attachment__metadata { + font-size: 14pt; + line-height: 1.15 + } +} + +.gem-c-attachment__metadata:last-of-type { + margin-bottom: 0 +} + +.gem-c-attachment__metadata .gem-c-attachment__attribute { + word-wrap: break-word; + overflow-wrap: break-word +} + +.gem-c-attachment__metadata--compact { + margin-bottom: 0 +} + +.gem-c-attachment__abbr { + text-decoration: none; + cursor: help +} diff --git a/app/assets/stylesheets/other-resources.scss b/app/assets/stylesheets/other-resources.scss new file mode 100644 index 00000000..be630229 --- /dev/null +++ b/app/assets/stylesheets/other-resources.scss @@ -0,0 +1,99 @@ +.hf-other { + padding-top: govuk-spacing(9); + padding-bottom: govuk-spacing(9); +} + +.hf-ctas { + padding-top: govuk-spacing(9); + padding-bottom: govuk-spacing(4); +} + +.hf-second-color { + color: $govuk-secondary-text-colour +} + +.hf-cta-block { + display: flex; + column-gap: 20px; +} + +.hf-icon { + background: #ebf2f6; + display: flex; + padding: 10px; + border-radius: 50%; +} + +.hf-icon path { + fill: #347CA9; +} + +.chevron-card-list { + list-style: none; + margin: 0 -15px; + padding: 0 +} + +.chevron-card { + border-top: 1px solid #b1b4b6; + margin: 0 15px; + padding: 5px 0 20px 0 +} + +.chevron-card:first-child { + border-top: none; + padding-top: 0 +} + +.chevron-card:first-child .chevron-card__wrapper { + padding-top: 0 +} + +@media print { + .chevron-card:first-child .chevron-card__wrapper { + padding-top: 19px + } +} + +.chevron-card__wrapper { + padding: 19px 0 4px; + position: relative +} + +.chevron-card__description { + margin: 0 30px 0 0 +} + +.chevron-card__link::after { + bottom: 0; + content: ""; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0 +} + +.chevron-card__link::before { + border-right: 3px solid #1d70b8; + border-top: 3px solid #1d70b8; + content: ""; + display: block; + height: 7px; + position: absolute; + right: 5px; + top: 50%; + margin-top: 5px; + -webkit-transform: translateY(0) rotate(45deg) scale(1); + -ms-transform: translateY(0) rotate(45deg) scale(1); + transform: translateY(0) rotate(45deg) scale(1); + width: 7px +} + +.chevron-card__link:hover::before { + border-color: #003078 +} + +.chevron-card__link:focus::before { + border-color: #0b0c0c +} diff --git a/app/assets/stylesheets/page-contents.scss b/app/assets/stylesheets/page-contents.scss index 5a32a8a4..eb35f8f3 100644 --- a/app/assets/stylesheets/page-contents.scss +++ b/app/assets/stylesheets/page-contents.scss @@ -192,3 +192,63 @@ The following was govspeak and custom kramdown for the list of page content anch width: 20px; overflow: hidden } + +@media (max-width: 40.0525em) { + .content-with-side-menu { + padding-left: 0px; + } + + .mob-section { + background: #f1f2f350; + margin-top: -20px; + padding: 20px 15px 0px; + border-bottom: 1px solid #ccc; + } + + .contents-on-page { + padding: 20px; + } + + .hf-card-details { + padding: govuk-spacing(5); + min-height: 170px; + } + + .cta-banner { + flex-direction: column; + } + + .cta-banner-img { + width: 100%; + order: 1; + } + + .cta-banner-text { + order: 2; + padding: 20px; + } + + .table-scroll { + overflow: scroll; + } +} + +.app-back-to-top { + margin-top: govuk-spacing(9); +} + +.app-back-to-top__icon { + display: inline-block; + width: .8em; + height: 1em; + margin-top: -5px; + margin-right: 10px; + vertical-align: middle; +} + +ul li ol, +ul li ul, +ol li ul, +ol li ol { + margin-top: govuk-spacing(3); +} diff --git a/app/assets/stylesheets/dfe/print.scss b/app/assets/stylesheets/print.scss similarity index 100% rename from app/assets/stylesheets/dfe/print.scss rename to app/assets/stylesheets/print.scss diff --git a/app/assets/stylesheets/dfe/side-nav.scss b/app/assets/stylesheets/side-nav.scss similarity index 100% rename from app/assets/stylesheets/dfe/side-nav.scss rename to app/assets/stylesheets/side-nav.scss diff --git a/app/assets/stylesheets/subnav.scss b/app/assets/stylesheets/subnav.scss new file mode 100644 index 00000000..0f23295a --- /dev/null +++ b/app/assets/stylesheets/subnav.scss @@ -0,0 +1,136 @@ +.app-body-wrapper { + display: flex; +} + +.app-pane__subnav { + width: 260px; + margin-left: -30px; +} + +.app-pane__content { + display: flex; + min-width: 0; + flex: 1 1 100%; + flex-direction: column; +} + +.app-subnav { + // Since the back to top link is outside the flow of the document we need to create a space for it. + // This number is magic and was determined by manually judging the visual spacing. + margin-bottom: 100px; + padding: 0 govuk-spacing(3) 0 0; + @include govuk-font(16); + + // @include govuk-media-query($from: mobile) { + // color: red; + // } + @include govuk-media-query($until: tablet) { + display: none; + } + +} + +.app-subnav--mobile { + display: block; + + @include govuk-media-query($from: tablet) { + display:none; + } +} + +.js-enabled .app-subnav--mobile { + display: none; +} + +.js-enabled .app-mobile-nav--active.app-subnav--mobile { + display: block; + + @include govuk-media-query($from: tablet) { + display:none; + } +} + +.app-subnav--mobile .app-subnav__section { + display: none; +} + +.app-subnav--mobile .app-subnav__link.is-active + .app-subnav__section { + display: block; +} + +.js-app-mobile-nav-toggler.is-active::after { +display: inline-block; +width: 0; +height: 0; +border-style: solid; +border-color: transparent; +-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); +clip-path: polygon(50% 0%, 0% 100%, 100% 100%); +border-width: 0 5px 8.66px 5px; +border-bottom-color: inherit; +border-bottom-color: currentColor; +} + +.app-subnav__section { + margin: govuk-spacing(2) 0 govuk-spacing(4); + padding: 0; + list-style-type: none; +} + +.app-subnav__link { + padding: 2px 0; + text-decoration: none; + display: block; + + &:not(:focus):hover { + color: $govuk-link-colour; + text-decoration: underline; + } + +} + +.app-subnav__section-item { + margin-bottom: govuk-spacing(1); + padding-top: govuk-spacing(1); + padding-bottom: govuk-spacing(1); +} + +.app-subnav__section-item--current { + $_current-indicator-width: 4px; + margin-left: -(govuk-spacing(2) + $_current-indicator-width); + padding-left: govuk-spacing(2); + border-left: $_current-indicator-width solid govuk-colour("blue"); + background-color: govuk-colour("white"); +} + +.app-subnav__section-item--current .app-subnav__link { + font-weight: bold; +} + +.app-subnav__section--nested { + margin-top: govuk-spacing(2); + margin-bottom: 0; + padding-left: govuk-spacing(4); +} + +.app-subnav__section--nested .app-subnav__section-item::before { + content: "—"; + margin-left: -(govuk-spacing(4)); + color: govuk-colour("dark-grey"); +} + +.app-subnav__section--nested .app-subnav__link { + padding-left: 0; + font-weight: normal; +} + +.app-subnav__theme { + margin: 0; + font-size: govuk-px-to-rem(19px); + font-weight: bold; + display: inline; + + &:first-of-type { + padding-top: 0; + } +} diff --git a/app/components/header_component.html.slim b/app/components/header_component.html.slim index f56a57e4..281b889b 100644 --- a/app/components/header_component.html.slim +++ b/app/components/header_component.html.slim @@ -6,15 +6,14 @@ = image_tag 'dfe-logo-alt.png', class: 'dfe-logo-hover', alt: 'DfE homepage' #service-name = link_to service_name, service_url, class: 'dfe-header__link dfe-header__link--service' - - if action_links.any? - #content-header.dfe-header__content.dfe-header-f-dtonly.dfe-header-f-toplinks - .dfe-header-f-top-links - ul.dfe-header__action-links - - action_links.each do |item| - = item - .dfe-header__menu - button#toggle-menu.dfe-header__menu-toggle aria-controls='header-navigation' aria-expanded='false' data-action='click->reveal#toggle' - | Menu + #content-header.dfe-header__content.dfe-header-f-dtonly.dfe-header-f-toplinks + .dfe-header-f-top-links + / ul.dfe-header__action-links + / - action_links.each do |item| + / = item + .dfe-header__menu + button#toggle-menu.dfe-header__menu-toggle aria-controls='header-navigation' aria-expanded='false' data-action='click->reveal#toggle' + | Menu - if navigation_items.any? = tag.nav(**navigation_html_attributes) do .dfe-width-container diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 41c87a46..b8d15241 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -11,6 +11,12 @@ def navigation active: item.slug == section, classes: %w[dfe-header__navigation-item], ) + + # header.with_action_link( + # text: item.title, + # href: item.path, + # options: { inverse: true } + # ) end # menu.each do |item|