193 changed files with 14968 additions and 56 deletions
@ -0,0 +1,160 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Generic base elements. |
||||||
|
*/ |
||||||
|
|
||||||
|
*, |
||||||
|
*::before, |
||||||
|
*::after { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
html { |
||||||
|
font-family: var(--font-sans); |
||||||
|
font-size: 100%; |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
line-height: var(--line-height-base); |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
margin: 0; |
||||||
|
color: var(--color-text-neutral-medium); |
||||||
|
/*background-color: var(--color--gray-100);*/ |
||||||
|
background-color: #ece8e3; |
||||||
|
/*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");*/ |
||||||
|
/*background-position: top left; [> LTR <]*/ |
||||||
|
} |
||||||
|
|
||||||
|
body.is-fixed { |
||||||
|
position: fixed; |
||||||
|
overflow: hidden; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] body { |
||||||
|
background-position: top right; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
} |
||||||
|
|
||||||
|
a:hover { |
||||||
|
color: var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
a:focus { |
||||||
|
outline: solid 2px currentColor; |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
font-family: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
img, |
||||||
|
video { |
||||||
|
display: block; |
||||||
|
max-width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
audio { |
||||||
|
display: block; |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
h1 { |
||||||
|
letter-spacing: -0.01em; |
||||||
|
font-size: 1.75rem; |
||||||
|
line-height: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
h1 { |
||||||
|
font-size: 2.75rem; |
||||||
|
line-height: var(--sp3); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
letter-spacing: -0.01em; |
||||||
|
font-size: 1.5rem; |
||||||
|
line-height: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
h2 { |
||||||
|
/*font-size: 2.25rem;*/ |
||||||
|
font-size: 2rem; |
||||||
|
line-height: var(--sp3); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
h3 { |
||||||
|
font-size: 1.25rem; |
||||||
|
line-height: var(--sp1-5); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
h3 { |
||||||
|
font-size: 1.5rem; |
||||||
|
line-height: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
h4 { |
||||||
|
font-size: 1.125rem; |
||||||
|
line-height: var(--sp1-5); |
||||||
|
} |
||||||
|
|
||||||
|
h5 { |
||||||
|
font-size: 1rem; |
||||||
|
line-height: var(--sp1-5); |
||||||
|
} |
||||||
|
|
||||||
|
h6 { |
||||||
|
font-size: 0.875rem; |
||||||
|
line-height: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6 { |
||||||
|
margin-block: var(--sp); |
||||||
|
color: var(--color-text-neutral-loud); |
||||||
|
font-family: var(--font-serif); |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6 { |
||||||
|
margin-block: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
ul { |
||||||
|
margin-block-start: 0.25em; |
||||||
|
margin-block-end: 0.25em; |
||||||
|
margin-inline-start: 1.5em; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
list-style-type: disc; |
||||||
|
list-style-image: none; |
||||||
|
} |
||||||
@ -0,0 +1,123 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Base Fonts. |
||||||
|
*/ |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Libre Bodoni'; |
||||||
|
src: url('../../fonts/LibreBodoni-Bold.woff2') format('woff2'), |
||||||
|
url('../../fonts/LibreBodoni-Bold.woff') format('woff'); |
||||||
|
font-weight: bold; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Libre Bodoni'; |
||||||
|
src: url('../../fonts/LibreBodoni-Italic.woff2') format('woff2'), |
||||||
|
url('../../fonts/LibreBodoni-Italic.woff') format('woff'); |
||||||
|
font-weight: normal; |
||||||
|
font-style: italic; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Libre Bodoni'; |
||||||
|
src: url('../../fonts/LibreBodoni-Regular.woff2') format('woff2'), |
||||||
|
url('../../fonts/LibreBodoni-Regular.woff') format('woff'); |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Source Sans 3'; |
||||||
|
src: url('../../fonts/SourceSans3-Bold.woff2') format('woff2'), |
||||||
|
url('../../fonts/SourceSans3-Bold.woff') format('woff'); |
||||||
|
font-weight: bold; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Source Sans 3'; |
||||||
|
src: url('../../fonts/SourceSans3-Regular.woff2') format('woff2'), |
||||||
|
url('../../fonts/SourceSans3-Regular.woff') format('woff'); |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'Source Sans 3'; |
||||||
|
src: url('../../fonts/SourceSans3-Italic.woff2') format('woff2'), |
||||||
|
url('../../fonts/SourceSans3-Italic.woff') format('woff'); |
||||||
|
font-weight: normal; |
||||||
|
font-style: italic; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
*old stuff |
||||||
|
*/ |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: metropolis; |
||||||
|
src: url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2"); |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: metropolis; |
||||||
|
src: url("../../fonts/metropolis/Metropolis-Bold.woff2") format("woff2"); |
||||||
|
font-weight: 700; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: metropolis; |
||||||
|
src: url("../../fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2"); |
||||||
|
font-weight: 600; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
/* lora-regular - latin */ |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: Lora; |
||||||
|
src: local("Lora Regular"), local("Lora-Regular"), url("../../fonts/lora/lora-v14-latin-regular.woff2") format("woff2"); |
||||||
|
font-weight: 400; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
/* lora-italic - latin */ |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: Lora; |
||||||
|
src: local("Lora Italic"), local("Lora-Italic"), url("../../fonts/lora/lora-v14-latin-italic.woff2") format("woff2"); |
||||||
|
font-weight: 400; |
||||||
|
font-style: italic; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
/* lora-700 - latin */ |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: Lora; |
||||||
|
src: local("Lora Bold"), local("Lora-Bold"), url("../../fonts/lora/lora-v14-latin-700.woff2") format("woff2"); |
||||||
|
font-weight: 700; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/* |
||||||
|
* Media query breakpoints. |
||||||
|
* Processed by postcss/postcss-custom-media. |
||||||
|
*/ |
||||||
|
|
||||||
|
/* Navigation related breakpoints */ |
||||||
|
|
||||||
|
/* Grid related breakpoints */ |
||||||
|
|
||||||
|
/* Grid shifts from 6 to 14 columns. */ |
||||||
|
|
||||||
|
/* Width of the entire grid maxes out. */ |
||||||
@ -0,0 +1,140 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Generic base elements. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "media-queries.pcss.css"; |
||||||
|
|
||||||
|
*, |
||||||
|
*::before, |
||||||
|
*::after { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
html { |
||||||
|
font-family: var(--font-sans); |
||||||
|
font-size: 100%; |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
line-height: var(--line-height-base); |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
margin: 0; |
||||||
|
color: var(--color-text-neutral-medium); |
||||||
|
background-color: var(--color--gray-100); |
||||||
|
background-image: url("../../images/background.svg"); |
||||||
|
background-position: top left; /* LTR */ |
||||||
|
|
||||||
|
&.is-fixed { |
||||||
|
position: fixed; |
||||||
|
overflow: hidden; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] body { |
||||||
|
background-position: top right; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
|
||||||
|
&:hover { |
||||||
|
color: var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
&:focus { |
||||||
|
outline: solid 2px currentColor; |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
font-family: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
img, |
||||||
|
video { |
||||||
|
display: block; |
||||||
|
max-width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
audio { |
||||||
|
display: block; |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
h1 { |
||||||
|
letter-spacing: -0.01em; |
||||||
|
font-size: 28px; |
||||||
|
line-height: var(--sp2); |
||||||
|
|
||||||
|
@media (--md) { |
||||||
|
font-size: 60px; |
||||||
|
line-height: var(--sp4); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
letter-spacing: -0.01em; |
||||||
|
font-size: 24px; |
||||||
|
line-height: var(--sp2); |
||||||
|
|
||||||
|
@media (--md) { |
||||||
|
font-size: 36px; |
||||||
|
line-height: var(--sp3); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
h3 { |
||||||
|
font-size: 20px; |
||||||
|
line-height: var(--sp1-5); |
||||||
|
|
||||||
|
@media (--md) { |
||||||
|
font-size: 24px; |
||||||
|
line-height: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
h4 { |
||||||
|
font-size: 18px; |
||||||
|
line-height: var(--sp1-5); |
||||||
|
} |
||||||
|
|
||||||
|
h5 { |
||||||
|
font-size: 16px; |
||||||
|
line-height: var(--sp1-5); |
||||||
|
} |
||||||
|
|
||||||
|
h6 { |
||||||
|
font-size: 14px; |
||||||
|
line-height: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6 { |
||||||
|
margin-block: var(--sp); |
||||||
|
color: var(--color-text-neutral-loud); |
||||||
|
font-family: var(--font-sans); |
||||||
|
font-weight: bold; |
||||||
|
|
||||||
|
@media (--md) { |
||||||
|
margin-block: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
ul { |
||||||
|
margin-block-start: 0.25em; |
||||||
|
margin-block-end: 0.25em; |
||||||
|
margin-inline-start: 1.5em; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
list-style-type: disc; |
||||||
|
list-style-image: none; |
||||||
|
} |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Base Fonts. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "media-queries.pcss.css"; |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: metropolis; |
||||||
|
src: url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2"); |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: metropolis; |
||||||
|
src: url("../../fonts/metropolis/Metropolis-Bold.woff2") format("woff2"); |
||||||
|
font-weight: 700; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: metropolis; |
||||||
|
src: url("../../fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2"); |
||||||
|
font-weight: 600; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
|
||||||
|
/* lora-regular - latin */ |
||||||
|
@font-face { |
||||||
|
font-family: Lora; |
||||||
|
src: |
||||||
|
local("Lora Regular"), |
||||||
|
local("Lora-Regular"), |
||||||
|
url("../../fonts/lora/lora-v14-latin-regular.woff2") format("woff2"); |
||||||
|
font-weight: 400; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
/* lora-italic - latin */ |
||||||
|
@font-face { |
||||||
|
font-family: Lora; |
||||||
|
src: |
||||||
|
local("Lora Italic"), |
||||||
|
local("Lora-Italic"), |
||||||
|
url("../../fonts/lora/lora-v14-latin-italic.woff2") format("woff2"); |
||||||
|
font-weight: 400; |
||||||
|
font-style: italic; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
|
/* lora-700 - latin */ |
||||||
|
@font-face { |
||||||
|
font-family: Lora; |
||||||
|
src: |
||||||
|
local("Lora Bold"), |
||||||
|
local("Lora-Bold"), |
||||||
|
url("../../fonts/lora/lora-v14-latin-700.woff2") format("woff2"); |
||||||
|
font-weight: 700; |
||||||
|
font-style: normal; |
||||||
|
font-display: swap; |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
/* |
||||||
|
* Media query breakpoints. |
||||||
|
* Processed by postcss/postcss-custom-media. |
||||||
|
*/ |
||||||
|
|
||||||
|
@custom-media --sm (min-width: 500px); |
||||||
|
@custom-media --md (min-width: 700px); |
||||||
|
@custom-media --lg (min-width: 1000px); |
||||||
|
@custom-media --xl (min-width: 1300px); |
||||||
|
|
||||||
|
/* Navigation related breakpoints */ |
||||||
|
@custom-media --nav-md (min-width: 500px); |
||||||
|
@custom-media --nav (min-width: 1200px); |
||||||
|
@custom-media --max-nav (max-width: 1200px); |
||||||
|
|
||||||
|
/* Grid related breakpoints */ |
||||||
|
@custom-media --grid-md (min-width: 700px); /* Grid shifts from 6 to 14 columns. */ |
||||||
|
@custom-media --grid-max (min-width: 1440px); /* Width of the entire grid maxes out. */ |
||||||
@ -0,0 +1,142 @@ |
|||||||
|
/* |
||||||
|
Global CSS custom properties. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "./media-queries.pcss.css"; |
||||||
|
|
||||||
|
/* stylelint-disable */ |
||||||
|
|
||||||
|
:root { |
||||||
|
--font-sans: "metropolis", sans-serif; |
||||||
|
--font-serif: "Lora", "georgia", serif; |
||||||
|
|
||||||
|
/* Typography helpers. */ |
||||||
|
--font-size-base: 16px; |
||||||
|
--font-size-l: 18px; |
||||||
|
--font-size-s: 14px; |
||||||
|
--font-size-xs: 13px; |
||||||
|
--font-size-xxs: 12px; |
||||||
|
--line-height-base: 27px; |
||||||
|
--line-height-s: 18px; |
||||||
|
|
||||||
|
/* Layout helpers. */ |
||||||
|
--max-width: 1350px; |
||||||
|
--max-bg-color: 1570px; /* Width to which the background color extends to. */ |
||||||
|
--sp: 18px; |
||||||
|
--content-left: 90px; |
||||||
|
--site-header-height-wide: var(--sp10); |
||||||
|
--container-padding: var(--sp); /* Inline padding on .container elements. */ |
||||||
|
|
||||||
|
@media (--nav) { |
||||||
|
--container-padding: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Grid helpers. |
||||||
|
* |
||||||
|
* These variables help authors apply widths and negative margins to break items out of |
||||||
|
* the grid, while still conforming to the larger grid system. |
||||||
|
*/ |
||||||
|
--scrollbar-width: 0px; /* Unit must be specified here for calc() to work properly.*/ |
||||||
|
--grid-col-count: 6; |
||||||
|
--grid-gap: var(--sp); |
||||||
|
--grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */ |
||||||
|
--grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */ |
||||||
|
--grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); /* Width of a grid column. */ |
||||||
|
|
||||||
|
@media (--md) { |
||||||
|
--grid-col-count: 14; |
||||||
|
--grid-gap: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
@media (--lg) { |
||||||
|
--scrollbar-width: 15px; /* Approximate width of a scrollbar. Doesn't have to be perfect. */ |
||||||
|
} |
||||||
|
|
||||||
|
@media (--nav) { |
||||||
|
--grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4)); |
||||||
|
} |
||||||
|
|
||||||
|
@media (--grid-max) { |
||||||
|
--grid-full-width: calc(var(--max-width) - var(--sp4)); |
||||||
|
} |
||||||
|
|
||||||
|
/* Layout helpers */ |
||||||
|
--sp0-25: calc(0.25 * var(--sp)); |
||||||
|
--sp0-5: calc(0.5 * var(--sp)); |
||||||
|
--sp0-75: calc(0.75 * var(--sp)); |
||||||
|
--sp1: calc(1 * var(--sp)); |
||||||
|
--sp1-5: calc(1.5 * var(--sp)); |
||||||
|
--sp2: calc(2 * var(--sp)); |
||||||
|
--sp2-5: calc(2.5 * var(--sp)); |
||||||
|
--sp3: calc(3 * var(--sp)); |
||||||
|
--sp4: calc(4 * var(--sp)); |
||||||
|
--sp5: calc(5 * var(--sp)); |
||||||
|
--sp6: calc(6 * var(--sp)); |
||||||
|
--sp7: calc(7 * var(--sp)); |
||||||
|
--sp8: calc(8 * var(--sp)); |
||||||
|
--sp9: calc(9 * var(--sp)); |
||||||
|
--sp10: calc(10 * var(--sp)); |
||||||
|
--sp11: calc(11 * var(--sp)); |
||||||
|
--sp12: calc(12 * var(--sp)); |
||||||
|
|
||||||
|
/** |
||||||
|
* Gray colors. |
||||||
|
* |
||||||
|
* Color number roughly corresponds to its luminosity. |
||||||
|
*/ |
||||||
|
--color--gray-hue: 201; |
||||||
|
--color--gray-saturation: 15%; |
||||||
|
--color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */ |
||||||
|
--color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%); |
||||||
|
--color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */ |
||||||
|
--color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */ |
||||||
|
--color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */ |
||||||
|
--color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */ |
||||||
|
--color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */ |
||||||
|
--color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */ |
||||||
|
--color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */ |
||||||
|
--color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%); /* Gray light 2 */ |
||||||
|
|
||||||
|
/** |
||||||
|
* Primary colors. |
||||||
|
* |
||||||
|
* Color number roughly corresponds to its luminosity. |
||||||
|
*/ |
||||||
|
--color--primary-hue: 202; |
||||||
|
--color--primary-saturation: 79%; |
||||||
|
--color--primary-lightness: 50; |
||||||
|
--color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness))))); |
||||||
|
--color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */ |
||||||
|
--color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */ |
||||||
|
--color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */ |
||||||
|
--color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness)))))); /* Blue very bright */ |
||||||
|
|
||||||
|
/** |
||||||
|
* Variables specific to text. |
||||||
|
*/ |
||||||
|
--color-text-neutral-soft: var(--color--gray-45); |
||||||
|
--color-text-neutral-medium: var(--color--gray-20); |
||||||
|
--color-text-neutral-loud: var(--color--gray-5); |
||||||
|
|
||||||
|
--color-text-primary-medium: var(--color--primary-40); |
||||||
|
--color-text-primary-loud: var(--color--primary-30); |
||||||
|
|
||||||
|
/** |
||||||
|
* Named Colors. |
||||||
|
*/ |
||||||
|
--color--black: #000; /* Black */ |
||||||
|
--color--white: #fff; /* White */ |
||||||
|
--color--red: #e33f1e; /* Red */ |
||||||
|
--color--gold: #fdca40; /* Gold */ |
||||||
|
--color--green: #3fa21c; /* Green */ |
||||||
|
|
||||||
|
/* Header */ |
||||||
|
--header-height-wide-when-fixed: calc(6 * var(--sp)); |
||||||
|
|
||||||
|
/* Width of slide out navigation */ |
||||||
|
--mobile-nav-width: 500px; |
||||||
|
|
||||||
|
/* Border radius */ |
||||||
|
--border-radius: 3px; |
||||||
|
} |
||||||
@ -0,0 +1,170 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/* |
||||||
|
Global CSS custom properties. |
||||||
|
*/ |
||||||
|
|
||||||
|
/* stylelint-disable */ |
||||||
|
|
||||||
|
:root { |
||||||
|
/*--font-sans: "metropolis", sans-serif;*/ |
||||||
|
--font-sans: "metropolis", sans-serif; |
||||||
|
/*--font-serif: "Lora", "georgia", serif;*/ |
||||||
|
--font-serif: "Lora", "georgia", serif; |
||||||
|
|
||||||
|
/* Typography helpers. */ |
||||||
|
--font-size-base: 1rem; |
||||||
|
--font-size-l: 1.125rem; |
||||||
|
--font-size-s: 0.875rem; |
||||||
|
--font-size-xs: 0.8125rem; |
||||||
|
--font-size-xxs: 0.75rem; |
||||||
|
--line-height-base: 1.6875rem; |
||||||
|
--line-height-s: 1.125rem; |
||||||
|
|
||||||
|
/* Layout helpers. */ |
||||||
|
/*--max-width: 84.375rem;*/ |
||||||
|
--max-width: 89rem; |
||||||
|
--max-bg-color: 98.125rem; /* Width to which the background color extends to. */ |
||||||
|
--sp: 1.125rem; |
||||||
|
/*--content-left: 5.625rem;*/ |
||||||
|
/*--content-left: 5.625rem;*/ |
||||||
|
--content-left: 5.625rem; |
||||||
|
--site-header-height-wide: var(--sp10); |
||||||
|
--container-padding: var(--sp); |
||||||
|
|
||||||
|
/** |
||||||
|
* Grid helpers. |
||||||
|
* |
||||||
|
* These variables help authors apply widths and negative margins to break items out of |
||||||
|
* the grid, while still conforming to the larger grid system. |
||||||
|
*/ |
||||||
|
--scrollbar-width: 0px; /* Unit must be specified here for calc() to work properly.*/ |
||||||
|
--grid-col-count: 6; |
||||||
|
--grid-gap: var(--sp); |
||||||
|
--grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */ |
||||||
|
--grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */ |
||||||
|
--grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); |
||||||
|
|
||||||
|
/* Layout helpers */ |
||||||
|
--sp0-25: calc(0.25 * var(--sp)); |
||||||
|
--sp0-5: calc(0.5 * var(--sp)); |
||||||
|
--sp0-75: calc(0.75 * var(--sp)); |
||||||
|
--sp1: calc(1 * var(--sp)); |
||||||
|
--sp1-5: calc(1.5 * var(--sp)); |
||||||
|
--sp2: calc(2 * var(--sp)); |
||||||
|
--sp2-5: calc(2.5 * var(--sp)); |
||||||
|
--sp3: calc(3 * var(--sp)); |
||||||
|
--sp4: calc(4 * var(--sp)); |
||||||
|
--sp5: calc(5 * var(--sp)); |
||||||
|
--sp6: calc(6 * var(--sp)); |
||||||
|
--sp7: calc(7 * var(--sp)); |
||||||
|
--sp8: calc(8 * var(--sp)); |
||||||
|
--sp9: calc(9 * var(--sp)); |
||||||
|
--sp10: calc(10 * var(--sp)); |
||||||
|
--sp11: calc(11 * var(--sp)); |
||||||
|
--sp12: calc(12 * var(--sp)); |
||||||
|
|
||||||
|
/** |
||||||
|
* Gray colors. |
||||||
|
* |
||||||
|
* Color number roughly corresponds to its luminosity. |
||||||
|
*/ |
||||||
|
--color--gray-hue: 201; |
||||||
|
--color--gray-saturation: 15%; |
||||||
|
--color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */ |
||||||
|
--color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%); |
||||||
|
--color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */ |
||||||
|
--color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */ |
||||||
|
--color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */ |
||||||
|
--color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */ |
||||||
|
--color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */ |
||||||
|
--color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */ |
||||||
|
--color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */ |
||||||
|
--color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%); |
||||||
|
|
||||||
|
/** |
||||||
|
* Primary colors. |
||||||
|
* |
||||||
|
* Color number roughly corresponds to its luminosity. |
||||||
|
*/ |
||||||
|
--color--primary-hue: 202; |
||||||
|
--color--primary-saturation: 79%; |
||||||
|
--color--primary-lightness: 50; |
||||||
|
--color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness))))); |
||||||
|
--color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */ |
||||||
|
--color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */ |
||||||
|
--color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */ |
||||||
|
--color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness)))))); |
||||||
|
|
||||||
|
/** |
||||||
|
* Variables specific to text. |
||||||
|
*/ |
||||||
|
--color-text-neutral-soft: var(--color--gray-45); |
||||||
|
--color-text-neutral-medium: var(--color--gray-20); |
||||||
|
--color-text-neutral-loud: var(--color--gray-5); |
||||||
|
|
||||||
|
--color-text-primary-medium: var(--color--primary-40); |
||||||
|
--color-text-primary-loud: var(--color--primary-30); |
||||||
|
|
||||||
|
/** |
||||||
|
* Named Colors. |
||||||
|
*/ |
||||||
|
--color--black: #000; /* Black */ |
||||||
|
--color--white: #fff; /* White */ |
||||||
|
--color--red: #e33f1e; /* Red */ |
||||||
|
--color--gold: #fdca40; /* Gold */ |
||||||
|
--color--green: #3fa21c; |
||||||
|
|
||||||
|
/* Header */ |
||||||
|
--header-height-wide-when-fixed: calc(6 * var(--sp)); |
||||||
|
|
||||||
|
/* Width of slide out navigation */ |
||||||
|
--mobile-nav-width: 31.25rem; |
||||||
|
|
||||||
|
/* Border radius */ |
||||||
|
--border-radius: 0.1875rem; /* Inline padding on .container elements. */ |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
:root { |
||||||
|
--container-padding: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Green */ |
||||||
|
|
||||||
|
/* Width of a grid column. */ |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
:root { |
||||||
|
--grid-col-count: 14; |
||||||
|
--grid-gap: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Blue very bright */ |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
:root { |
||||||
|
--scrollbar-width: 0.9375rem; /* Approximate width of a scrollbar. Doesn't have to be perfect. */ |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Gray light 2 */ |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
:root { |
||||||
|
--grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 90rem) { |
||||||
|
:root { |
||||||
|
--grid-full-width: calc(var(--max-width) - var(--sp4)); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
.action-links { |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
.action-links li { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.action-links li a { |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
} |
||||||
|
.action-links-item { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Visual styles for ajax-progress throbber. |
||||||
|
*/ |
||||||
|
|
||||||
|
.ajax-progress { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Throbber. |
||||||
|
*/ |
||||||
|
|
||||||
|
.ajax-progress-throbber { |
||||||
|
position: relative; |
||||||
|
display: inline-flex; |
||||||
|
align-content: center; |
||||||
|
height: 1.125rem; |
||||||
|
margin-block-start: -0.1875rem; |
||||||
|
margin-block-end: 0; |
||||||
|
margin-inline-start: var(--sp0-5); |
||||||
|
margin-inline-end: var(--sp0-5); |
||||||
|
vertical-align: middle; |
||||||
|
white-space: nowrap; |
||||||
|
line-height: 1.125rem; |
||||||
|
} |
||||||
|
|
||||||
|
.ajax-progress-throbber .throbber { |
||||||
|
width: 1.125rem; |
||||||
|
height: 1.125rem; |
||||||
|
border-width: 2px; |
||||||
|
border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
.ajax-progress-throbber .message { |
||||||
|
display: inline-block; |
||||||
|
padding-inline-start: var(--sp0-5); |
||||||
|
font-size: var(--font-size-s); |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Full screen throbber. |
||||||
|
*/ |
||||||
|
|
||||||
|
.ajax-progress-fullscreen { |
||||||
|
position: fixed; |
||||||
|
z-index: 1000; |
||||||
|
inset-block-start: 50%; |
||||||
|
inset-inline-start: 50%; |
||||||
|
width: 3.5rem; |
||||||
|
height: 3.5rem; |
||||||
|
margin: -1.75rem; |
||||||
|
border: 1px solid var(--color--gray-70); |
||||||
|
border-radius: 3.5rem; |
||||||
|
background-color: var(--color--white); |
||||||
|
box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */ |
||||||
|
} |
||||||
|
|
||||||
|
.ajax-progress-fullscreen::before { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 50%; |
||||||
|
inset-inline-start: 50%; |
||||||
|
width: 1.75rem; |
||||||
|
height: 1.75rem; |
||||||
|
margin: -0.875rem; |
||||||
|
content: ""; |
||||||
|
border-width: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .ajax-progress-fullscreen { |
||||||
|
box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Common styles for all kinds of throbbers. |
||||||
|
*/ |
||||||
|
|
||||||
|
.ajax-progress-throbber .throbber, |
||||||
|
.ajax-progress-fullscreen::before { |
||||||
|
animation: olives-throbber 0.75s linear infinite; |
||||||
|
border-style: solid dotted solid solid; |
||||||
|
border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50); |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove margin from ajax throbbers following buttons because buttons already |
||||||
|
* have a large margin set. |
||||||
|
*/ |
||||||
|
|
||||||
|
html.js .button:not(.js-hide) + .ajax-progress-throbber { |
||||||
|
margin-inline-start: 0; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes olives-throbber { |
||||||
|
0% { |
||||||
|
transform: rotateZ(0); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
transform: rotateZ(360deg); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Visual styles for autocomplete input field. |
||||||
|
*/ |
||||||
|
|
||||||
|
[type].form-autocomplete { |
||||||
|
padding-inline-end: var(--sp3); |
||||||
|
background-color: var(--color--white); |
||||||
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18.8' viewBox='0 0 18 18.8'%3e %3cpath fill='%237e96a7' d='M17.8,17.4l-3.6-3.6c1.4-1.5,2.2-3.4,2.2-5.6c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.8,0,3.4-0.6,4.7-1.5l3.7,3.7c0.3,0.3,0.8,0.3,1.2,0C18.1,18.3,18.1,17.7,17.8,17.4z M8.2,14.7c-3.6,0-6.5-2.9-6.5-6.5s2.9-6.5,6.5-6.5s6.5,2.9,6.5,6.5S11.8,14.7,8.2,14.7z'/%3e%3c/svg%3e"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: right var(--sp1) center; /* LTR */ |
||||||
|
} |
||||||
|
|
||||||
|
.form-autocomplete[type]:disabled { |
||||||
|
background-color: var(--color--gray-100); |
||||||
|
} |
||||||
|
|
||||||
|
.form-autocomplete.ui-autocomplete-loading[type] { |
||||||
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 10 10'%3e %3cstyle type='text/css'%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7d100%25%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7dellipse%7banimation:s 1s linear infinite%7d%3c/style%3e %3cg transform='translate(5 5)'%3e %3cellipse fill='none' ry='4' rx='4' cy='5' cx='5' stroke='%237e96a7' stroke-width='1' stroke-dashoffset='6.125' stroke-dasharray='25' transform='translate(-5 -5)'/%3e %3c/g%3e%3c/svg%3e"); |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .form-autocomplete[type] { |
||||||
|
background-position: left var(--sp1) center; |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Block styling. |
||||||
|
*/ |
||||||
|
|
||||||
|
.block__title { |
||||||
|
margin-block: 0 var(--sp); |
||||||
|
letter-spacing: 0.02em; |
||||||
|
color: var(--color-text-neutral-loud); |
||||||
|
/*font-size: var(--font-size-l);*/ |
||||||
|
font-size: 24px; |
||||||
|
line-height: var(--sp); |
||||||
|
border-bottom: 4px double; |
||||||
|
padding-bottom: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.site-footer .block__title { |
||||||
|
color: var(--color--gray-65); |
||||||
|
} |
||||||
|
.region--sidebar .block { |
||||||
|
|
||||||
|
/*background: #f6f8f8;*/ |
||||||
|
background: #ece8e3; |
||||||
|
padding: 1rem; |
||||||
|
border-radius: 5px; |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Book module styling. |
||||||
|
*/ |
||||||
|
|
||||||
|
.book-pager { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
margin-block-start: 0 var(--sp); |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0 var(--sp); |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
border-block-end: solid 1px var(--color--primary-40); |
||||||
|
} |
||||||
|
|
||||||
|
.book-pager__item { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
.book-pager__item { |
||||||
|
flex: 0 0 33.33%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
.book-pager__item--center { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
.book-pager__item--next { |
||||||
|
margin-inline-start: auto; |
||||||
|
text-align: end; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.book-pager__link { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
font-family: var(--font-serif); |
||||||
|
font-size: 1.125rem; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.book-pager__link--previous::before { |
||||||
|
display: block; |
||||||
|
width: var(--sp0-5); |
||||||
|
height: var(--sp0-5); |
||||||
|
margin-inline-end: 0.25em; |
||||||
|
content: ""; |
||||||
|
transform: rotate(-45deg); |
||||||
|
border-block-start: solid 0.1875rem currentColor; |
||||||
|
border-inline-start: solid 0.1875rem currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
.book-pager__link--next::after { |
||||||
|
display: block; |
||||||
|
width: var(--sp0-5); |
||||||
|
height: var(--sp0-5); |
||||||
|
margin-inline-start: 0.25em; |
||||||
|
content: ""; |
||||||
|
transform: rotate(135deg); |
||||||
|
border-block-start: solid 0.1875rem currentColor; |
||||||
|
border-inline-start: solid 0.1875rem currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
.book-navigation__menu { |
||||||
|
margin-block: var(--sp2); |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.book-navigation__item { |
||||||
|
margin-block: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .book-pager__link--previous::before { |
||||||
|
transform: rotate(45deg); |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .book-pager__link--next::after { |
||||||
|
transform: rotate(-135deg); |
||||||
|
} |
||||||
@ -0,0 +1,129 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Breadcrumb region. |
||||||
|
*/ |
||||||
|
|
||||||
|
.breadcrumb { |
||||||
|
position: relative; |
||||||
|
font-size: 0.875rem; |
||||||
|
font-weight: bold; |
||||||
|
line-height: var(--sp1); |
||||||
|
|
||||||
|
/* Shadow on the right side of breadcrumbs for narrow screens. */ |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 0; |
||||||
|
inset-inline-end: calc(var(--sp1) * -1); |
||||||
|
width: var(--sp3); |
||||||
|
height: var(--sp2); |
||||||
|
content: ""; |
||||||
|
background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); /* LTR */ |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.breadcrumb::after { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.breadcrumb { |
||||||
|
position: static; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .breadcrumb::after { |
||||||
|
background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb__content { |
||||||
|
overflow: auto; |
||||||
|
margin-block-start: calc(var(--sp0-5) * -1); |
||||||
|
margin-block-end: calc(var(--sp0-5) * -1); |
||||||
|
margin-inline-start: calc(var(--sp0-5) * -1); |
||||||
|
margin-inline-end: calc(var(--sp1) * -1); |
||||||
|
padding-block-start: var(--sp0-5); |
||||||
|
padding-block-end: var(--sp0-5); |
||||||
|
padding-inline-start: var(--sp0-5); |
||||||
|
-webkit-overflow-scrolling: touch; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.breadcrumb__content { |
||||||
|
margin-inline-end: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb__list { |
||||||
|
overflow-x: auto; |
||||||
|
width: max-content; |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: calc(var(--sp1) * -1); |
||||||
|
margin-inline-end: calc(var(--sp1) * -1); |
||||||
|
padding-block: 0 var(--sp1); |
||||||
|
padding-inline-start: var(--sp1); |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.breadcrumb__list { |
||||||
|
overflow: visible; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block-end: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
white-space: normal; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb__item { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb__item:nth-child(n + 2)::before { |
||||||
|
display: inline-block; |
||||||
|
width: 0.5rem; |
||||||
|
height: 0.5rem; |
||||||
|
margin-inline: 1rem 1.25rem; |
||||||
|
content: ""; |
||||||
|
transform: rotate(45deg); /* LTR */ |
||||||
|
border-block-start: 2px solid var(--color--gray-45); |
||||||
|
border-inline-end: 2px solid var(--color--gray-45); |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb__item:last-child { |
||||||
|
margin-inline-end: var(--sp3); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.breadcrumb__item:last-child { |
||||||
|
margin-inline-end: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .breadcrumb__item:nth-child(n + 2)::before { |
||||||
|
transform: rotate(-45deg); |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb__link { |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb__link:hover, |
||||||
|
.breadcrumb__link:focus { |
||||||
|
-webkit-text-decoration: underline; |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
@ -0,0 +1,143 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Buttons. |
||||||
|
*/ |
||||||
|
|
||||||
|
.button { |
||||||
|
display: inline-block; |
||||||
|
height: var(--sp2); |
||||||
|
margin-block: var(--sp1); |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: var(--sp1); |
||||||
|
padding-block: calc((var(--sp3) - var(--line-height-s)) / 2); |
||||||
|
padding-inline: var(--sp1-5); |
||||||
|
cursor: pointer; |
||||||
|
text-align: center; |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
border: solid 2px currentColor; |
||||||
|
border-radius: var(--border-radius); |
||||||
|
background-color: var(--color--white); |
||||||
|
font-family: var(--font-sans); |
||||||
|
font-size: var(--font-size-l); |
||||||
|
font-weight: 700; |
||||||
|
-webkit-appearance: none; |
||||||
|
appearance: none; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
} |
||||||
|
|
||||||
|
.button:hover, |
||||||
|
.button:focus { |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-primary-loud); |
||||||
|
border: solid 2px currentColor; |
||||||
|
background: none; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
|
||||||
|
.button:focus { |
||||||
|
outline: 2px solid var(--color--primary-60); |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.button:active { |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
border-color: currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
.button:disabled, |
||||||
|
.button.is-disabled { |
||||||
|
cursor: default; |
||||||
|
color: var(--color--gray-90); |
||||||
|
border-color: var(--color--gray-90); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
IE11 doesn't work properly on button elements so we only do |
||||||
|
inline-flex on modern browsers. |
||||||
|
*/ |
||||||
|
|
||||||
|
@supports (display: inline-flex) { |
||||||
|
.button { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
/* Top padding accounts for font not being vertically centered within line-height. */ |
||||||
|
padding-block: 1px 0; |
||||||
|
padding-inline: var(--sp1-5); |
||||||
|
line-height: var(--line-height-s); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* No margin if is part of a menu. */ |
||||||
|
|
||||||
|
.menu .button { |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.button--small { |
||||||
|
height: var(--sp2-5); |
||||||
|
padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2); |
||||||
|
padding-inline: var(--sp); |
||||||
|
font-size: var(--font-size-base); |
||||||
|
line-height: normal; |
||||||
|
} |
||||||
|
|
||||||
|
.button--primary { |
||||||
|
color: var(--color--white); |
||||||
|
border-color: var(--color--primary-40); |
||||||
|
background-color: var(--color--primary-40); |
||||||
|
} |
||||||
|
|
||||||
|
.button--primary:hover, |
||||||
|
.button--primary:focus { |
||||||
|
color: var(--color--white); |
||||||
|
border-color: var(--color--primary-30); |
||||||
|
background-color: var(--color--primary-30); |
||||||
|
} |
||||||
|
|
||||||
|
.button--primary:active { |
||||||
|
color: var(--color--white); |
||||||
|
background-color: var(--color--primary-40); |
||||||
|
} |
||||||
|
|
||||||
|
.button--primary:disabled, |
||||||
|
.button--primary.is-disabled { |
||||||
|
color: var(--color--white); |
||||||
|
background-color: var(--color--gray-90); |
||||||
|
} |
||||||
|
|
||||||
|
.button--icon-back { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.button--icon-back::before { |
||||||
|
display: block; |
||||||
|
width: 0.5em; |
||||||
|
height: 0.5em; |
||||||
|
margin-inline-end: 0.5em; |
||||||
|
content: ""; |
||||||
|
transform: rotate(45deg); /* LTR */ |
||||||
|
border-block-end: solid 2px currentColor; |
||||||
|
border-inline-start: solid 2px currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .button--icon-back::before { |
||||||
|
transform: rotate(-45deg); |
||||||
|
} |
||||||
|
|
||||||
|
.shepherd-cancel-icon { |
||||||
|
font-size: 1.5em; |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* CKE Dialogs. |
||||||
|
*/ |
||||||
|
|
||||||
|
select.cke_dialog_ui_input_select { |
||||||
|
-webkit-appearance: menulist; |
||||||
|
appearance: menulist; |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Color picker styles. These appear within theme settings when selecting a custom color. |
||||||
|
*/ |
||||||
|
|
||||||
|
[data-drupal-selector="olives-color-picker"] input[type="color"] { |
||||||
|
margin-left: 0.8125rem; |
||||||
|
vertical-align: bottom; |
||||||
|
} |
||||||
@ -0,0 +1,258 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Comment section and individual comments. |
||||||
|
*/ |
||||||
|
|
||||||
|
:root { |
||||||
|
--comment-indentation: var(--sp2); |
||||||
|
--comment-indentation--md: var(--sp4); |
||||||
|
} |
||||||
|
|
||||||
|
.comment--level-1 { |
||||||
|
border-block-start: 2px solid var(--color--gray-95); |
||||||
|
} |
||||||
|
|
||||||
|
.comment--level-1 ~ .comment--level-1 { |
||||||
|
margin-block-start: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
.comments__title { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-block-start: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.comments__count { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
min-width: 2.125rem; |
||||||
|
margin-block-start: 0; |
||||||
|
margin-block-end: var(--sp0-5); |
||||||
|
margin-inline-start: var(--sp); |
||||||
|
margin-inline-end: var(--sp); |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0.3125rem; |
||||||
|
padding-inline-end: 0.3125rem; |
||||||
|
text-align: center; |
||||||
|
color: var(--color--white); |
||||||
|
border-radius: 2px; |
||||||
|
background-color: var(--color--primary-40); |
||||||
|
font-size: 0.6875rem; |
||||||
|
line-height: 1.3125rem; |
||||||
|
} |
||||||
|
|
||||||
|
.comments__count::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-end: -0.4375rem; |
||||||
|
inset-inline-start: 0.5rem; |
||||||
|
width: 0; |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
border-block-start: 0.4375rem solid var(--color--primary-40); |
||||||
|
border-inline-end: 0.5rem solid transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.comment-form { |
||||||
|
padding-block-end: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
.add-comment__form { |
||||||
|
padding-inline-start: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.comment { |
||||||
|
position: relative; |
||||||
|
padding-block-start: var(--sp2); |
||||||
|
padding-inline-start: var(--sp3); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.comment { |
||||||
|
padding-inline-start: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.comment__text-content { |
||||||
|
font-size: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.comment__text-content blockquote { |
||||||
|
font-size: 1.3125rem; |
||||||
|
line-height: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
/* Override for .field:not(:last-child) */ |
||||||
|
|
||||||
|
.comment__text-content:not(:last-child) { |
||||||
|
margin-block-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.comment__links { |
||||||
|
margin-block: var(--sp) 0; |
||||||
|
} |
||||||
|
|
||||||
|
.comment__links-link { |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
font-size: 0.875rem; |
||||||
|
font-weight: bold; |
||||||
|
line-height: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
.comment__links-link:hover { |
||||||
|
-webkit-text-decoration: underline; |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
.add-comment__picture-wrapper { |
||||||
|
inset-block-start: calc(var(--line-height-base) + var(--sp0-5)); |
||||||
|
} |
||||||
|
|
||||||
|
.add-comment__picture, |
||||||
|
.comment__picture { |
||||||
|
position: absolute; |
||||||
|
inset-inline-start: 0; |
||||||
|
overflow: hidden; |
||||||
|
width: var(--sp2); |
||||||
|
height: var(--sp2); |
||||||
|
border-radius: 50%; |
||||||
|
background-color: var(--color--gray-95); |
||||||
|
} |
||||||
|
|
||||||
|
.add-comment__picture *:not(img), |
||||||
|
.comment__picture *:not(img) { |
||||||
|
display: inherit; |
||||||
|
width: inherit; |
||||||
|
height: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
.add-comment__picture img, |
||||||
|
.comment__picture img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
|
||||||
|
/* @TODO: create image-style for profile's avatar to have image squared by default. */ |
||||||
|
} |
||||||
|
|
||||||
|
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) { |
||||||
|
.add-comment__picture img, |
||||||
|
.comment__picture img { |
||||||
|
position: absolute; |
||||||
|
/* stylelint-disable csstools/use-logical */ |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
/* stylelint-enable csstools/use-logical */ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.add-comment__picture, |
||||||
|
.comment__picture { |
||||||
|
inset-inline-start: calc(-1 * var(--sp5)); |
||||||
|
width: var(--sp3); |
||||||
|
height: var(--sp3); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.indented .comment__picture { |
||||||
|
inset-inline-start: calc(-1 * var(--sp4)); |
||||||
|
width: var(--sp2); |
||||||
|
height: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.comment__meta * { |
||||||
|
display: inline; |
||||||
|
} |
||||||
|
|
||||||
|
.comment__author { |
||||||
|
margin-inline-end: var(--sp); |
||||||
|
font-family: var(--font-sans); |
||||||
|
font-size: 1rem; |
||||||
|
font-weight: 700; |
||||||
|
line-height: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
.comment__author a { |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.comment__time { |
||||||
|
margin: 0; |
||||||
|
color: var(--color-text-neutral-soft); |
||||||
|
font-family: var(--font-sans); |
||||||
|
font-size: 0.875rem; |
||||||
|
line-height: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
.indented { |
||||||
|
margin-inline-start: var(--comment-indentation); |
||||||
|
} |
||||||
|
|
||||||
|
.indented > .comment:not(:last-of-type, .has-children)::before { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: var(--sp2); |
||||||
|
inset-inline-start: calc(-1 * var(--comment-indentation) - var(--sp)); /* Comment's padding-top */ |
||||||
|
width: 0; |
||||||
|
height: 100%; |
||||||
|
content: ""; |
||||||
|
border-inline-start: solid 1px var(--color--gray-95); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.indented > .comment:not(:last-of-type, .has-children)::before { |
||||||
|
inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.indented { |
||||||
|
margin-inline-start: var(--comment-indentation--md); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.show-hide-btn { |
||||||
|
margin-block-start: var(--sp2); |
||||||
|
margin-block-end: 0; |
||||||
|
margin-inline-start: var(--sp3); |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
cursor: pointer; |
||||||
|
color: var(--color-text-neutral-medium); |
||||||
|
border: 0; |
||||||
|
background: none; |
||||||
|
font-size: 0.875rem; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 1.125rem; |
||||||
|
-webkit-appearance: none; |
||||||
|
appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
.show-hide-btn[aria-expanded="true"]::after { |
||||||
|
content: "\0020 -"; |
||||||
|
} |
||||||
|
|
||||||
|
.show-hide-btn[aria-expanded="false"]::after { |
||||||
|
content: "\0020 +"; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.show-hide-btn { |
||||||
|
margin-inline-start: 0; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Inline items. |
||||||
|
*/ |
||||||
|
|
||||||
|
.container-inline div, |
||||||
|
.container-inline label { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.form-items-inline { |
||||||
|
margin-block: -0.125em; /* 2px */ |
||||||
|
} |
||||||
|
|
||||||
|
.form-items-inline > .form-item { |
||||||
|
display: inline-block; |
||||||
|
margin-block: 0.125em; |
||||||
|
} |
||||||
@ -0,0 +1,94 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Styles for content moderation toolbar. |
||||||
|
*/ |
||||||
|
|
||||||
|
.entity-moderation-form { |
||||||
|
flex-direction: column; |
||||||
|
padding-inline-start: var(--sp); |
||||||
|
padding-inline-end: var(--sp); |
||||||
|
border: 1px solid var(--color--gray-95); |
||||||
|
background-color: var(--color--gray-100); |
||||||
|
} |
||||||
|
|
||||||
|
.entity-moderation-form select, |
||||||
|
.entity-moderation-form input:not([type="submit"]) { |
||||||
|
background-color: var(--color--white); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.entity-moderation-form { |
||||||
|
flex-direction: row; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.entity-moderation-form__item { |
||||||
|
flex-basis: 0; |
||||||
|
margin-inline-end: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
.entity-moderation-form__item:last-child { |
||||||
|
align-self: flex-start; |
||||||
|
margin-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.entity-moderation-form__item:last-child { |
||||||
|
align-self: flex-end; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.layout--content-narrow .entity-moderation-form, |
||||||
|
.layout--pass--content-narrow > * .entity-moderation-form, |
||||||
|
.layout--content-medium .entity-moderation-form, |
||||||
|
.layout--pass--content-medium > * .entity-moderation-form { |
||||||
|
width: 100%; |
||||||
|
margin-inline-start: 0; |
||||||
|
} |
||||||
|
|
||||||
|
@supports (width: max-content) { |
||||||
|
.layout--content-narrow .entity-moderation-form, |
||||||
|
.layout--pass--content-narrow > * .entity-moderation-form, |
||||||
|
.layout--content-medium .entity-moderation-form, |
||||||
|
.layout--pass--content-medium > * .entity-moderation-form { |
||||||
|
width: max-content; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.layout--content-narrow .entity-moderation-form, |
||||||
|
.layout--pass--content-narrow > * .entity-moderation-form, |
||||||
|
.layout--content-medium .entity-moderation-form, |
||||||
|
.layout--pass--content-medium > * .entity-moderation-form { |
||||||
|
width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap)); |
||||||
|
margin-block: var(--sp2) var(--sp4); |
||||||
|
margin-inline-start: calc(-2 * (var(--grid-col-width) + var(--grid-gap))); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.layout--content-narrow .entity-moderation-form, |
||||||
|
.layout--pass--content-narrow > * .entity-moderation-form, |
||||||
|
.layout--content-medium .entity-moderation-form, |
||||||
|
.layout--pass--content-medium > * .entity-moderation-form { |
||||||
|
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap)); |
||||||
|
margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap))); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 90rem) { |
||||||
|
.layout--content-narrow .entity-moderation-form, |
||||||
|
.layout--pass--content-narrow > * .entity-moderation-form, |
||||||
|
.layout--content-medium .entity-moderation-form, |
||||||
|
.layout--pass--content-medium > * .entity-moderation-form { |
||||||
|
width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap)); |
||||||
|
margin-inline-start: 0; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,133 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Collapsible details. |
||||||
|
*/ |
||||||
|
|
||||||
|
:root { |
||||||
|
--details-border-width: 1px; |
||||||
|
--details-summary-transition: background-color 0.12s ease-in-out; |
||||||
|
} |
||||||
|
|
||||||
|
.olives-details { |
||||||
|
display: block; |
||||||
|
margin-block: var(--sp1); |
||||||
|
color: inherit; |
||||||
|
border: var(--details-border-width) solid var(--color--gray-95); |
||||||
|
border-radius: var(--border-radius); |
||||||
|
box-shadow: 0 1px 4px var(--color--gray-90); |
||||||
|
} |
||||||
|
|
||||||
|
/* Details summary styles */ |
||||||
|
|
||||||
|
.olives-details__summary { |
||||||
|
position: relative; |
||||||
|
padding-block: var(--sp1); |
||||||
|
padding-inline-start: var(--sp2); |
||||||
|
padding-inline-end: var(--sp1); |
||||||
|
list-style: none; |
||||||
|
cursor: pointer; |
||||||
|
transition: var(--details-summary-transition); |
||||||
|
word-wrap: break-word; |
||||||
|
-webkit-hyphens: auto; |
||||||
|
hyphens: auto; |
||||||
|
color: inherit; |
||||||
|
background-color: var(--color--gray-100); |
||||||
|
font-size: var(--line-height-s); |
||||||
|
font-weight: 700; |
||||||
|
line-height: var(--sp1); |
||||||
|
} |
||||||
|
|
||||||
|
/* Arrow icon */ |
||||||
|
|
||||||
|
.olives-details__summary::before { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 50%; |
||||||
|
inset-inline-start: var(--sp0-75); |
||||||
|
display: block; |
||||||
|
width: 0.625rem; |
||||||
|
height: 0.625rem; |
||||||
|
content: ""; |
||||||
|
transform: translateY(-50%) rotate(45deg); /* LTR */ |
||||||
|
border-top: solid 2px currentColor; |
||||||
|
border-right: solid 2px currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .olives-details__summary::before { |
||||||
|
transform: translateY(-50%) rotate(-135deg); |
||||||
|
} |
||||||
|
|
||||||
|
/* Pseudo-selector to manage focus styles */ |
||||||
|
|
||||||
|
.olives-details__summary::after { |
||||||
|
position: absolute; |
||||||
|
inset: calc(var(--details-border-width) * -1); |
||||||
|
content: ""; |
||||||
|
pointer-events: none; |
||||||
|
opacity: 0; |
||||||
|
border-radius: var(--border-radius); |
||||||
|
box-shadow: inset 0 0 0 2px var(--color--primary-60); |
||||||
|
} |
||||||
|
|
||||||
|
/* Hide the marker */ |
||||||
|
|
||||||
|
.olives-details__summary::-webkit-details-marker { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* Disable default outline for summary, since we have own implementation */ |
||||||
|
|
||||||
|
.olives-details__summary:focus { |
||||||
|
outline: solid 2px transparent; |
||||||
|
outline-offset: -4px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Details summary, hover state */ |
||||||
|
|
||||||
|
.olives-details__summary:hover { |
||||||
|
background-color: var(--color--gray-95); |
||||||
|
} |
||||||
|
|
||||||
|
/* Details summary, focus and active states */ |
||||||
|
|
||||||
|
.olives-details__summary:focus::after, |
||||||
|
.olives-details__summary:active::after { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
/* Rotate arrow icon of the details summary, when details expanded */ |
||||||
|
|
||||||
|
.olives-details[open] > .olives-details__summary::before { |
||||||
|
margin-block-start: -2px; |
||||||
|
transform: translateY(-50%) rotate(135deg); |
||||||
|
} |
||||||
|
|
||||||
|
/* Details content wrapper */ |
||||||
|
|
||||||
|
.olives-details__wrapper { |
||||||
|
margin: var(--sp1); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.olives-details__wrapper { |
||||||
|
margin-block-start: var(--sp1-5); |
||||||
|
margin-block-end: var(--sp1-5); |
||||||
|
margin-inline-start: var(--sp2); |
||||||
|
margin-inline-end: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Description */ |
||||||
|
|
||||||
|
.olives-details__description { |
||||||
|
margin-block-end: var(--sp1); |
||||||
|
color: var(--color-text-neutral-medium); |
||||||
|
font-size: var(--font-size-xs); |
||||||
|
line-height: var(--line-height-s); |
||||||
|
} |
||||||
@ -0,0 +1,165 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Dropbutton styles. |
||||||
|
*/ |
||||||
|
|
||||||
|
.dropbutton-wrapper { |
||||||
|
--dropbutton--height: var(--sp1-5); |
||||||
|
--dropbutton--secondary-bg-color: var(--color--white); |
||||||
|
--dropbutton--active-bg-color: var(--color--gray-90); |
||||||
|
--dropbutton--outline-color: var(--color--primary-40); /* Minimum 3:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ |
||||||
|
--dropbutton--border-radius: var(--border-radius); |
||||||
|
--dropbutton--font-size: var(--font-size-s); |
||||||
|
--dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ |
||||||
|
--dropbutton--text-hover-color: var(--color-text-primary-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */ |
||||||
|
} |
||||||
|
|
||||||
|
.dropbutton-wrapper.open { |
||||||
|
position: relative; |
||||||
|
z-index: 100; /* Ensure this appears above all other dropbuttons. */ |
||||||
|
filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color)); |
||||||
|
} |
||||||
|
|
||||||
|
.dropbutton-widget { |
||||||
|
position: relative; |
||||||
|
width: max-content; |
||||||
|
height: var(--dropbutton--height); |
||||||
|
padding-inline-end: var(--dropbutton--height); |
||||||
|
border-radius: var(--dropbutton--border-radius); |
||||||
|
} |
||||||
|
|
||||||
|
.dropbutton-single .dropbutton-widget { |
||||||
|
padding-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.dropbutton-wrapper.open .dropbutton-widget { |
||||||
|
border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0; |
||||||
|
} |
||||||
|
|
||||||
|
.dropbutton { |
||||||
|
height: var(--dropbutton--height); |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
list-style: none; |
||||||
|
font-size: var(--dropbutton--font-size); |
||||||
|
} |
||||||
|
|
||||||
|
/* This is the button that expands/collapses the secondary options. */ |
||||||
|
|
||||||
|
.dropbutton-toggle button { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
inset-inline-end: 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: var(--dropbutton--height); |
||||||
|
height: var(--dropbutton--height); |
||||||
|
padding: 0; |
||||||
|
cursor: pointer; |
||||||
|
border-color: transparent; |
||||||
|
border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */ |
||||||
|
background: var(--dropbutton--active-bg-color); |
||||||
|
} |
||||||
|
|
||||||
|
.dropbutton-toggle button:focus { |
||||||
|
outline: solid 2px var(--dropbutton--outline-color); |
||||||
|
outline-offset: -2px; |
||||||
|
} |
||||||
|
|
||||||
|
.dropbutton-toggle button::before { |
||||||
|
display: block; |
||||||
|
width: var(--sp0-5); |
||||||
|
height: var(--sp0-5); |
||||||
|
content: ""; |
||||||
|
transform: translateY(-25%) rotate(45deg); |
||||||
|
border-right: solid 2px var(--dropbutton--outline-color); |
||||||
|
border-bottom: solid 2px var(--dropbutton--outline-color); |
||||||
|
} |
||||||
|
|
||||||
|
.dropbutton-wrapper.open :is(.dropbutton-toggle button::before) { |
||||||
|
transform: translateY(25%) rotate(225deg); |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .dropbutton-toggle button { |
||||||
|
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); |
||||||
|
} |
||||||
|
|
||||||
|
/* This is the first <li> element in the list of actions. */ |
||||||
|
|
||||||
|
.dropbutton-action:first-child { |
||||||
|
margin-inline-end: 2px; |
||||||
|
border: solid 1px transparent; |
||||||
|
border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */ |
||||||
|
background: var(--dropbutton--active-bg-color); |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .dropbutton-action:first-child { |
||||||
|
border: solid 1px transparent; |
||||||
|
border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0; |
||||||
|
} |
||||||
|
|
||||||
|
.dropbutton-action a { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: -2px; /* Account for borders. */ |
||||||
|
padding: 0 0.5625rem; |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
color: var(--dropbutton--text-color); |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.dropbutton-action a:hover { |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
.dropbutton-action a:focus { |
||||||
|
outline: solid 2px var(--dropbutton--outline-color); |
||||||
|
outline-offset: -1px; /* Overlap parent container by 1px. */ |
||||||
|
} |
||||||
|
|
||||||
|
/* Special rules if there is only one action. */ |
||||||
|
|
||||||
|
.dropbutton-single .dropbutton-action:first-child { |
||||||
|
border-right: solid 1px transparent; /* LTR */ |
||||||
|
border-radius: var(--dropbutton--border-radius); |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .dropbutton-single .dropbutton-action:first-child { |
||||||
|
border: solid 1px transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.dropbutton-single .dropbutton-action a { |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
/* These are the <li> elements other than the first. */ |
||||||
|
|
||||||
|
.secondary-action { |
||||||
|
visibility: hidden; |
||||||
|
width: calc(100% + var(--dropbutton--height)); |
||||||
|
border-right: 1px solid var(--dropbutton--active-bg-color); |
||||||
|
border-left: 1px solid var(--dropbutton--active-bg-color); |
||||||
|
background: var(--dropbutton--secondary-bg-color); |
||||||
|
} |
||||||
|
|
||||||
|
.secondary-action:last-child { |
||||||
|
border-bottom: 1px solid var(--dropbutton--active-bg-color); |
||||||
|
} |
||||||
|
|
||||||
|
.secondary-action a:hover { |
||||||
|
color: var(--dropbutton--text-hover-color); |
||||||
|
} |
||||||
|
|
||||||
|
.dropbutton-wrapper.open .secondary-action { |
||||||
|
visibility: visible; |
||||||
|
} |
||||||
@ -0,0 +1,150 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Embedded Media. |
||||||
|
*/ |
||||||
|
|
||||||
|
figure { |
||||||
|
background: var(--color--gray-100); |
||||||
|
} |
||||||
|
|
||||||
|
figcaption { |
||||||
|
padding-block: var(--sp0-5); |
||||||
|
padding-inline-start: var(--sp0-5); |
||||||
|
padding-inline-end: var(--sp0-5); |
||||||
|
color: var(--color-text-neutral-medium); |
||||||
|
background: var(--color--gray-100); |
||||||
|
font-family: var(--font-serif); |
||||||
|
font-size: 0.875rem; |
||||||
|
font-style: italic; |
||||||
|
line-height: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
figcaption { |
||||||
|
padding-block: var(--sp); |
||||||
|
padding-inline-start: var(--sp); |
||||||
|
padding-inline-end: var(--sp); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.align-right { |
||||||
|
float: none; /* Override core's align.module.css. */ |
||||||
|
max-width: 100%; |
||||||
|
margin-block: var(--sp3); |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.align-right { |
||||||
|
float: right; /* LTR */ |
||||||
|
max-width: 50%; |
||||||
|
margin-block-start: var(--sp); |
||||||
|
margin-block-end: var(--sp); |
||||||
|
margin-inline-start: var(--sp); |
||||||
|
margin-inline-end: 0; |
||||||
|
|
||||||
|
/** |
||||||
|
* Chromium and Webkit do not yet support flow relative logical properties, |
||||||
|
* such as float: inline-end. However, PostCSS Logical does not compile this |
||||||
|
* value, so we accommodate by not using these. |
||||||
|
* |
||||||
|
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values |
||||||
|
* @see https://github.com/csstools/postcss-plugins/issues/632 |
||||||
|
*/ |
||||||
|
} |
||||||
|
[dir="rtl"] .align-right { |
||||||
|
float: left; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Pull out of grid if nested in content narrow layout. */ |
||||||
|
|
||||||
|
/* @todo this can be simplified. */ |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.layout--content-narrow .align-right, |
||||||
|
.layout--pass--content-narrow > * .align-right { |
||||||
|
margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.layout--content-narrow .align-right, |
||||||
|
.layout--pass--content-narrow > * .align-right { |
||||||
|
margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap)))); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
.layout--content-narrow .align-right, |
||||||
|
.layout--pass--content-narrow > * .align-right { |
||||||
|
margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap)))); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 90rem) { |
||||||
|
.layout--content-narrow .align-right, |
||||||
|
.layout--pass--content-narrow > * .align-right { |
||||||
|
margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap)))); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.align-left { |
||||||
|
float: none; /* Override core's align.module.css. */ |
||||||
|
max-width: 100%; |
||||||
|
margin-block-start: var(--sp3); |
||||||
|
margin-block-end: var(--sp3); |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.align-left { |
||||||
|
float: left; /* LTR */ |
||||||
|
max-width: 50%; |
||||||
|
margin-block-start: var(--sp); |
||||||
|
margin-block-end: var(--sp); |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: var(--sp2); /* Extra right margins in case of aligning next to lists. */ |
||||||
|
|
||||||
|
/** |
||||||
|
* Chromium and Webkit do not yet support flow relative logical properties, |
||||||
|
* such as float: inline-end. However, PostCSS Logical does not compile this |
||||||
|
* value, so we accommodate by not using these. |
||||||
|
* |
||||||
|
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values |
||||||
|
* @see https://github.com/csstools/postcss-plugins/issues/632 |
||||||
|
*/ |
||||||
|
} |
||||||
|
[dir="rtl"] .align-left { |
||||||
|
float: right; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Pull out of grid if nested in content narrow layout. */ |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.layout--content-narrow .align-left, |
||||||
|
.layout--pass--content-narrow > * .align-left { |
||||||
|
margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.align-center img, |
||||||
|
.align-center video, |
||||||
|
.align-center audio { |
||||||
|
margin-inline: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.media-oembed-content { |
||||||
|
display: block; |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* RSS feed. |
||||||
|
*/ |
||||||
|
|
||||||
|
.feed-icon { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-neutral-soft); |
||||||
|
} |
||||||
|
|
||||||
|
.feed-icon:hover { |
||||||
|
color: var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
.feed-icon__label { |
||||||
|
flex-shrink: 0; |
||||||
|
letter-spacing: 0.08em; |
||||||
|
font-size: var(--font-size-xxs); |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.feed-icon__icon { |
||||||
|
display: flex; |
||||||
|
flex-shrink: 0; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: var(--sp1-5); |
||||||
|
height: var(--sp1-5); |
||||||
|
margin-inline-start: var(--sp0-5); |
||||||
|
color: var(--color--white); |
||||||
|
background-color: var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
.feed-icon__icon svg { |
||||||
|
vertical-align: top; |
||||||
|
fill: currentColor; |
||||||
|
} |
||||||
@ -0,0 +1,67 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Visual styles for fields. |
||||||
|
*/ |
||||||
|
|
||||||
|
.field:not(:last-child) { |
||||||
|
/*margin-block-end: var(--sp2);*/ |
||||||
|
margin-block-end: var(--sp1); |
||||||
|
} |
||||||
|
|
||||||
|
.node--view-mode-teaser .field { |
||||||
|
margin-block-end: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
.node--view-mode-teaser .field:last-child { |
||||||
|
margin-block-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.node--view-mode-teaser .field { |
||||||
|
margin-block-end: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.field__label { |
||||||
|
font-weight: bold; |
||||||
|
font-family: var(--font-sans); |
||||||
|
font-size: var(--font-size-base); |
||||||
|
} |
||||||
|
|
||||||
|
.field--label-inline .field__label, |
||||||
|
.field--label-inline .field__items { |
||||||
|
float: left; /* LTR */ |
||||||
|
|
||||||
|
/** |
||||||
|
* Chromium and Webkit do not yet support flow relative logical properties, |
||||||
|
* such as float: inline-end. However, PostCSS Logical does not compile this |
||||||
|
* value, so we accommodate by not using these. |
||||||
|
* |
||||||
|
* @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values |
||||||
|
* @see https://github.com/csstools/postcss-plugins/issues/632 |
||||||
|
*/ |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .field--label-inline .field__label, |
||||||
|
[dir="rtl"] .field--label-inline .field__items { |
||||||
|
float: right; |
||||||
|
} |
||||||
|
|
||||||
|
.field--label-inline .field__label, |
||||||
|
.field--label-inline > .field__item, |
||||||
|
.field--label-inline .field__items { |
||||||
|
padding-inline-end: 0.5em; |
||||||
|
font-family: var(--font-sans); |
||||||
|
font-size: var(--font-size-base); |
||||||
|
} |
||||||
|
|
||||||
|
.field--label-inline .field__label::after { |
||||||
|
content: ":"; |
||||||
|
} |
||||||
@ -0,0 +1,136 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Fieldset. |
||||||
|
*/ |
||||||
|
|
||||||
|
.fieldset { |
||||||
|
min-width: 0; |
||||||
|
margin-block: var(--sp1); |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
color: inherit; |
||||||
|
border: solid 2px var(--color--gray-45); |
||||||
|
border-radius: var(--border-radius); |
||||||
|
background-color: var(--color--white); |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset--group { |
||||||
|
width: 100%; |
||||||
|
color: inherit; |
||||||
|
border: 0; |
||||||
|
border-radius: 0; |
||||||
|
background: none; |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset__legend { |
||||||
|
float: left; /* Prevent sticking out of top of fieldset. */ |
||||||
|
width: 100%; |
||||||
|
color: inherit; |
||||||
|
border-top-left-radius: var(--border-radius); |
||||||
|
border-top-right-radius: var(--border-radius); |
||||||
|
background-color: var(--color--gray-45); |
||||||
|
font-size: var(--font-size-l); |
||||||
|
font-weight: 700; |
||||||
|
line-height: var(--line-height-base); |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset__legend + * { |
||||||
|
clear: left; |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset__legend .fieldset__label.form-required::after { |
||||||
|
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A"); |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset__legend--composite { |
||||||
|
margin-block-start: 2px; |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset__legend--invisible { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset__legend--group { |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset__label { |
||||||
|
display: block; |
||||||
|
padding-block: var(--sp0-5); |
||||||
|
padding-inline-start: var(--sp1); |
||||||
|
padding-inline-end: var(--sp1); |
||||||
|
color: var(--color--white); |
||||||
|
line-height: var(--line-height-s); |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset__label.is-disabled { |
||||||
|
color: var(--color-text-neutral-soft); |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset__description { |
||||||
|
margin-block: var(--sp0-5); |
||||||
|
font-size: var(--font-size-xs); |
||||||
|
line-height: var(--line-height-s); |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset__description.is-disabled { |
||||||
|
color: var(--input--disabled-fg-color); |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset__error-message { |
||||||
|
margin-block: var(--sp0-5); |
||||||
|
padding-inline-start: var(--sp1-5); |
||||||
|
color: var(--color--red); |
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: left top; /* LTR */ |
||||||
|
background-size: var(--sp1) var(--sp1); |
||||||
|
font-size: var(--font-size-s); |
||||||
|
line-height: var(--line-height-s); |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (-ms-high-contrast: active) { |
||||||
|
.fieldset__error-message { |
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .fieldset__error-message { |
||||||
|
background-position: left top; |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset__wrapper { |
||||||
|
margin-block-start: 0; |
||||||
|
padding-block: var(--sp); |
||||||
|
padding-inline-start: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper { |
||||||
|
border: solid 2px var(--color--gray-45); |
||||||
|
border-bottom-right-radius: var(--border-radius); |
||||||
|
border-bottom-left-radius: var(--border-radius); |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset__wrapper--group { |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.fieldset__wrapper > .container-inline { |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
} |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Footer regions. |
||||||
|
*/ |
||||||
|
|
||||||
|
.site-footer { |
||||||
|
position: relative; /* stack above left social bar */ |
||||||
|
color: var(--color--gray-65); |
||||||
|
/*background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-10) 100%);*/ |
||||||
|
background: #33210D; |
||||||
|
} |
||||||
|
|
||||||
|
.site-footer .menu { |
||||||
|
margin-inline-start: 0; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.site-footer .menu ul { |
||||||
|
margin-inline-start: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
.site-footer .menu li { |
||||||
|
margin-block-end: var(--sp0-5); |
||||||
|
} |
||||||
|
|
||||||
|
.site-footer a { |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
.site-footer a:hover { |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
body:not(.is-always-mobile-nav) .site-footer { |
||||||
|
border-inline-start: solid var(--content-left) var(--color--black); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,115 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Checkbox and radio input elements. |
||||||
|
*/ |
||||||
|
|
||||||
|
input[type="checkbox"], |
||||||
|
input[type="radio"] { |
||||||
|
display: inline-block; |
||||||
|
width: var(--sp1-5); |
||||||
|
height: var(--sp1-5); |
||||||
|
margin: 0; |
||||||
|
vertical-align: middle; |
||||||
|
border: 1px solid var(--color--gray-60); |
||||||
|
border-radius: 0.1875rem; |
||||||
|
background-color: var(--color--white); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: 50% 50%; |
||||||
|
background-size: var(--sp1) var(--sp1); |
||||||
|
-webkit-appearance: none; |
||||||
|
appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
input[type="checkbox"]:focus, |
||||||
|
input[type="radio"]:focus { |
||||||
|
border: solid 2px var(--color--primary-50); |
||||||
|
outline: solid 2px var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
@supports (outline-style: double) { |
||||||
|
input[type="checkbox"]:focus, |
||||||
|
input[type="radio"]:focus { |
||||||
|
border-width: 1px; |
||||||
|
outline-width: 6px; |
||||||
|
outline-style: double; |
||||||
|
outline-offset: -1px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
input[type="checkbox"]:hover, |
||||||
|
input[type="radio"]:hover { |
||||||
|
border-color: var(--color--primary-60); |
||||||
|
} |
||||||
|
|
||||||
|
input[type="checkbox"][disabled], |
||||||
|
input[type="radio"][disabled] { |
||||||
|
background-color: var(--color--gray-100); |
||||||
|
} |
||||||
|
|
||||||
|
input[type="checkbox"][disabled]:hover, |
||||||
|
input[type="radio"][disabled]:hover { |
||||||
|
border-color: var(--color--gray-60); |
||||||
|
} |
||||||
|
|
||||||
|
input[type="checkbox"][disabled]:checked, |
||||||
|
input[type="radio"][disabled]:checked { |
||||||
|
border-width: 1px; |
||||||
|
} |
||||||
|
|
||||||
|
input[type="checkbox"]:checked, |
||||||
|
input[type="radio"]:checked { |
||||||
|
border-width: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
input.error[type="checkbox"], |
||||||
|
input.error[type="radio"] { |
||||||
|
border: solid 2px var(--color--red); |
||||||
|
} |
||||||
|
|
||||||
|
input.error[type="checkbox"]:focus, |
||||||
|
input.error[type="radio"]:focus { |
||||||
|
outline-color: var(--color--red); |
||||||
|
outline-offset: -2px; |
||||||
|
} |
||||||
|
|
||||||
|
input[type="checkbox"] + label, |
||||||
|
input[type="radio"] + label { |
||||||
|
display: inline-block; |
||||||
|
padding-inline-start: var(--sp0-5); |
||||||
|
} |
||||||
|
|
||||||
|
input[type="checkbox"]:checked { |
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E"); |
||||||
|
} |
||||||
|
|
||||||
|
input[type="radio"] { |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
input[type="radio"]:checked { |
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A"); |
||||||
|
background-size: 1.0625rem; |
||||||
|
} |
||||||
|
|
||||||
|
input[type="radio"]:focus { |
||||||
|
border-width: 2px; |
||||||
|
border-color: var(--color--primary-50); |
||||||
|
outline-color: transparent; |
||||||
|
box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
input.error[type="radio"]:focus { |
||||||
|
outline-color: transparent; |
||||||
|
box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red); |
||||||
|
} |
||||||
|
|
||||||
|
.form-type-boolean { |
||||||
|
margin-block: var(--sp1); |
||||||
|
} |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Select input elements. |
||||||
|
*/ |
||||||
|
|
||||||
|
:root { |
||||||
|
--form-element-select-icon: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e"); |
||||||
|
} |
||||||
|
|
||||||
|
select { |
||||||
|
max-width: 100%; |
||||||
|
height: var(--sp2); |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: var(--sp); |
||||||
|
padding-inline-end: var(--sp3); |
||||||
|
color: var(--color-text-neutral-loud); |
||||||
|
border: 1px solid var(--color--gray-60); |
||||||
|
border-radius: var(--border-radius); |
||||||
|
background-color: var(--color--white); |
||||||
|
background-image: var(--form-element-select-icon); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: right var(--sp) center; /* LTR */ |
||||||
|
font-family: inherit; |
||||||
|
font-size: inherit; |
||||||
|
-webkit-appearance: none; |
||||||
|
appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
select:focus { |
||||||
|
border: solid 2px var(--color--primary-50); |
||||||
|
outline: solid 2px var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
@supports (outline-style: double) { |
||||||
|
select:focus { |
||||||
|
border-width: 1px; |
||||||
|
outline-width: 6px; |
||||||
|
outline-style: double; |
||||||
|
outline-offset: -1px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
select[disabled] { |
||||||
|
color: var(--color--gray-60); |
||||||
|
background-color: var(--color--gray-100); |
||||||
|
} |
||||||
|
|
||||||
|
select.error { |
||||||
|
border: solid 2px var(--color--red); |
||||||
|
} |
||||||
|
|
||||||
|
select.error:focus { |
||||||
|
outline-color: var(--color--red); |
||||||
|
} |
||||||
|
|
||||||
|
select[multiple] { |
||||||
|
height: auto; |
||||||
|
padding: var(--sp0-5); |
||||||
|
background-image: none; |
||||||
|
line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */ |
||||||
|
} |
||||||
|
|
||||||
|
select[multiple] option { |
||||||
|
padding: var(--sp0-5); |
||||||
|
} |
||||||
|
|
||||||
|
select.form-element--small { |
||||||
|
height: var(--sp2-5); |
||||||
|
} |
||||||
|
|
||||||
|
/* Necessary to show chevron in forced colors mode in modern browsers. */ |
||||||
|
|
||||||
|
@media (forced-colors: active) { |
||||||
|
select { |
||||||
|
padding-inline-end: var(--sp); |
||||||
|
background-image: none; |
||||||
|
-webkit-appearance: listbox; |
||||||
|
appearance: listbox; /* Default <select> appearance value for modern browsers. */ |
||||||
|
|
||||||
|
/* Lets browser set <select> appearance to whatever the browser's default is. */ |
||||||
|
} |
||||||
|
@supports ((-webkit-appearance: revert) or (appearance: revert)) { |
||||||
|
select { |
||||||
|
-webkit-appearance: revert; |
||||||
|
appearance: revert; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] select { |
||||||
|
background-position: left var(--sp) center; |
||||||
|
} |
||||||
@ -0,0 +1,114 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Text input elements. |
||||||
|
*/ |
||||||
|
|
||||||
|
[type="color"], |
||||||
|
[type="date"], |
||||||
|
[type="datetime-local"], |
||||||
|
[type="email"], |
||||||
|
[type="file"], |
||||||
|
[type="month"], |
||||||
|
[type="number"], |
||||||
|
[type="password"], |
||||||
|
[type="search"], |
||||||
|
[type="tel"], |
||||||
|
[type="text"], |
||||||
|
[type="time"], |
||||||
|
[type="url"], |
||||||
|
[type="week"], |
||||||
|
textarea { |
||||||
|
width: 100%; |
||||||
|
max-width: 100%; |
||||||
|
min-height: var(--sp2); |
||||||
|
padding: 0 var(--sp); |
||||||
|
color: var(--color-text-neutral-loud); |
||||||
|
border: 1px solid var(--color--gray-60); |
||||||
|
border-radius: var(--border-radius); |
||||||
|
background-color: var(--color--white); |
||||||
|
font-family: inherit; |
||||||
|
font-size: inherit; |
||||||
|
-webkit-appearance: none; |
||||||
|
appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus { |
||||||
|
border: solid 2px var(--color--primary-50); |
||||||
|
outline: solid 2px var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
@supports (outline-style: double) { |
||||||
|
:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus { |
||||||
|
border-width: 1px; |
||||||
|
outline-width: 6px; |
||||||
|
outline-style: double; |
||||||
|
outline-offset: -1px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[disabled]:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) { |
||||||
|
color: var(--color--gray-60); |
||||||
|
background-color: var(--color--gray-100); |
||||||
|
} |
||||||
|
|
||||||
|
.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) { |
||||||
|
border: solid 2px var(--color--red); |
||||||
|
} |
||||||
|
|
||||||
|
.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea):focus { |
||||||
|
outline-color: var(--color--red); |
||||||
|
outline-offset: -2px; |
||||||
|
} |
||||||
|
|
||||||
|
.error:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) + .ck-editor > .ck-editor__main { |
||||||
|
border: solid 2px var(--color--red); |
||||||
|
} |
||||||
|
|
||||||
|
.form-element--small:is([type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea) { |
||||||
|
min-height: var(--sp2-5); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
[type="color"], |
||||||
|
[type="date"], |
||||||
|
[type="datetime-local"], |
||||||
|
[type="email"], |
||||||
|
[type="file"], |
||||||
|
[type="month"], |
||||||
|
[type="number"], |
||||||
|
[type="password"], |
||||||
|
[type="search"], |
||||||
|
[type="tel"], |
||||||
|
[type="text"], |
||||||
|
[type="time"], |
||||||
|
[type="url"], |
||||||
|
[type="week"], |
||||||
|
textarea { |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Ensure that date field isn't larger than other fields. */ |
||||||
|
|
||||||
|
[type="date"]::-webkit-datetime-edit-fields-wrapper { |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
[type="file"] { |
||||||
|
height: auto; |
||||||
|
padding-block: var(--sp0-75); |
||||||
|
} |
||||||
|
|
||||||
|
[type="color"] { |
||||||
|
width: var(--sp3); |
||||||
|
padding: 0; |
||||||
|
} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Textarea. |
||||||
|
*/ |
||||||
|
|
||||||
|
textarea { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
min-height: var(--sp8); |
||||||
|
padding: var(--sp); |
||||||
|
} |
||||||
|
.region--sidebar input.form-text { |
||||||
|
width: 14em; |
||||||
|
} |
||||||
@ -0,0 +1,212 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Main form and form item styles. |
||||||
|
*/ |
||||||
|
|
||||||
|
::placeholder { |
||||||
|
color: var(--color--gray-60); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* General form item. |
||||||
|
*/ |
||||||
|
|
||||||
|
.form-item { |
||||||
|
margin-block: var(--sp1); |
||||||
|
} |
||||||
|
|
||||||
|
.form-item__label--multiple-value-form { |
||||||
|
margin-block: 0; |
||||||
|
font-size: inherit; |
||||||
|
font-weight: inherit; |
||||||
|
line-height: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* When a table row or a container-inline has a single form item, prevent it |
||||||
|
* from adding unnecessary extra spacing. |
||||||
|
* If it has multiple form items, allow spacing between them, overriding core. |
||||||
|
*/ |
||||||
|
|
||||||
|
tr .form-item, |
||||||
|
.container-inline .form-item { |
||||||
|
margin-block: var(--sp0-5); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Form element label. |
||||||
|
*/ |
||||||
|
|
||||||
|
.form-item__label { |
||||||
|
display: block; |
||||||
|
margin-block: var(--sp0-5); |
||||||
|
} |
||||||
|
|
||||||
|
.container-inline .form-item__label { |
||||||
|
margin-inline-end: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
.form-item__label--multiple-value-form { |
||||||
|
margin-block: 0; |
||||||
|
font-size: inherit; |
||||||
|
font-weight: inherit; |
||||||
|
line-height: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
.form-item__label[for] { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.form-item__label.option { |
||||||
|
display: inline; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
/* Label states. */ |
||||||
|
|
||||||
|
.form-item__label.is-disabled { |
||||||
|
cursor: default; |
||||||
|
color: var(--color--gray-70); |
||||||
|
} |
||||||
|
|
||||||
|
/* Form required star icon */ |
||||||
|
|
||||||
|
.form-item__label.form-required::after, |
||||||
|
.fieldset__label.form-required::after, |
||||||
|
.required-mark::after { |
||||||
|
display: inline-block; |
||||||
|
width: 0.5rem; |
||||||
|
height: 0.5rem; |
||||||
|
margin-inline: 0.3em; |
||||||
|
content: ""; |
||||||
|
vertical-align: text-top; |
||||||
|
/* Use a background image to prevent screen readers from announcing the text. */ |
||||||
|
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-size: 0.5rem 0.5rem; |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (-ms-high-contrast: active) { |
||||||
|
.form-item__label.form-required::after, |
||||||
|
.fieldset__label.form-required::after, |
||||||
|
.required-mark::after { |
||||||
|
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A"); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Form item description. |
||||||
|
*/ |
||||||
|
|
||||||
|
.form-item__description { |
||||||
|
margin-block: var(--sp0-5); |
||||||
|
max-width: 60ch; |
||||||
|
font-size: var(--font-size-s); |
||||||
|
line-height: var(--line-height-s); |
||||||
|
} |
||||||
|
|
||||||
|
.field-multiple-table + .form-item__description { |
||||||
|
margin-block-start: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Error message (Inline form errors). |
||||||
|
*/ |
||||||
|
|
||||||
|
.form-item--error-message { |
||||||
|
margin-block: var(--sp0-5); |
||||||
|
padding-inline-start: var(--sp1-5); |
||||||
|
color: var(--color--red); |
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E33F1E' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: left top; /* LTR */ |
||||||
|
background-size: var(--sp1) var(--sp1); |
||||||
|
font-size: var(--font-size-s); |
||||||
|
line-height: var(--line-height-s); |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (-ms-high-contrast: active) { |
||||||
|
.form-item--error-message { |
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E"); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .form-item--error-message { |
||||||
|
background-position: right top; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Form actions. |
||||||
|
*/ |
||||||
|
|
||||||
|
.form-actions { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items: flex-start; |
||||||
|
margin-block: var(--sp0-5); |
||||||
|
} |
||||||
|
|
||||||
|
.form-actions .button, |
||||||
|
.form-actions .action-link { |
||||||
|
margin-block: var(--sp0-5); |
||||||
|
} |
||||||
|
|
||||||
|
.form-actions .ajax-progress--throbber { |
||||||
|
align-self: center; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Custom label placement for editor filter format select. |
||||||
|
*/ |
||||||
|
|
||||||
|
.form-item--editor-format { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items: center; |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.form-item--editor-format .form-item__label, |
||||||
|
.form-item--editor-format .form-item__prefix, |
||||||
|
.form-item--editor-format .form-item__suffix, |
||||||
|
.form-item--editor-format .form-element--editor-format { |
||||||
|
min-width: 1px; |
||||||
|
} |
||||||
|
|
||||||
|
.form-item--editor-format .form-item__label, |
||||||
|
.form-item--editor-format .form-item__prefix, |
||||||
|
.form-item--editor-format .form-item__suffix { |
||||||
|
margin-inline-end: var(--sp0-5); |
||||||
|
} |
||||||
|
|
||||||
|
.form-item--editor-format .form-item__description, |
||||||
|
.form-item--editor-format .form-item--error-message { |
||||||
|
flex: 0 1 100%; |
||||||
|
min-width: 1px; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Inline forms. |
||||||
|
*/ |
||||||
|
|
||||||
|
.form--inline > * { |
||||||
|
display: inline-block; |
||||||
|
margin-top: var(--sp0-5); |
||||||
|
margin-bottom: 0; |
||||||
|
vertical-align: top; /* Ensure proper alignment if description is present. */ |
||||||
|
} |
||||||
|
|
||||||
|
.form--inline .form-item__label { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.form--inline .form-actions { |
||||||
|
margin-top: var(--sp1-5); |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Forum specific styles. |
||||||
|
*/ |
||||||
|
|
||||||
|
.forum table { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.forum__name--link, |
||||||
|
.forum__last-reply a, |
||||||
|
.forum__title a { |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Header Mobile Buttons. |
||||||
|
*/ |
||||||
|
|
||||||
|
.mobile-buttons { |
||||||
|
margin-block-start: var(--sp0-5); |
||||||
|
margin-inline-start: auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
.mobile-buttons { |
||||||
|
margin-block-start: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.mobile-buttons { |
||||||
|
margin-block-start: var(--sp4); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
.mobile-buttons { |
||||||
|
margin-block-start: var(--sp6); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
body:not(.is-always-mobile-nav) .mobile-buttons { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,145 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Navigation in header. |
||||||
|
*/ |
||||||
|
|
||||||
|
.header-nav { |
||||||
|
position: fixed; |
||||||
|
z-index: 501; /* Appear above overlay and contextual links in header. */ |
||||||
|
inset-block-start: 0; |
||||||
|
inset-inline-start: 100%; |
||||||
|
visibility: hidden; |
||||||
|
overflow: auto; |
||||||
|
/* Ensure that header nav not use additional space and force system branding |
||||||
|
* block text to unnecessarily wrap. */ |
||||||
|
flex-basis: max-content; |
||||||
|
width: 100%; |
||||||
|
max-width: var(--mobile-nav-width); |
||||||
|
height: 100%; |
||||||
|
padding-block: 0 var(--sp); |
||||||
|
padding-inline-start: var(--sp); |
||||||
|
padding-inline-end: var(--sp); |
||||||
|
/* Create room for the "close" button. We cannot use margin because the |
||||||
|
* mobile navigation needs to slide beneath the button, but we also cannot |
||||||
|
* use padding because that would enable the button to scroll out of the |
||||||
|
* viewport on short screens. */ |
||||||
|
border-block-start: solid var(--color--white) calc(var(--sp3) + var(--drupal-displace-offset-top, 0px)); |
||||||
|
background-color: var(--color--white); |
||||||
|
box-shadow: 0 0 72px rgba(0, 0, 0, 0.1); |
||||||
|
} |
||||||
|
|
||||||
|
.header-nav.is-active { |
||||||
|
visibility: visible; |
||||||
|
transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px))); /* LTR */ |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .header-nav.is-active { |
||||||
|
transform: translateX(calc(100% + var(--drupal-displace-offset-left, 0px))); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
.header-nav { |
||||||
|
border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.header-nav { |
||||||
|
padding-block-end: var(--sp3); |
||||||
|
padding-inline-start: var(--sp3); |
||||||
|
border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.header-nav { |
||||||
|
grid-column: 5 / 14; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Ensure top border has the same color as the background when in forced colors. |
||||||
|
*/ |
||||||
|
|
||||||
|
@media (forced-colors: active) { |
||||||
|
.header-nav { |
||||||
|
border-top-color: canvas; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Only apply transition styles when JS is loaded. This |
||||||
|
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189 |
||||||
|
*/ |
||||||
|
|
||||||
|
html.js .header-nav { |
||||||
|
transition: visibility 0.2s, transform 0.2s; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
body:not(.is-always-mobile-nav) .header-nav { |
||||||
|
position: static; |
||||||
|
display: flex; |
||||||
|
visibility: visible; |
||||||
|
overflow: visible; |
||||||
|
grid-column: 5 / 15; |
||||||
|
align-items: center; |
||||||
|
justify-content: flex-end; |
||||||
|
max-width: none; |
||||||
|
height: var(--header-height-wide-when-fixed); |
||||||
|
margin-block-start: auto; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
transition: transform 0.2s; |
||||||
|
transform: none; |
||||||
|
border-block-start: 0; |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
body.is-always-mobile-nav .header-nav { |
||||||
|
overflow: auto; |
||||||
|
max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap)))); |
||||||
|
padding-inline-end: var(--sp); |
||||||
|
transition: transform 0.2s, visibility 0.2s; |
||||||
|
border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 90rem) { |
||||||
|
body.is-always-mobile-nav .header-nav { |
||||||
|
max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap))))); |
||||||
|
padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp))); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.header-nav-overlay { |
||||||
|
position: fixed; |
||||||
|
z-index: 101; |
||||||
|
inset-block-start: 0; |
||||||
|
inset-inline-start: 0; |
||||||
|
display: none; |
||||||
|
width: 100%; |
||||||
|
height: 100vh; |
||||||
|
opacity: 0.2; |
||||||
|
background: var(--color--gray-5); |
||||||
|
} |
||||||
|
|
||||||
|
@media (forced-colors: active) { |
||||||
|
.header-nav-overlay { |
||||||
|
background: canvastext; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.is-overlay-active .header-nav-overlay { |
||||||
|
display: block; |
||||||
|
} |
||||||
@ -0,0 +1,191 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Header Search Narrow Block. |
||||||
|
*/ |
||||||
|
|
||||||
|
.block-search-narrow { |
||||||
|
margin-inline: calc(-1 * var(--sp)); |
||||||
|
margin-block-end: var(--sp2); |
||||||
|
background: var(--color--black); |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-narrow .search-block-form { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-narrow .form-item { |
||||||
|
flex-grow: 1; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-narrow .form-actions { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-narrow input[type="search"] { |
||||||
|
width: calc(100% + var(--sp2)); |
||||||
|
height: calc(3 * var(--sp)); |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: var(--sp); |
||||||
|
padding-inline-end: var(--sp); |
||||||
|
transition: background-size 0.4s; |
||||||
|
color: var(--color--white); |
||||||
|
border: solid 1px transparent; |
||||||
|
background-color: transparent; |
||||||
|
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: bottom left; /* LTR */ |
||||||
|
background-size: 0% 0.3125rem; |
||||||
|
box-shadow: none; |
||||||
|
font-family: var(--font-serif); |
||||||
|
font-size: 1rem; |
||||||
|
-webkit-appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-narrow input[type="search"]:focus { |
||||||
|
outline: solid 4px transparent; |
||||||
|
outline-offset: -4px; |
||||||
|
background-size: 100% 0.3125rem; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.block-search-narrow input[type="search"] { |
||||||
|
height: calc(4 * var(--sp)); |
||||||
|
padding-inline-start: var(--sp2); |
||||||
|
padding-inline-end: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-narrow .search-form__submit { |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
align-self: stretch; |
||||||
|
width: var(--sp3); |
||||||
|
height: auto; |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
cursor: pointer; |
||||||
|
border-color: transparent; |
||||||
|
background-color: transparent; |
||||||
|
|
||||||
|
/* |
||||||
|
When in Windows high contrast mode, FF will not output either background |
||||||
|
images or SVGs that are nested directly within a <button> element, so we add a <span>. |
||||||
|
*/ |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-narrow .search-form__submit .icon--search { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 0; |
||||||
|
inset-inline-start: 0; |
||||||
|
display: block; |
||||||
|
width: 100%; /* Width of the SVG background image. */ |
||||||
|
height: 100%; |
||||||
|
pointer-events: none; |
||||||
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center; |
||||||
|
background-size: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-narrow .search-form__submit .icon--search::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-end: 0; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
transition: transform 0.2s; |
||||||
|
transform: scaleX(0); |
||||||
|
transform-origin: left; /* LTR */ |
||||||
|
border-block-start: solid 0.3125rem var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
@media (forced-colors: active) { |
||||||
|
.block-search-narrow .search-form__submit .icon--search { |
||||||
|
background: buttontext; |
||||||
|
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e"); |
||||||
|
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e"); |
||||||
|
-webkit-mask-repeat: no-repeat; |
||||||
|
mask-repeat: no-repeat; |
||||||
|
-webkit-mask-position: center; |
||||||
|
mask-position: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-narrow .search-form__submit:focus { |
||||||
|
outline: solid 4px transparent; |
||||||
|
outline-offset: -4px; |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-narrow .search-form__submit:focus span::after { |
||||||
|
transform: scaleX(1); |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (-ms-high-contrast: active) { |
||||||
|
.block-search-narrow .search-form__submit:focus { |
||||||
|
border-bottom-width: var(--sp0-5); |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-narrow .search-form__submit:focus span::after { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.block-search-narrow .search-form__submit { |
||||||
|
width: 5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (-ms-high-contrast: active) { |
||||||
|
/* IE11's high contrast show will not show the background image, so we show the text. */ |
||||||
|
.block-search-narrow .search-form__submit .visually-hidden { |
||||||
|
position: static; |
||||||
|
overflow: visible; |
||||||
|
clip: auto; |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
/* Edge's high contrast does show the background image, so we hide it. */ |
||||||
|
.block-search-narrow .search-form__submit .icon--search { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* 500px is the width of the primary nav at mobile. */ |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
.block-search-narrow { |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
body:not(.is-always-mobile-nav) .block-search-narrow { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .block-search-narrow input[type="search"] { |
||||||
|
background-position: bottom right; |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .block-search-narrow .search-form__submit .icon--search::after { |
||||||
|
transform-origin: right; |
||||||
|
} |
||||||
@ -0,0 +1,288 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Header Search Wide Block. |
||||||
|
*/ |
||||||
|
|
||||||
|
/* Override contextual links so we can position against .site-header. */ |
||||||
|
|
||||||
|
.block-search-wide.contextual-region { |
||||||
|
position: static; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__wrapper { |
||||||
|
position: absolute; |
||||||
|
z-index: 1; /* Ensure left border shows above social region in IE11. */ |
||||||
|
inset-block-start: 100%; |
||||||
|
inset-inline-start: calc(-1 * var(--content-left)); |
||||||
|
display: none; |
||||||
|
visibility: hidden; |
||||||
|
overflow: hidden; |
||||||
|
width: calc(100% + var(--content-left)); |
||||||
|
max-width: var(--max-bg-color); |
||||||
|
height: var(--sp8); |
||||||
|
max-height: 0; |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
transition: all 0.2s; |
||||||
|
border-inline-start: solid var(--content-left) var(--color--gray-20); |
||||||
|
background: var(--color--black); |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__wrapper.is-active { |
||||||
|
visibility: visible; |
||||||
|
max-height: var(--sp8); |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__wrapper form { |
||||||
|
display: flex; |
||||||
|
grid-column: 1 / 14; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__wrapper input[type="search"] { |
||||||
|
width: calc(100% + var(--sp2)); |
||||||
|
height: var(--sp8); |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: var(--sp12); |
||||||
|
padding-inline-end: 0; |
||||||
|
transition: background-size 0.4s; |
||||||
|
color: var(--color--white); |
||||||
|
border: solid 1px transparent; |
||||||
|
box-shadow: none; |
||||||
|
font-family: var(--font-serif); |
||||||
|
font-size: 2rem; |
||||||
|
-webkit-appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__wrapper input[type="search"]:focus { |
||||||
|
outline: solid 4px transparent; |
||||||
|
outline-offset: -4px; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__wrapper .form-item-keys { |
||||||
|
flex-grow: 1; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__wrapper .form-actions { |
||||||
|
display: flex; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__wrapper .search-form__submit { |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
align-self: stretch; |
||||||
|
width: 6.25rem; |
||||||
|
height: auto; |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
cursor: pointer; |
||||||
|
border-color: transparent; |
||||||
|
background-color: transparent; |
||||||
|
|
||||||
|
/* |
||||||
|
When in Windows high contrast mode, FF will not output either background |
||||||
|
images or SVGs that are nested directly within a <button> element, so we add a <span>. |
||||||
|
*/ |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__wrapper .search-form__submit .icon--search { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 0; |
||||||
|
inset-inline-end: 0; |
||||||
|
display: block; |
||||||
|
width: 1.5rem; /* Width of the SVG background image. */ |
||||||
|
height: 100%; |
||||||
|
pointer-events: none; |
||||||
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center; |
||||||
|
background-size: contain; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__wrapper .search-form__submit .icon--search::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-end: 0; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
transition: transform 0.2s; |
||||||
|
transform: scaleX(0); |
||||||
|
transform-origin: left; |
||||||
|
border-block-start: solid var(--sp0-5) var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__wrapper .search-form__submit:focus { |
||||||
|
outline: solid 4px transparent; |
||||||
|
outline-offset: -4px; |
||||||
|
box-shadow: none; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__wrapper .search-form__submit:focus span::after { |
||||||
|
transform: scaleX(1); |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (-ms-high-contrast: active) { |
||||||
|
.block-search-wide__wrapper .search-form__submit:focus { |
||||||
|
border-bottom-width: var(--sp0-5); |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__wrapper .search-form__submit:focus span::after { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (-ms-high-contrast: active) { |
||||||
|
/* Edge's high contrast does show the background image, so we hide it. */ |
||||||
|
.block-search-wide__wrapper .search-form__submit .icon--search { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__container { |
||||||
|
max-width: var(--max-width); |
||||||
|
padding-inline-end: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__grid { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(var(--grid-col-count), 1fr); |
||||||
|
grid-column-gap: var(--grid-gap); |
||||||
|
} |
||||||
|
|
||||||
|
/* Override specificity from container-inline.module.css */ |
||||||
|
|
||||||
|
.container-inline .block-search-wide__container { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.container-inline .block-search-wide__grid { |
||||||
|
display: grid; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__button { |
||||||
|
position: relative; |
||||||
|
display: none; |
||||||
|
width: var(--sp3); |
||||||
|
height: var(--sp6); |
||||||
|
cursor: pointer; |
||||||
|
color: var(--color-text-neutral-loud); /* Affects SVG search icon. */ |
||||||
|
border: 0; |
||||||
|
background: transparent; |
||||||
|
-webkit-appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__button:focus { |
||||||
|
position: relative; |
||||||
|
outline: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__button:focus::after { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
width: 80%; |
||||||
|
height: var(--sp3); |
||||||
|
content: ""; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
border: solid 2px var(--color--primary-50); |
||||||
|
border-radius: 0.25rem; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__button[aria-expanded="true"] { |
||||||
|
background: var(--color--black); |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__button[aria-expanded="true"]:focus::after { |
||||||
|
border-color: var(--color--white); |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before, |
||||||
|
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
width: var(--sp1-5); |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
border-block-start: solid 2px var(--color--white); |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before { |
||||||
|
transform: translate(-50%, -50%) rotate(-45deg); |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after { |
||||||
|
transform: translate(-50%, -50%) rotate(45deg); |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__button[aria-expanded="true"] svg { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__button svg { |
||||||
|
margin-inline-start: auto; |
||||||
|
margin-inline-end: auto; |
||||||
|
} |
||||||
|
|
||||||
|
@media (forced-colors: active) { |
||||||
|
.block-search-wide__button { |
||||||
|
background: ButtonFace; |
||||||
|
} |
||||||
|
|
||||||
|
.block-search-wide__button path { |
||||||
|
fill: ButtonText; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Provide rudimentary access to site search if JS is disabled. */ |
||||||
|
|
||||||
|
html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper { |
||||||
|
visibility: visible; |
||||||
|
max-height: var(--sp8); |
||||||
|
} |
||||||
|
|
||||||
|
/* Necessary to override specificity of transpiled PostCSS properties from default input focus styling. */ |
||||||
|
|
||||||
|
[dir] .block-search-wide__wrapper input[type="search"] { |
||||||
|
background-color: transparent; |
||||||
|
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: bottom left; /* LTR */ |
||||||
|
background-size: 0% 0.625rem; |
||||||
|
} |
||||||
|
|
||||||
|
[dir] .block-search-wide__wrapper input[type="search"]:focus { |
||||||
|
background-size: 100% var(--sp0-5); |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .block-search-wide__wrapper input[type="search"] { |
||||||
|
background-position: bottom right; |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search::after { |
||||||
|
transform-origin: right; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
body:not(.is-always-mobile-nav) .block-search-wide__wrapper, |
||||||
|
body:not(.is-always-mobile-nav) .block-search-wide__button { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,167 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Site branding in header. |
||||||
|
*/ |
||||||
|
|
||||||
|
.site-branding { |
||||||
|
display: flex; |
||||||
|
flex-shrink: 1; |
||||||
|
align-items: flex-end; |
||||||
|
min-width: calc( |
||||||
|
(2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + |
||||||
|
var(--container-padding) |
||||||
|
); /* Span minimum of 2 column widths. */ |
||||||
|
min-height: var(--sp3); |
||||||
|
margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */ |
||||||
|
padding-block: 0 var(--sp0-5); |
||||||
|
padding-inline-start: var(--container-padding); |
||||||
|
padding-inline-end: var(--container-padding); |
||||||
|
background-image: linear-gradient( |
||||||
|
160deg, |
||||||
|
var(--color--primary-50) 0%, |
||||||
|
var(--color--primary-40) 78.66% |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
.site-branding { |
||||||
|
min-height: var(--sp4); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.site-branding { |
||||||
|
min-width: calc( |
||||||
|
(4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + |
||||||
|
var(--container-padding) |
||||||
|
); /* Span minimum of 4 column widths. */ |
||||||
|
min-height: var(--sp6); |
||||||
|
padding-block-end: var(--sp); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.site-branding { |
||||||
|
min-width: calc( |
||||||
|
(2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + |
||||||
|
var(--container-padding) |
||||||
|
); /* Span minimum of 2 column widths. */ |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
.site-branding { |
||||||
|
min-height: var(--site-header-height-wide); |
||||||
|
margin-inline-start: calc(-1 * var(--container-padding)); |
||||||
|
padding-block: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[dir='rtl'] .site-branding { |
||||||
|
background-image: linear-gradient( |
||||||
|
-160deg, |
||||||
|
var(--color--primary-50) 0%, |
||||||
|
var(--color--primary-40) 78.66% |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
.site-branding--bg-gray { |
||||||
|
background: var(--color--gray-100); |
||||||
|
} |
||||||
|
|
||||||
|
.site-branding--bg-white { |
||||||
|
background: var(--color--white); |
||||||
|
} |
||||||
|
|
||||||
|
.site-branding__inner { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.site-branding__inner a { |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
.site-branding__inner { |
||||||
|
height: var(--header-height-wide-when-fixed); |
||||||
|
padding-block: var(--sp0-5); |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.site-branding__logo { |
||||||
|
flex-shrink: 0; |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.site-branding__logo img { |
||||||
|
width: auto; |
||||||
|
max-width: 100%; |
||||||
|
max-height: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
.site-branding__logo img { |
||||||
|
max-height: var(--sp3); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.site-branding__logo img { |
||||||
|
max-height: var(--sp4); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
.site-branding__logo img { |
||||||
|
max-height: calc(var(--header-height-wide-when-fixed) - var(--sp)); |
||||||
|
width: 160px; |
||||||
|
border-right: 2px solid #fff; |
||||||
|
padding-right: 13px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.site-branding__text { |
||||||
|
color: var(--color--white); |
||||||
|
font-size: 1.125rem; |
||||||
|
/*font-weight: bold;*/ |
||||||
|
font-family: var(--font-serif); |
||||||
|
} |
||||||
|
|
||||||
|
.site-branding__text a { |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.site-branding__text { |
||||||
|
font-size: 1.75rem; |
||||||
|
line-height: 1.75rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
.site-branding__text { |
||||||
|
letter-spacing: 0.02em; |
||||||
|
font-size: 2rem; |
||||||
|
line-height: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.site-branding--bg-gray .site-branding__text, |
||||||
|
.site-branding--bg-white .site-branding__text { |
||||||
|
color: var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
.site-branding__logo + .site-branding__text { |
||||||
|
margin-inline-start: 0.75rem; |
||||||
|
} |
||||||
@ -0,0 +1,96 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Sticky Header Toggle Button. |
||||||
|
* |
||||||
|
* This button shows on the left hand side of the header (in LTR layouts), and |
||||||
|
* toggles fixing the header to the top of the viewport. |
||||||
|
*/ |
||||||
|
|
||||||
|
.sticky-header-toggle { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
.sticky-header-toggle { |
||||||
|
display: flex; |
||||||
|
flex-shrink: 0; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: var(--content-left); |
||||||
|
height: var(--sp6); |
||||||
|
pointer-events: none; |
||||||
|
opacity: 0; |
||||||
|
border: 0; |
||||||
|
outline: 0; |
||||||
|
background-color: var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
.sticky-header-toggle:focus { |
||||||
|
cursor: pointer; |
||||||
|
pointer-events: auto; |
||||||
|
opacity: 1; |
||||||
|
outline: solid 2px var(--color--white); |
||||||
|
outline-offset: -4px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle { |
||||||
|
visibility: visible; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
body.is-always-mobile-nav .sticky-header-toggle { |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.sticky-header-toggle__icon { |
||||||
|
--icon-bar-height: 0.1875rem; |
||||||
|
--icon-bar-space: 0.4375rem; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
width: var(--sp2); |
||||||
|
height: calc((var(--icon-bar-height) * 3) + (var(--icon-bar-space) * 2)); |
||||||
|
/* Height = 3 bars + 2 spaces */ |
||||||
|
transition: opacity 0.2s; |
||||||
|
pointer-events: none; |
||||||
|
transform-style: preserve-3d; |
||||||
|
} |
||||||
|
|
||||||
|
.sticky-header-toggle__icon > span { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: var(--icon-bar-height); |
||||||
|
transition: transform 0.2s; |
||||||
|
transform-origin: center; |
||||||
|
background-color: var(--color--white); |
||||||
|
} |
||||||
|
|
||||||
|
.is-fixed .sticky-header-toggle { |
||||||
|
cursor: pointer; |
||||||
|
pointer-events: auto; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(1) { |
||||||
|
transform: translateY(calc(var(--icon-bar-height) + var(--icon-bar-space))) rotate(-45deg); |
||||||
|
} |
||||||
|
|
||||||
|
[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(2) { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(3) { |
||||||
|
transform: translateY(calc(0px - var(--icon-bar-height) - var(--icon-bar-space))) rotate(45deg); |
||||||
|
} |
||||||
@ -0,0 +1,59 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Main Hero. |
||||||
|
*/ |
||||||
|
|
||||||
|
.hero__content { |
||||||
|
grid-column: 1 / 7; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.hero__content { |
||||||
|
/* 700px */ |
||||||
|
grid-column: 3 / 13; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.hero__content { |
||||||
|
grid-column: 3 / 11; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.hero__img { |
||||||
|
grid-column: 1 / 7; |
||||||
|
margin-block-start: var(--sp2); |
||||||
|
margin-block-end: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
.hero__img img { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
.hero__img { |
||||||
|
margin-block-start: var(--sp3); |
||||||
|
margin-block-end: var(--sp3); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.hero__img { |
||||||
|
grid-column: 1 / 15; |
||||||
|
margin-block-start: var(--sp4); |
||||||
|
margin-block-end: var(--sp4); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.hero__img { |
||||||
|
grid-column: 2 / 14; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
figure.logo--ilives { |
||||||
|
background: none; |
||||||
|
width: 24em; |
||||||
|
margin: 0 auto; |
||||||
|
height:300px; |
||||||
|
} |
||||||
|
|
||||||
|
.page-node-type-landing-page #block-views-block-media-display-blocks-source { |
||||||
|
display: none; |
||||||
|
|
||||||
|
} |
||||||
|
article.node.node--type-landing-page h2 { |
||||||
|
margin: 0; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
} |
||||||
|
.hero-section { |
||||||
|
|
||||||
|
border: 10px solid #d0bca4; |
||||||
|
|
||||||
|
/*height:300px;*/ |
||||||
|
|
||||||
|
} |
||||||
|
.logo-wrapper { |
||||||
|
background: #3333335c; |
||||||
|
} |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Links component. |
||||||
|
*/ |
||||||
|
|
||||||
|
.links.inline { |
||||||
|
margin-inline-start: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.links.inline > * { |
||||||
|
display: inline; |
||||||
|
} |
||||||
|
|
||||||
|
.links.inline > *:not(:last-child) { |
||||||
|
padding-inline-end: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.node--type-book .links.inline { |
||||||
|
text-align: end; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Maintenance page. |
||||||
|
*/ |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
.maintenance-page .site-header__initial { |
||||||
|
flex-shrink: 0; |
||||||
|
width: var(--content-left); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.maintenance-page .main-content { |
||||||
|
min-height: 80vh; |
||||||
|
} |
||||||
|
|
||||||
|
.maintenance-page-icon { |
||||||
|
display: block; |
||||||
|
margin-block: var(--sp3); |
||||||
|
} |
||||||
|
|
||||||
|
.maintenance-page-icon path { |
||||||
|
fill: var(--color--primary-50); |
||||||
|
} |
||||||
@ -0,0 +1,164 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Messages. |
||||||
|
*/ |
||||||
|
|
||||||
|
:root { |
||||||
|
--messages-icon-size: 2rem; |
||||||
|
} |
||||||
|
|
||||||
|
.messages-list { |
||||||
|
margin-block: var(--sp1); |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.messages { |
||||||
|
min-height: calc(var(--messages-icon-size) + 2 * var(--sp1)); |
||||||
|
padding-block: var(--sp1); |
||||||
|
padding-inline-start: var(--sp1-5); |
||||||
|
padding-inline-end: var(--sp1-5); |
||||||
|
color: var(--color--white); |
||||||
|
outline: solid 1px transparent; |
||||||
|
background-color: var(--color--gray-5); |
||||||
|
} |
||||||
|
|
||||||
|
.messages * { |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
/* Additional specificity to override contrib modules. */ |
||||||
|
|
||||||
|
.messages.messages-list__item { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
|
||||||
|
.messages__list { |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.messages:not(.hidden) ~ .messages { |
||||||
|
margin-block-start: var(--sp1); |
||||||
|
} |
||||||
|
|
||||||
|
.messages__item + .messages__item { |
||||||
|
margin-block-start: var(--sp0-5); |
||||||
|
} |
||||||
|
|
||||||
|
.messages__container { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.messages__header { |
||||||
|
flex-shrink: 0; |
||||||
|
margin-inline-end: var(--sp1); |
||||||
|
} |
||||||
|
|
||||||
|
.messages__header.no-icon { |
||||||
|
margin-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.messages__content { |
||||||
|
overflow: auto; /* Ensure large code blocks can be scrolled to. */ |
||||||
|
flex: 1; |
||||||
|
padding-block-start: 0.1875rem; |
||||||
|
} |
||||||
|
|
||||||
|
.messages__button { |
||||||
|
flex-shrink: 0; |
||||||
|
margin-inline-start: var(--sp1); |
||||||
|
padding-block-start: 0.1875rem; |
||||||
|
} |
||||||
|
|
||||||
|
.messages__close { |
||||||
|
position: relative; |
||||||
|
width: 1.5625rem; |
||||||
|
height: 1.5625rem; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
cursor: pointer; |
||||||
|
vertical-align: top; |
||||||
|
border: 0; |
||||||
|
background: none; |
||||||
|
-webkit-appearance: none; |
||||||
|
appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
.messages__close::before, |
||||||
|
.messages__close::after { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
display: block; |
||||||
|
width: 2.0625rem; |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
border-top: solid 2px var(--color--gray-60); |
||||||
|
} |
||||||
|
|
||||||
|
.messages__close::before { |
||||||
|
transform: translate(-50%, -50%) rotate(45deg); |
||||||
|
} |
||||||
|
|
||||||
|
.messages__close::after { |
||||||
|
transform: translate(-50%, -50%) rotate(-45deg); |
||||||
|
} |
||||||
|
|
||||||
|
.messages__close:hover::before, |
||||||
|
.messages__close:hover::after { |
||||||
|
border-color: var(--color--white); |
||||||
|
} |
||||||
|
|
||||||
|
.messages__close:focus { |
||||||
|
outline: 2px solid var(--color--primary-60); |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.messages__icon svg { |
||||||
|
vertical-align: top; |
||||||
|
} |
||||||
|
|
||||||
|
.messages--error .messages__icon svg { |
||||||
|
fill: var(--color--red); |
||||||
|
} |
||||||
|
|
||||||
|
.messages--warning .messages__icon svg { |
||||||
|
fill: var(--color--gold); |
||||||
|
} |
||||||
|
|
||||||
|
.messages--status .messages__icon svg { |
||||||
|
fill: var(--color--green); |
||||||
|
} |
||||||
|
|
||||||
|
.messages--info .messages__icon svg { |
||||||
|
fill: var(--color--primary-60); |
||||||
|
} |
||||||
|
|
||||||
|
.messages a { |
||||||
|
color: var(--color--white); |
||||||
|
} |
||||||
|
|
||||||
|
.messages pre { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.js-form-managed-file .messages { |
||||||
|
margin-block-end: var(--sp1); |
||||||
|
border-inline-start: solid 0.375rem var(--color--red); |
||||||
|
} |
||||||
@ -0,0 +1,62 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Styles for menu placed in sidebar region. |
||||||
|
*/ |
||||||
|
|
||||||
|
.menu--sidebar { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.menu--sidebar .menu { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.menu--sidebar .menu--level-1 { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.menu--sidebar .menu__link { |
||||||
|
position: relative; |
||||||
|
display: block; |
||||||
|
padding-block: var(--sp0-75); |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
font-family: var(--font-serif); |
||||||
|
font-size: 1.125rem; |
||||||
|
|
||||||
|
/* Bottom divider line. */ |
||||||
|
} |
||||||
|
|
||||||
|
.menu--sidebar .menu__link::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-end: 0; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: var(--sp4); |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
border-block-start: solid 2px var(--color--gray-95); |
||||||
|
} |
||||||
|
|
||||||
|
.menu--sidebar .menu__link--link { |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-neutral-loud); |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.menu--sidebar .menu__link--link:hover { |
||||||
|
color: var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
/* No bottom divider line for last menu item. */ |
||||||
|
|
||||||
|
:is(.menu--sidebar .menu__item--level-1:last-child > .menu__link:last-child, .menu--sidebar .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child)::after { |
||||||
|
content: none; |
||||||
|
} |
||||||
@ -0,0 +1,113 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Nav Button Mobile. |
||||||
|
*/ |
||||||
|
|
||||||
|
.mobile-nav-button { |
||||||
|
position: relative; |
||||||
|
z-index: 505; /* Appear above mobile nav. */ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
align-self: center; |
||||||
|
width: var(--sp2); |
||||||
|
height: var(--sp2); |
||||||
|
margin-inline-start: auto; |
||||||
|
margin-inline-end: -0.375rem; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0.375rem; |
||||||
|
padding-inline-end: 0.375rem; |
||||||
|
cursor: pointer; |
||||||
|
border: none; |
||||||
|
background: transparent; |
||||||
|
-webkit-appearance: none; |
||||||
|
appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
.mobile-nav-button:focus { |
||||||
|
outline: solid 2px var(--color--primary-40); |
||||||
|
} |
||||||
|
|
||||||
|
.mobile-nav-button:active { |
||||||
|
color: inherit; /* Override Safari's default UA styles. */ |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
.mobile-nav-button { |
||||||
|
display: inline-flex; |
||||||
|
width: auto; |
||||||
|
padding-inline-start: var(--sp); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Text that says "menu". */ |
||||||
|
|
||||||
|
.mobile-nav-button__label { |
||||||
|
position: absolute; |
||||||
|
display: block; |
||||||
|
overflow: hidden; |
||||||
|
clip: rect(1px, 1px, 1px, 1px); |
||||||
|
width: 1px; |
||||||
|
height: 1px; |
||||||
|
word-wrap: normal; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
.mobile-nav-button__label { |
||||||
|
position: static; |
||||||
|
overflow: visible; |
||||||
|
clip: auto; |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
margin-inline-end: 0.75rem; |
||||||
|
letter-spacing: 0.05em; |
||||||
|
font-size: 0.875rem; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.mobile-nav-button__icon { |
||||||
|
position: relative; |
||||||
|
display: block; |
||||||
|
width: var(--sp2); |
||||||
|
height: 0; |
||||||
|
border-top: solid 3px var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
.mobile-nav-button__icon::before, |
||||||
|
.mobile-nav-button__icon::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 0; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
transition: transform 0.2s; |
||||||
|
border-top: solid 3px var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
.mobile-nav-button__icon::before { |
||||||
|
transform: translateY(-0.6875rem); |
||||||
|
} |
||||||
|
|
||||||
|
.mobile-nav-button__icon::after { |
||||||
|
transform: translateY(0.3125rem); |
||||||
|
} |
||||||
|
|
||||||
|
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon { |
||||||
|
border-top-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::before { |
||||||
|
transform: translateY(-0.1875rem) rotate(-45deg); |
||||||
|
} |
||||||
|
|
||||||
|
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::after { |
||||||
|
transform: translateY(-0.1875rem) rotate(45deg); |
||||||
|
} |
||||||
@ -0,0 +1,135 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Button that expands second level nav when clicked. |
||||||
|
*/ |
||||||
|
|
||||||
|
.primary-nav__button-toggle { |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
width: var(--sp2); |
||||||
|
height: var(--sp2); |
||||||
|
margin-block-start: var(--sp0-5); /* Visually align button with menu link text. */ |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
cursor: pointer; |
||||||
|
text-indent: -62.4375rem; |
||||||
|
border: 0; |
||||||
|
background: transparent; |
||||||
|
-webkit-appearance: none; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__button-toggle:focus { |
||||||
|
outline: auto 2px var(--color--primary-50); |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__button-toggle .icon--menu-toggle { |
||||||
|
position: absolute; |
||||||
|
/* stylelint-disable csstools/use-logical */ |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
/* stylelint-enable csstools/use-logical */ |
||||||
|
width: 1rem; |
||||||
|
height: 1rem; |
||||||
|
transition: background-color 0.2s; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
border-radius: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__button-toggle .icon--menu-toggle::before, |
||||||
|
.primary-nav__button-toggle .icon--menu-toggle::after { |
||||||
|
position: absolute; |
||||||
|
/* stylelint-disable csstools/use-logical */ |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
/* stylelint-enable csstools/use-logical */ |
||||||
|
width: var(--sp); |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: solid 3px var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__button-toggle .icon--menu-toggle::after { |
||||||
|
transition: opacity 0.2s; |
||||||
|
transform: translate(-50%, -50%) rotate(90deg); |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__button-toggle[aria-expanded="true"] .icon--menu-toggle::after { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* aria-hidden attribute is removed by JS. Button is non-functional |
||||||
|
until JS is enabled. |
||||||
|
*/ |
||||||
|
|
||||||
|
.primary-nav__button-toggle[aria-hidden="true"] { |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__button-toggle { |
||||||
|
flex-shrink: 0; |
||||||
|
align-self: stretch; |
||||||
|
width: calc(var(--sp2) + 0.5rem); |
||||||
|
height: auto; |
||||||
|
margin-block-start: 0; |
||||||
|
margin-inline-end: calc(-1 * var(--sp2)); |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus { |
||||||
|
border: 0; |
||||||
|
outline: 0; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus .icon--menu-toggle { |
||||||
|
border: solid 2px var(--color--primary-40); |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__button-toggle:active { |
||||||
|
/* Necessary for Safari. */ |
||||||
|
color: currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__button-toggle[aria-expanded="true"] .icon--menu-toggle::after { |
||||||
|
opacity: 0.8; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle { |
||||||
|
inset-inline-start: 0.1875rem; |
||||||
|
width: 1.125rem; |
||||||
|
transform: translateY(-50%); |
||||||
|
border-radius: 0.25rem; |
||||||
|
background-color: var(--color--white); |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::before { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle::after { |
||||||
|
/* stylelint-disable csstools/use-logical */ |
||||||
|
top: calc(50% - 2px); |
||||||
|
left: 0.1875rem; |
||||||
|
/* stylelint-enable csstools/use-logical */ |
||||||
|
width: 0.5rem; |
||||||
|
height: 0.5rem; |
||||||
|
content: ""; |
||||||
|
transform: translateY(-50%) rotate(45deg); |
||||||
|
opacity: 0.8; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: none; |
||||||
|
border-right: solid 2px currentColor; |
||||||
|
border-bottom: solid 2px currentColor; |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,148 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Styles for primary navigation when JavaScript is disabled. |
||||||
|
*/ |
||||||
|
|
||||||
|
:root { |
||||||
|
--no-js-nav-column-width: 18.75rem; |
||||||
|
--no-js-nav-column-gap: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Mobile styles for primary navigation when JS is disabled. |
||||||
|
*/ |
||||||
|
|
||||||
|
@media (max-width: 75rem) { |
||||||
|
html:not(.js) .primary-nav__menu--level-1 { |
||||||
|
column-width: var(--no-js-nav-column-width); |
||||||
|
column-gap: var(--no-js-nav-column-gap); |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) .primary-nav__menu-item { |
||||||
|
page-break-inside: avoid; |
||||||
|
break-inside: avoid; |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) .site-header__inner__container { |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) .mobile-buttons { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) .header-nav { |
||||||
|
border: solid 1px var(--color--gray-95) !important; |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) .header-nav { |
||||||
|
position: static; |
||||||
|
visibility: visible; |
||||||
|
flex-basis: 100%; |
||||||
|
width: 100%; |
||||||
|
max-width: none; |
||||||
|
margin-block: var(--sp2) 0; |
||||||
|
margin-inline-start: var(--sp2); |
||||||
|
margin-inline-end: var(--sp2); |
||||||
|
padding-block: var(--sp2) 0; |
||||||
|
padding-inline-start: var(--sp2); |
||||||
|
padding-inline-end: var(--sp2); |
||||||
|
transform: none; |
||||||
|
box-shadow: 0 0 36px var(--color--gray-90); |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) .primary-nav__menu--level-2 { |
||||||
|
border-inline-start: 0; |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) .primary-nav__button-toggle { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before, |
||||||
|
html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
/** |
||||||
|
* Styles for 'always on mobile navigation' when JS is disabled. |
||||||
|
*/ |
||||||
|
html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-1 { |
||||||
|
column-width: var(--no-js-nav-column-width); |
||||||
|
column-gap: var(--no-js-nav-column-gap); |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) body.is-always-mobile-nav .primary-nav__menu-item { |
||||||
|
page-break-inside: avoid; |
||||||
|
break-inside: avoid; |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) body.is-always-mobile-nav .site-header__inner__container { |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) body.is-always-mobile-nav .mobile-buttons { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) body.is-always-mobile-nav .header-nav { |
||||||
|
border: solid 1px var(--color--gray-95) !important; |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) body.is-always-mobile-nav .header-nav { |
||||||
|
position: static; |
||||||
|
visibility: visible; |
||||||
|
flex-basis: 100%; |
||||||
|
width: 100%; |
||||||
|
max-width: none; |
||||||
|
margin-block: var(--sp2) 0; |
||||||
|
margin-inline-start: var(--sp2); |
||||||
|
margin-inline-end: var(--sp2); |
||||||
|
padding-block: var(--sp2) 0; |
||||||
|
padding-inline-start: var(--sp2); |
||||||
|
padding-inline-end: var(--sp2); |
||||||
|
transform: none; |
||||||
|
box-shadow: 0 0 36px var(--color--gray-90); |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 { |
||||||
|
border-inline-start: 0; |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) body.is-always-mobile-nav .primary-nav__button-toggle { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before, |
||||||
|
html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Styles for traditional dropdown primary navigation when JS is disabled. |
||||||
|
*/ |
||||||
|
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu--level-2, |
||||||
|
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu-🥕 { |
||||||
|
visibility: visible; |
||||||
|
transform: translate(-50%, 0); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Cannot combine the focus-within pseudo selector with other selectors, |
||||||
|
* because it will break IE11 and earlier versions of MS Edge. |
||||||
|
*/ |
||||||
|
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu--level-2, |
||||||
|
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu-🥕 { |
||||||
|
visibility: visible; |
||||||
|
transform: translate(-50%, 0); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,221 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Nav Primary (wide widths). |
||||||
|
*/ |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-item { |
||||||
|
flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */ |
||||||
|
} |
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link, |
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink { |
||||||
|
flex-basis: auto; |
||||||
|
} |
||||||
|
|
||||||
|
/* Remove hover state if submenu exists. */ |
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner::after { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link { |
||||||
|
letter-spacing: 0.02em; |
||||||
|
font-size: 1rem; |
||||||
|
line-height: var(--sp1-5); |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus { |
||||||
|
position: relative; |
||||||
|
outline: 0; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus::before { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
width: calc(100% + var(--sp)); |
||||||
|
height: var(--sp3); |
||||||
|
content: ""; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
border: solid 2px var(--color--primary-50); |
||||||
|
border-radius: 0.25rem; |
||||||
|
} |
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children { |
||||||
|
overflow: visible; /* Necessary to view icon in IE11 */ |
||||||
|
padding-inline-end: 0.5625rem; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus::before { |
||||||
|
width: calc(100% + var(--sp1-5)); |
||||||
|
content: ""; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* Chevron icon for desktop navigation. */ |
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 50%; |
||||||
|
inset-inline-start: calc(100% - 0.1875rem); |
||||||
|
width: 0.5rem; |
||||||
|
height: 0.5rem; |
||||||
|
margin-block-start: -2px; |
||||||
|
transform: translateY(-50%) rotate(45deg); |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: 0; |
||||||
|
border-right: solid 2px currentColor; |
||||||
|
border-bottom: solid 2px currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner { |
||||||
|
padding-block: var(--sp2); |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner::after { |
||||||
|
transform-origin: center; |
||||||
|
border-top-width: var(--sp0-5); |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 { |
||||||
|
display: flex; |
||||||
|
align-items: stretch; |
||||||
|
margin-inline-end: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 { |
||||||
|
position: relative; /* Anchor secondary menu */ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
width: max-content; |
||||||
|
max-width: 12.5rem; |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) { |
||||||
|
margin-inline-end: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 { |
||||||
|
position: absolute; |
||||||
|
z-index: 105; /* Appear above search container. */ |
||||||
|
top: calc(100% - (0.5 * var(--sp))); |
||||||
|
left: 50%; |
||||||
|
visibility: hidden; |
||||||
|
overflow: auto; |
||||||
|
width: 15.625rem; |
||||||
|
/* Ensure that long level-2 menus will never overflow viewport (focused |
||||||
|
* elements should always be in viewport per accessibility guidelines). */ |
||||||
|
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp)); |
||||||
|
margin-block-start: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
padding-block: calc(3 * var(--sp)); |
||||||
|
padding-inline-start: var(--sp2); |
||||||
|
padding-inline-end: var(--sp2); |
||||||
|
transition: none; |
||||||
|
transform: translate(-50%, -1.25rem); |
||||||
|
opacity: 0; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: solid var(--color--primary-50) var(--sp0-5); |
||||||
|
border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */ |
||||||
|
border-bottom: solid 1px transparent; |
||||||
|
border-left: solid 1px transparent; |
||||||
|
border-radius: 0 0 2px 2px; |
||||||
|
background: var(--color--white); |
||||||
|
box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08); |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent { |
||||||
|
visibility: visible; |
||||||
|
margin-block-start: 0; |
||||||
|
transform: translate(-50%, 0); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus::before { |
||||||
|
top: 0; |
||||||
|
left: calc(var(--sp0-5) * -1); |
||||||
|
height: 100%; |
||||||
|
transform: none; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner { |
||||||
|
padding-block: var(--sp0-5); |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after { |
||||||
|
transform-origin: left; /* LTR */ |
||||||
|
border-top-width: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner::after { |
||||||
|
transform-origin: right; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Arrow is placed outside of submenu because the submenu has the |
||||||
|
* `overflow: hidden` CSS rule applied. |
||||||
|
*/ |
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 { |
||||||
|
position: absolute; |
||||||
|
z-index: 105; /* Match level 2 menus. */ |
||||||
|
top: calc(100% - var(--sp)); |
||||||
|
left: 50%; |
||||||
|
visibility: hidden; |
||||||
|
width: 0; |
||||||
|
height: 0; |
||||||
|
transform: translate(-50%, -1.25rem); |
||||||
|
opacity: 0; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-right: solid 10px transparent; |
||||||
|
border-bottom: solid 10px var(--color--primary-50); |
||||||
|
border-left: solid 10px transparent; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .primary-nav__menu-🥕.is-active-menu-parent { |
||||||
|
visibility: visible; |
||||||
|
transform: translate(-50%, 0); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* When ensuring that long menus don't overflow viewport, we can give a |
||||||
|
* little extra room when the toolbar is fixed (and is shorter). |
||||||
|
*/ |
||||||
|
body:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 { |
||||||
|
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp) + var(--sp4)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Only apply transition styles to menu when JS is loaded. This |
||||||
|
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189 |
||||||
|
*/ |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2, |
||||||
|
html.js body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 { |
||||||
|
transition: visibility 0.2s, transform 0.2s, opacity 0.2s; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,213 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Nav Primary. |
||||||
|
*/ |
||||||
|
|
||||||
|
.primary-nav__menu { |
||||||
|
flex-wrap: wrap; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-item { |
||||||
|
margin-block-end: var(--sp0-5); |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-item:last-child { |
||||||
|
margin-block-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-item.primary-nav__menu-item--has-children { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link, |
||||||
|
.primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink { |
||||||
|
/* Ensure that long text doesn't make the mobile expand button wrap. */ |
||||||
|
flex-basis: calc(100% - var(--sp3)); |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link { |
||||||
|
flex-grow: 1; |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-neutral-loud); |
||||||
|
font-size: 1.75rem; |
||||||
|
font-weight: bold; |
||||||
|
line-height: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link:hover { |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link:focus { |
||||||
|
outline: auto 2px var(--color--primary-50); |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link--nolink { |
||||||
|
padding-block: var(--sp0-5); |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
color: var(--color-text-neutral-soft); |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link--button { |
||||||
|
position: relative; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
cursor: pointer; |
||||||
|
text-align: start; |
||||||
|
border: 0; |
||||||
|
background: transparent; |
||||||
|
|
||||||
|
/* Plus icon for mobile navigation. */ |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link--button.primary-nav__menu-link--has-children { |
||||||
|
padding-inline-end: var(--sp3); /* Ensure text does not overlap icon. */ |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link--button.primary-nav__menu-link--has-children::before, |
||||||
|
.primary-nav__menu-link--button.primary-nav__menu-link--has-children::after { |
||||||
|
position: absolute; |
||||||
|
inset-inline-end: 0.5625rem; |
||||||
|
inset-block-start: calc(var(--sp0-5) + 1.0625rem); /* Visually align button with menu link text. */ |
||||||
|
width: 1.125rem; |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: solid 3px var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link--button.primary-nav__menu-link--has-children::after { |
||||||
|
transition: opacity 0.2s; |
||||||
|
transform: rotate(90deg); |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link-inner { |
||||||
|
position: relative; |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
padding-block: var(--sp0-5); |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link-inner::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-end: 0; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
transition: transform 0.2s; |
||||||
|
transform: scaleX(0); |
||||||
|
transform-origin: left; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: solid 5px var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link:hover .primary-nav__menu-link-inner::after { |
||||||
|
transform: scaleX(1); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
Top level specific styles. |
||||||
|
*/ |
||||||
|
|
||||||
|
.primary-nav__menu--level-1 { |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link--level-1 { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
Secondary menu specific styles. |
||||||
|
*/ |
||||||
|
|
||||||
|
.primary-nav__menu--level-2 { |
||||||
|
visibility: hidden; |
||||||
|
overflow: hidden; |
||||||
|
flex-basis: 100%; |
||||||
|
max-height: 0; |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: calc(-1 * var(--sp)); |
||||||
|
padding-inline-start: var(--sp2-5); |
||||||
|
transition: opacity 0.2s, visibility 0.2s, max-height 0.2s; |
||||||
|
opacity: 0; |
||||||
|
border-inline-start: solid var(--sp) var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu--level-2.is-active-menu-parent { |
||||||
|
visibility: visible; |
||||||
|
max-height: none; |
||||||
|
margin-block-start: var(--sp1-5); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 43.75rem) { |
||||||
|
.primary-nav__menu--level-2 { |
||||||
|
margin-inline-start: calc(-1 * var(--sp3)); |
||||||
|
padding-inline-start: var(--sp3); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Olives doesn't officially support nested tertiary submenus, but this |
||||||
|
* ensures that it doesn't break all the way. |
||||||
|
* |
||||||
|
* @see https://www.drupal.org/project/drupal/issues/3221399 |
||||||
|
*/ |
||||||
|
|
||||||
|
.primary-nav__menu--level-2 .primary-nav__menu-item--has-children { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link--level-2 { |
||||||
|
font-size: 1rem; |
||||||
|
font-weight: normal; |
||||||
|
line-height: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) .primary-nav__menu--level-2 { |
||||||
|
visibility: visible; |
||||||
|
max-height: none; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .primary-nav__menu-link-inner::after { |
||||||
|
transform-origin: right; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-item:first-child span:before { |
||||||
|
/*content: url("../../../images/magnifying-glass.svg");*/ |
||||||
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='22' width='22' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath fill='%232b353b' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E"); |
||||||
|
/*fill:blue; */ |
||||||
|
margin-right:5px; |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,119 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Secondary navigation styling. |
||||||
|
*/ |
||||||
|
|
||||||
|
.secondary-nav { |
||||||
|
letter-spacing: 0.02em; |
||||||
|
font-size: var(--font-size-s); |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.secondary-nav__menu { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.secondary-nav__menu-item { |
||||||
|
/* @todo should this be scoped to desktop nav? */ |
||||||
|
width: max-content; |
||||||
|
max-width: 12.5rem; |
||||||
|
/* Parent element is set to flex-basis: 0. We |
||||||
|
* don't want text to wrap unless it goes over a |
||||||
|
* certain arbitrary width. |
||||||
|
*/ |
||||||
|
} |
||||||
|
|
||||||
|
.secondary-nav__menu-item:not(:last-child) { |
||||||
|
margin-inline-end: var(--sp1-5); |
||||||
|
} |
||||||
|
|
||||||
|
.secondary-nav__menu-item:first-child a:before { |
||||||
|
/*content: url("../../../images/magnifying-glass.svg");*/ |
||||||
|
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath fill='%232b353b' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E"); |
||||||
|
/*fill:blue; */ |
||||||
|
margin-right:5px; |
||||||
|
|
||||||
|
} |
||||||
|
.secondary-nav__menu-link { |
||||||
|
position: relative; |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
height: var(--sp2); |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
.secondary-nav__menu-link::after { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
transition: opacity 0.2s, transform 0.2s; |
||||||
|
transform: translateY(0.3125rem); |
||||||
|
opacity: 0; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: solid 2px currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
.secondary-nav__menu-link:hover::after { |
||||||
|
transform: translateY(0); |
||||||
|
opacity: 0.8; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
body:not(.is-always-mobile-nav) .secondary-nav { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
margin-inline-start: var(--sp); |
||||||
|
padding-inline-start: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .secondary-nav::before { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 50%; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: 2px; |
||||||
|
height: var(--sp2); |
||||||
|
content: ""; |
||||||
|
transform: translateY(-50%); |
||||||
|
background-color: var(--color--gray-90); |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) { |
||||||
|
margin-inline-end: var(--sp2); |
||||||
|
} |
||||||
|
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus { |
||||||
|
position: relative; |
||||||
|
outline: 0; |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus::before { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
width: calc(100% + var(--sp)); |
||||||
|
height: var(--sp3); |
||||||
|
content: ""; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
border: solid 2px var(--color--primary-50); |
||||||
|
border-radius: 0.25rem; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Styles for menu placed in sidebar region. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
.menu--sidebar { |
||||||
|
list-style: none; |
||||||
|
|
||||||
|
& .menu { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
& .menu--level-1 { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
& .menu__link { |
||||||
|
position: relative; |
||||||
|
display: block; |
||||||
|
padding-block: var(--sp0-75); |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
font-family: var(--font-serif); |
||||||
|
font-size: 18px; |
||||||
|
|
||||||
|
/* Bottom divider line. */ |
||||||
|
&::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-end: 0; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: var(--sp4); |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
border-block-start: solid 2px var(--color--gray-95); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& .menu__link--link { |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-neutral-loud); |
||||||
|
font-weight: 600; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
color: var(--color--primary-50); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* No bottom divider line for last menu item. */ |
||||||
|
& .menu__item--level-1:last-child > .menu__link:last-child, |
||||||
|
& .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child { |
||||||
|
&::after { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,102 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Nav Button Mobile. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
.mobile-nav-button { |
||||||
|
position: relative; |
||||||
|
z-index: 505; /* Appear above mobile nav. */ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
align-self: center; |
||||||
|
width: var(--sp2); |
||||||
|
height: var(--sp2); |
||||||
|
margin-inline-start: auto; |
||||||
|
margin-inline-end: -6px; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 6px; |
||||||
|
padding-inline-end: 6px; |
||||||
|
cursor: pointer; |
||||||
|
border: none; |
||||||
|
background: transparent; |
||||||
|
appearance: none; |
||||||
|
|
||||||
|
&:focus { |
||||||
|
outline: solid 2px var(--color--primary-40); |
||||||
|
} |
||||||
|
|
||||||
|
&:active { |
||||||
|
color: inherit; /* Override Safari's default UA styles. */ |
||||||
|
} |
||||||
|
|
||||||
|
@media (--sm) { |
||||||
|
display: inline-flex; |
||||||
|
width: auto; |
||||||
|
padding-inline-start: var(--sp); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Text that says "menu". */ |
||||||
|
.mobile-nav-button__label { |
||||||
|
position: absolute; |
||||||
|
display: block; |
||||||
|
overflow: hidden; |
||||||
|
clip: rect(1px, 1px, 1px, 1px); |
||||||
|
width: 1px; |
||||||
|
height: 1px; |
||||||
|
word-wrap: normal; |
||||||
|
|
||||||
|
@media (--sm) { |
||||||
|
position: static; |
||||||
|
overflow: visible; |
||||||
|
clip: auto; |
||||||
|
width: auto; |
||||||
|
height: auto; |
||||||
|
margin-inline-end: 12px; |
||||||
|
letter-spacing: 0.05em; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.mobile-nav-button__icon { |
||||||
|
position: relative; |
||||||
|
display: block; |
||||||
|
width: var(--sp2); |
||||||
|
height: 0; |
||||||
|
border-top: solid 3px var(--color--primary-50); |
||||||
|
|
||||||
|
&::before, |
||||||
|
&::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 0; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
transition: transform 0.2s; |
||||||
|
border-top: solid 3px var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
&::before { |
||||||
|
transform: translateY(-11px); |
||||||
|
} |
||||||
|
|
||||||
|
&::after { |
||||||
|
transform: translateY(5px); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon { |
||||||
|
border-top-color: transparent; |
||||||
|
|
||||||
|
&::before { |
||||||
|
transform: translateY(-3px) rotate(-45deg); |
||||||
|
} |
||||||
|
|
||||||
|
&::after { |
||||||
|
transform: translateY(-3px) rotate(45deg); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,131 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Button that expands second level nav when clicked. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
.primary-nav__button-toggle { |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
width: var(--sp2); |
||||||
|
height: var(--sp2); |
||||||
|
margin-block-start: var(--sp0-5); /* Visually align button with menu link text. */ |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
cursor: pointer; |
||||||
|
text-indent: -999px; |
||||||
|
border: 0; |
||||||
|
background: transparent; |
||||||
|
-webkit-appearance: none; |
||||||
|
|
||||||
|
&:focus { |
||||||
|
outline: auto 2px var(--color--primary-50); |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
& .icon--menu-toggle { |
||||||
|
position: absolute; |
||||||
|
/* stylelint-disable csstools/use-logical */ |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
/* stylelint-enable csstools/use-logical */ |
||||||
|
width: 16px; |
||||||
|
height: 16px; |
||||||
|
transition: background-color 0.2s; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
border-radius: 2px; |
||||||
|
|
||||||
|
&::before, |
||||||
|
&::after { |
||||||
|
position: absolute; |
||||||
|
/* stylelint-disable csstools/use-logical */ |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
/* stylelint-enable csstools/use-logical */ |
||||||
|
width: var(--sp); |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: solid 3px var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
&::after { |
||||||
|
transition: opacity 0.2s; |
||||||
|
transform: translate(-50%, -50%) rotate(90deg); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&[aria-expanded="true"] .icon--menu-toggle::after { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* aria-hidden attribute is removed by JS. Button is non-functional |
||||||
|
until JS is enabled. |
||||||
|
*/ |
||||||
|
&[aria-hidden="true"] { |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) { |
||||||
|
@media (--nav) { |
||||||
|
& .primary-nav__button-toggle { |
||||||
|
flex-shrink: 0; |
||||||
|
align-self: stretch; |
||||||
|
width: calc(var(--sp2) + 8px); |
||||||
|
height: auto; |
||||||
|
margin-block-start: 0; |
||||||
|
margin-inline-end: calc(-1 * var(--sp2)); |
||||||
|
|
||||||
|
&:focus { |
||||||
|
border: 0; |
||||||
|
outline: 0; |
||||||
|
|
||||||
|
& .icon--menu-toggle { |
||||||
|
border: solid 2px var(--color--primary-40); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:active { |
||||||
|
/* Necessary for Safari. */ |
||||||
|
color: currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
&[aria-expanded="true"] .icon--menu-toggle::after { |
||||||
|
opacity: 0.8; |
||||||
|
} |
||||||
|
|
||||||
|
& .icon--menu-toggle { |
||||||
|
inset-inline-start: 3px; |
||||||
|
width: 18px; |
||||||
|
transform: translateY(-50%); |
||||||
|
border-radius: 4px; |
||||||
|
background-color: var(--color--white); |
||||||
|
|
||||||
|
&::before { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
|
||||||
|
&::after { |
||||||
|
/* stylelint-disable csstools/use-logical */ |
||||||
|
top: calc(50% - 2px); |
||||||
|
left: 3px; |
||||||
|
/* stylelint-enable csstools/use-logical */ |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
content: ""; |
||||||
|
transform: translateY(-50%) rotate(45deg); |
||||||
|
opacity: 0.8; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: none; |
||||||
|
border-right: solid 2px currentColor; |
||||||
|
border-bottom: solid 2px currentColor; |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,150 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Styles for primary navigation when JavaScript is disabled. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
:root { |
||||||
|
--no-js-nav-column-width: 300px; |
||||||
|
--no-js-nav-column-gap: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) { |
||||||
|
/** |
||||||
|
* Mobile styles for primary navigation when JS is disabled. |
||||||
|
*/ |
||||||
|
@media (--max-nav) { |
||||||
|
& .primary-nav__menu--level-1 { |
||||||
|
column-width: var(--no-js-nav-column-width); |
||||||
|
column-gap: var(--no-js-nav-column-gap); |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__menu-item { |
||||||
|
break-inside: avoid; |
||||||
|
} |
||||||
|
|
||||||
|
& .site-header__inner__container { |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
& .mobile-buttons { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
& .header-nav { |
||||||
|
position: static; |
||||||
|
visibility: visible; |
||||||
|
flex-basis: 100%; |
||||||
|
width: 100%; |
||||||
|
max-width: none; |
||||||
|
margin-block: var(--sp2) 0; |
||||||
|
margin-inline-start: var(--sp2); |
||||||
|
margin-inline-end: var(--sp2); |
||||||
|
padding-block: var(--sp2) 0; |
||||||
|
padding-inline-start: var(--sp2); |
||||||
|
padding-inline-end: var(--sp2); |
||||||
|
transform: none; |
||||||
|
border: solid 1px var(--color--gray-95) !important; |
||||||
|
box-shadow: 0 0 36px var(--color--gray-90); |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__menu--level-2 { |
||||||
|
border-inline-start: 0; |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__button-toggle { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__menu-link--button.primary-nav__menu-link--has-children { |
||||||
|
&::before, |
||||||
|
&::after { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (--nav) { |
||||||
|
/** |
||||||
|
* Styles for 'always on mobile navigation' when JS is disabled. |
||||||
|
*/ |
||||||
|
& body.is-always-mobile-nav { |
||||||
|
& .primary-nav__menu--level-1 { |
||||||
|
column-width: var(--no-js-nav-column-width); |
||||||
|
column-gap: var(--no-js-nav-column-gap); |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__menu-item { |
||||||
|
break-inside: avoid; |
||||||
|
} |
||||||
|
|
||||||
|
& .site-header__inner__container { |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
& .mobile-buttons { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
& .header-nav { |
||||||
|
position: static; |
||||||
|
visibility: visible; |
||||||
|
flex-basis: 100%; |
||||||
|
width: 100%; |
||||||
|
max-width: none; |
||||||
|
margin-block: var(--sp2) 0; |
||||||
|
margin-inline-start: var(--sp2); |
||||||
|
margin-inline-end: var(--sp2); |
||||||
|
padding-block: var(--sp2) 0; |
||||||
|
padding-inline-start: var(--sp2); |
||||||
|
padding-inline-end: var(--sp2); |
||||||
|
transform: none; |
||||||
|
border: solid 1px var(--color--gray-95) !important; |
||||||
|
box-shadow: 0 0 36px var(--color--gray-90); |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__menu--level-2 { |
||||||
|
border-inline-start: 0; |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__button-toggle { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__menu-link--button.primary-nav__menu-link--has-children { |
||||||
|
&::before, |
||||||
|
&::after { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Styles for traditional dropdown primary navigation when JS is disabled. |
||||||
|
*/ |
||||||
|
& body:not(.is-always-mobile-nav) { |
||||||
|
& .primary-nav__menu-item--level-1:hover { |
||||||
|
& .primary-nav__menu--level-2, |
||||||
|
& .primary-nav__menu-🥕 { |
||||||
|
visibility: visible; |
||||||
|
transform: translate(-50%, 0); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Cannot combine the focus-within pseudo selector with other selectors, |
||||||
|
* because it will break IE11 and earlier versions of MS Edge. |
||||||
|
*/ |
||||||
|
& .primary-nav__menu-item--level-1:focus-within { |
||||||
|
& .primary-nav__menu--level-2, |
||||||
|
& .primary-nav__menu-🥕 { |
||||||
|
visibility: visible; |
||||||
|
transform: translate(-50%, 0); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,225 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Nav Primary (wide widths). |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) { |
||||||
|
@media (--nav) { |
||||||
|
& .primary-nav__menu-item { |
||||||
|
flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */ |
||||||
|
|
||||||
|
&.primary-nav__menu-item--has-children { |
||||||
|
& .primary-nav__menu-link--link, |
||||||
|
& .primary-nav__menu-link--nolink { |
||||||
|
flex-basis: auto; |
||||||
|
} |
||||||
|
|
||||||
|
/* Remove hover state if submenu exists. */ |
||||||
|
& .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner::after { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__menu-link { |
||||||
|
letter-spacing: 0.02em; |
||||||
|
font-size: 16px; |
||||||
|
line-height: var(--sp1-5); |
||||||
|
|
||||||
|
&:focus { |
||||||
|
position: relative; |
||||||
|
outline: 0; |
||||||
|
|
||||||
|
&::before { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
width: calc(100% + var(--sp)); |
||||||
|
height: var(--sp3); |
||||||
|
content: ""; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
border: solid 2px var(--color--primary-50); |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__menu-link--button { |
||||||
|
&.primary-nav__menu-link--has-children { |
||||||
|
overflow: visible; /* Necessary to view icon in IE11 */ |
||||||
|
padding-inline-end: 9px; |
||||||
|
|
||||||
|
&:focus::before { |
||||||
|
width: calc(100% + var(--sp1-5)); |
||||||
|
content: ""; |
||||||
|
} |
||||||
|
|
||||||
|
&::before { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* Chevron icon for desktop navigation. */ |
||||||
|
&::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 50%; |
||||||
|
inset-inline-start: calc(100% - 3px); |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
margin-block-start: -2px; |
||||||
|
transform: translateY(-50%) rotate(45deg); |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: 0; |
||||||
|
border-right: solid 2px currentColor; |
||||||
|
border-bottom: solid 2px currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
&[aria-expanded="true"]::after { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__menu-link-inner { |
||||||
|
padding-block: var(--sp2); |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
|
||||||
|
&::after { |
||||||
|
transform-origin: center; |
||||||
|
border-top-width: var(--sp0-5); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__menu--level-1 { |
||||||
|
display: flex; |
||||||
|
align-items: stretch; |
||||||
|
margin-inline-end: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__menu-item--level-1 { |
||||||
|
position: relative; /* Anchor secondary menu */ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
width: max-content; |
||||||
|
max-width: 200px; |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
|
||||||
|
&:not(:last-child) { |
||||||
|
margin-inline-end: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__menu--level-2 { |
||||||
|
position: absolute; |
||||||
|
z-index: 105; /* Appear above search container. */ |
||||||
|
top: calc(100% - (0.5 * var(--sp))); |
||||||
|
left: 50%; |
||||||
|
visibility: hidden; |
||||||
|
overflow: auto; |
||||||
|
width: 250px; |
||||||
|
/* Ensure that long level-2 menus will never overflow viewport (focused |
||||||
|
* elements should always be in viewport per accessibility guidelines). */ |
||||||
|
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp)); |
||||||
|
margin-block-start: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
padding-block: calc(3 * var(--sp)); |
||||||
|
padding-inline-start: var(--sp2); |
||||||
|
padding-inline-end: var(--sp2); |
||||||
|
transition: none; |
||||||
|
transform: translate(-50%, -20px); |
||||||
|
opacity: 0; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: solid var(--color--primary-50) var(--sp0-5); |
||||||
|
border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */ |
||||||
|
border-bottom: solid 1px transparent; |
||||||
|
border-left: solid 1px transparent; |
||||||
|
border-radius: 0 0 2px 2px; |
||||||
|
background: var(--color--white); |
||||||
|
box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08); |
||||||
|
|
||||||
|
&.is-active-menu-parent { |
||||||
|
visibility: visible; |
||||||
|
margin-block-start: 0; |
||||||
|
transform: translate(-50%, 0); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__menu-link--level-2 { |
||||||
|
display: block; |
||||||
|
|
||||||
|
&:focus::before { |
||||||
|
top: 0; |
||||||
|
left: calc(var(--sp0-5) * -1); |
||||||
|
height: 100%; |
||||||
|
transform: none; |
||||||
|
} |
||||||
|
|
||||||
|
& .primary-nav__menu-link-inner { |
||||||
|
padding-block: var(--sp0-5); |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
|
||||||
|
&::after { |
||||||
|
transform-origin: left; /* LTR */ |
||||||
|
border-top-width: 3px; |
||||||
|
|
||||||
|
&:dir(rtl) { |
||||||
|
transform-origin: right; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Arrow is placed outside of submenu because the submenu has the |
||||||
|
* `overflow: hidden` CSS rule applied. |
||||||
|
*/ |
||||||
|
& .primary-nav__menu-🥕 { |
||||||
|
position: absolute; |
||||||
|
z-index: 105; /* Match level 2 menus. */ |
||||||
|
top: calc(100% - var(--sp)); |
||||||
|
left: 50%; |
||||||
|
visibility: hidden; |
||||||
|
width: 0; |
||||||
|
height: 0; |
||||||
|
transform: translate(-50%, -20px); |
||||||
|
opacity: 0; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-right: solid 10px transparent; |
||||||
|
border-bottom: solid 10px var(--color--primary-50); |
||||||
|
border-left: solid 10px transparent; |
||||||
|
|
||||||
|
&.is-active-menu-parent { |
||||||
|
visibility: visible; |
||||||
|
transform: translate(-50%, 0); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* When ensuring that long menus don't overflow viewport, we can give a |
||||||
|
* little extra room when the toolbar is fixed (and is shorter). |
||||||
|
*/ |
||||||
|
& .is-fixed .primary-nav__menu--level-2 { |
||||||
|
max-height: calc(100vh - var(--site-header-height-wide) - var(--drupal-displace-offset-top, 0px) - var(--drupal-displace-offset-bottom, 0px) - var(--sp) + var(--sp4)); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Only apply transition styles to menu when JS is loaded. This |
||||||
|
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189 |
||||||
|
*/ |
||||||
|
html.js body:not(.is-always-mobile-nav) { |
||||||
|
@media (--nav) { |
||||||
|
& .primary-nav__menu--level-2, |
||||||
|
& .primary-nav__menu-🥕 { |
||||||
|
transition: visibility 0.2s, transform 0.2s, opacity 0.2s; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,201 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Nav Primary. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
.primary-nav__menu { |
||||||
|
flex-wrap: wrap; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-item { |
||||||
|
margin-block-end: var(--sp0-5); |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
margin-block-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&.primary-nav__menu-item--has-children { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
& .primary-nav__menu-link--link, |
||||||
|
& .primary-nav__menu-link--nolink { |
||||||
|
/* Ensure that long text doesn't make the mobile expand button wrap. */ |
||||||
|
flex-basis: calc(100% - var(--sp3)); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link { |
||||||
|
flex-grow: 1; |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-neutral-loud); |
||||||
|
font-size: 28px; |
||||||
|
font-weight: bold; |
||||||
|
line-height: var(--sp2); |
||||||
|
|
||||||
|
&:hover { |
||||||
|
color: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
&:focus { |
||||||
|
outline: auto 2px var(--color--primary-50); |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link--nolink { |
||||||
|
padding-block: var(--sp0-5); |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
color: var(--color-text-neutral-soft); |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link--button { |
||||||
|
position: relative; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
cursor: pointer; |
||||||
|
text-align: start; |
||||||
|
border: 0; |
||||||
|
background: transparent; |
||||||
|
|
||||||
|
/* Plus icon for mobile navigation. */ |
||||||
|
&.primary-nav__menu-link--has-children { |
||||||
|
padding-inline-end: var(--sp3); /* Ensure text does not overlap icon. */ |
||||||
|
|
||||||
|
&::before, |
||||||
|
&::after { |
||||||
|
position: absolute; |
||||||
|
inset-inline-end: 9px; |
||||||
|
inset-block-start: calc(var(--sp0-5) + 17px); /* Visually align button with menu link text. */ |
||||||
|
width: 18px; |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: solid 3px var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
&::after { |
||||||
|
transition: opacity 0.2s; |
||||||
|
transform: rotate(90deg); |
||||||
|
} |
||||||
|
|
||||||
|
&[aria-expanded="true"]::after { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link-inner { |
||||||
|
position: relative; |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
padding-block: var(--sp0-5); |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
|
||||||
|
&::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-end: 0; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
transition: transform 0.2s; |
||||||
|
transform: scaleX(0); |
||||||
|
transform-origin: left; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: solid 5px var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
&::after { |
||||||
|
@nest .primary-nav__menu-link:hover & { |
||||||
|
transform: scaleX(1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
Top level specific styles. |
||||||
|
*/ |
||||||
|
.primary-nav__menu--level-1 { |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link--level-1 { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
Secondary menu specific styles. |
||||||
|
*/ |
||||||
|
.primary-nav__menu--level-2 { |
||||||
|
visibility: hidden; |
||||||
|
overflow: hidden; |
||||||
|
flex-basis: 100%; |
||||||
|
max-height: 0; |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: calc(-1 * var(--sp)); |
||||||
|
padding-inline-start: var(--sp2-5); |
||||||
|
transition: opacity 0.2s, visibility 0.2s, max-height 0.2s; |
||||||
|
opacity: 0; |
||||||
|
border-inline-start: solid var(--sp) var(--color--primary-50); |
||||||
|
|
||||||
|
&.is-active-menu-parent { |
||||||
|
visibility: visible; |
||||||
|
max-height: none; |
||||||
|
margin-block-start: var(--sp1-5); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
@media (--md) { |
||||||
|
margin-inline-start: calc(-1 * var(--sp3)); |
||||||
|
padding-inline-start: var(--sp3); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
* Olives doesn't officially support nested tertiary submenus, but this |
||||||
|
* ensures that it doesn't break all the way. |
||||||
|
* |
||||||
|
* @see https://www.drupal.org/project/drupal/issues/3221399 |
||||||
|
*/ |
||||||
|
.primary-nav__menu--level-2 .primary-nav__menu-item--has-children { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.primary-nav__menu-link--level-2 { |
||||||
|
font-size: 16px; |
||||||
|
font-weight: normal; |
||||||
|
line-height: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
html:not(.js) { |
||||||
|
& .primary-nav__menu--level-2 { |
||||||
|
visibility: visible; |
||||||
|
max-height: none; |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] { |
||||||
|
& .primary-nav__menu-link-inner { |
||||||
|
&::after { |
||||||
|
transform-origin: right; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,114 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Secondary navigation styling. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
.secondary-nav { |
||||||
|
letter-spacing: 0.02em; |
||||||
|
font-size: var(--font-size-s); |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.secondary-nav__menu { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.secondary-nav__menu-item { |
||||||
|
/* Parent element is set to flex-basis: 0. We |
||||||
|
* don't want text to wrap unless it goes over a |
||||||
|
* certain arbitrary width. |
||||||
|
*/ |
||||||
|
|
||||||
|
/* @todo should this be scoped to desktop nav? */ |
||||||
|
width: max-content; |
||||||
|
max-width: 200px; |
||||||
|
|
||||||
|
&:not(:last-child) { |
||||||
|
margin-inline-end: var(--sp1-5); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.secondary-nav__menu-link { |
||||||
|
position: relative; |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
height: var(--sp2); |
||||||
|
text-decoration: none; |
||||||
|
color: inherit; |
||||||
|
|
||||||
|
&::after { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
transition: opacity 0.2s, transform 0.2s; |
||||||
|
transform: translateY(5px); |
||||||
|
opacity: 0; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: solid 2px currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
&:hover { |
||||||
|
&::after { |
||||||
|
transform: translateY(0); |
||||||
|
opacity: 0.8; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) { |
||||||
|
@media (--nav) { |
||||||
|
& .secondary-nav { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
margin-inline-start: var(--sp); |
||||||
|
padding-inline-start: var(--sp2); |
||||||
|
|
||||||
|
&::before { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 50%; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: 2px; |
||||||
|
height: var(--sp2); |
||||||
|
content: ""; |
||||||
|
transform: translateY(-50%); |
||||||
|
background-color: var(--color--gray-90); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
& .secondary-nav__menu-item:not(:last-child) { |
||||||
|
margin-inline-end: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
& .secondary-nav__menu-link { |
||||||
|
&:focus { |
||||||
|
position: relative; |
||||||
|
outline: 0; |
||||||
|
|
||||||
|
&::before { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
width: calc(100% + var(--sp)); |
||||||
|
height: var(--sp3); |
||||||
|
content: ""; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
border: solid 2px var(--color--primary-50); |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,109 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Button which expands the navigation at wide viewport widths. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
.wide-nav-expand { |
||||||
|
display: none; |
||||||
|
|
||||||
|
@media (--nav) { |
||||||
|
display: flex; |
||||||
|
visibility: hidden; |
||||||
|
flex-shrink: 0; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: var(--content-left); |
||||||
|
height: var(--sp6); |
||||||
|
cursor: pointer; |
||||||
|
pointer-events: auto; |
||||||
|
color: var(--color--white); |
||||||
|
border: 0; |
||||||
|
background-color: var(--color--primary-50); |
||||||
|
|
||||||
|
&:focus { |
||||||
|
outline: solid 2px currentColor; |
||||||
|
outline-offset: -4px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
body:not(.is-always-mobile-nav) .is-fixed .wide-nav-expand { |
||||||
|
@media (--nav) { |
||||||
|
visibility: visible; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
body.is-always-mobile-nav .wide-nav-expand { |
||||||
|
@media (--nav) { |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.wide-nav-expand__icon { |
||||||
|
position: relative; |
||||||
|
width: var(--sp2); |
||||||
|
height: 21px; |
||||||
|
transition: opacity 0.2s; |
||||||
|
pointer-events: none; |
||||||
|
opacity: 0; |
||||||
|
transform-style: preserve-3d; |
||||||
|
|
||||||
|
& > span { |
||||||
|
display: block; |
||||||
|
height: 0; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: solid 3px currentColor; |
||||||
|
|
||||||
|
&:nth-child(1) { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 0; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
transition: transform 0.2s; |
||||||
|
background-color: currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
&:nth-child(2) { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 9px; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
transition: opacity 0.2s; |
||||||
|
background-color: currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
&:nth-child(3) { |
||||||
|
position: absolute; |
||||||
|
inset-block: auto 0; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
transition: transform 0.2s; |
||||||
|
background-color: currentColor; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.is-fixed .wide-nav-expand__icon { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
[aria-expanded="true"] .wide-nav-expand__icon { |
||||||
|
& > span:nth-child(1) { |
||||||
|
inset-block-start: 9px; |
||||||
|
transform: rotate(-45deg); |
||||||
|
} |
||||||
|
|
||||||
|
& > span:nth-child(2) { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
& > span:nth-child(3) { |
||||||
|
inset-block-start: 9px; |
||||||
|
transform: rotate(45deg); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,114 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Button which expands the navigation at wide viewport widths. |
||||||
|
*/ |
||||||
|
|
||||||
|
.wide-nav-expand { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
.wide-nav-expand { |
||||||
|
display: flex; |
||||||
|
visibility: hidden; |
||||||
|
flex-shrink: 0; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: var(--content-left); |
||||||
|
height: var(--sp6); |
||||||
|
cursor: pointer; |
||||||
|
pointer-events: auto; |
||||||
|
color: var(--color--white); |
||||||
|
border: 0; |
||||||
|
background-color: var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
.wide-nav-expand:focus { |
||||||
|
outline: solid 2px currentColor; |
||||||
|
outline-offset: -4px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
body:not(.is-always-mobile-nav) .is-fixed .wide-nav-expand { |
||||||
|
visibility: visible; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 75rem) { |
||||||
|
body.is-always-mobile-nav .wide-nav-expand { |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.wide-nav-expand__icon { |
||||||
|
position: relative; |
||||||
|
width: var(--sp2); |
||||||
|
height: 1.3125rem; |
||||||
|
transition: opacity 0.2s; |
||||||
|
pointer-events: none; |
||||||
|
opacity: 0; |
||||||
|
transform-style: preserve-3d; |
||||||
|
} |
||||||
|
|
||||||
|
.wide-nav-expand__icon > span { |
||||||
|
display: block; |
||||||
|
height: 0; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: solid 3px currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
.wide-nav-expand__icon > span:nth-child(1) { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 0; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
transition: transform 0.2s; |
||||||
|
background-color: currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
.wide-nav-expand__icon > span:nth-child(2) { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 0.5625rem; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
transition: opacity 0.2s; |
||||||
|
background-color: currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
.wide-nav-expand__icon > span:nth-child(3) { |
||||||
|
position: absolute; |
||||||
|
inset-block: auto 0; |
||||||
|
inset-inline-start: 0; |
||||||
|
width: 100%; |
||||||
|
height: 0; |
||||||
|
transition: transform 0.2s; |
||||||
|
background-color: currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
.is-fixed .wide-nav-expand__icon { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(1) { |
||||||
|
inset-block-start: 0.5625rem; |
||||||
|
transform: rotate(-45deg); |
||||||
|
} |
||||||
|
|
||||||
|
[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(2) { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(3) { |
||||||
|
inset-block-start: 0.5625rem; |
||||||
|
transform: rotate(45deg); |
||||||
|
} |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Node preview container styling. |
||||||
|
*/ |
||||||
|
|
||||||
|
.node-preview-container { |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: var(--sp0-5); |
||||||
|
padding-inline-end: var(--sp0-5); |
||||||
|
background: var(--color--white); |
||||||
|
box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */ |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .node-preview-container { |
||||||
|
box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08); |
||||||
|
} |
||||||
|
|
||||||
|
.toolbar-vertical.toolbar-tray-open .node-preview-container { |
||||||
|
max-width: calc(100vw - var(--toolbar-tray-vertical-width) - var(--scrollbar-width)); |
||||||
|
} |
||||||
|
|
||||||
|
.node-preview-form-select { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.node-preview-backlink { |
||||||
|
margin-block: var(--sp0-5); |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: auto; |
||||||
|
} |
||||||
@ -0,0 +1,138 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Node Teaser specific styles. |
||||||
|
*/ |
||||||
|
|
||||||
|
.node--view-mode-teaser { |
||||||
|
position: relative; /* Anchor after pseudo-element. */ |
||||||
|
margin-block-end: var(--sp1-5); |
||||||
|
} |
||||||
|
|
||||||
|
.node--view-mode-teaser::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-end: 0; |
||||||
|
width: var(--sp3); |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
/* Intentionally not using CSS logical properties. */ |
||||||
|
border-top: solid 2px var(--color--gray-95); |
||||||
|
} |
||||||
|
|
||||||
|
.node--view-mode-teaser .node__meta { |
||||||
|
margin-block-end: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
.node--view-mode-teaser .node__meta a { |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.node--view-mode-teaser .node__top-wrapper { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items: center; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.node--view-mode-teaser .node__top-wrapper { |
||||||
|
position: relative; /* Anchor the image */ |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.node--view-mode-teaser .primary-image { |
||||||
|
flex-shrink: 0; |
||||||
|
margin: 0; |
||||||
|
margin-block-end: var(--sp1); |
||||||
|
margin-inline-end: var(--sp1); |
||||||
|
|
||||||
|
/* Ensure title does not wrap under image until necessary. */ |
||||||
|
} |
||||||
|
|
||||||
|
:is(.node--view-mode-teaser .primary-image) + .node__title { |
||||||
|
flex-basis: calc(100% - calc(4.5 * var(--sp))); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
:is(.node--view-mode-teaser .primary-image) + .node__title { |
||||||
|
flex-basis: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.node--view-mode-teaser .primary-image a { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.node--view-mode-teaser .primary-image img { |
||||||
|
width: calc(3.5 * var(--sp)); |
||||||
|
height: calc(3.5 * var(--sp)); |
||||||
|
object-fit: cover; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.node--view-mode-teaser .primary-image img { |
||||||
|
width: var(--grid-col-width); |
||||||
|
height: var(--grid-col-width); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.node--view-mode-teaser .primary-image { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 0; |
||||||
|
inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.node--view-mode-teaser .node__title { |
||||||
|
margin: 0; |
||||||
|
margin-block-end: var(--sp1); |
||||||
|
color: var(--color-text-neutral-loud); |
||||||
|
font-size: 1.5rem; |
||||||
|
line-height: var(--line-height-base); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.node--view-mode-teaser .node__title { |
||||||
|
/*font-size: var(--sp2);*/ |
||||||
|
font-size: 2rem; |
||||||
|
line-height: 1.4; |
||||||
|
/*line-height: var(--sp3);*/ |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.node--view-mode-teaser .field--tag-ref { |
||||||
|
margin-block-start: var(--sp1); |
||||||
|
margin-block-end: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.node--view-mode-teaser .field--tag-ref { |
||||||
|
margin-block-start: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.node--view-mode-teaser { |
||||||
|
margin-block-end: var(--sp3); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.views-row:last-child .node--view-mode-teaser { |
||||||
|
margin-block-end: 0; |
||||||
|
} |
||||||
@ -0,0 +1,75 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Node specific styles. |
||||||
|
*/ |
||||||
|
|
||||||
|
.node__meta { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-block-end: var(--sp1); |
||||||
|
color: var(--color-text-neutral-soft); |
||||||
|
font-size: 0.875rem; |
||||||
|
line-height: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
.node__meta a { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
.node__meta { |
||||||
|
margin-block-end: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.node__author-image img { |
||||||
|
width: var(--sp2-5); |
||||||
|
height: var(--sp2-5); |
||||||
|
margin-inline-end: var(--sp0-5); |
||||||
|
object-fit: cover; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.node__title a { |
||||||
|
padding-block-end: 0.1875rem; |
||||||
|
transition: background-size 0.2s, color 0.2s; |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-neutral-loud); |
||||||
|
background-color: transparent; |
||||||
|
background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */ |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: bottom left; /* LTR */ |
||||||
|
background-size: 0 0.1875rem; |
||||||
|
} |
||||||
|
|
||||||
|
.node__title a:hover, |
||||||
|
.node__title a:focus { |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .node__title { |
||||||
|
background-position: bottom right; |
||||||
|
} |
||||||
|
|
||||||
|
.node__content { |
||||||
|
padding-block-end: var(--sp1-5); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 62.5rem) { |
||||||
|
.node__content { |
||||||
|
padding-block-end: var(--sp3); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.node--unpublished { |
||||||
|
/* There is no variable for the color - #fff4f4. */ |
||||||
|
background-color: #fff4f4; |
||||||
|
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Page title. |
||||||
|
*/ |
||||||
|
|
||||||
|
.page-title { |
||||||
|
/* |
||||||
|
Necessary to properly display the star icon from core's shortcut |
||||||
|
module. |
||||||
|
*/ |
||||||
|
display: inline; |
||||||
|
} |
||||||
@ -0,0 +1,91 @@ |
|||||||
|
/* |
||||||
|
* DO NOT EDIT THIS FILE. |
||||||
|
* See the following change record for more information, |
||||||
|
* https://www.drupal.org/node/3084859 |
||||||
|
* @preserve |
||||||
|
*/ |
||||||
|
|
||||||
|
/** |
||||||
|
* @file |
||||||
|
* Styles for pagination. |
||||||
|
*/ |
||||||
|
|
||||||
|
#block-olives-solrsearchcontentsearchresultspagerforcollectionmembers .pager__group { |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
.pager__items { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items: flex-end; |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.pager__item { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: var(--sp2-5); |
||||||
|
height: var(--sp2-5); |
||||||
|
cursor: default; |
||||||
|
color: var(--color-text-neutral-soft); |
||||||
|
background-color: var(--color--white); |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 31.25rem) { |
||||||
|
.pager__item { |
||||||
|
width: var(--sp3); |
||||||
|
height: var(--sp3); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .pager__item--control { |
||||||
|
transform: scaleX(-1); |
||||||
|
} |
||||||
|
|
||||||
|
.pager__item--active { |
||||||
|
color: var(--color--white); |
||||||
|
background-color: var(--color--primary-40); |
||||||
|
} |
||||||
|
|
||||||
|
@media (forced-colors: active) { |
||||||
|
.pager__item--control path { |
||||||
|
fill: linktext; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pager__link { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
-webkit-text-decoration: none; |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-neutral-soft); |
||||||
|
} |
||||||
|
|
||||||
|
.pager__link:hover { |
||||||
|
background-color: var(--color--gray-95); |
||||||
|
} |
||||||
|
|
||||||
|
.pager__link:focus { |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
outline: solid 2px currentColor; |
||||||
|
outline-offset: -2px; |
||||||
|
} |
||||||
|
|
||||||
|
.pager__item svg { |
||||||
|
display: block; |
||||||
|
fill: currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
.pager__item--next svg, |
||||||
|
.pager__item--last svg { |
||||||
|
transform: rotate(180deg); |
||||||
|
} |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Styles for action links. |
||||||
|
*/ |
||||||
|
@import "../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
.action-links { |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
|
||||||
|
& li { |
||||||
|
display: inline-block; |
||||||
|
|
||||||
|
& a { |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.action-links-item { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
@ -0,0 +1,102 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Visual styles for ajax-progress throbber. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
.ajax-progress { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Throbber. |
||||||
|
*/ |
||||||
|
.ajax-progress-throbber { |
||||||
|
position: relative; |
||||||
|
display: inline-flex; |
||||||
|
align-content: center; |
||||||
|
height: 1.125rem; |
||||||
|
margin-block-start: -3px; |
||||||
|
margin-block-end: 0; |
||||||
|
margin-inline-start: var(--sp0-5); |
||||||
|
margin-inline-end: var(--sp0-5); |
||||||
|
vertical-align: middle; |
||||||
|
white-space: nowrap; |
||||||
|
line-height: 1.125rem; |
||||||
|
} |
||||||
|
|
||||||
|
.ajax-progress-throbber .throbber { |
||||||
|
width: 1.125rem; |
||||||
|
height: 1.125rem; |
||||||
|
border-width: 2px; |
||||||
|
border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50); |
||||||
|
} |
||||||
|
|
||||||
|
.ajax-progress-throbber .message { |
||||||
|
display: inline-block; |
||||||
|
padding-inline-start: var(--sp0-5); |
||||||
|
font-size: var(--font-size-s); |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Full screen throbber. |
||||||
|
*/ |
||||||
|
.ajax-progress-fullscreen { |
||||||
|
position: fixed; |
||||||
|
z-index: 1000; |
||||||
|
inset-block-start: 50%; |
||||||
|
inset-inline-start: 50%; |
||||||
|
width: 3.5rem; |
||||||
|
height: 3.5rem; |
||||||
|
margin: -1.75rem; |
||||||
|
border: 1px solid var(--color--gray-70); |
||||||
|
border-radius: 3.5rem; |
||||||
|
background-color: var(--color--white); |
||||||
|
box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */ |
||||||
|
|
||||||
|
&::before { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 50%; |
||||||
|
inset-inline-start: 50%; |
||||||
|
width: 1.75rem; |
||||||
|
height: 1.75rem; |
||||||
|
margin: -0.875rem; |
||||||
|
content: ""; |
||||||
|
border-width: 3px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .ajax-progress-fullscreen { |
||||||
|
box-shadow: 0 -0.25rem 0.625rem rgba(34, 35, 48, 0.1); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Common styles for all kinds of throbbers. |
||||||
|
*/ |
||||||
|
.ajax-progress-throbber .throbber, |
||||||
|
.ajax-progress-fullscreen::before { |
||||||
|
animation: olives-throbber 0.75s linear infinite; |
||||||
|
border-style: solid dotted solid solid; |
||||||
|
border-color: var(--color--primary-50) transparent var(--color--primary-50) var(--color--primary-50); |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Remove margin from ajax throbbers following buttons because buttons already |
||||||
|
* have a large margin set. |
||||||
|
*/ |
||||||
|
html.js .button:not(.js-hide) + .ajax-progress-throbber { |
||||||
|
margin-inline-start: 0; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes olives-throbber { |
||||||
|
0% { |
||||||
|
transform: rotateZ(0); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
transform: rotateZ(360deg); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Visual styles for autocomplete input field. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
[type].form-autocomplete { |
||||||
|
padding-inline-end: var(--sp3); |
||||||
|
background-color: var(--color--white); |
||||||
|
background-image: url("../../images/magnifying-glass.svg"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: right var(--sp1) center; /* LTR */ |
||||||
|
|
||||||
|
&:disabled { |
||||||
|
background-color: var(--color--gray-100); |
||||||
|
} |
||||||
|
|
||||||
|
&.ui-autocomplete-loading { |
||||||
|
background-image: url("../../images/throbber.svg"); |
||||||
|
} |
||||||
|
|
||||||
|
&:dir(rtl) { |
||||||
|
background-position: left var(--sp1) center; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Block styling. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
.block__title { |
||||||
|
margin-block: 0 var(--sp); |
||||||
|
letter-spacing: 0.02em; |
||||||
|
color: var(--color-text-neutral-soft); |
||||||
|
font-size: var(--font-size-s); |
||||||
|
line-height: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
.site-footer .block__title { |
||||||
|
color: var(--color--gray-65); |
||||||
|
} |
||||||
@ -0,0 +1,104 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Book module styling. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
.book-pager { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
margin-block-start: 0 var(--sp); |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0 var(--sp); |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
border-block-end: solid 1px var(--color--primary-40); |
||||||
|
} |
||||||
|
|
||||||
|
.book-pager__item { |
||||||
|
display: inline-block; |
||||||
|
|
||||||
|
@media (--sm) { |
||||||
|
flex: 0 0 33.33%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.book-pager__item--center { |
||||||
|
@media (--sm) { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.book-pager__item--next { |
||||||
|
@media (--sm) { |
||||||
|
margin-inline-start: auto; |
||||||
|
text-align: end; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.book-pager__link { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
font-family: var(--font-serif); |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.book-pager__link--previous { |
||||||
|
&::before { |
||||||
|
display: block; |
||||||
|
width: var(--sp0-5); |
||||||
|
height: var(--sp0-5); |
||||||
|
margin-inline-end: 0.25em; |
||||||
|
content: ""; |
||||||
|
transform: rotate(-45deg); |
||||||
|
border-block-start: solid 3px currentColor; |
||||||
|
border-inline-start: solid 3px currentColor; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.book-pager__link--next { |
||||||
|
&::after { |
||||||
|
display: block; |
||||||
|
width: var(--sp0-5); |
||||||
|
height: var(--sp0-5); |
||||||
|
margin-inline-start: 0.25em; |
||||||
|
content: ""; |
||||||
|
transform: rotate(135deg); |
||||||
|
border-block-start: solid 3px currentColor; |
||||||
|
border-inline-start: solid 3px currentColor; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.book-navigation__menu { |
||||||
|
margin-block: var(--sp2); |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.book-navigation__item { |
||||||
|
margin-block: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] { |
||||||
|
& .book-pager__link--previous::before { |
||||||
|
transform: rotate(45deg); |
||||||
|
} |
||||||
|
|
||||||
|
& .book-pager__link--next::after { |
||||||
|
transform: rotate(-135deg); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Breadcrumb region. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
.breadcrumb { |
||||||
|
position: relative; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: bold; |
||||||
|
line-height: var(--sp1); |
||||||
|
|
||||||
|
/* Shadow on the right side of breadcrumbs for narrow screens. */ |
||||||
|
&::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 0; |
||||||
|
inset-inline-end: calc(var(--sp1) * -1); |
||||||
|
width: var(--sp3); |
||||||
|
height: var(--sp2); |
||||||
|
content: ""; |
||||||
|
background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); /* LTR */ |
||||||
|
|
||||||
|
@media (--lg) { |
||||||
|
content: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (--lg) { |
||||||
|
position: static; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .breadcrumb::after { |
||||||
|
background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb__content { |
||||||
|
overflow: auto; |
||||||
|
margin-block-start: calc(var(--sp0-5) * -1); |
||||||
|
margin-block-end: calc(var(--sp0-5) * -1); |
||||||
|
margin-inline-start: calc(var(--sp0-5) * -1); |
||||||
|
margin-inline-end: calc(var(--sp1) * -1); |
||||||
|
padding-block-start: var(--sp0-5); |
||||||
|
padding-block-end: var(--sp0-5); |
||||||
|
padding-inline-start: var(--sp0-5); |
||||||
|
-webkit-overflow-scrolling: touch; |
||||||
|
|
||||||
|
@media (--lg) { |
||||||
|
margin-inline-end: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb__list { |
||||||
|
overflow-x: auto; |
||||||
|
width: max-content; |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: calc(var(--sp1) * -1); |
||||||
|
margin-inline-end: calc(var(--sp1) * -1); |
||||||
|
padding-block: 0 var(--sp1); |
||||||
|
padding-inline-start: var(--sp1); |
||||||
|
padding-inline-end: 0; |
||||||
|
list-style: none; |
||||||
|
white-space: nowrap; |
||||||
|
|
||||||
|
@media (--lg) { |
||||||
|
overflow: visible; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block-end: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
white-space: normal; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb__item { |
||||||
|
display: inline-block; |
||||||
|
|
||||||
|
&:nth-child(n+2)::before { |
||||||
|
display: inline-block; |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
margin-inline: 16px 20px; |
||||||
|
content: ""; |
||||||
|
transform: rotate(45deg); /* LTR */ |
||||||
|
border-block-start: 2px solid var(--color--gray-45); |
||||||
|
border-inline-end: 2px solid var(--color--gray-45); |
||||||
|
} |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
margin-inline-end: var(--sp3); |
||||||
|
|
||||||
|
@media (--lg) { |
||||||
|
margin-inline-end: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .breadcrumb__item:nth-child(n+2)::before { |
||||||
|
transform: rotate(-45deg); |
||||||
|
} |
||||||
|
|
||||||
|
.breadcrumb__link { |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
|
||||||
|
&:hover, |
||||||
|
&:focus { |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,131 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Buttons. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
.button { |
||||||
|
display: inline-block; |
||||||
|
height: var(--sp3); |
||||||
|
margin-block: var(--sp1); |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: var(--sp1); |
||||||
|
padding-block: calc((var(--sp3) - var(--line-height-s)) / 2); |
||||||
|
padding-inline: var(--sp1-5); |
||||||
|
cursor: pointer; |
||||||
|
text-align: center; |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
border: solid 2px currentColor; |
||||||
|
border-radius: var(--border-radius); |
||||||
|
background-color: var(--color--white); |
||||||
|
font-family: var(--font-sans); |
||||||
|
font-size: var(--font-size-l); |
||||||
|
font-weight: 700; |
||||||
|
appearance: none; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
|
||||||
|
&:hover, |
||||||
|
&:focus { |
||||||
|
text-decoration: none; |
||||||
|
color: var(--color-text-primary-loud); |
||||||
|
border: solid 2px currentColor; |
||||||
|
background: none; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
|
||||||
|
&:focus { |
||||||
|
outline: 2px solid var(--color--primary-60); |
||||||
|
outline-offset: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
&:active { |
||||||
|
color: var(--color-text-primary-medium); |
||||||
|
border-color: currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
&:disabled, |
||||||
|
&.is-disabled { |
||||||
|
cursor: default; |
||||||
|
color: var(--color--gray-90); |
||||||
|
border-color: var(--color--gray-90); |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
IE11 doesn't work properly on button elements so we only do |
||||||
|
inline-flex on modern browsers. |
||||||
|
*/ |
||||||
|
@supports (display: inline-flex) { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
/* Top padding accounts for font not being vertically centered within line-height. */ |
||||||
|
padding-block: 1px 0; |
||||||
|
padding-inline: var(--sp1-5); |
||||||
|
line-height: var(--line-height-s); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* No margin if is part of a menu. */ |
||||||
|
.menu .button { |
||||||
|
margin-block: 0; |
||||||
|
margin-inline-start: 0; |
||||||
|
margin-inline-end: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.button--small { |
||||||
|
height: var(--sp2-5); |
||||||
|
padding-block: calc((var(--sp2-5) - var(--line-height-s)) / 2); |
||||||
|
padding-inline: var(--sp); |
||||||
|
font-size: var(--font-size-base); |
||||||
|
line-height: normal; |
||||||
|
} |
||||||
|
|
||||||
|
.button--primary { |
||||||
|
color: var(--color--white); |
||||||
|
border-color: var(--color--primary-40); |
||||||
|
background-color: var(--color--primary-40); |
||||||
|
|
||||||
|
&:hover, |
||||||
|
&:focus { |
||||||
|
color: var(--color--white); |
||||||
|
border-color: var(--color--primary-30); |
||||||
|
background-color: var(--color--primary-30); |
||||||
|
} |
||||||
|
|
||||||
|
&:active { |
||||||
|
color: var(--color--white); |
||||||
|
background-color: var(--color--primary-40); |
||||||
|
} |
||||||
|
|
||||||
|
&:disabled, |
||||||
|
&.is-disabled { |
||||||
|
color: var(--color--white); |
||||||
|
background-color: var(--color--gray-90); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.button--icon-back { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
&::before { |
||||||
|
display: block; |
||||||
|
width: 0.5em; |
||||||
|
height: 0.5em; |
||||||
|
margin-inline-end: 0.5em; |
||||||
|
content: ""; |
||||||
|
transform: rotate(45deg); /* LTR */ |
||||||
|
border-block-end: solid 2px currentColor; |
||||||
|
border-inline-start: solid 2px currentColor; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .button--icon-back::before { |
||||||
|
transform: rotate(-45deg); |
||||||
|
} |
||||||
|
|
||||||
|
.shepherd-cancel-icon { |
||||||
|
font-size: 1.5em; |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* CKE Dialogs. |
||||||
|
*/ |
||||||
|
|
||||||
|
select.cke_dialog_ui_input_select { |
||||||
|
appearance: menulist; |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Color picker styles. These appear within theme settings when selecting a custom color. |
||||||
|
*/ |
||||||
|
|
||||||
|
[data-drupal-selector="olives-color-picker"] { |
||||||
|
& input[type="color"] { |
||||||
|
margin-left: 13px; |
||||||
|
vertical-align: bottom; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,233 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Comment section and individual comments. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
:root { |
||||||
|
--comment-indentation: var(--sp2); |
||||||
|
--comment-indentation--md: var(--sp4); |
||||||
|
} |
||||||
|
|
||||||
|
.comment--level-1 { |
||||||
|
border-block-start: 2px solid var(--color--gray-95); |
||||||
|
|
||||||
|
& ~ .comment--level-1 { |
||||||
|
margin-block-start: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.comments__title { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-block-start: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.comments__count { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
min-width: 34px; |
||||||
|
margin-block-start: 0; |
||||||
|
margin-block-end: var(--sp0-5); |
||||||
|
margin-inline-start: var(--sp); |
||||||
|
margin-inline-end: var(--sp); |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 5px; |
||||||
|
padding-inline-end: 5px; |
||||||
|
text-align: center; |
||||||
|
color: var(--color--white); |
||||||
|
border-radius: 2px; |
||||||
|
background-color: var(--color--primary-40); |
||||||
|
font-size: 11px; |
||||||
|
line-height: 21px; |
||||||
|
|
||||||
|
&::after { |
||||||
|
position: absolute; |
||||||
|
inset-block-end: -7px; |
||||||
|
inset-inline-start: 8px; |
||||||
|
width: 0; |
||||||
|
height: 0; |
||||||
|
content: ""; |
||||||
|
border-block-start: 7px solid var(--color--primary-40); |
||||||
|
border-inline-end: 8px solid transparent; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.comment-form { |
||||||
|
padding-block-end: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
.add-comment__form { |
||||||
|
padding-inline-start: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.comment { |
||||||
|
position: relative; |
||||||
|
padding-block-start: var(--sp2); |
||||||
|
padding-inline-start: var(--sp3); |
||||||
|
|
||||||
|
@media (--grid-md) { |
||||||
|
padding-inline-start: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.comment__text-content { |
||||||
|
font-size: 16px; |
||||||
|
|
||||||
|
& blockquote { |
||||||
|
font-size: 21px; |
||||||
|
line-height: var(--sp2); |
||||||
|
} |
||||||
|
|
||||||
|
/* Override for .field:not(:last-child) */ |
||||||
|
&:not(:last-child) { |
||||||
|
margin-block-end: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.comment__links { |
||||||
|
margin-block: var(--sp) 0; |
||||||
|
} |
||||||
|
|
||||||
|
.comment__links-link { |
||||||
|
text-decoration: none; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: bold; |
||||||
|
line-height: var(--sp); |
||||||
|
|
||||||
|
&:hover { |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.add-comment__picture-wrapper { |
||||||
|
inset-block-start: calc(var(--line-height-base) + var(--sp0-5)); |
||||||
|
} |
||||||
|
|
||||||
|
.add-comment__picture, |
||||||
|
.comment__picture { |
||||||
|
position: absolute; |
||||||
|
inset-inline-start: 0; |
||||||
|
overflow: hidden; |
||||||
|
width: var(--sp2); |
||||||
|
height: var(--sp2); |
||||||
|
border-radius: 50%; |
||||||
|
background-color: var(--color--gray-95); |
||||||
|
|
||||||
|
& *:not(img) { |
||||||
|
display: inherit; |
||||||
|
width: inherit; |
||||||
|
height: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
& img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
|
||||||
|
/* @TODO: create image-style for profile's avatar to have image squared by default. */ |
||||||
|
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) { |
||||||
|
position: absolute; |
||||||
|
/* stylelint-disable csstools/use-logical */ |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
/* stylelint-enable csstools/use-logical */ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (--grid-md) { |
||||||
|
inset-inline-start: calc(-1 * var(--sp5)); |
||||||
|
width: var(--sp3); |
||||||
|
height: var(--sp3); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.indented .comment__picture { |
||||||
|
@media (--grid-md) { |
||||||
|
inset-inline-start: calc(-1 * var(--sp4)); |
||||||
|
width: var(--sp2); |
||||||
|
height: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.comment__meta { |
||||||
|
& * { |
||||||
|
display: inline; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.comment__author { |
||||||
|
margin-inline-end: var(--sp); |
||||||
|
font-family: var(--font-sans); |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 700; |
||||||
|
line-height: var(--sp); |
||||||
|
|
||||||
|
& a { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.comment__time { |
||||||
|
margin: 0; |
||||||
|
color: var(--color-text-neutral-soft); |
||||||
|
font-family: var(--font-sans); |
||||||
|
font-size: 14px; |
||||||
|
line-height: var(--sp); |
||||||
|
} |
||||||
|
|
||||||
|
.indented { |
||||||
|
margin-inline-start: var(--comment-indentation); |
||||||
|
|
||||||
|
& > .comment:not(:last-of-type, .has-children)::before { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: var(--sp2); |
||||||
|
inset-inline-start: calc(-1 * var(--comment-indentation) - var(--sp)); /* Comment's padding-top */ |
||||||
|
width: 0; |
||||||
|
height: 100%; |
||||||
|
content: ""; |
||||||
|
border-inline-start: solid 1px var(--color--gray-95); |
||||||
|
|
||||||
|
@media (--md) { |
||||||
|
inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (--md) { |
||||||
|
margin-inline-start: var(--comment-indentation--md); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.show-hide-btn { |
||||||
|
margin-block-start: var(--sp2); |
||||||
|
margin-block-end: 0; |
||||||
|
margin-inline-start: var(--sp3); |
||||||
|
margin-inline-end: 0; |
||||||
|
padding-block: 0; |
||||||
|
padding-inline-start: 0; |
||||||
|
padding-inline-end: 0; |
||||||
|
cursor: pointer; |
||||||
|
color: var(--color-text-neutral-medium); |
||||||
|
border: 0; |
||||||
|
background: none; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 18px; |
||||||
|
appearance: none; |
||||||
|
|
||||||
|
&[aria-expanded="true"]::after { |
||||||
|
content: "\0020 -"; |
||||||
|
} |
||||||
|
|
||||||
|
&[aria-expanded="false"]::after { |
||||||
|
content: "\0020 +"; |
||||||
|
} |
||||||
|
|
||||||
|
@media (--grid-md) { |
||||||
|
margin-inline-start: 0; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Inline items. |
||||||
|
*/ |
||||||
|
|
||||||
|
.container-inline div, |
||||||
|
.container-inline label { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.form-items-inline { |
||||||
|
margin-block: -0.125em; /* 2px */ |
||||||
|
} |
||||||
|
|
||||||
|
.form-items-inline > .form-item { |
||||||
|
display: inline-block; |
||||||
|
margin-block: 0.125em; |
||||||
|
} |
||||||
@ -0,0 +1,67 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Styles for content moderation toolbar. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
.entity-moderation-form { |
||||||
|
flex-direction: column; |
||||||
|
padding-inline-start: var(--sp); |
||||||
|
padding-inline-end: var(--sp); |
||||||
|
border: 1px solid var(--color--gray-95); |
||||||
|
background-color: var(--color--gray-100); |
||||||
|
|
||||||
|
& select, |
||||||
|
& input:not([type="submit"]) { |
||||||
|
background-color: var(--color--white); |
||||||
|
} |
||||||
|
|
||||||
|
@media (--md) { |
||||||
|
flex-direction: row; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.entity-moderation-form__item { |
||||||
|
flex-basis: 0; |
||||||
|
margin-inline-end: var(--sp); |
||||||
|
|
||||||
|
&:last-child { |
||||||
|
align-self: flex-start; |
||||||
|
margin-inline-end: 0; |
||||||
|
|
||||||
|
@media (--md) { |
||||||
|
align-self: flex-end; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.layout--content-narrow, |
||||||
|
.layout--pass--content-narrow > *, |
||||||
|
.layout--content-medium, |
||||||
|
.layout--pass--content-medium > * { |
||||||
|
& .entity-moderation-form { |
||||||
|
width: 100%; |
||||||
|
margin-inline-start: 0; |
||||||
|
|
||||||
|
@supports (width: max-content) { |
||||||
|
width: max-content; |
||||||
|
} |
||||||
|
|
||||||
|
@media (--grid-md) { |
||||||
|
width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap)); |
||||||
|
margin-block: var(--sp2) var(--sp4); |
||||||
|
margin-inline-start: calc(-2 * (var(--grid-col-width) + var(--grid-gap))); |
||||||
|
} |
||||||
|
|
||||||
|
@media (--lg) { |
||||||
|
width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap)); |
||||||
|
margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap))); |
||||||
|
} |
||||||
|
|
||||||
|
@media (--grid-max) { |
||||||
|
width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap)); |
||||||
|
margin-inline-start: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,115 @@ |
|||||||
|
/** |
||||||
|
* @file |
||||||
|
* Collapsible details. |
||||||
|
*/ |
||||||
|
|
||||||
|
@import "../base/media-queries.pcss.css"; |
||||||
|
|
||||||
|
:root { |
||||||
|
--details-border-width: 1px; |
||||||
|
--details-summary-transition: background-color 0.12s ease-in-out; |
||||||
|
} |
||||||
|
|
||||||
|
.olives-details { |
||||||
|
display: block; |
||||||
|
margin-block: var(--sp1); |
||||||
|
color: inherit; |
||||||
|
border: var(--details-border-width) solid var(--color--gray-95); |
||||||
|
border-radius: var(--border-radius); |
||||||
|
box-shadow: 0 1px 4px var(--color--gray-90); |
||||||
|
} |
||||||
|
|
||||||
|
/* Details summary styles */ |
||||||
|
.olives-details__summary { |
||||||
|
position: relative; |
||||||
|
padding-block: var(--sp1); |
||||||
|
padding-inline-start: var(--sp2); |
||||||
|
padding-inline-end: var(--sp1); |
||||||
|
list-style: none; |
||||||
|
cursor: pointer; |
||||||
|
transition: var(--details-summary-transition); |
||||||
|
word-wrap: break-word; |
||||||
|
hyphens: auto; |
||||||
|
color: inherit; |
||||||
|
background-color: var(--color--gray-100); |
||||||
|
font-size: var(--line-height-s); |
||||||
|
font-weight: 700; |
||||||
|
line-height: var(--sp1); |
||||||
|
} |
||||||
|
|
||||||
|
/* Arrow icon */ |
||||||
|
.olives-details__summary::before { |
||||||
|
position: absolute; |
||||||
|
inset-block-start: 50%; |
||||||
|
inset-inline-start: var(--sp0-75); |
||||||
|
display: block; |
||||||
|
width: 10px; |
||||||
|
height: 10px; |
||||||
|
content: ""; |
||||||
|
transform: translateY(-50%) rotate(45deg); /* LTR */ |
||||||
|
border-top: solid 2px currentColor; |
||||||
|
border-right: solid 2px currentColor; |
||||||
|
} |
||||||
|
|
||||||
|
[dir="rtl"] .olives-details__summary::before { |
||||||
|
transform: translateY(-50%) rotate(-135deg); |
||||||
|
} |
||||||
|
|
||||||
|
/* Pseudo-selector to manage focus styles */ |
||||||
|
.olives-details__summary::after { |
||||||
|
position: absolute; |
||||||
|
inset: calc(var(--details-border-width) * -1); |
||||||
|
content: ""; |
||||||
|
pointer-events: none; |
||||||
|
opacity: 0; |
||||||
|
border-radius: var(--border-radius); |
||||||
|
box-shadow: inset 0 0 0 2px var(--color--primary-60); |
||||||
|
} |
||||||
|
|
||||||
|
/* Hide the marker */ |
||||||
|
.olives-details__summary::-webkit-details-marker { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* Disable default outline for summary, since we have own implementation */ |
||||||
|
.olives-details__summary:focus { |
||||||
|
outline: solid 2px transparent; |
||||||
|
outline-offset: -4px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Details summary, hover state */ |
||||||
|
.olives-details__summary:hover { |
||||||
|
background-color: var(--color--gray-95); |
||||||
|
} |
||||||
|
|
||||||
|
/* Details summary, focus and active states */ |
||||||
|
.olives-details__summary:focus::after, |
||||||
|
.olives-details__summary:active::after { |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
|
||||||
|
/* Rotate arrow icon of the details summary, when details expanded */ |
||||||
|
.olives-details[open] > .olives-details__summary::before { |
||||||
|
margin-block-start: -2px; |
||||||
|
transform: translateY(-50%) rotate(135deg); |
||||||
|
} |
||||||
|
|
||||||
|
/* Details content wrapper */ |
||||||
|
.olives-details__wrapper { |
||||||
|
margin: var(--sp1); |
||||||
|
|
||||||
|
@media (--lg) { |
||||||
|
margin-block-start: var(--sp1-5); |
||||||
|
margin-block-end: var(--sp1-5); |
||||||
|
margin-inline-start: var(--sp2); |
||||||
|
margin-inline-end: var(--sp2); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Description */ |
||||||
|
.olives-details__description { |
||||||
|
margin-block-end: var(--sp1); |
||||||
|
color: var(--color-text-neutral-medium); |
||||||
|
font-size: var(--font-size-xs); |
||||||
|
line-height: var(--line-height-s); |
||||||
|
} |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue