cruk-pattern-library-api
Version:
CRUK Pattern Library API
1 lines • 38.3 kB
JavaScript
export default {"twig":{"breadcrumb":"{% set class = 'cr-breadcrumb' %}\n{% if hide_current %}\n {% set class = class ~ ' cr-breadcrumb--hide-current' %}\n{% endif %}\n{% if hide_top %}\n {% set class = class ~ ' cr-breadcrumb--hide-top' %}\n{% endif %}\n<nav id=\"breadcrumb\" aria-label=\"You are here\" class=\"{{ class }}\">\n <ol itemScope itemType=\"http://schema.org/BreadcrumbList\" class=\"cr-breadcrumb-nav\">\n {% for crumb in crumbs %}\n <li itemProp=\"itemListElement\" itemScope itemType=\"http://schema.org/ListItem\" aria-level=\"{{ loop.index }}\" class=\"cr-breadcrumb__item\">\n <a itemProp=\"item\" href=\"{{ crumb.href }}\" class=\"cr-breadcrumb__link\">{{ crumb.label }}</a>\n <span></span>\n <meta itemProp=\"position\" content=\"{{ loop.index }}\" />\n </li>\n {% endfor %}\n </ol>\n</nav>\n","collapsible":"<div class=\"cr-collapsible\">\n <input id=\"cr-collapsible__input-{{ title|replace({' ': ''}) }}\" class=\"cr-collapsible__input\" type=\"checkbox\">\n <label htmlFor=\"cr-collapsible__input-{{ title|replace({' ': ''}) }}\" class=\"cr-collapsible__heading-button\">\n <h2 class=\"cr-collapsible__heading\">\n {{ title }}\n </h2>\n </label>\n <div class=\"cr-collapsible__content\">\n {{ content|raw }}\n </div>\n</div>\n","cta.link":"<a class=\"cr-cta--link\" href=\"{{ href }}\">{{ text }}</a>\n","divider":"<hr class=\"cr-divider\" />\n","cta.primary":"<a class=\"cr-cta--primary\" href=\"{{ href }}\">{{ text }}</a>\n","cta.print":"<button class=\"cr-cta--print\">{{ text }}</button>\n","cta.secondary":"<a class=\"cr-cta--secondary\" href=\"{{ href }}\">{{ text }}</a>\n","header.h2":"<h2 class=\"cr-heading-pattern\">{{ text }}</h2>\n","footer":"<footer class=\"cr-footer\" role=\"contentinfo\">\n <div class=\"footer-links\">\n <div class=\"footer-links__list\">\n <h2>Speak to a nurse</h2>\n <ul>\n <li><a href=\"https://www.cancerresearchuk.org/about-cancer/utilities/contact-us/send-a-question/?secure=true\">Ask one of our nurses a question</a></li>\n <li><a href=\"tel://0808 800 4040\">Call 0808 800 4040</a></li>\n </ul>\n </div>\n <div class=\"footer-links__list\">\n <h2>Quick links</h2>\n <ul class=\"links\">\n <li class=\"0 first\"><a href=\"https://www.cancerresearchuk.org/get-involved/find-a-shop\">Find local shops</a></li>\n <li class=\"1\"><a href=\"https://shop.cancerresearchuk.org/?utm_source=cruk_footer\">Shop online</a></li>\n <li class=\"2\"><a href=\"https://www.cancerresearchuk.org/about-us/contact-us\">Contact us</a></li>\n <li class=\"3 last\"><a href=\"https://www.cancerresearchuk.org/about-us/charity-jobs\">Jobs</a></li>\n </ul>\n </div>\n <div class=\"footer-links__icons\">\n <h2>Follow us</h2>\n <ul>\n <li>\n <a href=\"https://www.facebook.com/cancerresearchuk/\">\n <img\n src=\"https://ccp-s3.rel.cruk.org/images/social_icons/facebook_icon.svg\"\n alt=\"Like Cancer Research UK on Facebook\"\n />\n </a>\n </li>\n <li>\n <a href=\"https://twitter.com/CR_UK\">\n <img\n src=\"https://ccp-s3.rel.cruk.org/images/social_icons/twitter_icon.svg\"\n alt=\"Follow Cancer Research UK on Twitter\"\n />\n </a>\n </li>\n <li>\n <a href=\"https://www.instagram.com/cr_uk/\" target=\"_blank\" rel=\"noopener noreferrer\">\n <img\n src=\"https://ccp-s3.rel.cruk.org/images/social_icons/instagram_icon.svg\"\n alt=\"Follow Cancer Research UK on Instagram\"\n />\n </a>\n </li>\n <li>\n <a href=\"https://www.linkedin.com/company/cancer-research-uk/\" target=\"_blank\" rel=\"noopener noreferrer\">\n <img\n src=\"https://ccp-s3.rel.cruk.org/images/social_icons/linkedin_icon.svg\"\n alt=\"Connect with Cancer Research UK on LinkedIn\"\n />\n </a>\n </li>\n <li>\n <a href=\"https://www.youtube.com/user/cancerresearchuk\" target=\"_blank\" rel=\"noopener noreferrer\">\n <img\n src=\"https://ccp-s3.rel.cruk.org/images/social_icons/youtube_icon.svg\"\n alt=\"Subscribe to Cancer Research UK on YouTube\"\n />\n </a>\n </li>\n </ul>\n </div>\n </div>\n <div class=\"footer-links\">\n <div class=\"footer-links__list--horizontal\">\n <ul class=\"links\">\n <li class=\"0 first\">\n <a href=\"https://www.cancerresearchuk.org/about-cancer/about-our-information\">About our information</a>\n </li>\n <li class=\"1\">\n <a href=\"https://www.cancerresearchuk.org/about-us/utilities/terms-and-conditions\">Terms and conditions</a>\n </li>\n <li class=\"2\">\n <a href=\"https://www.cancerresearchuk.org/about-us/utilities/privacy-statement\">Privacy</a>\n </li>\n <li class=\"3\">\n <a href=\"https://www.cancerresearchuk.org/modern-slavery-transparency-statement\">Modern Slavery Statement</a>\n </li>\n <li class=\"4\">\n <a href=\"https://www.cancerresearchuk.org/about-us/utilities/cookies-policy\">Cookies</a>\n </li>\n <li class=\"5\">\n <a href=\"https://www.cancerresearchuk.org/about-us/utilities/accessibility\">Accessibility</a>\n </li>\n <li class=\"6 last\">\n <a href=\"https://www.cancerresearchuk.org/sitemap\">Sitemap</a>\n </li>\n </ul>\n </div>\n </div>\n <div id=\"awards\" class=\"footer-secondary-content\">\n <a href=\"https://www.fundraisingregulator.org.uk/\" target=\"_blank\" rel=\"noopener noreferrer\">\n <img\n src=\"https://ccp-s3.rel.cruk.org/images/fund-reg.svg\"\n alt=\"Registered with Fundraising Regulator (logo)\"\n width=\"165\"\n height=\"52\"\n />\n </a>\n </div>\n <address class=\"footer-secondary-content\">\n Cancer Research UK is a registered charity in England and Wales (1089464), Scotland (SC041666) and the Isle of Man (1103). A company limited by guarantee. Registered company in England and Wales (4325234) and the Isle of Man (5713F). Registered address: Angel Building, 407 St John Street, London EC1V 4AD.\n </address>\n</footer>\n","header.h3":"<h3 class=\"cr-heading-pattern\">{{ text }}</h3>\n","header.page-title":"<h1 class=\"cr-page-title\">{{ text }}</h1>\n","header":"<div class=\"cr-header\">\n <div class=\"cr-header__logo\">\n <a href={{ text }} title={{ logoTitle }} rel=\"home\">\n <img src={{ logoSrc }} alt=\"Cancer Research UK Homepage\" />\n </a>\n </div>\n <div class=\"cr-header__slogan\">\n <h2>{{ slogan }}</h2>\n </div>\n <div class=\"cr-header__search\">\n <form role=\"search\" class=\"cr-search-input\">\n <label for=\"{{ uniqueId }}\" class=\"cr-search-input__label\">{{ label }}</label>\n <input\n type=\"search\"\n name=\"search\"\n id=\"{{ uniqueId }}\"\n class=\"cr-search-input__input\"\n placeholder=\"{{ label }}\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n />\n <button\n type=\"submit\"\n class=\"cr-search-input__button\"\n aria-label=\"Submit your search\"\n >\n Search\n </button>\n</form>\n </div>\n <div class=\"cr-header__cta\">\n <a class=\"cr-cta--primary\" href=\"{{ href }}\">{{ text }}</a>\n </div>\n</div>\n","layout":"{% if isRoot %}\n <div class=\"cr-layout\">\n {{ contents|raw }}\n </div>\n{% endif %}\n{% if isRow_full %}\n <div class=\"cr-layout__row cr-layout__row--full\">\n {{ contents|raw }}\n </div>\n{% endif %}\n{% if isRow_100 %}\n <div class=\"cr-layout__row cr-layout__row--100\">\n {{ contents|raw }}\n </div>\n{% endif %}\n{% if isRow_50_50 %}\n <div class=\"cr-layout__row cr-layout__row--50-50\">\n {{ contents|raw }}\n </div>\n{% endif %}\n{% if isRow_66_33 %}\n <div class=\"cr-layout__row cr-layout__row--66-33\">\n {{ contents|raw }}\n </div>\n{% endif %}\n{% if isRow_33_66 %}\n <div class=\"cr-layout__row cr-layout__row--33-66\">\n {{ contents|raw }}\n </div>\n{% endif %}\n{% if isRow_33_33_33 %}\n <div class=\"cr-layout__row cr-layout__row--33-33-33\">\n {{ contents|raw }}\n </div>\n{% endif %}\n{% if isRow_25_50_25 %}\n <div class=\"cr-layout__row cr-layout__row--25-50-25\">\n {{ contents|raw }}\n </div>\n{% endif %}\n{% if isRow_25_25_25_25 %}\n <div class=\"cr-layout__row cr-layout__row--25-25-25-25\">\n {{ contents|raw }}\n </div>\n{% endif %}\n{% if isCell %}\n <div class=\"cr-layout__cell\">\n {{ contents|raw }}\n </div>\n{% endif %}\n","list.ordered":"<ol class=\"cr-list cr-list--ordered\">\n {% for item in items %}\n <li class=\"cr-list__item\">{{ item|raw }}</li>\n {% endfor %}\n</ol>\n","list.unordered":"<ul class=\"cr-list cr-list--unordered\">\n {% for item in items %}\n <li class=\"cr-list__item\">{{ item|raw }}</li>\n {% endfor %}\n</ul>\n","loader":"<div class=\"cr-simple-loader\">\n <div class=\"cr-simple-loader__spinner\">\n <div class=\"cr-simple-loader__spinner-item cr-simple-loader__spinner-item--bounce1\" />\n <div class=\"cr-simple-loader__spinner-item cr-simple-loader__spinner-item--bounce2\" />\n <div class=\"cr-simple-loader__spinner-item cr-simple-loader__spinner-item--bounce3\" />\n </div>\n</div>\n","navigation_block":"<a class=\"cr-navigation-block__cta\" href=\"{{ href }}\" target=\"{{ target }}\">\n <div class=\"cr-navigation-block\">\n <h2 class=\"cr-navigation-block__title\">{{ title }}</h2>\n <div class=\"cr-navigation-block__content\">\n {{ text }}\n </div>\n </div>\n</a>\n","menu":"<div class=\"cr-menu__wrapper\">\n <hr class=\"cr-menu__divider\" />\n <div class=\"cr-menu__inner\">\n <div class=\"cr-menu\">\n <input type=\"checkbox\" id=\"cr-menu__btn--menu\" class=\"cr-menu__btn\" />\n <label htmlFor=\"cr-menu__btn--menu\" class=\"cr-menu__label\">Menu</label>\n <input type=\"checkbox\" id=\"cr-menu__btn--search\" class=\"cr-menu__btn\" />\n <label htmlFor=\"cr-menu__btn--search\" class=\"cr-menu__label\">Search</label>\n <div class=\"cr-menu__main-menu\">\n <nav class=\"cr-menu__nav\">\n <ul role=\"menubar\" tabindex=\"0\">\n {% for item in items %}\n <li>\n <div class=\"cr-menu__block\">\n <span>\n </span>\n <a role=\"menuitem\" href=\"#\">{{ title }}</a>\n </div>\n <ul role=\"menu\">\n {% for item in items %}\n <li>\n <a role=\"menuitem\" href=\"#\">{{ title }}</a>\n <ul>\n {% for item in items %}\n <li><a href=\"#\">{{ item|raw }}</a></li>\n {% endfor %}\n </ul>\n </li>\n {% endfor %}\n </ul>\n </li>\n {% endfor %}\n </ul>\n </nav>\n </div>\n <div class=\"cr-menu__search\">\n {{ include('search.twig') }}\n </div>\n </div>\n </div>\n</div>\n","text":"<div class=\"cr-text-pattern\">\n {{ content|raw }}\n</div>\n","related.links":"<div class=\"cr-related-links\">\n <div class=\"cr-related-links__content\">\n <h2 class=\"cr-related-links__heading\">{{ title }}</h2>\n <div class=\"cr-related-links__body\">\n {{ content|raw }}\n </div>\n </div>\n</div>\n","search":"<form role=\"search\" class=\"cr-search-input\">\n <label for=\"{{ uniqueId }}\" class=\"cr-search-input__label\">{{ label }}</label>\n <input\n type=\"search\"\n name=\"search\"\n id=\"{{ uniqueId }}\"\n class=\"cr-search-input__input\"\n placeholder=\"{{ label }}\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n />\n <button\n type=\"submit\"\n class=\"cr-search-input__button\"\n aria-label=\"Submit your search\"\n >\n Search...\n </button>\n</form>\n","video":"<div class=\"cr-video\">\n <div class=\"cr-video__holder\">\n <iframe class=\"cr-video__player\" width=\"854\" height=\"480\"\n src={{ url ~ '?autoplay=' ~ autoplay ~ '&rel=' ~ rel ~ '&modestbranding=' ~ modestbranding }}\n frameborder=\"0\"\n allowfullscreen>\n </iframe>\n </div>\n</div>\n"},"scss":{"breadcrumb":"@import '../scss/base';\n\n.cr-breadcrumb-nav {\n padding: $rhythm-vertical-base 0;\n @extend %constrain-width;\n\n .cr-breadcrumb__item {\n display: inline;\n list-style: none;\n // Zero font-size is a way to avoid gaps between the inline elements (spaces in html).\n font-size: 0;\n\n span { /* stylelint-disable-line */\n background: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 593 922'%3E%3Cpath fill='%23333333' d='M582 435L158 11a36 36 0 0 0-52 0l-95 95a36 36 0 0 0 0 51l304 304L11 764a36 36 0 0 0 0 52l95 95c14 14 37 14 52 0l424-424c14-15 14-38 0-52z'/%3E%3C/svg%3E\") no-repeat center center;\n display: inline-block;\n width: 18px;\n height: 18px;\n margin: 10px;\n background-size: 50%;\n }\n }\n\n .cr-breadcrumb__item:last-of-type span { /* stylelint-disable-line */\n display: none;\n }\n\n .cr-breadcrumb__link {\n color: $gray-80;\n\n &:hover {\n color: $brand-secondary;\n text-decoration: underline;\n }\n\n &:active,\n &:focus,\n &:visited {\n color: $gray-80;\n }\n }\n}\n\n// Hide the current page link.\n\n.cr-breadcrumb--hide-current .cr-breadcrumb__list-item:last-child {\n @extend %sr-only;\n}\n\n// Hide the home page link.\n\n.cr-breadcrumb--hide-top {\n\n .cr-breadcrumb__list-item:first-child {\n @extend %sr-only;\n }\n\n .cr-breadcrumb__list-item:nth-child( 2 ) .cr-breadcrumb__link {\n padding-left: $rhythm-horizontal-base;\n }\n}\n","collapsible":"@import '../scss/base';\n\n.cr-collapsible {\n @extend .vertical-spacing;\n border: 1px solid $brand-gray-light;\n border-radius: 4px;\n box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);\n position: relative;\n}\n\n.cr-collapsible__heading {\n margin: 0;\n padding: 0;\n}\n\n.cr-collapsible__content {\n display: none;\n padding: $rhythm-vertical-base $rhythm-horizontal-base;\n}\n\n.cr-collapsible__heading-button {\n @include icon-beside($icon-plus, $brand-primary, left, $rhythm-horizontal-base * 2);\n @include font-size-map($h2-font-map);\n display: block;\n cursor: pointer;\n background: $gray-5;\n border: none;\n color: $brand-primary;\n padding: $rhythm-vertical-base $rhythm-horizontal-base;\n padding-left: $rhythm-horizontal-base * 4;\n width: 100%;\n text-align: left;\n font-family: $font-family-headings;\n font-weight: $font-weight-heavy;\n\n &:hover, &:focus {\n @include icon-beside($icon-plus, $brand-secondary, left, $rhythm-horizontal-base * 2);\n color: $brand-secondary;\n text-decoration: underline;\n outline: none;\n }\n}\n\n.cr-collapsible__input {\n opacity: 0;\n position: absolute;\n top: 0;\n z-index: 10;\n width: 95%;\n height: 45px;\n cursor: pointer;\n\n &:hover {\n\n ~ .cr-collapsible__heading-button {\n @include icon-beside($icon-plus, $brand-secondary, left, $rhythm-horizontal-base * 2);\n color: $brand-secondary;\n text-decoration: underline;\n outline: none;\n }\n }\n\n &:checked {\n\n ~ .cr-collapsible__content {\n display: block;\n }\n\n ~ .cr-collapsible__heading-button {\n @include icon-beside($icon-minus, $brand-primary, left, $rhythm-horizontal-base * 2);\n color: $brand-primary;\n }\n }\n}\n","cta.link":"@import '../scss/base';\n\n.cr-cta--link {\n color: $KINGFISHER_DAISY;\n font-weight: $font-weight-heavy;\n text-decoration: none;\n display: inline-block;\n @include font-size-map($base-font-map);\n\n &:hover {\n color: $brand-secondary;\n text-decoration: underline;\n }\n\n &:active,\n &:focus,\n &:visited {\n color: $KINGFISHER_DAISY;\n }\n\n @extend .vertical-spacing;\n}\n","cta.primary":"@import '../scss/base';\n\n.cr-cta--primary {\n background-color: $brand-secondary;\n border-radius: $border-radius;\n border: 1px solid $brand-secondary;\n color: $WHITE;\n display: inline-block;\n font-family: $font-family-MuseoSansRounded-700;\n font-weight: 700;\n padding: 10px 19px;\n position: relative;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n @include font-size-map($base-font-map);\n\n &:hover {\n color: $WHITE;\n text-decoration: none;\n background-color: $brand-secondary-light;\n }\n\n &:visited {\n color: $WHITE;\n }\n\n &:focus {\n border-color: $brand-secondary;\n color: $WHITE;\n background-color: $brand-secondary;\n }\n\n @extend .vertical-spacing;\n}\n","cta.print":"@import '../scss/base';\n\n.cr-cta--print {\n color: $brand-primary;\n display: block;\n font-weight: $font-weight-heavy;\n padding-left: 20px;\n @include font-size-map($base-font-map);\n\n &::before {\n @include icon-background($icon-print, $brand-primary);\n padding-right: 8px;\n text-decoration: none;\n vertical-align: middle;\n }\n\n @extend .vertical-spacing;\n}\n","cta.secondary":"@import '../scss/base';\n\n.cr-cta--secondary {\n color: $brand-secondary;\n display: block;\n font-weight: $font-weight-heavy;\n padding-left: 20px;\n position: relative;\n text-decoration: none;\n @include font-size-map($base-font-map);\n\n &:hover {\n color: $brand-secondary;\n text-decoration: underline;\n }\n\n &::before {\n @include icon-background($icon-chevron-right, $brand-secondary);\n content: '';\n display: block;\n height: 16px;\n left: 0;\n margin-top: -8px;\n position: absolute;\n top: 50%;\n width: 16px;\n }\n\n &:visited {\n color: $brand-secondary-light;\n }\n\n @extend .vertical-spacing;\n}\n","divider":"@import '../scss/base';\n\n.cr-divider {\n border: 1px solid $brand-gray-light;\n height: 0;\n margin: $rhythm-vertical-base 0;\n padding: initial;\n position: initial;\n}\n","footer":".cr-footer {\n background-color: $gray-10;\n margin-top: $rhythm-vertical-base;\n padding-bottom: $rhythm-vertical-base;\n clear: both;\n\n h2 {\n font-size: 1.3125rem; // 21px\n }\n\n a {\n text-decoration: none;\n font-family: $font-family-MuseoSansRounded-500;\n font-size: 1rem; // 16px\n }\n\n address {\n font-size: 1rem; // 16px\n font-family: $font-family-MuseoSansRounded-500;\n }\n}\n\n.footer-secondary-content {\n font-style: normal;\n font-family: $font-family-MuseoSansRounded-500;\n font-size: 1rem;\n padding-top: $rhythm-vertical-base*2;\n clear: left;\n}\n\n.footer-links,\n.footer-secondary-content {\n @extend %constrain-width;\n}\n\n.footer-links__list,\n.footer-links__icons,\n.footer-links__list--horizontal {\n padding: $rhythm-vertical-base 0;\n line-height: $rhythm-vertical-base*2;\n\n > ul {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n > ul > li {\n list-style: none;\n margin-left: 0;\n }\n}\n\n.footer-links__icons > ul {\n display: flex;\n justify-content: space-between;\n max-width: 250px;\n}\n\n@media screen and (max-width: $breakpoint-c) {\n\n .footer-links__list,\n .footer-links__icons,\n .footer-links__list--horizontal {\n padding: $rhythm-vertical-base $rhythm-horizontal-base;\n }\n\n .footer-secondary-content {\n padding-left: $rhythm-horizontal-base;\n padding-right: $rhythm-horizontal-base;\n }\n}\n\n@media screen and (min-width: $breakpoint-c) {\n\n .footer-links__list,\n .footer-links__icons,\n .footer-links__list--horizontal {\n\n > ul,\n > h2 {\n padding-left: 0;\n padding-right: 0;\n }\n }\n}\n\n@media screen and (max-width: $breakpoint-b) {\n\n .footer-links__list,\n .footer-links__icons,\n .footer-links__list--horizontal {\n border-bottom: 1px solid $gray-20;\n }\n}\n\n@media screen and (min-width: $breakpoint-b) {\n\n .footer-links__list,\n .footer-links__icons,\n .footer-links__list--horizontal {\n flex-grow: 1;\n\n > h2 {\n padding: 0 $rhythm-horizontal-base $rhythm-vertical-base 0;\n border-bottom: 1px solid $gray-20;\n margin-bottom: 0;\n }\n\n > h2 + ul {\n padding-top: $rhythm-vertical-base;\n }\n }\n\n .footer-links {\n display: flex;\n border-bottom: 1px solid $gray-20;\n }\n\n .footer-links__icons {\n flex-grow: 2;\n }\n\n .footer-links__list--horizontal {\n padding-top: $rhythm-vertical-base;\n padding-bottom: $rhythm-vertical-base;\n\n li {\n display: inline;\n padding-right: $rhythm-horizontal-base + 5;\n padding-left: 0;\n\n > a {\n padding-right: $rhythm-horizontal-base + 5;\n border-right: 1px solid $gray-20;\n }\n\n &:last-child {\n padding-right: 0;\n }\n\n &:last-child a {\n border-right: none;\n padding-right: 0;\n }\n }\n }\n}\n","header.page-title":"@import '../scss/base';\n\n.cr-page-title {\n @extend %constrain-width;\n @extend %clearfix;\n text-align: left;\n}\n","header":"@import '../scss/base';\n\n.cr-header {\n @extend %constrain-width;\n @extend .vertical-spacing;\n display: flex;\n display: -ms-flexbox;\n align-items: center;\n justify-content: space-between;\n flex-direction: row;\n -ms-flex-direction: row;\n -ms-flex-pack: center;\n -ms-flex-align: center;\n padding: $rhythm-vertical-base $rhythm-horizontal-base 0;\n\n .cr-header__slogan,\n .cr-header__search {\n display: none;\n }\n\n .cr-header__logo {\n flex-basis: 40%;\n }\n\n .cr-header__cta {\n margin-top: $rhythm-vertical-base;\n }\n\n @include breakpoint($breakpoint-b) {\n\n .cr-header__logo {\n flex-basis: auto;\n }\n\n .cr-header__slogan {\n display: block;\n }\n }\n\n @include breakpoint($breakpoint-c) {\n min-height: 115px;\n\n .cr-header__search {\n display: block;\n flex-basis: 20%;\n max-width: 20%;\n margin-right: $rhythm-horizontal-base;\n }\n }\n\n @include breakpoint($breakpoint-d) {\n padding-left: 0;\n padding-right: 0;\n }\n}\n\n.cr-header__logo-img {\n width: auto;\n}\n\n.cr-header__site-slogan {\n color: $KINGFISHER_DAISY;\n font-weight: 500;\n font-size: 1.5625rem; // 25px\n padding: 0 30px;\n margin: 0;\n font-family: $font-family-MuseoSansRounded-500;\n}\n\n.cr-header__search .cr-search-input__input {\n width: 80%;\n max-width: 80%;\n display: inline-block;\n}\n\n.cr-header__search .cr-search-input__input,\n.cr-menu__search .cr-search-input__input {\n padding: 7px 5px 5px 12px;\n}\n","layout":"@import '../scss/base';\n\n.cr-layout__row {\n @extend %constrain-width;\n @extend .vertical-spacing;\n width: auto;\n display: grid;\n grid-template-columns: 100%;\n grid-column-gap: $rhythm-vertical-base;\n grid-row-gap: $rhythm-horizontal-base;\n}\n\n.cr-layout__row.cr-layout__row--full,\n.cr-layout__row.cr-layout__row--fullbleed {\n max-width: none;\n\n .cr-image--standard {\n margin-bottom: 0;\n }\n}\n\n// On screens that are big enough, apply the grid.\n@media screen and (min-width: $breakpoint-b) {\n // @TODO: investigate why fr unit cause auto increase overlap issue\n\n .cr-layout__row--100 {\n grid-template-columns: 100%;\n }\n\n .cr-layout__row--50-50 {\n grid-template-columns: repeat(2, 49%);\n }\n\n .cr-layout__row--66-33 {\n grid-template-columns: 66% 33%;\n }\n\n .cr-layout__row--33-66 {\n grid-template-columns: 33% 66%;\n }\n\n .cr-layout__row--33-33-33 {\n grid-template-columns: repeat(3, 32.5%);\n }\n\n .cr-layout__row--25-50-25 {\n grid-template-columns: 25% 48% 25%;\n }\n\n .cr-layout__row--25-25-25-25 {\n grid-template-columns: repeat(4, 24.25%);\n }\n}\n\n//\n// == IE Backwards Compatibility\n//\n\n@include evil-ie {\n @media screen and (max-width: $breakpoint-b) {\n\n .cr-layout__row {\n display: block;\n }\n }\n @media screen and (min-width: $breakpoint-b) {\n\n .cr-layout__cell {\n margin-left: 5px;\n margin-right: 5px;\n }\n\n .cr-layout__cell:nth-of-type( 2 ) {\n -ms-grid-column: 2;\n }\n\n .cr-layout__cell:nth-of-type( 3 ) {\n -ms-grid-column: 3;\n }\n\n .cr-layout__cell:nth-of-type( 4 ) {\n -ms-grid-column: 4;\n }\n }\n}\n\n","list":"@import '../scss/base';\n\n.cr-list--unordered {\n list-style: disc inside;\n @extend .vertical-spacing;\n}\n\n.cr-list--ordered {\n list-style: decimal inside;\n @extend .vertical-spacing;\n}\n\n.cr-list--unordered .cr-list--unordered,\n.cr-list--ordered .cr-list--unordered {\n list-style: circle inside;\n margin-left: $rhythm-horizontal-base;\n}\n\n.cr-list--ordered .cr-list--ordered,\n.cr-list--unordered .cr-list--ordered {\n list-style: lower-latin inside;\n margin-left: $rhythm-horizontal-base;\n}\n\n/* stylelint-disable selector-max-universal */\n\n.cr-list__item * {\n display: inline;\n}\n","loader":"@import '../scss/base';\n\n.cr-simple-loader {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba($WHITE, 0.7);\n z-index: 999;\n}\n\n.cr-simple-loader__spinner-item {\n width: 40px;\n height: 40px;\n}\n\n.cr-simple-loader__spinner {\n width: 200px;\n position: absolute;\n margin-top: -20px;\n top: 50%;\n left: 50%;\n margin-left: -100px;\n}\n","menu":"@import '../scss/base';\n/* stylelint-disable */\n/*\n * Mega Menu\n */\n.cr-menu__wrapper {\n background-color: $gray-2;\n position: relative;\n min-height: 60px;\n @extend .vertical-spacing;\n}\n.cr-menu__inner {\n max-width: $content-width-constraint;\n margin: 0 auto;\n}\n.cr-menu__divider {\n position: absolute;\n display: block;\n height: 60px;\n width: 100%;\n margin: 0;\n border: 1px solid $gray-10;\n border-color: $gray-10 transparent;\n}\n.cr-menu {\n position: relative;\n width: 100%;\n padding: 0;\n margin: 0;\n\n a {\n text-decoration: none;\n font-family: $font-family-MuseoSansRounded-500;\n\n &:hover,\n &:focus,\n &:active {\n color: $HOLLYWOOD_CERISE;\n }\n }\n\n ul {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n ul ul {\n line-height: 1.0625rem;\n }\n\n ul ul li li {\n padding: 0;\n }\n\n ul li {\n list-style: none;\n }\n}\n.cr-menu__nav {\n padding: 10px;\n position: relative;\n}\n.cr-menu__down-arrow {\n content: '';\n border: solid $KINGFISHER_DAISY;\n border-width: 0 3px 3px 0;\n display: inline-block;\n position: relative;\n top: -3px;\n left: 10px;\n height: 10px;\n width: 10px;\n transform: rotate(45deg);\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n}\n.cr-menu__btn,\n.cr-menu__label {\n font-size: 1.125rem; /* 18px */\n display: inline-block;\n height: 60px;\n line-height: 60px;\n cursor: pointer;\n color: $KINGFISHER_DAISY;\n}\n.cr-menu__btn {\n position: absolute;\n opacity: 0;\n filter: alpha(opacity=0);\n\n &:hover + label {\n color: $HOLLYWOOD_CERISE;\n }\n &:checked + label {\n border-color: $gray-10 $gray-10 $gray-2;\n }\n &:hover + label::after {\n border-color: $HOLLYWOOD_CERISE;\n }\n}\n.cr-menu__label {\n font-family: $font-family-MuseoSansRounded-500;\n font-weight: 500;\n padding: 0 20px;\n border: 1px solid transparent;\n\n &:after {\n content: '';\n border: solid $gray-30;\n border-width: 0 3px 3px 0;\n display: inline-block;\n position: relative;\n top: -3px;\n left: 10px;\n height: 10px;\n width: 10px;\n transform: rotate(45deg);\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n }\n}\n\n/* specific show and hide behavior */\n.cr-menu__main-menu,\n.cr-menu__search {\n opacity: 0;\n filter: alpha(opacity=0);\n height: 0;\n}\n#cr-menu__btn--menu:checked ~ label ~ .cr-menu__main-menu,\n#cr-menu__btn--search:checked ~ label ~ .cr-menu__search {\n opacity: 1;\n filter: alpha(opacity=100);\n height: auto;\n border-bottom: 1px solid $gray-10;\n}\n#cr-menu__btn--menu:checked ~ label ~ .cr-menu__search,\n#cr-menu__btn--search:checked ~ label ~ .cr-menu__main-menu {\n height: 0;\n}\n#cr-menu__btn--search:checked ~ label ~ .cr-menu__search {\n padding: 20px;\n}\n\n/* Nested menu behaviour */\nul[role='menubar'] div {\n display: block;\n position: relative;\n width: 50%;\n}\nul[role='menubar'] div span {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 40px;\n padding: 0;\n margin: 0;\n cursor: pointer;\n}\nul[role='menubar'] div a {\n font-size: 1rem; // 16px;\n color: $KINGFISHER_DAISY;\n // line-height: 40px;\n padding-top: 10px;\n padding-bottom: 10px;\n display: block;\n border: 1px solid transparent;\n word-break: break-word;\n z-index: 1000;\n padding-left: 15px;\n}\n\nul[role='menubar'] li:hover > div a,\nul[role='menubar'] li:focus > div a,\nul[role='menubar'] li:active > div a {\n color: $HOLLYWOOD_CERISE;\n background-color: $WHITE;\n border-radius: 5px 0 0 5px;\n border-color: $gray-10 transparent $gray-10 $gray-10;\n}\nul[role='menubar'] li:hover > ul[role='menu'],\nul[role='menubar'] li:focus > ul[role='menu'],\nul[role='menubar'] li:active > ul[role='menu'] {\n opacity: 1;\n filter: alpha(opacity=100);\n z-index: 999;\n overflow: visible;\n width: 45%;\n height: 93%;\n}\nul[role='menu'] {\n background-color: $WHITE;\n border: 1px solid $gray-10;\n border-radius: 0 5px 5px 5px;\n opacity: 0;\n filter: alpha(opacity=0);\n width: 0;\n height: 0;\n position: absolute;\n top: 10px;\n left: 50%;\n overflow: hidden;\n padding: 3px 5px 10px 20px;\n}\nul[role='menu'] li ul {\n display: none;\n}\nul[role='menu'] a {\n color: $gray-55;\n display: block;\n padding: 12px 0 0;\n}\nul[role='menu'] ul li a {\n color: $gray-80;\n padding-right: 20px;\n}\n\n@media only screen and (max-width: $breakpoint-c) {\n .cr-menu__main-menu,\n .cr-menu__search,\n #cr-menu__btn--menu:checked ~ label ~ .cr-menu__search,\n #cr-menu__btn--search:checked ~ label ~ .cr-menu__main-menu {\n width: 0;\n }\n #cr-menu__btn--menu:checked ~ label ~ .cr-menu__main-menu,\n #cr-menu__btn--search:checked ~ label ~ .cr-menu__search {\n width: auto;\n }\n}\n\n/* Responsive - large breakpoint */\n@media only screen and (min-width: $breakpoint-c) {\n .cr-menu__wrapper {\n border-top: 1px solid $gray-10;\n border-bottom: 1px solid $gray-10;\n padding: 0;\n }\n .cr-menu__divider {\n display: none;\n }\n .cr-menu__nav {\n padding: 0;\n }\n .cr-menu__btn,\n .cr-menu__label,\n .cr-menu__search {\n display: none;\n }\n .cr-menu__main-menu {\n height: auto !important;\n opacity: 1;\n filter: alpha(opacity=100);\n }\n #cr-menu__btn--menu:checked ~ label ~ .cr-menu__main-menu,\n #cr-menu__btn--search:checked ~ label ~ .cr-menu__search {\n border-bottom: 0;\n }\n ul[role='menubar'] {\n width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n\n ul[role='menubar'] div {\n width: 100%;\n height: 60px;\n }\n ul[role='menubar'] span {\n display: none;\n }\n ul[role='menubar'] div a {\n font-size: 1.125rem; /* 18px */\n line-height: 60px;\n height: 61px;\n text-align: center;\n position: relative;\n padding: 0 34px 0 23px;\n\n &::after {\n content: '';\n border: solid $gray-30;\n border-width: 0 3px 3px 0;\n display: inline-block;\n position: absolute;\n top: 23px;\n right: 16px;\n height: 11px;\n width: 11px;\n transform: rotate(45deg);\n -webkit-transform: rotate(45deg);\n -ms-transform: rotate(45deg);\n }\n }\n ul[role='menubar'] li:hover > div a {\n background-color: $gray-2;\n border-radius: 0;\n border-color: transparent $gray-10 $gray-2 $gray-10;\n }\n ul[role='menubar'] li:hover > div a:after {\n border: solid $HOLLYWOOD_CERISE;\n border-width: 0 3px 3px 0;\n }\n ul[role='menubar'] li:hover > ul[role='menu'],\n ul[role='menubar'] li:focus > ul[role='menu'],\n ul[role='menubar'] li:active > ul[role='menu'] {\n width: 100%;\n height: auto;\n }\n ul[role='menu'] {\n top: 61px;\n left: 0;\n padding: 5px 20px 15px;\n background-color: $gray-2;\n border-top: 1px solid transparent;\n border-radius: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n }\n ul[role='menu'] li {\n width: 20%;\n }\n ul[role='menu'] li ul,\n ul[role='menu'] li ul li {\n display: block;\n width: 100%;\n }\n ul[role='menu'] a {\n color: $KINGFISHER_DAISY;\n font-size: 1rem; // 16px\n }\n}\n/* Responsive - custom breakpoint */\n@media only screen and (min-width: $breakpoint-e) {\n ul[role='menubar'] div a {\n padding: 0 41px 0 23px;\n }\n}\n/* CSS code put here will only run in non-IE */\n@supports (top:0){\n\n ul[role='menubar'] li:focus-within > ul[role='menu'] {\n opacity: 1;\n filter: alpha(opacity=100);\n z-index: 9999;\n overflow: visible;\n width: 100%;\n height: 370px;\n }\n @media only screen and (max-width: $breakpoint-c) {\n\n ul[role='menubar'] li:focus-within > ul[role='menu'] {\n width: 45%;\n height: 93%;\n padding: 3px 5px 10px 20px;\n }\n ul[role='menubar'] li:focus-within > div a {\n color: $HOLLYWOOD_CERISE;\n background-color: $WHITE;\n border-radius: 5px 0 0 5px;\n border-color: $gray-10 transparent $gray-10 $gray-10;\n }\n }\n}\n\na.external:after {\n content: url(https://www.cancerresearchuk.org/sites/all/themes/custom/cruk/images/cruk-icons/external-link-icons/external-link-text.png);\n padding-left: 5px;\n}\n","navigation_block":".cr-navigation-block {\n border: 1px solid $gray-10;\n border-radius: $border-radius;\n padding: $rhythm-base;\n @extend .vertical-spacing;\n}\n\n.cr-navigation-block__title {\n color: $KINGFISHER_DAISY;\n padding-bottom: 5px;\n\n .cr-navigation-block__cta:hover & {\n color: $HOLLYWOOD_CERISE;\n text-decoration: underline;\n }\n}\n\n.cr-navigation-block__content {\n color: $gray-80;\n word-break: break-word;\n\n .cr-navigation-block__cta:hover & {\n color: $gray-80;\n }\n}\n\n.cr-navigation-block__cta:hover {\n text-decoration: none;\n}\n","related.links":"@import '../scss/base';\n\n.cr-related-links {\n background-color: $LILY_WHITE;\n border-radius: $border-radius;\n @extend .vertical-spacing;\n\n .cr-cta--link {\n display: block;\n margin-bottom: $rhythm-vertical-base / 3;\n }\n}\n\n.cr-related-links__heading {\n margin-bottom: $rhythm-vertical-base / 3 * 2;\n}\n\n.cr-related-links__content {\n padding: $rhythm-base;\n}\n\n.cr-related-links__body {\n padding-left: $rhythm-horizontal-base;\n}\n","search":"@import '../scss/base';\n\n.cr-search-input__label {\n @extend %sr-only;\n}\n\n.cr-search-input {\n @extend %input-group__group;\n}\n\n.cr-search-input__input {\n @extend %input-group__input;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n.cr-search-input__button {\n @extend %input-group__button;\n @include text-replace($icon-search, $gray-20);\n border-left: 2px solid $SILVER;\n background-size: 18px;\n\n &:hover {\n border-left: 2px solid $SILVER;\n }\n}\n\n.cr-search-input--focused {\n @extend %input-group__group--focused;\n\n .cr-search-input__button {\n @include text-replace($icon-search, $brand-primary);\n border-left: 2px solid $brand-info;\n background-size: 18px;\n }\n}\n","video":"@import '../scss/base';\n\n.cr-video__holder {\n position: relative;\n border: 1px solid $BLACK;\n background: $BLACK;\n}\n\n.cr-video__holder::after {\n content: '';\n display: block;\n padding-bottom: 56.25%;\n}\n\n.cr-video__player {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n}"},"js":{"cta.print":"module.exports = function(event, element) {\n if (event === 'click' && element.classList.contains('cr-cta--print')) {\n if (typeof window !== 'undefined') {\n window.print();//eslint-disable-line\n }\n }\n};\n"}}; //eslint-disable-line