rorschach
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Nav Button Mobile.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .mobile-nav-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .mobile-nav-button {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
[dir="ltr"] .mobile-nav-button {
|
||||
margin-right: -0.375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .mobile-nav-button {
|
||||
margin-left: -0.375rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .mobile-nav-button {
|
||||
padding-left: 0.375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .mobile-nav-button {
|
||||
padding-right: 0.375rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .mobile-nav-button {
|
||||
padding-right: 0.375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .mobile-nav-button {
|
||||
padding-left: 0.375rem;
|
||||
}
|
||||
|
||||
.mobile-nav-button {
|
||||
position: relative;
|
||||
z-index: 505; /* Appear above mobile nav. */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.mobile-nav-button:focus {
|
||||
outline: solid 2px #0d77b5;
|
||||
}
|
||||
|
||||
.mobile-nav-button:active {
|
||||
color: inherit; /* Override Safari's default UA styles. */
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
[dir="ltr"] .mobile-nav-button {
|
||||
padding-left: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .mobile-nav-button {
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
|
||||
.mobile-nav-button {
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Text that says "menu". */
|
||||
|
||||
.mobile-nav-button__label {
|
||||
position: absolute;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
[dir="ltr"] .mobile-nav-button__label {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .mobile-nav-button__label {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.mobile-nav-button__label {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-button__icon {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 2.25rem;
|
||||
height: 0;
|
||||
border-top: solid 3px #2494db;
|
||||
}
|
||||
|
||||
[dir="ltr"] .mobile-nav-button__icon:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .mobile-nav-button__icon:before {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mobile-nav-button__icon:before {
|
||||
position: absolute;
|
||||
top: -0.6875rem;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
content: "";
|
||||
transition: all 0.2s;
|
||||
border-top: solid 3px #2494db;
|
||||
}
|
||||
|
||||
[dir="ltr"] .mobile-nav-button__icon:after {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .mobile-nav-button__icon:after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.mobile-nav-button__icon:after {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: -0.5rem;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
content: "";
|
||||
transition: all 0.2s;
|
||||
border-top: solid 3px #2494db;
|
||||
}
|
||||
|
||||
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon:before {
|
||||
top: 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon:after {
|
||||
top: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* @file
|
||||
* Nav Button Mobile.
|
||||
*/
|
||||
|
||||
@import "../../base/variables.pcss.css";
|
||||
|
||||
.mobile-nav-button {
|
||||
position: relative;
|
||||
z-index: 505; /* Appear above mobile nav. */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
width: var(--sp2);
|
||||
height: var(--sp2);
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: -6px;
|
||||
padding-block: 0;
|
||||
padding-inline-start: 6px;
|
||||
padding-inline-end: 6px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
outline: solid 2px var(--color--blue-20);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: inherit; /* Override Safari's default UA styles. */
|
||||
}
|
||||
|
||||
@media (--sm) {
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
padding-inline-start: var(--sp);
|
||||
}
|
||||
}
|
||||
|
||||
/* Text that says "menu". */
|
||||
.mobile-nav-button__label {
|
||||
position: absolute;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
word-wrap: normal;
|
||||
|
||||
@media (--sm) {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin-inline-end: 12px;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-button__icon {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: var(--sp2);
|
||||
height: 0;
|
||||
border-top: solid 3px var(--color--blue-50);
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
inset-block-start: -11px;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
content: "";
|
||||
transition: all 0.2s;
|
||||
border-top: solid 3px var(--color--blue-50);
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
inset-block: auto -8px;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
content: "";
|
||||
transition: all 0.2s;
|
||||
border-top: solid 3px var(--color--blue-50);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
|
||||
border-top: 0;
|
||||
|
||||
&:before {
|
||||
inset-block-start: 0;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
inset-block-start: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Button that expands second level nav when clicked.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .primary-nav__button-toggle {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__button-toggle {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__button-toggle {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__button-toggle {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.primary-nav__button-toggle {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
margin-top: 0.5625rem; /* Visually align button with menu link text. */
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
cursor: pointer;
|
||||
text-indent: -62.4375rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.primary-nav__button-toggle:focus {
|
||||
outline: auto 2px #2494db;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.primary-nav__button-toggle .icon--menu-toggle {
|
||||
position: absolute;
|
||||
/* stylelint-disable csstools/use-logical */
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/* stylelint-enable csstools/use-logical */
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
transition: background-color 0.2s;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.primary-nav__button-toggle .icon--menu-toggle:before,
|
||||
.primary-nav__button-toggle .icon--menu-toggle:after {
|
||||
position: absolute;
|
||||
/* stylelint-disable csstools/use-logical */
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/* stylelint-enable csstools/use-logical */
|
||||
width: 1.125rem;
|
||||
height: 0;
|
||||
content: "";
|
||||
transform: translate(-50%, -50%);
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid 3px #2494db;
|
||||
}
|
||||
|
||||
.primary-nav__button-toggle .icon--menu-toggle:after {
|
||||
transition: opacity 0.2s;
|
||||
transform: translate(-50%, -50%) rotate(90deg);
|
||||
}
|
||||
|
||||
.primary-nav__button-toggle[aria-expanded="true"] .icon--menu-toggle:after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* aria-hidden attribute is removed by JS. Button is non-functional
|
||||
until JS is enabled.
|
||||
*/
|
||||
|
||||
.primary-nav__button-toggle[aria-hidden="true"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
|
||||
margin-right: -2.25rem;
|
||||
}
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
|
||||
margin-left: -2.25rem;
|
||||
}
|
||||
body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
|
||||
flex-shrink: 0;
|
||||
-ms-grid-row-align: stretch;
|
||||
align-self: stretch;
|
||||
width: 2.75rem;
|
||||
height: auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__button-toggle:focus .icon--menu-toggle {
|
||||
border: solid 2px #0d77b5;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__button-toggle:active {
|
||||
/* Necessary for Safari. */
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__button-toggle[aria-expanded="true"] .icon--menu-toggle:after {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
|
||||
left: 0.1875rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
|
||||
right: 0.1875rem;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle {
|
||||
width: 1.125rem;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 0.25rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__button-toggle .icon--menu-toggle:after {
|
||||
/* stylelint-disable csstools/use-logical */
|
||||
top: calc(50% - 2px);
|
||||
left: 0.1875rem;
|
||||
/* stylelint-enable csstools/use-logical */
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
content: "";
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
opacity: 0.8;
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: none;
|
||||
border-right: solid 2px currentColor;
|
||||
border-bottom: solid 2px currentColor;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
/**
|
||||
* @file
|
||||
* Button that expands second level nav when clicked.
|
||||
*/
|
||||
|
||||
@import "../../base/variables.pcss.css";
|
||||
|
||||
.primary-nav__button-toggle {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: var(--sp2);
|
||||
height: var(--sp2);
|
||||
margin-block-start: var(--sp0-5); /* Visually align button with menu link text. */
|
||||
padding-block: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
cursor: pointer;
|
||||
text-indent: -999px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&:focus {
|
||||
outline: auto 2px var(--color--blue-50);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
& .icon--menu-toggle {
|
||||
position: absolute;
|
||||
/* stylelint-disable csstools/use-logical */
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/* stylelint-enable csstools/use-logical */
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transition: background-color 0.2s;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 2px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
/* stylelint-disable csstools/use-logical */
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
/* stylelint-enable csstools/use-logical */
|
||||
width: var(--sp);
|
||||
height: 0;
|
||||
content: "";
|
||||
transform: translate(-50%, -50%);
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid 3px var(--color--blue-50);
|
||||
}
|
||||
|
||||
&:after {
|
||||
transition: opacity 0.2s;
|
||||
transform: translate(-50%, -50%) rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded="true"] .icon--menu-toggle:after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* aria-hidden attribute is removed by JS. Button is non-functional
|
||||
until JS is enabled.
|
||||
*/
|
||||
&[aria-hidden="true"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) {
|
||||
@media (--nav) {
|
||||
& .primary-nav__button-toggle {
|
||||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
width: calc(var(--sp2) + 8px);
|
||||
height: auto;
|
||||
margin-block-start: 0;
|
||||
margin-inline-end: calc(-1 * var(--sp2));
|
||||
|
||||
&:focus {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
|
||||
& .icon--menu-toggle {
|
||||
border: solid 2px var(--color--blue-20);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
/* Necessary for Safari. */
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
&[aria-expanded="true"] .icon--menu-toggle:after {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
& .icon--menu-toggle {
|
||||
inset-inline-start: 3px;
|
||||
width: 18px;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 4px;
|
||||
background-color: var(--color--white);
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
/* stylelint-disable csstools/use-logical */
|
||||
top: calc(50% - 2px);
|
||||
left: 3px;
|
||||
/* stylelint-enable csstools/use-logical */
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
content: "";
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
opacity: 0.8;
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: none;
|
||||
border-right: solid 2px currentColor;
|
||||
border-bottom: solid 2px currentColor;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styles for primary navigation when JavaScript is disabled.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Mobile styles for primary navigation when JS is disabled.
|
||||
*/
|
||||
|
||||
@media (max-width: 75rem) {
|
||||
html:not(.js) .primary-nav__menu--level-1 {
|
||||
column-width: 18.75rem;
|
||||
column-gap: 2.25rem;
|
||||
}
|
||||
|
||||
html:not(.js) .primary-nav__menu-item {
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
html:not(.js) .site-header__inner__container {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
html:not(.js) .mobile-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[dir="ltr"]:not(.js) .header-nav {
|
||||
margin-left: 2.25rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"]:not(.js) .header-nav {
|
||||
margin-right: 2.25rem;
|
||||
}
|
||||
|
||||
html[dir="ltr"]:not(.js) .header-nav {
|
||||
margin-right: 2.25rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"]:not(.js) .header-nav {
|
||||
margin-left: 2.25rem;
|
||||
}
|
||||
|
||||
html[dir="ltr"]:not(.js) .header-nav {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"]:not(.js) .header-nav {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
html[dir="ltr"]:not(.js) .header-nav {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"]:not(.js) .header-nav {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
|
||||
html:not(.js) .header-nav {
|
||||
border: solid 1px #e7edf1 !important;
|
||||
}
|
||||
|
||||
html:not(.js) .header-nav {
|
||||
position: static;
|
||||
visibility: visible;
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin-top: 2.25rem;
|
||||
margin-bottom: 0;
|
||||
padding-top: 2.25rem;
|
||||
padding-bottom: 0;
|
||||
transform: none;
|
||||
box-shadow: 0 0 36px #d7e1e8;
|
||||
}
|
||||
|
||||
html[dir="ltr"]:not(.js) .primary-nav__menu--level-2 {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
html[dir="rtl"]:not(.js) .primary-nav__menu--level-2 {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
html:not(.js) .primary-nav__button-toggle {
|
||||
display: none;
|
||||
}
|
||||
html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,
|
||||
html:not(.js) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
/**
|
||||
* Styles for 'always on mobile navigation' when JS is disabled.
|
||||
*/
|
||||
html:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-1 {
|
||||
column-width: 18.75rem;
|
||||
column-gap: 2.25rem;
|
||||
}
|
||||
|
||||
html:not(.js) body.is-always-mobile-nav .primary-nav__menu-item {
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
html:not(.js) body.is-always-mobile-nav .site-header__inner__container {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
html:not(.js) body.is-always-mobile-nav .mobile-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
|
||||
margin-left: 2.25rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
|
||||
margin-right: 2.25rem;
|
||||
}
|
||||
|
||||
html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
|
||||
margin-right: 2.25rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
|
||||
margin-left: 2.25rem;
|
||||
}
|
||||
|
||||
html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
html[dir="ltr"]:not(.js) body.is-always-mobile-nav .header-nav {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"]:not(.js) body.is-always-mobile-nav .header-nav {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
|
||||
html:not(.js) body.is-always-mobile-nav .header-nav {
|
||||
border: solid 1px #e7edf1 !important;
|
||||
}
|
||||
|
||||
html:not(.js) body.is-always-mobile-nav .header-nav {
|
||||
position: static;
|
||||
visibility: visible;
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin-top: 2.25rem;
|
||||
margin-bottom: 0;
|
||||
padding-top: 2.25rem;
|
||||
padding-bottom: 0;
|
||||
transform: none;
|
||||
box-shadow: 0 0 36px #d7e1e8;
|
||||
}
|
||||
|
||||
html[dir="ltr"]:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
html[dir="rtl"]:not(.js) body.is-always-mobile-nav .primary-nav__menu--level-2 {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
html:not(.js) body.is-always-mobile-nav .primary-nav__button-toggle {
|
||||
display: none;
|
||||
}
|
||||
html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,
|
||||
html:not(.js) body.is-always-mobile-nav .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Styles for traditional dropdown primary navigation when JS is disabled.
|
||||
*/
|
||||
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu--level-2,
|
||||
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:hover .primary-nav__menu-🥕 {
|
||||
visibility: visible;
|
||||
transform: translate(-50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
* Cannot combine the focus-within pseudo selector with other selectors,
|
||||
* because it will break IE11 and earlier versions of MS Edge.
|
||||
*/
|
||||
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu--level-2,
|
||||
html:not(.js) body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:focus-within .primary-nav__menu-🥕 {
|
||||
visibility: visible;
|
||||
transform: translate(-50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for primary navigation when JavaScript is disabled.
|
||||
*/
|
||||
|
||||
@import "../../base/variables.pcss.css";
|
||||
|
||||
:root {
|
||||
--no-js-nav-column-width: 300px;
|
||||
--no-js-nav-column-gap: var(--sp2);
|
||||
}
|
||||
|
||||
html:not(.js) {
|
||||
/**
|
||||
* Mobile styles for primary navigation when JS is disabled.
|
||||
*/
|
||||
@media (--max-nav) {
|
||||
& .primary-nav__menu--level-1 {
|
||||
column-width: var(--no-js-nav-column-width);
|
||||
column-gap: var(--no-js-nav-column-gap);
|
||||
}
|
||||
|
||||
& .primary-nav__menu-item {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
& .site-header__inner__container {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
& .mobile-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .header-nav {
|
||||
position: static;
|
||||
visibility: visible;
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin-block: var(--sp2) 0;
|
||||
margin-inline-start: var(--sp2);
|
||||
margin-inline-end: var(--sp2);
|
||||
padding-block: var(--sp2) 0;
|
||||
padding-inline-start: var(--sp2);
|
||||
padding-inline-end: var(--sp2);
|
||||
transform: none;
|
||||
border: solid 1px var(--color--gray-80) !important;
|
||||
box-shadow: 0 0 36px var(--color--gray-70);
|
||||
}
|
||||
|
||||
& .primary-nav__menu--level-2 {
|
||||
border-inline-start: 0;
|
||||
}
|
||||
|
||||
& .primary-nav__button-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (--nav) {
|
||||
/**
|
||||
* Styles for 'always on mobile navigation' when JS is disabled.
|
||||
*/
|
||||
& body.is-always-mobile-nav {
|
||||
& .primary-nav__menu--level-1 {
|
||||
column-width: var(--no-js-nav-column-width);
|
||||
column-gap: var(--no-js-nav-column-gap);
|
||||
}
|
||||
|
||||
& .primary-nav__menu-item {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
& .site-header__inner__container {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
& .mobile-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .header-nav {
|
||||
position: static;
|
||||
visibility: visible;
|
||||
flex-basis: 100%;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin-block: var(--sp2) 0;
|
||||
margin-inline-start: var(--sp2);
|
||||
margin-inline-end: var(--sp2);
|
||||
padding-block: var(--sp2) 0;
|
||||
padding-inline-start: var(--sp2);
|
||||
padding-inline-end: var(--sp2);
|
||||
transform: none;
|
||||
border: solid 1px var(--color--gray-80) !important;
|
||||
box-shadow: 0 0 36px var(--color--gray-70);
|
||||
}
|
||||
|
||||
& .primary-nav__menu--level-2 {
|
||||
border-inline-start: 0;
|
||||
}
|
||||
|
||||
& .primary-nav__button-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Styles for traditional dropdown primary navigation when JS is disabled.
|
||||
*/
|
||||
& body:not(.is-always-mobile-nav) {
|
||||
& .primary-nav__menu-item--level-1:hover {
|
||||
& .primary-nav__menu--level-2,
|
||||
& .primary-nav__menu-🥕 {
|
||||
visibility: visible;
|
||||
transform: translate(-50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Cannot combine the focus-within pseudo selector with other selectors,
|
||||
* because it will break IE11 and earlier versions of MS Edge.
|
||||
*/
|
||||
& .primary-nav__menu-item--level-1:focus-within {
|
||||
& .primary-nav__menu--level-2,
|
||||
& .primary-nav__menu-🥕 {
|
||||
visibility: visible;
|
||||
transform: translate(-50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,340 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Nav Primary (wide widths).
|
||||
*/
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-item {
|
||||
flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */
|
||||
}
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link,
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
/* Remove hover state if submenu exists. */
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-link {
|
||||
letter-spacing: 0.02em;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6875rem;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus {
|
||||
position: relative;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-link:focus:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: calc(100% + 1.125rem);
|
||||
height: 3.375rem;
|
||||
content: "";
|
||||
transform: translate(-50%, -50%);
|
||||
border: solid 2px #2494db;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
|
||||
padding-right: 0.5625rem;
|
||||
}
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
|
||||
padding-left: 0.5625rem;
|
||||
}
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
|
||||
overflow: visible; /* Necessary to view icon in IE11 */
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:focus:before {
|
||||
width: calc(100% + 1.6875rem);
|
||||
content: "";
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Chevron icon for desktop navigation. */
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
|
||||
left: calc(100% - 0.1875rem);
|
||||
}
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
|
||||
right: calc(100% - 0.1875rem);
|
||||
}
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
margin-top: -2px;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: 0;
|
||||
border-right: solid 2px currentColor;
|
||||
border-bottom: solid 2px currentColor;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
|
||||
padding-top: 2.25rem;
|
||||
padding-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner:after {
|
||||
transform-origin: center;
|
||||
border-top-width: 9px;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
|
||||
margin-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu--level-1 {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1 {
|
||||
position: relative; /* Anchor secondary menu */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: max-content;
|
||||
max-width: 12.5rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
|
||||
margin-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-item--level-1:not(:last-child) {
|
||||
margin-left: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
|
||||
position: absolute;
|
||||
z-index: 105; /* Appear above search container. */
|
||||
top: calc(100% - 0.5625rem);
|
||||
left: 50%;
|
||||
visibility: hidden;
|
||||
overflow: auto;
|
||||
width: 15.625rem;
|
||||
/**
|
||||
* Ensure that long level-2 menus will never overflow viewport (focused
|
||||
* elements should always be in viewport per accessibility guidelines).
|
||||
*/
|
||||
max-height: calc(100vh - 12.375rem);
|
||||
margin-top: 0;
|
||||
padding-top: 3.375rem;
|
||||
padding-bottom: 3.375rem;
|
||||
transition: none;
|
||||
transform: translate(-50%, -1.25rem);
|
||||
opacity: 0;
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid #2494db 9px;
|
||||
border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */
|
||||
border-bottom: solid 1px transparent;
|
||||
border-left: solid 1px transparent;
|
||||
border-radius: 0 0 2px 2px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {
|
||||
visibility: visible;
|
||||
margin-top: 0;
|
||||
transform: translate(-50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2:focus:before {
|
||||
top: 0;
|
||||
left: -0.5625rem;
|
||||
height: 100%;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner {
|
||||
padding-top: 0.5625rem;
|
||||
padding-bottom: 0.5625rem;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner:after {
|
||||
transform-origin: left;
|
||||
border-top-width: 3px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Arrow is placed outside of submenu because the submenu has the
|
||||
* `overflow: hidden` CSS rule applied.
|
||||
*/
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
|
||||
position: absolute;
|
||||
z-index: 105; /* Match level 2 menus. */
|
||||
top: calc(100% - 1.125rem);
|
||||
left: 50%;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
transform: translate(-50%, -1.25rem);
|
||||
opacity: 0;
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-right: solid 10px transparent;
|
||||
border-bottom: solid 10px #2494db;
|
||||
border-left: solid 10px transparent;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .primary-nav__menu-🥕.is-active-menu-parent {
|
||||
visibility: visible;
|
||||
transform: translate(-50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* When ensuring that long menus don't overflow viewport, we can give a
|
||||
* little extra room when the toolbar is fixed (and is shorter).
|
||||
*/
|
||||
body:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 {
|
||||
max-height: calc(100vh - 7.875rem);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Take into account Drupal's admin toolbars when ensuring that long level-2
|
||||
* menus will never overflow viewport.
|
||||
*/
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
/* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
|
||||
body.toolbar-vertical:not(.is-always-mobile-nav) .primary-nav__menu--level-2,
|
||||
body.toolbar-horizontal.toolbar-fixed:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
|
||||
max-height: calc(100vh - 14.8125rem);
|
||||
}
|
||||
|
||||
body.toolbar-vertical:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2,
|
||||
body.toolbar-horizontal.toolbar-fixed:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 {
|
||||
max-height: calc(100vh - 10.3125rem);
|
||||
}
|
||||
|
||||
/* Toolbar is horizontal fixed, and tray is open. */
|
||||
body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
|
||||
max-height: calc(100vh - 17.3125rem);
|
||||
}
|
||||
|
||||
body.toolbar-horizontal.toolbar-fixed.toolbar-tray-open:not(.is-always-mobile-nav) .is-fixed .primary-nav__menu--level-2 {
|
||||
max-height: calc(100vh - 12.8125rem);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Only apply transition styles to menu when JS is loaded. This
|
||||
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
|
||||
*/
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
html.js body:not(.is-always-mobile-nav) .primary-nav__menu--level-2,
|
||||
html.js body:not(.is-always-mobile-nav) .primary-nav__menu-🥕 {
|
||||
transition: visibility 0.2s, transform 0.2s, opacity 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .primary-nav__menu-link--level-2 .primary-nav__menu-link-inner:after {
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,266 @@
|
||||
/**
|
||||
* @file
|
||||
* Nav Primary (wide widths).
|
||||
*/
|
||||
|
||||
@import "../../base/variables.pcss.css";
|
||||
|
||||
body:not(.is-always-mobile-nav) {
|
||||
@media (--nav) {
|
||||
& .primary-nav__menu-item {
|
||||
flex-wrap: nowrap; /* Ensure that sub navigation toggle button doesn't wrap underneath link. */
|
||||
|
||||
&.primary-nav__menu-item--has-children {
|
||||
& .primary-nav__menu-link--link,
|
||||
& .primary-nav__menu-link--nolink {
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
/* Remove hover state if submenu exists. */
|
||||
& .primary-nav__menu-link--level-1 .primary-nav__menu-link-inner:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .primary-nav__menu-link {
|
||||
letter-spacing: 0.02em;
|
||||
font-size: 16px;
|
||||
line-height: var(--sp1-5);
|
||||
|
||||
&:focus {
|
||||
position: relative;
|
||||
outline: 0;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: calc(100% + var(--sp));
|
||||
height: var(--sp3);
|
||||
content: "";
|
||||
transform: translate(-50%, -50%);
|
||||
border: solid 2px var(--color--blue-50);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .primary-nav__menu-link--button {
|
||||
&.primary-nav__menu-link--has-children {
|
||||
overflow: visible; /* Necessary to view icon in IE11 */
|
||||
padding-inline-end: 9px;
|
||||
|
||||
&:focus:before {
|
||||
width: calc(100% + var(--sp1-5));
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Chevron icon for desktop navigation. */
|
||||
&:after {
|
||||
position: absolute;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: calc(100% - 3px);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-block-start: -2px;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: 0;
|
||||
border-right: solid 2px currentColor;
|
||||
border-bottom: solid 2px currentColor;
|
||||
}
|
||||
|
||||
&[aria-expanded="true"]:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .primary-nav__menu-link-inner {
|
||||
padding-block: var(--sp2);
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
|
||||
&:after {
|
||||
transform-origin: center;
|
||||
border-top-width: var(--sp0-5);
|
||||
}
|
||||
}
|
||||
|
||||
& .primary-nav__menu--level-1 {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
margin-inline-end: var(--sp);
|
||||
}
|
||||
|
||||
& .primary-nav__menu-item--level-1 {
|
||||
position: relative; /* Anchor secondary menu */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: max-content;
|
||||
max-width: 200px;
|
||||
margin-block: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-inline-end: var(--sp2);
|
||||
}
|
||||
}
|
||||
|
||||
& .primary-nav__menu--level-2 {
|
||||
position: absolute;
|
||||
z-index: 105; /* Appear above search container. */
|
||||
top: calc(100% - (0.5 * var(--sp)));
|
||||
left: 50%;
|
||||
visibility: hidden;
|
||||
overflow: auto;
|
||||
width: 250px;
|
||||
/**
|
||||
* Ensure that long level-2 menus will never overflow viewport (focused
|
||||
* elements should always be in viewport per accessibility guidelines).
|
||||
*/
|
||||
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp));
|
||||
margin-block-start: 0;
|
||||
margin-inline-start: 0;
|
||||
padding-block: calc(3 * var(--sp));
|
||||
padding-inline-start: var(--sp2);
|
||||
padding-inline-end: var(--sp2);
|
||||
transition: none;
|
||||
transform: translate(-50%, -20px);
|
||||
opacity: 0;
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid var(--color--blue-50) var(--sp0-5);
|
||||
border-right: solid 1px transparent; /* Transparent borders useful for Windows High Contrast mode. */
|
||||
border-bottom: solid 1px transparent;
|
||||
border-left: solid 1px transparent;
|
||||
border-radius: 0 0 2px 2px;
|
||||
background: var(--color--white);
|
||||
box-shadow: 0 1px 36px rgba(0, 0, 0, 0.08);
|
||||
|
||||
&.is-active-menu-parent {
|
||||
visibility: visible;
|
||||
margin-block-start: 0;
|
||||
transform: translate(-50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& .primary-nav__menu-link--level-2 {
|
||||
display: block;
|
||||
|
||||
&:focus:before {
|
||||
top: 0;
|
||||
left: calc(var(--sp0-5) * -1);
|
||||
height: 100%;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
& .primary-nav__menu-link-inner {
|
||||
padding-block: var(--sp0-5);
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
|
||||
&:after {
|
||||
transform-origin: left;
|
||||
border-top-width: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Arrow is placed outside of submenu because the submenu has the
|
||||
* `overflow: hidden` CSS rule applied.
|
||||
*/
|
||||
& .primary-nav__menu-🥕 {
|
||||
position: absolute;
|
||||
z-index: 105; /* Match level 2 menus. */
|
||||
top: calc(100% - var(--sp));
|
||||
left: 50%;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
transform: translate(-50%, -20px);
|
||||
opacity: 0;
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-right: solid 10px transparent;
|
||||
border-bottom: solid 10px var(--color--blue-50);
|
||||
border-left: solid 10px transparent;
|
||||
|
||||
&.is-active-menu-parent {
|
||||
visibility: visible;
|
||||
transform: translate(-50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* When ensuring that long menus don't overflow viewport, we can give a
|
||||
* little extra room when the toolbar is fixed (and is shorter).
|
||||
*/
|
||||
& .is-fixed .primary-nav__menu--level-2 {
|
||||
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) + var(--sp4));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Take into account Drupal's admin toolbars when ensuring that long level-2
|
||||
* menus will never overflow viewport.
|
||||
*/
|
||||
@media (--nav) {
|
||||
body:not(.is-always-mobile-nav) {
|
||||
/* Toolbar is fixed, and tray is vertical or toolbar is horizontal and tray is closed. */
|
||||
&.toolbar-vertical,
|
||||
&.toolbar-horizontal.toolbar-fixed {
|
||||
& .primary-nav__menu--level-2 {
|
||||
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height));
|
||||
}
|
||||
|
||||
& .is-fixed .primary-nav__menu--level-2 {
|
||||
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) + var(--sp4));
|
||||
}
|
||||
}
|
||||
|
||||
/* Toolbar is horizontal fixed, and tray is open. */
|
||||
&.toolbar-horizontal.toolbar-fixed.toolbar-tray-open {
|
||||
& .primary-nav__menu--level-2 {
|
||||
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) - var(--toolbar-tray-height));
|
||||
}
|
||||
|
||||
& .is-fixed .primary-nav__menu--level-2 {
|
||||
max-height: calc(100vh - var(--site-header-height-wide) - var(--sp) - var(--toolbar-height) - var(--toolbar-tray-height) + var(--sp4));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Only apply transition styles to menu when JS is loaded. This
|
||||
* works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
|
||||
*/
|
||||
html.js body:not(.is-always-mobile-nav) {
|
||||
@media (--nav) {
|
||||
& .primary-nav__menu--level-2,
|
||||
& .primary-nav__menu-🥕 {
|
||||
transition: visibility 0.2s, transform 0.2s, opacity 0.2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
& body:not(.is-always-mobile-nav) {
|
||||
@media (--nav) {
|
||||
& .primary-nav__menu-link--level-2 {
|
||||
& .primary-nav__menu-link-inner:after {
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,343 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Nav Primary.
|
||||
*/
|
||||
|
||||
.primary-nav__menu {
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.primary-nav__menu-item {
|
||||
margin-bottom: 0.5625rem;
|
||||
}
|
||||
|
||||
.primary-nav__menu-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.primary-nav__menu-item.primary-nav__menu-item--has-children {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link,
|
||||
.primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
|
||||
/* Ensure that long text doesn't make the mobile expand button wrap. */
|
||||
flex-basis: calc(100% - 3.375rem);
|
||||
}
|
||||
|
||||
.primary-nav__menu-link {
|
||||
flex-grow: 1;
|
||||
text-decoration: none;
|
||||
color: #0d1214;
|
||||
font-size: 1.75rem;
|
||||
font-weight: bold;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link:focus {
|
||||
outline: auto 2px #2494db;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu-link--nolink {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu-link--nolink {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu-link--nolink {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu-link--nolink {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link--nolink {
|
||||
padding-top: 0.5625rem;
|
||||
padding-bottom: 0.5625rem;
|
||||
color: #6e7172;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu-link--button {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu-link--button {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu-link--button {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu-link--button {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu-link--button {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu-link--button {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link--button {
|
||||
position: relative;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
/* Plus icon for mobile navigation. */
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
|
||||
padding-right: 3.375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children {
|
||||
padding-left: 3.375rem;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link--button.primary-nav__menu-link--has-children { /* Ensure text does not overlap icon. */
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,
|
||||
[dir="ltr"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
|
||||
right: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,
|
||||
[dir="rtl"] .primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
|
||||
left: 0.5625rem;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link--button.primary-nav__menu-link--has-children:before,
|
||||
.primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
|
||||
position: absolute;
|
||||
top: 1.625rem; /* Visually align button with menu link text. */
|
||||
width: 1.125rem;
|
||||
height: 0;
|
||||
content: "";
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid 3px #2494db;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link--button.primary-nav__menu-link--has-children:after {
|
||||
transition: opacity 0.2s;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]:after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu-link-inner {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu-link-inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu-link-inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu-link-inner {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link-inner {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-top: 0.5625rem;
|
||||
padding-bottom: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu-link-inner:after {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu-link-inner:after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link-inner:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
content: "";
|
||||
transition: transform 0.2s;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid 5px #2494db;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link:hover .primary-nav__menu-link-inner:after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
/*
|
||||
Top level specific styles.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .primary-nav__menu--level-1 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu--level-1 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu--level-1 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu--level-1 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu--level-1 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu--level-1 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu--level-1 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu--level-1 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.primary-nav__menu--level-1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link--level-1 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
/*
|
||||
Secondary menu specific styles.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .primary-nav__menu--level-2 {
|
||||
margin-left: -1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu--level-2 {
|
||||
margin-right: -1.125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu--level-2 {
|
||||
padding-left: 2.8125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu--level-2 {
|
||||
padding-right: 2.8125rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu--level-2 {
|
||||
border-left: solid 1.125rem #2494db;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu--level-2 {
|
||||
border-right: solid 1.125rem #2494db;
|
||||
}
|
||||
|
||||
.primary-nav__menu--level-2 {
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
flex-basis: 100%;
|
||||
max-height: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
transition: opacity 0.2s, visibility 0.2s, max-height 0.2s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.primary-nav__menu--level-2.is-active-menu-parent {
|
||||
visibility: visible;
|
||||
max-height: none;
|
||||
margin-top: 1.6875rem;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 43.75rem) {
|
||||
|
||||
[dir="ltr"] .primary-nav__menu--level-2 {
|
||||
margin-left: -3.375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu--level-2 {
|
||||
margin-right: -3.375rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .primary-nav__menu--level-2 {
|
||||
padding-left: 3.375rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu--level-2 {
|
||||
padding-right: 3.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Olivero doesn't officially support nested tertiary submenus, but this
|
||||
* ensures that it doesn't break all the way.
|
||||
*
|
||||
* @see https://www.drupal.org/project/drupal/issues/3221399
|
||||
*/
|
||||
|
||||
.primary-nav__menu--level-2 .primary-nav__menu-item--has-children {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link--level-2 {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
html:not(.js) .primary-nav__menu--level-2 {
|
||||
visibility: visible;
|
||||
max-height: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[dir="rtl"] .primary-nav__menu-link-inner:after {
|
||||
transform-origin: right;
|
||||
}
|
||||
@@ -0,0 +1,201 @@
|
||||
/**
|
||||
* @file
|
||||
* Nav Primary.
|
||||
*/
|
||||
|
||||
@import "../../base/variables.pcss.css";
|
||||
|
||||
.primary-nav__menu {
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.primary-nav__menu-item {
|
||||
margin-block-end: var(--sp0-5);
|
||||
|
||||
&:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
&.primary-nav__menu-item--has-children {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
& .primary-nav__menu-link--link,
|
||||
& .primary-nav__menu-link--nolink {
|
||||
/* Ensure that long text doesn't make the mobile expand button wrap. */
|
||||
flex-basis: calc(100% - var(--sp3));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.primary-nav__menu-link {
|
||||
flex-grow: 1;
|
||||
text-decoration: none;
|
||||
color: var(--color--gray-0);
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
line-height: var(--sp2);
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: auto 2px var(--color--blue-50);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-nav__menu-link--nolink {
|
||||
padding-block: var(--sp0-5);
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
color: var(--color--gray-20);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link--button {
|
||||
position: relative;
|
||||
padding-block: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
cursor: pointer;
|
||||
text-align: start;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
/* Plus icon for mobile navigation. */
|
||||
&.primary-nav__menu-link--has-children {
|
||||
padding-inline-end: var(--sp3); /* Ensure text does not overlap icon. */
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
inset-inline-end: 9px;
|
||||
inset-block-start: calc(var(--sp0-5) + 17px); /* Visually align button with menu link text. */
|
||||
width: 18px;
|
||||
height: 0;
|
||||
content: "";
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid 3px var(--color--blue-50);
|
||||
}
|
||||
|
||||
&:after {
|
||||
transition: opacity 0.2s;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&[aria-expanded="true"]:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.primary-nav__menu-link-inner {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-block: var(--sp0-5);
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
content: "";
|
||||
transition: transform 0.2s;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid 5px var(--color--blue-50);
|
||||
}
|
||||
|
||||
&:after {
|
||||
@nest .primary-nav__menu-link:hover & {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Top level specific styles.
|
||||
*/
|
||||
.primary-nav__menu--level-1 {
|
||||
margin-block: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
padding-block: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link--level-1 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
/*
|
||||
Secondary menu specific styles.
|
||||
*/
|
||||
.primary-nav__menu--level-2 {
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
flex-basis: 100%;
|
||||
max-height: 0;
|
||||
margin-block: 0;
|
||||
margin-inline-start: calc(-1 * var(--sp));
|
||||
padding-inline-start: var(--sp2-5);
|
||||
transition: opacity 0.2s, visibility 0.2s, max-height 0.2s;
|
||||
opacity: 0;
|
||||
border-inline-start: solid var(--sp) var(--color--blue-50);
|
||||
|
||||
&.is-active-menu-parent {
|
||||
visibility: visible;
|
||||
max-height: none;
|
||||
margin-block-start: var(--sp1-5);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (--md) {
|
||||
margin-inline-start: calc(-1 * var(--sp3));
|
||||
padding-inline-start: var(--sp3);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Olivero doesn't officially support nested tertiary submenus, but this
|
||||
* ensures that it doesn't break all the way.
|
||||
*
|
||||
* @see https://www.drupal.org/project/drupal/issues/3221399
|
||||
*/
|
||||
.primary-nav__menu--level-2 .primary-nav__menu-item--has-children {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.primary-nav__menu-link--level-2 {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: var(--sp);
|
||||
}
|
||||
|
||||
html:not(.js) {
|
||||
& .primary-nav__menu--level-2 {
|
||||
visibility: visible;
|
||||
max-height: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] {
|
||||
& .primary-nav__menu-link-inner {
|
||||
&:after {
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Secondary navigation styling.
|
||||
*/
|
||||
|
||||
.secondary-nav {
|
||||
letter-spacing: 0.02em;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
[dir="ltr"] .secondary-nav__menu {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .secondary-nav__menu {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .secondary-nav__menu {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .secondary-nav__menu {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .secondary-nav__menu {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .secondary-nav__menu {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .secondary-nav__menu {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .secondary-nav__menu {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.secondary-nav__menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.secondary-nav__menu-item {
|
||||
/* Parent element is set to flex-basis: 0. We
|
||||
* don't want text to wrap unless it goes over a
|
||||
* certain arbitrary width.
|
||||
*/
|
||||
|
||||
/* @todo should this be scoped to desktop nav? */
|
||||
width: max-content;
|
||||
max-width: 12.5rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .secondary-nav__menu-item:not(:last-child) {
|
||||
margin-right: 1.6875rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .secondary-nav__menu-item:not(:last-child) {
|
||||
margin-left: 1.6875rem;
|
||||
}
|
||||
|
||||
.secondary-nav__menu-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 2.25rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.secondary-nav__menu-link:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
content: "";
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
transform: translateY(0.3125rem);
|
||||
opacity: 0;
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid 2px currentColor;
|
||||
}
|
||||
|
||||
.secondary-nav__menu-link:hover:after {
|
||||
transform: translateY(0);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
|
||||
margin-right: 1.125rem;
|
||||
}
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav {
|
||||
padding-left: 2.25rem;
|
||||
}
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav {
|
||||
padding-right: 2.25rem;
|
||||
}
|
||||
body:not(.is-always-mobile-nav) .secondary-nav {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav:before {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .secondary-nav:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 2px;
|
||||
height: 2.25rem;
|
||||
content: "";
|
||||
transform: translateY(-50%);
|
||||
background-color: #d7e1e8;
|
||||
}
|
||||
|
||||
[dir="ltr"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
|
||||
margin-right: 2.25rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] body:not(.is-always-mobile-nav) .secondary-nav__menu-item:not(:last-child) {
|
||||
margin-left: 2.25rem;
|
||||
}
|
||||
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus {
|
||||
position: relative;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .secondary-nav__menu-link:focus:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: calc(100% + 1.125rem);
|
||||
height: 3.375rem;
|
||||
content: "";
|
||||
transform: translate(-50%, -50%);
|
||||
border: solid 2px #2494db;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
/**
|
||||
* @file
|
||||
* Secondary navigation styling.
|
||||
*/
|
||||
|
||||
@import "../../base/variables.pcss.css";
|
||||
|
||||
.secondary-nav {
|
||||
letter-spacing: 0.02em;
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.secondary-nav__menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-block: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
padding-block: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.secondary-nav__menu-item {
|
||||
/* Parent element is set to flex-basis: 0. We
|
||||
* don't want text to wrap unless it goes over a
|
||||
* certain arbitrary width.
|
||||
*/
|
||||
|
||||
/* @todo should this be scoped to desktop nav? */
|
||||
width: max-content;
|
||||
max-width: 200px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-inline-end: var(--sp1-5);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-nav__menu-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: var(--sp2);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
content: "";
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
transform: translateY(5px);
|
||||
opacity: 0;
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid 2px currentColor;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
transform: translateY(0);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) {
|
||||
@media (--nav) {
|
||||
& .secondary-nav {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-inline-start: var(--sp);
|
||||
padding-inline-start: var(--sp2);
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 0;
|
||||
width: 2px;
|
||||
height: var(--sp2);
|
||||
content: "";
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--color--gray-70);
|
||||
}
|
||||
}
|
||||
|
||||
& .secondary-nav__menu-item:not(:last-child) {
|
||||
margin-inline-end: var(--sp2);
|
||||
}
|
||||
|
||||
& .secondary-nav__menu-link {
|
||||
&:focus {
|
||||
position: relative;
|
||||
outline: 0;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: calc(100% + var(--sp));
|
||||
height: var(--sp3);
|
||||
content: "";
|
||||
transform: translate(-50%, -50%);
|
||||
border: solid 2px var(--color--blue-50);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Button which expands the navigation at wide viewport widths.
|
||||
*/
|
||||
|
||||
.wide-nav-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
.wide-nav-expand {
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 5.625rem;
|
||||
height: 6.75rem;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
background-color: #2494db;
|
||||
}
|
||||
|
||||
.wide-nav-expand:focus {
|
||||
outline: solid 2px currentColor;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
body:not(.is-always-mobile-nav) .is-fixed .wide-nav-expand {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
body.is-always-mobile-nav .wide-nav-expand {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.wide-nav-expand__icon {
|
||||
position: relative;
|
||||
width: 2.25rem;
|
||||
height: 1.3125rem;
|
||||
transition: opacity 0.2s;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.wide-nav-expand__icon > span {
|
||||
display: block;
|
||||
height: 0;
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid 3px currentColor;
|
||||
}
|
||||
|
||||
[dir="ltr"] .wide-nav-expand__icon > span:nth-child(1) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .wide-nav-expand__icon > span:nth-child(1) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.wide-nav-expand__icon > span:nth-child(1) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: transform 0.2s;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
[dir="ltr"] .wide-nav-expand__icon > span:nth-child(2) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .wide-nav-expand__icon > span:nth-child(2) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.wide-nav-expand__icon > span:nth-child(2) {
|
||||
position: absolute;
|
||||
top: 0.5625rem;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: opacity 0.2s;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
[dir="ltr"] .wide-nav-expand__icon > span:nth-child(3) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .wide-nav-expand__icon > span:nth-child(3) {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.wide-nav-expand__icon > span:nth-child(3) {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: transform 0.2s;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
.is-fixed .wide-nav-expand__icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(1) {
|
||||
top: 0.5625rem;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[aria-expanded="true"] .wide-nav-expand__icon > span:nth-child(3) {
|
||||
top: 0.5625rem;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* @file
|
||||
* Button which expands the navigation at wide viewport widths.
|
||||
*/
|
||||
|
||||
@import "../../base/variables.pcss.css";
|
||||
|
||||
.wide-nav-expand {
|
||||
display: none;
|
||||
|
||||
@media (--nav) {
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--content-left);
|
||||
height: var(--sp6);
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
color: var(--color--white);
|
||||
border: 0;
|
||||
background-color: var(--color--blue-50);
|
||||
|
||||
&:focus {
|
||||
outline: solid 2px currentColor;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.is-always-mobile-nav) .is-fixed .wide-nav-expand {
|
||||
@media (--nav) {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
body.is-always-mobile-nav .wide-nav-expand {
|
||||
@media (--nav) {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.wide-nav-expand__icon {
|
||||
position: relative;
|
||||
width: var(--sp2);
|
||||
height: 21px;
|
||||
transition: opacity 0.2s;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform-style: preserve-3d;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
height: 0;
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid 3px currentColor;
|
||||
|
||||
&:nth-child(1) {
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: transform 0.2s;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
position: absolute;
|
||||
inset-block-start: 9px;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: opacity 0.2s;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
position: absolute;
|
||||
inset-block: auto 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
transition: transform 0.2s;
|
||||
background-color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-fixed .wide-nav-expand__icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[aria-expanded="true"] .wide-nav-expand__icon {
|
||||
& > span:nth-child(1) {
|
||||
inset-block-start: 9px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
& > span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
& > span:nth-child(3) {
|
||||
inset-block-start: 9px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Node preview container styling.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .node-preview-container {
|
||||
padding-left: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .node-preview-container {
|
||||
padding-right: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="ltr"] .node-preview-container {
|
||||
padding-right: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .node-preview-container {
|
||||
padding-left: 0.5625rem;
|
||||
}
|
||||
|
||||
.node-preview-container {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
background: #fff;
|
||||
box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .node-preview-container {
|
||||
box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
body.toolbar-vertical.toolbar-tray-open .node-preview-container {
|
||||
max-width: calc(100vw - 15.875rem);
|
||||
}
|
||||
|
||||
.node-preview-form-select {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
[dir="ltr"] .node-preview-backlink {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .node-preview-backlink {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .node-preview-backlink {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .node-preview-backlink {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.node-preview-backlink {
|
||||
margin-top: 0.5625rem;
|
||||
margin-bottom: 0.5625rem;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* @file
|
||||
* Node preview container styling.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.node-preview-container {
|
||||
padding-block: 0;
|
||||
padding-inline-start: var(--sp0-5);
|
||||
padding-inline-end: var(--sp0-5);
|
||||
background: var(--color--white);
|
||||
box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */
|
||||
}
|
||||
|
||||
[dir="rtl"] .node-preview-container {
|
||||
box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
body.toolbar-vertical.toolbar-tray-open .node-preview-container {
|
||||
max-width: calc(100vw - var(--toolbar-tray-vertical-width) - var(--scrollbar-width));
|
||||
}
|
||||
|
||||
.node-preview-form-select {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.node-preview-backlink {
|
||||
margin-block: var(--sp0-5);
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Node Teaser specific styles.
|
||||
*/
|
||||
|
||||
.node--view-mode-teaser {
|
||||
position: relative; /* Anchor after pseudo-element. */
|
||||
margin-bottom: 1.6875rem;
|
||||
}
|
||||
|
||||
.node--view-mode-teaser:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 3.375rem;
|
||||
height: 0;
|
||||
content: "";
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid 2px #e7edf1;
|
||||
}
|
||||
|
||||
.node--view-mode-teaser .node__meta {
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.node--view-mode-teaser .node__meta a {
|
||||
color: #0d77b5;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.node--view-mode-teaser .node__top-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
.node--view-mode-teaser .node__top-wrapper {
|
||||
position: relative; /* Anchor the image */
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] .node--view-mode-teaser .primary-image {
|
||||
margin-right: 1.125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .node--view-mode-teaser .primary-image {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
|
||||
.node--view-mode-teaser .primary-image {
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 1.125rem;
|
||||
|
||||
/* Ensure title does not wrap under image until necessary. */
|
||||
}
|
||||
|
||||
.node--view-mode-teaser .primary-image + .node__title {
|
||||
flex-basis: calc(100% - 5.0625rem);
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
.node--view-mode-teaser .primary-image + .node__title {
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.node--view-mode-teaser .primary-image a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.node--view-mode-teaser .primary-image img {
|
||||
width: 3.9375rem;
|
||||
height: 3.9375rem;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
.node--view-mode-teaser .primary-image img {
|
||||
width: calc(7.14286vw - 2.31696rem);
|
||||
height: calc(7.14286vw - 2.31696rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
.node--view-mode-teaser .primary-image img {
|
||||
width: calc(7.14286vw - 2.87946rem);
|
||||
height: calc(7.14286vw - 2.87946rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 90rem) {
|
||||
|
||||
.node--view-mode-teaser .primary-image img {
|
||||
width: 3.61607rem;
|
||||
height: 3.61607rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
[dir="ltr"] .node--view-mode-teaser .primary-image {
|
||||
left: calc(-7.14286vw - -0.06696rem);
|
||||
}
|
||||
|
||||
[dir="rtl"] .node--view-mode-teaser .primary-image {
|
||||
right: calc(-7.14286vw - -0.06696rem);
|
||||
}
|
||||
|
||||
.node--view-mode-teaser .primary-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 75rem) {
|
||||
|
||||
[dir="ltr"] .node--view-mode-teaser .primary-image {
|
||||
left: calc(-7.14286vw - -0.62946rem);
|
||||
}
|
||||
|
||||
[dir="rtl"] .node--view-mode-teaser .primary-image {
|
||||
right: calc(-7.14286vw - -0.62946rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 90rem) {
|
||||
|
||||
[dir="ltr"] .node--view-mode-teaser .primary-image {
|
||||
left: -5.86607rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .node--view-mode-teaser .primary-image {
|
||||
right: -5.86607rem;
|
||||
}
|
||||
}
|
||||
|
||||
.node--view-mode-teaser .node__title {
|
||||
margin: 0;
|
||||
margin-bottom: 1.125rem;
|
||||
color: #0d1214;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.6875rem;
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
.node--view-mode-teaser .node__title {
|
||||
font-size: 2.25rem;
|
||||
line-height: 3.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .node--view-mode-teaser .field--tag-ref {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .node--view-mode-teaser .field--tag-ref {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.node--view-mode-teaser .field--tag-ref {
|
||||
margin-top: 1.125rem;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
.node--view-mode-teaser .field--tag-ref {
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
.node--view-mode-teaser {
|
||||
margin-bottom: 3.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.views-row:last-child .node--view-mode-teaser {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
/**
|
||||
* @file
|
||||
* Node Teaser specific styles.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.node--view-mode-teaser {
|
||||
position: relative; /* Anchor after pseudo-element. */
|
||||
margin-block-end: var(--sp1-5);
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
inset-block-end: 0;
|
||||
width: var(--sp3);
|
||||
height: 0;
|
||||
content: "";
|
||||
/* Intentionally not using CSS logical properties. */
|
||||
border-top: solid 2px var(--color--gray-80);
|
||||
}
|
||||
|
||||
& .node__meta {
|
||||
margin-block-end: var(--sp);
|
||||
|
||||
& a {
|
||||
color: var(--color--blue-20);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
& .node__top-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
|
||||
@media (--lg) {
|
||||
position: relative; /* Anchor the image */
|
||||
}
|
||||
}
|
||||
|
||||
& .primary-image {
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
margin-block-end: var(--sp1);
|
||||
margin-inline-end: var(--sp1);
|
||||
|
||||
/* Ensure title does not wrap under image until necessary. */
|
||||
& + .node__title {
|
||||
flex-basis: calc(100% - calc(4.5 * var(--sp)));
|
||||
|
||||
@media (--lg) {
|
||||
flex-basis: auto;
|
||||
}
|
||||
}
|
||||
|
||||
& a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& img {
|
||||
width: calc(3.5 * var(--sp));
|
||||
height: calc(3.5 * var(--sp));
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
|
||||
@media (--lg) {
|
||||
width: var(--grid-col-width--lg);
|
||||
height: var(--grid-col-width--lg);
|
||||
}
|
||||
|
||||
@media (--nav) {
|
||||
width: var(--grid-col-width--nav);
|
||||
height: var(--grid-col-width--nav);
|
||||
}
|
||||
|
||||
@media (--grid-max) {
|
||||
width: var(--grid-col-width--max);
|
||||
height: var(--grid-col-width--max);
|
||||
}
|
||||
}
|
||||
|
||||
@media (--lg) {
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: calc(-1 * ((var(--grid-col-width--lg) + var(--grid-gap--lg))));
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (--nav) {
|
||||
inset-inline-start: calc(-1 * ((var(--grid-col-width--nav) + var(--grid-gap--nav))));
|
||||
}
|
||||
|
||||
@media (--grid-max) {
|
||||
inset-inline-start: calc(-1 * ((var(--grid-col-width--max) + var(--grid-gap--max))));
|
||||
}
|
||||
}
|
||||
|
||||
& .node__title {
|
||||
margin: 0;
|
||||
margin-block-end: var(--sp1);
|
||||
color: var(--color--gray-0);
|
||||
font-size: 24px;
|
||||
line-height: var(--line-height-base);
|
||||
|
||||
@media (--lg) {
|
||||
font-size: var(--sp2);
|
||||
line-height: var(--sp3);
|
||||
}
|
||||
}
|
||||
|
||||
& .field--tag-ref {
|
||||
margin-block-start: var(--sp1);
|
||||
margin-block-end: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
padding-block: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
background-color: transparent;
|
||||
|
||||
@media (--lg) {
|
||||
margin-block-start: var(--sp2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (--lg) {
|
||||
margin-block-end: var(--sp3);
|
||||
}
|
||||
}
|
||||
|
||||
.views-row:last-child .node--view-mode-teaser {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
@@ -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
|
||||
* Node specific styles.
|
||||
*/
|
||||
|
||||
.node__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1.125rem;
|
||||
color: #6e7172;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
.node__meta a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
.node__meta {
|
||||
margin-bottom: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] .node__author-image img {
|
||||
margin-right: 0.5625rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .node__author-image img {
|
||||
margin-left: 0.5625rem;
|
||||
}
|
||||
|
||||
.node__author-image img {
|
||||
width: 2.8125rem;
|
||||
height: 2.8125rem;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.node__title a {
|
||||
padding-bottom: 0.1875rem;
|
||||
transition: background-size 0.2s, color 0.2s;
|
||||
text-decoration: none;
|
||||
color: #0d1214;
|
||||
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.1875rem;
|
||||
}
|
||||
|
||||
.node__title a:hover,
|
||||
.node__title a:focus {
|
||||
color: #0d77b5;
|
||||
}
|
||||
|
||||
[dir="rtl"] .node__title {
|
||||
background-position: bottom right;
|
||||
}
|
||||
|
||||
.node__content {
|
||||
padding-bottom: 1.6875rem;
|
||||
}
|
||||
|
||||
@media (min-width: 62.5rem) {
|
||||
|
||||
.node__content {
|
||||
padding-bottom: 3.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.node--unpublished {
|
||||
/* There is no variable for the color - #fff4f4. */
|
||||
background-color: #fff4f4;
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/**
|
||||
* @file
|
||||
* Node specific styles.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.node__meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-block-end: var(--sp1);
|
||||
color: var(--color--gray-20);
|
||||
font-size: 14px;
|
||||
line-height: var(--sp);
|
||||
|
||||
& a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (--sm) {
|
||||
margin-block-end: var(--sp2);
|
||||
}
|
||||
}
|
||||
|
||||
.node__author-image img {
|
||||
width: var(--sp2-5);
|
||||
height: var(--sp2-5);
|
||||
margin-inline-end: var(--sp0-5);
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.node__title {
|
||||
& a {
|
||||
padding-block-end: 3px;
|
||||
transition: background-size 0.2s, color 0.2s;
|
||||
text-decoration: none;
|
||||
color: var(--color--gray-0);
|
||||
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 3px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--color--blue-20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .node__title {
|
||||
background-position: bottom right;
|
||||
}
|
||||
|
||||
.node__content {
|
||||
padding-block-end: var(--sp1-5);
|
||||
|
||||
@media (--lg) {
|
||||
padding-block-end: var(--sp3);
|
||||
}
|
||||
}
|
||||
|
||||
.node--unpublished {
|
||||
/* There is no variable for the color - #fff4f4. */
|
||||
background-color: #fff4f4;
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Settings tray specific styles.
|
||||
*/
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas .form-type-boolean {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas .form-type-boolean {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .form-type-boolean {
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .form-type-boolean input[type="checkbox"],
|
||||
#drupal-off-canvas .form-type-boolean input[type="radio"] {
|
||||
float: none;
|
||||
width: 0.84375rem;
|
||||
height: 0.84375rem;
|
||||
transform: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
[dir="ltr"] #drupal-off-canvas .form-type-boolean .form-item__description {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] #drupal-off-canvas .form-type-boolean .form-item__description {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Necessary for Safari. */
|
||||
|
||||
#drupal-off-canvas .olivero-details {
|
||||
border-top: solid 1px rgba(255, 255, 255, 0.25);
|
||||
border-bottom: solid 1px rgba(255, 255, 255, 0.25);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .olivero-details__wrapper {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
/* Necessary for Safari. */
|
||||
|
||||
#drupal-off-canvas .olivero-details__summary {
|
||||
display: block;
|
||||
list-style: disc outside none;
|
||||
list-style: initial;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .olivero-details__summary:focus {
|
||||
outline: solid 1px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
#drupal-off-canvas .olivero-details__summary:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas .olivero-details__summary::-webkit-details-marker {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Necessary for IE11. */
|
||||
|
||||
#drupal-off-canvas .olivero-details__summary .details-title:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Necessary for Firefox. */
|
||||
|
||||
@supports (list-style-type: disclosure-closed) {
|
||||
|
||||
#drupal-off-canvas .olivero-details__summary {
|
||||
display: list-item;
|
||||
list-style-position: inside;
|
||||
list-style-type: disclosure-closed;
|
||||
}
|
||||
}
|
||||
|
||||
/* Necessary for Firefox. */
|
||||
|
||||
@supports (list-style-type: disclosure-open) {
|
||||
|
||||
#drupal-off-canvas .olivero-details[open] .olivero-details__summary {
|
||||
list-style-type: disclosure-open;
|
||||
}
|
||||
}
|
||||
|
||||
/* Necessary for Safari. */
|
||||
|
||||
#drupal-off-canvas div {
|
||||
display: block;
|
||||
color: #ddd;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* @file
|
||||
* Settings tray specific styles.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
#drupal-off-canvas {
|
||||
& .form-type-boolean {
|
||||
margin-inline-start: 0;
|
||||
line-height: var(--line-height-s);
|
||||
|
||||
& input[type="checkbox"],
|
||||
& input[type="radio"] {
|
||||
float: none;
|
||||
width: var(--sp0-75);
|
||||
height: var(--sp0-75);
|
||||
transform: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& .form-item__description {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Necessary for Safari. */
|
||||
& .olivero-details {
|
||||
border-top: solid 1px rgba(255, 255, 255, 0.25);
|
||||
border-bottom: solid 1px rgba(255, 255, 255, 0.25);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
& .olivero-details__wrapper {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Necessary for Safari. */
|
||||
& .olivero-details__summary {
|
||||
display: block;
|
||||
list-style: initial;
|
||||
|
||||
&:focus {
|
||||
outline: solid 1px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&::-webkit-details-marker {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Necessary for IE11. */
|
||||
& .details-title:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Necessary for Firefox. */
|
||||
@supports (list-style-type: disclosure-closed) {
|
||||
display: list-item;
|
||||
list-style-position: inside;
|
||||
list-style-type: disclosure-closed;
|
||||
}
|
||||
}
|
||||
|
||||
/* Necessary for Firefox. */
|
||||
& .olivero-details[open] .olivero-details__summary {
|
||||
@supports (list-style-type: disclosure-open) {
|
||||
list-style-type: disclosure-open;
|
||||
}
|
||||
}
|
||||
|
||||
/* Necessary for Safari. */
|
||||
& div {
|
||||
display: block;
|
||||
color: #ddd;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Page title.
|
||||
*/
|
||||
|
||||
.page-title {
|
||||
/*
|
||||
Necessary to properly display the star icon from core's shortcut
|
||||
module.
|
||||
*/
|
||||
display: inline;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* @file
|
||||
* Page title.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.page-title {
|
||||
/*
|
||||
Necessary to properly display the star icon from core's shortcut
|
||||
module.
|
||||
*/
|
||||
display: inline;
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styles for pagination.
|
||||
*/
|
||||
|
||||
[dir="ltr"] .pager__items {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .pager__items {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .pager__items {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .pager__items {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="ltr"] .pager__items {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .pager__items {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.pager__items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
list-style: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pager__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.8125rem;
|
||||
height: 2.8125rem;
|
||||
cursor: default;
|
||||
color: #6e7172;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@media (min-width: 31.25rem) {
|
||||
|
||||
.pager__item {
|
||||
width: 3.375rem;
|
||||
height: 3.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .pager__item--control {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.pager__item--active {
|
||||
color: #fff;
|
||||
background-color: #0d77b5;
|
||||
}
|
||||
|
||||
/* IE11 Specific. */
|
||||
|
||||
@media (-ms-high-contrast: active) {
|
||||
|
||||
.pager__item--control path {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
.pager__item--control path {
|
||||
fill: linktext;
|
||||
}
|
||||
}
|
||||
|
||||
.pager__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: #6e7172;
|
||||
}
|
||||
|
||||
.pager__link:hover {
|
||||
background-color: #e7edf1;
|
||||
}
|
||||
|
||||
.pager__link:focus {
|
||||
color: #0d77b5;
|
||||
outline: solid 2px #0d77b5;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.pager__item svg {
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.pager__item--next svg,
|
||||
.pager__item--last svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for pagination.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.pager__items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
margin-block: 0;
|
||||
margin-inline-start: 0;
|
||||
padding-block: 0;
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: 0;
|
||||
list-style: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pager__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--sp2-5);
|
||||
height: var(--sp2-5);
|
||||
cursor: default;
|
||||
color: var(--color--gray-20);
|
||||
background-color: var(--color--white);
|
||||
|
||||
@media (--sm) {
|
||||
width: var(--sp3);
|
||||
height: var(--sp3);
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .pager__item--control {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.pager__item--active {
|
||||
color: var(--color--white);
|
||||
background-color: var(--color--blue-20);
|
||||
}
|
||||
|
||||
.pager__item--control {
|
||||
& path {
|
||||
/* IE11 Specific. */
|
||||
@media (-ms-high-contrast: active) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
fill: linktext;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pager__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: var(--color--gray-20);
|
||||
}
|
||||
|
||||
.pager__link:hover {
|
||||
background-color: var(--color--gray-80);
|
||||
}
|
||||
|
||||
.pager__link:focus {
|
||||
color: var(--color--blue-20);
|
||||
outline: solid 2px var(--color--blue-20);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.pager__item svg {
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.pager__item--next svg,
|
||||
.pager__item--last svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Powered by block specific styles.
|
||||
*/
|
||||
|
||||
.block-system-powered-by-block {
|
||||
letter-spacing: 0.02em;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
.block-system-powered-by-block a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.block-system-powered-by-block a:hover,
|
||||
.block-system-powered-by-block a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[dir="ltr"] .block-system-powered-by-block .drupal-logo {
|
||||
margin-left: 0.28125rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .block-system-powered-by-block .drupal-logo {
|
||||
margin-right: 0.28125rem;
|
||||
}
|
||||
|
||||
.block-system-powered-by-block .drupal-logo {
|
||||
display: inline-block;
|
||||
margin-top: -0.28125rem;
|
||||
}
|
||||
|
||||
.block-system-powered-by-block svg {
|
||||
width: 0.875rem; /* 14 */
|
||||
height: 1.1875rem; /* 19 */
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.block-system-powered-by-block svg path {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.site-footer .block-system-powered-by-block a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.site-footer .block-system-powered-by-block svg path {
|
||||
fill: #fff;
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* @file
|
||||
* Powered by block specific styles.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.block-system-powered-by-block {
|
||||
letter-spacing: 0.02em;
|
||||
font-size: 14px;
|
||||
line-height: var(--sp);
|
||||
|
||||
& a {
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .drupal-logo {
|
||||
display: inline-block;
|
||||
margin-block-start: calc(-1 * var(--sp) / 4);
|
||||
margin-inline-start: calc(var(--sp) / 4);
|
||||
}
|
||||
|
||||
& svg {
|
||||
width: 0.875rem; /* 14 */
|
||||
height: 1.1875rem; /* 19 */
|
||||
vertical-align: top;
|
||||
|
||||
& path {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer .block-system-powered-by-block {
|
||||
& a {
|
||||
color: var(--color--white);
|
||||
}
|
||||
|
||||
& svg path {
|
||||
fill: var(--color--white);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Progress bar specific styles.
|
||||
*/
|
||||
|
||||
.progress__track {
|
||||
overflow: hidden;
|
||||
height: 1.125rem;
|
||||
border: 1px solid #0d77b5;
|
||||
border-radius: 0.1875rem;
|
||||
}
|
||||
|
||||
.progress__bar {
|
||||
height: 1.125rem;
|
||||
background-color: #0d77b5;
|
||||
}
|
||||
|
||||
[dir="ltr"] .progress__percentage {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
[dir="rtl"] .progress__percentage {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* @file
|
||||
* Progress bar specific styles.
|
||||
*/
|
||||
|
||||
@import "../base/variables.pcss.css";
|
||||
|
||||
.progress__track {
|
||||
overflow: hidden;
|
||||
height: var(--sp);
|
||||
border: 1px solid var(--color--blue-20);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.progress__bar {
|
||||
height: var(--sp);
|
||||
background-color: var(--color--blue-20);
|
||||
}
|
||||
|
||||
.progress__percentage {
|
||||
margin-inline-start: 1rem;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user