76 changed files with 0 additions and 5796 deletions
@ -1,140 +0,0 @@
|
||||
/** |
||||
* @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; |
||||
} |
||||
@ -1,64 +0,0 @@
|
||||
/** |
||||
* @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; |
||||
} |
||||
@ -1,18 +0,0 @@
|
||||
/* |
||||
* 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. */ |
||||
@ -1,142 +0,0 @@
|
||||
/* |
||||
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; |
||||
} |
||||
@ -1,27 +0,0 @@
|
||||
/** |
||||
* @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; |
||||
} |
||||
@ -1,102 +0,0 @@
|
||||
/** |
||||
* @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: olivesbooks-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 olivesbooks-throbber { |
||||
0% { |
||||
transform: rotateZ(0); |
||||
} |
||||
|
||||
100% { |
||||
transform: rotateZ(360deg); |
||||
} |
||||
} |
||||
@ -1,26 +0,0 @@
|
||||
/** |
||||
* @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; |
||||
} |
||||
} |
||||
@ -1,18 +0,0 @@
|
||||
/** |
||||
* @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); |
||||
} |
||||
@ -1,104 +0,0 @@
|
||||
/** |
||||
* @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); |
||||
} |
||||
} |
||||
@ -1,111 +0,0 @@
|
||||
/** |
||||
* @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; |
||||
} |
||||
} |
||||
@ -1,131 +0,0 @@
|
||||
/** |
||||
* @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; |
||||
} |
||||
@ -1,8 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* CKE Dialogs. |
||||
*/ |
||||
|
||||
select.cke_dialog_ui_input_select { |
||||
appearance: menulist; |
||||
} |
||||
@ -1,11 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Color picker styles. These appear within theme settings when selecting a custom color. |
||||
*/ |
||||
|
||||
[data-drupal-selector="olivesbooks-color-picker"] { |
||||
& input[type="color"] { |
||||
margin-left: 13px; |
||||
vertical-align: bottom; |
||||
} |
||||
} |
||||
@ -1,233 +0,0 @@
|
||||
/** |
||||
* @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; |
||||
} |
||||
} |
||||
@ -1,18 +0,0 @@
|
||||
/** |
||||
* @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; |
||||
} |
||||
@ -1,67 +0,0 @@
|
||||
/** |
||||
* @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; |
||||
} |
||||
} |
||||
} |
||||
@ -1,115 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Collapsible details. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
:root { |
||||
--details-border-width: 1px; |
||||
--details-summary-transition: background-color 0.12s ease-in-out; |
||||
} |
||||
|
||||
.olivesbooks-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 */ |
||||
.olivesbooks-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 */ |
||||
.olivesbooks-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"] .olivesbooks-details__summary::before { |
||||
transform: translateY(-50%) rotate(-135deg); |
||||
} |
||||
|
||||
/* Pseudo-selector to manage focus styles */ |
||||
.olivesbooks-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 */ |
||||
.olivesbooks-details__summary::-webkit-details-marker { |
||||
display: none; |
||||
} |
||||
|
||||
/* Disable default outline for summary, since we have own implementation */ |
||||
.olivesbooks-details__summary:focus { |
||||
outline: solid 2px transparent; |
||||
outline-offset: -4px; |
||||
} |
||||
|
||||
/* Details summary, hover state */ |
||||
.olivesbooks-details__summary:hover { |
||||
background-color: var(--color--gray-95); |
||||
} |
||||
|
||||
/* Details summary, focus and active states */ |
||||
.olivesbooks-details__summary:focus::after, |
||||
.olivesbooks-details__summary:active::after { |
||||
opacity: 1; |
||||
} |
||||
|
||||
/* Rotate arrow icon of the details summary, when details expanded */ |
||||
.olivesbooks-details[open] > .olivesbooks-details__summary::before { |
||||
margin-block-start: -2px; |
||||
transform: translateY(-50%) rotate(135deg); |
||||
} |
||||
|
||||
/* Details content wrapper */ |
||||
.olivesbooks-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 */ |
||||
.olivesbooks-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); |
||||
} |
||||
@ -1,157 +0,0 @@
|
||||
/** |
||||
* @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. */ |
||||
|
||||
&.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); |
||||
|
||||
@nest .dropbutton-single & { |
||||
padding-inline-end: 0; |
||||
} |
||||
|
||||
@nest .dropbutton-wrapper.open & { |
||||
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); |
||||
|
||||
&:focus { |
||||
outline: solid 2px var(--dropbutton--outline-color); |
||||
outline-offset: -2px; |
||||
} |
||||
|
||||
&::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); |
||||
|
||||
@nest .dropbutton-wrapper.open & { |
||||
transform: translateY(25%) rotate(225deg); |
||||
} |
||||
} |
||||
|
||||
&:dir(rtl) { |
||||
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) { |
||||
border: solid 1px transparent; |
||||
border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0; |
||||
} |
||||
} |
||||
|
||||
& a { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: -2px; /* Account for borders. */ |
||||
padding: 0 9px; |
||||
text-decoration: none; |
||||
color: var(--dropbutton--text-color); |
||||
font-weight: 600; |
||||
|
||||
&:hover { |
||||
color: inherit; |
||||
} |
||||
|
||||
&:focus { |
||||
outline: solid 2px var(--dropbutton--outline-color); |
||||
outline-offset: -1px; /* Overlap parent container by 1px. */ |
||||
} |
||||
} |
||||
|
||||
/* Special rules if there is only one action. */ |
||||
@nest .dropbutton-single & { |
||||
&:first-child { |
||||
border-right: solid 1px transparent; /* LTR */ |
||||
border-radius: var(--dropbutton--border-radius); |
||||
|
||||
&:dir(rtl) { |
||||
border: solid 1px transparent; |
||||
} |
||||
} |
||||
|
||||
& 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); |
||||
|
||||
&:last-child { |
||||
border-bottom: 1px solid var(--dropbutton--active-bg-color); |
||||
} |
||||
|
||||
& a:hover { |
||||
color: var(--dropbutton--text-hover-color); |
||||
} |
||||
|
||||
@nest .dropbutton-wrapper.open & { |
||||
visibility: visible; |
||||
} |
||||
} |
||||
@ -1,127 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Embedded Media. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
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: 14px; |
||||
font-style: italic; |
||||
line-height: var(--sp); |
||||
|
||||
@media (--sm) { |
||||
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 (--grid-md) { |
||||
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) { |
||||
float: left; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* Pull out of grid if nested in content narrow layout. */ |
||||
.layout--content-narrow .align-right, |
||||
.layout--pass--content-narrow > * .align-right { |
||||
/* @todo this can be simplified. */ |
||||
@media (--grid-md) { |
||||
margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); |
||||
} |
||||
|
||||
@media (--lg) { |
||||
margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap)))); |
||||
} |
||||
|
||||
@media (--nav) { |
||||
margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap)))); |
||||
} |
||||
|
||||
@media (--grid-max) { |
||||
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 (--grid-md) { |
||||
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) { |
||||
float: right; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* Pull out of grid if nested in content narrow layout. */ |
||||
.layout--content-narrow .align-left, |
||||
.layout--pass--content-narrow > * .align-left { |
||||
@media (--grid-md) { |
||||
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%; |
||||
} |
||||
@ -1,41 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* RSS feed. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.feed-icon { |
||||
display: flex; |
||||
align-items: center; |
||||
text-decoration: none; |
||||
color: var(--color-text-neutral-soft); |
||||
|
||||
&: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); |
||||
|
||||
& svg { |
||||
vertical-align: top; |
||||
fill: currentColor; |
||||
} |
||||
} |
||||
@ -1,53 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Visual styles for fields. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.field:not(:last-child) { |
||||
margin-block-end: var(--sp2); |
||||
} |
||||
|
||||
.node--view-mode-teaser .field { |
||||
margin-block-end: var(--sp); |
||||
|
||||
&:last-child { |
||||
margin-block-end: 0; |
||||
} |
||||
|
||||
@media (--lg) { |
||||
margin-block-end: var(--sp2); |
||||
} |
||||
} |
||||
|
||||
.field__label { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.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) { |
||||
float: right; |
||||
} |
||||
} |
||||
|
||||
.field--label-inline .field__label, |
||||
.field--label-inline > .field__item, |
||||
.field--label-inline .field__items { |
||||
padding-inline-end: 0.5em; |
||||
} |
||||
|
||||
.field--label-inline .field__label::after { |
||||
content: ":"; |
||||
} |
||||
@ -1,133 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Fieldset. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.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); |
||||
|
||||
& + * { |
||||
clear: left; |
||||
} |
||||
|
||||
& .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) { |
||||
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; |
||||
} |
||||
@ -1,39 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Footer regions. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.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%); |
||||
|
||||
& .menu { |
||||
margin-inline-start: 0; |
||||
list-style: none; |
||||
|
||||
& ul { |
||||
margin-inline-start: var(--sp); |
||||
} |
||||
|
||||
& li { |
||||
margin-block-end: var(--sp0-5); |
||||
} |
||||
} |
||||
|
||||
& a { |
||||
color: inherit; |
||||
|
||||
&:hover { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (--nav) { |
||||
body:not(.is-always-mobile-nav) .site-footer { |
||||
border-inline-start: solid var(--content-left) var(--color--black); |
||||
} |
||||
} |
||||
@ -1,99 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Checkbox and radio input elements. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
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: 3px; |
||||
background-color: var(--color--white); |
||||
background-repeat: no-repeat; |
||||
background-position: 50% 50%; |
||||
background-size: var(--sp1) var(--sp1); |
||||
appearance: none; |
||||
|
||||
&:focus { |
||||
border: solid 2px var(--color--primary-50); |
||||
outline: solid 2px var(--color--primary-50); |
||||
|
||||
@supports (outline-style: double) { |
||||
border-width: 1px; |
||||
outline-width: 6px; |
||||
outline-style: double; |
||||
outline-offset: -1px; |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
border-color: var(--color--primary-60); |
||||
} |
||||
|
||||
&[disabled] { |
||||
background-color: var(--color--gray-100); |
||||
|
||||
&:hover { |
||||
border-color: var(--color--gray-60); |
||||
} |
||||
|
||||
&:checked { |
||||
border-width: 1px; |
||||
} |
||||
} |
||||
|
||||
&:checked { |
||||
border-width: 2px; |
||||
} |
||||
|
||||
&.error { |
||||
border: solid 2px var(--color--red); |
||||
|
||||
&:focus { |
||||
outline-color: var(--color--red); |
||||
outline-offset: -2px; |
||||
} |
||||
} |
||||
|
||||
& + 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%; |
||||
|
||||
&: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: 17px; |
||||
} |
||||
|
||||
&: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); |
||||
} |
||||
|
||||
&.error: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); |
||||
} |
||||
@ -1,84 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Select input elements. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
:root { |
||||
--form-element-select-icon: url("../../images/chevron-down.svg"); |
||||
} |
||||
|
||||
select { |
||||
max-width: 100%; |
||||
height: var(--sp3); |
||||
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; |
||||
appearance: none; |
||||
|
||||
&:focus { |
||||
border: solid 2px var(--color--primary-50); |
||||
outline: solid 2px var(--color--primary-50); |
||||
|
||||
@supports (outline-style: double) { |
||||
border-width: 1px; |
||||
outline-width: 6px; |
||||
outline-style: double; |
||||
outline-offset: -1px; |
||||
} |
||||
} |
||||
|
||||
&[disabled] { |
||||
color: var(--color--gray-60); |
||||
background-color: var(--color--gray-100); |
||||
} |
||||
|
||||
&.error { |
||||
border: solid 2px var(--color--red); |
||||
|
||||
&:focus { |
||||
outline-color: var(--color--red); |
||||
} |
||||
} |
||||
|
||||
&[multiple] { |
||||
height: auto; |
||||
padding: var(--sp0-5); |
||||
background-image: none; |
||||
line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */ |
||||
|
||||
& option { |
||||
padding: var(--sp0-5); |
||||
} |
||||
} |
||||
|
||||
&.form-element--small { |
||||
height: var(--sp2-5); |
||||
} |
||||
|
||||
/* Necessary to show chevron in forced colors mode in modern browsers. */ |
||||
@media (forced-colors: active) { |
||||
padding-inline-end: var(--sp); |
||||
background-image: none; |
||||
appearance: listbox; /* Default <select> appearance value for modern browsers. */ |
||||
|
||||
/* Lets browser set <select> appearance to whatever the browser's default is. */ |
||||
@supports (appearance: revert) { |
||||
appearance: revert; |
||||
} |
||||
} |
||||
} |
||||
|
||||
[dir="rtl"] select { |
||||
background-position: left var(--sp) center; |
||||
} |
||||
@ -1,90 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Text input elements. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
[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(--sp3); |
||||
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; |
||||
appearance: none; |
||||
|
||||
&:focus { |
||||
border: solid 2px var(--color--primary-50); |
||||
outline: solid 2px var(--color--primary-50); |
||||
|
||||
@supports (outline-style: double) { |
||||
border-width: 1px; |
||||
outline-width: 6px; |
||||
outline-style: double; |
||||
outline-offset: -1px; |
||||
} |
||||
} |
||||
|
||||
&[disabled] { |
||||
color: var(--color--gray-60); |
||||
background-color: var(--color--gray-100); |
||||
} |
||||
|
||||
&.error { |
||||
border: solid 2px var(--color--red); |
||||
|
||||
&:focus { |
||||
outline-color: var(--color--red); |
||||
outline-offset: -2px; |
||||
} |
||||
& + .ck-editor > .ck-editor__main { |
||||
border: solid 2px var(--color--red); |
||||
} |
||||
} |
||||
|
||||
&.form-element--small { |
||||
min-height: var(--sp2-5); |
||||
} |
||||
|
||||
@media (--sm) { |
||||
width: auto; |
||||
} |
||||
} |
||||
|
||||
[type="date"] { |
||||
/* Ensure that date field isn't larger than other fields. */ |
||||
&::-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; |
||||
} |
||||
@ -1,13 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Textarea. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
textarea { |
||||
display: block; |
||||
width: 100%; |
||||
min-height: var(--sp8); |
||||
padding: var(--sp); |
||||
} |
||||
@ -1,193 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Main form and form item styles. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
::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) { |
||||
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) { |
||||
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-item__label { |
||||
margin: 0; |
||||
} |
||||
|
||||
& .form-actions { |
||||
margin-top: var(--sp1-5); |
||||
} |
||||
} |
||||
@ -1,19 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Forum specific styles. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.forum { |
||||
& table { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.forum__name--link, |
||||
.forum__last-reply a, |
||||
.forum__title a { |
||||
color: var(--color-text-primary-medium); |
||||
font-weight: bold; |
||||
} |
||||
@ -1,29 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Header Mobile Buttons. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.mobile-buttons { |
||||
margin-block-start: var(--sp0-5); |
||||
margin-inline-start: auto; |
||||
|
||||
@media (--sm) { |
||||
margin-block-start: var(--sp2); |
||||
} |
||||
|
||||
@media (--md) { |
||||
margin-block-start: var(--sp4); |
||||
} |
||||
|
||||
@media (--nav) { |
||||
margin-block-start: var(--sp6); |
||||
} |
||||
} |
||||
|
||||
@media (--nav) { |
||||
body:not(.is-always-mobile-nav) .mobile-buttons { |
||||
display: none; |
||||
} |
||||
} |
||||
@ -1,128 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Navigation in header. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.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); |
||||
|
||||
&.is-active { |
||||
visibility: visible; |
||||
transform: translateX(calc(-100% - var(--drupal-displace-offset-right, 0px))); /* LTR */ |
||||
|
||||
&:dir(rtl) { |
||||
transform: translateX(calc(100% + var(--drupal-displace-offset-left, 0px))); |
||||
} |
||||
} |
||||
|
||||
@media (--sm) { |
||||
border-top-width: calc(var(--sp5) + var(--drupal-displace-offset-top, 0px)); |
||||
} |
||||
|
||||
@media (--md) { |
||||
padding-block-end: var(--sp3); |
||||
padding-inline-start: var(--sp3); |
||||
border-top-width: calc(var(--sp7) + var(--drupal-displace-offset-top, 0px)); |
||||
} |
||||
|
||||
@media (--lg) { |
||||
grid-column: 5 / 14; |
||||
} |
||||
|
||||
/* |
||||
* Ensure top border has the same color as the background when in forced colors. |
||||
*/ |
||||
@media (forced-colors: active) { |
||||
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; |
||||
} |
||||
|
||||
body:not(.is-always-mobile-nav) .header-nav { |
||||
@media (--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; |
||||
} |
||||
} |
||||
|
||||
body.is-always-mobile-nav { |
||||
& .header-nav { |
||||
@media (--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 (--grid-max) { |
||||
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) { |
||||
background: canvastext; |
||||
} |
||||
|
||||
@nest .is-overlay-active & { |
||||
display: block; |
||||
} |
||||
} |
||||
@ -1,173 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Header Search Narrow Block. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.block-search-narrow { |
||||
margin-inline: calc(-1 * var(--sp)); |
||||
margin-block-end: var(--sp2); |
||||
background: var(--color--black); |
||||
|
||||
& .search-block-form { |
||||
display: flex; |
||||
} |
||||
|
||||
& .form-item { |
||||
flex-grow: 1; |
||||
margin: 0; |
||||
} |
||||
|
||||
& .form-actions { |
||||
margin: 0; |
||||
} |
||||
|
||||
& 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% 5px; |
||||
box-shadow: none; |
||||
font-family: var(--font-serif); |
||||
font-size: 16px; |
||||
-webkit-appearance: none; |
||||
|
||||
&:focus { |
||||
outline: solid 4px transparent; |
||||
outline-offset: -4px; |
||||
background-size: 100% 5px; |
||||
} |
||||
|
||||
@media (--md) { |
||||
height: calc(4 * var(--sp)); |
||||
padding-inline-start: var(--sp2); |
||||
padding-inline-end: var(--sp2); |
||||
} |
||||
} |
||||
|
||||
& .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>. |
||||
*/ |
||||
& .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("../../images/search--white.svg"); |
||||
background-repeat: no-repeat; |
||||
background-position: center; |
||||
background-size: auto; |
||||
|
||||
&::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 5px var(--color--primary-50); |
||||
} |
||||
|
||||
@media (forced-colors: active) { |
||||
background: buttontext; |
||||
mask-image: url("../../images/search--white.svg"); |
||||
mask-repeat: no-repeat; |
||||
mask-position: center; |
||||
} |
||||
} |
||||
|
||||
&:focus { |
||||
outline: solid 4px transparent; |
||||
outline-offset: -4px; |
||||
box-shadow: none; |
||||
|
||||
& span::after { |
||||
transform: scaleX(1); |
||||
} |
||||
|
||||
@media screen and (-ms-high-contrast: active) { |
||||
border-bottom-width: var(--sp0-5); |
||||
|
||||
& span::after { |
||||
content: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (--md) { |
||||
width: 80px; |
||||
} |
||||
|
||||
@media screen and (-ms-high-contrast: active) { |
||||
/* IE11's high contrast show will not show the background image, so we show the text. */ |
||||
& .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. */ |
||||
& .icon--search { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* 500px is the width of the primary nav at mobile. */ |
||||
@media (min-width: 500px) { |
||||
margin-inline-start: 0; |
||||
margin-inline-end: 0; |
||||
} |
||||
} |
||||
|
||||
body:not(.is-always-mobile-nav) .block-search-narrow { |
||||
@media (--nav) { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
[dir="rtl"] .block-search-narrow { |
||||
& input[type="search"] { |
||||
background-position: bottom right; |
||||
} |
||||
|
||||
& .search-form__submit .icon--search::after { |
||||
transform-origin: right; |
||||
} |
||||
} |
||||
@ -1,282 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Header Search Wide Block. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
/* 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); |
||||
|
||||
&.is-active { |
||||
visibility: visible; |
||||
max-height: var(--sp8); |
||||
} |
||||
|
||||
& form { |
||||
display: flex; |
||||
grid-column: 1 / 14; |
||||
} |
||||
|
||||
& 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: 32px; |
||||
-webkit-appearance: none; |
||||
|
||||
&:focus { |
||||
outline: solid 4px transparent; |
||||
outline-offset: -4px; |
||||
} |
||||
} |
||||
|
||||
& .form-item-keys { |
||||
flex-grow: 1; |
||||
margin: 0; |
||||
} |
||||
|
||||
& .form-actions { |
||||
display: flex; |
||||
margin: 0; |
||||
} |
||||
|
||||
& .search-form__submit { |
||||
position: relative; |
||||
overflow: hidden; |
||||
align-self: stretch; |
||||
width: 100px; |
||||
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>. |
||||
*/ |
||||
& .icon--search { |
||||
position: absolute; |
||||
inset-block-start: 0; |
||||
inset-inline-end: 0; |
||||
display: block; |
||||
width: 24px; /* Width of the SVG background image. */ |
||||
height: 100%; |
||||
pointer-events: none; |
||||
background-image: url("../../images/search--white.svg"); |
||||
background-repeat: no-repeat; |
||||
background-position: center; |
||||
background-size: contain; |
||||
|
||||
&::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); |
||||
} |
||||
} |
||||
|
||||
&:focus { |
||||
outline: solid 4px transparent; |
||||
outline-offset: -4px; |
||||
box-shadow: none; |
||||
|
||||
& span::after { |
||||
transform: scaleX(1); |
||||
} |
||||
|
||||
@media screen and (-ms-high-contrast: active) { |
||||
border-bottom-width: var(--sp0-5); |
||||
|
||||
& span::after { |
||||
content: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (-ms-high-contrast: active) { |
||||
/* Edge's high contrast does show the background image, so we hide it. */ |
||||
& .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; |
||||
} |
||||
|
||||
& .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; |
||||
|
||||
&:focus { |
||||
position: relative; |
||||
outline: 0; |
||||
|
||||
&::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: 4px; |
||||
} |
||||
} |
||||
|
||||
&[aria-expanded="true"] { |
||||
background: var(--color--black); |
||||
|
||||
&:focus::after { |
||||
border-color: var(--color--white); |
||||
} |
||||
|
||||
& .block-search-wide__button-close { |
||||
&::before, |
||||
&::after { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
width: var(--sp1-5); |
||||
height: 0; |
||||
content: ""; |
||||
border-block-start: solid 2px var(--color--white); |
||||
} |
||||
|
||||
&::before { |
||||
transform: translate(-50%, -50%) rotate(-45deg); |
||||
} |
||||
|
||||
&::after { |
||||
transform: translate(-50%, -50%) rotate(45deg); |
||||
} |
||||
} |
||||
|
||||
& svg { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
& svg { |
||||
margin-inline-start: auto; |
||||
margin-inline-end: auto; |
||||
} |
||||
|
||||
@media (forced-colors: active) { |
||||
background: ButtonFace; |
||||
|
||||
& 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% 10px; |
||||
|
||||
&:focus { |
||||
background-size: 100% var(--sp0-5); |
||||
} |
||||
} |
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper { |
||||
& input[type="search"] { |
||||
background-position: bottom right; |
||||
} |
||||
|
||||
& .search-form__submit .icon--search::after { |
||||
transform-origin: right; |
||||
} |
||||
} |
||||
|
||||
body:not(.is-always-mobile-nav) { |
||||
& .block-search-wide__wrapper, |
||||
& .block-search-wide__button { |
||||
@media (--nav) { |
||||
display: block; |
||||
} |
||||
} |
||||
} |
||||
@ -1,120 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Site branding in header. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.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 (--sm) { |
||||
min-height: var(--sp4); |
||||
} |
||||
|
||||
@media (--md) { |
||||
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 (--lg) { |
||||
min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */ |
||||
} |
||||
|
||||
@media (--nav) { |
||||
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; |
||||
|
||||
& a { |
||||
text-decoration: none; |
||||
} |
||||
|
||||
@media (--nav) { |
||||
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%; |
||||
|
||||
& img { |
||||
width: auto; |
||||
max-width: 100%; |
||||
max-height: var(--sp2); |
||||
|
||||
@media (--sm) { |
||||
max-height: var(--sp3); |
||||
} |
||||
|
||||
@media (--md) { |
||||
max-height: var(--sp4); |
||||
} |
||||
|
||||
@media (--nav) { |
||||
max-height: calc(var(--header-height-wide-when-fixed) - var(--sp)); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.site-branding__text { |
||||
color: var(--color--white); |
||||
font-size: 18px; |
||||
font-weight: bold; |
||||
|
||||
& a { |
||||
color: inherit; |
||||
} |
||||
|
||||
@media (--md) { |
||||
font-size: 28px; |
||||
line-height: 28px; |
||||
} |
||||
|
||||
@media (--nav) { |
||||
letter-spacing: 0.02em; |
||||
font-size: 32px; |
||||
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: 12px; |
||||
} |
||||
@ -1,91 +0,0 @@
|
||||
/** |
||||
* @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. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.sticky-header-toggle { |
||||
display: none; |
||||
|
||||
@media (--nav) { |
||||
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); |
||||
|
||||
&:focus { |
||||
cursor: pointer; |
||||
pointer-events: auto; |
||||
opacity: 1; |
||||
outline: solid 2px var(--color--white); |
||||
outline-offset: -4px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle { |
||||
@media (--nav) { |
||||
visibility: visible; |
||||
} |
||||
} |
||||
|
||||
body.is-always-mobile-nav .sticky-header-toggle { |
||||
@media (--nav) { |
||||
visibility: hidden; |
||||
} |
||||
} |
||||
|
||||
.sticky-header-toggle__icon { |
||||
--icon-bar-height: 3px; |
||||
--icon-bar-space: 7px; |
||||
|
||||
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; |
||||
|
||||
& > 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); |
||||
} |
||||
|
||||
& > span:nth-child(2) { |
||||
opacity: 0; |
||||
} |
||||
|
||||
& > span:nth-child(3) { |
||||
transform: translateY(calc(0px - var(--icon-bar-height) - var(--icon-bar-space))) rotate(45deg); |
||||
} |
||||
} |
||||
@ -1,43 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Main Hero. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.hero__content { |
||||
grid-column: 1 / 7; |
||||
|
||||
@media (--grid-md) { /* 700px */ |
||||
grid-column: 3 / 13; |
||||
} |
||||
|
||||
@media (--lg) { |
||||
grid-column: 3 / 11; |
||||
} |
||||
} |
||||
|
||||
.hero__img { |
||||
grid-column: 1 / 7; |
||||
margin-block-start: var(--sp2); |
||||
margin-block-end: var(--sp2); |
||||
|
||||
& img { |
||||
width: 100%; |
||||
} |
||||
|
||||
@media (--sm) { |
||||
margin-block-start: var(--sp3); |
||||
margin-block-end: var(--sp3); |
||||
} |
||||
|
||||
@media (--grid-md) { |
||||
grid-column: 1 / 15; |
||||
margin-block-start: var(--sp4); |
||||
margin-block-end: var(--sp4); |
||||
} |
||||
|
||||
@media (--lg) { |
||||
grid-column: 2 / 14; |
||||
} |
||||
} |
||||
@ -1,28 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Links component. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.links.inline { |
||||
margin-inline-start: 0; |
||||
padding-block: 0; |
||||
padding-inline-start: 0; |
||||
padding-inline-end: 0; |
||||
list-style: none; |
||||
|
||||
& > * { |
||||
display: inline; |
||||
|
||||
&:not(:last-child) { |
||||
padding-inline-end: 1em; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.node--type-book .links.inline { |
||||
@media (--md) { |
||||
text-align: end; |
||||
} |
||||
} |
||||
@ -1,27 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Maintenance page. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.maintenance-page { |
||||
& .site-header__initial { |
||||
@media (--nav) { |
||||
flex-shrink: 0; |
||||
width: var(--content-left); |
||||
} |
||||
} |
||||
|
||||
& .main-content { |
||||
min-height: 80vh; |
||||
} |
||||
} |
||||
.maintenance-page-icon { |
||||
display: block; |
||||
margin-block: var(--sp3); |
||||
|
||||
& path { |
||||
fill: var(--color--primary-50); |
||||
} |
||||
} |
||||
@ -1,159 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Messages. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
:root { |
||||
--messages-icon-size: 32px; |
||||
} |
||||
|
||||
.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); |
||||
|
||||
& * { |
||||
color: inherit; |
||||
} |
||||
|
||||
/* Additional specificity to override contrib modules. */ |
||||
&.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); |
||||
|
||||
&.no-icon { |
||||
margin-inline-end: 0; |
||||
} |
||||
} |
||||
|
||||
.messages__content { |
||||
overflow: auto; /* Ensure large code blocks can be scrolled to. */ |
||||
flex: 1; |
||||
padding-block-start: 3px; |
||||
} |
||||
|
||||
.messages__button { |
||||
flex-shrink: 0; |
||||
margin-inline-start: var(--sp1); |
||||
padding-block-start: 3px; |
||||
} |
||||
|
||||
.messages__close { |
||||
position: relative; |
||||
width: 25px; |
||||
height: 25px; |
||||
padding-block: 0; |
||||
padding-inline-start: 0; |
||||
padding-inline-end: 0; |
||||
cursor: pointer; |
||||
vertical-align: top; |
||||
border: 0; |
||||
background: none; |
||||
appearance: none; |
||||
|
||||
&::before, |
||||
&::after { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
display: block; |
||||
width: 33px; |
||||
height: 0; |
||||
content: ""; |
||||
border-top: solid 2px var(--color--gray-60); |
||||
} |
||||
|
||||
&::before { |
||||
transform: translate(-50%, -50%) rotate(45deg); |
||||
} |
||||
|
||||
&::after { |
||||
transform: translate(-50%, -50%) rotate(-45deg); |
||||
} |
||||
|
||||
&:hover { |
||||
&::before, |
||||
&::after { |
||||
border-color: var(--color--white); |
||||
} |
||||
} |
||||
|
||||
&: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 6px var(--color--red); |
||||
} |
||||
@ -1,34 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Node preview container styling. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.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; |
||||
} |
||||
@ -1,116 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Node Teaser specific styles. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.node--view-mode-teaser { |
||||
position: relative; /* Anchor after pseudo-element. */ |
||||
margin-block-end: var(--sp1-5); |
||||
|
||||
&::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__meta { |
||||
margin-block-end: var(--sp); |
||||
|
||||
& a { |
||||
color: var(--color-text-primary-medium); |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
|
||||
& .node__top-wrapper { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
margin: 0; |
||||
|
||||
@media (--lg) { |
||||
position: relative; /* Anchor the image */ |
||||
} |
||||
} |
||||
|
||||
& .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. */ |
||||
& + .node__title { |
||||
flex-basis: calc(100% - calc(4.5 * var(--sp))); |
||||
|
||||
@media (--lg) { |
||||
flex-basis: auto; |
||||
} |
||||
} |
||||
|
||||
& a { |
||||
display: block; |
||||
} |
||||
|
||||
& img { |
||||
width: calc(3.5 * var(--sp)); |
||||
height: calc(3.5 * var(--sp)); |
||||
object-fit: cover; |
||||
border-radius: 50%; |
||||
|
||||
@media (--lg) { |
||||
width: var(--grid-col-width); |
||||
height: var(--grid-col-width); |
||||
} |
||||
} |
||||
|
||||
@media (--lg) { |
||||
position: absolute; |
||||
inset-block-start: 0; |
||||
inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap)))); |
||||
margin: 0; |
||||
} |
||||
} |
||||
|
||||
& .node__title { |
||||
margin: 0; |
||||
margin-block-end: var(--sp1); |
||||
color: var(--color-text-neutral-loud); |
||||
font-size: 24px; |
||||
line-height: var(--line-height-base); |
||||
|
||||
@media (--lg) { |
||||
font-size: var(--sp2); |
||||
line-height: var(--sp3); |
||||
} |
||||
} |
||||
|
||||
& .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 (--lg) { |
||||
margin-block-start: var(--sp2); |
||||
} |
||||
} |
||||
|
||||
@media (--lg) { |
||||
margin-block-end: var(--sp3); |
||||
} |
||||
} |
||||
|
||||
.views-row:last-child .node--view-mode-teaser { |
||||
margin-block-end: 0; |
||||
} |
||||
@ -1,67 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Node specific styles. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.node__meta { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-block-end: var(--sp1); |
||||
color: var(--color-text-neutral-soft); |
||||
font-size: 14px; |
||||
line-height: var(--sp); |
||||
|
||||
& a { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
@media (--sm) { |
||||
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: 3px; |
||||
transition: background-size 0.2s, color 0.2s; |
||||
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 3px; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
color: var(--color-text-primary-medium); |
||||
} |
||||
} |
||||
} |
||||
|
||||
[dir="rtl"] .node__title { |
||||
background-position: bottom right; |
||||
} |
||||
|
||||
.node__content { |
||||
padding-block-end: var(--sp1-5); |
||||
|
||||
@media (--lg) { |
||||
padding-block-end: var(--sp3); |
||||
} |
||||
} |
||||
|
||||
.node--unpublished { |
||||
/* There is no variable for the color - #fff4f4. */ |
||||
background-color: #fff4f4; |
||||
} |
||||
@ -1,14 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Page title. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.page-title { |
||||
/* |
||||
Necessary to properly display the star icon from core's shortcut |
||||
module. |
||||
*/ |
||||
display: inline; |
||||
} |
||||
@ -1,82 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Styles for pagination. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.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 (--sm) { |
||||
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); |
||||
} |
||||
|
||||
.pager__item--control { |
||||
@media (forced-colors: active) { |
||||
& path { |
||||
fill: linktext; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.pager__link { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 100%; |
||||
height: 100%; |
||||
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); |
||||
} |
||||
@ -1,44 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Powered by block specific styles. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.block-system-powered-by-block { |
||||
letter-spacing: 0.02em; |
||||
font-size: 14px; |
||||
line-height: var(--sp); |
||||
|
||||
& a { |
||||
text-decoration: underline; |
||||
|
||||
&:hover, |
||||
&:focus { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
|
||||
& .drupal-logo { |
||||
display: inline-block; |
||||
margin-block-start: calc(-1 * var(--sp) / 4); |
||||
margin-inline-start: calc(var(--sp) / 4); |
||||
} |
||||
|
||||
& svg { |
||||
width: 0.875rem; /* 14 */ |
||||
height: 1.1875rem; /* 19 */ |
||||
vertical-align: top; |
||||
fill: currentColor; |
||||
} |
||||
} |
||||
|
||||
.site-footer .block-system-powered-by-block { |
||||
& a { |
||||
color: var(--color--white); |
||||
} |
||||
|
||||
& svg path { |
||||
fill: var(--color--white); |
||||
} |
||||
} |
||||
@ -1,22 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Progress bar specific styles. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.progress__track { |
||||
overflow: hidden; |
||||
height: var(--sp); |
||||
border: 1px solid var(--color--primary-40); |
||||
border-radius: var(--border-radius); |
||||
} |
||||
|
||||
.progress__bar { |
||||
height: var(--sp); |
||||
background-color: var(--color--primary-40); |
||||
} |
||||
|
||||
.progress__percentage { |
||||
margin-inline-start: 1rem; |
||||
} |
||||
@ -1,97 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Search results specific styles. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.search-results { |
||||
margin-block-end: var(--sp2); |
||||
padding-block: 0; |
||||
padding-inline-start: 0; |
||||
padding-inline-end: 0; |
||||
list-style: none; |
||||
|
||||
@media (--md) { |
||||
margin-block-end: var(--sp3); |
||||
} |
||||
} |
||||
|
||||
.search-result__title { |
||||
margin-block: 0; |
||||
margin-inline-start: 0; |
||||
margin-inline-end: 0; |
||||
color: var(--color-text-neutral-loud); |
||||
font-size: 20px; |
||||
line-height: var(--line-height-base); |
||||
|
||||
& a { |
||||
padding-block-end: 3px; |
||||
transition: background-size 0.2s, color 0.2s; |
||||
text-decoration: none; |
||||
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 3px; |
||||
|
||||
&:hover { |
||||
color: var(--color-text-primary-medium); |
||||
} |
||||
} |
||||
|
||||
@media (--lg) { |
||||
margin-block-end: var(--sp1); |
||||
font-size: 30px; |
||||
line-height: var(--sp3); |
||||
} |
||||
} |
||||
|
||||
[dir="rtl"] .search-result__title a { |
||||
background-position: bottom right; |
||||
} |
||||
|
||||
.search-result__snippet { |
||||
padding-block-end: calc(var(--sp1-5) - 2px); |
||||
|
||||
@media (--lg) { |
||||
padding-block-end: var(--sp3); |
||||
} |
||||
} |
||||
|
||||
.search-result__meta { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-block-end: var(--sp1); |
||||
color: var(--color-text-neutral-soft); |
||||
font-size: 14px; |
||||
line-height: var(--sp); |
||||
|
||||
& a { |
||||
color: var(--color-text-primary-medium); |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
|
||||
.search-results__item { |
||||
position: relative; /* Anchor after pseudo-element. */ |
||||
margin-block-end: var(--sp1-5); |
||||
|
||||
&::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); |
||||
} |
||||
|
||||
&:last-child { |
||||
margin-block-end: 0; |
||||
} |
||||
|
||||
@media (--lg) { |
||||
margin-block-end: var(--sp3); |
||||
} |
||||
} |
||||
@ -1,104 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Site header. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.site-header { |
||||
position: relative; |
||||
/** |
||||
* Ensure mobile site header is always above other elements including |
||||
* contextual links, and Tour. |
||||
*/ |
||||
z-index: 101; |
||||
|
||||
@media (--nav) { |
||||
/* Necessary to keep the content from jumping up when header transitions to fixed. */ |
||||
min-height: var(--site-header-height-wide); |
||||
border-block-end: solid 1px transparent; /* Will show in Windows high contrast mode. */ |
||||
} |
||||
} |
||||
|
||||
.site-header__initial { |
||||
position: relative; |
||||
z-index: 102; |
||||
display: flex; |
||||
align-items: flex-end; |
||||
align-self: stretch; |
||||
background-color: var(--color--primary-50); |
||||
} |
||||
|
||||
.site-header__fixable { |
||||
display: flex; |
||||
align-items: flex-end; |
||||
transition: all 0.5s; |
||||
|
||||
&.is-fixed { |
||||
@media (--nav) { |
||||
&:not(.is-expanded) { |
||||
pointer-events: none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (--nav) { |
||||
body:not(.is-always-mobile-nav) { |
||||
& .site-header__fixable.is-fixed { |
||||
position: fixed; |
||||
z-index: 102; /* Appear above body content that is position: relative */ |
||||
inset-block-start: calc(var(--drupal-displace-offset-top, 0px) - var(--sp4)); |
||||
max-width: var(--max-bg-color); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.site-header__inner { |
||||
position: relative; |
||||
z-index: 1; /* Appear in front of Drupal's tabs. */ |
||||
flex-grow: 1; |
||||
width: calc(100vw - var(--content-left) - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px)); |
||||
background: var(--color--white); |
||||
} |
||||
|
||||
/* |
||||
* Only apply transition styles 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) .site-header__inner { |
||||
@media (--nav) { |
||||
transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s; |
||||
} |
||||
} |
||||
|
||||
.site-header__fixable.is-expanded .site-header__inner { |
||||
@media (--nav) { |
||||
box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */ |
||||
} |
||||
} |
||||
|
||||
[dir="rtl"] .site-header__fixable.is-expanded .site-header__inner { |
||||
@media (--nav) { |
||||
box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08); |
||||
} |
||||
} |
||||
|
||||
/* Hide the desktop nav when it's fixed and not active. */ |
||||
body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner { |
||||
@media (--nav) { |
||||
transform: translateX(-101%); /* LTR */ |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed:not(.is-expanded) .site-header__inner { |
||||
@media (--nav) { |
||||
transform: translateX(101%); |
||||
} |
||||
} |
||||
|
||||
.site-header__inner__container { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
@ -1,38 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Skip link |
||||
* |
||||
* Allows keyboard users to quickly skip to the main content of the page. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.skip-link { |
||||
display: block; |
||||
width: 100%; |
||||
max-width: var(--max-bg-color); |
||||
padding-block: var(--sp0-5); |
||||
padding-inline-start: var(--sp); |
||||
padding-inline-end: var(--sp); |
||||
text-decoration: none; |
||||
color: var(--color--white); |
||||
outline: 0; |
||||
background-color: var(--color--gray-5); |
||||
|
||||
&:hover { |
||||
text-decoration: underline; |
||||
color: var(--color--white); |
||||
} |
||||
|
||||
&::after { |
||||
content: "\0020 ➔"; |
||||
} |
||||
} |
||||
|
||||
.skip-link.focusable:focus { |
||||
position: absolute !important; /* Override position from module file. */ |
||||
z-index: 503; |
||||
width: 100%; |
||||
height: 40px; |
||||
outline: none; |
||||
} |
||||
@ -1,93 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* User generated tables. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.forum table, |
||||
.text-content table, |
||||
.views-table, |
||||
.draggable-table { |
||||
margin-block-start: var(--sp2); |
||||
margin-block-end: var(--sp2); |
||||
border-spacing: 0; |
||||
color: var(--color-text-neutral-medium); |
||||
border: 0; |
||||
border-collapse: collapse; |
||||
font-family: var(--font-sans); |
||||
font-size: 16px; |
||||
line-height: var(--sp1-5); |
||||
|
||||
& caption { |
||||
margin-block-end: var(--sp1); |
||||
text-align: start; |
||||
color: var(--color-text-neutral-medium); |
||||
font-family: var(--font-serif); |
||||
font-size: 14px; |
||||
font-style: italic; |
||||
line-height: var(--sp); |
||||
} |
||||
|
||||
& tr { |
||||
&:last-child { |
||||
& td { |
||||
border-block-end: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& td, |
||||
& th { |
||||
padding-block: var(--sp1); |
||||
padding-inline-start: 0; |
||||
padding-inline-end: var(--sp1); |
||||
vertical-align: top; |
||||
} |
||||
|
||||
& th { |
||||
margin-block: 0; |
||||
margin-inline-start: 0; |
||||
margin-inline-end: 0; |
||||
text-align: start; |
||||
letter-spacing: 0.02em; |
||||
color: var(--color-text-neutral-loud); |
||||
border-block-end: 2px solid var(--color--primary-50); |
||||
font-family: var(--font-sans); |
||||
font-size: 14px; |
||||
line-height: var(--sp); |
||||
} |
||||
|
||||
& td { |
||||
white-space: normal; |
||||
border-block-end: 2px solid var(--color--gray-65); |
||||
} |
||||
|
||||
& th.checkbox, |
||||
& td.checkbox { |
||||
text-align: center; |
||||
} |
||||
} |
||||
|
||||
.draggable-table { |
||||
width: 100%; |
||||
} |
||||
|
||||
.draggable-table .form-item { |
||||
margin-top: 0; |
||||
} |
||||
|
||||
.tablesort { |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
.sticky-header { |
||||
z-index: 0; |
||||
margin: 0; |
||||
border-block-end: 4px solid var(--color--primary-50); |
||||
} |
||||
|
||||
/* Properly align VBO checkboxes. */ |
||||
.views-field-node-bulk-form .form-item { |
||||
margin: 0; |
||||
} |
||||
@ -1,54 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Styles for tabledrag. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.draggable:hover { |
||||
background-color: var(--color--gray-100); |
||||
} |
||||
|
||||
.draggable.drag { |
||||
background-color: var(--color--gray-100); |
||||
} |
||||
|
||||
.draggable.drag-previous { |
||||
background-color: var(--color--gray-95); |
||||
} |
||||
|
||||
.drag-previous a { |
||||
color: var(--color-text-neutral-medium); /* Ensure proper contrast. */ |
||||
} |
||||
|
||||
a.tabledrag-handle, |
||||
.touchevents a.tabledrag-handle { |
||||
width: 36px; |
||||
height: 36px; |
||||
} |
||||
|
||||
.draggable a.tabledrag-handle { |
||||
margin-inline-start: 0; |
||||
} |
||||
|
||||
a.tabledrag-handle .handle { |
||||
width: var(--sp2); |
||||
height: var(--sp2); |
||||
margin: 0; |
||||
background-position: 50% 5px; |
||||
} |
||||
|
||||
.touchevents a.tabledrag-handle .handle { |
||||
height: var(--sp2); |
||||
background-position: 50% 5px; |
||||
} |
||||
|
||||
.touchevents .draggable td { |
||||
padding-block: var(--sp0-5); |
||||
padding-inline-start: 0; |
||||
padding-inline-end: var(--sp0-5); |
||||
} |
||||
|
||||
.touchevents .draggable .menu-item__link { |
||||
padding: 0; |
||||
} |
||||
@ -1,205 +0,0 @@
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
/* Breakpoint where tabs switch between vertical and horizontal layouts. */ |
||||
@custom-media --tabs-layout-switch (--md); |
||||
|
||||
.tabs { |
||||
--tabs-height: var(--sp3); |
||||
--tabs-padding-inline: var(--sp1-5); |
||||
--tabs-active-border-size: 6px; |
||||
--tabs-highlight-color: var(--color--primary-50); /* Minimum 3:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ |
||||
--tabs-text-color: var(--color-text-neutral-soft); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ |
||||
--tabs-text-color-active: var(--color--gray-5); /* Minimum 4.5:1 contrast ratio against --tabs-background-color and --tabs-background-color-hover. */ |
||||
--tabs-letter-spacing: 1px; |
||||
--tabs-font-size: var(--font-size-s); |
||||
--tabs-background-color: var(--color--gray-100); |
||||
--tabs-background-color-hover: var(--color--gray-95); |
||||
--tabs-border-width: 1px; |
||||
--tabs-border-color: var(--color--gray-95); |
||||
--tabs-transition-duration: 0.2s; |
||||
|
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 100%; |
||||
margin: 0; |
||||
margin-inline-start: 0; /* Override [dir] attribute in base <ul> in compiled CSS. */ |
||||
padding: 0; |
||||
list-style: none; |
||||
|
||||
@media (--tabs-layout-switch) { |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
} |
||||
} |
||||
|
||||
.tabs__tab { |
||||
display: none; |
||||
margin: 0; |
||||
margin-block-end: calc(-1 * var(--tabs-border-width)); |
||||
|
||||
&.is-active { |
||||
display: flex; |
||||
} |
||||
|
||||
@media (--tabs-layout-switch) { |
||||
display: flex; |
||||
margin-block-end: 0; |
||||
margin-inline-start: calc(-1 * var(--tabs-border-width)); |
||||
} |
||||
|
||||
/* Show tabs when JavaScript disabled. */ |
||||
@nest html:not(.js) & { |
||||
display: flex; |
||||
} |
||||
|
||||
/* Show tabs when tabs-expanded class is present. */ |
||||
@nest .tabs.is-expanded & { |
||||
display: flex; |
||||
} |
||||
|
||||
/* Secondary tabs will always be expanded. */ |
||||
@nest .tabs--secondary & { |
||||
display: block; |
||||
|
||||
@media (--tabs-layout-switch) { |
||||
display: flex; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.tabs__link { |
||||
display: flex; |
||||
flex-grow: 1; |
||||
align-items: center; |
||||
height: var(--tabs-height); |
||||
padding-block: 0; |
||||
padding-inline: var(--tabs-padding-inline); |
||||
transition: background-color var(--tabs-transition-duration); |
||||
text-decoration: none; |
||||
letter-spacing: var(--tabs-letter-spacing); |
||||
color: var(--tabs-text-color); |
||||
border: var(--tabs-border-width) solid var(--tabs-border-color); |
||||
background-color: var(--tabs-background-color); |
||||
font-size: var(--tabs-font-size); |
||||
|
||||
&:hover { |
||||
color: var(--tabs-text-color-active); |
||||
background-color: var(--tabs-background-color-hover); |
||||
} |
||||
|
||||
&:focus { |
||||
position: relative; |
||||
outline: solid 3px var(--tabs-highlight-color); |
||||
outline-offset: -3px; |
||||
} |
||||
|
||||
&.is-active { |
||||
position: relative; /* Anchor ::after pseudo-element. */ |
||||
color: var(--tabs-text-color-active); |
||||
font-weight: 600; |
||||
|
||||
/* |
||||
* We use ::after pseudo-element in place of border so edges do not appear |
||||
* diagonally cut off due to other edges with transparent borders. |
||||
*/ |
||||
&::after { |
||||
position: absolute; |
||||
inset-block-start: calc(-1 * var(--tabs-border-width)); |
||||
inset-inline-start: calc(-1 * var(--tabs-border-width)); |
||||
height: calc(100% + var(--tabs-border-width) * 2); |
||||
content: ""; |
||||
border-inline-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color); |
||||
|
||||
@media (--tabs-layout-switch) { |
||||
inset-block: auto calc(-1 * var(--tabs-border-width)); |
||||
width: calc(100% + 2 * var(--tabs-border-width)); |
||||
height: 0; |
||||
border-block-start: var(--tabs-active-border-size) solid var(--tabs-highlight-color); |
||||
border-inline-start: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* No regular borders or background color for secondary tab links. */ |
||||
@nest .tabs--secondary & { |
||||
@media (--tabs-layout-switch) { |
||||
border-color: transparent; |
||||
background-color: transparent; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* Button that opens and closes primary tabs at narrow viewports. */ |
||||
.tabs__trigger { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: var(--tabs-height); |
||||
margin-block: 0; |
||||
margin-inline: calc(-1 * var(--tabs-border-width)) 0; |
||||
cursor: pointer; |
||||
border: solid var(--tabs-border-width) var(--tabs-border-color); |
||||
background-color: var(--tabs-background-color); |
||||
|
||||
&:hover { |
||||
background-color: var(--tabs-background-color-hover); |
||||
} |
||||
|
||||
&:focus { |
||||
position: relative; |
||||
border-color: var(--tabs-highlight-color); |
||||
outline: none; |
||||
} |
||||
|
||||
/* Button will not work when JavaScript is disabled, so we hide it. */ |
||||
@nest html:not(.js) & { |
||||
display: none; |
||||
} |
||||
|
||||
@media (--tabs-layout-switch) { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
.tabs__trigger-icon { |
||||
position: relative; |
||||
display: block; |
||||
width: var(--sp); |
||||
height: 10px; |
||||
margin-block-start: calc(-2 * var(--tabs-border-width)); |
||||
|
||||
& > span { |
||||
position: absolute; |
||||
inset-inline-start: 0; |
||||
display: block; |
||||
width: 100%; |
||||
transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration); |
||||
border-block-start: solid 2px var(--tabs-highlight-color); |
||||
|
||||
&:nth-child(1) { |
||||
inset-block-start: 0; |
||||
|
||||
@nest .tabs__trigger[aria-expanded="true"] & { |
||||
inset-block-start: calc(50% + 1px); |
||||
transform: rotate(45deg); |
||||
} |
||||
} |
||||
|
||||
&:nth-child(2) { |
||||
inset-block-start: calc(50% + 1px); |
||||
|
||||
@nest .tabs__trigger[aria-expanded="true"] & { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
|
||||
&:nth-child(3) { |
||||
inset-block-start: calc(100% + 2px); |
||||
|
||||
@nest .tabs__trigger[aria-expanded="true"] & { |
||||
inset-block-start: calc(50% + 1px); |
||||
transform: rotate(-45deg); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,83 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Tags field styling. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.field--tags { |
||||
display: flex; |
||||
font-family: var(--font-sans); |
||||
} |
||||
|
||||
.field--tags__label { |
||||
margin: 0; |
||||
margin-inline-end: calc(var(--sp1-5) - (var(--sp0-5) / 2)); |
||||
letter-spacing: 0.02em; |
||||
color: var(--color-text-neutral-soft); |
||||
font-size: var(--font-size-s); |
||||
font-weight: 600; |
||||
line-height: 1.6; |
||||
|
||||
&::after { |
||||
content: ":"; |
||||
} |
||||
|
||||
@media (--md) { |
||||
line-height: 2; |
||||
} |
||||
} |
||||
|
||||
.field--label-inline .field--tags__label { |
||||
padding-block: 0; |
||||
padding-inline-start: 0; |
||||
padding-inline-end: 0; |
||||
} |
||||
|
||||
.field--tags__items { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
margin-block: calc((var(--sp0-5) / 2) * -1); |
||||
margin-inline-start: calc((var(--sp0-5) / 2) * -1); |
||||
margin-inline-end: calc((var(--sp0-5) / 2) * -1); |
||||
padding-block: 0; |
||||
padding-inline-start: 0; |
||||
padding-inline-end: 0; |
||||
list-style: none; |
||||
} |
||||
|
||||
.field--tags__item { |
||||
display: flex; |
||||
margin-block: calc(var(--sp0-5) / 2); |
||||
margin-inline-start: calc(var(--sp0-5) / 2); |
||||
margin-inline-end: calc(var(--sp0-5) / 2); |
||||
} |
||||
|
||||
.field--tags__item:nth-last-child(n+2)::after { |
||||
content: ","; |
||||
font-size: var(--font-size-base); |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.field--tags__item a { |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
text-decoration: none; |
||||
letter-spacing: 0.02em; |
||||
color: var(--color-text-primary-medium); |
||||
font-size: var(--font-size-base); |
||||
font-weight: 700; |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.node--view-mode-full { |
||||
& .field--tags { |
||||
margin-block-start: var(--sp4); |
||||
margin-block-end: var(--sp4); |
||||
padding-block: var(--sp1-5); |
||||
padding-inline-start: var(--sp2); |
||||
padding-inline-end: var(--sp2); |
||||
background-color: var(--color--gray-100); |
||||
} |
||||
} |
||||
@ -1,153 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Text Content. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.text-content, |
||||
.cke_editable { |
||||
color: var(--color-text-neutral-medium); |
||||
font-family: var(--font-serif); |
||||
line-height: var(--sp1-5); |
||||
|
||||
/* |
||||
@todo |
||||
|
||||
text-decoration-thickness is supported by FF & Safari |
||||
text-underline-offset is supported by Safari |
||||
|
||||
text-decoration-color supported by Chrome, FF, & Safari |
||||
*/ |
||||
|
||||
& a:where(:not(.button)) { |
||||
color: var(--color-text-primary-medium); |
||||
text-decoration-color: currentColor; |
||||
text-decoration-thickness: 2px; |
||||
overflow-wrap: break-word; |
||||
|
||||
@supports (box-shadow: none) { |
||||
transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99); |
||||
text-decoration: none; |
||||
box-shadow: inset 0 -2px 0 0 var(--color--primary-50); |
||||
|
||||
&:hover { |
||||
text-decoration: underline; |
||||
color: var(--color--black); |
||||
box-shadow: inset 0 -2em 0 0 var(--color--primary-80); |
||||
text-decoration-color: var(--color--primary-80); |
||||
} |
||||
} |
||||
} |
||||
|
||||
& p { |
||||
margin-block-start: var(--sp); |
||||
margin-block-end: var(--sp); |
||||
|
||||
&:first-child { |
||||
margin-block-start: 0; |
||||
} |
||||
|
||||
&:last-child { |
||||
margin-block-end: 0; |
||||
} |
||||
|
||||
@media (--md) { |
||||
margin-block-start: var(--sp2); |
||||
margin-block-end: var(--sp2); |
||||
} |
||||
} |
||||
|
||||
& code { |
||||
background-color: var(--color--gray-100); |
||||
} |
||||
|
||||
& pre code { |
||||
display: block; |
||||
overflow: auto; |
||||
padding-block: var(--sp); |
||||
padding-inline-start: var(--sp); |
||||
padding-inline-end: var(--sp); |
||||
color: var(--color-text-neutral-soft); |
||||
} |
||||
|
||||
& blockquote { |
||||
position: relative; |
||||
margin-block: var(--sp2); |
||||
margin-inline-start: 0; |
||||
margin-inline-end: 0; |
||||
padding-inline-start: var(--sp2); |
||||
letter-spacing: -0.01em; |
||||
font-family: var(--font-serif); |
||||
font-size: 21px; |
||||
line-height: var(--sp2); |
||||
|
||||
&::before { |
||||
position: absolute; |
||||
inset-block-start: 0; |
||||
inset-inline-start: 0; |
||||
content: "\201C"; |
||||
color: var(--color--primary-60); |
||||
font-size: 54px; |
||||
} |
||||
|
||||
&::after { |
||||
position: absolute; |
||||
inset-block-end: 0; |
||||
inset-inline-start: 0; |
||||
width: var(--sp0-5); |
||||
height: calc(100% - 30px); |
||||
margin-inline-start: 4px; |
||||
content: ""; |
||||
background: var(--color--gray-100); |
||||
} |
||||
|
||||
@media (--grid-md) { |
||||
font-size: 32px; |
||||
line-height: var(--sp3); |
||||
} |
||||
|
||||
@media (--lg) { |
||||
font-size: 40px; |
||||
line-height: calc(3.5 * var(--sp)); |
||||
} |
||||
} |
||||
|
||||
@media (--grid-md) { |
||||
font-size: 18px; |
||||
line-height: var(--sp2); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Special colors for footer that has a dark background. |
||||
*/ |
||||
.site-footer .text-content { |
||||
color: inherit; |
||||
|
||||
& * { |
||||
color: inherit; |
||||
} |
||||
|
||||
& a { |
||||
text-decoration: underline; |
||||
color: var(--color--white); |
||||
box-shadow: none; |
||||
|
||||
&:hover { |
||||
text-decoration: none; |
||||
color: var(--color--white); |
||||
box-shadow: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Decrease font-size for blockquote placed in sidebar region. |
||||
*/ |
||||
.region--sidebar .text-content blockquote { |
||||
@media (--lg) { |
||||
font-size: 24px; |
||||
line-height: var(--sp2); |
||||
} |
||||
} |
||||
@ -1,30 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Styles for jQuery UI dialog. |
||||
*/ |
||||
|
||||
.ui-dialog { |
||||
& .ui-dialog-buttonpane { |
||||
padding-inline-start: 0.2em; |
||||
padding-inline-end: 0.2em; |
||||
|
||||
& .ui-dialog-buttonset { |
||||
display: flex; |
||||
float: none; |
||||
flex-wrap: wrap; |
||||
gap: 5px; |
||||
} |
||||
|
||||
& button { |
||||
margin: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.ui-widget-overlay { |
||||
z-index: 1259; |
||||
} |
||||
|
||||
.ui-dialog { |
||||
z-index: 1260; |
||||
} |
||||
@ -1,98 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Vertical Tabs. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
:root { |
||||
--vertical-tabs-menu-width: 15rem; |
||||
--vertical-tabs-menu-border-width: 1px; |
||||
} |
||||
|
||||
.vertical-tabs { |
||||
@media (--lg) { |
||||
display: flex; |
||||
} |
||||
} |
||||
|
||||
.vertical-tabs__menu { |
||||
position: relative; |
||||
align-self: flex-start; |
||||
margin: 0; |
||||
margin-inline-start: 0; |
||||
margin-inline-end: 0; |
||||
list-style: none; |
||||
border-width: var(--vertical-tabs-menu-border-width); |
||||
border-style: solid; |
||||
border-color: var(--color--gray-95); |
||||
|
||||
@media (--lg) { |
||||
width: var(--vertical-tabs-menu-width); |
||||
border-width: var(--vertical-tabs-menu-border-width) 0 var(--vertical-tabs-menu-border-width) var(--vertical-tabs-menu-border-width); |
||||
} |
||||
} |
||||
|
||||
.vertical-tabs__panes { |
||||
margin-block-start: calc(var(--vertical-tabs-menu-border-width) * -1); |
||||
|
||||
@media (--lg) { |
||||
width: calc(100% - var(--vertical-tabs-menu-width)); |
||||
margin-block-start: 0; |
||||
} |
||||
} |
||||
|
||||
.vertical-tabs__pane { |
||||
@media (--lg) { |
||||
min-height: 100%; |
||||
} |
||||
} |
||||
|
||||
.vertical-tabs__pane.olivesbooks-details { |
||||
margin: 0; |
||||
border-radius: 0; |
||||
box-shadow: none; |
||||
} |
||||
|
||||
.vertical-tabs__pane > summary { |
||||
display: none; |
||||
} |
||||
|
||||
.vertical-tabs__menu-item:nth-child(n+2) { |
||||
border-block-start: var(--vertical-tabs-menu-border-width) solid var(--color--gray-95); |
||||
} |
||||
|
||||
.vertical-tabs__menu-item a { |
||||
display: block; |
||||
padding-block: var(--sp0-5); |
||||
padding-inline-start: var(--sp0-75); |
||||
padding-inline-end: var(--sp0-75); |
||||
text-decoration: none; |
||||
color: var(--color-text-primary-loud); |
||||
background-color: var(--color--gray-95); |
||||
|
||||
&:focus, |
||||
&:hover, |
||||
&:active { |
||||
background-color: var(--color--gray-100); |
||||
} |
||||
} |
||||
|
||||
.vertical-tabs__menu-item.is-selected { |
||||
background-color: var(--color--white); |
||||
|
||||
@media (--lg) { |
||||
margin-inline-end: calc(var(--vertical-tabs-menu-border-width) * -1); |
||||
padding-inline-end: var(--vertical-tabs-menu-border-width); |
||||
} |
||||
} |
||||
|
||||
.vertical-tabs__menu-item.is-selected a { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.vertical-tabs__menu-item-summary { |
||||
display: block; |
||||
font-size: var(--font-size-s); |
||||
line-height: var(--line-height-s); |
||||
} |
||||
@ -1,42 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Wide image component. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.wide-image { |
||||
margin-block-start: var(--sp0-5); |
||||
margin-block-end: var(--sp2); |
||||
margin-inline-start: 0; |
||||
margin-inline-end: 0; |
||||
|
||||
@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(-1 * ((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))); |
||||
} |
||||
} |
||||
|
||||
/* Ensure that image doesn't overlap sidebar. */ |
||||
.sidebar-grid .wide-image { |
||||
@media (--lg) { |
||||
width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap)); |
||||
} |
||||
|
||||
@media (--xl) { |
||||
width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap)); |
||||
} |
||||
} |
||||
|
||||
/* Ensure that image doesn't overlap layout builder sections when editing layouts. */ |
||||
.layout-builder .wide-image { |
||||
max-width: 100%; |
||||
margin-inline-start: 0; |
||||
margin-inline-end: 0; |
||||
} |
||||
@ -1,50 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Grid system. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.grid-full { |
||||
display: grid; |
||||
grid-template-rows: 1fr; |
||||
grid-template-columns: repeat(var(--grid-col-count), minmax(0, 1fr)); |
||||
grid-column-gap: var(--grid-gap); |
||||
|
||||
/* .grid-full classes nested 3 or more deep go full width. */ |
||||
& .grid-full .grid-full { |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
/* |
||||
If the .grid-full is nested within the following, apply the appropriate number of columns. |
||||
- .layout--content-narrow class. |
||||
- Element that's inheriting the layout--content-narrow styles from its parent region. |
||||
*/ |
||||
.layout--content-narrow .grid-full, |
||||
.layout--pass--content-narrow > * .grid-full { |
||||
@media (--grid-md) { |
||||
grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr)); |
||||
} |
||||
|
||||
@media (--lg) { |
||||
grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr)); |
||||
} |
||||
} |
||||
|
||||
/* |
||||
If the .grid-full is nested within the following, apply the appropriate number of columns. |
||||
- .layout--content-medium class. |
||||
- Element that's inheriting the layout--content-medium styles from its parent region. |
||||
*/ |
||||
.layout--content-medium .grid-full, |
||||
.layout--pass--content-medium > * .grid-full { |
||||
@media (--grid-md) { |
||||
grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr)); |
||||
} |
||||
|
||||
@media (--lg) { |
||||
grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr)); |
||||
} |
||||
} |
||||
@ -1,66 +0,0 @@
|
||||
/* |
||||
* @file |
||||
* Provides the layout styles for four-column layout section. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.layout--fourcol-section { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
& > .layout__region { |
||||
flex: 1 0 100%; |
||||
margin-block-end: var(--grid-gap); |
||||
|
||||
@media (--md) { |
||||
flex-basis: calc(50% - (var(--grid-gap) * 0.5)); |
||||
flex-grow: 0; |
||||
flex-shrink: 0; |
||||
margin-block-end: 0; |
||||
} |
||||
} |
||||
|
||||
/* Two column layout. */ |
||||
@media (--md) { |
||||
& > .layout__region--first, |
||||
& > .layout__region--second { |
||||
margin-block-end: var(--grid-gap); |
||||
} |
||||
|
||||
& > .layout__region--first, |
||||
& > .layout__region--third { |
||||
margin-inline-end: calc(var(--grid-gap) * 0.5); |
||||
} |
||||
|
||||
& > .layout__region--second, |
||||
& > .layout__region--fourth { |
||||
margin-inline-start: calc(var(--grid-gap) * 0.5); |
||||
} |
||||
} |
||||
|
||||
/* Four column layout. */ |
||||
@media (--lg) { |
||||
& > .layout__region { |
||||
flex-basis: calc(25% - (var(--grid-gap) * 0.75)); |
||||
} |
||||
|
||||
& > .layout__region--first, |
||||
& > .layout__region--second { |
||||
margin-block-end: 0; |
||||
} |
||||
|
||||
& > .layout__region--first { |
||||
margin-inline-end: calc(var(--grid-gap) * 0.5); |
||||
} |
||||
|
||||
& > .layout__region--second, |
||||
& > .layout__region--third { |
||||
margin-inline: calc(var(--grid-gap) * 0.5); |
||||
} |
||||
|
||||
& > .layout__region--fourth { |
||||
margin-inline-start: calc(var(--grid-gap) * 0.5); |
||||
} |
||||
} |
||||
} |
||||
@ -1,79 +0,0 @@
|
||||
/* |
||||
* @file |
||||
* Provides the layout styles for three-column layout section. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.layout--threecol-section { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
& > .layout__region { |
||||
flex: 1 0 100%; |
||||
margin-block-end: var(--grid-gap); |
||||
|
||||
@media (--lg) { |
||||
flex-grow: 0; |
||||
flex-shrink: 0; |
||||
margin-block-end: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (--lg) { |
||||
.layout--threecol-section { |
||||
& > .layout__region--first { |
||||
margin-inline-end: calc(var(--grid-gap) * 0.5); |
||||
} |
||||
|
||||
& > .layout__region--second { |
||||
margin-inline: calc(var(--grid-gap) * 0.5); |
||||
} |
||||
|
||||
& > .layout__region--third { |
||||
margin-inline-start: calc(var(--grid-gap) * 0.5); |
||||
} |
||||
} |
||||
|
||||
.layout--threecol-section--25-50-25 { |
||||
& > .layout__region--first, |
||||
& > .layout__region--third { |
||||
flex-basis: calc(25% - (var(--grid-gap) * 0.5)); |
||||
} |
||||
|
||||
& > .layout__region--second { |
||||
flex-basis: calc(50% - var(--grid-gap)); |
||||
} |
||||
} |
||||
|
||||
.layout--threecol-section--25-25-50 { |
||||
& > .layout__region--first, |
||||
& > .layout__region--second { |
||||
flex-basis: calc(25% - (var(--grid-gap) * 0.5)); |
||||
} |
||||
|
||||
& > .layout__region--third { |
||||
flex-basis: calc(50% - var(--grid-gap)); |
||||
} |
||||
} |
||||
|
||||
.layout--threecol-section--50-25-25 { |
||||
& > .layout__region--first { |
||||
flex-basis: calc(50% - var(--grid-gap)); |
||||
} |
||||
|
||||
& > .layout__region--second, |
||||
& > .layout__region--third { |
||||
flex-basis: calc(25% - (var(--grid-gap) * 0.5)); |
||||
} |
||||
} |
||||
|
||||
.layout--threecol-section--33-34-33 { |
||||
& > .layout__region--first, |
||||
& > .layout__region--second, |
||||
& > .layout__region--third { |
||||
flex-basis: calc(33.33% - (var(--grid-gap) * 0.667)); |
||||
} |
||||
} |
||||
} |
||||
@ -1,84 +0,0 @@
|
||||
/* |
||||
* @file |
||||
* Provides the layout styles for two-column layout section. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.layout--twocol-section { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
& > .layout__region { |
||||
flex: 1 0 100%; |
||||
margin-block-end: var(--grid-gap); |
||||
|
||||
@media (--md) { |
||||
flex-grow: 0; |
||||
flex-shrink: 0; |
||||
margin-block-end: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (--md) { |
||||
.layout--twocol-section--50-50 { |
||||
& > .layout__region--first { |
||||
flex-basis: calc(50% - (var(--grid-gap) * 0.5)); |
||||
margin-inline-end: calc(var(--grid-gap) * 0.5); |
||||
} |
||||
|
||||
& > .layout__region--second { |
||||
flex-basis: calc(50% - (var(--grid-gap) * 0.5)); |
||||
margin-inline-start: calc(var(--grid-gap) * 0.5); |
||||
} |
||||
} |
||||
|
||||
.layout--twocol-section--33-67 { |
||||
& > .layout__region--first { |
||||
flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333)); |
||||
margin-inline-end: calc(var(--grid-gap) * 0.3333); |
||||
} |
||||
|
||||
& > .layout__region--second { |
||||
flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666)); |
||||
margin-inline-start: calc(var(--grid-gap) * 0.6666); |
||||
} |
||||
} |
||||
|
||||
.layout--twocol-section--67-33 { |
||||
& > .layout__region--first { |
||||
flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666)); |
||||
margin-inline-end: calc(var(--grid-gap) * 0.6666); |
||||
} |
||||
|
||||
& > .layout__region--second { |
||||
flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333)); |
||||
margin-inline-start: calc(var(--grid-gap) * 0.3333); |
||||
} |
||||
} |
||||
|
||||
.layout--twocol-section--25-75 { |
||||
& > .layout__region--first { |
||||
flex-basis: calc(25% - (var(--grid-gap) * 0.25)); |
||||
margin-inline-end: calc(var(--grid-gap) * 0.25); |
||||
} |
||||
|
||||
& > .layout__region--second { |
||||
flex-basis: calc(75% - (var(--grid-gap) * 0.75)); |
||||
margin-inline-start: calc(var(--grid-gap) * 0.75); |
||||
} |
||||
} |
||||
|
||||
.layout--twocol-section--75-25 { |
||||
& > .layout__region--first { |
||||
flex-basis: calc(75% - (var(--grid-gap) * 0.75)); |
||||
margin-inline-end: calc(var(--grid-gap) * 0.75); |
||||
} |
||||
|
||||
& > .layout__region--second { |
||||
flex-basis: calc(25% - (var(--grid-gap) * 0.25)); |
||||
margin-inline-start: calc(var(--grid-gap) * 0.25); |
||||
} |
||||
} |
||||
} |
||||
@ -1,39 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Grid system definition for the content wide layout. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.layout--content-medium, |
||||
.layout--pass--content-medium > * { |
||||
grid-column: 1 / 7; |
||||
width: 100%; |
||||
|
||||
@media (--grid-md) { |
||||
grid-column: 2 / 14; |
||||
} |
||||
|
||||
@media (--lg) { |
||||
grid-column: 3 / 13; |
||||
} |
||||
} |
||||
|
||||
/* |
||||
If .layout--content-medium is nested within itself, or an element that's inheriting the |
||||
layout--content-medium styles from its parent region, go full width within its |
||||
parent .grid-full. |
||||
*/ |
||||
.layout--pass--content-medium > *, |
||||
.layout--content-medium { |
||||
& .layout--content-medium, |
||||
& .layout--pass--content-medium > * { |
||||
@media (--grid-md) { |
||||
grid-column: 1 / 13; |
||||
} |
||||
|
||||
@media (--lg) { |
||||
grid-column: 1 / 11; |
||||
} |
||||
} |
||||
} |
||||
@ -1,105 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Grid system definition for the content narrow layout. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.layout--content-narrow, |
||||
.layout--pass--content-narrow > * { |
||||
grid-column: 1 / 7; |
||||
width: 100%; |
||||
|
||||
@media (--grid-md) { |
||||
grid-column: 2 / 14; |
||||
} |
||||
|
||||
@media (--lg) { |
||||
grid-column: 3 / 11; |
||||
} |
||||
} |
||||
|
||||
/* |
||||
If .layout--content-narrow is nested within any of the following, allocate the appropriate |
||||
amount of columns within its parent .grid-full. |
||||
- .layout--content-narrow class. |
||||
- Element that's inheriting the layout--content-narrow styles from its parent region. |
||||
- .layout--content-medium class. |
||||
- Element that's inheriting the layout--content-medium styles from its parent region. |
||||
*/ |
||||
.layout--content-narrow, |
||||
.layout--pass--content-narrow > *, |
||||
.layout--content-medium, |
||||
.layout--pass--content-medium > * { |
||||
& .layout--content-narrow, |
||||
& .layout--pass--content-narrow > * { |
||||
@media (--grid-md) { |
||||
grid-column: 1 / 13; |
||||
} |
||||
|
||||
@media (--lg) { |
||||
grid-column: 1 / 9; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* |
||||
Special grid-breaking treatment for text-content elements that |
||||
reside in a content-narrow layout. |
||||
*/ |
||||
.layout--content-narrow, |
||||
.layout--pass--content-narrow > * { |
||||
&.text-content, |
||||
& .text-content { |
||||
& blockquote { |
||||
&::before { |
||||
@media (--grid-md) { |
||||
inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap))); |
||||
} |
||||
} |
||||
|
||||
&::after { |
||||
@media (--grid-md) { |
||||
inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap))); |
||||
width: var(--sp); |
||||
height: calc(100% - 45px); |
||||
margin-inline-start: 2px; |
||||
} |
||||
} |
||||
|
||||
@media (--grid-md) { |
||||
width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap)); |
||||
margin-block: var(--sp3); |
||||
padding-inline-start: 0; |
||||
} |
||||
} |
||||
|
||||
& pre { |
||||
@media (--grid-md) { |
||||
margin-block: var(--sp3); |
||||
} |
||||
|
||||
@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))); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* <pre> and <blockquote> elements should not break containers and overflow |
||||
* into sidebar region when present. |
||||
*/ |
||||
.sidebar-grid { |
||||
& .layout--content-narrow, |
||||
& .layout--pass--content-narrow > * { |
||||
&.text-content, |
||||
& .text-content { |
||||
& blockquote, |
||||
& pre { |
||||
width: auto; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,18 +0,0 @@
|
||||
/* |
||||
* @file |
||||
* Provides default layout styles for all layout sections. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.layout { |
||||
margin-block-end: var(--sp); |
||||
|
||||
@media (--md) { |
||||
margin-block-end: var(--sp2); |
||||
} |
||||
|
||||
@media (--lg) { |
||||
margin-block-end: var(--sp3); |
||||
} |
||||
} |
||||
@ -1,44 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Grid system definition for the footer top and footer bottom layouts. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
/** |
||||
* Creates stacking context ensuring that child elements can never appear in |
||||
* front of mobile navigation. |
||||
*/ |
||||
.site-footer { |
||||
position: relative; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.site-footer__inner { |
||||
padding-block: var(--sp2); |
||||
|
||||
@media (--nav) { |
||||
padding-block: var(--sp4) calc(13 * var(--sp)); |
||||
} |
||||
} |
||||
|
||||
.region--footer_top__inner, |
||||
.region--footer_bottom__inner { |
||||
& > * { |
||||
margin-block-end: var(--sp2); |
||||
|
||||
@media (--md) { |
||||
flex: 1; |
||||
margin-block-end: 0; |
||||
|
||||
&:not(:last-child) { |
||||
margin-inline-end: var(--sp2); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (--md) { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
} |
||||
@ -1,48 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Special grid system for sidebar. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.sidebar-grid { |
||||
& > .site-main { |
||||
grid-column: 1 / 7; |
||||
align-self: flex-start; |
||||
|
||||
@media (--grid-md) { |
||||
grid-column: 1 / 15; |
||||
} |
||||
|
||||
@media (--lg) { |
||||
display: grid; |
||||
grid-template-columns: repeat(8, minmax(0, 1fr)); |
||||
grid-column: 3 / 11; |
||||
|
||||
& > .region--content-above, |
||||
& > .region--content { |
||||
grid-template-columns: repeat(8, minmax(0, 1fr)); |
||||
grid-column: 1 / 9; |
||||
} |
||||
|
||||
& .layout--content-narrow, |
||||
& .layout--pass--content-narrow > *, |
||||
& .layout--content-medium, |
||||
& .layout--pass--content-medium > * { |
||||
grid-column: 1 / 9; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .region--sidebar { |
||||
grid-column: 1 / 7; |
||||
|
||||
@media (--grid-md) { |
||||
grid-column: 3 / 13; |
||||
} |
||||
|
||||
@media (--lg) { |
||||
grid-column: 12 / 15; |
||||
} |
||||
} |
||||
} |
||||
@ -1,43 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Responsive styles for views grid horizontal layout. |
||||
* |
||||
* This creates the correct count of columns and automatically resizes the |
||||
* grid-items to fit into it. The grid-items will flow onto the next row when |
||||
* they reach the --views-grid-item--min-width value. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.views-view-grid { |
||||
--views-grid--layout-gap: var(--sp); |
||||
--views-grid--column-count: 4; /* Will be overridden by an inline style. */ |
||||
--views-grid-item--min-width: 100px; |
||||
} |
||||
|
||||
.views-view-grid--horizontal { |
||||
/** |
||||
* Calculated values. |
||||
*/ |
||||
--views-grid--gap-count: calc(var(--views-grid--column-count) - 1); |
||||
--views-grid--total-gap-width: calc(var(--views-grid--gap-count) * var(--views-grid--layout-gap)); |
||||
--views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width)) / var(--views-grid--column-count)); |
||||
|
||||
display: grid; |
||||
grid-template-columns: repeat(auto-fill, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr)); |
||||
grid-gap: var(--views-grid--layout-gap); |
||||
} |
||||
|
||||
.views-view-grid--vertical { |
||||
margin-block-end: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */ |
||||
column-width: var(--views-grid-item--min-width); |
||||
column-count: var(--views-grid--column-count); |
||||
column-gap: var(--views-grid--layout-gap); |
||||
|
||||
& .views-view-grid__item { |
||||
& > * { |
||||
padding-block-end: var(--views-grid--layout-gap); |
||||
break-inside: avoid; |
||||
} |
||||
} |
||||
} |
||||
@ -1,57 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Base Layout. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.container { |
||||
width: 100%; |
||||
max-width: var(--max-width); |
||||
padding-inline: var(--container-padding); |
||||
|
||||
/* This fixes an issue where if the toolbar is open in vertical mode, and |
||||
* the mobile navigation is open, the "close" button gets pushed outside of |
||||
* the viewport. */ |
||||
@nest body.is-fixed & { |
||||
width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px)); |
||||
} |
||||
} |
||||
|
||||
.page-wrapper { |
||||
max-width: var(--max-bg-color); |
||||
background: var(--color--white); |
||||
} |
||||
|
||||
/** |
||||
* Creates stacking context ensuring that child elements can never appear in |
||||
* front of mobile navigation. |
||||
*/ |
||||
.layout-main-wrapper { |
||||
position: relative; |
||||
z-index: 2; /* Ensure dropdown is not cut off by footer. */ |
||||
} |
||||
|
||||
/* Contains the social sidebar, and the primary content area. */ |
||||
.layout-main { |
||||
@media (--nav) { |
||||
display: flex; |
||||
flex-direction: row-reverse; |
||||
flex-wrap: wrap; |
||||
} |
||||
} |
||||
|
||||
.main-content { |
||||
@media (--nav) { |
||||
width: calc(100% - var(--content-left)); |
||||
margin-inline-end: auto; |
||||
} |
||||
} |
||||
|
||||
.main-content__container { |
||||
padding-block-start: var(--sp3); |
||||
|
||||
@media (--md) { |
||||
padding-block-start: var(--sp5); |
||||
} |
||||
} |
||||
@ -1,41 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Content below region layout. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.region--content-below { |
||||
@media (--md) { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
|
||||
& > * { |
||||
flex-basis: calc(50% - (var(--grid-gap) / 2)); |
||||
flex-grow: 1; |
||||
flex-shrink: 0; |
||||
margin-inline-end: var(--grid-gap); |
||||
|
||||
&:nth-child(2n), |
||||
&:last-child { |
||||
margin-inline-end: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (--md) { |
||||
& > * { |
||||
flex-basis: calc(33.33% - (var(--grid-gap) * 0.667)); |
||||
|
||||
&:nth-child(2n), |
||||
&:last-child { |
||||
margin-inline-end: var(--grid-gap); |
||||
} |
||||
|
||||
&:nth-child(3n), |
||||
&:last-child { |
||||
margin-inline-end: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,18 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Content region layout. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.region--content { |
||||
margin-block-end: var(--sp); |
||||
|
||||
@media (--md) { |
||||
margin-block-end: var(--sp2); |
||||
} |
||||
|
||||
@media (--lg) { |
||||
margin-block-end: var(--sp3); |
||||
} |
||||
} |
||||
@ -1,12 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Region default layout. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.region--hero { |
||||
& > *:last-child { |
||||
margin-block-end: 0; |
||||
} |
||||
} |
||||
@ -1,30 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Secondary menu region layout styling. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.region--secondary-menu { |
||||
display: flex; |
||||
margin-block-start: var(--sp2); |
||||
margin-block-end: var(--sp2); |
||||
|
||||
& > * { |
||||
margin-block-end: 0; |
||||
} |
||||
} |
||||
|
||||
body:not(.is-always-mobile-nav) { |
||||
@media (--nav) { |
||||
& .region--secondary-menu { |
||||
justify-content: flex-end; |
||||
margin: 0; |
||||
|
||||
/* If the secondary nav is the first item within the header, it does not need left separator. */ |
||||
&:first-child .secondary-nav::before { |
||||
content: none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,18 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Region default layout. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.region > * { |
||||
margin-block-end: var(--sp); |
||||
|
||||
@media (--md) { |
||||
margin-block-end: var(--sp2); |
||||
} |
||||
|
||||
@media (--lg) { |
||||
margin-block-end: var(--sp3); |
||||
} |
||||
} |
||||
@ -1,105 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Social Bar Region |
||||
. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.social-bar { |
||||
@media (--nav) { |
||||
flex-shrink: 0; |
||||
width: var(--content-left); |
||||
background-color: var(--color--gray-100); |
||||
} |
||||
} |
||||
|
||||
.social-bar__inner { |
||||
position: relative; |
||||
padding-block: var(--sp0-5); |
||||
padding-inline-start: var(--sp); |
||||
padding-inline-end: var(--sp); |
||||
|
||||
@media (--nav) { |
||||
position: relative; |
||||
width: var(--content-left); |
||||
padding-block: calc(5 * var(--sp)); |
||||
padding-inline-start: 0; |
||||
padding-inline-end: 0; |
||||
|
||||
&.is-fixed { |
||||
position: fixed; |
||||
inset-block-start: var(--sp6); |
||||
inset-inline-start: 0; |
||||
height: calc(100vh - 6 * var(--sp)); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.rotate { |
||||
& > * { |
||||
margin-block-end: var(--sp2); |
||||
|
||||
@media (--nav) { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-block-end: 0; |
||||
|
||||
&:not(:first-child) { |
||||
margin-inline-end: var(--sp2); |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .contextual { |
||||
@media (--nav) { |
||||
inset-inline: 100% auto; |
||||
transform: rotate(90deg); /* LTR */ |
||||
transform-origin: top left; /* LTR */ |
||||
|
||||
& .trigger { |
||||
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) { |
||||
float: right; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (--nav) { |
||||
position: absolute; |
||||
inset-inline-start: 50%; |
||||
display: flex; |
||||
flex-direction: row-reverse; |
||||
width: 100vh; |
||||
transform: rotate(-90deg) translateX(-100%); /* LTR */ |
||||
transform-origin: left; /* LTR */ |
||||
|
||||
@supports (width: max-content) { |
||||
width: max-content; |
||||
} |
||||
} |
||||
} |
||||
|
||||
[dir="rtl"] { |
||||
@media (--nav) { |
||||
& .rotate { |
||||
transform: rotate(90deg) translateX(100%); |
||||
transform-origin: right; |
||||
|
||||
& .contextual { |
||||
transform: rotate(-90deg); |
||||
transform-origin: top right; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,20 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Styles for views. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
.view { |
||||
& > * { |
||||
margin-block-end: var(--sp2); |
||||
|
||||
&:last-child { |
||||
margin-block-end: 0; |
||||
} |
||||
|
||||
@media (--md) { |
||||
margin-block-end: var(--sp3); |
||||
} |
||||
} |
||||
} |
||||
@ -1,80 +0,0 @@
|
||||
/** |
||||
* @file |
||||
* Styling for the Filter module. |
||||
*/ |
||||
|
||||
@import "../base/media-queries.pcss.css"; |
||||
|
||||
/** |
||||
* Filter information under field. |
||||
*/ |
||||
.text-full > .form-item { |
||||
margin-block-end: 0; |
||||
} |
||||
.form-element--editor-format { |
||||
vertical-align: top; |
||||
} |
||||
|
||||
.filter-wrapper { |
||||
margin-block: var(--sp1) var(--sp0-5); |
||||
} |
||||
|
||||
.filter-wrapper .form-item { |
||||
margin: 0; |
||||
} |
||||
|
||||
.filter-help { |
||||
float: right; /* LTR */ |
||||
padding-block: var(--sp0-5); |
||||
font-size: var(--font-size-xxs); |
||||
|
||||
/** |
||||
* 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) { |
||||
float: left; |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Compose tips. |
||||
* |
||||
* Wraps filter tips on page '/filter/tips[/name]'. |
||||
*/ |
||||
.compose-tips__item { |
||||
margin-block: var(--sp1-5); |
||||
} |
||||
|
||||
/** |
||||
* Filter guidelines. |
||||
*/ |
||||
.filter-guidelines__item { |
||||
margin-block-start: var(--sp1); |
||||
font-size: var(--font-size-s); |
||||
line-height: var(--line-height-s); |
||||
} |
||||
.filter-guidelines p { |
||||
margin-block: var(--sp0-25) 0; |
||||
} |
||||
|
||||
/** |
||||
* Filter tips. |
||||
* |
||||
* Long is used on '/filter/tips[/name]', short is used for the filter tips |
||||
* below a text format input. |
||||
*/ |
||||
.filter-tips--long { |
||||
margin-block-end: var(--sp1-5); |
||||
} |
||||
.filter-tips__item, |
||||
.filter-tips--long p { |
||||
margin-block: var(--sp0-75); |
||||
} |
||||
.filter-tips__item--short { |
||||
margin-block: var(--sp0-25) 0; |
||||
} |
||||
Loading…
Reference in new issue