rorschach
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
# About Rorschach
|
||||
|
||||
Rorschach is the default theme for Drupal 10. It is a flexible, recolorable theme
|
||||
with a responsive and mobile-first layout, supporting 13 regions.
|
||||
|
||||
The Rorschach theme is named after Rachel Rorschach, a member of our community who
|
||||
died in 2019.
|
||||
|
||||
This theme is not intended to be used as a base theme.
|
||||
|
||||
## About Rachel Rorschach
|
||||
|
||||
This theme was created in memory of Rachel Rorschach. Rachel engaged with the
|
||||
communities that she was involved in to make them more inclusive. As a techie
|
||||
who was also a blind, transgender lesbian, she understood the importance of
|
||||
greater diversity, inclusion, and belonging.
|
||||
|
||||
You can find a more detailed celebration of [Rachel's life on Drupal.org](
|
||||
https://www.drupal.org/forum/general/community-spotlight/2019-02-22/remembering-rachel-rorschach),
|
||||
and from the [National Federation of the Blind (NFB)](
|
||||
https://nfb.org/images/nfb/publications/bm/bm19/bm1904/bm190405.htm) where she
|
||||
led many of their IT projects.
|
||||
|
||||
When looking for inspiration for a new default theme for Drupal, the community
|
||||
was inspired by Rachel's example. The front-end developers worked hard with the
|
||||
Drupal Accessibility Team, [as well as with the NFB](
|
||||
https://nfb.org/about-us/press-room/new-drupal-theme-honors-rachel-rorschach) to
|
||||
make this theme an example. We wanted to build an attractive, modern, and very
|
||||
accessible theme that would have made Rachel proud.
|
||||
|
||||
We hope you find inspiration in this theme and its origin story to stretch
|
||||
yourself to find ways to make your work more accessible to everyone. We also ask
|
||||
that you [engage with the Drupal community](
|
||||
https://www.drupal.org/node/add/project-issue/drupal), should you find ways to
|
||||
make it a better user experience for everyone. Yes, we want to meet the
|
||||
latest [WCAG recommendations](https://www.w3.org/WAI/standards-guidelines/wcag/),
|
||||
but know that this isn't the ceiling to reach too, but rather the floor to build
|
||||
on.
|
||||
|
||||
Drupal has over 20 years of evolving with the internet, and know that this is a
|
||||
journey, where we can all strive to be better today than we were yesterday.
|
||||
|
||||
## About Drupal Theming
|
||||
|
||||
For more information, see Drupal.org [theming guide](
|
||||
https://www.drupal.org/docs/develop/theming-drupal).
|
||||
@@ -0,0 +1,14 @@
|
||||
favicon:
|
||||
use_default: true
|
||||
features:
|
||||
comment_user_picture: true
|
||||
comment_user_verification: true
|
||||
favicon: true
|
||||
node_user_picture: false
|
||||
logo:
|
||||
use_default: false
|
||||
third_party_settings:
|
||||
shortcut:
|
||||
module_link: true
|
||||
mobile_menu_all_widths: 0
|
||||
site_branding_bg_color: default
|
||||
@@ -0,0 +1,24 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- system.menu.account
|
||||
module:
|
||||
- system
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_account_menu
|
||||
theme: rorschach
|
||||
region: secondary_menu
|
||||
weight: -4
|
||||
provider: null
|
||||
plugin: 'system_menu_block:account'
|
||||
settings:
|
||||
id: 'system_menu_block:account'
|
||||
label: 'User account menu'
|
||||
label_display: '0'
|
||||
provider: system
|
||||
level: 1
|
||||
depth: 1
|
||||
expand_all_items: false
|
||||
visibility: { }
|
||||
@@ -0,0 +1,20 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- book
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_book_navigation
|
||||
theme: rorschach
|
||||
region: sidebar
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: book_navigation
|
||||
settings:
|
||||
id: book_navigation
|
||||
label: 'Book navigation'
|
||||
label_display: visible
|
||||
provider: book
|
||||
block_mode: 'book pages'
|
||||
visibility: { }
|
||||
@@ -0,0 +1,19 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- system
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_breadcrumbs
|
||||
theme: rorschach
|
||||
region: breadcrumb
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: system_breadcrumb_block
|
||||
settings:
|
||||
id: system_breadcrumb_block
|
||||
label: Breadcrumbs
|
||||
label_display: '0'
|
||||
provider: system
|
||||
visibility: { }
|
||||
@@ -0,0 +1,19 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- system
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_content
|
||||
theme: rorschach
|
||||
region: content
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: system_main_block
|
||||
settings:
|
||||
id: system_main_block
|
||||
label: 'Main page content'
|
||||
label_display: '0'
|
||||
provider: system
|
||||
visibility: { }
|
||||
@@ -0,0 +1,19 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- help
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_help
|
||||
theme: rorschach
|
||||
region: content_above
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: help_block
|
||||
settings:
|
||||
id: help_block
|
||||
label: Help
|
||||
label_display: '0'
|
||||
provider: help
|
||||
visibility: { }
|
||||
@@ -0,0 +1,24 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- system.menu.main
|
||||
module:
|
||||
- system
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_main_menu
|
||||
theme: rorschach
|
||||
region: primary_menu
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: 'system_menu_block:main'
|
||||
settings:
|
||||
id: 'system_menu_block:main'
|
||||
label: 'Main navigation'
|
||||
label_display: '0'
|
||||
provider: system
|
||||
level: 1
|
||||
depth: 2
|
||||
expand_all_items: true
|
||||
visibility: { }
|
||||
@@ -0,0 +1,19 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- system
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_messages
|
||||
theme: rorschach
|
||||
region: highlighted
|
||||
weight: -5
|
||||
provider: null
|
||||
plugin: system_messages_block
|
||||
settings:
|
||||
id: system_messages_block
|
||||
label: 'Status messages'
|
||||
label_display: '0'
|
||||
provider: system
|
||||
visibility: { }
|
||||
@@ -0,0 +1,17 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_page_title
|
||||
theme: rorschach
|
||||
region: content_above
|
||||
weight: -5
|
||||
provider: null
|
||||
plugin: page_title_block
|
||||
settings:
|
||||
id: page_title_block
|
||||
label: 'Page title'
|
||||
label_display: '0'
|
||||
provider: core
|
||||
visibility: { }
|
||||
@@ -0,0 +1,19 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- system
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_powered
|
||||
theme: rorschach
|
||||
region: footer_bottom
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: system_powered_by_block
|
||||
settings:
|
||||
id: system_powered_by_block
|
||||
label: 'Powered by Drupal'
|
||||
label_display: '0'
|
||||
provider: system
|
||||
visibility: { }
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_primary_admin_actions
|
||||
theme: rorschach
|
||||
region: highlighted
|
||||
weight: -5
|
||||
provider: null
|
||||
plugin: local_actions_block
|
||||
settings:
|
||||
id: local_actions_block
|
||||
label: 'Primary admin actions'
|
||||
label_display: '0'
|
||||
provider: core
|
||||
visibility: { }
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_primary_local_tasks
|
||||
theme: rorschach
|
||||
region: highlighted
|
||||
weight: -4
|
||||
provider: null
|
||||
plugin: local_tasks_block
|
||||
settings:
|
||||
id: local_tasks_block
|
||||
label: 'Primary tabs'
|
||||
label_display: '0'
|
||||
provider: core
|
||||
primary: true
|
||||
secondary: false
|
||||
visibility: { }
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- search
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_search_form_narrow
|
||||
theme: rorschach
|
||||
region: primary_menu
|
||||
weight: -4
|
||||
provider: null
|
||||
plugin: search_form_block
|
||||
settings:
|
||||
id: search_form_block
|
||||
label: 'Search form (narrow)'
|
||||
label_display: '0'
|
||||
provider: search
|
||||
page_id: ''
|
||||
visibility: { }
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- search
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_search_form_wide
|
||||
theme: rorschach
|
||||
region: secondary_menu
|
||||
weight: -5
|
||||
provider: null
|
||||
plugin: search_form_block
|
||||
settings:
|
||||
id: search_form_block
|
||||
label: 'Search form (wide)'
|
||||
label_display: '0'
|
||||
provider: search
|
||||
page_id: ''
|
||||
visibility: { }
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_secondary_local_tasks
|
||||
theme: rorschach
|
||||
region: highlighted
|
||||
weight: -2
|
||||
provider: null
|
||||
plugin: local_tasks_block
|
||||
settings:
|
||||
id: local_tasks_block
|
||||
label: 'Secondary tabs'
|
||||
label_display: '0'
|
||||
provider: core
|
||||
primary: false
|
||||
secondary: true
|
||||
visibility: { }
|
||||
@@ -0,0 +1,22 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- system
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_site_branding
|
||||
theme: rorschach
|
||||
region: header
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: system_branding_block
|
||||
settings:
|
||||
id: system_branding_block
|
||||
label: 'Site branding'
|
||||
label_display: '0'
|
||||
provider: system
|
||||
use_site_logo: true
|
||||
use_site_name: true
|
||||
use_site_slogan: false
|
||||
visibility: { }
|
||||
@@ -0,0 +1,20 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- node
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_syndicate
|
||||
theme: rorschach
|
||||
region: social
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: node_syndicate_block
|
||||
settings:
|
||||
id: node_syndicate_block
|
||||
label: 'RSS feed'
|
||||
label_display: '0'
|
||||
provider: node
|
||||
block_count: 10
|
||||
visibility: { }
|
||||
@@ -0,0 +1,10 @@
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
enforced:
|
||||
theme:
|
||||
- rorschach
|
||||
id: rorschach_medium
|
||||
label: 'Rorschach Medium'
|
||||
locked: false
|
||||
pattern: 'j F, Y'
|
||||
@@ -1,5 +1,23 @@
|
||||
# Schema for the configuration files of the rorschach theme.
|
||||
# Schema for the configuration files of the Olivero theme.
|
||||
|
||||
rorschach.settings:
|
||||
type: theme_settings
|
||||
label: 'rorschach settings'
|
||||
label: 'rorschach settings'
|
||||
mapping:
|
||||
third_party_settings:
|
||||
type: mapping
|
||||
label: 'Third party settings'
|
||||
mapping:
|
||||
shortcut:
|
||||
type: mapping
|
||||
label: 'Shortcut'
|
||||
mapping:
|
||||
module_link:
|
||||
type: boolean
|
||||
label: 'Module Link'
|
||||
mobile_menu_all_widths:
|
||||
type: integer
|
||||
label: "Mobile menu all widths"
|
||||
site_branding_bg_color:
|
||||
type: string
|
||||
label: "Site branding background color"
|
||||
|
||||
@@ -0,0 +1,185 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Generic base elements.
|
||||
*/
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: metropolis, sans-serif;
|
||||
font-size: 100%;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: 1.6875rem;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: #313637;
|
||||
background-color: #f7f9fa;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");
|
||||
background-position: top left; /* LTR */
|
||||
}
|
||||
|
||||
body.is-fixed {
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[dir="rtl"] body {
|
||||
background-position: top right;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0d77b5;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #2494db;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: solid 2px currentColor;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
audio {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
letter-spacing: -0.01em;
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
h1 {
|
||||
font-size: 3.75rem;
|
||||
line-height: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
letter-spacing: -0.01em;
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
h2 {
|
||||
font-size: 2.25rem;
|
||||
line-height: 3.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.6875rem;
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6875rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6875rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
color: #0d1214;
|
||||
font-family: metropolis, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 2.25rem;
|
||||
margin-bottom: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] ul {
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] ul {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
[dir="ltr"] ul {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] ul {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] ul {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 0.25em;
|
||||
margin-bottom: 0.25em;
|
||||
list-style-type: disc;
|
||||
list-style-image: none;
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
/**
|
||||
* @file
|
||||
* Generic base elements.
|
||||
*/
|
||||
|
||||
@import "variables.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--gray-10);
|
||||
background-color: var(--color--gray-95);
|
||||
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--blue-20);
|
||||
|
||||
&:hover {
|
||||
color: var(--color--blue-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--gray-0);
|
||||
font-family: var(--font-sans);
|
||||
font-weight: bold;
|
||||
|
||||
@media (--md) {
|
||||
margin-block: var(--sp2);
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-block-start: 0.25em;
|
||||
margin-block-end: 0.25em;
|
||||
margin-inline-start: 1.5em;
|
||||
margin-inline-end: 0;
|
||||
padding-inline-start: 0;
|
||||
list-style-type: disc;
|
||||
list-style-image: none;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Base Fonts.
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: metropolis;
|
||||
src:
|
||||
url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2"),
|
||||
url("../../fonts/metropolis/Metropolis-Regular.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: metropolis;
|
||||
src:
|
||||
url("../../fonts/metropolis/Metropolis-Bold.woff2") format("woff2"),
|
||||
url("../../fonts/metropolis/Metropolis-Bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: metropolis;
|
||||
src:
|
||||
url("../../fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2"),
|
||||
url("../../fonts/metropolis/Metropolis-SemiBold.woff") format("woff");
|
||||
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"),
|
||||
url("../../fonts/lora/lora-v14-latin-regular.woff") format("woff");
|
||||
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"),
|
||||
url("../../fonts/lora/lora-v14-latin-italic.woff") format("woff");
|
||||
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"),
|
||||
url("../../fonts/lora/lora-v14-latin-700.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/**
|
||||
* @file
|
||||
* Base Fonts.
|
||||
*/
|
||||
|
||||
@import "variables.pcss.css";
|
||||
|
||||
@font-face {
|
||||
font-family: metropolis;
|
||||
src:
|
||||
url("../../fonts/metropolis/Metropolis-Regular.woff2") format("woff2"),
|
||||
url("../../fonts/metropolis/Metropolis-Regular.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: metropolis;
|
||||
src:
|
||||
url("../../fonts/metropolis/Metropolis-Bold.woff2") format("woff2"),
|
||||
url("../../fonts/metropolis/Metropolis-Bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: metropolis;
|
||||
src:
|
||||
url("../../fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2"),
|
||||
url("../../fonts/metropolis/Metropolis-SemiBold.woff") format("woff");
|
||||
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"),
|
||||
url("../../fonts/lora/lora-v14-latin-regular.woff") format("woff");
|
||||
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"),
|
||||
url("../../fonts/lora/lora-v14-latin-italic.woff") format("woff");
|
||||
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"),
|
||||
url("../../fonts/lora/lora-v14-latin-700.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Utility classes.
|
||||
*/
|
||||
|
||||
/*
|
||||
ie11-autorow
|
||||
|
||||
IE11 does not automatically place new rows, which leads to overlapping
|
||||
content. We can work around this (when we know that each grid item is
|
||||
going to span the full width) by setting each child to a new row.
|
||||
*/
|
||||
|
||||
.ie11-autorow > *:nth-child(1) {
|
||||
-ms-grid-row: 1;
|
||||
}
|
||||
|
||||
.ie11-autorow > *:nth-child(2) {
|
||||
-ms-grid-row: 2;
|
||||
}
|
||||
|
||||
.ie11-autorow > *:nth-child(3) {
|
||||
-ms-grid-row: 3;
|
||||
}
|
||||
|
||||
.ie11-autorow > *:nth-child(4) {
|
||||
-ms-grid-row: 4;
|
||||
}
|
||||
|
||||
.ie11-autorow > *:nth-child(5) {
|
||||
-ms-grid-row: 5;
|
||||
}
|
||||
|
||||
.ie11-autorow > *:nth-child(6) {
|
||||
-ms-grid-row: 6;
|
||||
}
|
||||
|
||||
.ie11-autorow > *:nth-child(7) {
|
||||
-ms-grid-row: 7;
|
||||
}
|
||||
|
||||
.ie11-autorow > *:nth-child(8) {
|
||||
-ms-grid-row: 8;
|
||||
}
|
||||
|
||||
.ie11-autorow > *:nth-child(9) {
|
||||
-ms-grid-row: 9;
|
||||
}
|
||||
|
||||
.ie11-autorow > *:nth-child(10) {
|
||||
-ms-grid-row: 10;
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/**
|
||||
* @file
|
||||
* Utility classes.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
/*
|
||||
ie11-autorow
|
||||
|
||||
IE11 does not automatically place new rows, which leads to overlapping
|
||||
content. We can work around this (when we know that each grid item is
|
||||
going to span the full width) by setting each child to a new row.
|
||||
*/
|
||||
.ie11-autorow > * {
|
||||
&:nth-child(1) {
|
||||
-ms-grid-row: 1;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
-ms-grid-row: 2;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
-ms-grid-row: 3;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
-ms-grid-row: 4;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
-ms-grid-row: 5;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
-ms-grid-row: 6;
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
-ms-grid-row: 7;
|
||||
}
|
||||
|
||||
&:nth-child(8) {
|
||||
-ms-grid-row: 8;
|
||||
}
|
||||
|
||||
&:nth-child(9) {
|
||||
-ms-grid-row: 9;
|
||||
}
|
||||
|
||||
&:nth-child(10) {
|
||||
-ms-grid-row: 10;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/*
|
||||
Media query breakpoints.
|
||||
Processed by postcss/postcss-custom-media.
|
||||
*/
|
||||
|
||||
/* Navigation related breakpoints */
|
||||
|
||||
/* Grid related breakpoints */
|
||||
|
||||
/* Grid shifts from 6 to 14 columns. */
|
||||
|
||||
/* Width of the entire grid maxes out. */
|
||||
|
||||
/*
|
||||
Custom CSS properties.
|
||||
|
||||
These are "compiled" by postcss/postcss-custom-properties for IE11 compatibility.
|
||||
*/
|
||||
|
||||
:root {
|
||||
|
||||
/* Typography */
|
||||
|
||||
/* Layout */
|
||||
|
||||
/* Drupal administrative toolbar heights and width. */
|
||||
|
||||
/*
|
||||
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.
|
||||
|
||||
Note we cannot change the values of these custom properties within media queries,
|
||||
as they are processed by postcss/postcss-custom-properties (for IE11 compatibility),
|
||||
which does not support that functionality. Therefore, we need a separate custom
|
||||
property for each breakpoint. 😭
|
||||
*/
|
||||
|
||||
/* Approximate width of a scrollbar. Doesn't have to be perfect. */
|
||||
|
||||
/* Grid gap across various breakpoints. */
|
||||
|
||||
/* Column counts at various breakpoints. */
|
||||
|
||||
/* Count of grid-gaps at various breakpoints. */
|
||||
|
||||
/* Width of the entire grid at various breakpoints. */
|
||||
|
||||
/* Width of a grid column at various breakpoints */
|
||||
|
||||
/* Layout helpers */
|
||||
|
||||
/* Black */
|
||||
|
||||
/* Black 1 */
|
||||
|
||||
/* Black 2 */
|
||||
|
||||
/* Black 3 */
|
||||
|
||||
/* Gray Dark */
|
||||
|
||||
/* Gray Dark 2 */
|
||||
|
||||
/* Gray medium */
|
||||
|
||||
/* Gray medium 1 */
|
||||
|
||||
/* Gray medium 2 */
|
||||
|
||||
/* Black 4 */
|
||||
|
||||
/* Gray light */
|
||||
|
||||
/* Gray light 1 */
|
||||
|
||||
/* Gray light 2 */
|
||||
|
||||
/* Blue dark */
|
||||
|
||||
/* Blue dark 2 */
|
||||
|
||||
/* Blue medium */
|
||||
|
||||
/* Blue bright */
|
||||
|
||||
/* Blue bright 5 */
|
||||
|
||||
/* White */
|
||||
|
||||
/* Red */
|
||||
|
||||
/* Gold */
|
||||
|
||||
/* Green */
|
||||
|
||||
/* Header */
|
||||
|
||||
/* Width of slide out navigation */
|
||||
|
||||
/* Border radius */
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
/*
|
||||
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. */
|
||||
|
||||
/*
|
||||
Custom CSS properties.
|
||||
|
||||
These are "compiled" by postcss/postcss-custom-properties for IE11 compatibility.
|
||||
*/
|
||||
:root {
|
||||
--font-sans: "metropolis", sans-serif;
|
||||
--font-serif: "Lora", "georgia", serif;
|
||||
|
||||
/* Typography */
|
||||
--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 */
|
||||
--max-width: 1350px;
|
||||
--max-bg-color: 1570px;
|
||||
--sp: 18px;
|
||||
--content-left: 90px;
|
||||
--container-padding: var(--sp);
|
||||
--container-padding-nav: var(--sp2);
|
||||
--site-header-height-wide: var(--sp10);
|
||||
|
||||
/* Drupal administrative toolbar heights and width. */
|
||||
--toolbar-height: 39px;
|
||||
--toolbar-tray-height: 40px;
|
||||
--toolbar-tray-vertical-width: 239px;
|
||||
|
||||
/*
|
||||
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.
|
||||
|
||||
Note we cannot change the values of these custom properties within media queries,
|
||||
as they are processed by postcss/postcss-custom-properties (for IE11 compatibility),
|
||||
which does not support that functionality. Therefore, we need a separate custom
|
||||
property for each breakpoint. 😭
|
||||
*/
|
||||
|
||||
--scrollbar-width: 15px; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
|
||||
|
||||
/* Grid gap across various breakpoints. */
|
||||
--grid-gap: var(--sp);
|
||||
--grid-gap--md: var(--sp2);
|
||||
--grid-gap--lg: var(--grid-gap--md);
|
||||
--grid-gap--nav: var(--grid-gap--md);
|
||||
--grid-gap--max: var(--grid-gap--md);
|
||||
|
||||
/* Column counts at various breakpoints. */
|
||||
--grid-col-count: 6;
|
||||
--grid-col-count--md: 14;
|
||||
--grid-col-count--lg: var(--grid-col-count--md);
|
||||
--grid-col-count--nav: var(--grid-col-count--md);
|
||||
--grid-col-count--max: var(--grid-col-count--md);
|
||||
|
||||
/* Count of grid-gaps at various breakpoints. */
|
||||
--grid-gap-count: calc(var(--grid-col-count) - 1);
|
||||
--grid-gap-count--md: calc(var(--grid-col-count--md) - 1);
|
||||
--grid-gap-count--lg: var(--grid-gap-count--md);
|
||||
--grid-gap-count--nav: var(--grid-gap-count--md);
|
||||
--grid-gap-count--max: var(--grid-gap-count--md);
|
||||
|
||||
/* Width of the entire grid at various breakpoints. */
|
||||
--grid-full-width: calc(100vw - var(--sp2));
|
||||
--grid-full-width--md: var(--grid-full-width);
|
||||
--grid-full-width--lg: calc(var(--grid-full-width) - var(--scrollbar-width));
|
||||
--grid-full-width--nav: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
|
||||
--grid-full-width--max: calc(var(--max-width) - var(--sp4));
|
||||
|
||||
/* Width of a grid column at various breakpoints */
|
||||
--grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count));
|
||||
--grid-col-width--md: calc((var(--grid-full-width--md) - (var(--grid-gap-count--md) * var(--grid-gap--md))) / var(--grid-col-count--md));
|
||||
--grid-col-width--lg: calc((var(--grid-full-width--lg) - (var(--grid-gap-count--lg) * var(--grid-gap--lg))) / var(--grid-col-count--lg));
|
||||
--grid-col-width--nav: calc((var(--grid-full-width--nav) - (var(--grid-gap-count--nav) * var(--grid-gap--nav))) / var(--grid-col-count--nav));
|
||||
--grid-col-width--max: calc((var(--grid-full-width--max) - (var(--grid-gap-count--max) * var(--grid-gap--max))) / var(--grid-col-count--max));
|
||||
|
||||
/* 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));
|
||||
--color--black: #000; /* Black */
|
||||
--color--gray-0: #0d1214; /* Black 1 */
|
||||
--color--gray-5: #0c0d0e;
|
||||
--color--gray-8: #171e23;
|
||||
--color--gray-10: #313637; /* Black 2 */
|
||||
--color--gray-20: #6e7172; /* Black 3 */
|
||||
--color--gray-25: #5d7585; /* Gray Dark */
|
||||
--color--gray-28: #7d919d; /* Gray Dark 2 */
|
||||
--color--gray-30: #7e96a7; /* Gray medium */
|
||||
--color--gray-40: #98abb9; /* Gray medium 1 */
|
||||
--color--gray-45: #afb8be; /* Gray medium 2 */
|
||||
--color--gray-50: #9ea0a1; /* Black 4 */
|
||||
--color--gray-70: #d7e1e8; /* Gray light */
|
||||
--color--gray-75: #e3e3e5;
|
||||
--color--gray-80: #e7edf1; /* Gray light 1 */
|
||||
--color--gray-90: #f1f4f7;
|
||||
--color--gray-95: #f7f9fa; /* Gray light 2 */
|
||||
--color--blue-10: #0f6292;
|
||||
--color--blue-20: #0d77b5; /* Blue dark */
|
||||
--color--blue-30: #3d92c4; /* Blue dark 2 */
|
||||
--color--blue-50: #2494db; /* Blue medium */
|
||||
--color--blue-70: #53b0eb; /* Blue bright */
|
||||
--color--blue-90: #ddeffb; /* Blue bright 5 */
|
||||
--color--white: #fff; /* White */
|
||||
--color--red: #e33f1e; /* Red */
|
||||
--color--gold: #fdca40; /* Gold */
|
||||
--color--green: #3fa21c; /* Green */
|
||||
|
||||
/* Header */
|
||||
--header-height-wide-when-fixed: calc(6 * var(--sp));
|
||||
|
||||
/* Width of slide out navigation */
|
||||
--mobile-nav-width: 500px;
|
||||
|
||||
/* Border radius */
|
||||
--border-radius: 3px;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/**
|
||||
* @file
|
||||
* Styles for action links.
|
||||
*/
|
||||
[dir="ltr"] .action-links {
|
||||
margin-left: 0;
|
||||
}
|
||||
[dir="rtl"] .action-links {
|
||||
margin-right: 0;
|
||||
}
|
||||
[dir="ltr"] .action-links {
|
||||
margin-right: 0;
|
||||
}
|
||||
[dir="rtl"] .action-links {
|
||||
margin-left: 0;
|
||||
}
|
||||
[dir="ltr"] .action-links {
|
||||
padding-left: 0;
|
||||
}
|
||||
[dir="rtl"] .action-links {
|
||||
padding-right: 0;
|
||||
}
|
||||
[dir="ltr"] .action-links {
|
||||
padding-right: 0;
|
||||
}
|
||||
[dir="rtl"] .action-links {
|
||||
padding-left: 0;
|
||||
}
|
||||
.action-links {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.action-links li {
|
||||
display: inline-block;
|
||||
}
|
||||
.action-links li a {
|
||||
color: #0d77b5;
|
||||
}
|
||||
.action-links-item {
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for action links.
|
||||
*/
|
||||
@import "../base/variables.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--blue-20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-links-item {
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for ajax-progress throbber.
|
||||
*/
|
||||
|
||||
.ajax-progress {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Throbber.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .ajax-progress-throbber {
|
||||
margin-left: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .ajax-progress-throbber {
|
||||
margin-right: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .ajax-progress-throbber {
|
||||
margin-right: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .ajax-progress-throbber {
|
||||
margin-left: 0.5625rem;
|
||||
}
|
||||
|
||||
.ajax-progress-throbber {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-content: center;
|
||||
height: 1.125rem;
|
||||
margin-top: -0.1875rem;
|
||||
margin-bottom: 0;
|
||||
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: #2494db transparent #2494db #2494db;
|
||||
}
|
||||
|
||||
[dir="ltr"] .ajax-progress-throbber .message {
|
||||
padding-left: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .ajax-progress-throbber .message {
|
||||
padding-right: 0.5625rem;
|
||||
}
|
||||
|
||||
.ajax-progress-throbber .message {
|
||||
display: inline-block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/**
|
||||
* Full screen throbber.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .ajax-progress-fullscreen {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
[dir="rtl"] .ajax-progress-fullscreen {
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.ajax-progress-fullscreen {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 50%;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
margin: -1.75rem;
|
||||
border: 1px solid #afb8be;
|
||||
border-radius: 3.5rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1); /* LTR */
|
||||
}
|
||||
|
||||
[dir="ltr"] .ajax-progress-fullscreen:before {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
[dir="rtl"] .ajax-progress-fullscreen:before {
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
.ajax-progress-fullscreen:before {
|
||||
position: absolute;
|
||||
top: 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: olivero-throbber 0.75s linear infinite;
|
||||
border-style: solid dotted solid solid;
|
||||
border-color: #2494db transparent #2494db #2494db;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove margin from ajax throbbers following buttons because buttons already
|
||||
* have a large margin set.
|
||||
*/
|
||||
|
||||
html[dir="ltr"].js .button:not(.js-hide) + .ajax-progress-throbber {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
html[dir="rtl"].js .button:not(.js-hide) + .ajax-progress-throbber {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@keyframes olivero-throbber {
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for ajax-progress throbber.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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--blue-50) transparent var(--color--blue-50) var(--color--blue-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-45);
|
||||
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: olivero-throbber 0.75s linear infinite;
|
||||
border-style: solid dotted solid solid;
|
||||
border-color: var(--color--blue-50) transparent var(--color--blue-50) var(--color--blue-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 olivero-throbber {
|
||||
0% {
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for autocomplete input field.
|
||||
*/
|
||||
|
||||
:root { /* 18 18 */
|
||||
}
|
||||
|
||||
html[dir="ltr"].js .form-autocomplete {
|
||||
padding-right: 3.375rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"].js .form-autocomplete {
|
||||
padding-left: 3.375rem;
|
||||
}
|
||||
|
||||
html.js .form-autocomplete {
|
||||
background-color: #fff;
|
||||
background-image: url("../../images/magnifying-glass.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 18px center; /* LTR */
|
||||
}
|
||||
|
||||
html.js .form-autocomplete:disabled {
|
||||
background-color: #f1f4f7;
|
||||
}
|
||||
|
||||
html.js .form-autocomplete.ui-autocomplete-loading {
|
||||
background: url("../../images/throbber.svg") no-repeat right 1.125rem center;
|
||||
}
|
||||
|
||||
html.js[dir="rtl"] .form-autocomplete {
|
||||
background-color: #fff;
|
||||
background-image: url("../../images/magnifying-glass.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left 18px center;
|
||||
}
|
||||
|
||||
html.js[dir="rtl"] .form-autocomplete:disabled {
|
||||
background-color: #f1f4f7;
|
||||
}
|
||||
|
||||
html.js[dir="rtl"] .form-autocomplete.ui-autocomplete-loading {
|
||||
background: url("../../images/throbber.svg") no-repeat left 1.125rem center;
|
||||
}
|
||||
|
||||
/* IE11 does not animate inline SVG. */
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
|
||||
_:-ms-fullscreen,
|
||||
html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading {
|
||||
background: url("../../images/throbber.gif") no-repeat right 1.125rem center / 1.125rem 1.125rem;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
|
||||
_:-ms-fullscreen,
|
||||
html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading {
|
||||
background: url("../../images/throbber.gif") no-repeat left 1.125rem center / 1.125rem 1.125rem;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for autocomplete input field.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
--autocomplete-search-icon-url: url("../../images/magnifying-glass.svg");
|
||||
--autocomplete-throbber-icon-url: url("../../images/throbber.svg");
|
||||
--autocomplete-throbber-IE-icon-url: url("../../images/throbber.gif");
|
||||
--autocomplete-throbber-IE-size: 1.125rem 1.125rem; /* 18 18 */
|
||||
--autocomplete-icon-right-offset: var(--sp1);
|
||||
}
|
||||
|
||||
html.js .form-autocomplete {
|
||||
padding-inline-end: var(--sp3);
|
||||
background-color: var(--color--white);
|
||||
background-image: var(--autocomplete-search-icon-url);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right var(--autocomplete-icon-right-offset) center; /* LTR */
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--color--gray-90);
|
||||
}
|
||||
|
||||
&.ui-autocomplete-loading {
|
||||
background: var(--autocomplete-throbber-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center;
|
||||
}
|
||||
}
|
||||
|
||||
html.js[dir="rtl"] .form-autocomplete {
|
||||
background-color: var(--color--white);
|
||||
background-image: var(--autocomplete-search-icon-url);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left var(--autocomplete-icon-right-offset) center;
|
||||
|
||||
&:disabled {
|
||||
background-color: var(--color--gray-90);
|
||||
}
|
||||
|
||||
&.ui-autocomplete-loading {
|
||||
background: var(--autocomplete-throbber-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center;
|
||||
}
|
||||
}
|
||||
|
||||
/* IE11 does not animate inline SVG. */
|
||||
/* rtl:begin:ignore */
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
html[dir=ltr].js .form-autocomplete.ui-autocomplete-loading {
|
||||
background: var(--autocomplete-throbber-IE-icon-url) no-repeat right var(--autocomplete-icon-right-offset) center / var(--autocomplete-throbber-IE-size);
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
html[dir=rtl].js .form-autocomplete.ui-autocomplete-loading {
|
||||
background: var(--autocomplete-throbber-IE-icon-url) no-repeat left var(--autocomplete-icon-right-offset) center / var(--autocomplete-throbber-IE-size);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Block styling.
|
||||
*/
|
||||
|
||||
.block__title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.125rem;
|
||||
letter-spacing: 0.02em;
|
||||
color: #6e7172;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
.site-footer .block__title {
|
||||
color: #9ea0a1;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* @file
|
||||
* Block styling.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.block__title {
|
||||
margin-block: 0 var(--sp);
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--color--gray-20);
|
||||
font-size: var(--font-size-s);
|
||||
line-height: var(--sp);
|
||||
}
|
||||
|
||||
.site-footer .block__title {
|
||||
color: var(--color--gray-50);
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Book module styling.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .book-pager {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-pager {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .book-pager {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-pager {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .book-pager {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-pager {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .book-pager {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-pager {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.book-pager {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0 1.125rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 1.125rem;
|
||||
list-style: none;
|
||||
border-bottom: solid 1px #0d77b5;
|
||||
}
|
||||
|
||||
.book-pager__item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
.book-pager__item {
|
||||
flex: 0 0 33.33%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
.book-pager__item--center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
[dir="ltr"] .book-pager__item--next {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-pager__item--next {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
[dir="ltr"] .book-pager__item--next {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-pager__item--next {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.book-pager__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #0d77b5;
|
||||
font-family: Lora, georgia, serif;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[dir="ltr"] .book-pager__link--previous:before {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-pager__link--previous:before {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
[dir="ltr"] .book-pager__link--previous:before {
|
||||
border-left: solid 0.1875rem currentColor;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-pager__link--previous:before {
|
||||
border-right: solid 0.1875rem currentColor;
|
||||
}
|
||||
|
||||
.book-pager__link--previous:before {
|
||||
display: block;
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
content: "";
|
||||
transform: rotate(-45deg);
|
||||
border-top: solid 0.1875rem currentColor;
|
||||
}
|
||||
|
||||
[dir="ltr"] .book-pager__link--next:after {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-pager__link--next:after {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
[dir="ltr"] .book-pager__link--next:after {
|
||||
border-left: solid 0.1875rem currentColor;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-pager__link--next:after {
|
||||
border-right: solid 0.1875rem currentColor;
|
||||
}
|
||||
|
||||
.book-pager__link--next:after {
|
||||
display: block;
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
content: "";
|
||||
transform: rotate(135deg);
|
||||
border-top: solid 0.1875rem currentColor;
|
||||
}
|
||||
|
||||
[dir="ltr"] .book-navigation__menu {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-navigation__menu {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .book-navigation__menu {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-navigation__menu {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .book-navigation__menu {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-navigation__menu {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .book-navigation__menu {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-navigation__menu {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.book-navigation__menu {
|
||||
margin-top: 2.25rem;
|
||||
margin-bottom: 2.25rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
[dir="ltr"] .book-navigation__item {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-navigation__item {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .book-navigation__item {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-navigation__item {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.book-navigation__item {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-pager__link--previous:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
[dir="rtl"] .book-pager__link--next:after {
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
/**
|
||||
* @file
|
||||
* Book module styling.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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--blue-20);
|
||||
}
|
||||
|
||||
.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--blue-20);
|
||||
font-family: var(--font-serif);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.book-pager__link--previous {
|
||||
&:before {
|
||||
display: block;
|
||||
width: var(--sp0-5);
|
||||
height: var(--sp0-5);
|
||||
margin-inline-end: 0.25em;
|
||||
content: "";
|
||||
transform: rotate(-45deg);
|
||||
border-block-start: solid 3px currentColor;
|
||||
border-inline-start: solid 3px currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.book-pager__link--next {
|
||||
&:after {
|
||||
display: block;
|
||||
width: var(--sp0-5);
|
||||
height: var(--sp0-5);
|
||||
margin-inline-start: 0.25em;
|
||||
content: "";
|
||||
transform: rotate(135deg);
|
||||
border-block-start: solid 3px currentColor;
|
||||
border-inline-start: solid 3px currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.book-navigation__menu {
|
||||
margin-block: var(--sp2);
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
padding-block: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.book-navigation__item {
|
||||
margin-block: 0;
|
||||
padding-block: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
& .book-pager__link--previous:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
& .book-pager__link--next:after {
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Breadcrumb region.
|
||||
*/
|
||||
|
||||
.breadcrumb {
|
||||
position: relative;
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.125rem;
|
||||
|
||||
/* Shadow on the right side of breadcrumbs for narrow screens. */
|
||||
}
|
||||
|
||||
[dir="ltr"] .breadcrumb:after {
|
||||
right: -1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb:after {
|
||||
left: -1.125rem;
|
||||
}
|
||||
|
||||
.breadcrumb:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 3.375rem;
|
||||
height: 2.25rem;
|
||||
content: "";
|
||||
background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%); /* LTR */
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
.breadcrumb:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
.breadcrumb {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb:after {
|
||||
background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
[dir="ltr"] .breadcrumb__content {
|
||||
margin-left: -0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__content {
|
||||
margin-right: -0.5625rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .breadcrumb__content {
|
||||
margin-right: -1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__content {
|
||||
margin-left: -1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .breadcrumb__content {
|
||||
padding-left: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__content {
|
||||
padding-right: 0.5625rem;
|
||||
}
|
||||
|
||||
.breadcrumb__content {
|
||||
overflow: auto;
|
||||
margin-top: -0.5625rem;
|
||||
margin-bottom: -0.5625rem;
|
||||
padding-top: 0.5625rem;
|
||||
padding-bottom: 0.5625rem;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
[dir="ltr"] .breadcrumb__content {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__content {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] .breadcrumb__list {
|
||||
margin-left: -1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__list {
|
||||
margin-right: -1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .breadcrumb__list {
|
||||
margin-right: -1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__list {
|
||||
margin-left: -1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .breadcrumb__list {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__list {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .breadcrumb__list {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__list {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.breadcrumb__list {
|
||||
overflow-x: auto;
|
||||
width: max-content;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 1.125rem;
|
||||
list-style: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
[dir="ltr"] .breadcrumb__list {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__list {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .breadcrumb__list {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__list {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .breadcrumb__list {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__list {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.breadcrumb__list {
|
||||
overflow: visible;
|
||||
padding-bottom: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb__item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
[dir="ltr"] .breadcrumb__item:nth-child(n+2):before {
|
||||
margin-right: 1.25rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__item:nth-child(n+2):before {
|
||||
margin-right: 1rem;
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .breadcrumb__item:nth-child(n+2):before {
|
||||
border-right: 2px solid #5d7585;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__item:nth-child(n+2):before {
|
||||
border-left: 2px solid #5d7585;
|
||||
}
|
||||
|
||||
.breadcrumb__item:nth-child(n+2):before {
|
||||
display: inline-block;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
content: "";
|
||||
transform: rotate(45deg); /* LTR */
|
||||
border-top: 2px solid #5d7585;
|
||||
}
|
||||
|
||||
[dir="ltr"] .breadcrumb__item:last-child {
|
||||
margin-right: 3.375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__item:last-child {
|
||||
margin-left: 3.375rem;
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
[dir="ltr"] .breadcrumb__item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__item:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .breadcrumb__item:nth-child(n+2):before {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.breadcrumb__link {
|
||||
text-decoration: none;
|
||||
color: #0d77b5;
|
||||
}
|
||||
|
||||
.breadcrumb__link:hover,
|
||||
.breadcrumb__link:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
/**
|
||||
* @file
|
||||
* Breadcrumb region.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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-25);
|
||||
border-inline-end: 2px solid var(--color--gray-25);
|
||||
}
|
||||
|
||||
&: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--blue-20);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Buttons.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .button {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .button {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .button {
|
||||
margin-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .button {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
height: 3.375rem;
|
||||
margin-top: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
padding-top: 1.125rem;
|
||||
padding-right: 1.6875rem;
|
||||
padding-bottom: 1.125rem;
|
||||
padding-left: 1.6875rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #0d77b5;
|
||||
border: solid 2px #0d77b5;
|
||||
border-radius: 0.1875rem;
|
||||
background-color: #fff;
|
||||
font-family: metropolis, sans-serif;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
.button:focus {
|
||||
text-decoration: none;
|
||||
color: #0f6292;
|
||||
border: solid 2px #0f6292;
|
||||
background: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.button:focus {
|
||||
outline: 2px solid #53b0eb;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
color: #0d77b5;
|
||||
border-color: #0d77b5;
|
||||
}
|
||||
|
||||
.button:disabled,
|
||||
.button.is-disabled {
|
||||
cursor: default;
|
||||
color: #d7e1e8;
|
||||
border-color: #d7e1e8;
|
||||
}
|
||||
|
||||
/*
|
||||
IE11 doesn't work properly on button elements so we only do
|
||||
inline-flex on modern browsers.
|
||||
*/
|
||||
|
||||
@supports (display: inline-flex) {
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
/* Top padding accounts for font not being vertically centered within line-height. */
|
||||
padding-top: 1px;
|
||||
padding-right: 1.6875rem;
|
||||
padding-bottom: 0;
|
||||
padding-left: 1.6875rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* No margin if is part of a menu. */
|
||||
|
||||
[dir="ltr"] .menu .button {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .menu .button {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .menu .button {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .menu .button {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.menu .button {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.button--small {
|
||||
height: 2.8125rem;
|
||||
padding-top: 0.84375rem;
|
||||
padding-right: 1.125rem;
|
||||
padding-bottom: 0.84375rem;
|
||||
padding-left: 1.125rem;
|
||||
font-size: 1rem;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
color: #fff;
|
||||
background-color: #0d77b5;
|
||||
}
|
||||
|
||||
.button--primary:hover,
|
||||
.button--primary:focus {
|
||||
color: #fff;
|
||||
border-color: #0f6292;
|
||||
background-color: #0f6292;
|
||||
}
|
||||
|
||||
.button--primary:active {
|
||||
color: #fff;
|
||||
background-color: #0d77b5;
|
||||
}
|
||||
|
||||
.button--primary:disabled,
|
||||
.button--primary.is-disabled {
|
||||
color: #fff;
|
||||
background-color: #d7e1e8;
|
||||
}
|
||||
|
||||
.button--icon-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
[dir="ltr"] .button--icon-back:before {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] .button--icon-back:before {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
[dir="ltr"] .button--icon-back:before {
|
||||
border-left: solid 2px currentColor;
|
||||
}
|
||||
|
||||
[dir="rtl"] .button--icon-back:before {
|
||||
border-right: solid 2px currentColor;
|
||||
}
|
||||
|
||||
.button--icon-back:before {
|
||||
display: block;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
content: "";
|
||||
transform: rotate(45deg); /* LTR */
|
||||
border-bottom: solid 2px currentColor;
|
||||
}
|
||||
|
||||
[dir="rtl"] .button--icon-back:before {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.shepherd-cancel-icon {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* @file
|
||||
* Buttons.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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--blue-20);
|
||||
border: solid 2px var(--color--blue-20);
|
||||
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--blue-10);
|
||||
border: solid 2px var(--color--blue-10);
|
||||
background: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--color--blue-70);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color--blue-20);
|
||||
border-color: var(--color--blue-20);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
cursor: default;
|
||||
color: var(--color--gray-70);
|
||||
border-color: var(--color--gray-70);
|
||||
}
|
||||
|
||||
/*
|
||||
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);
|
||||
background-color: var(--color--blue-20);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color--white);
|
||||
border-color: var(--color--blue-10);
|
||||
background-color: var(--color--blue-10);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color--white);
|
||||
background-color: var(--color--blue-20);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
color: var(--color--white);
|
||||
background-color: var(--color--gray-70);
|
||||
}
|
||||
}
|
||||
|
||||
.button--icon-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
margin-inline-end: 0.5em;
|
||||
content: "";
|
||||
transform: rotate(45deg); /* LTR */
|
||||
border-block-end: solid 2px currentColor;
|
||||
border-inline-start: solid 2px currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .button--icon-back:before {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.shepherd-cancel-icon {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* CKE Dialogs.
|
||||
*/
|
||||
|
||||
select.cke_dialog_ui_input_select {
|
||||
-webkit-appearance: menulist;
|
||||
appearance: menulist;
|
||||
}
|
||||
|
||||
select.cke_dialog_ui_input_select::-ms-expand {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* @file
|
||||
* CKE Dialogs.
|
||||
*/
|
||||
|
||||
select.cke_dialog_ui_input_select {
|
||||
appearance: menulist;
|
||||
|
||||
&::-ms-expand {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,407 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Comment section and individual comments.
|
||||
*/
|
||||
|
||||
.comment--level-1 {
|
||||
border-top: 2px solid #e7edf1;
|
||||
}
|
||||
|
||||
.comment--level-1 ~ .comment--level-1 {
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
|
||||
.comments__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .comments__count {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .comments__count {
|
||||
margin-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .comments__count {
|
||||
margin-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .comments__count {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .comments__count {
|
||||
padding-left: 0.3125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .comments__count {
|
||||
padding-right: 0.3125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .comments__count {
|
||||
padding-right: 0.3125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .comments__count {
|
||||
padding-left: 0.3125rem;
|
||||
}
|
||||
|
||||
.comments__count {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 2.125rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5625rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
background-color: #0d77b5;
|
||||
font-size: 0.6875rem;
|
||||
line-height: 1.3125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .comments__count:after {
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .comments__count:after {
|
||||
right: 0.5rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .comments__count:after {
|
||||
border-right: 0.5rem solid transparent;
|
||||
}
|
||||
|
||||
[dir="rtl"] .comments__count:after {
|
||||
border-left: 0.5rem solid transparent;
|
||||
}
|
||||
|
||||
.comments__count:after {
|
||||
position: absolute;
|
||||
bottom: -0.4375rem;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-top: 0.4375rem solid #0d77b5;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .add-comment__form {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .add-comment__form {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .comment {
|
||||
padding-left: 3.375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .comment {
|
||||
padding-right: 3.375rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
position: relative;
|
||||
padding-top: 2.25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .comment {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .comment {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.comment__text-content {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.comment__text-content blockquote {
|
||||
font-size: 1.3125rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
/* Override for .field:not(:last-child) */
|
||||
|
||||
.comment__text-content:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.comment__links {
|
||||
margin-top: 1.125rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.comment__links-link {
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
.comment__links-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.add-comment__picture-wrapper {
|
||||
top: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .add-comment__picture,
|
||||
[dir="ltr"] .comment__picture {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .add-comment__picture,
|
||||
[dir="rtl"] .comment__picture {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.add-comment__picture,
|
||||
.comment__picture {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
border-radius: 50%;
|
||||
background-color: #e7edf1;
|
||||
}
|
||||
|
||||
.add-comment__picture *:not(img),
|
||||
.comment__picture *:not(img) {
|
||||
display: inherit;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.add-comment__picture img,
|
||||
.comment__picture img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
|
||||
/* @TODO: create image-style for profile's avatar to have image squared by default. */
|
||||
}
|
||||
|
||||
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
|
||||
.add-comment__picture img,
|
||||
.comment__picture img {
|
||||
position: absolute;
|
||||
/* stylelint-disable csstools/use-logical */
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/* stylelint-enable csstools/use-logical */
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .add-comment__picture,
|
||||
[dir="ltr"] .comment__picture {
|
||||
left: -5.625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .add-comment__picture,
|
||||
[dir="rtl"] .comment__picture {
|
||||
right: -5.625rem;
|
||||
}
|
||||
|
||||
.add-comment__picture,
|
||||
.comment__picture {
|
||||
width: 3.375rem;
|
||||
height: 3.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .indented .comment__picture {
|
||||
left: -4.5rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .indented .comment__picture {
|
||||
right: -4.5rem;
|
||||
}
|
||||
|
||||
.indented .comment__picture {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.comment__meta * {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
[dir="ltr"] .comment__author {
|
||||
margin-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .comment__author {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
|
||||
.comment__author {
|
||||
font-family: metropolis, sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
.comment__author a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.comment__time {
|
||||
margin: 0;
|
||||
color: #6e7172;
|
||||
font-family: metropolis, sans-serif;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .indented {
|
||||
margin-left: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .indented {
|
||||
margin-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
|
||||
left: -3.375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
|
||||
right: -3.375rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
|
||||
border-left: solid 1px #e7edf1;
|
||||
}
|
||||
|
||||
[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
|
||||
border-right: solid 1px #e7edf1;
|
||||
}
|
||||
|
||||
.indented > .comment:not(:last-of-type):not(.has-children):before {
|
||||
position: absolute;
|
||||
top: 2.25rem; /* Comment's padding-top */
|
||||
width: 0;
|
||||
height: 100%;
|
||||
content: "";
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
|
||||
left: -3.375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
|
||||
right: -3.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .indented {
|
||||
margin-left: 4.5rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .indented {
|
||||
margin-right: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] .show-hide-btn {
|
||||
margin-left: 3.375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .show-hide-btn {
|
||||
margin-right: 3.375rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .show-hide-btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .show-hide-btn {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .show-hide-btn {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .show-hide-btn {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .show-hide-btn {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .show-hide-btn {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.show-hide-btn {
|
||||
margin-top: 2.25rem;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
cursor: pointer;
|
||||
color: #313637;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.125rem;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.show-hide-btn[aria-expanded="true"]:after {
|
||||
content: "\0020 -";
|
||||
}
|
||||
|
||||
.show-hide-btn[aria-expanded="false"]:after {
|
||||
content: "\0020 +";
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .show-hide-btn {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .show-hide-btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
/**
|
||||
* @file
|
||||
* Comment section and individual comments.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
--comment-indentation: var(--sp2);
|
||||
--comment-indentation--md: var(--sp4);
|
||||
}
|
||||
|
||||
.comment--level-1 {
|
||||
border-block-start: 2px solid var(--color--gray-80);
|
||||
|
||||
& ~ .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--blue-20);
|
||||
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--blue-20);
|
||||
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-80);
|
||||
|
||||
& *: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--gray-20);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 14px;
|
||||
line-height: var(--sp);
|
||||
}
|
||||
|
||||
.indented {
|
||||
margin-inline-start: var(--comment-indentation);
|
||||
|
||||
& > .comment:not(:last-of-type):not(.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-80);
|
||||
|
||||
@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--gray-10);
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
appearance: none;
|
||||
|
||||
&[aria-expanded="true"]:after {
|
||||
content: "\0020 -";
|
||||
}
|
||||
|
||||
&[aria-expanded="false"]:after {
|
||||
content: "\0020 +";
|
||||
}
|
||||
|
||||
@media (--grid-md) {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Inline items.
|
||||
*/
|
||||
|
||||
.container-inline div,
|
||||
.container-inline label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-items-inline {
|
||||
margin-top: -0.125em;
|
||||
margin-bottom: -0.125em; /* 2px */
|
||||
}
|
||||
|
||||
.form-items-inline > .form-item {
|
||||
display: inline-block;
|
||||
margin-top: 0.125em;
|
||||
margin-bottom: 0.125em;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
* @file
|
||||
* Inline items.
|
||||
*/
|
||||
|
||||
.container-inline div,
|
||||
.container-inline label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-items-inline {
|
||||
margin-block: -0.125em; /* 2px */
|
||||
}
|
||||
|
||||
.form-items-inline > .form-item {
|
||||
display: inline-block;
|
||||
margin-block: 0.125em;
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styles for content moderation toolbar.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .entity-moderation-form {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .entity-moderation-form {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .entity-moderation-form {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .entity-moderation-form {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
.entity-moderation-form {
|
||||
flex-direction: column;
|
||||
border: 1px solid #e7edf1;
|
||||
background-color: #f7f9fa;
|
||||
}
|
||||
|
||||
.entity-moderation-form select,
|
||||
.entity-moderation-form input:not([type="submit"]) {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
.entity-moderation-form {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] .entity-moderation-form__item {
|
||||
margin-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .entity-moderation-form__item {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
|
||||
.entity-moderation-form__item {
|
||||
flex-basis: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .entity-moderation-form__item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .entity-moderation-form__item:last-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.entity-moderation-form__item:last-child {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
.entity-moderation-form__item:last-child {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] .layout--content-narrow .entity-moderation-form,
|
||||
[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,
|
||||
[dir="ltr"] .layout--content-medium .entity-moderation-form,
|
||||
[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout--content-narrow .entity-moderation-form,
|
||||
[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,
|
||||
[dir="rtl"] .layout--content-medium .entity-moderation-form,
|
||||
[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.layout--content-narrow .entity-moderation-form,
|
||||
.layout--pass--content-narrow > * .entity-moderation-form,
|
||||
.layout--content-medium .entity-moderation-form,
|
||||
.layout--pass--content-medium > * .entity-moderation-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@supports (width: max-content) {
|
||||
|
||||
.layout--content-narrow .entity-moderation-form,
|
||||
.layout--pass--content-narrow > * .entity-moderation-form,
|
||||
.layout--content-medium .entity-moderation-form,
|
||||
.layout--pass--content-medium > * .entity-moderation-form {
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .layout--content-narrow .entity-moderation-form,
|
||||
[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,
|
||||
[dir="ltr"] .layout--content-medium .entity-moderation-form,
|
||||
[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
|
||||
margin-left: -14.28571vw;
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout--content-narrow .entity-moderation-form,
|
||||
[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,
|
||||
[dir="rtl"] .layout--content-medium .entity-moderation-form,
|
||||
[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
|
||||
margin-right: -14.28571vw;
|
||||
}
|
||||
|
||||
.layout--content-narrow .entity-moderation-form,
|
||||
.layout--pass--content-narrow > * .entity-moderation-form,
|
||||
.layout--content-medium .entity-moderation-form,
|
||||
.layout--pass--content-medium > * .entity-moderation-form {
|
||||
width: calc(100vw - 2.25rem);
|
||||
margin-top: 2.25rem;
|
||||
margin-bottom: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
[dir="ltr"] .layout--content-narrow .entity-moderation-form,
|
||||
[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,
|
||||
[dir="ltr"] .layout--content-medium .entity-moderation-form,
|
||||
[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
|
||||
margin-left: calc(-7.14286vw - -0.06696rem);
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout--content-narrow .entity-moderation-form,
|
||||
[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,
|
||||
[dir="rtl"] .layout--content-medium .entity-moderation-form,
|
||||
[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
|
||||
margin-right: calc(-7.14286vw - -0.06696rem);
|
||||
}
|
||||
|
||||
.layout--content-narrow .entity-moderation-form,
|
||||
.layout--pass--content-narrow > * .entity-moderation-form,
|
||||
.layout--content-medium .entity-moderation-form,
|
||||
.layout--pass--content-medium > * .entity-moderation-form {
|
||||
width: calc(85.71429vw - 3.05357rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
[dir="ltr"] .layout--content-narrow .entity-moderation-form,
|
||||
[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,
|
||||
[dir="ltr"] .layout--content-medium .entity-moderation-form,
|
||||
[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
|
||||
margin-left: calc(-7.14286vw - -0.62946rem);
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout--content-narrow .entity-moderation-form,
|
||||
[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,
|
||||
[dir="rtl"] .layout--content-medium .entity-moderation-form,
|
||||
[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
|
||||
margin-right: calc(-7.14286vw - -0.62946rem);
|
||||
}
|
||||
|
||||
.layout--content-narrow .entity-moderation-form,
|
||||
.layout--pass--content-narrow > * .entity-moderation-form,
|
||||
.layout--content-medium .entity-moderation-form,
|
||||
.layout--pass--content-medium > * .entity-moderation-form {
|
||||
width: calc(85.71429vw - 9.80357rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 90rem) {
|
||||
|
||||
[dir="ltr"] .layout--content-narrow .entity-moderation-form,
|
||||
[dir="ltr"] .layout--pass--content-narrow > * .entity-moderation-form,
|
||||
[dir="ltr"] .layout--content-medium .entity-moderation-form,
|
||||
[dir="ltr"] .layout--pass--content-medium > * .entity-moderation-form {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout--content-narrow .entity-moderation-form,
|
||||
[dir="rtl"] .layout--pass--content-narrow > * .entity-moderation-form,
|
||||
[dir="rtl"] .layout--content-medium .entity-moderation-form,
|
||||
[dir="rtl"] .layout--pass--content-medium > * .entity-moderation-form {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.layout--content-narrow .entity-moderation-form,
|
||||
.layout--pass--content-narrow > * .entity-moderation-form,
|
||||
.layout--content-medium .entity-moderation-form,
|
||||
.layout--pass--content-medium > * .entity-moderation-form {
|
||||
width: 60.91071rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for content moderation toolbar.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.entity-moderation-form {
|
||||
flex-direction: column;
|
||||
padding-inline-start: var(--sp);
|
||||
padding-inline-end: var(--sp);
|
||||
border: 1px solid var(--color--gray-80);
|
||||
background-color: var(--color--gray-95);
|
||||
|
||||
& 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(14 * var(--grid-col-width--md) + 13 * var(--grid-gap--md));
|
||||
margin-block: var(--sp2) var(--sp4);
|
||||
margin-inline-start: calc(-2 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
|
||||
}
|
||||
|
||||
@media (--lg) {
|
||||
width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg));
|
||||
margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
|
||||
}
|
||||
|
||||
@media (--nav) {
|
||||
width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav));
|
||||
margin-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
|
||||
}
|
||||
|
||||
@media (--grid-max) {
|
||||
width: calc(10 * var(--grid-col-width--max) + 11 * var(--grid-gap--max));
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,254 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Collapsible details.
|
||||
*/
|
||||
|
||||
.olivero-details {
|
||||
display: block;
|
||||
margin-top: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
color: inherit;
|
||||
border: 1px solid #e7edf1;
|
||||
border-radius: 0.1875rem;
|
||||
box-shadow: 0 1px 4px #d7e1e8;
|
||||
}
|
||||
|
||||
/* Details summary styles */
|
||||
|
||||
[dir="ltr"] .olivero-details__summary {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .olivero-details__summary {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .olivero-details__summary {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .olivero-details__summary {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
.olivero-details__summary {
|
||||
position: relative;
|
||||
padding-top: 1.125rem;
|
||||
padding-bottom: 1.125rem;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.12s ease-in-out;
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
color: inherit;
|
||||
background-color: #f7f9fa;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
/* Arrow icon */
|
||||
|
||||
[dir="ltr"] .olivero-details__summary:before,
|
||||
[dir="ltr"] .collapse-processed > .olivero-details__summary .details-title:before {
|
||||
left: 0.84375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .olivero-details__summary:before,
|
||||
[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title:before {
|
||||
right: 0.84375rem;
|
||||
}
|
||||
|
||||
.olivero-details__summary:before,
|
||||
.collapse-processed > .olivero-details__summary .details-title:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: block;
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
content: "";
|
||||
transform: translateY(-50%) rotate(45deg); /* LTR */
|
||||
border-top: solid 2px currentColor;
|
||||
border-right: solid 2px currentColor;
|
||||
}
|
||||
|
||||
[dir="rtl"] .olivero-details__summary:before,
|
||||
[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title:before {
|
||||
transform: translateY(-50%) rotate(-135deg);
|
||||
}
|
||||
|
||||
/* Pseudo-selector to manage focus styles */
|
||||
|
||||
.olivero-details__summary:after,
|
||||
.collapse-processed > .olivero-details__summary .details-title:after {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
border-radius: 0.1875rem;
|
||||
box-shadow: inset 0 0 0 2px #53b0eb;
|
||||
}
|
||||
|
||||
/* Hide the marker */
|
||||
|
||||
.olivero-details__summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Disable default outline for summary, since we have own implementation */
|
||||
|
||||
.olivero-details__summary:focus {
|
||||
outline: solid 2px transparent;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
/* Details summary, hover state */
|
||||
|
||||
.olivero-details__summary:hover {
|
||||
background-color: #e7edf1;
|
||||
}
|
||||
|
||||
/* Details summary, focus and active states */
|
||||
|
||||
.olivero-details__summary:focus:after,
|
||||
.olivero-details__summary:active:after,
|
||||
.collapse-processed > .olivero-details__summary .details-title:focus:after,
|
||||
.collapse-processed > .olivero-details__summary .details-title:active:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Rotate arrow icon of the details summary, when details expanded */
|
||||
|
||||
.olivero-details[open] > .olivero-details__summary::before,
|
||||
.collapse-processed[open] > .olivero-details__summary .details-title::before {
|
||||
margin-top: -2px;
|
||||
transform: translateY(-50%) rotate(135deg);
|
||||
}
|
||||
|
||||
/* Collapse processed for non-supporting browsers like IE or Edge */
|
||||
|
||||
[dir="ltr"] .collapse-processed > .olivero-details__summary {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .collapse-processed > .olivero-details__summary {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .collapse-processed > .olivero-details__summary {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .collapse-processed > .olivero-details__summary {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.collapse-processed > .olivero-details__summary {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.collapse-processed > .olivero-details__summary:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.collapse-processed > .olivero-details__summary:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
[dir="ltr"] .collapse-processed > .olivero-details__summary .details-title {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .collapse-processed > .olivero-details__summary .details-title {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .collapse-processed > .olivero-details__summary .details-title {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
.collapse-processed > .olivero-details__summary .details-title {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-top: 1.125rem;
|
||||
padding-bottom: 1.125rem;
|
||||
transition: background-color 0.12s ease-in-out;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
background-color: #f7f9fa;
|
||||
}
|
||||
|
||||
.collapse-processed > .olivero-details__summary .details-title:focus {
|
||||
outline: solid 2px transparent;
|
||||
}
|
||||
|
||||
.collapse-processed > .olivero-details__summary .details-title:hover {
|
||||
background-color: #e7edf1;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.collapse-processed > .olivero-details__summary .details-title::after {
|
||||
top: -0.3125rem;
|
||||
right: -0.3125rem;
|
||||
bottom: -0.3125rem;
|
||||
left: -0.3125rem;
|
||||
border: 2px dotted;
|
||||
}
|
||||
}
|
||||
|
||||
/* Details content wrapper */
|
||||
|
||||
.olivero-details__wrapper {
|
||||
margin: 1.125rem;
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
[dir="ltr"] .olivero-details__wrapper {
|
||||
margin-left: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .olivero-details__wrapper {
|
||||
margin-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .olivero-details__wrapper {
|
||||
margin-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .olivero-details__wrapper {
|
||||
margin-left: 2.25rem;
|
||||
}
|
||||
|
||||
.olivero-details__wrapper {
|
||||
margin-top: 1.6875rem;
|
||||
margin-bottom: 1.6875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Description */
|
||||
|
||||
.olivero-details__description {
|
||||
margin-bottom: 1.125rem;
|
||||
color: #313637;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
/**
|
||||
* @file
|
||||
* Collapsible details.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
--details-border-width: 1px;
|
||||
--details-summary-transition: background-color 0.12s ease-in-out;
|
||||
}
|
||||
|
||||
.olivero-details {
|
||||
display: block;
|
||||
margin-block: var(--sp1);
|
||||
color: inherit;
|
||||
border: var(--details-border-width) solid var(--color--gray-80);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 1px 4px var(--color--gray-70);
|
||||
}
|
||||
|
||||
/* Details summary styles */
|
||||
.olivero-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-95);
|
||||
font-size: var(--line-height-s);
|
||||
font-weight: 700;
|
||||
line-height: var(--sp1);
|
||||
}
|
||||
|
||||
/* Arrow icon */
|
||||
.olivero-details__summary:before,
|
||||
.collapse-processed > .olivero-details__summary .details-title: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"] {
|
||||
& .olivero-details__summary:before,
|
||||
& .collapse-processed > .olivero-details__summary .details-title:before {
|
||||
transform: translateY(-50%) rotate(-135deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Pseudo-selector to manage focus styles */
|
||||
.olivero-details__summary:after,
|
||||
.collapse-processed > .olivero-details__summary .details-title: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--blue-70);
|
||||
}
|
||||
|
||||
/* Hide the marker */
|
||||
.olivero-details__summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Disable default outline for summary, since we have own implementation */
|
||||
.olivero-details__summary:focus {
|
||||
outline: solid 2px transparent;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
/* Details summary, hover state */
|
||||
.olivero-details__summary:hover {
|
||||
background-color: var(--color--gray-80);
|
||||
}
|
||||
|
||||
/* Details summary, focus and active states */
|
||||
.olivero-details__summary:focus:after,
|
||||
.olivero-details__summary:active:after,
|
||||
.collapse-processed > .olivero-details__summary .details-title:focus:after,
|
||||
.collapse-processed > .olivero-details__summary .details-title:active:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Rotate arrow icon of the details summary, when details expanded */
|
||||
.olivero-details[open] > .olivero-details__summary::before,
|
||||
.collapse-processed[open] > .olivero-details__summary .details-title::before {
|
||||
margin-block-start: -2px;
|
||||
transform: translateY(-50%) rotate(135deg);
|
||||
}
|
||||
|
||||
/* Collapse processed for non-supporting browsers like IE or Edge */
|
||||
.collapse-processed > .olivero-details__summary {
|
||||
padding-block: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-processed > .olivero-details__summary .details-title {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-block: var(--sp1);
|
||||
padding-inline-start: var(--sp2);
|
||||
padding-inline-end: var(--sp1);
|
||||
transition: var(--details-summary-transition);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
background-color: var(--color--gray-95);
|
||||
}
|
||||
|
||||
.collapse-processed > .olivero-details__summary .details-title:focus {
|
||||
outline: solid 2px transparent;
|
||||
}
|
||||
|
||||
.collapse-processed > .olivero-details__summary .details-title:hover {
|
||||
background-color: var(--color--gray-80);
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
.collapse-processed > .olivero-details__summary .details-title::after {
|
||||
inset: -5px;
|
||||
border: 2px dotted;
|
||||
}
|
||||
}
|
||||
|
||||
/* Details content wrapper */
|
||||
.olivero-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 */
|
||||
.olivero-details__description {
|
||||
margin-block-end: var(--sp1);
|
||||
color: var(--color--gray-10);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: var(--line-height-s);
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Dropbutton styles.
|
||||
*/
|
||||
|
||||
.dropbutton-wrapper.open {
|
||||
position: relative;
|
||||
z-index: 100; /* Ensure this appears above all other dropbuttons. */
|
||||
filter: drop-shadow(0 2px 2px #e3e3e5);
|
||||
}
|
||||
|
||||
[dir="ltr"] .dropbutton-widget {
|
||||
padding-right: 1.6875rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-widget {
|
||||
padding-left: 1.6875rem;
|
||||
}
|
||||
|
||||
.dropbutton-widget {
|
||||
position: relative;
|
||||
width: 12.5rem;
|
||||
height: 1.6875rem;
|
||||
border-radius: 0.1875rem;
|
||||
}
|
||||
|
||||
@supports (width: max-content) {
|
||||
|
||||
.dropbutton-widget {
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] .dropbutton-single .dropbutton-widget {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-single .dropbutton-widget {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .dropbutton {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .dropbutton {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.dropbutton {
|
||||
height: 1.6875rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .dropbutton-toggle button {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-toggle button {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dropbutton-toggle button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.6875rem;
|
||||
height: 1.6875rem;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-color: transparent;
|
||||
border-radius: 0 0.1875rem 0.1875rem 0; /* LTR */
|
||||
background: #e3e3e5;
|
||||
}
|
||||
|
||||
.dropbutton-toggle button:focus {
|
||||
outline: solid 2px #0d77b5;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.dropbutton-toggle button:before {
|
||||
display: block;
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
content: "";
|
||||
transform: translateY(-25%) rotate(45deg);
|
||||
border-right: solid 2px #0d77b5;
|
||||
border-bottom: solid 2px #0d77b5;
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-toggle button {
|
||||
border-radius: 0.1875rem 0 0 0.1875rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .dropbutton-action:first-child {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-action:first-child {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.dropbutton-action:first-child {
|
||||
border: solid 1px transparent;
|
||||
border-radius: 0.1875rem 0 0 0.1875rem; /* LTR */
|
||||
background: #e3e3e5;
|
||||
}
|
||||
|
||||
.dropbutton-action a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: -2px; /* Account for borders. */
|
||||
padding: 0 0.5625rem;
|
||||
text-decoration: none;
|
||||
color: #313637;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dropbutton-action a:focus {
|
||||
border: solid 2px #0d77b5;
|
||||
outline: 0;
|
||||
|
||||
/* Negate specific IE rules. */
|
||||
}
|
||||
|
||||
@supports (outline-offset: -2px) {
|
||||
|
||||
.dropbutton-action a:focus {
|
||||
border: 0;
|
||||
outline: solid 2px #0d77b5;
|
||||
outline-offset: -1px; /* Overlap parent container by 1px. */
|
||||
}
|
||||
}
|
||||
|
||||
.dropbutton-single .dropbutton-action:first-child {
|
||||
border-right: solid 1px transparent; /* LTR */
|
||||
border-radius: 0.1875rem;
|
||||
}
|
||||
|
||||
.dropbutton-single .dropbutton-action a {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-action:first-child {
|
||||
border: solid 1px transparent;
|
||||
border-radius: 0 0.1875rem 0.1875rem 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-single .dropbutton-action:first-child {
|
||||
border: solid 1px transparent;
|
||||
}
|
||||
|
||||
.secondary-action {
|
||||
visibility: hidden;
|
||||
width: calc(100% + 1.6875rem);
|
||||
border-right: 1px solid #e3e3e5;
|
||||
border-left: 1px solid #e3e3e5;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.secondary-action:last-child {
|
||||
border-bottom: 1px solid #e3e3e5;
|
||||
}
|
||||
|
||||
.dropbutton-wrapper.open .dropbutton-toggle button:before {
|
||||
transform: translateY(25%) rotate(225deg);
|
||||
}
|
||||
|
||||
.dropbutton-wrapper.open .dropbutton-widget {
|
||||
border-radius: 0.1875rem 0.1875rem 0 0;
|
||||
}
|
||||
|
||||
.dropbutton-wrapper.open .secondary-action {
|
||||
visibility: visible;
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
/**
|
||||
* @file
|
||||
* Dropbutton styles.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
--dropbutton--height: var(--sp1-5);
|
||||
--dropbutton--bg-color: var(--color--gray-75);
|
||||
--dropbutton--border-color: var(--color--blue-20);
|
||||
}
|
||||
|
||||
.dropbutton-wrapper.open {
|
||||
position: relative;
|
||||
z-index: 100; /* Ensure this appears above all other dropbuttons. */
|
||||
filter: drop-shadow(0 2px 2px var(--dropbutton--bg-color));
|
||||
}
|
||||
|
||||
.dropbutton-widget {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: var(--dropbutton--height);
|
||||
padding-inline-end: var(--dropbutton--height);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
@supports (width: max-content) {
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
.dropbutton-single .dropbutton-widget {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
.dropbutton {
|
||||
height: var(--dropbutton--height);
|
||||
margin-block: 0;
|
||||
margin-inline-start: 0;
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
.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--bg-color);
|
||||
|
||||
&:focus {
|
||||
outline: solid 2px var(--dropbutton--border-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--border-color);
|
||||
border-bottom: solid 2px var(--dropbutton--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .dropbutton-toggle button {
|
||||
border-radius: var(--border-radius) 0 0 var(--border-radius);
|
||||
}
|
||||
|
||||
.dropbutton-action {
|
||||
&:first-child {
|
||||
margin-inline-end: 2px;
|
||||
border: solid 1px transparent;
|
||||
border-radius: var(--border-radius) 0 0 var(--border-radius); /* LTR */
|
||||
background: var(--dropbutton--bg-color);
|
||||
}
|
||||
|
||||
& a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: -2px; /* Account for borders. */
|
||||
padding: 0 9px;
|
||||
text-decoration: none;
|
||||
color: var(--color--gray-10);
|
||||
font-weight: 600;
|
||||
|
||||
&:focus {
|
||||
border: solid 2px var(--dropbutton--border-color);
|
||||
outline: 0;
|
||||
|
||||
/* Negate specific IE rules. */
|
||||
@supports (outline-offset: -2px) {
|
||||
border: 0;
|
||||
outline: solid 2px var(--dropbutton--border-color);
|
||||
outline-offset: -1px; /* Overlap parent container by 1px. */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropbutton-single .dropbutton-action {
|
||||
&:first-child {
|
||||
border-right: solid 1px transparent; /* LTR */
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
& a {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
& .dropbutton-action:first-child {
|
||||
border: solid 1px transparent;
|
||||
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
||||
}
|
||||
|
||||
& .dropbutton-single .dropbutton-action:first-child {
|
||||
border: solid 1px transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-action {
|
||||
visibility: hidden;
|
||||
width: calc(100% + var(--dropbutton--height));
|
||||
border-right: 1px solid var(--dropbutton--bg-color);
|
||||
border-left: 1px solid var(--dropbutton--bg-color);
|
||||
background: var(--color--white);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 1px solid var(--dropbutton--bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.dropbutton-wrapper.open {
|
||||
& .dropbutton-toggle button:before {
|
||||
transform: translateY(25%) rotate(225deg);
|
||||
}
|
||||
|
||||
& .dropbutton-widget {
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
|
||||
& .secondary-action {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,298 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Embedded Media.
|
||||
*/
|
||||
|
||||
figure {
|
||||
background: #f7f9fa;
|
||||
}
|
||||
|
||||
[dir="ltr"] figcaption {
|
||||
padding-left: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] figcaption {
|
||||
padding-right: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] figcaption {
|
||||
padding-right: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] figcaption {
|
||||
padding-left: 0.5625rem;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
padding-top: 0.5625rem;
|
||||
padding-bottom: 0.5625rem;
|
||||
color: #313637;
|
||||
background: #f7f9fa;
|
||||
font-family: Lora, georgia, serif;
|
||||
font-size: 0.875rem;
|
||||
font-style: italic;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
[dir="ltr"] figcaption {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] figcaption {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] figcaption {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] figcaption {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
padding-top: 1.125rem;
|
||||
padding-bottom: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] .align-right {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .align-right {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .align-right {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .align-right {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
float: none; /* Override core's align.module.css. */
|
||||
max-width: 100%;
|
||||
margin-top: 3.375rem;
|
||||
margin-bottom: 3.375rem;
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .align-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
[dir="rtl"] .align-right {
|
||||
float: left;
|
||||
}
|
||||
|
||||
[dir="ltr"] .align-right {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .align-right {
|
||||
margin-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .align-right {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .align-right {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
max-width: 50%;
|
||||
margin-top: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pull out of grid if nested in content narrow layout. */
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .layout--content-narrow .align-right,
|
||||
[dir="ltr"] .layout--pass--content-narrow > * .align-right {
|
||||
margin-right: -7.14286vw;
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout--content-narrow .align-right,
|
||||
[dir="rtl"] .layout--pass--content-narrow > * .align-right {
|
||||
margin-left: -7.14286vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
[dir="ltr"] .layout--content-narrow .align-right,
|
||||
[dir="ltr"] .layout--pass--content-narrow > * .align-right {
|
||||
margin-right: calc(-14.28571vw - -0.13393rem);
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout--content-narrow .align-right,
|
||||
[dir="rtl"] .layout--pass--content-narrow > * .align-right {
|
||||
margin-left: calc(-14.28571vw - -0.13393rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
[dir="ltr"] .layout--content-narrow .align-right,
|
||||
[dir="ltr"] .layout--pass--content-narrow > * .align-right {
|
||||
margin-right: calc(-21.42857vw - -1.88839rem);
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout--content-narrow .align-right,
|
||||
[dir="rtl"] .layout--pass--content-narrow > * .align-right {
|
||||
margin-left: calc(-21.42857vw - -1.88839rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 90rem) {
|
||||
|
||||
[dir="ltr"] .layout--content-narrow .align-right,
|
||||
[dir="ltr"] .layout--pass--content-narrow > * .align-right {
|
||||
margin-right: -17.59821rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout--content-narrow .align-right,
|
||||
[dir="rtl"] .layout--pass--content-narrow > * .align-right {
|
||||
margin-left: -17.59821rem;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] .align-left {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .align-left {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .align-left {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .align-left {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
float: none; /* Override core's align.module.css. */
|
||||
max-width: 100%;
|
||||
margin-top: 3.375rem;
|
||||
margin-bottom: 3.375rem;
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .align-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
[dir="rtl"] .align-left {
|
||||
float: right;
|
||||
}
|
||||
|
||||
[dir="ltr"] .align-left {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .align-left {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .align-left {
|
||||
margin-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .align-left {
|
||||
margin-left: 2.25rem;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
max-width: 50%;
|
||||
margin-top: 1.125rem;
|
||||
margin-bottom: 1.125rem; /* Extra right margins in case of aligning next to lists. */
|
||||
}
|
||||
}
|
||||
|
||||
/* Pull out of grid if nested in content narrow layout. */
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .layout--content-narrow .align-left,
|
||||
[dir="ltr"] .layout--pass--content-narrow > * .align-left {
|
||||
margin-left: -7.14286vw;
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout--content-narrow .align-left,
|
||||
[dir="rtl"] .layout--pass--content-narrow > * .align-left {
|
||||
margin-right: -7.14286vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
[dir="ltr"] .layout--content-narrow .align-left,
|
||||
[dir="ltr"] .layout--pass--content-narrow > * .align-left {
|
||||
margin-left: calc(-7.14286vw - -0.06696rem);
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout--content-narrow .align-left,
|
||||
[dir="rtl"] .layout--pass--content-narrow > * .align-left {
|
||||
margin-right: calc(-7.14286vw - -0.06696rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
[dir="ltr"] .layout--content-narrow .align-left,
|
||||
[dir="ltr"] .layout--pass--content-narrow > * .align-left {
|
||||
margin-left: calc(-7.14286vw - -0.62946rem);
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout--content-narrow .align-left,
|
||||
[dir="rtl"] .layout--pass--content-narrow > * .align-left {
|
||||
margin-right: calc(-7.14286vw - -0.62946rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 90rem) {
|
||||
|
||||
[dir="ltr"] .layout--content-narrow .align-left,
|
||||
[dir="ltr"] .layout--pass--content-narrow > * .align-left {
|
||||
margin-left: -5.86607rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .layout--content-narrow .align-left,
|
||||
[dir="rtl"] .layout--pass--content-narrow > * .align-left {
|
||||
margin-right: -5.86607rem;
|
||||
}
|
||||
}
|
||||
|
||||
.align-center img,
|
||||
.align-center video,
|
||||
.align-center audio {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.media-oembed-content {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
/**
|
||||
* @file
|
||||
* Embedded Media.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
figure {
|
||||
background: var(--color--gray-95);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
padding-block: var(--sp0-5);
|
||||
padding-inline-start: var(--sp0-5);
|
||||
padding-inline-end: var(--sp0-5);
|
||||
color: var(--color--gray-10);
|
||||
background: var(--color--gray-95);
|
||||
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: inline-end;
|
||||
max-width: 50%;
|
||||
margin-block-start: var(--sp);
|
||||
margin-block-end: var(--sp);
|
||||
margin-inline-start: var(--sp);
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pull out of grid if nested in content narrow layout. */
|
||||
.layout--content-narrow .align-right,
|
||||
.layout--pass--content-narrow > * .align-right {
|
||||
@media (--grid-md) {
|
||||
margin-inline-end: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
|
||||
}
|
||||
|
||||
@media (--lg) {
|
||||
margin-inline-end: calc(-2 * ((var(--grid-col-width--lg) + var(--grid-gap--lg))));
|
||||
}
|
||||
|
||||
@media (--nav) {
|
||||
margin-inline-end: calc(-3 * ((var(--grid-col-width--nav) + var(--grid-gap--nav))));
|
||||
}
|
||||
|
||||
@media (--grid-max) {
|
||||
margin-inline-end: calc(-3 * ((var(--grid-col-width--max) + var(--grid-gap--max))));
|
||||
}
|
||||
}
|
||||
|
||||
.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: inline-start;
|
||||
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. */
|
||||
}
|
||||
}
|
||||
|
||||
/* 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--md) + var(--grid-gap--md))));
|
||||
}
|
||||
|
||||
@media (--lg) {
|
||||
margin-inline-start: calc(-1 * ((var(--grid-col-width--lg) + var(--grid-gap--lg))));
|
||||
}
|
||||
|
||||
@media (--nav) {
|
||||
margin-inline-start: calc(-1 * ((var(--grid-col-width--nav) + var(--grid-gap--nav))));
|
||||
}
|
||||
|
||||
@media (--grid-max) {
|
||||
margin-inline-start: calc(-1 * ((var(--grid-col-width--max) + var(--grid-gap--max))));
|
||||
}
|
||||
}
|
||||
|
||||
.align-center img,
|
||||
.align-center video,
|
||||
.align-center audio {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.media-oembed-content {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* RSS feed.
|
||||
*/
|
||||
|
||||
.feed-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #5d7585;
|
||||
}
|
||||
|
||||
.feed-icon:hover {
|
||||
color: #2494db;
|
||||
}
|
||||
|
||||
.feed-icon__label {
|
||||
flex-shrink: 0;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[dir="ltr"] .feed-icon__icon {
|
||||
margin-left: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .feed-icon__icon {
|
||||
margin-right: 0.5625rem;
|
||||
}
|
||||
|
||||
.feed-icon__icon {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.6875rem;
|
||||
height: 1.6875rem;
|
||||
color: #fff;
|
||||
background-color: #2494db;
|
||||
}
|
||||
|
||||
.feed-icon__icon svg {
|
||||
vertical-align: top;
|
||||
fill: currentColor;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* @file
|
||||
* RSS feed.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.feed-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: var(--color--gray-25);
|
||||
|
||||
&:hover {
|
||||
color: var(--color--blue-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--blue-50);
|
||||
|
||||
& svg {
|
||||
vertical-align: top;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for fields.
|
||||
*/
|
||||
|
||||
.field:not(:last-child) {
|
||||
margin-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.node--view-mode-teaser .field {
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.node--view-mode-teaser .field:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
.node--view-mode-teaser .field {
|
||||
margin-bottom: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.field__label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
[dir="ltr"] .field--label-inline .field__label,
|
||||
[dir="ltr"] .field--label-inline .field__items {
|
||||
float: left;
|
||||
}
|
||||
|
||||
[dir="rtl"] .field--label-inline .field__label,
|
||||
[dir="rtl"] .field--label-inline .field__items {
|
||||
float: right;
|
||||
}
|
||||
|
||||
[dir="ltr"] .field--label-inline .field__label,
|
||||
[dir="ltr"] .field--label-inline > .field__item,
|
||||
[dir="ltr"] .field--label-inline .field__items {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
[dir="rtl"] .field--label-inline .field__label,
|
||||
[dir="rtl"] .field--label-inline > .field__item,
|
||||
[dir="rtl"] .field--label-inline .field__items {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
.field--label-inline .field__label::after {
|
||||
content: ":";
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styles for fields.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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: inline-start;
|
||||
}
|
||||
|
||||
.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: ":";
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Fieldset.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .fieldset {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .fieldset {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .fieldset {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .fieldset {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.fieldset {
|
||||
min-width: 0;
|
||||
margin-top: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
color: inherit;
|
||||
border: solid 2px #5d7585;
|
||||
border-radius: 0.1875rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.fieldset--group {
|
||||
width: 100%;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
|
||||
_:-ms-fullscreen,
|
||||
.fieldset {
|
||||
display: table;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fieldset__legend {
|
||||
float: left; /* Prevent sticking out of top of fieldset. */
|
||||
width: 100%;
|
||||
color: inherit;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
background-color: #5d7585;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.6875rem;
|
||||
}
|
||||
|
||||
.fieldset__legend + * {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.fieldset__legend .fieldset__label.form-required:after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.fieldset__legend--composite {
|
||||
margin-top: 2px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.fieldset__legend--invisible {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fieldset__legend--group {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
[dir="ltr"] .fieldset__label {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset__label {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .fieldset__label {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset__label {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
.fieldset__label {
|
||||
display: block;
|
||||
padding-top: 0.5625rem;
|
||||
padding-bottom: 0.5625rem;
|
||||
color: #fff;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
.fieldset__label.is-disabled {
|
||||
color: #5d7585;
|
||||
}
|
||||
|
||||
.fieldset__description {
|
||||
margin-top: 0.5625rem;
|
||||
margin-bottom: 0.5625rem;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
.fieldset__description.is-disabled {
|
||||
color: var(--input--disabled-fg-color);
|
||||
}
|
||||
|
||||
[dir="ltr"] .fieldset__error-message {
|
||||
padding-left: 1.6875rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset__error-message {
|
||||
padding-right: 1.6875rem;
|
||||
}
|
||||
|
||||
.fieldset__error-message {
|
||||
margin-top: 0.5625rem;
|
||||
margin-bottom: 0.5625rem;
|
||||
color: #e33f1e;
|
||||
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: 1.125rem 1.125rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
|
||||
.fieldset__error-message {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset__error-message {
|
||||
background-position: left top;
|
||||
}
|
||||
|
||||
.fieldset__wrapper {
|
||||
padding: 1.125rem;
|
||||
}
|
||||
|
||||
.fieldset__legend--invisible ~ .fieldset__wrapper {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
|
||||
border: solid 2px #5d7585;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
[dir="ltr"] .fieldset__wrapper--group {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset__wrapper--group {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .fieldset__wrapper--group {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset__wrapper--group {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.fieldset__wrapper--group {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .fieldset__wrapper > .container-inline {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset__wrapper > .container-inline {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .fieldset__wrapper > .container-inline {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .fieldset__wrapper > .container-inline {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.fieldset__wrapper > .container-inline {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
/**
|
||||
* @file
|
||||
* Fieldset.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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-25);
|
||||
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;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-type-no-unknown */
|
||||
_:-ms-fullscreen,
|
||||
.fieldset {
|
||||
display: table;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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-25);
|
||||
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--gray-25);
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding: var(--sp);
|
||||
}
|
||||
|
||||
.fieldset__legend--invisible ~ .fieldset__wrapper {
|
||||
margin-block-start: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
|
||||
border: solid 2px var(--color--gray-25);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.fieldset__wrapper--group {
|
||||
margin-block: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
||||
.fieldset__wrapper > .container-inline {
|
||||
padding-block: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Footer regions.
|
||||
*/
|
||||
|
||||
.site-footer {
|
||||
position: relative; /* stack above left social bar */
|
||||
color: #9ea0a1;
|
||||
background: linear-gradient(180deg, #0c0d0e 0%, #171e23 100%);
|
||||
}
|
||||
|
||||
[dir="ltr"] .site-footer .menu {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .site-footer .menu {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.site-footer .menu {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
[dir="ltr"] .site-footer .menu ul {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .site-footer .menu ul {
|
||||
margin-right: 1.125rem;
|
||||
}
|
||||
|
||||
.site-footer .menu li {
|
||||
margin-bottom: 0.5625rem;
|
||||
}
|
||||
|
||||
.site-footer a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.site-footer a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .site-footer {
|
||||
border-left: solid 5.625rem #000;
|
||||
}
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .site-footer {
|
||||
border-right: solid 5.625rem #000;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
/**
|
||||
* @file
|
||||
* Footer regions.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.site-footer {
|
||||
position: relative; /* stack above left social bar */
|
||||
color: var(--color--gray-50);
|
||||
background: linear-gradient(180deg, var(--color--gray-5) 0%, var(--color--gray-8) 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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Checkbox and radio input elements.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline-block;
|
||||
width: 1.6875rem;
|
||||
height: 1.6875rem;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #7e96a7;
|
||||
border-radius: 0.1875rem;
|
||||
background-color: #fff;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: 1.125rem 1.125rem;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus,
|
||||
input[type="radio"]:focus {
|
||||
border: solid 2px #2494db;
|
||||
outline: solid 2px #2494db;
|
||||
}
|
||||
|
||||
@supports (outline-style: double) {
|
||||
|
||||
input[type="checkbox"]:focus,
|
||||
input[type="radio"]:focus {
|
||||
border-width: 1px;
|
||||
outline-width: 6px;
|
||||
outline-style: double;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover,
|
||||
input[type="radio"]:hover {
|
||||
border-color: #53b0eb;
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled],
|
||||
input[type="radio"][disabled] {
|
||||
background-color: #f1f4f7;
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]:hover,
|
||||
input[type="radio"][disabled]:hover {
|
||||
border-color: #7e96a7;
|
||||
}
|
||||
|
||||
input[type="checkbox"][disabled]:checked,
|
||||
input[type="radio"][disabled]:checked {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked,
|
||||
input[type="radio"]:checked {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
input.error[type="checkbox"],
|
||||
input.error[type="radio"] {
|
||||
border: solid 2px #e33f1e;
|
||||
}
|
||||
|
||||
input.error[type="checkbox"]:focus,
|
||||
input.error[type="radio"]:focus {
|
||||
outline-color: #e33f1e;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* Specific pseudo-element to apply red borders for IE11 bool elements in case of error */
|
||||
|
||||
input.error[type="checkbox"]::-ms-check,
|
||||
input.error[type="radio"]::-ms-check {
|
||||
border: 1px solid #e33f1e;
|
||||
}
|
||||
|
||||
[dir="ltr"] input[type="checkbox"] + label,
|
||||
[dir="ltr"] input[type="radio"] + label {
|
||||
padding-left: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] input[type="checkbox"] + label,
|
||||
[dir="rtl"] input[type="radio"] + label {
|
||||
padding-right: 0.5625rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label,
|
||||
input[type="radio"] + label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17px' height='13px' viewBox='0 0 17 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M14.8232,0.176777 C14.9209,0.0791457 15.0791,0.0791455 15.1768,0.176777 L16.9445,1.94454 C17.0422,2.04217 17.0422,2.20047 16.9445,2.2981 L6.23744,13.0052 C6.13981,13.1028 5.98151,13.1028 5.88388,13.0052 L0.176777,7.2981 C0.0791456,7.20047 0.0791456,7.04218 0.176777,6.94454 L1.94454,5.17678 C2.04217,5.07915 2.20047,5.07915 2.2981,5.17678 L5.88388,8.76256 C5.98151,8.86019 6.13981,8.86019 6.23744,8.76256 L14.8232,0.176777 Z' id='Path' fill='%232494DB' fill-rule='nonzero'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input[type="radio"]:checked {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%232494DB'/%3E%3C/svg%3E%0A");
|
||||
background-size: 1.0625rem;
|
||||
}
|
||||
|
||||
input[type="radio"]:focus {
|
||||
border-width: 2px;
|
||||
border-color: #2494db;
|
||||
outline-color: transparent;
|
||||
box-shadow: 0 0 0 2px white, 0 0 0 4px #2494db;
|
||||
}
|
||||
|
||||
input.error[type="radio"]:focus {
|
||||
outline-color: transparent;
|
||||
box-shadow: 0 0 0 2px white, 0 0 0 4px #e33f1e;
|
||||
}
|
||||
|
||||
.form-type-boolean {
|
||||
margin-top: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
/**
|
||||
* @file
|
||||
* Checkbox and radio input elements.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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-30);
|
||||
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--blue-50);
|
||||
outline: solid 2px var(--color--blue-50);
|
||||
|
||||
@supports (outline-style: double) {
|
||||
border-width: 1px;
|
||||
outline-width: 6px;
|
||||
outline-style: double;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color--blue-70);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background-color: var(--color--gray-90);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color--gray-30);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border: solid 2px var(--color--red);
|
||||
|
||||
&:focus {
|
||||
outline-color: var(--color--red);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Specific pseudo-element to apply red borders for IE11 bool elements in case of error */
|
||||
&.error::-ms-check {
|
||||
border: 1px solid var(--color--red);
|
||||
}
|
||||
|
||||
& + 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--blue-50);
|
||||
outline-color: transparent;
|
||||
box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--blue-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);
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Select input elements.
|
||||
*/
|
||||
|
||||
[dir="ltr"] select {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] select {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] select {
|
||||
padding-right: 3.375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] select {
|
||||
padding-left: 3.375rem;
|
||||
}
|
||||
|
||||
select {
|
||||
max-width: 100%;
|
||||
height: 3.375rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
color: #0d1214;
|
||||
border: 1px solid #7e96a7;
|
||||
border-radius: 0.1875rem;
|
||||
background-color: #fff;
|
||||
background-image: url("../../images/chevron-down.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 18px center; /* LTR */
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select:focus {
|
||||
border: solid 2px #2494db;
|
||||
outline: solid 2px #2494db;
|
||||
}
|
||||
|
||||
@supports (outline-style: double) {
|
||||
|
||||
select:focus {
|
||||
border-width: 1px;
|
||||
outline-width: 6px;
|
||||
outline-style: double;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hides default chevron within Internet Explorer. */
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
select[disabled] {
|
||||
color: #7e96a7;
|
||||
background-color: #f1f4f7;
|
||||
}
|
||||
|
||||
select.error {
|
||||
border: solid 2px #e33f1e;
|
||||
}
|
||||
|
||||
select.error:focus {
|
||||
outline-color: #e33f1e;
|
||||
}
|
||||
|
||||
select[multiple] {
|
||||
height: auto;
|
||||
padding: 0.5625rem;
|
||||
background-image: none;
|
||||
line-height: 1; /* Needed by non-Chromium based MS Edge browsers. */
|
||||
}
|
||||
|
||||
select[multiple] option {
|
||||
padding: 0.5625rem;
|
||||
}
|
||||
|
||||
select.form-element--small {
|
||||
height: 2.8125rem;
|
||||
}
|
||||
|
||||
/* Necessary to show chevron in forced colors mode in modern browsers. */
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
[dir="ltr"] select {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] select {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
select {
|
||||
background-image: none;
|
||||
-webkit-appearance: listbox;
|
||||
appearance: listbox; /* Default <select> appearance value for modern browsers. */
|
||||
|
||||
/* Lets browser set <select> appearance to whatever the browser's default is. */
|
||||
}
|
||||
|
||||
@supports ((-webkit-appearance: revert) or (appearance: revert)) {
|
||||
|
||||
select {
|
||||
-webkit-appearance: revert;
|
||||
appearance: revert;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Necessary for Internet Explorer to show chevron. */
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
|
||||
[dir="ltr"] select {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] select {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
|
||||
/* Re-enable default chevron for Internet Explorer. */
|
||||
}
|
||||
select::-ms-expand {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] select {
|
||||
background-position: left 18px center;
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
/**
|
||||
* @file
|
||||
* Select input elements.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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--gray-0);
|
||||
border: 1px solid var(--color--gray-30);
|
||||
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--blue-50);
|
||||
outline: solid 2px var(--color--blue-50);
|
||||
|
||||
@supports (outline-style: double) {
|
||||
border-width: 1px;
|
||||
outline-width: 6px;
|
||||
outline-style: double;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hides default chevron within Internet Explorer. */
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: var(--color--gray-30);
|
||||
background-color: var(--color--gray-90);
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Necessary for Internet Explorer to show chevron. */
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
padding-inline-end: 0;
|
||||
|
||||
/* Re-enable default chevron for Internet Explorer. */
|
||||
&::-ms-expand {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] select {
|
||||
background-position: left var(--sp) center;
|
||||
}
|
||||
@@ -0,0 +1,248 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Text input elements.
|
||||
*/
|
||||
|
||||
[type="color"],
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="email"],
|
||||
[type="file"],
|
||||
[type="month"],
|
||||
[type="number"],
|
||||
[type="password"],
|
||||
[type="search"],
|
||||
[type="tel"],
|
||||
[type="text"],
|
||||
[type="time"],
|
||||
[type="url"],
|
||||
[type="week"],
|
||||
textarea {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 3.375rem;
|
||||
padding: 0 1.125rem;
|
||||
color: #0d1214;
|
||||
border: 1px solid #7e96a7;
|
||||
border-radius: 0.1875rem;
|
||||
background-color: #fff;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
[type="color"]:focus,
|
||||
[type="date"]:focus,
|
||||
[type="datetime-local"]:focus,
|
||||
[type="email"]:focus,
|
||||
[type="file"]:focus,
|
||||
[type="month"]:focus,
|
||||
[type="number"]:focus,
|
||||
[type="password"]:focus,
|
||||
[type="search"]:focus,
|
||||
[type="tel"]:focus,
|
||||
[type="text"]:focus,
|
||||
[type="time"]:focus,
|
||||
[type="url"]:focus,
|
||||
[type="week"]:focus,
|
||||
textarea:focus {
|
||||
border: solid 2px #2494db;
|
||||
outline: solid 2px #2494db;
|
||||
}
|
||||
|
||||
@supports (outline-style: double) {
|
||||
|
||||
[type="color"]:focus,
|
||||
[type="date"]:focus,
|
||||
[type="datetime-local"]:focus,
|
||||
[type="email"]:focus,
|
||||
[type="file"]:focus,
|
||||
[type="month"]:focus,
|
||||
[type="number"]:focus,
|
||||
[type="password"]:focus,
|
||||
[type="search"]:focus,
|
||||
[type="tel"]:focus,
|
||||
[type="text"]:focus,
|
||||
[type="time"]:focus,
|
||||
[type="url"]:focus,
|
||||
[type="week"]:focus,
|
||||
textarea:focus {
|
||||
border-width: 1px;
|
||||
outline-width: 6px;
|
||||
outline-style: double;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
[type="color"]::-ms-clear,
|
||||
[type="date"]::-ms-clear,
|
||||
[type="datetime-local"]::-ms-clear,
|
||||
[type="email"]::-ms-clear,
|
||||
[type="file"]::-ms-clear,
|
||||
[type="month"]::-ms-clear,
|
||||
[type="number"]::-ms-clear,
|
||||
[type="password"]::-ms-clear,
|
||||
[type="search"]::-ms-clear,
|
||||
[type="tel"]::-ms-clear,
|
||||
[type="text"]::-ms-clear,
|
||||
[type="time"]::-ms-clear,
|
||||
[type="url"]::-ms-clear,
|
||||
[type="week"]::-ms-clear,
|
||||
textarea::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[type="color"][disabled],
|
||||
[type="date"][disabled],
|
||||
[type="datetime-local"][disabled],
|
||||
[type="email"][disabled],
|
||||
[type="file"][disabled],
|
||||
[type="month"][disabled],
|
||||
[type="number"][disabled],
|
||||
[type="password"][disabled],
|
||||
[type="search"][disabled],
|
||||
[type="tel"][disabled],
|
||||
[type="text"][disabled],
|
||||
[type="time"][disabled],
|
||||
[type="url"][disabled],
|
||||
[type="week"][disabled],
|
||||
textarea[disabled] {
|
||||
color: #7e96a7;
|
||||
background-color: #f1f4f7;
|
||||
}
|
||||
|
||||
.error[type="color"],
|
||||
.error[type="date"],
|
||||
.error[type="datetime-local"],
|
||||
.error[type="email"],
|
||||
.error[type="file"],
|
||||
.error[type="month"],
|
||||
.error[type="number"],
|
||||
.error[type="password"],
|
||||
.error[type="search"],
|
||||
.error[type="tel"],
|
||||
.error[type="text"],
|
||||
.error[type="time"],
|
||||
.error[type="url"],
|
||||
.error[type="week"],
|
||||
textarea.error {
|
||||
border: solid 2px #e33f1e;
|
||||
}
|
||||
|
||||
.error[type="color"]:focus,
|
||||
.error[type="date"]:focus,
|
||||
.error[type="datetime-local"]:focus,
|
||||
.error[type="email"]:focus,
|
||||
.error[type="file"]:focus,
|
||||
.error[type="month"]:focus,
|
||||
.error[type="number"]:focus,
|
||||
.error[type="password"]:focus,
|
||||
.error[type="search"]:focus,
|
||||
.error[type="tel"]:focus,
|
||||
.error[type="text"]:focus,
|
||||
.error[type="time"]:focus,
|
||||
.error[type="url"]:focus,
|
||||
.error[type="week"]:focus,
|
||||
textarea.error:focus {
|
||||
outline-color: #e33f1e;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.error[type="color"] + .ck-editor > .ck-editor__main,
|
||||
.error[type="date"] + .ck-editor > .ck-editor__main,
|
||||
.error[type="datetime-local"] + .ck-editor > .ck-editor__main,
|
||||
.error[type="email"] + .ck-editor > .ck-editor__main,
|
||||
.error[type="file"] + .ck-editor > .ck-editor__main,
|
||||
.error[type="month"] + .ck-editor > .ck-editor__main,
|
||||
.error[type="number"] + .ck-editor > .ck-editor__main,
|
||||
.error[type="password"] + .ck-editor > .ck-editor__main,
|
||||
.error[type="search"] + .ck-editor > .ck-editor__main,
|
||||
.error[type="tel"] + .ck-editor > .ck-editor__main,
|
||||
.error[type="text"] + .ck-editor > .ck-editor__main,
|
||||
.error[type="time"] + .ck-editor > .ck-editor__main,
|
||||
.error[type="url"] + .ck-editor > .ck-editor__main,
|
||||
.error[type="week"] + .ck-editor > .ck-editor__main,
|
||||
textarea.error + .ck-editor > .ck-editor__main {
|
||||
border: solid 2px #e33f1e;
|
||||
}
|
||||
|
||||
.form-element--small[type="color"],
|
||||
.form-element--small[type="date"],
|
||||
.form-element--small[type="datetime-local"],
|
||||
.form-element--small[type="email"],
|
||||
.form-element--small[type="file"],
|
||||
.form-element--small[type="month"],
|
||||
.form-element--small[type="number"],
|
||||
.form-element--small[type="password"],
|
||||
.form-element--small[type="search"],
|
||||
.form-element--small[type="tel"],
|
||||
.form-element--small[type="text"],
|
||||
.form-element--small[type="time"],
|
||||
.form-element--small[type="url"],
|
||||
.form-element--small[type="week"],
|
||||
textarea.form-element--small {
|
||||
min-height: 2.8125rem;
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
[type="color"],
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="email"],
|
||||
[type="file"],
|
||||
[type="month"],
|
||||
[type="number"],
|
||||
[type="password"],
|
||||
[type="search"],
|
||||
[type="tel"],
|
||||
[type="text"],
|
||||
[type="time"],
|
||||
[type="url"],
|
||||
[type="week"],
|
||||
textarea {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure that date field isn't larger than other fields. */
|
||||
|
||||
[dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] [type="date"]::-webkit-datetime-edit-fields-wrapper {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[type="date"]::-webkit-datetime-edit-fields-wrapper {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
[type="file"] {
|
||||
height: auto;
|
||||
padding-top: 0.84375rem;
|
||||
padding-bottom: 0.84375rem;
|
||||
}
|
||||
|
||||
[type="color"] {
|
||||
width: 3.375rem;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
* @file
|
||||
* Text input elements.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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--gray-0);
|
||||
border: 1px solid var(--color--gray-30);
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color--white);
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
border: solid 2px var(--color--blue-50);
|
||||
outline: solid 2px var(--color--blue-50);
|
||||
|
||||
@supports (outline-style: double) {
|
||||
border-width: 1px;
|
||||
outline-width: 6px;
|
||||
outline-style: double;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: var(--color--gray-30);
|
||||
background-color: var(--color--gray-90);
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Textarea.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 9rem;
|
||||
padding: 1.125rem;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* @file
|
||||
* Textarea.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: var(--sp8);
|
||||
padding: var(--sp);
|
||||
}
|
||||
@@ -0,0 +1,252 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Main form and form item styles.
|
||||
*/
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #7e96a7;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: #7e96a7;
|
||||
}
|
||||
|
||||
/* IE 10 and 11 needs this set as important. */
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: #7e96a7 !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* General form item.
|
||||
*/
|
||||
|
||||
.form-item {
|
||||
margin-top: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.form-item__label--multiple-value-form {
|
||||
margin-top: 0;
|
||||
margin-bottom: 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 Classy.
|
||||
*/
|
||||
|
||||
tr .form-item,
|
||||
.container-inline .form-item {
|
||||
margin-top: 0.5625rem;
|
||||
margin-bottom: 0.5625rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Form element label.
|
||||
*/
|
||||
|
||||
.form-item__label {
|
||||
display: block;
|
||||
margin-top: 0.5625rem;
|
||||
margin-bottom: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .container-inline .form-item__label {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] .container-inline .form-item__label {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.form-item__label--multiple-value-form {
|
||||
margin-top: 0;
|
||||
margin-bottom: 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: #afb8be;
|
||||
}
|
||||
|
||||
/* 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-right: 0.3em;
|
||||
margin-left: 0.3em;
|
||||
content: "";
|
||||
vertical-align: text-top;
|
||||
/* Use a background image to prevent screen readers from announcing the text. */
|
||||
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
|
||||
.form-item__label.form-required::after,
|
||||
.fieldset__label.form-required::after,
|
||||
.required-mark::after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23ffffff'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Form item description.
|
||||
*/
|
||||
|
||||
.form-item__description {
|
||||
max-width: 60ch;
|
||||
margin-top: 0.5625rem;
|
||||
margin-bottom: 0.5625rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
.field-multiple-table + .form-item__description {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Error message (Inline form errors).
|
||||
*/
|
||||
|
||||
[dir="ltr"] .form-item--error-message {
|
||||
padding-left: 1.6875rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-item--error-message {
|
||||
padding-right: 1.6875rem;
|
||||
}
|
||||
|
||||
.form-item--error-message {
|
||||
margin-top: 0.5625rem;
|
||||
margin-bottom: 0.5625rem;
|
||||
color: #e33f1e;
|
||||
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: 1.125rem 1.125rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
|
||||
.form-item--error-message {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M9 0C4.03125 0 0 4.03125 0 9C0 13.9688 4.03125 18 9 18C13.9687 18 18 13.9688 18 9C18 4.03125 13.9687 0 9 0ZM10.5 14.6133C10.5 14.8242 10.3359 15 10.1367 15H7.88672C7.67578 15 7.5 14.8242 7.5 14.6133V12.3867C7.5 12.1758 7.67578 12 7.88672 12H10.1367C10.3359 12 10.5 12.1758 10.5 12.3867V14.6133ZM10.4766 10.582C10.4648 10.7461 10.2891 10.875 10.0781 10.875H7.91016C7.6875 10.875 7.51172 10.7461 7.51172 10.582L7.3125 3.30469C7.3125 3.22266 7.34766 3.14063 7.42969 3.09375C7.5 3.03516 7.60547 3 7.71094 3H10.2891C10.3945 3 10.5 3.03516 10.5703 3.09375C10.6523 3.14063 10.6875 3.22266 10.6875 3.30469L10.4766 10.582Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-item--error-message {
|
||||
background-position: right top;
|
||||
}
|
||||
|
||||
/**
|
||||
* Form actions.
|
||||
*/
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
margin-top: 0.5625rem;
|
||||
margin-bottom: 0.5625rem;
|
||||
}
|
||||
|
||||
.form-actions .button,
|
||||
.form-actions .action-link {
|
||||
margin-top: 0.5625rem;
|
||||
margin-bottom: 0.5625rem;
|
||||
}
|
||||
|
||||
.form-actions .ajax-progress--throbber {
|
||||
-ms-grid-row-align: center;
|
||||
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;
|
||||
}
|
||||
|
||||
[dir="ltr"] .form-item--editor-format .form-item__label,
|
||||
[dir="ltr"] .form-item--editor-format .form-item__prefix,
|
||||
[dir="ltr"] .form-item--editor-format .form-item__suffix {
|
||||
margin-right: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .form-item--editor-format .form-item__label,
|
||||
[dir="rtl"] .form-item--editor-format .form-item__prefix,
|
||||
[dir="rtl"] .form-item--editor-format .form-item__suffix {
|
||||
margin-left: 0.5625rem;
|
||||
}
|
||||
|
||||
.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: 0.5625rem;
|
||||
margin-bottom: 0;
|
||||
vertical-align: top; /* Ensure proper alignment if description is present. */
|
||||
}
|
||||
|
||||
.form--inline .form-item__label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.form--inline .form-actions {
|
||||
margin-top: 1.6875rem;
|
||||
}
|
||||
@@ -0,0 +1,198 @@
|
||||
/**
|
||||
* @file
|
||||
* Main form and form item styles.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
::placeholder {
|
||||
color: var(--color--gray-30);
|
||||
}
|
||||
|
||||
/* IE 10 and 11 needs this set as important. */
|
||||
:-ms-input-placeholder {
|
||||
color: var(--color--gray-30) !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 Classy.
|
||||
*/
|
||||
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-45);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Forum specific styles.
|
||||
*/
|
||||
|
||||
.forum table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.forum__name--link,
|
||||
.forum__last-reply a,
|
||||
.forum__title a {
|
||||
color: #0d77b5;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
/**
|
||||
* @file
|
||||
* Forum specific styles.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.forum {
|
||||
& table {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.forum__name--link,
|
||||
.forum__last-reply a,
|
||||
.forum__title a {
|
||||
color: var(--color--blue-20);
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Header Mobile Buttons.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .mobile-buttons {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .mobile-buttons {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mobile-buttons {
|
||||
margin-top: 0.5625rem;
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
.mobile-buttons {
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
.mobile-buttons {
|
||||
margin-top: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
.mobile-buttons {
|
||||
margin-top: 6.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
body:not(.is-always-mobile-nav) .mobile-buttons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* @file
|
||||
* Header Mobile Buttons.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,285 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Navigation in header.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .header-nav {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
[dir="rtl"] .header-nav {
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
[dir="ltr"] .header-nav {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .header-nav {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .header-nav {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .header-nav {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
position: fixed;
|
||||
z-index: 501; /* Appear above overlay and contextual links in header. */
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
overflow: auto;
|
||||
/**
|
||||
* Ensure that header nav not use additional space and force system branding
|
||||
* block text to unnecessarily wrap.
|
||||
*/
|
||||
flex-basis: 0;
|
||||
flex-grow: 1; /* Necessary for IE11. */
|
||||
width: 100%;
|
||||
max-width: 31.25rem;
|
||||
height: 100%;
|
||||
padding-top: 0;
|
||||
padding-bottom: 1.125rem;
|
||||
/**
|
||||
* 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-top: solid #fff 3.375rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-nav.is-active {
|
||||
visibility: visible;
|
||||
transform: translateX(-100%); /* LTR */
|
||||
}
|
||||
|
||||
@supports (flex-basis: max-content) {
|
||||
|
||||
.header-nav {
|
||||
flex-basis: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
.header-nav {
|
||||
border-top-width: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .header-nav {
|
||||
padding-left: 3.375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .header-nav {
|
||||
padding-right: 3.375rem;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
padding-bottom: 3.375rem;
|
||||
border-top-width: 126px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
.header-nav {
|
||||
-ms-grid-column: 5;
|
||||
-ms-grid-column-span: 9;
|
||||
grid-column: 5 / 14;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Ensure top border has the same color as the background when in forced colors.
|
||||
*/
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
.header-nav {
|
||||
border-top-color: canvas;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Only apply transition styles when JS is loaded. This
|
||||
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
|
||||
*/
|
||||
|
||||
html.js .header-nav {
|
||||
transition: visibility 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
/* Toolbar is fixed, and tray is vertical. */
|
||||
|
||||
body.toolbar-vertical .header-nav {
|
||||
border-top-width: 93px;
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
body.toolbar-vertical .header-nav {
|
||||
border-top-width: 129px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
body.toolbar-vertical .header-nav,
|
||||
body.toolbar-horizontal.toolbar-fixed .header-nav {
|
||||
border-top-width: 165px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Toolbar is horizontal fixed, and tray is open. */
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {
|
||||
border-top-width: 205px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .header-nav {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .header-nav {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .header-nav {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .header-nav {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .header-nav {
|
||||
position: static;
|
||||
display: flex;
|
||||
visibility: visible;
|
||||
overflow: visible;
|
||||
-ms-grid-column: 5;
|
||||
-ms-grid-column-span: 10;
|
||||
grid-column: 5 / 15;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
max-width: none;
|
||||
height: 6.75rem;
|
||||
margin-top: auto;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
transition: transform 0.2s;
|
||||
transform: none;
|
||||
border-top: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
body.is-always-mobile-nav.toolbar-vertical .header-nav,
|
||||
body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed .header-nav {
|
||||
border-top-width: 237px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Toolbar is horizontal fixed, and tray is open. */
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {
|
||||
border-top-width: 277px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
[dir="ltr"] body.is-always-mobile-nav .header-nav {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] body.is-always-mobile-nav .header-nav {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
body.is-always-mobile-nav .header-nav {
|
||||
overflow: auto;
|
||||
max-width: calc(50vw - 4.40625rem);
|
||||
transition: transform 0.2s, visibility 0.2s;
|
||||
border-top-width: 198px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 90rem) {
|
||||
|
||||
[dir="ltr"] body.is-always-mobile-nav .header-nav {
|
||||
padding-right: calc(100vw - 88.875rem);
|
||||
}
|
||||
|
||||
[dir="rtl"] body.is-always-mobile-nav .header-nav {
|
||||
padding-left: calc(100vw - 88.875rem);
|
||||
}
|
||||
|
||||
body.is-always-mobile-nav .header-nav {
|
||||
max-width: calc(100vw - 48.9375rem);
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .header-nav.is-active {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
[dir="ltr"] .header-nav-overlay {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .header-nav-overlay {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.header-nav-overlay {
|
||||
position: fixed;
|
||||
z-index: 101;
|
||||
top: 0;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
opacity: 0.2;
|
||||
background: #0d77b5;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
.header-nav-overlay {
|
||||
background: canvastext;
|
||||
}
|
||||
}
|
||||
|
||||
.is-overlay-active .header-nav-overlay {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
/**
|
||||
* @file
|
||||
* Navigation in header.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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: 0;
|
||||
flex-grow: 1; /* Necessary for IE11. */
|
||||
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) var(--sp3);
|
||||
background-color: var(--color--white);
|
||||
box-shadow: 0 0 72px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.is-active {
|
||||
visibility: visible;
|
||||
transform: translateX(-100%); /* LTR */
|
||||
}
|
||||
|
||||
@supports (flex-basis: max-content) {
|
||||
flex-basis: max-content;
|
||||
}
|
||||
|
||||
@media (--sm) {
|
||||
border-top-width: var(--sp5);
|
||||
}
|
||||
|
||||
@media (--md) {
|
||||
padding-block-end: var(--sp3);
|
||||
padding-inline-start: var(--sp3);
|
||||
border-top-width: var(--sp7);
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
/* Toolbar is fixed, and tray is vertical. */
|
||||
body.toolbar-vertical .header-nav {
|
||||
border-top-width: calc(var(--toolbar-height) + var(--sp3));
|
||||
|
||||
@media (--sm) {
|
||||
border-top-width: calc(var(--toolbar-height) + var(--sp5));
|
||||
}
|
||||
}
|
||||
|
||||
/* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
|
||||
body.toolbar-vertical .header-nav,
|
||||
body.toolbar-horizontal.toolbar-fixed .header-nav {
|
||||
@media (--md) {
|
||||
border-top-width: calc(var(--toolbar-height) + var(--sp7));
|
||||
}
|
||||
}
|
||||
|
||||
/* Toolbar is horizontal fixed, and tray is open. */
|
||||
body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {
|
||||
@media (--md) {
|
||||
border-top-width: calc(var(--toolbar-height) + var(--toolbar-tray-height) + var(--sp7));
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
/* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
|
||||
&.toolbar-vertical .header-nav,
|
||||
&.toolbar-horizontal.toolbar-fixed .header-nav {
|
||||
@media (--nav) {
|
||||
border-top-width: calc(var(--toolbar-height) + var(--sp11));
|
||||
}
|
||||
}
|
||||
|
||||
/* Toolbar is horizontal fixed, and tray is open. */
|
||||
&.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .header-nav {
|
||||
@media (--nav) {
|
||||
border-top-width: calc(var(--toolbar-height) + var(--toolbar-tray-height) + var(--sp11));
|
||||
}
|
||||
}
|
||||
|
||||
& .header-nav {
|
||||
@media (--nav) {
|
||||
overflow: auto;
|
||||
max-width: calc((7 * (var(--grid-col-width--nav) + var(--grid-gap--nav))));
|
||||
padding-inline-end: var(--sp);
|
||||
transition: transform 0.2s, visibility 0.2s;
|
||||
border-top-width: var(--sp11);
|
||||
}
|
||||
|
||||
@media (--grid-max) {
|
||||
max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width--max) + var(--grid-gap--max)))));
|
||||
padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .header-nav.is-active {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.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--blue-20);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: canvastext;
|
||||
}
|
||||
|
||||
@nest .is-overlay-active & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,300 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Header Search Narrow Block.
|
||||
*/
|
||||
|
||||
.block-search-narrow {
|
||||
margin-right: -1.125rem;
|
||||
margin-bottom: 2.25rem;
|
||||
margin-left: -1.125rem;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.block-search-narrow .search-block-form {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.block-search-narrow .form-item {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.block-search-narrow .form-actions {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-narrow input[type="search"] {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-narrow input[type="search"] {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-narrow input[type="search"] {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-narrow input[type="search"] {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
.block-search-narrow input[type="search"] {
|
||||
width: calc(100% + 2.25rem);
|
||||
height: 3.375rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
transition: background-size 0.4s;
|
||||
color: #fff;
|
||||
border: solid 1px transparent;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(#2494db, #2494db); /* Two values are needed for IE11 support. */
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom left; /* LTR */
|
||||
background-size: 0% 0.3125rem;
|
||||
box-shadow: none;
|
||||
font-family: Lora, georgia, serif;
|
||||
font-size: 1rem;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.block-search-narrow input[type="search"]::-ms-clear {
|
||||
width: 2.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.block-search-narrow input[type="search"]:focus {
|
||||
outline: solid 4px transparent;
|
||||
outline-offset: -4px;
|
||||
background-size: 100% 0.3125rem;
|
||||
|
||||
/*
|
||||
We normally indicate focus by animating background-image width. This isn't
|
||||
available in IE11 when in Windows high contrast mode.
|
||||
*/
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
|
||||
.block-search-narrow input[type="search"]:focus {
|
||||
border-bottom-width: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .block-search-narrow input[type="search"] {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-narrow input[type="search"] {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-narrow input[type="search"] {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-narrow input[type="search"] {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
|
||||
.block-search-narrow input[type="search"] {
|
||||
height: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-narrow .search-form__submit {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-narrow .search-form__submit {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-narrow .search-form__submit {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-narrow .search-form__submit {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-narrow .search-form__submit {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-narrow .search-form__submit {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-narrow .search-form__submit {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-narrow .search-form__submit {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.block-search-narrow .search-form__submit {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-ms-grid-row-align: stretch;
|
||||
align-self: stretch;
|
||||
width: 3.375rem;
|
||||
height: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 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>.
|
||||
*/
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-narrow .search-form__submit .icon--search {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-narrow .search-form__submit .icon--search {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.block-search-narrow .search-form__submit .icon--search {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%; /* Width of the SVG background image. */
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: auto;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-narrow .search-form__submit .icon--search:after {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-narrow .search-form__submit .icon--search:after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.block-search-narrow .search-form__submit .icon--search:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
content: "";
|
||||
transition: transform 0.2s;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left; /* LTR */
|
||||
border-top: solid 0.3125rem #2494db;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
.block-search-narrow .search-form__submit .icon--search {
|
||||
background: buttontext;
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
|
||||
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
.block-search-narrow .search-form__submit:focus {
|
||||
outline: solid 4px transparent;
|
||||
outline-offset: -4px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.block-search-narrow .search-form__submit:focus span:after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
|
||||
.block-search-narrow .search-form__submit:focus {
|
||||
border-bottom-width: 9px;
|
||||
}
|
||||
|
||||
.block-search-narrow .search-form__submit:focus span:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
.block-search-narrow .search-form__submit {
|
||||
width: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
/* IE11's high contrast show will not show the background image, so we show the text. */
|
||||
.block-search-narrow .search-form__submit .visually-hidden {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Edge's high contrast does show the background image, so we hide it. */
|
||||
.block-search-narrow .search-form__submit .icon--search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 500px is the width of the primary nav at mobile. */
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
[dir="ltr"] .block-search-narrow {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-narrow {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-narrow {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-narrow {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
body:not(.is-always-mobile-nav) .block-search-narrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-narrow input[type="search"] {
|
||||
background-position: bottom right;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-narrow .search-form__submit .icon--search:after {
|
||||
transform-origin: right;
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
/**
|
||||
* @file
|
||||
* Header Search Narrow Block.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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--blue-50), var(--color--blue-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;
|
||||
|
||||
&::-ms-clear {
|
||||
width: 40px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: solid 4px transparent;
|
||||
outline-offset: -4px;
|
||||
background-size: 100% 5px;
|
||||
|
||||
/*
|
||||
We normally indicate focus by animating background-image width. This isn't
|
||||
available in IE11 when in Windows high contrast mode.
|
||||
*/
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
border-bottom-width: 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--blue-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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,445 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Header Search Wide Block.
|
||||
*/
|
||||
|
||||
/* Override contextual links so we can position against .site-header. */
|
||||
|
||||
.block-search-wide.contextual-region {
|
||||
position: static;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__wrapper {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__wrapper {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__wrapper {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__wrapper {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__wrapper {
|
||||
border-left: solid 5.625rem #313637;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper {
|
||||
border-right: solid 5.625rem #313637;
|
||||
}
|
||||
|
||||
.block-search-wide__wrapper {
|
||||
position: absolute;
|
||||
z-index: 1; /* Ensure left border shows above social region in IE11. */
|
||||
top: 100%;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
max-width: 98.125rem;
|
||||
height: 9rem;
|
||||
max-height: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
transition: all 0.2s;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.block-search-wide__wrapper.is-active {
|
||||
visibility: visible;
|
||||
max-height: 9rem;
|
||||
}
|
||||
|
||||
.block-search-wide__wrapper form {
|
||||
display: flex;
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-column-span: 13;
|
||||
grid-column: 1 / 14;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__wrapper input[type="search"] {
|
||||
padding-left: 13.5rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
|
||||
padding-right: 13.5rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__wrapper input[type="search"] {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.block-search-wide__wrapper input[type="search"] {
|
||||
width: calc(100% + 2.25rem);
|
||||
height: 9rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
transition: background-size 0.4s;
|
||||
color: #fff;
|
||||
border: solid 1px transparent;
|
||||
box-shadow: none;
|
||||
font-family: Lora, georgia, serif;
|
||||
font-size: 2rem;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.block-search-wide__wrapper input[type="search"]::-ms-clear {
|
||||
width: 2.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.block-search-wide__wrapper input[type="search"]:focus {
|
||||
outline: solid 4px transparent;
|
||||
outline-offset: -4px;
|
||||
|
||||
/*
|
||||
We normally indicate focus by animating background-image width. This isn't
|
||||
available in IE11 when in Windows high contrast mode.
|
||||
*/
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
|
||||
.block-search-wide__wrapper input[type="search"]:focus {
|
||||
border-bottom-width: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-search-wide__wrapper .form-item-keys {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.block-search-wide__wrapper .form-actions {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.block-search-wide__wrapper .search-form__submit {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-ms-grid-row-align: stretch;
|
||||
align-self: stretch;
|
||||
width: 6.25rem;
|
||||
height: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 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>.
|
||||
*/
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.block-search-wide__wrapper .search-form__submit .icon--search {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 1.5rem; /* Width of the SVG background image. */
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search:after {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search:after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.block-search-wide__wrapper .search-form__submit .icon--search:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
content: "";
|
||||
transition: transform 0.2s;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
border-top: solid 0.5625rem #2494db;
|
||||
}
|
||||
|
||||
.block-search-wide__wrapper .search-form__submit:focus {
|
||||
outline: solid 4px transparent;
|
||||
outline-offset: -4px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.block-search-wide__wrapper .search-form__submit:focus span:after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
|
||||
.block-search-wide__wrapper .search-form__submit:focus {
|
||||
border-bottom-width: 9px;
|
||||
}
|
||||
|
||||
.block-search-wide__wrapper .search-form__submit:focus span:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
/* IE11's high contrast show will not show the background image, so we show the text. */
|
||||
.block-search-wide__wrapper .search-form__submit .visually-hidden {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Edge's high contrast does show the background image, so we hide it. */
|
||||
.block-search-wide__wrapper .search-form__submit .icon--search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__container {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__container {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
|
||||
.block-search-wide__container {
|
||||
max-width: 84.375rem;
|
||||
}
|
||||
|
||||
.block-search-wide__grid {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: (1fr)[14];
|
||||
grid-template-columns: repeat(14, 1fr);
|
||||
grid-column-gap: 2.25rem;
|
||||
}
|
||||
|
||||
/* Override specificity from container-inline.module.css */
|
||||
|
||||
.container-inline .block-search-wide__container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.container-inline .block-search-wide__grid {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.block-search-wide__button {
|
||||
position: relative;
|
||||
display: none;
|
||||
width: 3.375rem;
|
||||
height: 6.75rem;
|
||||
cursor: pointer;
|
||||
color: #0d1214; /* Affects SVG search icon. */
|
||||
border: 0;
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.block-search-wide__button:focus {
|
||||
position: relative;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.block-search-wide__button:focus:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 80%;
|
||||
height: 3.375rem;
|
||||
content: "";
|
||||
transform: translate(-50%, -50%);
|
||||
border: solid 2px #2494db;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.block-search-wide__button[aria-expanded="true"] {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.block-search-wide__button[aria-expanded="true"]:focus:after {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:before,
|
||||
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 1.6875rem;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-top: solid 2px #fff;
|
||||
}
|
||||
|
||||
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:before {
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:after {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.block-search-wide__button[aria-expanded="true"] svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__button svg {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__button svg {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-search-wide__button svg {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__button svg {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
.block-search-wide__button {
|
||||
background: ButtonFace;
|
||||
}
|
||||
|
||||
.block-search-wide__button path {
|
||||
fill: ButtonText;
|
||||
}
|
||||
}
|
||||
|
||||
/* Provide rudimentary access to site search if JS is disabled. */
|
||||
|
||||
html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
|
||||
visibility: visible;
|
||||
max-height: 9rem;
|
||||
}
|
||||
|
||||
/* 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(#2494db, #2494db); /* Two values are needed for IE11 support. */
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom left; /* LTR */
|
||||
background-size: 0% 0.625rem;
|
||||
}
|
||||
|
||||
[dir] .block-search-wide__wrapper input[type="search"]:focus {
|
||||
background-size: 100% 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
|
||||
background-position: bottom right;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search:after {
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
body:not(.is-always-mobile-nav) .block-search-wide__wrapper,
|
||||
body:not(.is-always-mobile-nav) .block-search-wide__button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,305 @@
|
||||
/**
|
||||
* @file
|
||||
* Header Search Wide Block.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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: 0;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
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-10);
|
||||
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;
|
||||
|
||||
&::-ms-clear {
|
||||
width: 40px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: solid 4px transparent;
|
||||
outline-offset: -4px;
|
||||
|
||||
/*
|
||||
We normally indicate focus by animating background-image width. This isn't
|
||||
available in IE11 when in Windows high contrast mode.
|
||||
*/
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
border-bottom-width: var(--sp0-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .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--blue-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) {
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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--md), 1fr);
|
||||
grid-column-gap: var(--grid-gap--md);
|
||||
}
|
||||
|
||||
/* 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--gray-0); /* 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--blue-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--blue-50), var(--color--blue-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,231 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Site branding in header.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .site-branding {
|
||||
margin-right: 1.125rem;
|
||||
margin-left: -1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .site-branding {
|
||||
margin-right: -1.125rem;
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .site-branding {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .site-branding {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .site-branding {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .site-branding {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
.site-branding {
|
||||
display: flex;
|
||||
flex-shrink: 1;
|
||||
align-items: flex-end;
|
||||
min-width: calc(33.33333vw + 0.75rem);
|
||||
min-height: 3.375rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0.5625rem;
|
||||
|
||||
/* @todo - #0d7ab8 isn't currently a variable. */
|
||||
background-image: linear-gradient(160deg, #2494db 0%, #0d7ab8 78.66%);
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
.site-branding {
|
||||
min-height: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
.site-branding {
|
||||
min-height: 6.75rem;
|
||||
padding-bottom: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
.site-branding {
|
||||
min-width: calc(14.28571vw + 0.99107rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
[dir="ltr"] .site-branding {
|
||||
margin-left: -2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .site-branding {
|
||||
margin-right: -2.25rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .site-branding {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .site-branding {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .site-branding {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .site-branding {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
|
||||
.site-branding {
|
||||
min-width: calc(14.28571vw + 0.99107rem);
|
||||
min-height: 11.25rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 90rem) {
|
||||
|
||||
.site-branding {
|
||||
min-width: 13.98214rem;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .site-branding {
|
||||
background-image: linear-gradient(-160deg, #2494db 0%, #0d7ab8 78.66%);
|
||||
}
|
||||
|
||||
.site-branding--bg-gray {
|
||||
background: #f7f9fa;
|
||||
}
|
||||
|
||||
.site-branding--bg-white {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.site-branding__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.site-branding__inner a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
[dir="ltr"] .site-branding__inner {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .site-branding__inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .site-branding__inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .site-branding__inner {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.site-branding__inner {
|
||||
height: 6.75rem;
|
||||
padding-top: 0.5625rem;
|
||||
padding-bottom: 0.5625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.site-branding__logo {
|
||||
flex-shrink: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.site-branding__logo img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
max-height: 2.25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
.site-branding__logo img {
|
||||
max-height: 3.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
.site-branding__logo img {
|
||||
max-height: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
.site-branding__logo img {
|
||||
max-height: 5.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.site-branding__text {
|
||||
color: #fff;
|
||||
font-size: 1.125rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.site-branding__text a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
.site-branding__text {
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
.site-branding__text {
|
||||
letter-spacing: 0.02em;
|
||||
font-size: 2rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.site-branding--bg-gray .site-branding__text,
|
||||
.site-branding--bg-white .site-branding__text {
|
||||
color: #2494db;
|
||||
}
|
||||
|
||||
[dir="ltr"] .site-branding__logo + .site-branding__text {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .site-branding__logo + .site-branding__text {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
/**
|
||||
* @file
|
||||
* Site branding in header.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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));
|
||||
min-height: var(--sp3);
|
||||
margin-inline: calc(-1 * var(--container-padding)) var(--sp);
|
||||
padding-block: 0 var(--sp0-5);
|
||||
padding-inline-start: var(--container-padding);
|
||||
padding-inline-end: var(--container-padding);
|
||||
|
||||
/* @todo - #0d7ab8 isn't currently a variable. */
|
||||
background-image: linear-gradient(160deg, var(--color--blue-50) 0%, #0d7ab8 78.66%);
|
||||
|
||||
@media (--sm) {
|
||||
min-height: var(--sp4);
|
||||
}
|
||||
|
||||
@media (--md) {
|
||||
min-height: var(--sp6);
|
||||
padding-block-end: var(--sp);
|
||||
}
|
||||
|
||||
@media (--lg) {
|
||||
min-width: calc((2 * var(--grid-col-width--lg)) + (2 * var(--grid-gap--lg)) + var(--container-padding));
|
||||
}
|
||||
|
||||
@media (--nav) {
|
||||
min-width: calc((2 * var(--grid-col-width--nav)) + (2 * var(--grid-gap--nav)) + var(--container-padding-nav));
|
||||
min-height: var(--site-header-height-wide);
|
||||
margin-inline-start: calc(-1 * var(--container-padding-nav));
|
||||
padding-block: 0;
|
||||
padding-inline-start: var(--container-padding-nav);
|
||||
padding-inline-end: var(--container-padding-nav);
|
||||
}
|
||||
|
||||
@media (--grid-max) {
|
||||
min-width: calc((2 * var(--grid-col-width--max)) + (2 * var(--grid-gap--max)) + var(--container-padding-nav));
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .site-branding {
|
||||
background-image: linear-gradient(-160deg, var(--color--blue-50) 0%, #0d7ab8 78.66%);
|
||||
}
|
||||
|
||||
.site-branding--bg-gray {
|
||||
background: var(--color--gray-95);
|
||||
}
|
||||
|
||||
.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--blue-50);
|
||||
}
|
||||
|
||||
.site-branding__logo + .site-branding__text {
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Sticky Header Toggle Button.
|
||||
*
|
||||
* This button shows on the left hand side of the header (in LTR layouts), and
|
||||
* toggles fixing the header to the top of the viewport.
|
||||
*/
|
||||
|
||||
.sticky-header-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
.sticky-header-toggle {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 5.625rem;
|
||||
height: 6.75rem;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background-color: #2494db;
|
||||
}
|
||||
|
||||
.sticky-header-toggle:focus {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
outline: solid 2px #fff;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
body:not(.is-always-mobile-nav) .is-fixed .sticky-header-toggle {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
body.is-always-mobile-nav .sticky-header-toggle {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.sticky-header-toggle__icon {
|
||||
position: relative;
|
||||
width: 2.25rem;
|
||||
height: 1.3125rem;
|
||||
transition: opacity 0.2s;
|
||||
pointer-events: none;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.sticky-header-toggle__icon > span {
|
||||
display: block;
|
||||
height: 0;
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid 3px #fff;
|
||||
}
|
||||
|
||||
[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(1) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(1) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sticky-header-toggle__icon > span:nth-child(1) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: transform 0.2s;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(2) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(2) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sticky-header-toggle__icon > span:nth-child(2) {
|
||||
position: absolute;
|
||||
top: 0.5625rem;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: opacity 0.2s;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(3) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(3) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sticky-header-toggle__icon > span:nth-child(3) {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: transform 0.2s;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.is-fixed .sticky-header-toggle {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(1) {
|
||||
top: 0.5625rem;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(3) {
|
||||
top: 0.5625rem;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* @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/variables.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--blue-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 {
|
||||
position: relative;
|
||||
width: var(--sp2);
|
||||
height: 21px;
|
||||
transition: opacity 0.2s;
|
||||
pointer-events: none;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
height: 0;
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid 3px var(--color--white);
|
||||
|
||||
&:nth-child(1) {
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: transform 0.2s;
|
||||
background-color: var(--color--white);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
position: absolute;
|
||||
inset-block-start: 9px;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: opacity 0.2s;
|
||||
background-color: var(--color--white);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
position: absolute;
|
||||
inset-block: auto 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: transform 0.2s;
|
||||
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) {
|
||||
inset-block-start: 9px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
& > span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& > span:nth-child(3) {
|
||||
inset-block-start: 9px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Main Hero.
|
||||
*/
|
||||
|
||||
.hero__content {
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-column-span: 6;
|
||||
grid-column: 1 / 7;
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
.hero__content { /* 700px */
|
||||
-ms-grid-column: 3;
|
||||
-ms-grid-column-span: 10;
|
||||
grid-column: 3 / 13;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
.hero__content {
|
||||
-ms-grid-column: 3;
|
||||
-ms-grid-column-span: 8;
|
||||
grid-column: 3 / 11;
|
||||
}
|
||||
}
|
||||
|
||||
.hero__img {
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-column-span: 6;
|
||||
grid-column: 1 / 7;
|
||||
margin-top: 2.25rem;
|
||||
margin-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.hero__img img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
.hero__img {
|
||||
margin-top: 3.375rem;
|
||||
margin-bottom: 3.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
.hero__img {
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-column-span: 14;
|
||||
grid-column: 1 / 15;
|
||||
margin-top: 4.5rem;
|
||||
margin-bottom: 4.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
.hero__img {
|
||||
-ms-grid-column: 2;
|
||||
-ms-grid-column-span: 12;
|
||||
grid-column: 2 / 14;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* @file
|
||||
* Main Hero.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Links component.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .links.inline {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .links.inline {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .links.inline {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .links.inline {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .links.inline {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .links.inline {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.links.inline {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.links.inline > * {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
[dir="ltr"] .links.inline > *:not(:last-child) {
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
[dir="rtl"] .links.inline > *:not(:last-child) {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .node--type-book .links.inline {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[dir="rtl"] .node--type-book .links.inline {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* @file
|
||||
* Links component.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Maintenance page.
|
||||
*/
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
.maintenance-page .site-header__initial {
|
||||
flex-shrink: 0;
|
||||
width: 5.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.maintenance-page .main-content {
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.maintenance-page-icon {
|
||||
display: block;
|
||||
margin-top: 3.375rem;
|
||||
margin-bottom: 3.375rem;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
* @file
|
||||
* Maintenance page.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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);
|
||||
}
|
||||
@@ -0,0 +1,261 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Messages.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .messages-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages-list {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .messages-list {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.messages-list {
|
||||
margin-top: 1.125rem;
|
||||
margin-bottom: 1.125rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
[dir="ltr"] .messages {
|
||||
padding-left: 1.6875rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages {
|
||||
padding-right: 1.6875rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .messages {
|
||||
padding-right: 1.6875rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages {
|
||||
padding-left: 1.6875rem;
|
||||
}
|
||||
|
||||
.messages {
|
||||
min-height: 4.25rem;
|
||||
padding-top: 1.125rem;
|
||||
padding-bottom: 1.125rem;
|
||||
color: #fff;
|
||||
outline: solid 1px transparent;
|
||||
background-color: #0d1214;
|
||||
}
|
||||
|
||||
.messages * {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Additional specificity to override contrib modules. */
|
||||
|
||||
.messages.messages-list__item {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
[dir="ltr"] .messages__list {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages__list {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .messages__list {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages__list {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .messages__list {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages__list {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .messages__list {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages__list {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.messages__list {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.messages:not(.hidden) ~ .messages {
|
||||
margin-top: 1.125rem;
|
||||
}
|
||||
|
||||
.messages__item + .messages__item {
|
||||
margin-top: 0.5625rem;
|
||||
}
|
||||
|
||||
.messages__container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[dir="ltr"] .messages__header {
|
||||
margin-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages__header {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
|
||||
.messages__header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .messages__header.no-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages__header.no-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.messages__content {
|
||||
overflow: auto; /* Ensure large code blocks can be scrolled to. */
|
||||
flex: 1;
|
||||
padding-top: 0.1875rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .messages__button {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages__button {
|
||||
margin-right: 1.125rem;
|
||||
}
|
||||
|
||||
.messages__button {
|
||||
flex-shrink: 0;
|
||||
padding-top: 0.1875rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .messages__close {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages__close {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .messages__close {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .messages__close {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.messages__close {
|
||||
position: relative;
|
||||
width: 1.5625rem;
|
||||
height: 1.5625rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
border: 0;
|
||||
background: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.messages__close:before,
|
||||
.messages__close:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 2.0625rem;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-top: solid 2px #7e96a7;
|
||||
}
|
||||
|
||||
.messages__close:before {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.messages__close:after {
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.messages__close:hover::before,
|
||||
.messages__close:hover::after {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.messages__close:focus {
|
||||
outline: 2px solid #53b0eb;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.messages__icon svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.messages--error .messages__icon svg {
|
||||
fill: #e33f1e;
|
||||
}
|
||||
|
||||
.messages--warning .messages__icon svg {
|
||||
fill: #fdca40;
|
||||
}
|
||||
|
||||
.messages--status .messages__icon svg {
|
||||
fill: #3fa21c;
|
||||
}
|
||||
|
||||
.messages--info .messages__icon svg {
|
||||
fill: #53b0eb;
|
||||
}
|
||||
|
||||
.messages a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.messages pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .js-form-managed-file .messages {
|
||||
border-left: solid 0.375rem #e33f1e;
|
||||
}
|
||||
|
||||
[dir="rtl"] .js-form-managed-file .messages {
|
||||
border-right: solid 0.375rem #e33f1e;
|
||||
}
|
||||
|
||||
.js-form-managed-file .messages {
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* @file
|
||||
* Messages.
|
||||
*/
|
||||
|
||||
@import "../base/variables.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-0);
|
||||
|
||||
& * {
|
||||
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-30);
|
||||
}
|
||||
|
||||
&: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--blue-70);
|
||||
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--blue-70);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styles for menu placed in sidebar region.
|
||||
*/
|
||||
|
||||
.menu--sidebar {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.menu--sidebar .menu {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.menu--sidebar .menu--level-1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .menu--sidebar .menu__link {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .menu--sidebar .menu__link {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .menu--sidebar .menu__link {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .menu--sidebar .menu__link {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.menu--sidebar .menu__link {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-top: 0.84375rem;
|
||||
padding-bottom: 0.84375rem;
|
||||
font-family: Lora, georgia, serif;
|
||||
font-size: 1.125rem;
|
||||
|
||||
/* Bottom divider line. */
|
||||
}
|
||||
|
||||
[dir="ltr"] .menu--sidebar .menu__link:after {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .menu--sidebar .menu__link:after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.menu--sidebar .menu__link:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 4.5rem;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-top: solid 2px #e7edf1;
|
||||
}
|
||||
|
||||
.menu--sidebar .menu__link--link {
|
||||
text-decoration: none;
|
||||
color: #0d1214;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.menu--sidebar .menu__link--link:hover {
|
||||
color: #2494db;
|
||||
}
|
||||
|
||||
/* No bottom divider line for last menu item. */
|
||||
|
||||
.menu--sidebar .menu__item--level-1:last-child > .menu__link:last-child:after,
|
||||
.menu--sidebar .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child:after {
|
||||
content: none;
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for menu placed in sidebar region.
|
||||
*/
|
||||
|
||||
@import "../../base/variables.pcss.css";
|
||||
|
||||
.menu--sidebar {
|
||||
list-style: none;
|
||||
|
||||
& .menu {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
& .menu--level-1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& .menu__link {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-block: var(--sp0-75);
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
font-family: var(--font-serif);
|
||||
font-size: 18px;
|
||||
|
||||
/* Bottom divider line. */
|
||||
&:after {
|
||||
position: absolute;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
width: var(--sp4);
|
||||
height: 0;
|
||||
content: "";
|
||||
border-block-start: solid 2px var(--color--gray-80);
|
||||
}
|
||||
}
|
||||
|
||||
& .menu__link--link {
|
||||
text-decoration: none;
|
||||
color: var(--color--gray-0);
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
color: var(--color--blue-50);
|
||||
}
|
||||
}
|
||||
|
||||
/* No bottom divider line for last menu item. */
|
||||
& .menu__item--level-1:last-child > .menu__link:last-child,
|
||||
& .menu__item--level-1:last-child > .menu__item--level-2:last-child > .menu__link:last-child {
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user