/** * Common Design WP Overrides * * Style and selector adjustments so CD Header and Footer, and component styles * work with WordPress and Gutenberg blocks. */ /** * WP Sticky footer fix * * WP doesn't have the "off-canvas" element that Drupal uses for a bunch of its * admin UI, so we set the 100vh on instead of the class that normally is * present to receive this setting. */ body { min-height: 100vh; } .cd-page-layout-container { min-height: 100vh; } /** * WP theme Customizer band-aids * * We should probably be setting this anyway in our main theme, but for the time * being we are adding the background-color to ensure it displays properly while * customizing the theme. */ .cd-page-layout-container { background: var(--cd-white); } /** * CD Content Layout modifications * * Our Support Demo sidebar contains a Twitter feed by defaut and it pushes the * sidebar to a large width unless extra care is taken to override the feed. */ .cd-layout__sidebar { max-width: 285px; } .cd-layout__sidebar--wide { max-width: 400px; } /** * Content classes */ .alignleft { float: left; } .alignright { float: right; } p:first-child, header + p:first-of-type { margin-top: 0; } p:last-child { margin-bottom: 0; } /* Make sure long URLs wrap */ a { word-break: break-word; } /* lists should not exceed content width */ ul, ol { max-width: var(--cd-max-content-width); } /* Social Media menu */ .wp_social_media_menu_icon { list-style-type: none; } .wp-menu-item { list-style-type: none; } /** * Search component in header */ .cd-search__btn { position: relative; text-decoration: none; } .cd-search__btn::before { position: absolute; right: -1px; bottom: -6px; left: -1px; width: calc(100% + 2px); height: 6px; content: ""; transition: background 0.3s ease; background: transparent; } .cd-search__btn--active { color: var(--cd-highlight-red); } .cd-search__btn--active svg { fill: var(--cd-highlight-red); } .cd-search__btn:hover { background: var(--cd-blue-grey); } .cd-search__btn--active::before { background: var(--cd-highlight-red); } /** * CD form elements */ .cd-form .cd-form--inline { margin-bottom: 2rem; } /** * Gutenberg blocks * * CD component rules adjusted for WP as we have not added these selectors to * the markup but are instead using the selectors and markup that WP outputs. */ /** * cd-button * * @see https://github.com/UN-OCHA/common_design/tree/main/components/cd-button */ .is-style-outline > .wp-block-button__link, .wp-block-button__link.is-style-outline, .wp-block-button__link, .wp-block-file .wp-block-file__button { width: auto; margin: 0.25rem; padding: 0.5rem 1rem; cursor: pointer; transition: background-color 0.6s ease-out, color 0.6s ease-out; text-align: center; color: var(--cd-white); border: 2px solid transparent; border-radius: 3px; background-color: var(--brand-primary); box-shadow: none; font-size: 1rem; line-height: 1.15; -webkit-appearance: none; } .is-style-outline > .wp-block-button__link:not(.has-text-color), .wp-block-button__link.is-style-outline:not(.has-text-color), .is-style-outline .wp-block-button__link { color: var(--brand-primary); border-color: var(--brand-primary); background-color: var(--cd-white); fill: currentColor; } .wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-file .wp-block-file__button:focus { color: var(--cd-white); background-color: var(--brand-primary--light); } .is-style-outline .wp-block-button__link:hover, .is-style-outline .wp-block-button__link:focus { color: var(--cd-white); border-color: var(--brand-primary--dark); background-color: var(--brand-primary); } /* File block Download button */ .wp-block-file .wp-block-file__button { padding: 0.25rem 0.5rem; font-size: 0.875rem; font-weight: 400; } .wp-block-file * + .wp-block-file__button { margin-left: 1rem; } /** * cd-table * * @see https://github.com/UN-OCHA/common_design/blob/main/components/cd-table */ .cd-article table { width: 100%; margin: 0 auto 3rem; border-collapse: collapse; } .cd-article table + figcaption { margin-top: -2.5rem; padding: 0.25rem 0.5rem; caption-side: bottom; text-align: left; background: var(--cd-blue-grey); } [dir="rtl"] .cd-article table + figcaption { text-align: right; } .cd-article table th, .cd-article table td { padding: 0.5rem; text-align: left; } [dir="rtl"] .cd-article table th, [dir="rtl"] .cd-article table td { text-align: right; } .cd-article table th { color: var(--cd-ocha-blue); border-bottom: 1px solid white; background: var(--cd-blue-grey); } .cd-article table a { word-break: break-word; } .cd-article table tfoot { font-weight: bold; } /* Table striping */ .cd-article table tr:nth-child(odd) { background: white; } .cd-article table tr:nth-child(even) { background: var(--cd-grey--light); } /** * Horizontal rule * * @see https://github.com/UN-OCHA/common_design/blob/main/components/cd-typography/cd-typography.css */ .wp-block-separator { max-width: var(--cd-max-content-width); margin: 3.5rem auto; border: none; border-top: 2px solid var(--cd-grey--light); } /* Latest Posts Gutenberg block styles */ .wp-block-latest-posts__list li:after { display: table; clear: both; content: ""; } .wp-block-latest-posts__list li { max-width: var(--cd-max-content-width); margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--cd-blue-grey); } .wp-block-latest-posts__list a { font-weight: 700; } .wp-block-latest-posts__list.has-dates a, .wp-block-latest-posts__list.has-author a { display: block; } .wp-block-latest-posts__post-author, .wp-block-latest-posts__post-date { display: inline-block; margin-right: 0.5rem; } [dir="rtl"] .wp-block-latest-posts__post-author, [dir="rtl"] .wp-block-latest-posts__post-date { margin-right: 0; margin-left: 0.5rem; } /* Grid layout option */ /* cd-card https://github.com/UN-OCHA/common_design/blob/main/components/cd-card */ .wp-block-latest-posts__list.is-grid > li { display: flex; flex-direction: column; max-width: var(--cd-max-content-width); margin-bottom: 1rem; padding: 1rem; border: 2px solid var(--brand-grey); background-color: var(--cd-white); } /* cd-caption */ .cd-caption { width: 100%; } /* cd-banner */ .cd-banner { margin-bottom: 2rem; } .cd-banner + .cd-caption { margin-top: -2rem; margin-bottom: 2rem; } /* Stretch to fit available space */ .cd-banner__image { object-fit: cover; } /* Youtube embed */ .is-type-video .wp-block-embed__wrapper { position: relative; width: 100%; padding-bottom: 56.25%; } .is-type-video .wp-block-embed__wrapper iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } /* Gallery block */ .blocks-gallery-item__caption a { text-decoration: none; color: var(--cd-white); font-size: 1rem; font-weight: 700; line-height: 1.5; } @media (min-width: 1024px) { .blocks-gallery-item__caption a { font-size: var(--cd-font-size--base); } } /* Gutenberg block vertical rhythm */ ul.wp-block-page-list, .wp-block-embed, .wp-block-file, .wp-block-table, .wp-block-buttons, ul.wp-block-latest-posts__list, .wp-block-image, .wp-block-media-text, .wp-block-columns, li.widget_block, .widget_block { margin-bottom: 2rem; } /* cd-teaser */ .cd-teaser__link { display: block; } /* Pull quote Gutenberg block */ .wp-block-pullquote.is-style-solid-color { background: var(--brand-grey); } .wp-block-pullquote.is-style-solid-color blockquote p { font-size: 2rem; } /** * CD Nav * * @TODO: fold all of this back into CD (mostly reverting to pre-8 rules). */ .cd-nav__menu--level-1 { margin: 0; padding: 0; list-style: none; } .cd-nav__menu-item--level-1 button, .cd-nav__menu-item--level-1 a { text-transform: uppercase; font-weight: 700; } .cd-nav__menu-item--level-2 button, .cd-nav__menu-item--level-2 a { text-transform: initial; } @media (min-width: 1024px) { .cd-nav ul ul { position: absolute; z-index: var(--cd-z-dropdown); top: calc(var(--cd-site-header-height) + 6px); min-width: 200px; max-width: 300px; margin: 0; padding: 20px 0; background: var(--cd-white); box-shadow: 0 1px 8px rgba(var(--cd-rgb-blue-grey--dark), 0.8); } } .cd-nav button { align-items: center; height: 48px; } .cd-nav button[aria-expanded] .cd-icon--arrow-down { margin-top: 0; } /** * CD Footer Menu */ .cd-footer-menu { margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .cd-footer-menu li { display: inline-block; } } @media (min-width: 1024px) { .cd-footer-menu li { margin: 0; margin-inline-end: 32px; } } /** * CD Sidebar resets */ .cd-layout__sidebar ul.cd-gutenberg-blocks { margin: 0; padding: 0; } .cd-layout__sidebar ul.cd-gutenberg-blocks > li { margin: 0; padding: 0; list-style: none; } /* Since Gutenberg outputs

around each block (really??) we have to reset the list style type because browser defaults interpret lists as nested. */ .cd-layout__sidebar ul.cd-gutenberg-blocks ul > li { list-style-type: disc; } /* Override an override for p:first-child/p:last-child found elsewhere in this overrides file. Look in "Content classes" section. */ .cd-layout__sidebar ul.cd-gutenberg-blocks p { margin: 1em 0; } /** * CD Sidebar: Normal */ .cd-layout__sidebar h2 { margin: 1rem 0; letter-spacing: 0.5px; font-size: 1.5rem; font-weight: 500; line-height: 1.3; } .cd-layout__sidebar .cd-gutenberg-blocks .widget:first-child h2 { margin-top: 0; font-weight: 700; } /** * CD Sidebar: Compact */ .cd-content--compact h2 { letter-spacing: 0.5px; text-transform: uppercase; border-bottom: 0 none; font-size: 15px; font-weight: bold; line-height: 1.3; } .cd-content--compact .cd-gutenberg-blocks ul li { margin-block-start: 0.25rem; }